cpee 1.3.176 → 1.3.177

data/cockpit/lib/ui.css

@@ -17,9 +17,12 @@
 html, body {
   font-family: sans-serif,Arial,Verdana,Helvetica;
   font-size: 0.85em;
+  height: 100%;
 }
 
 body {
+  display: flex;
+  flex-direction: column;
   background-color:#FFFFFF;
   padding:0;
   margin:0;
@@ -34,6 +37,23 @@ textarea, input, select, button {
   resize: none;
 }
 
+button { 
+  padding: .1em .2em;
+  border: 1pt solid ButtonShadow;  
+  border-radius: 0.2em;
+  margin: 0; 
+  font-size: 0.9em; 
+  background: ButtonFace;
+  background: -webkit-gradient(linear, left top, left bottom, from(white), to(ButtonFace));
+  background: -moz-linear-gradient(top, white, ButtonFace);
+}
+button::-moz-focus-inner {
+  border: 0 none;
+  padding: 0;
+  margin: 0;
+}
+
+input { font-family: sans-serif; font-size: 1em; }
 input::-webkit-input-placeholder { color: red; }
 input:-moz-placeholder { color: red; }
 
@@ -42,192 +62,180 @@ a:visited { color:#425d73; text-decoration:none; }
 a:hover   { color:#000000; text-decoration:underline; }
 a:active  { color:#000000; text-decoration:underline; }
 
-div.tabbed table.tabbar { 
-  padding: 0; 
-  margin: 0; 
+ui-tabbed {
+  min-height: -webkit-min-content;                                                                                                                                                                                                                                    
+  min-height: -moz-min-content;
+  min-height: min-content;
+  margin-top: 1em;
   margin-left: 1em;
   margin-right: 1em;
+}
+ui-rest {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
   margin-top: 1em;
-  border-spacing:0; 
-  border-collapse: separate; 
+  flex: 1 1 auto;
 }
 
-div.tabbed.rest table.tabbar { 
+ui-tabbed.off { 
+  border-bottom: 0.2em solid ButtonShadow;
+  border-radius: 0;
+}
+ui-tabbed.off ui-content {
+  display: none;
+}
+ui-tabbed.off ui-tabbar ui-behind {
+  display: none;
+}
+
+ui-tabbar { 
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
   padding: 0; 
   margin: 0; 
-  margin-left: 0em;
-  margin-right: 0em;
-  margin-top: 1.3em;
-  border-spacing:0; 
-  border-collapse: separate; 
 }
-
-div.tabbed table.tabbar h1 {
-  font-size: 1.4em;
-  margin-top: 0em;
-  padding-top: 0em;
-  padding-bottom: 0em;
-}  
-
-div.tabbed table.tabbar .switch h1:before {
+ui-tabbed ui-tabbar ui-tab.switch {
+  background-color: ButtonFace;
+}
+ui-tabbed ui-tabbar ui-tab.switch:after {
   content: "▽";
+  font-weight: bold;
   vertical-align:top;
   color: ButtonText;
 }  
-div.tabbed table.tabbar .switch h1.margin:before {
+ui-tabbed.off ui-tabbar ui-tab.switch:after {
   content: "▶";
+  font-weight: bold;
   color: ButtonText;
   vertical-align:top;
 }  
 
-div.tabbed table.tabbar tr:first-child { height: 2.6em; }
-div.tabbed table.tabbar .tab {
+ui-tabbar ui-tab {
+  font-size: 1.4em;
+  font-weight: bold;
+  white-space: nowrap;
+
   cursor: pointer;
-  padding: 0em;
-  padding-left: 1em;
-  padding-right: 1em;
+  padding: 0.3em 0.5em;
   border: 1pt solid ButtonShadow;
   border-bottom: 1pt solid white;
   border-radius: 1em;
   border-bottom-left-radius: 0em;
   border-bottom-right-radius: 0em;
-  width:0%;
-  -moz-border-radius: 1em;
-  -moz-border-radius-bottomleft: 0em;
-  -moz-border-radius-bottomright: 0em;
-  -webkit-border-radius: 1em;
-  -webkit-border-bottom-left-radius: 0em;
-  -webkit-border-bottom-right-radius: 0em;
 }
-div.tabbed table.tabbar .tab h1 { margin-top: 0em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em; }
-div.tabbed table.tabbar .tab h1 { white-space: nowrap; }
-div.tabbed table.tabbar .tab.inactive {
+ui-tabbar ui-tab.inactive, ui-tabbed ui-tabbar ui-tab.switch {
   border: 1pt solid ButtonShadow;
   border-radius: 1em;
   border-bottom-left-radius: 0em;
   border-bottom-right-radius: 0em;
-  -moz-border-radius: 1em;
-  -moz-border-radius-bottomleft: 0em;
-  -moz-border-radius-bottomright: 0em;
-  -webkit-border-radius: 1em;
-  -webkit-border-bottom-left-radius: 0em;
-  -webkit-border-bottom-right-radius: 0em;
 }
 
-div.tabbed table.tabbar td.tabbehind {
+ui-tabbar ui-behind {
+  flex: 1 1 auto;
   vertical-align:bottom;
-  padding:0.2em 0em;
+  padding: 0;
+  padding-top: 0.9em;
   border-bottom: 1pt solid buttonshadow;
   border-radius: 1em;
   border-bottom-left-radius: 0em;
   border-bottom-right-radius: 0em;
-  width:100%;
-  -moz-border-radius: 1em;
-  -moz-border-radius-bottomleft: 0em;
-  -moz-border-radius-bottomright: 0em;
-  -webkit-border-radius: 1em;
-  -webkit-border-bottom-left-radius: 0em;
-  -webkit-border-bottom-right-radius: 0em;
   text-align:right;
   white-space: nowrap;
-  overflow: hidden;
 }
-div.tabbed.rest table.tabbar td.tabbehind {
+ui-rest ui-tabbar ui-behind {
   padding-right: 1em;
 }
 
-div.tabbed table.tabbar td.tabbefore {
+ui-rest ui-tabbar ui-before {
   border-bottom: 1pt solid buttonshadow;
   padding-left:1em;
 }
 
-div.tabbed table.tabbar tr.border td {
-  height:0.1em;
-  background-color: ButtonShadow;
-  border-left: 1pt solid ButtonShadow;
-  border-right: 1pt solid ButtonShadow;
-  border-bottom: 1pt solid ButtonShadow;
-}
-
-div.tabbed table.tabbar td.switch {
-  background-color: ButtonFace;
-  border-bottom: 1pt solid ButtonShadow;
-}
-
-div.tabbed .tabbelow {
-  margin-left: 1em;
-  margin-right: 1em;
+ui-content {
   padding: 1em;
+  margin: 0;
   border-bottom: 1pt solid ButtonShadow;
   border-left: 1pt solid ButtonShadow;
   border-right: 1pt solid ButtonShadow;
-  border-radius: 1em;
-  border-top-left-radius: 0em;
-  border-top-right-radius: 0em;
-  -moz-border-radius: 1em;
-  -moz-border-radius-topleft: 0em;
-  -moz-border-radius-topright: 0em;
-  -webkit-border-radius: 1em;
-  -webkit-border-top-left-radius: 0em;
-  -webkit-border-top-right-radius: 0em;
+  border-bottom-left-radius: 1em;
+  border-bottom-right-radius: 1em;
 }
 
-div.tabbed.rest .tabbelow {
-  padding: 1em;
+ui-rest ui-content {
+  padding: 0;
   margin: 0;
   border-radius: 0;
   border: 0 none;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
 
-  overflow: auto;
+  display: flex;
+  height: 0;
+  flex-direction: row;
+  flex: 1 1 auto;
 }
 
-div.tabbed.rest .tabbelow.columns {
-  padding:0;
-  overflow: hidden;
-  border-collapse:collapse;
-  border-spacing:0;
-  width:100%
+ui-rest ui-content ui-area {
+  flex: 1 1 0%;
+  overflow-x: auto;
+  overflow-y: scroll;
 }
-div.tabbed.rest .tabbelow.columns > tbody > tr > td {
+
+ui-rest ui-content ui-resizehandle {
+  position:absolute;
+  color: ButtonShadow;
+  white-space:nowrap;
+  cursor: ew-resize; 
+  -webkit-transform: rotate(90deg); 
+  -webkit-transform-origin: 0% 100%; 
+  -moz-transform: rotate(90deg); 
+  -moz-transform-origin: left bottom; 
+  margin-top: -1em;
+}  
+
+ui-content ui-area {
   margin: 0;
   padding: 0;
-  border: 0 none;
-  vertical-align: top;
 }
-div.tabbed.rest .tabbelow.columns .column {
-  -moz-box-sizing:    border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing:        border-box;
 
-  margin:0;
-  padding: 1em;
+*[is=x-ui] > ui-resizehandle {
+  color: ButtonShadow;
+  white-space:nowrap;
+  z-index: 99999; 
+  cursor: s-resize; 
+  text-align: right;
+  margin-top: 0.2em;
+  margin-right: 1em;
+}
 
-  overflow: auto;
-  top: 0;
-}  
+ui-tabbed, ui-content, ui-area { display: block; }
+ui-content ui-area.inactive, ui-content ui-resizehandle.inactive, ui-rest ui-content ui-resizehandle.inactive { display: none }
 
-div.tabbed .tabbelow.inactive, div.tabbed .tabbelow .inactive { display: none; }
-div.tabbed .tabbelow .layout {
+ui-content ui-area .layout {
   width: 100%;
   border-collapse:collapse;
   border-spacing:0;
-  border:0 none;
+  border: 0 none;
   padding:0;
   margin:0;
 }
-div.tabbed .tabbelow .layout td {
+ui-rest ui-content ui-area .layout {
+  border:1em solid white;
+  box-sizing:border-box;
+} 
+ui-content ui-area .layout td {
   border:0 none;
   padding:0;
   margin:0;
 }
-div.tabbed .tabbelow .layout tr {
+ui-content ui-area .layout tr {
   border:0 none;
   padding:0;
   margin:0;
 }
-div.tabbed .tabbelow .compact {
+ui-content ui-area .compact {
   border-collapse:collapse;
   border-spacing:0;
   border:0 none;
@@ -235,31 +243,19 @@ div.tabbed .tabbelow .compact {
   margin:0;
 }
 
-div.tabbed .tabbelow .compact td {
+ui-content ui-area .compact td {
   border:0 none;
   padding:0;
   margin:0;
 }
-div.tabbed .tabbelow .compact tr {
+ui-content ui-area .compact tr {
   border:0 none;
   padding:0;
   margin:0;
 }
-div.tabbed .tabbelow .layout .fixed { white-space:nowrap; }
-div.tabbed .tabbelow .layout .top { vertical-align: top; }
+ui-content ui-area .layout .fixed { white-space:nowrap; }
+ui-content ui-area .layout .top { vertical-align: top; }
 
 .hidden {
   display: none;
 }
-
-.fixedstate {
-  background-color: white;
-  margin:0;
-  padding:1em;
-  position:fixed;
-  padding-top:0em;
-  bottom:0;
-  left:0;
-  right:0;
-}
-.fixedstate div.tabbed { margin-bottom:0; }

data/cockpit/lib/ui.js

@@ -14,51 +14,101 @@
   <http://www.gnu.org/licenses/>.
 */
 
+(function($) { //{{{
+  $.fn.dragcolumn = function() {
+    var drag = $(this);
+    var prev = drag.prev();
+    var next = drag.next(); 
+     
+    this.on("mousedown", function(e) {
+      drag.addClass('draggable');
+      $(document).one("mouseup", function(e) {
+        drag.removeClass('draggable');
+        e.preventDefault();
+      });
+      e.preventDefault();
+    });
+    
+    $(document).on("mousemove", function(e) {
+      if (!drag.hasClass('draggable'))
+        return;
+
+      // Assume 50/50 split between prev and next then adjust to
+      // the next X for prev
+      var total = prev.outerWidth() + next.outerWidth();
+      var pos = e.pageX - prev.offset().left;
+      if (pos > total) {
+        pos = total;
+      }
+      
+      var leftPercentage = pos / total;
+      var rightPercentage = 1 - leftPercentage; 
+
+      prev.css('flex', leftPercentage.toString());
+      next.css('flex', rightPercentage.toString()); 
+
+      e.preventDefault();
+    });
+  }
+  $.fn.dragresize = function() {
+    var drag = $(this);
+    var prev = drag.prev();
+    var initpos = 0;
+    var initheight = $("ui-content",prev).height();
+     
+    this.on("mousedown", function(e) {
+      drag.addClass('draggable');
+      initpos = e.pageY;
+      $(document).one("mouseup", function(e) {
+        drag.removeClass('draggable');
+        e.preventDefault();
+      });
+      e.preventDefault();
+    });
+    
+    $(document).on("mousemove", function(e) {
+      if (!drag.hasClass('draggable'))
+        return;
+
+      var pos = initheight - (initpos - e.pageY);
+      if (pos < 0)
+        return;
+
+      $("ui-content",prev).css('height', pos.toString());
+
+      e.preventDefault();
+    });
+  }
+})(jQuery); //}}}
+
 function ui_tab_click(moi) { // {{{
-  var active = $(moi).attr('id').replace(/tab/,'');
-  var tab = $(moi).parent().parent().parent().parent();
+  var active = $(moi).attr('data-tab');
+  var tabbed = $(moi).parents('ui-tabbed, ui-rest');
   var tabs = [];
-  $("td.tab",tab).each(function(){
+  $("ui-tabbar ui-tab",tabbed).each(function(){
     if (!$(this).attr('class').match(/switch/))
-      tabs.push($(this).attr('id').replace(/tab/,''));
+      tabs.push($(this).attr('data-tab'));
   });  
-  $(".inactive",tab).removeClass("inactive");
+  $(".inactive",tabbed).removeClass("inactive");
   $.each(tabs,function(a,b){
     if (b != active) {
-      $("#tab" + b).addClass("inactive");
-      $("#area" + b).addClass("inactive");
+      $("ui-tabbar ui-tab[data-tab=" + b + "]",tabbed).addClass("inactive");
+      $("ui-content *[data-belongs-to-tab=" + b + "]",tabbed).addClass("inactive");
     }  
   });
-  ui_rest_resize();
 } // }}}
 function ui_toggle_vis_tab(moi) {// {{{
-  var tabbar = $(moi).parent().parent().parent();
-  var tab = $(tabbar).parent();
-  var fix = $(tab).parent();
-  $('h1',moi).toggleClass('margin');
-  $("tr.border",tabbar).toggleClass('hidden');
-  $("div.tabbelow",tab).toggleClass('hidden');
-  $("td.tabbehind button",tabbar).toggleClass('hidden');
-  if ($(fix).attr('class') && $(fix).attr('class').match(/fixedstate/)) {
-    $(".fixedstatehollow").height($(fix).height());
-  }  
-  ui_rest_resize();
+  var tabbed = $(moi).parents('ui-tabbed');
+  tabbed.toggleClass('off');
 }// }}}
 
-function ui_rest_resize() {
-  if ($('div.tabbed.rest .tabbar')) {
-    var theight = $(window).height() - $('div.tabbed.rest .tabbar').offset().top - $('div.tabbed.rest .tabbar').height();
-    $('div.tabbed.rest .tabbelow').each(function(key,ele){
-      $(ele).height(theight - parseInt($(ele).css('padding-top')) - parseInt($(ele).css('padding-bottom')) );
-    });  
-    $('div.tabbed.rest .tabbelow .column').each(function(key,ele){
-      $(ele).height(theight - parseInt($(ele).css('padding-top')) - parseInt($(ele).css('padding-bottom')) );
-    });  
-  }  
-}  
-
 $(document).ready(function() {
-  $(window).resize(ui_rest_resize);
-  $('.tabbed table.tabbar td.tab.switch').click(function(){ui_toggle_vis_tab(this);});
-  $('.tabbed table.tabbar td.tab').not('.switch').click(function(){ui_tab_click(this);});
+  if (!($.browser.name == "Firefox" && $.browser.version >= 20) && !($.browser.name == "Chrome" && $.browser.version >= 30)) {
+    $('body').children().remove();
+    $('body').append('Sorry, only Firefox >= 20.0 and Chrom(e|ium) >= 17 for now.');
+  }  
+  $('ui-rest ui-content ui-resizehandle').dragcolumn();
+  $('*[is=x-ui] > ui-resizehandle').dragresize();
+  $('ui-tabbar ui-tab.switch').click(function(){ui_toggle_vis_tab(this);});
+  $('ui-tabbar ui-tab').not('.switch').click(function(){ui_tab_click(this);});
 });