ui_helpers 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +5 -0
- data/CHANGELOG +0 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/app/assets/stylesheets/application.css +13 -0
- data/app/assets/stylesheets/ui_helper.css.scss +34 -0
- data/lib/ui_helpers.rb +12 -0
- data/lib/ui_helpers/elements.rb +31 -0
- data/lib/ui_helpers/elements/button.rb +78 -0
- data/lib/ui_helpers/elements/dialog_content.rb +10 -0
- data/lib/ui_helpers/elements/dialog_cover.rb +36 -0
- data/lib/ui_helpers/elements/element.rb +71 -0
- data/lib/ui_helpers/elements/flash.rb +16 -0
- data/lib/ui_helpers/elements/icon.rb +213 -0
- data/lib/ui_helpers/elements/just_icon.rb +15 -0
- data/lib/ui_helpers/elements/overlay.rb +9 -0
- data/lib/ui_helpers/elements/shadow.rb +10 -0
- data/lib/ui_helpers/elements/widget.rb +28 -0
- data/lib/ui_helpers/elements/widget_content.rb +11 -0
- data/lib/ui_helpers/engine.rb +4 -0
- data/lib/ui_helpers/helpers/action_view_extension.rb +17 -0
- data/lib/ui_helpers/helpers/button.rb +101 -0
- data/lib/ui_helpers/helpers/flash.rb +19 -0
- data/lib/ui_helpers/helpers/form_helpers.rb +17 -0
- data/lib/ui_helpers/helpers/link.rb +33 -0
- data/lib/ui_helpers/helpers/overlay.rb +8 -0
- data/lib/ui_helpers/railtie.rb +15 -0
- data/lib/ui_helpers/version.rb +3 -0
- data/ui_helpers.gemspec +20 -0
- metadata +77 -0
data/.gitignore
ADDED
data/CHANGELOG
ADDED
File without changes
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2012 TODO: Write your name
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
# UiHelpers
|
2
|
+
|
3
|
+
TODO: Write a gem description
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
gem 'ui_helpers'
|
10
|
+
|
11
|
+
And then execute:
|
12
|
+
|
13
|
+
$ bundle
|
14
|
+
|
15
|
+
Or install it yourself as:
|
16
|
+
|
17
|
+
$ gem install ui_helpers
|
18
|
+
|
19
|
+
## Usage
|
20
|
+
|
21
|
+
TODO: Write usage instructions here
|
22
|
+
|
23
|
+
## Contributing
|
24
|
+
|
25
|
+
1. Fork it
|
26
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
27
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
28
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
29
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/*
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
3
|
+
* listed below.
|
4
|
+
*
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
6
|
+
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
|
7
|
+
*
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the top of the
|
9
|
+
* compiled file, but it's generally better to create a new file per style scope.
|
10
|
+
*
|
11
|
+
*= require_self
|
12
|
+
*= require_tree .
|
13
|
+
*/
|
@@ -0,0 +1,34 @@
|
|
1
|
+
// Place all the styles related to the button controller here.
|
2
|
+
// They will automatically be included in application.css.
|
3
|
+
// You can use Sass (SCSS) here: http://sass-lang.com/
|
4
|
+
|
5
|
+
// CSS Preudoclasses:
|
6
|
+
//
|
7
|
+
// :link a:link Selects all unvisited links
|
8
|
+
// :visited a:visited Selects all visited links
|
9
|
+
// :active a:active Selects the active link
|
10
|
+
// :hover a:hover Selects links on mouse over
|
11
|
+
// :focus input:focus Selects the input element which has focus
|
12
|
+
// :first-letter p:first-letter Selects the first letter of every <p> element
|
13
|
+
// :first-line p:first-line Selects the first line of every <p> element
|
14
|
+
// :first-child p:first-child Selects every <p> elements that is the first child of its parent
|
15
|
+
// :before p:before Insert content before every <p> element
|
16
|
+
// :after p:after Insert content after every <p> element
|
17
|
+
// :lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
|
18
|
+
|
19
|
+
.ui-button {
|
20
|
+
&:hover {
|
21
|
+
// inherits .ui-state-hover;
|
22
|
+
border: 1px solid #0073ea; background: #0073ea url(flick/images/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff;
|
23
|
+
.ui-icon {
|
24
|
+
background-image: url(flick/images/ui-icons_ffffff_256x240.png);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
&:active {
|
28
|
+
// inherits .ui-state-active;
|
29
|
+
border: 1px solid #dddddd; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #ff0084;
|
30
|
+
.ui-icon {
|
31
|
+
background-image: url(flick/images/ui-icons_454545_256x240.png);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
data/lib/ui_helpers.rb
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
|
3
|
+
module Positionable
|
4
|
+
extend ActiveSupport::Concern
|
5
|
+
|
6
|
+
included do
|
7
|
+
attr_accessor :width, :height, :top, :left
|
8
|
+
|
9
|
+
after_init do
|
10
|
+
html_options[:style] << "position: absolute;"
|
11
|
+
html_options[:style] << "width: #{width}px;" if width
|
12
|
+
html_options[:style] << "height: #{height}px;" if height
|
13
|
+
html_options[:style] << "top: #{top}px;" if top
|
14
|
+
html_options[:style] << "left: #{left}px;" if left
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
18
|
+
|
19
|
+
require "ui_helpers/elements/element"
|
20
|
+
require "ui_helpers/elements/widget"
|
21
|
+
require "ui_helpers/elements/widget_content"
|
22
|
+
require "ui_helpers/elements/icon"
|
23
|
+
require "ui_helpers/elements/just_icon"
|
24
|
+
require "ui_helpers/elements/dialog_content"
|
25
|
+
require "ui_helpers/elements/dialog_cover"
|
26
|
+
require "ui_helpers/elements/overlay"
|
27
|
+
require "ui_helpers/elements/button"
|
28
|
+
require "ui_helpers/elements/flash"
|
29
|
+
require "ui_helpers/elements/shadow"
|
30
|
+
|
31
|
+
end
|
@@ -0,0 +1,78 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
|
3
|
+
class Button < Widget
|
4
|
+
attr_accessor :primary_icon, :secondary_icon, :text, :value, :title
|
5
|
+
|
6
|
+
after_init do
|
7
|
+
classes.commit("ui-button", "ui-button" => scope)
|
8
|
+
html_options[:title] = title if title
|
9
|
+
html_options[:value] = value if value
|
10
|
+
end
|
11
|
+
|
12
|
+
class Text < Element
|
13
|
+
after_init do
|
14
|
+
classes.commit("ui-button-text")
|
15
|
+
end
|
16
|
+
end
|
17
|
+
|
18
|
+
class OnlyIcon < Icon
|
19
|
+
after_init do
|
20
|
+
classes.commit("ui-button-icons-only")
|
21
|
+
end
|
22
|
+
end
|
23
|
+
|
24
|
+
class PrimaryIcon < Icon
|
25
|
+
after_init do
|
26
|
+
classes.commit("ui-button-icon-primary")
|
27
|
+
end
|
28
|
+
end
|
29
|
+
|
30
|
+
class SecondaryIcon < Icon
|
31
|
+
after_init do
|
32
|
+
classes.commit("ui-button-icon-secondary")
|
33
|
+
end
|
34
|
+
end
|
35
|
+
|
36
|
+
def scope
|
37
|
+
if text && any_icons?
|
38
|
+
if primary_icon && secondary_icon
|
39
|
+
"text-icons" # text + primary_icon + secondary_icon
|
40
|
+
elsif primary_icon
|
41
|
+
"text-icon-primary" # text + primary_icon
|
42
|
+
elsif secondary_icon
|
43
|
+
"text-icon-secondary" # text + secondary_icon
|
44
|
+
end
|
45
|
+
elsif text
|
46
|
+
"text-only" # text only
|
47
|
+
elsif primary_icon && secondary_icon
|
48
|
+
"icons-only" # primary_icon + secondary_icon
|
49
|
+
elsif any_icons?
|
50
|
+
"icon-only" # just 1 icon
|
51
|
+
end
|
52
|
+
end
|
53
|
+
|
54
|
+
def any_icons?
|
55
|
+
primary_icon || secondary_icon
|
56
|
+
end
|
57
|
+
|
58
|
+
def content(&block)
|
59
|
+
capture do |buffer|
|
60
|
+
|
61
|
+
if scope == "icon-only"
|
62
|
+
buffer << OnlyIcon.new(@template, :name => primary_icon).tag(:span)
|
63
|
+
elsif scope.include?("icon") && primary_icon
|
64
|
+
buffer << PrimaryIcon.new(@template, :name => primary_icon).tag(:span)
|
65
|
+
end
|
66
|
+
|
67
|
+
buffer << Text.new(@template).tag(:span, text||" ", &block)
|
68
|
+
|
69
|
+
if scope.include?("icon") && secondary_icon
|
70
|
+
buffer << SecondaryIcon.new(@template, :name => secondary_icon).tag(:span)
|
71
|
+
end
|
72
|
+
|
73
|
+
end
|
74
|
+
end
|
75
|
+
|
76
|
+
end
|
77
|
+
|
78
|
+
end
|
@@ -0,0 +1,36 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
|
3
|
+
class DialogOver < Element
|
4
|
+
attr_accessor :base, :text, :width, :height, :top, :left
|
5
|
+
|
6
|
+
after_init do
|
7
|
+
html_options[:style] << "position: relative; padding:1% 2%; overflow:hidden;"
|
8
|
+
end
|
9
|
+
|
10
|
+
def width; @width||280; end
|
11
|
+
def height; @height||130; end
|
12
|
+
def top; @top||30; end
|
13
|
+
def left; @left||50; end
|
14
|
+
|
15
|
+
def shadow_options
|
16
|
+
{:state => false, :width => width+22, :height => height+22, :top => top, :left => left}
|
17
|
+
end
|
18
|
+
|
19
|
+
def widget_content_options
|
20
|
+
{:state => false, :width => width, :height => height, :top => top, :left => left}
|
21
|
+
end
|
22
|
+
|
23
|
+
def html(tag_name, &block)
|
24
|
+
tag(tag_name) do |buffer|
|
25
|
+
buffer << base
|
26
|
+
buffer << Overlay.new(@template).tag(:div)
|
27
|
+
buffer << Shadow.new(@template, shadow_options).tag(:div)
|
28
|
+
buffer << WidgetContent.new(@template, widget_content_options).tag(:div) do |widget_content|
|
29
|
+
widget_content << DialogContent.new(@template).tag(:div, text)
|
30
|
+
end
|
31
|
+
end
|
32
|
+
end
|
33
|
+
|
34
|
+
end
|
35
|
+
|
36
|
+
end
|
@@ -0,0 +1,71 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
|
3
|
+
class Element
|
4
|
+
class Classes < Array
|
5
|
+
def commit(*args)
|
6
|
+
args.each do |arg|
|
7
|
+
case arg
|
8
|
+
when Hash then arg.each { |key, value| self << [key, value].compact.join("-") unless value.nil? }
|
9
|
+
else self << arg
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
13
|
+
|
14
|
+
def to_s
|
15
|
+
join(" ")
|
16
|
+
end
|
17
|
+
end
|
18
|
+
|
19
|
+
extend ActiveModel::Callbacks
|
20
|
+
|
21
|
+
define_model_callbacks :init, :only => :after
|
22
|
+
|
23
|
+
attr_reader :html_options
|
24
|
+
|
25
|
+
def initialize(*args)
|
26
|
+
params = args.extract_options!
|
27
|
+
@template = args.first||ActionView::Base.new(Rails.configuration.paths["app/views"].first) ## fake
|
28
|
+
@html_options = Hash.new do |h,k|
|
29
|
+
h[k] = case k
|
30
|
+
when :class, "class" then Classes.new
|
31
|
+
else []
|
32
|
+
end
|
33
|
+
end
|
34
|
+
run_callbacks(:init) do
|
35
|
+
params.each do |key, value|
|
36
|
+
send("#{key}=", value)
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
40
|
+
|
41
|
+
def style=(*value)
|
42
|
+
@html_options[:style] << value
|
43
|
+
end
|
44
|
+
|
45
|
+
def classes=(*values)
|
46
|
+
classes.commit(*values)
|
47
|
+
end
|
48
|
+
|
49
|
+
def classes
|
50
|
+
@html_options[:class]
|
51
|
+
end
|
52
|
+
|
53
|
+
def capture(content = nil, &block)
|
54
|
+
ActiveSupport::SafeBuffer.new(content||"").tap do |buffer|
|
55
|
+
yield buffer if block_given?
|
56
|
+
end
|
57
|
+
end
|
58
|
+
|
59
|
+
def tag(tag_name, content = nil, &block)
|
60
|
+
@template.content_tag tag_name, capture(content, &block), @html_options
|
61
|
+
end
|
62
|
+
|
63
|
+
def with_html_options(hash = {})
|
64
|
+
self.tap do |element|
|
65
|
+
element.html_options.merge!(hash)
|
66
|
+
end
|
67
|
+
end
|
68
|
+
|
69
|
+
end
|
70
|
+
|
71
|
+
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
|
3
|
+
class Flash < Widget
|
4
|
+
attr_accessor :icon
|
5
|
+
|
6
|
+
def html(tag_name, &block)
|
7
|
+
tag(tag_name) do |buffer|
|
8
|
+
buffer << Element.new(@template).tag(:p) do |paragraph|
|
9
|
+
paragraph << Icon.new(@template, icon).tag(:span)
|
10
|
+
yield paragraph if block_given?
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
end
|
@@ -0,0 +1,213 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
|
3
|
+
class Icon < Element
|
4
|
+
attr_accessor :name, :v_offset, :h_offset, :width, :height
|
5
|
+
ICONS = {}
|
6
|
+
%Q{
|
7
|
+
/* positioning */
|
8
|
+
.ui-icon-carat-1-n { background-position: 0 0; }
|
9
|
+
.ui-icon-carat-1-ne { background-position: -16px 0; }
|
10
|
+
.ui-icon-carat-1-e { background-position: -32px 0; }
|
11
|
+
.ui-icon-carat-1-se { background-position: -48px 0; }
|
12
|
+
.ui-icon-carat-1-s { background-position: -64px 0; }
|
13
|
+
.ui-icon-carat-1-sw { background-position: -80px 0; }
|
14
|
+
.ui-icon-carat-1-w { background-position: -96px 0; }
|
15
|
+
.ui-icon-carat-1-nw { background-position: -112px 0; }
|
16
|
+
.ui-icon-carat-2-n-s { background-position: -128px 0; }
|
17
|
+
.ui-icon-carat-2-e-w { background-position: -144px 0; }
|
18
|
+
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
19
|
+
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
20
|
+
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
21
|
+
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
22
|
+
.ui-icon-triangle-1-s { background-position: -64px -16px; }
|
23
|
+
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
24
|
+
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
25
|
+
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
26
|
+
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
27
|
+
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
28
|
+
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
29
|
+
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
30
|
+
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
31
|
+
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
32
|
+
.ui-icon-arrow-1-s { background-position: -64px -32px; }
|
33
|
+
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
34
|
+
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
35
|
+
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
36
|
+
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
37
|
+
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
38
|
+
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
39
|
+
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
40
|
+
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
41
|
+
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
42
|
+
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
43
|
+
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
44
|
+
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
|
45
|
+
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
46
|
+
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
47
|
+
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
48
|
+
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
49
|
+
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
50
|
+
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
51
|
+
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
52
|
+
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
53
|
+
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
54
|
+
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
55
|
+
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
56
|
+
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
57
|
+
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
58
|
+
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
59
|
+
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
60
|
+
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
61
|
+
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
62
|
+
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
63
|
+
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
64
|
+
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
65
|
+
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
66
|
+
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
67
|
+
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
68
|
+
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
69
|
+
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
70
|
+
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
71
|
+
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
72
|
+
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
73
|
+
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
74
|
+
.ui-icon-extlink { background-position: -32px -80px; }
|
75
|
+
.ui-icon-newwin { background-position: -48px -80px; }
|
76
|
+
.ui-icon-refresh { background-position: -64px -80px; }
|
77
|
+
.ui-icon-shuffle { background-position: -80px -80px; }
|
78
|
+
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
79
|
+
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
80
|
+
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
81
|
+
.ui-icon-folder-open { background-position: -16px -96px; }
|
82
|
+
.ui-icon-document { background-position: -32px -96px; }
|
83
|
+
.ui-icon-document-b { background-position: -48px -96px; }
|
84
|
+
.ui-icon-note { background-position: -64px -96px; }
|
85
|
+
.ui-icon-mail-closed { background-position: -80px -96px; }
|
86
|
+
.ui-icon-mail-open { background-position: -96px -96px; }
|
87
|
+
.ui-icon-suitcase { background-position: -112px -96px; }
|
88
|
+
.ui-icon-comment { background-position: -128px -96px; }
|
89
|
+
.ui-icon-person { background-position: -144px -96px; }
|
90
|
+
.ui-icon-print { background-position: -160px -96px; }
|
91
|
+
.ui-icon-trash { background-position: -176px -96px; }
|
92
|
+
.ui-icon-locked { background-position: -192px -96px; }
|
93
|
+
.ui-icon-unlocked { background-position: -208px -96px; }
|
94
|
+
.ui-icon-bookmark { background-position: -224px -96px; }
|
95
|
+
.ui-icon-tag { background-position: -240px -96px; }
|
96
|
+
.ui-icon-home { background-position: 0 -112px; }
|
97
|
+
.ui-icon-flag { background-position: -16px -112px; }
|
98
|
+
.ui-icon-calendar { background-position: -32px -112px; }
|
99
|
+
.ui-icon-cart { background-position: -48px -112px; }
|
100
|
+
.ui-icon-pencil { background-position: -64px -112px; }
|
101
|
+
.ui-icon-clock { background-position: -80px -112px; }
|
102
|
+
.ui-icon-disk { background-position: -96px -112px; }
|
103
|
+
.ui-icon-calculator { background-position: -112px -112px; }
|
104
|
+
.ui-icon-zoomin { background-position: -128px -112px; }
|
105
|
+
.ui-icon-zoomout { background-position: -144px -112px; }
|
106
|
+
.ui-icon-search { background-position: -160px -112px; }
|
107
|
+
.ui-icon-wrench { background-position: -176px -112px; }
|
108
|
+
.ui-icon-gear { background-position: -192px -112px; }
|
109
|
+
.ui-icon-heart { background-position: -208px -112px; }
|
110
|
+
.ui-icon-star { background-position: -224px -112px; }
|
111
|
+
.ui-icon-link { background-position: -240px -112px; }
|
112
|
+
.ui-icon-cancel { background-position: 0 -128px; }
|
113
|
+
.ui-icon-plus { background-position: -16px -128px; }
|
114
|
+
.ui-icon-plusthick { background-position: -32px -128px; }
|
115
|
+
.ui-icon-minus { background-position: -48px -128px; }
|
116
|
+
.ui-icon-minusthick { background-position: -64px -128px; }
|
117
|
+
.ui-icon-close { background-position: -80px -128px; }
|
118
|
+
.ui-icon-closethick { background-position: -96px -128px; }
|
119
|
+
.ui-icon-key { background-position: -112px -128px; }
|
120
|
+
.ui-icon-lightbulb { background-position: -128px -128px; }
|
121
|
+
.ui-icon-scissors { background-position: -144px -128px; }
|
122
|
+
.ui-icon-clipboard { background-position: -160px -128px; }
|
123
|
+
.ui-icon-copy { background-position: -176px -128px; }
|
124
|
+
.ui-icon-contact { background-position: -192px -128px; }
|
125
|
+
.ui-icon-image { background-position: -208px -128px; }
|
126
|
+
.ui-icon-video { background-position: -224px -128px; }
|
127
|
+
.ui-icon-script { background-position: -240px -128px; }
|
128
|
+
.ui-icon-alert { background-position: 0 -144px; }
|
129
|
+
.ui-icon-info { background-position: -16px -144px; }
|
130
|
+
.ui-icon-notice { background-position: -32px -144px; }
|
131
|
+
.ui-icon-help { background-position: -48px -144px; }
|
132
|
+
.ui-icon-check { background-position: -64px -144px; }
|
133
|
+
.ui-icon-bullet { background-position: -80px -144px; }
|
134
|
+
.ui-icon-radio-on { background-position: -96px -144px; }
|
135
|
+
.ui-icon-radio-off { background-position: -112px -144px; }
|
136
|
+
.ui-icon-pin-w { background-position: -128px -144px; }
|
137
|
+
.ui-icon-pin-s { background-position: -144px -144px; }
|
138
|
+
.ui-icon-play { background-position: 0 -160px; }
|
139
|
+
.ui-icon-pause { background-position: -16px -160px; }
|
140
|
+
.ui-icon-seek-next { background-position: -32px -160px; }
|
141
|
+
.ui-icon-seek-prev { background-position: -48px -160px; }
|
142
|
+
.ui-icon-seek-end { background-position: -64px -160px; }
|
143
|
+
.ui-icon-seek-start { background-position: -80px -160px; }
|
144
|
+
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
|
145
|
+
.ui-icon-seek-first { background-position: -80px -160px; }
|
146
|
+
.ui-icon-stop { background-position: -96px -160px; }
|
147
|
+
.ui-icon-eject { background-position: -112px -160px; }
|
148
|
+
.ui-icon-volume-off { background-position: -128px -160px; }
|
149
|
+
.ui-icon-volume-on { background-position: -144px -160px; }
|
150
|
+
.ui-icon-power { background-position: 0 -176px; }
|
151
|
+
.ui-icon-signal-diag { background-position: -16px -176px; }
|
152
|
+
.ui-icon-signal { background-position: -32px -176px; }
|
153
|
+
.ui-icon-battery-0 { background-position: -48px -176px; }
|
154
|
+
.ui-icon-battery-1 { background-position: -64px -176px; }
|
155
|
+
.ui-icon-battery-2 { background-position: -80px -176px; }
|
156
|
+
.ui-icon-battery-3 { background-position: -96px -176px; }
|
157
|
+
.ui-icon-circle-plus { background-position: 0 -192px; }
|
158
|
+
.ui-icon-circle-minus { background-position: -16px -192px; }
|
159
|
+
.ui-icon-circle-close { background-position: -32px -192px; }
|
160
|
+
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
161
|
+
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
162
|
+
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
163
|
+
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
164
|
+
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
165
|
+
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
166
|
+
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
167
|
+
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
168
|
+
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
169
|
+
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
170
|
+
.ui-icon-circle-check { background-position: -208px -192px; }
|
171
|
+
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
172
|
+
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
173
|
+
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
174
|
+
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
175
|
+
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
176
|
+
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
177
|
+
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
178
|
+
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
179
|
+
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
180
|
+
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
181
|
+
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
182
|
+
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
183
|
+
}.each_line.map do |line|
|
184
|
+
c = line.split(/\s\{|\}\s/).map(&:strip)
|
185
|
+
if c.size > 1
|
186
|
+
ICONS[c.first[9..-1]] = c.last
|
187
|
+
end
|
188
|
+
end
|
189
|
+
|
190
|
+
def width_style
|
191
|
+
"width: #{width||16 + ((h_offset||0)*1.5).round}px;"
|
192
|
+
end
|
193
|
+
|
194
|
+
def height_style
|
195
|
+
"height: #{height||16 + ((v_offset||0)*1.5).round}px;"
|
196
|
+
end
|
197
|
+
|
198
|
+
def background_style
|
199
|
+
offsets = [h_offset, v_offset]
|
200
|
+
ICONS[name.to_s].gsub(/-?\d+(?=px)/) do |s|
|
201
|
+
s.to_i + (offsets.delete_at(0)||0)
|
202
|
+
end
|
203
|
+
end
|
204
|
+
|
205
|
+
after_init do
|
206
|
+
classes.commit("ui-icon", "ui-icon-#{name}")
|
207
|
+
html_options[:style] << background_style if v_offset||h_offset
|
208
|
+
html_options[:style] << width_style if width||h_offset
|
209
|
+
html_options[:style] << height_style if height||v_offset
|
210
|
+
end
|
211
|
+
end
|
212
|
+
|
213
|
+
end
|
@@ -0,0 +1,28 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
|
3
|
+
class Widget < Element
|
4
|
+
attr_accessor :corner, :state
|
5
|
+
|
6
|
+
after_init do
|
7
|
+
classes.commit("ui-widget", "ui-corner" => corner, "ui-state" => state)
|
8
|
+
end
|
9
|
+
|
10
|
+
def corner
|
11
|
+
case @corner
|
12
|
+
when false then nil
|
13
|
+
when nil then "all"
|
14
|
+
else @corner
|
15
|
+
end
|
16
|
+
end
|
17
|
+
|
18
|
+
def state
|
19
|
+
case @state
|
20
|
+
when false then nil
|
21
|
+
when nil then "default"
|
22
|
+
else @state
|
23
|
+
end
|
24
|
+
end
|
25
|
+
|
26
|
+
end
|
27
|
+
|
28
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
require "ui_helpers/helpers/button"
|
2
|
+
require "ui_helpers/helpers/flash"
|
3
|
+
require "ui_helpers/helpers/link"
|
4
|
+
require "ui_helpers/helpers/overlay"
|
5
|
+
|
6
|
+
module UiHelpers
|
7
|
+
module ActionViewExtension
|
8
|
+
extend ActiveSupport::Concern
|
9
|
+
|
10
|
+
include ButtonHelpers
|
11
|
+
include FlashHelpers
|
12
|
+
include LinkHelpers
|
13
|
+
include OverlayHelpers
|
14
|
+
|
15
|
+
end
|
16
|
+
|
17
|
+
end
|
@@ -0,0 +1,101 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
module ButtonHelpers
|
3
|
+
def ui_button_tag(content_or_options = nil, options = nil, &block)
|
4
|
+
if block_given? && content_or_options.is_a?(Hash)
|
5
|
+
content, options = capture(&block), content_or_options
|
6
|
+
else
|
7
|
+
content, options = content_or_options, options
|
8
|
+
end
|
9
|
+
options ||= {}
|
10
|
+
options = options.stringify_keys
|
11
|
+
|
12
|
+
ui_options = options.delete("ui")||{}
|
13
|
+
ui_options[:text] = content
|
14
|
+
ui_button = UiHelpers::Button.new(self, ui_options)
|
15
|
+
|
16
|
+
options.merge!(ui_button.html_options)
|
17
|
+
|
18
|
+
button_tag(ui_button.content, options)
|
19
|
+
end
|
20
|
+
|
21
|
+
def ui_link_to(name = nil, options = nil, html_options = nil, &block)
|
22
|
+
if block_given?
|
23
|
+
content, path, options = capture(&block), name, options
|
24
|
+
else
|
25
|
+
content, path, options = name, options, html_options
|
26
|
+
end
|
27
|
+
options ||= {}
|
28
|
+
options = options.stringify_keys
|
29
|
+
|
30
|
+
ui_options = options.delete("ui")||{}
|
31
|
+
ui_options[:text] = content
|
32
|
+
ui_button = UiHelpers::Button.new(self, ui_options)
|
33
|
+
|
34
|
+
options.merge!(ui_button.html_options)
|
35
|
+
|
36
|
+
link_to(ui_button.content, path, options)
|
37
|
+
end
|
38
|
+
|
39
|
+
def ui_link_to_function(name, function, html_options={})
|
40
|
+
content = name
|
41
|
+
options = html_options
|
42
|
+
options = options.stringify_keys
|
43
|
+
|
44
|
+
ui_options = options.delete("ui")||{}
|
45
|
+
ui_options[:text] = content
|
46
|
+
ui_button = UiHelpers::Button.new(self, ui_options)
|
47
|
+
|
48
|
+
options.merge!(ui_button.html_options)
|
49
|
+
|
50
|
+
link_to_function(ui_button.content, function, options)
|
51
|
+
end
|
52
|
+
|
53
|
+
def ui_button_to(name = nil, options = nil, html_options = nil, &block)
|
54
|
+
# no icon support for input elements
|
55
|
+
if block_given?
|
56
|
+
content, path, options = capture(&block), name, options
|
57
|
+
else
|
58
|
+
content, path, options = name, options, html_options
|
59
|
+
end
|
60
|
+
options ||= {}
|
61
|
+
options = options.stringify_keys
|
62
|
+
|
63
|
+
ui_options = options.delete("ui")||{}
|
64
|
+
ui_button = UiHelpers::Button.new(self, ui_options)
|
65
|
+
|
66
|
+
options.merge!(ui_button.html_options)
|
67
|
+
|
68
|
+
button_to(content, path, options)
|
69
|
+
end
|
70
|
+
|
71
|
+
def ui_button_to_function(name, function=nil, html_options={})
|
72
|
+
content = name
|
73
|
+
options = html_options
|
74
|
+
options = options.stringify_keys
|
75
|
+
|
76
|
+
ui_options = options.delete("ui")||{}
|
77
|
+
ui_button = UiHelpers::Button.new(self, ui_options)
|
78
|
+
|
79
|
+
options.merge!(ui_button.html_options)
|
80
|
+
|
81
|
+
button_to_function(content, function, options)
|
82
|
+
end
|
83
|
+
|
84
|
+
def ui_submit_tag(value = "Save changes", options = {})
|
85
|
+
content = value
|
86
|
+
options = options.stringify_keys
|
87
|
+
|
88
|
+
ui_options = options.delete("ui")||{}
|
89
|
+
ui_button = UiHelpers::Button.new(self, ui_options)
|
90
|
+
|
91
|
+
options.merge!(ui_button.html_options)
|
92
|
+
|
93
|
+
submit_tag(content, options)
|
94
|
+
end
|
95
|
+
end
|
96
|
+
|
97
|
+
module FormHelpers
|
98
|
+
# submit
|
99
|
+
end
|
100
|
+
|
101
|
+
end
|
@@ -0,0 +1,19 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
module FlashHelpers
|
3
|
+
|
4
|
+
def ui_error(content = nil, &block)
|
5
|
+
content ||= capture(&block)
|
6
|
+
UiHelpers::Flash.new(:state => "error", :style => "padding: 0 .7em;", :icon => {:name => "alert", :style => "float: left; margin-right: .3em;"}).html(:div) do |buffer|
|
7
|
+
buffer << content
|
8
|
+
end
|
9
|
+
end
|
10
|
+
|
11
|
+
def ui_highlight(content = nil, &block)
|
12
|
+
content ||= capture(&block)
|
13
|
+
UiHelpers::Flash.new(:state => "highlight", :style => "padding: 0 .7em;", :icon => {:name => "info", :style => "float: left; margin-right: .3em;"}).html(:div) do |buffer|
|
14
|
+
buffer << content
|
15
|
+
end
|
16
|
+
end
|
17
|
+
|
18
|
+
end
|
19
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
module FormHelpers
|
3
|
+
|
4
|
+
def ui_submit(value=nil, options={})
|
5
|
+
value, options = nil, value if value.is_a?(Hash)
|
6
|
+
value ||= submit_default_value
|
7
|
+
@template.ui_submit_tag(value, options)
|
8
|
+
end
|
9
|
+
|
10
|
+
def ui_button(value = nil, options = {}, &block)
|
11
|
+
value, options = nil, value if value.is_a?(Hash)
|
12
|
+
value ||= submit_default_value
|
13
|
+
@template.ui_button_tag(value, options, &block)
|
14
|
+
end
|
15
|
+
|
16
|
+
end
|
17
|
+
end
|
@@ -0,0 +1,33 @@
|
|
1
|
+
module UiHelpers
|
2
|
+
module LinkHelpers
|
3
|
+
def link_with_icon_to(name = nil, options = nil, html_options = nil, &block)
|
4
|
+
if block_given?
|
5
|
+
content, path, options = capture(&block), name, options
|
6
|
+
else
|
7
|
+
content, path, options = name, options, html_options
|
8
|
+
end
|
9
|
+
options ||= {}
|
10
|
+
options = options.stringify_keys
|
11
|
+
|
12
|
+
options["style"] = [options["style"], "white-space: nowrap;"].compact.join(" ")
|
13
|
+
|
14
|
+
icon = options.delete("icon")
|
15
|
+
content = UiHelpers::LinkIcon.new(self, icon).tag(:span) + content
|
16
|
+
|
17
|
+
link_to(content, path, options)
|
18
|
+
end
|
19
|
+
|
20
|
+
def link_with_icon_to_function(name, function, html_options={})
|
21
|
+
content = name
|
22
|
+
options = html_options
|
23
|
+
options = options.stringify_keys
|
24
|
+
|
25
|
+
options["style"] = [options["style"], "white-space: nowrap;"].compact.join(" ")
|
26
|
+
|
27
|
+
icon = options.delete("icon")
|
28
|
+
content = UiHelpers::LinkIcon.new(self, icon).tag(:span) + content
|
29
|
+
|
30
|
+
link_to_function(content, function, options)
|
31
|
+
end
|
32
|
+
end
|
33
|
+
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
require 'rails'
|
2
|
+
|
3
|
+
module UiHelpers
|
4
|
+
class Railtie < ::Rails::Railtie
|
5
|
+
config.before_initialize do
|
6
|
+
ActiveSupport.on_load :action_view do
|
7
|
+
require 'ui_helpers/helpers/action_view_extension'
|
8
|
+
include ActionViewExtension
|
9
|
+
require 'ui_helpers/helpers/form_helpers'
|
10
|
+
ActionView::Helpers::FormBuilder.send(:include, FormHelpers)
|
11
|
+
end
|
12
|
+
end
|
13
|
+
|
14
|
+
end
|
15
|
+
end
|
data/ui_helpers.gemspec
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'ui_helpers/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |gem|
|
7
|
+
gem.name = "ui_helpers"
|
8
|
+
gem.version = UiHelpers::VERSION
|
9
|
+
gem.authors = ["Valery Kvon"]
|
10
|
+
gem.email = ["addagger@gmail.com"]
|
11
|
+
gem.homepage = %q{http://vkvon.ru/projects/ui_helpers}
|
12
|
+
gem.description = %q{Buttons Icons Overlays and other design features from JQuery UI}
|
13
|
+
gem.summary = %q{JQuery UI helpers for Rails}
|
14
|
+
|
15
|
+
gem.files = `git ls-files`.split($/)
|
16
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
17
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
18
|
+
gem.require_paths = ["lib"]
|
19
|
+
gem.licenses = ['MIT']
|
20
|
+
end
|
metadata
ADDED
@@ -0,0 +1,77 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: ui_helpers
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Valery Kvon
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-12-31 00:00:00.000000000 Z
|
13
|
+
dependencies: []
|
14
|
+
description: Buttons Icons Overlays and other design features from JQuery UI
|
15
|
+
email:
|
16
|
+
- addagger@gmail.com
|
17
|
+
executables: []
|
18
|
+
extensions: []
|
19
|
+
extra_rdoc_files: []
|
20
|
+
files:
|
21
|
+
- .gitignore
|
22
|
+
- CHANGELOG
|
23
|
+
- Gemfile
|
24
|
+
- LICENSE.txt
|
25
|
+
- README.md
|
26
|
+
- Rakefile
|
27
|
+
- app/assets/stylesheets/application.css
|
28
|
+
- app/assets/stylesheets/ui_helper.css.scss
|
29
|
+
- lib/ui_helpers.rb
|
30
|
+
- lib/ui_helpers/elements.rb
|
31
|
+
- lib/ui_helpers/elements/button.rb
|
32
|
+
- lib/ui_helpers/elements/dialog_content.rb
|
33
|
+
- lib/ui_helpers/elements/dialog_cover.rb
|
34
|
+
- lib/ui_helpers/elements/element.rb
|
35
|
+
- lib/ui_helpers/elements/flash.rb
|
36
|
+
- lib/ui_helpers/elements/icon.rb
|
37
|
+
- lib/ui_helpers/elements/just_icon.rb
|
38
|
+
- lib/ui_helpers/elements/overlay.rb
|
39
|
+
- lib/ui_helpers/elements/shadow.rb
|
40
|
+
- lib/ui_helpers/elements/widget.rb
|
41
|
+
- lib/ui_helpers/elements/widget_content.rb
|
42
|
+
- lib/ui_helpers/engine.rb
|
43
|
+
- lib/ui_helpers/helpers/action_view_extension.rb
|
44
|
+
- lib/ui_helpers/helpers/button.rb
|
45
|
+
- lib/ui_helpers/helpers/flash.rb
|
46
|
+
- lib/ui_helpers/helpers/form_helpers.rb
|
47
|
+
- lib/ui_helpers/helpers/link.rb
|
48
|
+
- lib/ui_helpers/helpers/overlay.rb
|
49
|
+
- lib/ui_helpers/railtie.rb
|
50
|
+
- lib/ui_helpers/version.rb
|
51
|
+
- ui_helpers.gemspec
|
52
|
+
homepage: http://vkvon.ru/projects/ui_helpers
|
53
|
+
licenses:
|
54
|
+
- MIT
|
55
|
+
post_install_message:
|
56
|
+
rdoc_options: []
|
57
|
+
require_paths:
|
58
|
+
- lib
|
59
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
60
|
+
none: false
|
61
|
+
requirements:
|
62
|
+
- - ! '>='
|
63
|
+
- !ruby/object:Gem::Version
|
64
|
+
version: '0'
|
65
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
66
|
+
none: false
|
67
|
+
requirements:
|
68
|
+
- - ! '>='
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
version: '0'
|
71
|
+
requirements: []
|
72
|
+
rubyforge_project:
|
73
|
+
rubygems_version: 1.8.24
|
74
|
+
signing_key:
|
75
|
+
specification_version: 3
|
76
|
+
summary: JQuery UI helpers for Rails
|
77
|
+
test_files: []
|