More changes.

src/_h5ai/client/css/inc/download.less

@@ -1,9 +1,8 @@
 
 #download {
     display: none;
-    .transition(all 0.2s ease-in-out);
 
     &.failed {
-        background-color: rgba(255,0,0,0.5);
+        background-color: @col-error;
     }
 }

src/_h5ai/client/css/inc/filter.less

@@ -2,18 +2,23 @@
 #filter {
 
     input {
+        display: none;
         border: none;
         font-family: @font-family;
         font-weight: lighter;
+        font-size: 16px;
         color: @col;
         background: transparent;
-        width: 30px;
         outline: 0;
+        width: 160px;
+        padding: 0 12px 0 4px;
+        line-height: 48px;
+        vertical-align: top;
     }
 
-    &.current {
+    &.active {
         input {
-            width: 150px;
+            display: inline-block;
         }
     }
 }

src/_h5ai/client/css/inc/general.less

@@ -56,7 +56,8 @@
 @col-sb-thumb-active: rgba(0,0,0,0.25);
 
 @col-range-back: rgb(224,224,224);
-@col-range-thumb: rgb(190,190,190);
+// @col-range-thumb: rgb(190,190,190);
+@col-range-thumb: #555;
 
 @border-widget: 1px solid @col-border;
 @border-widget-sep: 1px solid @col-widget-sep;
@@ -135,6 +136,11 @@ html {
     &.browser .noBrowserMsg {
         display: none;
     }
+    &.js.browser {
+        #bottombar {
+            display: none;
+        }
+    }
 }
 
 body {

src/_h5ai/client/css/inc/sidebar.less

@@ -4,12 +4,15 @@
     overflow: auto;
     flex: 0 0 auto;
     order: 0;
-    width: 264px;
+    // width: 264px;
-    border-right: 1px solid @col-border;
+    // border-right: 1px solid @col-border;
+    border-right: 2px solid rgba(0, 0, 0, 0.06);
+    background: #fafafa;
+    z-index: 1;
 }
 
 #settings {
-    padding: 16px 8px 16px 16px;
+    padding: 16px;
 
     .block {
         display: block;
@@ -25,7 +28,7 @@
         color: @col;
         cursor: pointer;
         text-decoration: none;
-        opacity: 0.7;
+        // opacity: 0.7;
         .transition(all 0.2s ease-in-out);
 
         display: block;
@@ -34,7 +37,8 @@
 
         &:hover {
             opacity: 1.0;
-            box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
+            background: rgba(0,0,0,0.03);
+            // box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
         }
     }
 
@@ -66,7 +70,8 @@
         outline: 0;
 
         &:hover {
-            box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
+            background: rgba(0,0,0,0.03);
+            // box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
         }
     }
 
@@ -87,7 +92,8 @@
         outline: 0;
 
         &:hover {
-            box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
+            background: rgba(0,0,0,0.03);
+            // box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
         }
    }
 
@@ -134,4 +140,8 @@
     input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
     input[type='range']::-moz-range-thumb { .range-thumb; }
     input[type='range']::-ms-thumb { .range-thumb; }
+
+    #view-size {
+        display: block;
+    }
 }

src/_h5ai/client/css/inc/topbar.less

@@ -17,8 +17,29 @@
 }
 
 
-#navbar {
+#backlink {
-    display: none;
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 99;
+    text-align: center;
+    padding: 6px 12px;
+    .transition(all 0.2s ease-in-out);
+
+    &, &:active, &:visited {
+        color: @col-text-disabled-black;
+        cursor: pointer;
+        text-decoration: none;
+    }
+    &:hover {
+        color: @col-hover;
+    }
+    &:focus {
+        outline: 0;
+    }
+
+    div {
+        line-height: 18px;
+    }
 }
 
 
@@ -31,6 +52,7 @@
     .tool {
         display: inline-block;
         cursor: pointer;
+        .transition(all 0.2s ease-in-out);
 
         img {
             display: inline-block;
@@ -38,13 +60,17 @@
             height: 24px;
             padding: 12px;
         }
+
+        &:hover img {
+            background: rgba(0,0,0,0.03);
+        }
     }
 }
 
 
 #crumbbar {
     overflow: hidden;
-    flex: 0 0 auto;
+    flex: 1 1 auto;
     order: 2;
     height: 48px;
     font-size: 16px;

src/_h5ai/client/css/inc/tree.less

@@ -7,7 +7,7 @@
     order: 1;
 
     padding: 16px 16px 16px 8px;
-    border-right: 1px solid @col-border;
+    // border-right: 1px solid @col-border;
     white-space: nowrap;
     max-width: 250px;
     overflow-x: hidden;

src/_h5ai/client/images/settings.svg

@@ -9,8 +9,9 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="24"
    height="24"
-   version="1.1"
+   viewBox="0 0 24 24"
    id="svg2"
+   version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="settings.svg">
   <metadata
@@ -40,23 +41,18 @@
      id="namedview8"
      showgrid="false"
      inkscape:zoom="9.8333333"
-     inkscape:cx="-14.476267"
+     inkscape:cx="-5.8983051"
-     inkscape:cy="-3.677966"
+     inkscape:cy="12"
      inkscape:window-x="49"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg2"
+     inkscape:current-layer="svg2" />
-     fit-margin-top="0"
+  <path
-     fit-margin-left="0"
+     d="M0 0h24v24h-24z"
-     fit-margin-right="0"
+     fill="none"
-     fit-margin-bottom="0" />
+     id="path4" />
-  <g
+  <path
-     id="g4"
+     d="M3 18h18v-2h-18v2zm0-5h18v-2h-18v2zm0-7v2h18v-2h-18z"
-     transform="translate(-1.0504365e-7,-1028.3622)">
+     id="path6"
-    <path
+     style="fill:#555555;fill-opacity:1;stroke:none" />
-       d="m 19.432209,1041.3422 c 0.04,-0.32 0.07,-0.64 0.07,-0.98 0,-0.34 -0.03,-0.66 -0.07,-0.98 l 2.11,-1.65 c 0.19,-0.15 0.24,-0.42 0.12,-0.64 l -2,-3.46 c -0.12,-0.22 -0.39,-0.3 -0.61,-0.22 l -2.49,1 c -0.52,-0.4 -1.08,-0.73 -1.69,-0.98 l -0.38,-2.65 c -0.03,-0.24 -0.24,-0.42 -0.49,-0.42 h -4 c -0.2500003,0 -0.4600003,0.18 -0.4900003,0.42 l -0.38,2.65 c -0.61,0.25 -1.17,0.59 -1.69,0.98 l -2.49,-1 c -0.23,-0.09 -0.49,0 -0.61,0.22 l -2,3.46 c -0.13,0.22 -0.07,0.49 0.12,0.64 l 2.11,1.65 c -0.04,0.32 -0.07,0.65 -0.07,0.98 0,0.33 0.03,0.66 0.07,0.98 l -2.11,1.65 c -0.19,0.15 -0.24,0.42 -0.12,0.64 l 2,3.46 c 0.12,0.22 0.39,0.3 0.61,0.22 l 2.49,-1 c 0.52,0.4 1.08,0.73 1.69,0.98 l 0.38,2.65 c 0.03,0.24 0.24,0.42 0.4900003,0.42 h 4 c 0.25,0 0.46,-0.18 0.49,-0.42 l 0.38,-2.65 c 0.61,-0.25 1.17,-0.59 1.69,-0.98 l 2.49,1 c 0.23,0.09 0.49,0 0.61,-0.22 l 2,-3.46 c 0.12,-0.22 0.07,-0.49 -0.12,-0.64 l -2.11,-1.65 z m -7.43,2.52 c -1.93,0 -3.5000003,-1.57 -3.5000003,-3.5 0,-1.93 1.5700003,-3.5 3.5000003,-3.5 1.93,0 3.5,1.57 3.5,3.5 0,1.93 -1.57,3.5 -3.5,3.5 z"
-       style="fill:#555555"
-       id="path6"
-       inkscape:connector-curvature="0" />
-  </g>
 </svg>

src/_h5ai/client/js/inc/ext/download.js

@@ -7,12 +7,9 @@ modulejs.define('ext/download', ['_', '$', 'core/settings', 'core/resource', 'co
             alwaysVisible: false
         }, allsettings.download);
     var downloadBtnTemplate =
-            '<li id="download">' +
+            '<div id="download" class="tool">' +
-                '<a href="#">' +
+                '<img src="' + resource.image('download') + '" alt="download"/>' +
-                    '<img src="' + resource.image('download') + '" alt="download"/>' +
+            '</div>';
-                    '<span class="l10n-download"/>' +
-                '</a>' +
-            '</li>';
     var selectedItems = [];
 
 
@@ -49,8 +46,8 @@ modulejs.define('ext/download', ['_', '$', 'core/settings', 'core/resource', 'co
         }
 
         $(downloadBtnTemplate)
-            .find('a').on('click', onClick).end()
+            .on('click', onClick)
-            .appendTo('#navbar');
+            .appendTo('#toolbar');
 
         if (settings.alwaysVisible) {
             $('#download').show();

src/_h5ai/client/js/inc/ext/filter.js

@@ -4,13 +4,12 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core
             enabled: false
         }, allsettings.filter);
     var template =
-            '<li id="filter">' +
+            '<div id="filter" class="tool">' +
-                '<span class="element">' +
+                '<img src="' + resource.image('filter') + '" alt="filter"/>' +
-                    '<img src="' + resource.image('filter') + '" alt="filter"/>' +
+                '<input type="text" value="" placeholder="filter"/>' +
-                    '<input type="text" value="" placeholder="filter"/>' +
+            '</div>';
-                '</span>' +
-            '</li>';
     var noMatchTemplate = '<div class="no-match l10n-noMatch"/>';
+    var inputIsVisible = false;
     var $filter, $input, $noMatch;
 
 
@@ -66,36 +65,29 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core
         return new RegExp(sequence, 'i');
     }
 
-    function reset() {
+    function update() {
 
-        $input.val('').blur();
+        if (inputIsVisible) {
-    }
+            var val = $input.val();
-
-    function update(focus) {
-
-        var val = $input.val();
-
-        if (focus) {
-            $input.focus();
-        }
-
-        if (val || focus) {
             filter(parseFilterSequence(val));
-            $filter.addClass('current');
+            $filter.addClass('active');
+            $input.focus();
         } else {
             filter();
-            $filter.removeClass('current');
+            $filter.removeClass('active');
         }
     }
 
-    function updt() {
+    function toggle() {
 
-        update(true);
+        inputIsVisible = !inputIsVisible;
+        update();
     }
 
-    function updf() {
+    function reset() {
 
-        update(false);
+        $input.val('');
+        update();
     }
 
     function init() {
@@ -104,22 +96,12 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core
             return;
         }
 
-        $filter = $(template).appendTo('#navbar');
+        $filter = $(template).appendTo('#toolbar');
         $input = $filter.find('input');
         $noMatch = $(noMatchTemplate).appendTo('#view');
 
-        $filter.on('click', updt);
+        $filter.on('click', 'img', toggle);
-        $input.on('focus blur keyup', updf);
+        $input.on('keyup', update);
-
-        $(document)
-            .on('keydown', function (event) {
-
-                if (event.which === 27) {
-                    reset();
-                }
-            })
-            .on('keypress', updt);
-
         event.sub('location.changed', reset);
     }
 

src/_h5ai/client/js/inc/view/ensure.js

@@ -4,7 +4,6 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi
             '<div id="topbar">' +
                 '<div id="toolbar"/>' +
                 '<div id="crumbbar"/>' +
-                '<div id="navbar"/>' +
             '</div>';
     var templateMainRow =
             '<div id="main-row">' +
@@ -12,6 +11,11 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi
                     '<div id="settings"/>' +
                 '</div>' +
             '</div>';
+    var templateBacklink =
+            '<a id="backlink" href="http://larsjung.de/h5ai/" title="h5ai project page">' +
+                '<div>powered by</div>' +
+                '<div>h5ai ' + config.setup.VERSION + '</div>' +
+            '</a>';
 
 
     var selb = '#bottombar';
@@ -47,12 +51,13 @@ modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, confi
 
         $(templateTopbar).appendTo('body');
         $(templateMainRow).appendTo('body');
+        $(templateBacklink).appendTo('#topbar');
 
-        event.sub('ready', function () {
+        // event.sub('ready', function () {
 
-            ensure();
+        //     ensure();
-            setInterval(ensure, 60000);
+        //     setInterval(ensure, 60000);
-        });
+        // });
     }