lay_me_out 1.2.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +172 -0
  3. data/Rakefile +89 -0
  4. data/app/assets/images/lay_me_out/crumb-arrows.png +0 -0
  5. data/app/assets/images/lay_me_out/favicon.ico +0 -0
  6. data/app/assets/images/lay_me_out/header-background.png +0 -0
  7. data/app/assets/images/lay_me_out/main-background.png +0 -0
  8. data/app/assets/images/lay_me_out/missing_profile.png +0 -0
  9. data/app/assets/images/lay_me_out/payroll-hero-logo-light.png +0 -0
  10. data/app/assets/images/lay_me_out/ph-logo.png +0 -0
  11. data/app/assets/javascripts/lay_me_out.js +18 -0
  12. data/app/assets/javascripts/lay_me_out/application-config.js +3 -0
  13. data/app/assets/javascripts/lay_me_out/navigation.js +29 -0
  14. data/app/assets/javascripts/lay_me_out/user_profile.js +25 -0
  15. data/app/assets/javascripts/lay_me_out/utils/flash-message.js +68 -0
  16. data/app/assets/javascripts/lay_me_out/utils/namespace.js +17 -0
  17. data/app/assets/stylesheets/lay_me_out.css +15 -0
  18. data/app/assets/stylesheets/lay_me_out/buttons.css.scss +55 -0
  19. data/app/assets/stylesheets/lay_me_out/colors.css.scss +31 -0
  20. data/app/assets/stylesheets/lay_me_out/flash.css.scss +40 -0
  21. data/app/assets/stylesheets/lay_me_out/flash_mobile.css.scss +7 -0
  22. data/app/assets/stylesheets/lay_me_out/forms.css.scss +79 -0
  23. data/app/assets/stylesheets/lay_me_out/headers.css.scss +50 -0
  24. data/app/assets/stylesheets/lay_me_out/layout.css.scss +377 -0
  25. data/app/assets/stylesheets/lay_me_out/mixins.css.scss +5 -0
  26. data/app/assets/stylesheets/lay_me_out/reset.css.scss +37 -0
  27. data/app/assets/stylesheets/lay_me_out/side_menu.css.scss +32 -0
  28. data/app/assets/stylesheets/lay_me_out/simple.css.scss +96 -0
  29. data/app/assets/stylesheets/lay_me_out/simple_mobile.css.scss +112 -0
  30. data/app/assets/stylesheets/lay_me_out/tables.css.scss +39 -0
  31. data/app/assets/stylesheets/lay_me_out/text.css.scss +3 -0
  32. data/app/controllers/lay_me_out/styleguide_controller.rb +11 -0
  33. data/app/helpers/lay_me_out/application_helper.rb +49 -0
  34. data/app/models/lay_me_out/user_details.rb +20 -0
  35. data/app/views/lay_me_out/common/_flash.html.haml +14 -0
  36. data/app/views/lay_me_out/common/_flash.mustache.haml +3 -0
  37. data/app/views/lay_me_out/common/_navigation.html.haml +12 -0
  38. data/app/views/lay_me_out/common/_segment_io.html.haml +3 -0
  39. data/app/views/lay_me_out/common/_user_profile.html.haml +12 -0
  40. data/app/views/lay_me_out/styleguide/index.html.haml +1786 -0
  41. data/app/views/layouts/lay_me_out/application.html.haml +47 -0
  42. data/app/views/layouts/lay_me_out/simple.html.haml +42 -0
  43. data/config/routes.rb +3 -0
  44. data/lib/lay_me_out.rb +18 -0
  45. data/lib/lay_me_out/breadcrumb_builder.rb +46 -0
  46. data/lib/lay_me_out/controllers/layout.rb +13 -0
  47. data/lib/lay_me_out/controllers/navigation.rb +36 -0
  48. data/lib/lay_me_out/engine.rb +12 -0
  49. data/lib/lay_me_out/segment_io.rb +20 -0
  50. data/lib/lay_me_out/version.rb +3 -0
  51. data/lib/tasks/lay_me_out_tasks.rake +4 -0
  52. metadata +276 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: b821c76a87f35b36fcf58900c84cbf803d4364fb
4
+ data.tar.gz: 075f0427d11be11061c3d4fb1d11958e2b22a5fa
5
+ SHA512:
6
+ metadata.gz: 2582116f29a042dd09893a2ab39c83f8e7961bad0f5abeb76de3e80026479ceb931c25c91b1b8b17785593038a110966676121ada1c57ce38c65f4354a20c8ad
7
+ data.tar.gz: 91132a4ceeabdcfb8f8ced8249593ee5ce103187378a121eb6ca78777643d40a4589d6b5bdadbbeaf7926d0649e08c992d6cc71456689c13f884b6fcf37247bc
data/README.md ADDED
@@ -0,0 +1,172 @@
1
+ # LayMeOut
2
+
3
+ Provides the common layout and assets for all PayrollHero apps. **LayMeOut requires the asset pipeline to automatically include stylesheets.**
4
+
5
+ ## Installation
6
+
7
+ Add this line to your application's Gemfile:
8
+
9
+ gem 'lay_me_out'
10
+
11
+ And then execute:
12
+
13
+ $ bundle
14
+
15
+ Or install it yourself as:
16
+
17
+ $ gem install lay_me_out
18
+
19
+ ## Usage
20
+
21
+ Add this line to your app's `ApplicationController`:
22
+
23
+ include LayMeOut::Layout
24
+
25
+ then require LayMeOut in your application.css file:
26
+
27
+ *= require self
28
+ *= require lay_me_out
29
+
30
+ and in your application.js file:
31
+
32
+ //= require jquery
33
+ //= require lay_me_out
34
+
35
+ and you are all hooked up!
36
+
37
+ ### Simple Layout
38
+
39
+ Lay-Me-Out comes with two different types of layouts - the default layout, and a basic layout. If you would like to use the basic layout, simply add the following line after the include in your controller:
40
+
41
+ use_simple_layout
42
+
43
+ ### User Profile
44
+
45
+ The user profile partial expects a method called `#current_user_details` to be available from the current controller. It should return a `LayMeOut::UserDetails` object that responds to the following:
46
+ * `#name` - Returns a string representing the user's name
47
+ * `#position` - Returns a string representing the user's job position
48
+ * `#links` - Returns a hash representing the links to appear in the user profile drop down. The key should be the link title, the value should be the link itself.
49
+ * `#profile_picture` - Returns a url to the user's profile picture.
50
+
51
+ ```ruby
52
+ def current_user_details
53
+ LayMeOut::UserDetails.new(
54
+ :name => "Bruce Wayne",
55
+ :position => "Caped Crusader",
56
+ :links => { "Bruce Wayne" => "http://localhost:3000", "Profile Settings" => "http://localhost:3000/profile", "Logout" => "http://localhost:3000/logout" },
57
+ :profile_picture => "https://example.com/profile.png"
58
+ )
59
+ end
60
+ ```
61
+
62
+ The only required field is name.
63
+
64
+ ### Navigation
65
+
66
+ The navigation bar expects a method called `#navigation_links` to be available from the current controller. It should return a hash where the keys are the link title, and the value is either the path or a nested hash.
67
+ E.g.
68
+
69
+ ```ruby
70
+ {
71
+ "Dashboards" => root_path,
72
+ "My Clock" => {
73
+ "My Clock" => "/my_clock",
74
+ "Time Card & Accruals" => "/time_card"
75
+ },
76
+ "Scheduling" => "/scheduling",
77
+ "Analytics" => "/analytics",
78
+ "Developer" => {
79
+ "Biometric Verification" => "/verification",
80
+ }
81
+ }
82
+ ```
83
+
84
+ ### Flash Messages
85
+
86
+ Flash messages are built in to the layout gem. If it is a flash message displayed through a normal page reload, then they will automatically work.
87
+ If you want to display the messages through an AJAX request, you can currently do so by calling the following function in your Javascript:
88
+
89
+ ```javascript
90
+ var flash = LayMeOut.Utils.FlashMessage.getInstance({
91
+ containerId: 'flash',
92
+ messageClass: 'message',
93
+ messageTemplateId: 'flash-message-template',
94
+ interval: 5000
95
+ });
96
+ ```
97
+
98
+ Then you can show a message using:
99
+
100
+ ```javascript
101
+ flash.showFlashMessages({ type: "error", content: "You did something bad!"});
102
+ ```
103
+
104
+ Or multiple messages using:
105
+
106
+ ```javascript
107
+ flash.showFlashMessages([ { type: "error", content: "You did something bad!"},
108
+ { type: "warning", content: "Meh, whatever"},
109
+ { type: "success", content: "You did something good!"},
110
+ { type: "success", content: "And another thing too!"}
111
+ ]);
112
+ ```
113
+
114
+ Currently supported flash message types are **error**, **warning** and **success**.
115
+
116
+ ### Breadcrumbs
117
+
118
+ LayMeOut uses [breadcrumbs_on_rails](https://github.com/weppos/breadcrumbs_on_rails) to display breadcrumbs. The basic way to add breadcrumbs is like this:
119
+
120
+ ```ruby
121
+ class MyController < ApplicationController
122
+ add_breadcrumb "home", :root_path
123
+ add_breadcrumb "my", :my_path
124
+
125
+ def index
126
+ # ...
127
+
128
+ add_breadcrumb "index", index_path
129
+ end
130
+ end
131
+ ```
132
+
133
+ Please see the [breadcrumbs_on_rails docs](http://www.simonecarletti.com/code/breadcrumbs_on_rails/) for further usage.
134
+
135
+ ### Styleguide
136
+
137
+ Add this line to your app's `config/routes.rb`:
138
+
139
+ ```ruby
140
+ mount LayMeOut::Engine => "/lay_me_out"
141
+ ```
142
+
143
+ Then go to `localhost:3000/lay_me_out` on your app to see the style guide.
144
+
145
+ ### Segment.io Support
146
+
147
+ LayMeOut provides client-side support for Segment.io. In order to configure it, simply provide an initializer file in config/initializers with the Segment.io secret as follows:
148
+
149
+ ```ruby
150
+ #config/initializers/segment_io.rb
151
+ SegmentIO.configure do |config|
152
+ config.api_key = 'abcd123456' #replace with your segment.io API key
153
+ end
154
+ ```
155
+
156
+ **Segment.io will only be applied when Rails is using the production environment. If you want server-side support, you will need to include the [analytics-ruby](https://github.com/segmentio/analytics-ruby) gem and set it up with your web server**
157
+
158
+ ### Layout Hooks
159
+
160
+ There are two yields in both layouts in case you need to insert content such as css and javascript include tags in the head tag or the footer div. In your view, for the header use:
161
+
162
+ ```ruby
163
+ - content_for :header_content do
164
+ #content to insert
165
+ ```
166
+
167
+ And for the footer use:
168
+
169
+ ```ruby
170
+ - content_for :footer_content do
171
+ #content to insert
172
+ ```
data/Rakefile ADDED
@@ -0,0 +1,89 @@
1
+ #!/usr/bin/env rake
2
+ begin
3
+ require 'bundler/setup'
4
+ rescue LoadError
5
+ puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
6
+ end
7
+
8
+ begin
9
+ require 'rdoc/task'
10
+ rescue LoadError
11
+ require 'rdoc/rdoc'
12
+ require 'rake/rdoctask'
13
+ RDoc::Task = Rake::RDocTask
14
+ end
15
+
16
+ require 'ansi'
17
+
18
+ RDoc::Task.new(:rdoc) do |rdoc|
19
+ rdoc.rdoc_dir = 'rdoc'
20
+ rdoc.title = 'LayMeOut'
21
+ rdoc.options << '--line-numbers'
22
+ rdoc.rdoc_files.include('README.rdoc')
23
+ rdoc.rdoc_files.include('lib/**/*.rb')
24
+ end
25
+
26
+ Bundler::GemHelper.install_tasks
27
+
28
+ begin
29
+ require 'jasmine'
30
+ load 'jasmine/tasks/jasmine.rake'
31
+ rescue LoadError
32
+ task :jasmine do
33
+ abort "Jasmine is not available. In order to run jasmine, you must: (sudo) gem install jasmine"
34
+ end
35
+ end
36
+
37
+ require "bundler/gem_tasks"
38
+ require "yaml"
39
+
40
+ def version_file_name
41
+ "lib/#{gem_name}/version.rb"
42
+ end
43
+
44
+ def get_version
45
+ r = eval "module TempVersionModule; #{File.read(version_file_name)}; end", binding, version_file_name
46
+ Object.send(:remove_const, "TempVersionModule")
47
+ r
48
+ end
49
+
50
+ def gem_name
51
+ File.basename(Dir["*.gemspec"].first).gsub(/\.gemspec$/, '')
52
+ end
53
+
54
+ def git_directory_dirty?
55
+ status = `git status --porcelain`
56
+ status.strip == '' ? false : status
57
+ end
58
+
59
+ task :ensure_clean_working_directory do
60
+ if dirty = git_directory_dirty?
61
+ $stderr.puts ANSI.red { "Can't push! Working directory not clean!" }
62
+ $stderr.puts ANSI.yellow { dirty }
63
+ exit 1
64
+ end
65
+ end
66
+
67
+ task :push_version_changes_to_git do
68
+ sh "git add #{version_file_name} #{gem_name}.gemspec"
69
+ sh "git commit -m '#{get_version}'"
70
+ sh "git push"
71
+ end
72
+
73
+ task :push => :ensure_clean_working_directory do
74
+
75
+ raise "please set EDITOR variable" unless ENV["EDITOR"]
76
+ system "$EDITOR #{version_file_name}"
77
+
78
+ unless git_directory_dirty?
79
+ $stderr.puts ANSI.red { "version not changed!" }
80
+ exit 1
81
+ end
82
+
83
+ Rake::Task[:build].invoke
84
+
85
+ system("fury push pkg/#{gem_name}-#{get_version}.gem --as=payrollhero")
86
+ puts "Done"
87
+
88
+ Rake::Task[:push_version_changes_to_git].invoke
89
+ end
@@ -0,0 +1,18 @@
1
+ // This is a manifest file that'll be compiled into application.js, which will include all the files
2
+ // listed below.
3
+ //
4
+ // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5
+ // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6
+ //
7
+ // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8
+ // the compiled file.
9
+ //
10
+ // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
11
+ // GO AFTER THE REQUIRES BELOW.
12
+ //
13
+ //= require jquery_ujs
14
+ //= require lay_me_out/utils/namespace
15
+ //= require lay_me_out/application-config
16
+ //= require lay_me_out/utils/flash-message
17
+ //= require lay_me_out/navigation.js
18
+ //= require lay_me_out/user_profile.js
@@ -0,0 +1,3 @@
1
+ LayMeOut.namespace('LayMeOut.Navigation');
2
+ LayMeOut.namespace('LayMeOut.UserProfile');
3
+ LayMeOut.namespace('LayMeOut.Utils');
@@ -0,0 +1,29 @@
1
+ (function (Navigation, $) {
2
+ var displaySubmenu = function(menuItem, submenu) {
3
+ var activeMenuItem = $(menuItem);
4
+ $(submenu).hide();
5
+
6
+ if (activeMenuItem.hasClass('has-sub-menu')) activeMenuItem.find(submenu).show();
7
+ };
8
+
9
+ var activateMenuItem = function(menu, menuItem) {
10
+ $(menu + "> ul > li").removeClass('active');
11
+ menuItem.addClass('active');
12
+ }
13
+
14
+ Navigation.displaySubmenu = displaySubmenu;
15
+ Navigation.activateMenuItem = activateMenuItem;
16
+ })(LayMeOut.Navigation, jQuery);
17
+
18
+ $(function(){
19
+ LayMeOut.Navigation.displaySubmenu('nav.main > ul > li.active', '.sub-menu');
20
+
21
+ $('nav.main > ul > li > a').click(function() {
22
+ var menuItem = $(this).parent();
23
+
24
+ if (menuItem.hasClass('has-sub-menu')) event.preventDefault();
25
+
26
+ LayMeOut.Navigation.activateMenuItem('nav.main', menuItem)
27
+ LayMeOut.Navigation.displaySubmenu('nav.main > ul > li.active', '.sub-menu');
28
+ });
29
+ });
@@ -0,0 +1,25 @@
1
+ (function (UserProfile, $) {
2
+ var toggleMenu = function(menu) {
3
+ var menu = $(menu);
4
+
5
+ if (menu.is(':visible')) {
6
+ menu.hide();
7
+ }
8
+ else {
9
+ menu.show();
10
+
11
+ $('body').one('click',function() {
12
+ toggleMenu(menu);
13
+ });
14
+ };
15
+ };
16
+
17
+ UserProfile.toggleMenu = toggleMenu;
18
+ })(LayMeOut.UserProfile, jQuery);
19
+
20
+ $(function(){
21
+ $('div.user-profile div.drop-down').click(function(event) {
22
+ event.stopPropagation();
23
+ LayMeOut.UserProfile.toggleMenu('ul.user-nav');
24
+ });
25
+ });
@@ -0,0 +1,68 @@
1
+ (function(Application, jQuery, _){
2
+ _.extend(
3
+ Application.namespace('LayMeOut.Utils'),
4
+ (function($) {
5
+ var _FlashMessage = function(options) {
6
+ this.containerId = '#' + options.containerId;
7
+ this.messageClass = '.' + options.messageClass;
8
+ this.messageTemplateId = options.messageTemplateId;
9
+ this.interval = options.interval;
10
+ };
11
+
12
+ _FlashMessage.prototype = (function() {
13
+ var _showFlashMessage = function(message) {
14
+ var self = this;
15
+ var element = _addFlashMessage.apply(self, [message]);
16
+ element.fadeIn('slow');
17
+
18
+ setTimeout(function(){
19
+ _removeFlashMessage.apply(self, [element]);
20
+ }, self.interval);
21
+ };
22
+
23
+ var _showFlashMessages = function(messages) {
24
+ var self = this;
25
+
26
+ if(!_.isArray(messages)) {
27
+ messages = [messages];
28
+ }
29
+ _.each(messages, function(message) {
30
+ _showFlashMessage.apply(self, [message]);
31
+ });
32
+ };
33
+
34
+ var _addFlashMessage = function(message) {
35
+ var self = this;
36
+ var rawHtml = ich[self.messageTemplateId](message);
37
+ $(self.containerId).prepend(rawHtml);
38
+ return $(self.containerId).find(self.messageClass).first()
39
+ };
40
+
41
+ var _removeFlashMessage = function(element) {
42
+ $(element).fadeOut(function(){
43
+ $(this).remove();
44
+ });
45
+ };
46
+
47
+ return {
48
+ showFlashMessages: _showFlashMessages
49
+ };
50
+ }());
51
+
52
+ var FlashMessage = (function() {
53
+ var instance;
54
+
55
+ return {
56
+ getInstance: function(options) {
57
+ if(_.isUndefined(instance)) {
58
+ instance = new _FlashMessage(options);
59
+ }
60
+ return instance;
61
+ }
62
+ };
63
+ }());
64
+
65
+ return {FlashMessage: FlashMessage};
66
+ }(jQuery, ich))
67
+ );
68
+ }(window.LayMeOut = window.LayMeOut || {}, jQuery, _));
@@ -0,0 +1,17 @@
1
+ (function(LayMeOut){
2
+ LayMeOut.namespace = function(namespace_str) {
3
+ var namespace_parts = namespace_str.split('.'),
4
+ parent_namespace = LayMeOut;
5
+
6
+ if(_.first(namespace_parts) === "LayMeOut") {
7
+ namespace_parts = namespace_parts.slice(1);
8
+ }
9
+
10
+ _.each(namespace_parts, function(namespace_part) {
11
+ parent_namespace[namespace_part] = parent_namespace[namespace_part] || {};
12
+ parent_namespace = parent_namespace[namespace_part];
13
+ });
14
+
15
+ return parent_namespace;
16
+ };
17
+ }(window.LayMeOut = window.LayMeOut || {}));