lay_me_out 1.2.8
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +172 -0
- data/Rakefile +89 -0
- data/app/assets/images/lay_me_out/crumb-arrows.png +0 -0
- data/app/assets/images/lay_me_out/favicon.ico +0 -0
- data/app/assets/images/lay_me_out/header-background.png +0 -0
- data/app/assets/images/lay_me_out/main-background.png +0 -0
- data/app/assets/images/lay_me_out/missing_profile.png +0 -0
- data/app/assets/images/lay_me_out/payroll-hero-logo-light.png +0 -0
- data/app/assets/images/lay_me_out/ph-logo.png +0 -0
- data/app/assets/javascripts/lay_me_out.js +18 -0
- data/app/assets/javascripts/lay_me_out/application-config.js +3 -0
- data/app/assets/javascripts/lay_me_out/navigation.js +29 -0
- data/app/assets/javascripts/lay_me_out/user_profile.js +25 -0
- data/app/assets/javascripts/lay_me_out/utils/flash-message.js +68 -0
- data/app/assets/javascripts/lay_me_out/utils/namespace.js +17 -0
- data/app/assets/stylesheets/lay_me_out.css +15 -0
- data/app/assets/stylesheets/lay_me_out/buttons.css.scss +55 -0
- data/app/assets/stylesheets/lay_me_out/colors.css.scss +31 -0
- data/app/assets/stylesheets/lay_me_out/flash.css.scss +40 -0
- data/app/assets/stylesheets/lay_me_out/flash_mobile.css.scss +7 -0
- data/app/assets/stylesheets/lay_me_out/forms.css.scss +79 -0
- data/app/assets/stylesheets/lay_me_out/headers.css.scss +50 -0
- data/app/assets/stylesheets/lay_me_out/layout.css.scss +377 -0
- data/app/assets/stylesheets/lay_me_out/mixins.css.scss +5 -0
- data/app/assets/stylesheets/lay_me_out/reset.css.scss +37 -0
- data/app/assets/stylesheets/lay_me_out/side_menu.css.scss +32 -0
- data/app/assets/stylesheets/lay_me_out/simple.css.scss +96 -0
- data/app/assets/stylesheets/lay_me_out/simple_mobile.css.scss +112 -0
- data/app/assets/stylesheets/lay_me_out/tables.css.scss +39 -0
- data/app/assets/stylesheets/lay_me_out/text.css.scss +3 -0
- data/app/controllers/lay_me_out/styleguide_controller.rb +11 -0
- data/app/helpers/lay_me_out/application_helper.rb +49 -0
- data/app/models/lay_me_out/user_details.rb +20 -0
- data/app/views/lay_me_out/common/_flash.html.haml +14 -0
- data/app/views/lay_me_out/common/_flash.mustache.haml +3 -0
- data/app/views/lay_me_out/common/_navigation.html.haml +12 -0
- data/app/views/lay_me_out/common/_segment_io.html.haml +3 -0
- data/app/views/lay_me_out/common/_user_profile.html.haml +12 -0
- data/app/views/lay_me_out/styleguide/index.html.haml +1786 -0
- data/app/views/layouts/lay_me_out/application.html.haml +47 -0
- data/app/views/layouts/lay_me_out/simple.html.haml +42 -0
- data/config/routes.rb +3 -0
- data/lib/lay_me_out.rb +18 -0
- data/lib/lay_me_out/breadcrumb_builder.rb +46 -0
- data/lib/lay_me_out/controllers/layout.rb +13 -0
- data/lib/lay_me_out/controllers/navigation.rb +36 -0
- data/lib/lay_me_out/engine.rb +12 -0
- data/lib/lay_me_out/segment_io.rb +20 -0
- data/lib/lay_me_out/version.rb +3 -0
- data/lib/tasks/lay_me_out_tasks.rake +4 -0
- 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
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -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,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 || {}));
|