[Rt-commit] r13284 - in rt/branches/3.8-TESTING: . share/html/NoAuth/css/3.5-default share/html/NoAuth/css/web2 share/html/NoAuth/js share/html/Widgets

jesse at bestpractical.com jesse at bestpractical.com
Fri Jun 13 13:40:31 EDT 2008


Author: jesse
Date: Fri Jun 13 13:40:30 2008
New Revision: 13284

Modified:
   rt/branches/3.8-TESTING/   (props changed)
   rt/branches/3.8-TESTING/share/html/NoAuth/css/3.4-compat/forms.css
   rt/branches/3.8-TESTING/share/html/NoAuth/css/3.5-default/forms.css
   rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/forms.css
   rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/layout.css
   rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie.css
   rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie6.css
   rt/branches/3.8-TESTING/share/html/NoAuth/js/combobox.js
   rt/branches/3.8-TESTING/share/html/Widgets/ComboBox

Log:
 r32801 at 31b:  jesse | 2008-06-13 09:06:20 -0400
 RT-Ticket: 9648
 RT-Status: resolved
 RT-Update: correspond
 
 * CSS Style updates for combo boxes
 
 r32815 at 31b:  jesse | 2008-06-13 12:19:04 -0400
 * Improve rendering of comboboxes.
 
     Tested on: Mac Firefox 3.0rc2, Mac Firefox 2.0.0.14, Mac Safari 3, Mac Opera 9.2, Mac Opera 9.5, Windows IE 6, Windows IE 7.
 
 r32821 at 31b:  jesse | 2008-06-13 13:30:11 -0400
 * 3 hours of time isn't too much to spend on aligning four buttons across six browsers, right?
 r32822 at 31b:  jesse | 2008-06-13 13:38:04 -0400
 * "And opera, too!"


Modified: rt/branches/3.8-TESTING/share/html/NoAuth/css/3.4-compat/forms.css
==============================================================================
--- rt/branches/3.8-TESTING/share/html/NoAuth/css/3.4-compat/forms.css	(original)
+++ rt/branches/3.8-TESTING/share/html/NoAuth/css/3.4-compat/forms.css	Fri Jun 13 13:40:30 2008
@@ -72,6 +72,7 @@
 %# ComboBox styles... some properties like height and width must be dynamically
 %# set in the JS (at least for now).
 .combobox {
+    position: relative;
     border: 2px inset ButtonHighlight;
     padding-left: 0.5em;
     padding-bottom: 0.1em;

Modified: rt/branches/3.8-TESTING/share/html/NoAuth/css/3.5-default/forms.css
==============================================================================
--- rt/branches/3.8-TESTING/share/html/NoAuth/css/3.5-default/forms.css	(original)
+++ rt/branches/3.8-TESTING/share/html/NoAuth/css/3.5-default/forms.css	Fri Jun 13 13:40:30 2008
@@ -114,28 +114,30 @@
 %# ComboBox styles... some properties like height and width must be dynamically
 %# set in the JS (at least for now).
 .combobox {
-    border: 1px solid #069;
-    padding: 4px;
+    position: relative;
+    z-index: 100;
 }
 
 .combobox .combo-button {
-    padding: 0 2px 0 2px;
     margin: 0;
+    margin-top: -0.2em;
+    margin-left: -0.3em;
     background: ButtonFace;
     color: ButtonText;
     border: 2px outset ButtonHighlight;
     cursor: default;
-    font-size: 8pt;
+    font-size: 1em;
+    z-index: 200;
 }
 
 .combobox .combo-text {
-    border: none;
     margin: 0;
     padding: 1px;
+    z-index: 110;
 }
 
 .combobox .combo-list {
     border: 1px outset;
-    z-index: 200;
+    
 }
 

Modified: rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/forms.css
==============================================================================
--- rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/forms.css	(original)
+++ rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/forms.css	Fri Jun 13 13:40:30 2008
@@ -170,3 +170,47 @@
   font-style: italic;
 }
 
+
+%# ComboBox styles... some properties like height and width must be dynamically
+%# set in the JS (at least for now).
+.combobox {
+    border: 2px inset ButtonHighlight;
+    position: relative;
+    min-width: 10em;
+}
+
+.combobox .combo-button {
+    padding: 0;
+    margin-top: 0;
+    cursor: default;
+    color: ButtonFace;
+    padding-right: 0.2em;
+    background: ButtonFace;
+    border: 2px outset ButtonHighlight;
+}
+
+/* this style replaces the default down-triangle with one that looks more like
+ *  native widget sets. It does not work in IE as it's an :after pseudo element 
+ *  with a "content" value. but that's ok because IE can't display unicode 25be
+ *  anyway */
+
+.combobox .combo-button:after {
+    color: ButtonText;
+    margin: 0;
+    padding: 0;
+    margin-top: -0.5em;
+    margin-left: -0.8em;
+    content: "\25be";
+}
+
+.combobox .combo-text {
+    margin: 0;
+    border: 0;
+    padding: 0;
+}
+
+.combobox .combo-list {
+    border: 1px outset;
+    z-index: 150;
+}
+

Modified: rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/layout.css
==============================================================================
--- rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/layout.css	(original)
+++ rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/layout.css	Fri Jun 13 13:40:30 2008
@@ -77,12 +77,18 @@
 
 }
 
-
 #topactions {
  position: absolute;
+ background: transparent;
  right: 1em;
- top: 3.85em; 
+ top: 3.8em; 
+ width: 38em;
  font-size: 0.9em;
+ z-index: 99;
+}
+
+#topactions form * {
+    vertical-align: top;
 }
 
 #topactions button, #topactions select, #topactions input{
@@ -93,19 +99,24 @@
 }
 
 #topactions form {
- display: inline;
+ display: block;
 
 }
 
-.topaction form#CreateTicketInQueue {
- position: absolute;
- padding-right: 2em;
- top: 0;
- left: -26em;
- right: 18em;
+#topactions #CreateTicketInQueue {
  text-align: right; 
 
 }
+#topactions #simple-search {
+    float: right;
+}
+
+#topactions #simple-search input.button {
+    width: 5em;
+}
+#topactions #simple-search .field{
+ margin-left: 1em;
+ }
 
 div#footer {
  position: absolute;
@@ -194,7 +205,7 @@
 div#header h1 {
  position: absolute;
  left: 7.25em;
- right: 23em;
+ right: 20em;
  overflow: hidden;
  height: 1em;
  font-size: 1.4em;

Modified: rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie.css
==============================================================================
--- rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie.css	(original)
+++ rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie.css	Fri Jun 13 13:40:30 2008
@@ -61,40 +61,33 @@
 div#header h1 {
  position: absolute;
  left: 7.25em;
- right: 25em;
  overflow: hidden;
  height: 1em;
  font-size: 1.4em;
  margin-top: 0.4em;
+ right: 23.5em;
  padding: 0.25em;
 }
 
 
-
+#topactions {
+    top: 4.1em;
+    width: 42em;
+}
 .topaction form * { 
     vertical-align: top;
-   height: 2em;
-   margin-top: 0.2em;
-   padding-top: 0.25em;
-   padding-bottom: 0.25em;
 }
 
 .topaction form button, .topaction form input { 
    height: 2em; 
-    margin-top: 0;
 }
 
 .topaction form input.field {
    height: 1.6em; 
-    margin-top: 0;
 }
 
-.topaction form#CreateTicketInQueue {
- top: 0;
- left: -30em;
- right: 20em;
- text-align: right; 
-
+.topaction .select-queue {
+    margin-top: 0.2em;
 }
 
 div#page-navigation ul#actions-menu {
@@ -225,5 +218,12 @@
 .titlebox .titlebox .titlebox-title .right{
     top: 0.25em;
 }
+.combobox .combo-button {
+    color: ButtonText;
+    padding: 0;
+}
 
-
+.combobox .combo-list {
+    margin-top:0.5em;
+    margin-left: -0.2em;
+}

Modified: rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie6.css
==============================================================================
--- rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie6.css	(original)
+++ rt/branches/3.8-TESTING/share/html/NoAuth/css/web2/msie6.css	Fri Jun 13 13:40:30 2008
@@ -46,10 +46,9 @@
 %# 
 %# END BPS TAGGED BLOCK }}}
 
-.topaction form#CreateTicketInQueue {
- left: -22em;
- right: 10em;
 
+.topaction .select-queue {
+    margin-top: 0;
 }
 
 div#page-navigation ul#page-menu {

Modified: rt/branches/3.8-TESTING/share/html/NoAuth/js/combobox.js
==============================================================================
--- rt/branches/3.8-TESTING/share/html/NoAuth/js/combobox.js	(original)
+++ rt/branches/3.8-TESTING/share/html/NoAuth/js/combobox.js	Fri Jun 13 13:40:30 2008
@@ -85,7 +85,6 @@
     button.onclick = button.Toggle;
     button.onmouseover = function(e) { this.Container.List.DisableBlur(e); };
     button.onmouseout = function(e) { this.Container.List.EnableBlur(e); };
-    button.innerHTML = "\u25BC";
     button.onselectstart = function(e){ return false; };
     button.style.height = ( list.offsetHeight - 4 ) + "px";
     
@@ -93,7 +92,6 @@
     text.TypeDown = ComboBox_TextTypeDown;
     text.KeyAccess = ComboBox_TextKeyAccess;
     text.onkeyup = function(e) { this.KeyAccess(e); this.TypeDown(e); };
-    text.style.width = ( list.offsetWidth ) + "px";
     
     list.Container = combo;
     list.Show = ComboBox_ShowList;
@@ -220,8 +218,8 @@
 function ComboBox_ShowList(e) {
     if ( !this.IsShowing && !this.disabled ) {
         this.style.width = ( this.Container.offsetWidth ) + "px";
-        this.style.top = ( this.Container.offsetHeight + ComboBox_RecursiveOffsetTop(this.Container,true) ) + "px";
-        this.style.left = ( ComboBox_RecursiveOffsetLeft(this.Container,true) + 1 ) + "px";
+        this.style.top = '1.2em';//( this.Container.offsetHeight + ComboBox_RecursiveOffsetTop(this.Container,true) ) + "px";
+        this.style.left = '0px';// ( ComboBox_RecursiveOffsetLeft(this.Container,true) + 1 ) + "px";
         ComboBox_SetVisibility(this,true);
         this.focus();
         this.IsShowing = true;

Modified: rt/branches/3.8-TESTING/share/html/Widgets/ComboBox
==============================================================================
--- rt/branches/3.8-TESTING/share/html/Widgets/ComboBox	(original)
+++ rt/branches/3.8-TESTING/share/html/Widgets/ComboBox	Fri Jun 13 13:40:30 2008
@@ -48,9 +48,9 @@
 <nobr>
 <script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/NoAuth/js/combobox.js"></script>
 
-<span id="<% $Name %>_Container" class="combobox">
+<div id="<% $Name %>_Container" class="combobox">
 <input name="<% $Name %>" id="<% $Name %>" class="combo-text" value="<% $Default || '' %>" type="text" <% $Size ? "size='$Size'" : '' |n %> autocomplete="off" />
-<br style="display: none" /><span id="<% $Name %>_Button" class="combo-button"></span><select name="List-<% $Name %>" id="<% $Name %>_List" class="combo-list" onchange="ComboBox_SimpleAttach(this, this.form['<% $Name %>']); " size="<% $Rows %>">
+<br style="display: none" /><span id="<% $Name %>_Button" class="combo-button">&#9660;</span><select name="List-<% $Name %>" id="<% $Name %>_List" class="combo-list" onchange="ComboBox_SimpleAttach(this, this.form['<% $Name %>']); " size="<% $Rows %>">
 <option style="display: none" value="">-</option>
 % foreach my $value (@Values) {
         <option value="<%$value%>"><% $value%></option>


More information about the Rt-commit mailing list