merb-ui 0.3.2 → 0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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