Clean code. Change theme structure.

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

@@ -23,7 +23,7 @@
     order: 99;
     text-align: center;
     padding: 6px 12px;
-    // max-width: 80px;
+    max-width: 80px;
     overflow: hidden;
     height: 36px;
     .transition(all 0.2s ease-in-out);
@@ -79,14 +79,14 @@
     height: 48px;
     font-size: 16px;
     padding: 0 8px;
-    border-left: 1px solid rgba(0,0,0,0.05);
+    // border-left: 1px solid rgba(0,0,0,0.05);
 
     a, a:active, a:visited {
         color: @col;
         cursor: pointer;
         text-decoration: none;
 
-        &.current {
+        &.active {
             font-weight: bold;
             color: @col-text-highlight;
         }

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

@@ -24,7 +24,7 @@
         }
     }
 
-    .current > a {
+    .active > a {
         font-weight: bold;
     }
 

src/_h5ai/client/css/inc/view-details.less

@@ -60,10 +60,14 @@
             padding: 0 4px;
         }
 
-        .ascending .sort.ascending,
-        .descending .sort.descending {
+        .ascending .sort {
             display: inline;
         }
+
+        .descending .sort {
+            display: inline;
+            .transform(rotate(180deg));
+        }
     }
 
     .item {

src/_h5ai/client/images/descending.svg

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
-  <path d="m6 14.3 1.4 1.4 4.6-4.6 4.6 4.6 1.4-1.4-6-6z" fill="#555"/>
-</svg>

src/_h5ai/client/images/fallback/vid1.svg

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
-  <path d="M4 4C2.9 4 2 4.9 2 6l0 12c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 6C22 4.9 21.1 4 20 4zm5 4 6.5 4-6.5 4z" fill="#555"/>
-</svg>

src/_h5ai/client/images/folder-page.svg

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
-  <path d="M4 4C2.9 4 2 4.9 2 6L2 18C2 19.1 2.9 20 4 20L20 20C21.1 20 22 19.1 22 18L22 8C22 6.9 21.1 6 20 6L12 6 10 4 4 4zM19 9L19 17 11 17C11 12.6 14.6 9 19 9z" fill="#555"/>
-</svg>

src/_h5ai/client/images/folder.svg

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
-  <path d="M4 4C2.9 4 2 4.9 2 6l0 2 0 1 0 9c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 8C22 6.9 21.1 6 20 6L12 6 10 4z" fill="#555"/>
-</svg>

src/_h5ai/client/images/page.svg

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
-  <path d="M4 4C2.9 4 2 4.9 2 6L2 18C2 19.1 2.9 20 4 20L20 20C21.1 20 22 19.1 22 18L22 8C22 6.9 21.1 6 20 6L12 6 10 4 4 4zM19 9L19 17 11 17C11 12.6 14.6 9 19 9z" fill="#555"/>
-</svg>

src/_h5ai/client/images/themes/README.md

@@ -1,7 +1,8 @@
 # Themes
 
 This directory will contain any themes you add. At the moment there are only
-icon themes supported. The folder structure is: `<theme-name>/icons/<type>.<ext>`
+icon themes supported. The folder structure is: `<theme-name>/<type>.<ext>`,
+with `<ext>` one of `svg`, `png` or `jpg`.
 
 To select a theme use the option `view > theme` in file `conf/options.json`.
 

src/_h5ai/client/js/inc/core/resource.js

@@ -1,17 +1,15 @@
-modulejs.define('core/resource', ['_', '$', 'config', 'core/settings'], function (_, $, config, settings) {
+modulejs.define('core/resource', ['_', 'config', 'core/settings'], function (_, config, settings) {
 
-    var win = window;
-    var appHref = settings.appHref;
-    var imagesHref = appHref + 'client/images/';
-    var fallbackHref = appHref + 'client/images/fallback/';
-    var themesHref = appHref + 'client/themes/';
-    var scriptsHref = appHref + 'client/js/';
-    var fallbacks = ['file', 'folder', 'folder-page', 'folder-parent', 'ar', 'aud', 'bin', 'img', 'txt', 'vid'];
+    var imagesHref = settings.appHref + 'client/images/';
+    var uiHref = imagesHref + 'ui/';
+    var themesHref = imagesHref + 'themes/';
+    var defaultThemeHref = themesHref + 'default/';
+    var defaultIcons = ['file', 'folder', 'folder-page', 'folder-parent', 'ar', 'aud', 'bin', 'img', 'txt', 'vid'];
 
 
     function image(id) {
 
-        return imagesHref + id + '.svg';
+        return uiHref + id + '.svg';
     }
 
     function icon(id) {
@@ -23,15 +21,15 @@ modulejs.define('core/resource', ['_', '$', 'config', 'core/settings'], function
             return themesHref + href;
         }
 
-        if (_.indexOf(fallbacks, id) >= 0) {
-            return fallbackHref + id + '.svg';
+        if (_.indexOf(defaultIcons, id) >= 0) {
+            return defaultThemeHref + id + '.svg';
         }
 
-        if (_.indexOf(fallbacks, baseId) >= 0) {
-            return fallbackHref + baseId + '.svg';
+        if (_.indexOf(defaultIcons, baseId) >= 0) {
+            return defaultThemeHref + baseId + '.svg';
         }
 
-        return fallbackHref + 'file.svg';
+        return defaultThemeHref + 'file.svg';
     }
 
 

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

@@ -8,7 +8,7 @@ modulejs.define('ext/crumb', ['_', '$', 'core/settings', 'core/resource', 'core/
                 '<img class="sep" src="' + resource.image('crumb') + '" alt=">"/>' +
                 '<span class="label"/>' +
             '</a>';
-    var pageHintTemplate = '<img class="hint" src="' + resource.image('page') + '" alt="has index page"/>';
+    var pageHintTemplate = '<img class="hint" src="' + resource.icon('folder-page') + '" alt="has index page"/>';
 
 
     function update(item, force) {
@@ -31,7 +31,7 @@ modulejs.define('ext/crumb', ['_', '$', 'core/settings', 'core/resource', 'core/
         }
 
         if (item.isCurrentFolder()) {
-            $html.addClass('current');
+            $html.addClass('active');
         }
 
         if (!item.isManaged) {
@@ -57,9 +57,9 @@ modulejs.define('ext/crumb', ['_', '$', 'core/settings', 'core/resource', 'core/
             var $html = $(this);
             if ($html.data('item') === item) {
                 found = true;
-                $html.addClass('current');
+                $html.addClass('active');
             } else {
-                $html.removeClass('current');
+                $html.removeClass('active');
             }
         });
 

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

@@ -8,16 +8,16 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
             '<div id="pv-overlay" class="noSelection">' +
                 '<div id="pv-content"/>' +
                 '<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
-                '<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview/prev') + '"/></div>' +
-                '<div id="pv-next-area" class="hof"><img src="' + resource.image('preview/next') + '"/></div>' +
+                '<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview-prev') + '"/></div>' +
+                '<div id="pv-next-area" class="hof"><img src="' + resource.image('preview-next') + '"/></div>' +
                 '<div id="pv-bottombar" class="clearfix hof">' +
                     '<ul id="pv-buttons">' +
-                        '<li id="pv-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview/close') + '"/></li>' +
-                        '<li id="pv-bar-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/raw') + '"/></a></li>' +
-                        '<li id="pv-bar-fullscreen" class="bar-right bar-button"><img src="' + resource.image('preview/fullscreen') + '"/></li>' +
-                        '<li id="pv-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview/next') + '"/></li>' +
+                        '<li id="pv-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview-close') + '"/></li>' +
+                        '<li id="pv-bar-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview-raw') + '"/></a></li>' +
+                        '<li id="pv-bar-fullscreen" class="bar-right bar-button"><img src="' + resource.image('preview-fullscreen') + '"/></li>' +
+                        '<li id="pv-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview-next') + '"/></li>' +
                         '<li id="pv-bar-idx" class="bar-right bar-label"/>' +
-                        '<li id="pv-bar-prev" class="bar-right bar-button"><img src="' + resource.image('preview/prev') + '"/></li>' +
+                        '<li id="pv-bar-prev" class="bar-right bar-button"><img src="' + resource.image('preview-prev') + '"/></li>' +
                     '</ul>' +
                 '</div>' +
             '</div>';
@@ -53,10 +53,10 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
 
         if (isFullscreen) {
             $('#pv-overlay').addClass('fullscreen');
-            $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen'));
+            $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-no-fullscreen'));
         } else {
             $('#pv-overlay').removeClass('fullscreen');
-            $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen'));
+            $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-fullscreen'));
         }
 
         if (_.isFunction(onAdjustSize)) {

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

@@ -9,9 +9,7 @@ modulejs.define('ext/sort', ['_', '$', 'core/settings', 'core/resource', 'core/e
             folders: 0
         }, allsettings.sort);
     var storekey = 'ext/sort';
-    var template =
-            '<img src="' + resource.image('ascending') + '" class="sort ascending" alt="ascending" />' +
-            '<img src="' + resource.image('descending') + '" class="sort descending" alt="descending" />';
+    var template = '<img src="' + resource.image('sort') + '" class="sort" alt="sort order" />';
 
 
     function getType(item) {

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

@@ -37,7 +37,7 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/s
             .data('item', item);
 
         location.setLink($a, item);
-        $img.attr('src', resource.image('folder'));
+        $img.attr('src', resource.icon('folder'));
         $label.text(item.label);
 
         if (item.isFolder()) {
@@ -60,7 +60,7 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/s
 
             // is it the current folder?
             if (item.isCurrentFolder()) {
-                $html.addClass('current');
+                $html.addClass('active');
             }
 
             // does it have subfolders?
@@ -83,7 +83,7 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/s
 
             // reflect folder status
             if (!item.isManaged) {
-                $img.attr('src', resource.image('folder-page'));
+                $img.attr('src', resource.icon('folder-page'));
             }
         }
 

src/_h5ai/server/php/inc/class-app.php

@@ -54,7 +54,7 @@ class App {
     public function get_theme() {
 
         $theme = $this->options["view"]["theme"];
-        $theme_path = APP_PATH . "/client/themes/${theme}/icons";
+        $theme_path = APP_PATH . "/client/images/${theme}";
 
         $icons = array();
 
@@ -63,7 +63,7 @@ class App {
                 while (($name = readdir($dir)) !== false) {
                     $path_parts = pathinfo($name);
                     if (in_array($path_parts["extension"], App::$ICON_EXTS)) {
-                        $icons[$path_parts["filename"]] = "${theme}/icons/${name}";
+                        $icons[$path_parts["filename"]] = "${theme}/${name}";
                     }
                 }
                 closedir($dir);