merb-ui 0.3.2 → 0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. data/README +4 -2
  2. data/Rakefile +1 -1
  3. data/app/controllers/styles.rb +9 -5
  4. data/app/helpers/global_helpers.rb +79 -56
  5. data/app/helpers/styles_helper.rb +53 -55
  6. data/app/views/styles/index.css.erb +180 -202
  7. data/public/images/{transparency.png → glass.png} +0 -0
  8. data/public/images/{reflection.png → plastic.png} +0 -0
  9. data/public/images/rubber.png +0 -0
  10. metadata +5 -4
data/README CHANGED
@@ -49,8 +49,10 @@ a
49
49
  </head>
50
50
  <body>
51
51
  <%= mui_body do %>
52
- <%= mui_bar(:tab_width => '6em') do %>
53
- <%= mui_tab(:type => 'merb_words') %><%= mui_tab(:type => 'merb_photos') %><%= mui_tab(:title => 'Projects', :controller => 'projects', :url => url(:projects)) %>
52
+ <%= mui_bar do %>
53
+ <%= mui_tab_group(:tab_width => '6em') do %>
54
+ <%= mui_tab(:type => 'merb_words') %><%= mui_tab(:type => 'merb_photos') %><%= mui_tab(:title => 'Projects', :controller => 'projects', :url => url(:projects)) %>
55
+ <% end =%>
54
56
  <% end =%>
55
57
  <% end =%>
56
58
  </body>
data/Rakefile CHANGED
@@ -14,7 +14,7 @@ spec = Gem::Specification.new do |s|
14
14
  s.name = 'merb-ui'
15
15
  s.rubyforge_project = 'uipoet'
16
16
  s.summary = 'User Interface Components for Merb'
17
- s.version = '0.3.2'
17
+ s.version = '0.4'
18
18
  end
19
19
 
20
20
  Rake::GemPackageTask.new(spec) do |pkg|
data/app/controllers/styles.rb CHANGED
@@ -4,14 +4,18 @@ class MerbUi::Styles < MerbUi::Application
4
4
 
5
5
  def index
6
6
  if mui_browser == 'gecko'
7
- @browser = selector('*::-moz-focus-inner') do
8
- property('border', :value => 'none')
9
- property('padding', :value => 0)
7
+ focus = selector('*::-moz-focus-inner') do
8
+ property('border', :value => 'none') +
9
+ property('padding', :linebreak => true, :value => 0)
10
10
  end
11
+ input = selector('input') do
12
+ property('-moz-box-sizing', :value => 'border-box')
13
+ end
14
+ @browser = focus + input
11
15
  elsif mui_browser == 'msie'
12
16
  @browser = selector('*.mui_button') do
13
- property('overflow', :value => 'visible')
14
- property('width', :value => 'auto')
17
+ property('overflow', :value => 'visible') +
18
+ property('width', :linebreak => true, :value => 'auto')
15
19
  end
16
20
  end
17
21
  render :layout => false
data/app/helpers/global_helpers.rb CHANGED
@@ -1,7 +1,6 @@
1
1
  module Merb::GlobalHelpers
2
2
 
3
3
  def mui_bar(options = {}, &block)
4
- @@mui_bar_tab_width = options[:tab_width] if options[:tab_width]
5
4
  tag(:div, capture(&block), :class => 'mui_bar')
6
5
  end
7
6
 
@@ -9,23 +8,15 @@ module Merb::GlobalHelpers
9
8
  attributes = {}
10
9
  attributes[:align] = options[:align] if options[:align]
11
10
  attributes[:class] = 'mui_block'
12
- if type = options[:type]
13
- if type == 'inline'
14
- tag_type = :span
15
- elsif type == 'tray_inline'
16
- tag_type = :span
17
- attributes[:class] << %{ mui_block_tray}
18
- else
19
- tag_type = :div
20
- attributes[:class] << %{ mui_block_#{type}}
21
- end
11
+ if options[:inline]
12
+ tag_type = :span
22
13
  else
23
14
  tag_type = :div
24
15
  end
25
16
  if options[:height] || options[:width]
26
17
  attributes[:style] = ''
27
- attributes[:style] << %{height:#{options[:height]};} if options[:height]
28
- attributes[:style] << %{width:#{options[:width]};} if options[:width]
18
+ attributes[:style] << "height:#{options[:height]};" if options[:height]
19
+ attributes[:style] << "width:#{options[:width]};" if options[:width]
29
20
  end
30
21
  content = ''
31
22
  content << mui_title(:title => options[:title], :title_size => options[:title_size]) if options[:title]
@@ -42,7 +33,7 @@ module Merb::GlobalHelpers
42
33
  message_content = mui_button(:title => '&#215;', :message => 'close')
43
34
  message_content << message[:title] if message[:title]
44
35
  message_content << message[:body] if message[:body]
45
- output << tag(:div, message_content, :class => %{mui_message mui_message_#{message[:tone]}})
36
+ output << tag(:div, message_content, :class => "mui_message mui_message_#{message[:tone]}")
46
37
  session.delete(:mui_message)
47
38
  end
48
39
  output << capture(&block)
@@ -51,10 +42,10 @@ module Merb::GlobalHelpers
51
42
  if copyright_now == copyright_then
52
43
  copyright_years = copyright_now
53
44
  else
54
- copyright_years = %{#{copyright_then}-#{copyright_now}}
45
+ copyright_years = "#{copyright_then}-#{copyright_now}"
55
46
  end
56
- copyright_owner = %{ #{MerbUi[:owner]}} if MerbUi[:owner]
57
- copyright_text = %{Copyright &copy; #{copyright_years}#{copyright_owner}. All rights reserved.}
47
+ copyright_owner = " #{MerbUi[:owner]}" if MerbUi[:owner]
48
+ copyright_text = "Copyright &copy; #{copyright_years}#{copyright_owner}. All rights reserved."
58
49
  copyright = tag(:div, copyright_text, :class => 'mui_copyright')
59
50
  output << tag(:div, catch_content(:for_layout) + copyright, attributes)
60
51
  output << tag(:div, :class => 'mui_window_target')
@@ -81,13 +72,17 @@ module Merb::GlobalHelpers
81
72
  def mui_button(options = {}, &block)
82
73
  attributes = {}
83
74
  attributes[:class] = 'mui_button'
84
- attributes[:class] << %{ mui_button_tone_#{options[:tone] || 'neutral'}}
75
+ attributes[:class] << " mui_button_tone_#{options[:tone] || 'neutral'}"
85
76
  attributes[:class] << ' mui_click'
86
- attributes[:class] << %{_message_#{options[:message]}} if options[:message]
87
- attributes[:class] << %{_window_#{options[:window]}} if options[:window]
77
+ attributes[:class] << "_message_#{options[:message]}" if options[:message]
78
+ attributes[:class] << "_window_#{options[:window]}" if options[:window]
88
79
  attributes[:id] = options[:url] if options[:url]
89
80
  attributes[:name] = options[:name] if options[:name]
90
- attributes[:style] = %{width:#{options[:width]};} if options[:width]
81
+ if options[:title_size] || options[:width]
82
+ attributes[:style] = ''
83
+ attributes[:style] << "font-size:#{options[:title_size]};" if options[:title_size]
84
+ attributes[:style] << "width:#{options[:width]};" if options[:width]
85
+ end
91
86
  attributes[:type] = options[:submit] == true ? 'submit' : 'button'
92
87
  attributes[:value] = options[:title] if options[:title]
93
88
  if block_given?
@@ -108,12 +103,14 @@ module Merb::GlobalHelpers
108
103
  attributes = {}
109
104
  attributes[:align] = @mui_grid[:align] || options[:align] || nil
110
105
  attributes[:nowrap] = 'nowrap' if options[:wrap] == false
111
- if options[:width]
112
- attributes[:style] = %{width:#{options[:width]}}
113
- else
114
- attributes[:style] = %{width:#{@mui_grid[:width]}} if @mui_grid[:width]
106
+ if options[:height] || options[:width] || @mui_grid[:height] || @mui_grid[:width]
107
+ height = options[:height] || @mui_grid[:height] || nil
108
+ width = options[:width] ||= @mui_grid[:width] || nil
109
+ attributes[:style] = ''
110
+ attributes[:style] << "height:#{height};" if height
111
+ attributes[:style] << "width:#{width};" if width
115
112
  end
116
- attributes[:valign] = @mui_grid[:valign] || options[:valign] || 'top'
113
+ attributes[:valign] = @mui_grid[:valign] || options[:valign] || nil
117
114
  html = ''
118
115
  if @mui_grid[:count] > @mui_grid[:columns]
119
116
  @mui_grid[:count] = 0
@@ -139,7 +136,7 @@ module Merb::GlobalHelpers
139
136
  def mui_delete(options = {})
140
137
  attributes = {}
141
138
  attributes[:class] = 'mui_button mui_button_tone_negative'
142
- attributes[:style] = %{width:#{options[:width]};} if options[:width]
139
+ attributes[:style] = "width:#{options[:width]};" if options[:width]
143
140
  delete_button(options[:url], options[:title], attributes)
144
141
  end
145
142
 
@@ -155,14 +152,14 @@ module Merb::GlobalHelpers
155
152
  return unless block_given?
156
153
  mui_grid_temp = @mui_grid if @mui_grid
157
154
  @mui_grid = {}
158
- @mui_grid[:align] = options[:cell_align]
155
+ @mui_grid[:align] = options[:cell_align] if options[:cell_align]
159
156
  @mui_grid[:count] = 0
160
157
  @mui_grid[:columns] = options[:columns] || 1
161
- @mui_grid[:valign] = options[:cell_valign]
162
- @mui_grid[:width] = options[:cell_width]
158
+ @mui_grid[:valign] = options[:cell_valign] if options[:cell_valign]
159
+ @mui_grid[:width] = options[:cell_width] if options[:cell_width]
163
160
  attributes = {}
164
161
  attributes[:class] = 'mui_grid'
165
- attributes[:style] = %{width:#{options[:width]}} if options[:width]
162
+ attributes[:style] = "width:#{options[:width]}" if options[:width]
166
163
  html = tag(:table, tag(:tr, capture(&block)), attributes)
167
164
  @mui_grid = mui_grid_temp if mui_grid_temp
168
165
  html
@@ -193,8 +190,8 @@ module Merb::GlobalHelpers
193
190
  attributes[:class] << ' mui_image_rounded' if options[:rounded] == true
194
191
  attributes[:src] = "#{mui_path :image}/nil.png"
195
192
  attributes[:style] = %{background-image: url('#{options[:url]}');}
196
- attributes[:style] << %{height: #{options[:height]}px;}
197
- attributes[:style] << %{width: #{options[:width]}px;}
193
+ attributes[:style] << "height: #{options[:height]}px;"
194
+ attributes[:style] << "width: #{options[:width]}px;"
198
195
  else
199
196
  attributes[:src] = file
200
197
  end
@@ -213,7 +210,7 @@ module Merb::GlobalHelpers
213
210
  else
214
211
  content = options[:title]
215
212
  end
216
- attributes[:style] = %{font-size:#{options[:title_size]};} if options[:title_size]
213
+ attributes[:style] = "font-size:#{options[:title_size]};" if options[:title_size]
217
214
  tag(:a, content, attributes)
218
215
  end
219
216
 
@@ -246,17 +243,17 @@ module Merb::GlobalHelpers
246
243
  def mui_search(options = {})
247
244
  attributes = {}
248
245
  attributes[:class] = 'mui_search'
249
- attributes[:name] = :query
246
+ attributes[:name] = :q
250
247
  attributes[:style] = "width:#{options[:width]};" if options[:width]
251
248
  attributes[:type] = :text
252
- attributes[:value] = params[:query]
253
- input = self_closing_tag(:input, attributes)
254
- button = mui_button(:submit => true, :title => 'Search')
255
- grid = mui_grid(:columns => 2){
256
- mui_cell(:valign => 'middle'){input} +
257
- mui_cell(:align => 'right', :valign => 'middle', :wrap => false){button}
258
- }
259
- tag(:form, grid, :action => options[:action])
249
+ attributes[:value] = params[:q]
250
+ inputs = self_closing_tag(:input, attributes) + mui_button(:submit => true, :title => 'Search')
251
+ form = tag(:form, inputs, :action => options[:action])
252
+ mui_block(:inline => true){form}
253
+ end
254
+
255
+ def mui_status(&block)
256
+ tag(:div, capture(&block), :class => 'mui_status')
260
257
  end
261
258
 
262
259
  def mui_tab(options = {}, &block)
@@ -264,35 +261,42 @@ module Merb::GlobalHelpers
264
261
  if type = options[:type]
265
262
  if type == 'merb_words'
266
263
  controller = 'merb_words/pages'
267
- title = options[:title] || MerbWords[:title] || 'Untitled'
268
- attributes[:href] = options[:url] || url(:merb_words_index)
264
+ attributes[:value] = options[:title] || MerbWords[:title] || 'Untitled'
265
+ attributes[:id] = options[:url] || url(:merb_words_index)
269
266
  elsif type == 'merb_photos'
270
267
  controller = 'merb_photos/photos'
271
- title = options[:title] || MerbPhotos[:title] || 'Untitled'
272
- attributes[:href] = options[:url] || url(:merb_photos_index)
268
+ attributes[:value] = options[:title] || MerbPhotos[:title] || 'Untitled'
269
+ attributes[:id] = options[:url] || url(:merb_photos_index)
273
270
  end
274
271
  else
275
272
  controller = options[:controller] || 'application'
276
- title = options[:title] || 'Untitled'
277
- attributes[:href] = options[:url] || '/'
273
+ attributes[:value] = options[:title] || 'Untitled'
274
+ attributes[:id] = options[:url] || '/'
278
275
  end
279
276
  attributes[:class] = 'mui_tab'
280
277
  attributes[:class] << ' mui_selected' if controller == controller_name || options[:selected] == true
278
+ attributes[:class] << ' mui_click'
281
279
  if options[:width]
282
- attributes[:style] = %{width:#{options[:width]}}
283
- elsif @@mui_bar_tab_width
284
- attributes[:style] = %{width:#{@@mui_bar_tab_width}}
280
+ attributes[:style] = "width:#{options[:width]}"
281
+ elsif @@mui_tab_width
282
+ attributes[:style] = "width:#{@@mui_tab_width}"
285
283
  end
286
- tag(:a, title, attributes)
284
+ attributes[:type] = 'button'
285
+ self_closing_tag(:input, attributes)
287
286
  end
288
287
 
288
+ def mui_tab_group(options = {}, &block)
289
+ @@mui_tab_width = options[:tab_width] if options[:tab_width]
290
+ tag(:span, capture(&block), :class => 'mui_tab_group')
291
+ end
292
+
289
293
  def mui_text(name, options = {})
290
294
  attributes = {}
291
295
  attributes[:class] = 'mui_text'
292
296
  attributes[:class] << ' mui_focus' if options[:focus] == true
293
297
  attributes[:label] = options[:title]
294
298
  attributes[:maxlength] = options[:length] || 50
295
- attributes[:style] = %{width:#{options[:width]};} if options[:width]
299
+ attributes[:style] = "width:#{options[:width]};" if options[:width]
296
300
  text_field(name, attributes)
297
301
  end
298
302
 
@@ -300,11 +304,30 @@ module Merb::GlobalHelpers
300
304
  size = options[:title_size] || '1.5em'
301
305
  attributes = {}
302
306
  attributes[:class] = 'mui_title'
303
- attributes
304
- attributes[:style] = %{font-size:#{size}}
307
+ attributes[:style] = "font-size:#{size}"
305
308
  tag(:div, options[:title], attributes)
306
309
  end
307
310
 
311
+ def mui_tray(options = {}, &block)
312
+ attributes = {}
313
+ attributes[:align] = options[:align] if options[:align]
314
+ attributes[:class] = 'mui_tray'
315
+ if options[:inline]
316
+ tag_type = :span
317
+ else
318
+ tag_type = :div
319
+ end
320
+ if options[:height] || options[:width]
321
+ attributes[:style] = ''
322
+ attributes[:style] << "height:#{options[:height]};" if options[:height]
323
+ attributes[:style] << "width:#{options[:width]};" if options[:width]
324
+ end
325
+ content = ''
326
+ content << mui_title(:title => options[:title], :title_size => options[:title_size]) if options[:title]
327
+ content << capture(&block) if block_given?
328
+ tag(tag_type, content, attributes)
329
+ end
330
+
308
331
  def mui_window(options = {}, &block)
309
332
  script = js_include_tag("#{mui_path :javascript}/window")
310
333
  bar_content = ''
data/app/helpers/styles_helper.rb CHANGED
@@ -1,52 +1,58 @@
1
1
  module Merb::MerbUi::StylesHelper
2
2
 
3
- def border_radius(options={})
4
- options[:amount] ||= 0.5
5
- if mui_browser == 'gecko'
6
- property('-moz') do
7
- property('border') do
8
- if options[:edge] == 'bottom'
9
- property('radius') do
10
- property('bottomleft', :value => %{#{options[:amount]}em})
11
- property('bottomright', :value => %{#{options[:amount]}em})
12
- property('topleft', :value => 0)
13
- property('topright', :value => 0)
14
- end
15
- elsif options[:edge] == 'top'
16
- property('radius') do
17
- property('bottomleft', :value => 0)
18
- property('bottomright', :value => 0)
19
- property('topleft', :value => %{#{options[:amount]}em})
20
- property('topright', :value => %{#{options[:amount]}em})
21
- end
22
- else
23
- property('radius', :value => %{#{options[:amount]}em})
24
- end
25
- end
3
+ def round(options={})
4
+
5
+ options[:amount] ||= 0.4
6
+ value_false = 0
7
+ value_true = "#{options[:amount]}em"
8
+ if options[:bottom_left]
9
+ bottom_left = {:value => value_true}
10
+ else
11
+ bottom_left = {:value => value_false}
12
+ end
13
+ if options[:bottom_right]
14
+ bottom_right = {:linebreak => true, :value => value_true}
15
+ else
16
+ bottom_right = {:linebreak => true, :value => value_false}
17
+ end
18
+ if options[:top_left]
19
+ top_left = {:linebreak => true, :value => value_true}
20
+ else
21
+ top_left = {:linebreak => true, :value => value_false}
22
+ end
23
+ if options[:top_right]
24
+ top_right = {:linebreak => true, :value => value_true}
25
+ else
26
+ top_right = {:linebreak => true, :value => value_false}
27
+ end
28
+
29
+ if options[:bottom_left] | options[:bottom_right] | options[:top_left] | options[:top_right]
30
+ if mui_browser == 'gecko'
31
+ title = "-moz-border-"
32
+ property("#{title}radius-bottomleft", bottom_left) +
33
+ property("#{title}radius-bottomright", bottom_right) +
34
+ property("#{title}radius-topleft", top_left) +
35
+ property("#{title}radius-topright", top_right)
36
+ elsif mui_browser == 'webkit'
37
+ title = "-webkit-border-"
38
+ property("#{title}bottom-left-radius", bottom_left) +
39
+ property("#{title}bottom-right-radius", bottom_right) +
40
+ property("#{title}top-left-radius", top_left) +
41
+ property("#{title}top-right-radius", top_right)
26
42
  end
27
- elsif mui_browser == 'webkit'
28
- property('-webkit') do
29
- property('border') do
30
- if options[:edge] == 'bottom'
31
- property('bottom-left-radius', :value => %{#{options[:amount]}em})
32
- property('bottom-right-radius', :value => %{#{options[:amount]}em})
33
- property('top-left-radius', :value => 0)
34
- property('top-right-radius', :value => 0)
35
- elsif options[:edge] == 'top'
36
- property('bottom-left-radius', :value => 0)
37
- property('bottom-right-radius', :value => 0)
38
- property('top-left-radius', :value => %{#{options[:amount]}em})
39
- property('top-right-radius', :value => %{#{options[:amount]}em})
40
- else
41
- property('radius', :value => %{#{options[:amount]}em})
42
- end
43
- end
43
+ else
44
+ if mui_browser == 'gecko'
45
+ title = "-moz-border-"
46
+ elsif mui_browser == 'webkit'
47
+ title = "-webkit-border-"
44
48
  end
49
+ property("#{title}radius", :value => value_true)
45
50
  end
51
+
46
52
  end
47
53
 
48
54
  def color(r,g,b)
49
- %{rgb(#{decimal_to_rgb(r)}, #{decimal_to_rgb(g)}, #{decimal_to_rgb(b)})}
55
+ "rgb(#{decimal_to_rgb(r)}, #{decimal_to_rgb(g)}, #{decimal_to_rgb(b)})"
50
56
  end
51
57
 
52
58
  def decimal_to_rgb(d)
@@ -57,22 +63,14 @@ module Merb::MerbUi::StylesHelper
57
63
  'min-height: 0;' if msie?
58
64
  end
59
65
 
60
- def property(property, options={})
61
- @parent ||= ''
62
- @child ||= ''
63
- if block_given?
64
- @child = nil
65
- @parent << %{#{property}-}
66
- yield
67
- @parent = nil
68
- @child
69
- elsif options[:value]
70
- @child << %{\r #{@parent}#{property}: #{options[:value]};}
71
- end
66
+ def property(title, options={})
67
+ output = ''
68
+ output << "\r " if options[:linebreak] == true
69
+ output << title + ': ' + options[:value].to_s + ';'
72
70
  end
73
71
 
74
- def selector(selector)
75
- "#{selector} {#{yield}\r}\r"
72
+ def selector(title)
73
+ title + ' {' + yield + "}\r"
76
74
  end
77
75
 
78
76
  end
data/app/views/styles/index.css.erb CHANGED
@@ -1,24 +1,15 @@
1
1
  <%= @browser -%>
2
-
3
2
  * {
4
- font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
3
+ font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
4
+ font-size: 1em;
5
5
  margin: 0;
6
6
  padding: 0;
7
7
  }
8
8
  body {
9
9
  font-size: 13px;
10
10
  }
11
- b, em, h1, i, label, strong {
12
- font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
13
- }
14
- b, em, h1, label, strong {
15
- font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
16
- font-weight: bold;
17
- }
18
11
  code, code em, pre {
19
- font-family: "Bitstream Vera Sans Mono", "Monaco", "Andale Mono", "Courier New", "Courier", fixed;
20
- font-style: normal;
21
- font-weight: normal;
12
+ font-family: 'Bitstream Vera Sans Mono', 'Monaco', 'Lucida Console' monospace;
22
13
  }
23
14
  code, pre {
24
15
  font-size: 0.85em;
@@ -33,6 +24,8 @@ code {
33
24
  }
34
25
  code em {
35
26
  color: <%= color(0, 1, 0) %>;
27
+ font-style: normal;
28
+ font-weight: normal;
36
29
  }
37
30
  kbd {
38
31
  background-color: <%= color(0.9, 0.9, 0.9) %>;
@@ -40,135 +33,102 @@ kbd {
40
33
  border-style: solid;
41
34
  border-width: 1px;
42
35
  padding: 0 0.5em 0.2em 0.5em;
43
- <%= border_radius %>
36
+ <%= round %>
37
+ }
38
+ label, .mui_title {
39
+ font-weight: bold;
40
+ }
41
+ label {
42
+ display: block;
43
+ font-size: 0.85em;
44
+ }
45
+ select.date {
46
+ margin-top: 0.25em;
47
+ }
48
+ select.month, select.day {
49
+ margin-right: 0.25em;
44
50
  }
45
51
 
46
52
  /* bar */
47
53
 
48
- div.mui_bar {
49
- background-color: <%= color(0.1, 0.1, 0.1) %>;
50
- background-image: url('<%= mui_path :image %>/reflection.png');
54
+ .mui_bar {
55
+ background-color: <%= color(0.2, 0.2, 0.2) %>;
56
+ background-image: url('<%= mui_path :image %>/rubber.png');
51
57
  background-position: center center;
52
58
  background-repeat: repeat-x;
53
- border-collapse: collapse;
59
+ border-bottom-color: <%= color(0, 0, 0) %>;
60
+ border-bottom-style: solid;
61
+ border-bottom-width: 1px;
62
+ border-top-color: <%= color(0.2, 0.2, 0.2) %>;
63
+ border-top-style: solid;
64
+ border-top-width: 1px;
54
65
  color: <%= color(1, 1, 1) %>;
55
- width: 100%;
66
+ padding: 0.5em 1.5em 0.5em 1.5em;
56
67
  }
57
68
 
58
69
  /* block */
59
70
 
60
- *.mui_block {
71
+ .mui_block {
61
72
  margin: 0.5em;
62
73
  }
63
- span.mui_block {
64
- display: inline-block;
65
- vertical-align: top;
66
- }
67
- span.mui_block_tray {
68
- background-color: <%= color(0.95, 0.95, 0.95) %>;
69
- border-bottom-color: <%= color(0.9, 0.9, 0.9) %>;
70
- border-left-color: <%= color(0.8, 0.8, 0.8) %>;
71
- border-right-color: <%= color(0.8, 0.8, 0.8) %>;
72
- border-top-color: <%= color(0.7, 0.7, 0.7) %>;
73
- border-style: solid;
74
- border-width: 1px;
75
- display: inline-block;
76
- padding: 1em;
77
- vertical-align: top;
78
- <%= border_radius %>
74
+ .mui_block .mui_block, .mui_block .mui_tray {
75
+ margin: 0;
79
76
  }
80
- div.mui_block_status {
81
- background-image: url('<%= mui_path :image %>/transparency.png');
77
+ .mui_block_status {
78
+ background-image: url('<%= mui_path :image %>/glass.png');
82
79
  border-color: <%= color(0, 0, 0) %>;
83
80
  border-style: solid;
84
81
  border-width: 1px;
85
82
  color: <%= color(0.5, 0.5, 0.5) %>;
86
- display: inline-block;
87
- padding: 1em;
83
+ padding: 0.5em;
88
84
  position: absolute;
89
85
  right: 1.5em;
90
86
  top: 0;
91
- <%= border_radius %>
87
+ <%= round %>
92
88
  }
93
- div.mui_block_tray {
94
- background-color: <%= color(0.95, 0.95, 0.95) %>;
95
- border-bottom-color: <%= color(0.9, 0.9, 0.9) %>;
96
- border-left-color: <%= color(0.8, 0.8, 0.8) %>;
97
- border-right-color: <%= color(0.8, 0.8, 0.8) %>;
98
- border-top-color: <%= color(0.7, 0.7, 0.7) %>;
99
- border-style: solid;
100
- border-width: 1px;
101
- padding: 1em;
102
- <%= border_radius %>
103
- }
104
- div.mui_block_tray *.mui_block {
105
- margin: 0;
89
+ div.mui_block+div.mui_block {
90
+ margin-top: 1em;
106
91
  }
107
- *.mui_block+*.mui_block, div.mui_title+*.mui_block {
108
- margin-top: 1em !important;
92
+ span.mui_block {
93
+ display: inline-block;
94
+ white-space: nowrap;
109
95
  }
110
96
 
111
97
  /* button */
112
98
 
113
- *.mui_button {
114
- background-image: url('<%= mui_path :image %>/reflection.png');
99
+ .mui_button {
100
+ background-image: url('<%= mui_path :image %>/plastic.png');
115
101
  background-position: center center;
116
102
  background-repeat: repeat-x;
117
103
  border-style: solid;
118
104
  border-width: 1px;
119
- font-size: 0.85em;
105
+ color: <%= color(1, 1, 1) %>;
106
+ line-height: 1.5em;
120
107
  min-height: 1.5em;
121
- padding-left: 1em;
122
- padding-right: 1em;
123
- <%= border_radius %>
108
+ padding: 0 1em 0 1em;
109
+ text-align: center;
110
+ <%= round %>
124
111
  }
125
- *.mui_button_tone_neutral {
126
- background-color: <%= color(0.2, 0.2, 0.2) %>;
127
- border-bottom-color: <%= color(0, 0, 0) %>;
128
- border-left-color: <%= color(0.1, 0.1, 0.1) %>;
129
- border-right-color: <%= color(0.1, 0.1, 0.1) %>;
130
- border-top-color: <%= color(0.2, 0.2, 0.2) %>;
131
- color: <%= color(1, 1, 1) %>;
112
+ .mui_button_tone_neutral {
113
+ background-color: <%= color(0.1, 0.1, 0.1) %>;
114
+ border-color: <%= color(0.1, 0.1, 0.1) %>;
132
115
  }
133
- *.mui_button_tone_neutral:hover {
134
- background-color: <%= color(0.3, 0.3, 0.3) %>;
135
- border-bottom-color: <%= color(0.1, 0.1, 0.1) %>;
136
- border-left-color: <%= color(0.2, 0.2, 0.2) %>;
137
- border-right-color: <%= color(0.2, 0.2, 0.2) %>;
138
- border-top-color: <%= color(0.3, 0.3, 0.3) %>;
139
- color: <%= color(1, 1, 1) %>;
116
+ .mui_button_tone_neutral:hover {
117
+ background-color: <%= color(0.2, 0.2, 0.2) %>;
140
118
  }
141
- *.mui_button_tone_positive {
119
+ .mui_button_tone_positive {
142
120
  background-color: <%= color(0.1, 0.5, 0.1) %>;
143
- border-bottom-color: <%= color(0, 0.3, 0) %>;
144
- border-left-color: <%= color(0, 0.4, 0) %>;
145
- border-right-color: <%= color(0, 0.4, 0) %>;
146
- border-top-color: <%= color(0.1, 0.5, 0.1) %>;
147
- color: <%= color(1, 1, 1) %>;
121
+ border-color: <%= color(0.1, 0.5, 0.1) %>;
148
122
  }
149
- *.mui_button_tone_positive:hover {
123
+ .mui_button_tone_positive:hover {
150
124
  background-color: <%= color(0.2, 0.6, 0.2) %>;
151
- border-bottom-color: <%= color(0, 0.4, 0) %>;
152
- border-left-color: <%= color(0.1, 0.5, 0.1) %>;
153
- border-right-color: <%= color(0.1, 0.5, 0.1) %>;
154
- border-top-color: <%= color(0.2, 0.6, 0.2) %>;
155
- color: <%= color(1, 1, 1) %>;
156
125
  }
157
- *.mui_button_tone_negative {
126
+ .mui_button_tone_negative {
158
127
  background-color: <%= color(0.6, 0, 0) %>;
159
- border-bottom-color: <%= color(0.4, 0, 0) %>;
160
- border-left-color: <%= color(0.5, 0, 0) %>;
161
- border-right-color: <%= color(0.4, 0, 0) %>;
162
- border-top-color: <%= color(0.6, 0, 0) %>;
163
- color: <%= color(1, 1, 1) %>;
128
+ border-color: <%= color(0.6, 0, 0) %>;
164
129
  }
165
- *.mui_button_tone_negative:hover {
166
- background-color: <%= color(0.7, 0, 0) %>;
167
- border-bottom-color: <%= color(0.5, 0, 0) %>;
168
- border-left-color: <%= color(0.6, 0, 0) %>;
169
- border-right-color: <%= color(0.6, 0, 0) %>;
170
- border-top-color: <%= color(0.7, 0, 0) %>;
171
- color: <%= color(1, 1, 1) %>;
130
+ .mui_button_tone_negative:hover {
131
+ background-color: <%= color(0.7, 0.1, 0.1) %>;
172
132
  }
173
133
  button.mui_button {
174
134
  padding: 0.5em;
@@ -181,7 +141,7 @@ button.mui_button img {
181
141
  border-top-color: <%= color(0.4, 0.4, 0.4) %>;
182
142
  border-style: solid;
183
143
  border-width: 1px;
184
- <%= border_radius %>
144
+ <%= round %>
185
145
  }
186
146
  button.mui_button table {
187
147
  border-collapse: collapse;
@@ -192,33 +152,13 @@ button.mui_button td {
192
152
 
193
153
  /* checkbox */
194
154
 
195
- input.mui_checkbox {
155
+ .mui_checkbox {
196
156
  vertical-align: middle;
197
157
  }
198
158
 
199
- /* code */
200
-
201
- code.mui_code {
202
- background-color: <%= color(0, 0, 0) %>;
203
- border-color: <%= color(0, 0, 0) %>;
204
- border-style: solid;
205
- border-width: 1px;
206
- color: <%= color(1, 1, 1) %>;
207
- display: block;
208
- font-family: 'Bitstream Vera Sans Mono', 'Monaco', 'Lucida Console' monospace;
209
- padding-bottom: 15px;
210
- padding-left: 30px;
211
- padding-right: 30px;
212
- padding-top: 15px;
213
- margin-top: 5px;
214
- }
215
- code.mui_code var {
216
- color: <%= color(0.75, 0.75, 0.75) %>;
217
- }
218
-
219
159
  /* copyright */
220
160
 
221
- div.mui_copyright {
161
+ .mui_copyright {
222
162
  color: <%= color(0.5, 0.5, 0.5) %>;
223
163
  font-size: 0.85em;
224
164
  padding-bottom: 2em;
@@ -228,14 +168,14 @@ div.mui_copyright {
228
168
 
229
169
  /* date */
230
170
 
231
- span.mui_date {
171
+ .mui_date {
232
172
  color: <%= color(0.5, 0.5, 0.5) %>;
233
173
  font-size: 0.85em;
234
174
  }
235
175
 
236
176
  /* desktop */
237
177
 
238
- div.mui_desktop {
178
+ .mui_desktop {
239
179
  padding-left: 1.5em;
240
180
  padding-right: 1.5em;
241
181
  padding-top: 1.5em;
@@ -243,7 +183,7 @@ div.mui_desktop {
243
183
 
244
184
  /* divider */
245
185
 
246
- hr.mui_divider {
186
+ .mui_divider {
247
187
  background: <%= color(0.85, 0.85, 0.85) %>;
248
188
  border: none;
249
189
  height: 1px;
@@ -252,23 +192,13 @@ hr.mui_divider {
252
192
  margin-right: 0.5em;
253
193
  margin-top: 2em;
254
194
  }
255
- div.mui_block_tray hr.mui_divider {
256
- margin-bottom: 1em;
257
- margin-left: 0;
258
- margin-right: 0;
259
- margin-top: 1.5em;
260
- }
261
195
 
262
196
  /* form */
263
197
 
264
- label {
265
- display: block;
266
- font-size: 0.85em;
267
- }
268
- input.mui_check {
198
+ .mui_check {
269
199
  margin-right: 0.5em;
270
200
  }
271
- input.mui_password, input.mui_search, input.mui_text, select.mui_menu, textarea.mui_hyper_text {
201
+ .mui_hyper_text, .mui_menu, .mui_password, .mui_search, .mui_text {
272
202
  background-color: <%= color(1, 1, 1) %>;
273
203
  border-bottom-color: <%= color(0.75, 0.75, 0.75) %>;
274
204
  border-left-color: <%= color(0.65, 0.65, 0.65) %>;
@@ -277,25 +207,19 @@ input.mui_password, input.mui_search, input.mui_text, select.mui_menu, textarea.
277
207
  border-top-color: <%= color(0.55, 0.55, 0.55) %>;
278
208
  border-width: 1px;
279
209
  color: <%= color(0, 0, 0) %>;
280
- display: block;
281
- font-size: 0.9em;
210
+ display: inline-block;
211
+ line-height: 1.5em;
282
212
  min-height: 1.5em;
283
- margin-top: 0.25em;
284
- <%= border_radius(:amount => 0.4) %>
213
+ padding: 0 0.25em 0 0.25em;
214
+ <%= round %>
285
215
  }
286
- input.mui_search {
216
+ .mui_search {
287
217
  margin-right: 0.5em;
288
218
  }
289
- select.date {
290
- margin-top: 0.25em;
291
- }
292
- select.month, select.day {
293
- margin-right: 0.25em;
294
- }
295
- select.mui_menu {
219
+ .mui_menu {
296
220
  height: 20em;
297
221
  }
298
- textarea.mui_hyper_text {
222
+ .mui_hyper_text {
299
223
  font-family: 'Bitstream Vera Sans Mono', 'Monaco', 'Lucida Console' monospace;
300
224
  height: 20em;
301
225
  width: 40em;
@@ -303,29 +227,29 @@ textarea.mui_hyper_text {
303
227
 
304
228
  /* gallery */
305
229
 
306
- div.mui_gallery {
230
+ .mui_gallery {
307
231
  background-color: <%= color(0, 0, 0) %>;
308
232
  }
309
233
 
310
234
  /* grid */
311
235
 
312
- table.mui_grid {
236
+ .mui_grid {
313
237
  border-collapse: collapse;
314
238
  }
315
- *.mui_block+table.mui_grid, table.mui_grid+*.mui_block {
239
+ .mui_block+.mui_grid, .mui_grid+.mui_block {
316
240
  margin-top: 1em;
317
241
  }
318
242
 
319
243
  /* image */
320
244
 
321
- img.mui_image {
245
+ .mui_image {
322
246
  background-repeat: no-repeat;
323
247
  display: block;
324
248
  }
325
- img.mui_image_rounded {
326
- <%= border_radius %>
249
+ .mui_image_rounded {
250
+ <%= round %>
327
251
  }
328
- img.mui_image_border {
252
+ .mui_image_border {
329
253
  border-color: <%= color(0.5, 0.5, 0.5) %>;
330
254
  border-style: solid;
331
255
  border-width: 1px;
@@ -333,47 +257,47 @@ img.mui_image_border {
333
257
 
334
258
  /* link */
335
259
 
336
- a.mui_link {
260
+ .mui_link {
337
261
  color: #0066ff;
338
262
  text-decoration: none;
339
263
  }
340
- a.mui_link:visited {
264
+ .mui_link:visited {
341
265
  color: #993399;
342
266
  }
343
- a.mui_link:active {
267
+ .mui_link:active {
344
268
  color: #3399ff;
345
269
  outline: 0;
346
270
  text-decoration: underline;
347
271
  }
348
- a.mui_link:focus {
272
+ .mui_link:focus {
349
273
  color: #3399ff;
350
274
  outline: 0;
351
275
  }
352
- a.mui_link:hover {
276
+ .mui_link:hover {
353
277
  text-decoration: underline;
354
278
  }
355
279
 
356
280
  /* list */
357
281
 
358
- ul.mui_list {
282
+ .mui_list {
359
283
  list-style-position: inside;
360
284
  margin-left: 0.25em;
361
285
  }
362
- li.mui_list_item {
286
+ .mui_list_item {
363
287
  margin-top: 0.25em;
364
288
  }
365
289
 
366
290
  /* menu */
367
291
 
368
- select.mui_menu {
292
+ .mui_menu {
369
293
  padding-left: 2px;
370
294
  padding-right: 2px;
371
295
  }
372
296
 
373
297
  /* message */
374
298
 
375
- div.mui_message {
376
- background-image: url('<%= mui_path :image %>/transparency.png');
299
+ .mui_message {
300
+ background-image: url('<%= mui_path :image %>/glass.png');
377
301
  border-style: solid;
378
302
  border-bottom-width: 1px;
379
303
  border-left-width: 1px;
@@ -386,26 +310,26 @@ div.mui_message {
386
310
  min-width: 40%;
387
311
  padding: 1em;
388
312
  white-space: nowrap;
389
- <%= border_radius(:edge => 'bottom') %>
313
+ <%= round(:bottom_left => true, :bottom_right => true) %>
390
314
  }
391
- div.mui_message input.mui_button {
315
+ .mui_message input.mui_button {
392
316
  position: absolute;
393
317
  right: 1em;
394
318
  top: 1em;
395
319
  }
396
- div.mui_message_positive {
320
+ .mui_message_positive {
397
321
  border-color: <%= color(0, 0.6, 0) %>;
398
322
  }
399
- div.mui_message_negative {
323
+ .mui_message_negative {
400
324
  border-color: <%= color(0.6, 0, 0) %>;
401
325
  }
402
- div.mui_message_neutral {
326
+ .mui_message_neutral {
403
327
  border-color: <%= color(0, 0, 0) %>;
404
328
  }
405
329
 
406
330
  /* paragraph */
407
331
 
408
- p.mui_paragraph {
332
+ .mui_paragraph {
409
333
  color: <%= color(0.2, 0.2, 0.2) %>;
410
334
  line-height: 1.5em;
411
335
  max-width: 40em;
@@ -416,59 +340,113 @@ p.mui_paragraph+p.mui_paragraph {
416
340
 
417
341
  /* quote */
418
342
 
419
- blockquote.mui_quote {
343
+ .mui_quote {
420
344
  background-color: #e5e5e5;
421
345
  }
422
346
 
347
+ /* status */
348
+
349
+ .mui_status {
350
+ background-image: url('<%= mui_path :image %>/glass.png');
351
+ border-color: <%= color(0, 0, 0) %>;
352
+ border-style: solid;
353
+ border-width: 1px;
354
+ color: <%= color(0.5, 0.5, 0.5) %>;
355
+ padding: 0.5em;
356
+ position: absolute;
357
+ right: 1.5em;
358
+ top: 0.5em;
359
+ <%= round %>
360
+ }
361
+
423
362
  /* tab */
424
363
 
425
- a.mui_tab {
364
+ .mui_tab {
426
365
  background-color: <%= color(0.1, 0.1, 0.1) %>;
427
- background-image: url('<%= mui_path :image %>/reflection.png');
366
+ background-image: url('<%= mui_path :image %>/plastic.png');
428
367
  background-position: center center;
429
368
  background-repeat: repeat-x;
430
- border-bottom: none;
431
- border-left: none;
432
- border-right-color: <%= color(0.1, 0.1, 0.1) %>;
433
- border-right-style: solid;
434
- border-right-width: 1px;
435
- border-top: none;
369
+ border-color: <%= color(0.1, 0.1, 0.1) %>;
370
+ border-style: solid;
371
+ border-width: 1px;
372
+ border-left-style: none;
436
373
  color: <%= color(1, 1, 1) %>;
437
- display: inline-block;
438
- font-size: 1em;
439
- line-height: 2em;
440
- padding-left: 2em;
441
- padding-right: 2em;
374
+ color: <%= color(1, 1, 1) %>;
375
+ line-height: 1.5em;
376
+ min-height: 1.5em;
377
+ padding: 0 1em 0 1em;
442
378
  text-align: center;
443
- text-decoration: none;
444
379
  }
445
- a.mui_tab:hover {
380
+ .mui_tab:first-child {
381
+ border-left-style: solid;
382
+ <%= round(:bottom_left => true, :top_left => true) %>
383
+ }
384
+ .mui_tab:last-child {
385
+ <%= round(:bottom_right => true, :top_right => true) %>
386
+ }
387
+ .mui_tab:hover {
446
388
  background-color: <%= color(0.2, 0.2, 0.2) %>;
447
389
  }
448
- a.mui_tab:active, *.mui_button:active, *.mui_selected {
390
+ .mui_tab:active, .mui_button:active, .mui_selected {
449
391
  background-color: <%= color(0, 0.3, 0.9) %> !important;
450
392
  }
451
393
 
394
+ /* tab group */
395
+
396
+ .mui_tab_group {
397
+ display: inline-block;
398
+ margin: 0.5em;
399
+ white-space: nowrap;
400
+ }
401
+
452
402
  /* title */
453
403
 
454
- div.mui_title {
455
- color: <%= color(0, 0, 0) %>;
456
- font-weight: bold;
404
+ .mui_title {
457
405
  letter-spacing: -0.1em;
458
406
  line-height: 1em;
459
- margin-left: -0.05em;
407
+ }
408
+
409
+ /* tray */
410
+
411
+ .mui_tray {
412
+ background-color: <%= color(0.95, 0.95, 0.95) %>;
413
+ border-bottom-color: <%= color(0.9, 0.9, 0.9) %>;
414
+ border-left-color: <%= color(0.8, 0.8, 0.8) %>;
415
+ border-right-color: <%= color(0.8, 0.8, 0.8) %>;
416
+ border-top-color: <%= color(0.7, 0.7, 0.7) %>;
417
+ border-style: solid;
418
+ border-width: 1px;
419
+ margin: 0.5em;
420
+ padding: 1em;
421
+ <%= round %>
422
+ }
423
+ .mui_tray .mui_block, .mui_tray .mui_tray {
424
+ margin: 0;
425
+ }
426
+ .mui_tray .mui_divider {
427
+ margin-bottom: 1em;
428
+ margin-left: 0;
429
+ margin-right: 0;
430
+ margin-top: 1.5em;
431
+ }
432
+ div.mui_tray+div.mui_tray {
433
+ margin-top: 1em;
434
+ }
435
+ span.mui_tray {
436
+ display: inline-block;
437
+ vertical-align: top;
460
438
  }
461
439
 
462
440
  /* truncate */
463
441
 
464
- span.mui_truncate {
442
+ .mui_truncate {
465
443
  color: <%= color(0.5, 0.5, 0.5) %>;
466
444
  font-size: 0.85em;
467
445
  }
468
446
 
469
447
  /* url */
470
448
 
471
- div.mui_url {
449
+ .mui_url {
472
450
  color: <%= color(0.5, 0.5, 0.5) %>;
473
451
  font-size: 0.85em;
474
452
  }
@@ -480,7 +458,7 @@ table.mui_window {
480
458
  }
481
459
  table.mui_window_bar {
482
460
  background-color: <%= color(0.1, 0.1, 0.1) %>;
483
- background-image: url('<%= mui_path :image %>/reflection.png');
461
+ background-image: url('<%= mui_path :image %>/plastic.png');
484
462
  background-position: center center;
485
463
  background-repeat: repeat-x;
486
464
  color: <%= color(1, 1, 1) %>;
@@ -488,17 +466,17 @@ table.mui_window_bar {
488
466
  padding-left: 0.75em;
489
467
  padding-right: 0.75em;
490
468
  width: 100%;
491
- <%= border_radius(:edge => 'top') %>
469
+ <%= round(:top_left => true, :top_right => true) %>
492
470
  }
493
471
  td.mui_window_bar_end {
494
472
  text-align: right;
495
473
  }
496
474
  td.mui_window_content {
497
- background-image: url('<%= mui_path :image %>/transparency.png');
475
+ background-image: url('<%= mui_path :image %>/glass.png');
498
476
  color: <%= color(1, 1, 1) %>;
499
477
  padding: 0.5em;
500
- <%= border_radius(:edge => 'bottom') %>
478
+ <%= round(:bottom_left => true, :bottom_right => true) %>
501
479
  }
502
- div.mui_window_target {
480
+ .mui_window_target {
503
481
  display: none;
504
482
  }
data/public/images/{transparency.png → glass.png} RENAMED
File without changes
data/public/images/{reflection.png → plastic.png} RENAMED
File without changes
data/public/images/rubber.png ADDED
Binary file
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: merb-ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.2
4
+ version: "0.4"
5
5
  platform: ruby
6
6
  authors:
7
7
  - UiPoet
@@ -9,7 +9,7 @@ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
11
 
12
- date: 2008-12-13 00:00:00 -08:00
12
+ date: 2008-12-15 00:00:00 -08:00
13
13
  default_executable:
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
@@ -57,9 +57,10 @@ files:
57
57
  - lib/merb-ui/spectasks.rb
58
58
  - lib/merb-ui.rb
59
59
  - public/images
60
+ - public/images/glass.png
60
61
  - public/images/nil.png
61
- - public/images/reflection.png
62
- - public/images/transparency.png
62
+ - public/images/plastic.png
63
+ - public/images/rubber.png
63
64
  - public/javascripts
64
65
  - public/javascripts/dimensions.js
65
66
  - public/javascripts/keybinder.js