fix #21: add on option to always display the menu on the left

templates/css/stylesheet.php

@@ -22,13 +22,13 @@
     }
 <?php endif; ?>
 
-<?php if ($_['opener-only'] === true): ?>
+<?php if ($_['opener-only']): ?>
     #nextcloud {
         display: none;
     }
 <?php endif; ?>
 
-<?php if ($_['display-logo'] === false): ?>
+<?php if ($_['display-logo']): ?>
     .side-menu-logo {
         display: none;
     }
@@ -114,43 +114,3 @@
         font-size: 16px;
     }
 <?php endif; ?>
-
-
-<?php if (true): ?>
-    #header, body {
-        width: calc(100% - 50px) !important;
-    }
-
-    body {
-        position: absolute;
-        left: 50px;
-    }
-
-    #side-menu {
-        display: block;
-    }
-
-    .side-menu-apps-list {
-        top: 49px;
-    }
-
-    #side-menu, .side-menu-header, .side-menu-apps-list {
-        width: 50px;
-    }
-
-    #side-menu .side-menu-app-text, #header .side-menu-opener, .side-menu-logo {
-        display: none;
-    }
-
-    #side-menu.open, #side-menu.open .side-menu-apps-list,  #side-menu.open .side-menu-header {
-        width: 100%;
-    }
-
-    #side-menu:hover, #side-menu:hover .side-menu-apps-list,  #side-menu:hover .side-menu-header{
-        width: 100%;
-    }
-
-    #side-menu.open .side-menu-app-text, #side-menu:hover .side-menu-app-text {
-        display: inline;
-    }
-<?php endif; ?>

templates/js/_alwaysDisplayed.js

@@ -0,0 +1,44 @@
+var alwaysDisplayed = function() {
+    var elements = document.querySelectorAll('*');
+    var fixedElements = []
+
+    for (var i in elements) {
+        var element = elements[i]
+
+        if (typeof element !== 'object') {
+            continue
+        }
+
+        var position = window.getComputedStyle(element, null).getPropertyValue('position');
+
+        if (position !== 'fixed') {
+            continue
+        }
+
+        var id = element.getAttribute('id')
+
+        if (id === 'header' || id === 'side-menu' || id === 'side-menu-loader') {
+            continue
+        }
+
+        if (element.classList.contains('oc-dialog')) {
+            continue
+        }
+
+        if (jQuery(element).parents('#side-menu').length) {
+            continue
+        }
+
+        fixedElements.push(element)
+    }
+
+    for (var i in fixedElements) {
+        var element = fixedElements[i]
+        var value = window.getComputedStyle(element, null).getPropertyValue('left')
+        var intValue = parseInt(value.replace('px', ''))
+
+        element.style.setProperty('transform', 'translateX(' + (intValue + 50) + 'px)')
+    }
+}
+
+alwaysDisplayed()

templates/js/script.php

@@ -1,8 +1,9 @@
 (function() {
-    var sideMenuContainer = $('<div id="side-menu-container">')
+    var sideMenuContainer = jQuery('<div id="side-menu-container">')
-    var sideMenuOpener = $('<button class="side-menu-opener"></button>')
+    var sideMenuOpener = jQuery('<button class="side-menu-opener"></button>')
-    var sideMenu = $('<div id="side-menu">')
+    var sideMenu = jQuery('<div id="side-menu">')
-    var body = $('body')
+    var body = jQuery('body')
+    var html = jQuery('html')
     var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
 
     <?php if ($_['big-menu']): ?>
@@ -15,24 +16,32 @@
 
     body.on('side-menu.apps', function(e, apps) {
         <?php if ($_['hide-when-no-apps']): ?>
-            sideMenu = $('#side-menu')
+            sideMenu = jQuery('#side-menu')
 
             if (apps.length === 0) {
                 sideMenu.removeClass('open')
+                sideMenu.addClass('hide')
                 sideMenuOpener.addClass('hide')
-                sideMenu.remove()
-                body.style.left = 0;
             } else {
+                sideMenu.removeClass('hide')
                 sideMenuOpener.removeClass('hide')
             }
+
+            <?php if ($_['always-displayed'] && !$_['big-menu']): ?>
+                if (apps.length === 0) {
+                    html.removeClass('side-menu-always-displayed');
+                } else {
+                    html.addClass('side-menu-always-displayed');
+                }
+            <?php endif; ?>
         <?php endif; ?>
     })
 
     body.on('side-menu.ready', function() {
-        sideMenu = $('#side-menu')
+        sideMenu = jQuery('#side-menu')
 
-        var headerMenuOpener = $('#header .side-menu-opener')
+        var headerMenuOpener = jQuery('#header .side-menu-opener')
-        var sideMenuOpener = $('#side-menu .side-menu-opener')
+        var sideMenuOpener = jQuery('#side-menu .side-menu-opener')
 
         sideMenuFocus = function() {
             var a = sideMenu.find('.side-menu-app.active a')
@@ -77,11 +86,17 @@
             sideMenu.find('.side-menu-app.active a').focus()
         })
 
-        sideMenuOpener.on('click', function() {
+        <?php if ($_['always-displayed'] && !$_['big-menu']): ?>
-            sideMenu.removeClass('open')
+            sideMenuOpener.on('click', function() {
-        })
+                sideMenu.toggleClass('open')
+            })
+        <?php else: ?>
+            sideMenuOpener.on('click', function() {
+                sideMenu.removeClass('open')
+            })
+        <?php endif; ?>
 
-        $(document).keydown(function(e) {
+        jQuery(document).keydown(function(e) {
             var key = e.key || e.keyCode
 
             if ((key === 'o' || key === 79) && e.ctrlKey === true) {
@@ -112,47 +127,7 @@
         <?php require_once __DIR__.'/_topMenuApps.js'; ?>
     <?php endif; ?>
 
-    window.setTimeout(function() {
+    <?php if ($_['always-displayed'] && !$_['big-menu']): ?>
-        var elements = document.querySelectorAll('*');
+        <?php require_once __DIR__.'/_alwaysDisplayed.js'; ?>
-        var fixedElements = []
+    <?php endif; ?>
-
-        for (var i in elements) {
-            var element = elements[i]
-
-            if (typeof element !== 'object') {
-                continue
-            }
-
-            var position = window.getComputedStyle(element, null).getPropertyValue('position');
-
-            if (position !== 'fixed') {
-                continue
-            }
-
-            if (element.getAttribute('id') === 'header') {
-                continue
-            }
-
-            if (element.getAttribute('id') === 'side-menu') {
-                continue
-            }
-
-            fixedElements.push(element)
-        }
-
-        window.setTimeout(function() {
-            for (var i in fixedElements) {
-                var element = fixedElements[i]
-
-                var value = window.getComputedStyle(element, null).getPropertyValue('left')
-
-                if (value === 'initial') {
-                    continue
-                }
-
-                element.style.setProperty('left', 'initial')
-                element.style.setProperty('transform', 'translateX(' + value + ')')
-            }
-        }, 100);
-    }, 500);
 })();

templates/settings/admin-form.php

@@ -245,9 +245,7 @@ $choicesSizes = [
             </label>
         </div>
 
-        <p>
+        <p><em><?php p($l->t('This is the automatic behavior when the menu is always displayed.')); ?></em></p>
-            <em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
-        </p>
 
         <div>
             <select id="side-menu-opener-hover" name="opener-hover" class="side-menu-setting">
@@ -259,6 +257,27 @@ $choicesSizes = [
             </select>
         </div>
 
+        <div>
+            <label for="side-menu-big-menu">
+                <?php p($l->t('Always displayed')); ?>
+
+                <small><span class="warning"><?php p($l->t('Experimental')); ?></span></small>
+            </label>
+        </div>
+
+        <p><em><?php p($l->t('This feature is not compatible with the <code>big menu</code> display.')); ?></em></p>
+        <p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
+
+        <div>
+            <select id="side-menu-always-displayed" name="always-displayed" class="side-menu-setting">
+                <?php foreach ($choicesYesNo as $label => $value): ?>
+                    <option value="<?php echo $value ?>" <?php if ($value === $_['always-displayed']): ?>selected<?php endif; ?>>
+                        <?php echo $l->t($label);  ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
+        </div>
+
         <div>
             <label for="side-menu-big-menu">
                 <?php p($l->t('Display the big menu')); ?>
@@ -284,6 +303,7 @@ $choicesSizes = [
         </div>
 
         <p><em><?php p($l->t('This feature is not compatible with the <code>big menu</code> display.')); ?></em></p>
+        <p><em><?php p($l->t('The logo will be hidden when the menu is always displayed.')); ?></em></p>
 
         <div>
             <select id="side-menu-display-logo" name="display-logo" class="side-menu-setting">