Changeset 65145 in vbox

Timestamp:

Jan 5, 2017 11:44:01 AM (8 years ago)

Author:

vboxsync

Message:

TestManager: Added >> link for making the sidebar wider to more easily manipulate the filters.

Location:

trunk/src/VBox/ValidationKit/testmanager

Files:

• htdocs/css/common.css (modified) (7 diffs)
• htdocs/js/common.js (modified) (1 diff)
• webui/template-details.html (modified) (1 diff)
• webui/wuimain.py (modified) (1 diff)

trunk/src/VBox/ValidationKit/testmanager/htdocs/css/common.css

@@ -177 +177 @@
 }
 
+body.tm-wide-side-menu #side-menu-wrap {
+    width:          300px;
+}
 #side-menu-wrap {
     position:       fixed;
@@ -194 +197 @@
 #side-menu {
     margin-top:     46px;
+    margin-top:     70px;
+    padding-top:    6px
     height:         auto;
     max-height:     100%;
-    width:          156px;
+    width:          95%;
+    width:          calc(100% - 8px); /* CSS3 */
 
     display:            flex;
@@ -209 +215 @@
 }
 
+body.tm-wide-side-menu #main {
+    margin-left:    300px;
+}
 #main {
     height:         100%;
@@ -247 +256 @@
     background-color: #c0d0e0;
     padding:        2px 2px 2px 2px;
+}
+
+#top-menu.tm-top-menu-wo-side {
     border-radius:  12px;
+}
+#top-menu {
+    border-radius:  12px 12px 12px 0px;
+}
+
+#side-menu {
+    border-radius:  0px 0px 12px 12px;
 }
 
@@ -275 +294 @@
 /* Side menu: */
 #side-menu {
-    padding-top:    28px; /**< #top-menu.max-height */
+    /* margin-top and padding-top are set up in layout !*/
     margin-right:   3px;
     margin-left:    3px;
@@ -308 +327 @@
     margin-top:     0.5em;
 }
+
+.tm-sidebar-size-link {
+    float:          right;
+}
+
 
 /* Webkit: Pretty scroll bars on the menu body as well as inside filter criteria. */
@@ -441 +465 @@
  */
 #top-menu {
-   margin:          0 auto;
+   margin-right:   3px;                 /* same as #side-menu! */
+   margin-left:    3px;
 }
 

trunk/src/VBox/ValidationKit/testmanager/htdocs/js/common.js

@@ -434 +434 @@
     }
     return true;
+}
+
+/**
+ * Toggles the sidebar size so filters can more easily manipulated.
+ */
+function toggleSidebarSize()
+{
+    var sLinkText;
+    if (document.body.className != 'tm-wide-side-menu')
+    {
+        document.body.className = 'tm-wide-side-menu';
+        sLinkText = '\u00ab\u00ab';
+    }
+    else
+    {
+        document.body.className = '';
+        sLinkText = '\u00bb\u00bb';
+    }
+
+    var aoToggleLink = document.getElementsByClassName('tm-sidebar-size-link');
+    var i;
+    for (i = 0; i < aoToggleLink.length; i++)
+        if (aoToggleLink[i].textContent.indexOf('\u00bb') >= 0 || aoToggleLink[i].textContent.indexOf('\u00ab') >= 0)
+            aoToggleLink[i].textContent = sLinkText;
 }
 

trunk/src/VBox/ValidationKit/testmanager/webui/template-details.html

@@ -22 +22 @@
                 <h1>@@PAGE_TITLE@@</h1>
             </div>
-            <div id="top-menu">
+            <div id="top-menu" class="tm-top-menu-wo-side">
                 <ul>
                     @@TOP_MENU_ITEMS@@

trunk/src/VBox/ValidationKit/testmanager/webui/wuimain.py

@@ -928 +928 @@
         # Generate the filter panel.
         sHtml += u'<div id="side-filters">\n' \
-                 u' <p>Filters</p>\n' \
+                 u' <p>Filters' \
+                 u' <a href="javascript:toggleSidebarSize();" class="tm-sidebar-size-link">&#x00bb;&#x00bb;</p>\n'\
                  u' <dl>\n';