merb-ui 0.4.2 → 0.4.3

data/Rakefile

@@ -14,7 +14,7 @@ spec = Gem::Specification.new do |s|
   s.name = 'merb-ui'
   s.rubyforge_project = 'uipoet'
   s.summary = 'User Interface Components for Merb'
-  s.version = '0.4.2'
+  s.version = '0.4.3'
 end
 
 Rake::GemPackageTask.new(spec) do |pkg|

data/app/controllers/messages.rb

@@ -0,0 +1,7 @@
+class MerbUi::Messages < MerbUi::Application
+
+  def index
+    render :layout => false
+  end
+    
+end

data/app/helpers/global_helpers.rb

@@ -28,18 +28,11 @@ module Merb::GlobalHelpers
   end
   
   def mui_body(options = {}, &block)
-    attributes={}
+    attributes = {}
     attributes[:class] = 'mui_desktop'
     attributes[:class] << ' mui_gallery' if controller_name == 'merb_photos/photos'
-    output = ''
-    if message = session[:mui_message]
-      message_content = mui_button(:title => '&#215;', :message => 'close')
-      message_content << message[:title] if message[:title]
-      message_content << message[:body] if message[:body]
-      output << tag(:div, message_content, :class => "mui_message mui_message_#{message[:tone]}")
-      session.delete(:mui_message)
-    end
-    output << capture(&block)
+    body = ''
+    body << capture(&block)
     copyright_now = Time.now.year
     copyright_then = MerbUi[:year] || copyright_now
     if copyright_now == copyright_then
@@ -50,13 +43,22 @@ module Merb::GlobalHelpers
     copyright_owner = " #{MerbUi[:owner]}" if MerbUi[:owner]
     copyright_text = "Copyright &copy; #{copyright_years}#{copyright_owner}. All rights reserved."
     copyright = tag(:div, copyright_text, :class => 'mui_copyright')
-    output << tag(:div, catch_content(:for_layout) + copyright, attributes)
-    output << tag(:div, :class => 'mui_window_target')
+    body << tag(:div, catch_content(:for_layout) + copyright, attributes)
+    body << tag(:div, :class => 'mui_window_target')
+    body << tag(:div, :class => 'mui_message_target')
     if session[:mui_window]
-      output << tag(:script, "windowOpen('#{session[:mui_window]}');", :type => 'text/javascript')    	
+      script_window = "muiWindowOpen('#{session[:mui_window]}');"
       session.delete(:mui_window)
     end
-    output
+    if session[:mui_message]
+      script_message = "muiMessageOpen('#{session[:mui_message]}');"
+      session.delete(:mui_message)
+    end
+    script = ''
+    if script_window || script_message
+      script << tag(:script, "$(document).ready(function(){#{script_window}#{script_message}});", :type => 'text/javascript')
+    end
+    tag(:div, body, :class => 'mui') + script
   end
   
   def mui_browser
@@ -75,7 +77,7 @@ module Merb::GlobalHelpers
   def mui_button(options = {}, &block)
     attributes = {}
     attributes[:class] = 'mui_button'
-    attributes[:class] << " mui_button_tone_#{options[:tone] || 'neutral'}"
+    attributes[:class] << " mui_button_#{options[:tone]}" if options[:tone]
     attributes[:class] << ' mui_click'
     attributes[:class] << "_message_#{options[:message]}" if options[:message]
     attributes[:class] << "_window_#{options[:window]}" if options[:window]
@@ -138,7 +140,7 @@ module Merb::GlobalHelpers
   
   def mui_delete(options = {})
     attributes = {}
-    attributes[:class] = 'mui_button mui_button_tone_negative'
+    attributes[:class] = 'mui_button mui_button_negative'
     attributes[:style] = "width:#{options[:width]};" if options[:width]
     delete_button(options[:url], options[:title], attributes)
   end
@@ -171,14 +173,14 @@ module Merb::GlobalHelpers
   def mui_head
     jquery = tag(:script, '', :src => 'http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js', :type => 'text/javascript')
     jquery_ui = tag(:script, '', :src => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.5/jquery-ui.min.js', :type => 'text/javascript')
-    require_css('master', 'mui')
-    require_js("#{mui_path :javascript}/dimensions", "#{mui_path :javascript}/keybinder", "#{mui_path :javascript}/main")
+    require_css 'mui'
+    require_js("#{mui_path :javascript}/keybinder", "#{mui_path :javascript}/main")
     jquery + jquery_ui + include_required_js + include_required_css + catch_content(:feeds)
   end
   
-  def mui_hyper_text(name, options = {})
+  def mui_textarea(name, options = {})
     attributes = {}
-    attributes[:class] = 'mui_hyper_text'
+    attributes[:class] = 'mui_textarea'
     attributes[:class] << ' mui_focus' if options[:focus] == true
     attributes[:label] = options[:title]
     text_area(name, attributes)
@@ -227,13 +229,25 @@ module Merb::GlobalHelpers
     tag(:ul, children, :class => 'mui_list')
   end
   
+  def mui_message(options = {}, &block)
+    bar_content = ''
+    bar_content << tag(:td, options[:title], :class => 'mui_message_title') if options[:title]
+    bar_content << tag(:td, mui_button(:title => '&#215;', :message => 'close'), :class => 'mui_message_bar_end')
+    bar = tag(:tr, tag(:td, tag(:table, tag(:tr, bar_content), :class => 'mui_message_bar')))
+    content = tag(:tr, tag(:td, capture(&block), :class => 'mui_message_content'))
+    message_attributes = {}
+    message_attributes[:class] = 'mui_message'
+    message_attributes[:class] << " mui_message_#{options[:tone]}" if options[:tone]
+    tag(:div, tag(:table, bar + content), message_attributes)
+  end
+  
   def mui_paragraph(options={}, &block)
     tag(:p, (capture(&block) if block_given?), :class => 'mui_paragraph')
   end
 
   def mui_password(name, options = {})
     attributes = {}
-    attributes[:class] = 'mui_password'
+    attributes[:class] = 'mui_input'
     attributes[:class] << ' mui_focus' if options[:focus] == true
     attributes[:label] = options[:title]
     password_field(name, attributes)
@@ -245,7 +259,7 @@ module Merb::GlobalHelpers
   
   def mui_search(options = {})
     attributes = {}
-    attributes[:class] = 'mui_search'
+    attributes[:class] = 'mui_input mui_search'
     attributes[:name] = :q
     attributes[:style] = "width:#{options[:width]};" if options[:width]
     attributes[:type] = :text
@@ -295,7 +309,7 @@ module Merb::GlobalHelpers
   
   def mui_text(name, options = {})
     attributes = {}
-    attributes[:class] = 'mui_text'
+    attributes[:class] = 'mui_input'
     attributes[:class] << ' mui_focus' if options[:focus] == true
     attributes[:label] = options[:title]
     attributes[:maxlength] = options[:length] || 50
@@ -343,14 +357,13 @@ module Merb::GlobalHelpers
   end
   
   def mui_window(options = {}, &block)
-    script = js_include_tag("#{mui_path :javascript}/window")
     bar_content = ''
     bar_content << tag(:td, options[:buttons], :class => 'mui_bar_buttons') if options[:buttons]
     bar_content << tag(:td, options[:title], :class => 'mui_window_title') if options[:title]
     bar_content << tag(:td, mui_button(:title => '&#215;', :window => 'close'), :class => 'mui_window_bar_end')
     bar = tag(:tr, tag(:td, tag(:table, tag(:tr, bar_content), :class => 'mui_window_bar')))
     content = tag(:tr, tag(:td, capture(&block), :class => 'mui_window_content'))
-    script + tag(:table, bar + content, :class => 'mui_window')
+    tag(:table, bar + content, :class => 'mui_window')
   end
 
   def mui_window_redirect

data/app/views/messages/index.html.erb

@@ -0,0 +1,3 @@
+<%= mui_message(:title => params[:title], :tone => params[:tone]) do %>
+  <%= params[:body] %>
+<% end =%>

data/app/views/styles/index.css.erb

@@ -1,67 +1,57 @@
 <%= @browser -%>
-* {
-  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
-  font-size: 1em;
+body {
   margin: 0;
-  padding: 0;
 }
-body {
-  font-size: 13px;
+.mui {
+  font-size: 12px;
 }
-code, code em, pre {
-  font-family: 'Bitstream Vera Sans Mono', 'Monaco', 'Lucida Console' monospace;
+.mui * {
+  font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
 }
-code, pre {
-  font-size: 0.85em;
+.mui code, .mui pre, .mui_textarea {
+  font: 0.9em 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 }
-code {
-  background-color: <%= color(0.1, 0.1, 0.1) %>;
+.mui code {
+  background: <%= color(0.1, 0.1, 0.1) %>;
   color: <%= color(1, 1, 1) %>;
   display: block;
   overflow: auto;
   padding: 1em;
   white-space: pre;
 }
-code em {
+.mui code em {
   color: <%= color(0, 1, 0) %>;
-  font-style: normal;
-  font-weight: normal;
+  font: normal normal;
 }
-kbd {
-  background-color: <%= color(0.9, 0.9, 0.9) %>;
-  border-color: <%= color(0.8, 0.8, 0.8) %>;
-  border-style: solid;
-  border-width: 1px;
+.mui kbd {
+  background: <%= color(0.9, 0.9, 0.9) %>;
+  border: 1px solid <%= color(0.8, 0.8, 0.8) %>;
   padding: 0 0.5em 0.2em 0.5em;
   <%= round %>
 }
-label, .mui_title {
+.mui label, .mui_title {
   font-weight: bold;
 }
-label {
+.mui label {
   display: block;
-  font-size: 0.85em;
+  font-size: 0.9em;
 }
-select.date {
+.mui select.date {
   margin-top: 0.25em;
 }
-select.month, select.day {
+.mui select.month, .mui select.day {
   margin-right: 0.25em;
 }
 
 /* bar */
 
 .mui_bar {
-  background-color: <%= color(0.2, 0.2, 0.2) %>;
-  background-image: url('<%= mui_path :image %>/rubber.png');
-  background-position: center center;
-  background-repeat: repeat-x;
-  border-bottom-color: <%= color(0, 0, 0) %>;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-top-color: <%= color(0.2, 0.2, 0.2) %>;
-  border-top-style: solid;
-  border-top-width: 1px;
+  background: <%= color(0.2, 0.2, 0.2) %> url('<%= mui_path :image %>/rubber.png') repeat-x center;
+  border-bottom: 1px solid <%= color(0, 0, 0) %>;
+  border-top: 1px solid <%= color(0.2, 0.2, 0.2) %>;
   color: <%= color(1, 1, 1) %>;
   padding: 0.5em 1.5em 0.5em 1.5em;
 }
@@ -76,9 +66,7 @@ select.month, select.day {
 }
 .mui_block_status {
   background-image: url('<%= mui_path :image %>/glass.png');
-  border-color: <%= color(0, 0, 0) %>;
-  border-style: solid;
-  border-width: 1px;
+  border: 1px solid <%= color(0, 0, 0) %>;
   color: <%= color(0.5, 0.5, 0.5) %>;
   padding: 0.5em;
   position: absolute;
@@ -97,50 +85,42 @@ span.mui_block {
 /* button */
 
 .mui_button {
-  background-image: url('<%= mui_path :image %>/plastic.png');
-  background-position: center center;
-  background-repeat: repeat-x;
-  border-style: solid;
-  border-width: 1px;
+  background: <%= color(0.1, 0.1, 0.1) %> url('<%= mui_path :image %>/plastic.png') repeat-x center;
+  border: 1px outset <%= color(0.1, 0.1, 0.1) %>;
   color: <%= color(1, 1, 1) %>;
-  line-height: 1.5em;
-  min-height: 1.5em;
+  line-height: 1.7em;
+  min-height: 1.7em;
   padding: 0 1em 0 1em;
   text-align: center;
   <%= round %>
 }
-.mui_button_tone_neutral {
-  background-color: <%= color(0.1, 0.1, 0.1) %>;
-  border-color: <%= color(0.1, 0.1, 0.1) %>;
-}
-.mui_button_tone_neutral:hover {
+.mui_button:hover {
   background-color: <%= color(0.2, 0.2, 0.2) %>;
+  border-color: <%= color(0.2, 0.2, 0.2) %>;
 }
-.mui_button_tone_positive {
-  background-color: <%= color(0.1, 0.5, 0.1) %>;
-  border-color: <%= color(0.1, 0.5, 0.1) %>;
-}
-.mui_button_tone_positive:hover {
-  background-color: <%= color(0.2, 0.6, 0.2) %>;
-}
-.mui_button_tone_negative {
+.mui_button_negative {
   background-color: <%= color(0.6, 0, 0) %>;
   border-color: <%= color(0.6, 0, 0) %>;
 }
-.mui_button_tone_negative:hover {
+.mui_button_negative:hover {
   background-color: <%= color(0.7, 0.1, 0.1) %>;
+  border-color: <%= color(0.7, 0.1, 0.1) %>;
+}
+.mui_button_positive {
+  background-color: <%= color(0.1, 0.5, 0.1) %>;
+  border-color: <%= color(0.1, 0.5, 0.1) %>;
+}
+.mui_button_positive:hover {
+  background-color: <%= color(0.2, 0.6, 0.2) %>;
+  border-color: <%= color(0.2, 0.6, 0.2) %>;
 }
 button.mui_button {
   padding: 0.5em;
   text-align: left;
 }
 button.mui_button img {
-  border-bottom-color: <%= color(0.3, 0.3, 0.3) %>;
-  border-left-color: <%= color(0.3, 0.3, 0.3) %>;
-  border-right-color: <%= color(0.3, 0.3, 0.3) %>;
-  border-top-color: <%= color(0.4, 0.4, 0.4) %>;
-  border-style: solid;
-  border-width: 1px;
+  border: 1px solid <%= color(0.3, 0.3, 0.3) %>;
+  border: 1px inset <%= color(0.4, 0.4, 0.4) %>;
   <%= round %>
 }
 button.mui_button table {
@@ -150,19 +130,18 @@ button.mui_button td {
   padding-right: 1em;
 }
 
-/* checkbox */
+/* check */
 
-.mui_checkbox {
-  vertical-align: middle;
+.mui_check {
+  margin-right: 0.5em;
 }
 
 /* copyright */
 
 .mui_copyright {
   color: <%= color(0.5, 0.5, 0.5) %>;
-  font-size: 0.85em;
-  padding-bottom: 2em;
-  padding-top: 4em;
+  font-size: 0.9em;
+  padding: 4em 0 2em 0;
   text-align: center;
 }
 
@@ -170,15 +149,13 @@ button.mui_button td {
 
 .mui_date {
   color: <%= color(0.5, 0.5, 0.5) %>;
-  font-size: 0.85em;
+  font-size: 0.9em;
 }
 
 /* desktop */
 
 .mui_desktop {
-  padding-left: 1.5em;
-  padding-right: 1.5em;
-  padding-top: 1.5em;
+  padding: 1.5em 1.5em 0 1.5em;
 }
 
 /* divider */
@@ -187,42 +164,7 @@ button.mui_button td {
   background: <%= color(0.85, 0.85, 0.85) %>;
   border: none;
   height: 1px;
-  margin-bottom: 1em;
-  margin-left: 0.5em;
-  margin-right: 0.5em;
-  margin-top: 2em;
-}
-
-/* form */
-
-.mui_check {
-  margin-right: 0.5em;
-}
-.mui_hyper_text, .mui_menu, .mui_password, .mui_search, .mui_text {
-  background-color: <%= color(1, 1, 1) %>;
-  border-bottom-color: <%= color(0.75, 0.75, 0.75) %>;
-  border-left-color: <%= color(0.65, 0.65, 0.65) %>;
-  border-right-color: <%= color(0.65, 0.65, 0.65) %>;
-  border-style: solid;
-  border-top-color: <%= color(0.55, 0.55, 0.55) %>;
-  border-width: 1px;
-  color: <%= color(0, 0, 0) %>;
-  display: inline-block;
-  line-height: 1.5em;
-  min-height: 1.5em;
-  padding: 0 0.25em 0 0.25em;
-  <%= round %>
-}
-.mui_search {
-  margin-right: 0.5em;
-}
-.mui_menu {
-  height: 20em;
-}
-.mui_hyper_text {
-  font-family: 'Bitstream Vera Sans Mono', 'Monaco', 'Lucida Console' monospace;
-  height: 20em;
-  width: 40em;
+  margin: 2em 0.5em 1em 0.5em;
 }
 
 /* gallery */
@@ -255,26 +197,34 @@ button.mui_button td {
   border-width: 1px;
 }
 
+/* input */
+
+.mui_input {
+  background: <%= color(0.9, 0.9, 0.9) %> url('<%= mui_path :image %>/bezel.png') repeat-x;
+  border: 1px inset <%= color(0.9, 0.9, 0.9) %>;
+  display: inline-block;
+  font-weight: bold;
+  line-height: 1.7em;
+  min-height: 1.7em;
+  padding: 0 0.4em 0 0.4em;
+  <%= round %>
+}
+
 /* link */
 
-.mui_link {
+.mui_link:link {
   color: <%= color(0, 0.2, 1) %>;
   text-decoration: none;
 }
 .mui_link:visited {
   color: <%= color(0.5, 0.25, 0.5) %>;
 }
-.mui_link:active {
-  color: <%= color(0.1, 0.6, 1) %>;
-  outline: 0;
+.mui_link:hover {
   text-decoration: underline;
 }
-.mui_link:focus {
-  color: <%= color(0.1, 0.6, 1) %>;
+.mui_link:active, .mui_link:focus {
   outline: 0;
-}
-.mui_link:hover {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 /* list */
@@ -290,6 +240,7 @@ button.mui_button td {
 /* menu */
 
 .mui_menu {
+  height: 20em;
   padding-left: 2px;
   padding-right: 2px;
 }
@@ -298,33 +249,35 @@ button.mui_button td {
 
 .mui_message {
   background-image: url('<%= mui_path :image %>/glass.png');
-  border-style: solid;
-  border-bottom-width: 1px;
-  border-left-width: 1px;
-  border-right-width: 1px;
+  border: 1px solid <%= color(0, 0, 0) %>;
   border-top-width: 0;
-  color: <%= color(1, 1, 1) %>;
-  display: none;
-  line-height: 2em;
-  max-width: 60%;
-  min-width: 40%;
   padding: 1em;
-  white-space: nowrap;
   <%= round(:bottom_left => true, :bottom_right => true) %>
 }
-.mui_message input.mui_button {
-  position: absolute;
-  right: 1em;
-  top: 1em;
+.mui_message table {
+  border-collapse: collapse;
+}
+.mui_message_bar {
+  color: <%= color(1, 1, 1) %>;
+  height: 2em;
+  width: 100%;
+}
+.mui_message_bar_end {
+  padding: 0 0 0 1em;
+  text-align: right;
+}
+.mui_message_content {
+  color: <%= color(1, 1, 1) %>;
+  line-height: 2em;
 }
-.mui_message_positive {
+.mui_message_positive{
   border-color: <%= color(0, 0.6, 0) %>;
 }
-.mui_message_negative {
+.mui_message_negative{
   border-color: <%= color(0.6, 0, 0) %>;
 }
-.mui_message_neutral {
-  border-color: <%= color(0, 0, 0) %>;
+.mui_message_target {
+  display: none;
 }
 
 /* paragraph */
@@ -341,7 +294,7 @@ p.mui_paragraph+p.mui_paragraph {
 /* quote */
 
 .mui_quote {
-  background-color: #e5e5e5;
+  background-color: <%= color(0.95, 0.95, 0.95) %>;
 }
 
 /* scroll */
@@ -350,13 +303,21 @@ p.mui_paragraph+p.mui_paragraph {
   overflow: auto;
 }
 
+/* search */
+
+.mui_search {
+  background-color: <%= color(0.2, 0.2, 0.2) %>;
+  border-color: <%= color(0.3, 0.3, 0.3) %>;
+  color: <%= color(1, 1, 1) %>;
+  font-weight: normal;
+  margin-right: 0.5em;
+}
+
 /* status */
 
 .mui_status {
-  background-image: url('<%= mui_path :image %>/glass.png');
-  border-color: <%= color(0, 0, 0) %>;
-  border-style: solid;
-  border-width: 1px;
+  background: url('<%= mui_path :image %>/glass.png');
+  border: 1px solid <%= color(0, 0, 0) %>;
   color: <%= color(0.5, 0.5, 0.5) %>;
   padding: 0.5em;
   position: absolute;
@@ -369,7 +330,7 @@ p.mui_paragraph+p.mui_paragraph {
 
 .mui_subtle {
   color: <%= color(0.25, 0.25, 0.25) %>;
-  font-size: 0.85em;
+  font-size: 0.9em;
 }
 .mui_subtle b {
   color: <%= color(0, 0, 0) %>;
@@ -378,23 +339,15 @@ p.mui_paragraph+p.mui_paragraph {
 /* tab */
 
 .mui_tab {
-  background-color: <%= color(0.1, 0.1, 0.1) %>;
-  background-image: url('<%= mui_path :image %>/plastic.png');
-  background-position: center center;
-  background-repeat: repeat-x;
-  border-color: <%= color(0.1, 0.1, 0.1) %>;
-  border-style: solid;
-  border-width: 1px;
-  border-left-style: none;
-  color: <%= color(1, 1, 1) %>;
+  background: <%= color(0.1, 0.1, 0.1) %> url('<%= mui_path :image %>/plastic.png') repeat-x center;
+  border: 1px outset <%= color(0.1, 0.1, 0.1) %>;
   color: <%= color(1, 1, 1) %>;
-  line-height: 1.5em;
-  min-height: 1.5em;
+  line-height: 1.7em;
+  min-height: 1.7em;
   padding: 0 1em 0 1em;
   text-align: center;
 }
 .mui_tab:first-child {
-  border-left-style: solid;
   <%= round(:bottom_left => true, :top_left => true) %>
 }
 .mui_tab:last-child {
@@ -405,6 +358,7 @@ p.mui_paragraph+p.mui_paragraph {
 }
 .mui_tab:active, .mui_button:active, .mui_selected {
   background-color: <%= color(0, 0.3, 0.9) %> !important;
+  border-color: <%= color(0, 0.3, 0.9) %> !important;
 }
 
 /* tab group */
@@ -415,6 +369,20 @@ p.mui_paragraph+p.mui_paragraph {
   white-space: nowrap;
 }
 
+/* textarea */
+
+.mui_textarea {
+  background: <%= color(1, 1, 1) %> url('<%= mui_path :image %>/bezel.png') repeat-x;
+  border: 1px inset <%= color(0.9, 0.9, 0.9) %>;
+  display: inline-block;
+  height: 20em;
+  margin-right: 0.5em;
+  line-height: 1.7em;
+  padding: 0 0.4em 0 0.4em;
+  width: 40em;
+  <%= round %>
+}
+
 /* title */
 
 .mui_title {
@@ -425,16 +393,10 @@ p.mui_paragraph+p.mui_paragraph {
 /* tray */
 
 .mui_tray {
-  background-image: url('<%= mui_path :image %>/bezel.png');
-  background-color: <%= color(1, 1, 1) %>;
-  background-position: top center;
-  background-repeat: repeat-x;
-  border-bottom-color: <%= color(0.9, 0.9, 0.9) %>;
+  background: <%= color(1, 1, 1) %> url('<%= mui_path :image %>/bezel.png') repeat-x;
+  border: 1px solid <%= color(0.9, 0.9, 0.9) %>;
   border-left-color: <%= color(0.8, 0.8, 0.8) %>;
-  border-right-color: <%= color(0.8, 0.8, 0.8) %>;
-  border-style: solid;
-  border-top-color: <%= color(0.6, 0.6, 0.6) %>;
-  border-width: 1px;
+  border-top-color: <%= color(0.8, 0.8, 0.8) %>;
   margin: 0.5em;
   padding: 0 0 0.5em; 0;
   <%= round %>
@@ -459,25 +421,14 @@ span.mui_tray {
   vertical-align: top;
 }
 .mui_tray_title {
-  background-color: <%= color(0.95, 0.95, 0.95) %>;
-  background-image: url('<%= mui_path :image %>/bezel.png');
-  background-position: top center;
-  background-repeat: repeat-x;
-  border-bottom-color: <%= color(1, 1, 1) %>;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
+  border-bottom: 1px solid <%= color(1, 1, 1) %>;
   font-size: 1.125em;
   padding: 0.25em 1em 0.25em 1em;
   white-space: nowrap;
-  <%= round(:top_left => true, :top_right => true) %>
 }
 a.mui_tray_title {
   display: block;
 }
-a.mui_tray_title:hover {
-  background-color: <%= color(1, 1, 1) %>;
-  cursor: pointer;
-}
 
 /* truncate */
 
@@ -489,26 +440,22 @@ a.mui_tray_title:hover {
 
 /* window */
 
-table.mui_window {
+.mui_window {
   border-collapse: collapse;
 }
-table.mui_window_bar {
-  background-color: <%= color(0.1, 0.1, 0.1) %>;
-  background-image: url('<%= mui_path :image %>/plastic.png');
-  background-position: center center;
-  background-repeat: repeat-x;
+.mui_window_bar {
+  background: <%= color(0.1, 0.1, 0.1) %> url('<%= mui_path :image %>/plastic.png') repeat-x center;
   color: <%= color(1, 1, 1) %>;
   height: 2em;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
+  padding: 0 0.75em 0 0.75em;
   width: 100%;
   <%= round(:top_left => true, :top_right => true) %>
 }
-td.mui_window_bar_end {
+.mui_window_bar_end {
   text-align: right;
 }
-td.mui_window_content {
-  background-image: url('<%= mui_path :image %>/glass.png');
+.mui_window_content {
+  background: url('<%= mui_path :image %>/glass.png');
   color: <%= color(1, 1, 1) %>;
   padding: 0.5em;
   <%= round(:bottom_left => true, :bottom_right => true) %>

data/lib/merb-ui.rb

@@ -13,6 +13,7 @@ if defined?(Merb::Plugins)
   module MerbUi
     
     def self.setup_router(scope)
+      scope.match('/message').to(:controller => 'messages', :action => 'index').name(:message)
       scope.match('/stylesheets/mui.css').to(:controller => 'styles', :action => 'index')
     end
     

data/public/javascripts/main.js

@@ -1,79 +1,87 @@
-// Set the status of the window. 0 == closed, 1 == opened
-var windowStatus = 0;
+var windowHeight = $(window).height();
+var windowWidth = $(window).width();
 
-// Position message at top center.
-function messagePosition(){
-  var browserWidth = $(window).width();
-  var messageWidth = $('.mui_message').width();
-  $('.mui_message').css({position:'fixed', left:(browserWidth/2)+(messageWidth/2)*(-1), top:0}).slideDown('fast');
+// Message
+function muiMessageClose(){
+  $('.mui_message_target:visible').slideUp('fast');
 }
-
-// Close window.
-function windowClose(url){
-  $('.mui_window_target').fadeOut(function(){
-    windowStatus = 0;
-	});
+function muiMessageOpen(url){
+  $('.mui_message_target').hide().load(url, function(){
+    var muiMessageWidth = $('.mui_message_target').width();
+    if (muiMessageWidth > windowWidth){
+      $('.mui_message_target').css({position:'absolute', left:'1em', top:0});
+    }
+    else{
+      $('.mui_message_target').css({position:'fixed', left:(windowWidth-muiMessageWidth)/2, top:0});
+    }
+    $('.mui_click_message_close').click(function(){
+      muiMessageClose();
+    });
+    $('.mui_message_target').slideDown('fast');
+  });
 }
 
-// Open window and give the first input with class of mui_focus focus, if one exists.
-function windowOpen(url){
-  var target = $('.mui_window_target')
-  target.load(url, function(){
-    if(windowStatus == 0){
-      target.fadeIn();
+// Window
+function muiWindowClose(){
+  $('.mui_window_target:visible').fadeOut();
+}
+function muiWindowOpen(url){
+  $('.mui_window_target').load(url, function(){
+    if ($('.mui_window_target').is(':hidden')){
+      var muiWindowHeight = $('.mui_window_target').height();
+      var muiWindowWidth = $('.mui_window_target').width();
+      if (muiWindowWidth > windowWidth){
+        $('.mui_window_target').css({position:'absolute', left:'1em'});
+      }
+      else{
+        $('.mui_window_target').css({position:'fixed', left:(windowWidth-muiWindowWidth)/2});
+      }
+      if (muiWindowHeight > windowHeight){
+        $('.mui_window_target').css({position:'absolute', top:'1em'});
+      }
+      else{
+        $('.mui_window_target').css({position:'fixed', top:(windowHeight-muiWindowHeight)/2});
+      }
+      $('.mui_window_target').fadeIn();
     }
     $('.mui_focus:first').focus();
-    windowStatus = 1;
-	});
+    $('.mui_click_window_close').click(function(){
+      muiWindowClose(this.id);
+    });
+    $('.mui_click_window_redirect').click(function(){
+      muiWindowOpen(this.id);
+    });
+    $('.mui_window_target').draggable({
+      'containment': 'window',
+      'handle': '.mui_window_bar'
+    });
+  });
 }
 
-// Position window at middle center.
-function windowPosition(){
-  if(windowStatus == 0){
-    var browserWidth = $(window).width();
-    var browserHeight = $(window).height();
-    var windowWidth = $('.mui_window_target').width();
-    var windowHeight = $('.mui_window_target').height();
-    if (windowWidth > browserWidth){
-      $('.mui_window_target').css({position:'absolute', left:'1em'});
-    }
-    else{
-      $('.mui_window_target').css({position:'fixed', left:(browserWidth/2)+(windowWidth/2)*(-1)});
-    }
-    if (windowHeight > browserHeight){
-      $('.mui_window_target').css({position:'absolute', top:'1em'});
-    }
-    else{
-      $('.mui_window_target').css({position:'fixed', top:(browserHeight/2)+(windowHeight/2)*(-1)});
-    }
-  }
-}
+$(document).ready(function(){
 
-// Bind buttons.
-$(function(){
+  // Buttons
   $('.mui_click').click(function(){
     window.location = this.id;
   });
   $('.mui_click_window_open').click(function(){
-    windowOpen(this.id);
-  });
-  $('.mui_click_message_close').click(function(){
-    $('.mui_message').slideUp('fast', function(){
-      $('.mui_message').remove();
-    });
+    muiWindowOpen(this.id);
   });
-  messagePosition();
+
+  // Focus
+  $('.mui_focus:first').focus();
+
 });
 
-// Bind keyboard shortcuts.
+// Keys
 $(document).keybind('ctrl+shift+P', function(){
-  windowOpen('/password/read');
+  muiWindowOpen('/password/read');
 });
 $(document).keybind('ctrl+shift+esc', function(){
   window.location = '/password/exit';
 });
 $(document).keybind('esc', function(){
-  if ($('.mui_message').length > 0){
+  if ($('.mui_message_target').is(':visible')){
     $('.mui_click_message_close').click();
   }
   else{
@@ -86,3 +94,4 @@ $(document).keybind('left', function(){
 $(document).keybind('right', function(){
   $('[name=next]').click();
 });
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: merb-ui
 version: !ruby/object:Gem::Version 
-  version: 0.4.2
+  version: 0.4.3
 platform: ruby
 authors: 
 - UiPoet
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2008-12-17 00:00:00 -08:00
+date: 2008-12-22 00:00:00 -08:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -43,12 +43,15 @@ extra_rdoc_files: []
 files: 
 - app/controllers
 - app/controllers/application.rb
+- app/controllers/messages.rb
 - app/controllers/styles.rb
 - app/helpers
 - app/helpers/global_helpers.rb
 - app/helpers/merb_helpers.rb
 - app/helpers/styles_helper.rb
 - app/views
+- app/views/messages
+- app/views/messages/index.html.erb
 - app/views/styles
 - app/views/styles/index.css.erb
 - lib/merb-ui
@@ -64,11 +67,8 @@ files:
 - public/images/plastic.png
 - public/images/rubber.png
 - public/javascripts
-- public/javascripts/dimensions.js
 - public/javascripts/keybinder.js
 - public/javascripts/main.js
-- public/javascripts/message.js
-- public/javascripts/window.js
 - LICENSE
 - Rakefile
 - README

data/public/javascripts/dimensions.js

@@ -1,12 +0,0 @@
-/* Copyright (c) 2007 Paul Bakaus (paul.bakaus@googlemail.com) and Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
- * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
- * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
- *
- * $LastChangedDate: 2007-12-20 08:43:48 -0600 (Thu, 20 Dec 2007) $
- * $Rev: 4257 $
- *
- * Version: 1.2
- *
- * Requires: jQuery 1.2+
- */
-eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){$.19={P:\'1.2\'};$.u([\'j\',\'w\'],5(i,d){$.q[\'O\'+d]=5(){p(!3[0])6;g a=d==\'j\'?\'s\':\'m\',e=d==\'j\'?\'D\':\'C\';6 3.B(\':y\')?3[0][\'L\'+d]:4(3,d.x())+4(3,\'n\'+a)+4(3,\'n\'+e)};$.q[\'I\'+d]=5(b){p(!3[0])6;g c=d==\'j\'?\'s\':\'m\',e=d==\'j\'?\'D\':\'C\';b=$.F({t:Z},b||{});g a=3.B(\':y\')?3[0][\'8\'+d]:4(3,d.x())+4(3,\'E\'+c+\'w\')+4(3,\'E\'+e+\'w\')+4(3,\'n\'+c)+4(3,\'n\'+e);6 a+(b.t?(4(3,\'t\'+c)+4(3,\'t\'+e)):0)}});$.u([\'m\',\'s\'],5(i,b){$.q[\'l\'+b]=5(a){p(!3[0])6;6 a!=W?3.u(5(){3==h||3==r?h.V(b==\'m\'?a:$(h)[\'U\'](),b==\'s\'?a:$(h)[\'T\']()):3[\'l\'+b]=a}):3[0]==h||3[0]==r?S[(b==\'m\'?\'R\':\'Q\')]||$.N&&r.M[\'l\'+b]||r.A[\'l\'+b]:3[0][\'l\'+b]}});$.q.F({z:5(){g a=0,f=0,o=3[0],8,9,7,v;p(o){7=3.7();8=3.8();9=7.8();8.f-=4(o,\'K\');8.k-=4(o,\'J\');9.f+=4(7,\'H\');9.k+=4(7,\'Y\');v={f:8.f-9.f,k:8.k-9.k}}6 v},7:5(){g a=3[0].7;G(a&&(!/^A|10$/i.16(a.15)&&$.14(a,\'z\')==\'13\'))a=a.7;6 $(a)}});5 4(a,b){6 12($.11(a.17?a[0]:a,b,18))||0}})(X);',62,72,'|||this|num|function|return|offsetParent|offset|parentOffset|||||borr|top|var|window||Height|left|scroll|Left|padding|elem|if|fn|document|Top|margin|each|results|Width|toLowerCase|visible|position|body|is|Right|Bottom|border|extend|while|borderTopWidth|outer|marginLeft|marginTop|client|documentElement|boxModel|inner|version|pageYOffset|pageXOffset|self|scrollTop|scrollLeft|scrollTo|undefined|jQuery|borderLeftWidth|false|html|curCSS|parseInt|static|css|tagName|test|jquery|true|dimensions'.split('|'),0,{}))

data/public/javascripts/message.js

@@ -1,5 +0,0 @@
-$(document).ready(function(){
-  $('.mui_click_message_close').click(function(){
-    $('.mui_message').slide().empty();
-  });
-});

data/public/javascripts/window.js

@@ -1,13 +0,0 @@
-$(document).ready(function(){
-  windowPosition();
-  $('.mui_click_window_close').click(function(){
-    windowClose(this.id);
-  });
-  $('.mui_click_window_redirect').click(function(){
-    windowOpen(this.id);
-  });
-  $('.mui_window_target').draggable({
-    'containment': 'window',
-    'handle': '.mui_window_bar'
-  });
-});