update screenshots

appinfo/info.xml

@@ -20,7 +20,7 @@ If you like this application and want to support the development:
 * ☕ [Buy me a coffee](https://www.buymeacoffee.com/deblan)
 * 😃 [Leave a comment](https://apps.nextcloud.com/apps/side_menu#comments)
 ]]></description>
-    <version>1.17.0</version>
+    <version>1.18.0</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>

css/sideMenu.css

@@ -37,6 +37,34 @@
     margin-left: 5px;
 }
 
+.side-menu-settings {
+    margin-right: 9px;
+    margin-top: 2px;
+    float: right;
+    line-height: 34px;
+    height: 28px;
+    display: none;
+}
+
+.side-menu-settings a {
+    color: var(--side-menu-text-color, #fff);
+    display: block;
+    padding: 4px 7px;
+}
+
+.side-menu-settings:hover a, .side-menu-settings a:active, .side-menu-settings a:focus {
+    background: var(--side-menu-current-app-background-color, #444);
+}
+
+.side-menu-settings img {
+    vertical-align: bottom;
+    margin-left: 3px;
+}
+
+#side-menu.open .side-menu-settings {
+    display: block;
+}
+
 .side-menu-opener {
     background: var(--side-menu-opener, url('../img/side-menu-opener.svg'));
     height: 40px;

lib/Controller/JsController.php

@@ -28,6 +28,7 @@ use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IRequest;
 use OCP\IUserSession;
+use OCP\L10N\IFactory;
 
 class JsController extends Controller
 {
@@ -46,14 +47,25 @@ class JsController extends Controller
      */
     protected $themingDefaults;
 
-    public function __construct(string $appName, IRequest $request, ConfigProxy $config, ThemingDefaults $themingDefaults)
-    {
+    /**
+     * @var IFactory
+     */
+    protected $l10nFactory;
+
+    public function __construct(
+        string $appName,
+        IRequest $request,
+        ConfigProxy $config,
+        ThemingDefaults $themingDefaults,
+        IFactory $l10nFactory
+    ) {
         parent::__construct($appName, $request);
 
         $this->themingDefaults = $themingDefaults;
 
         $this->user = OC::$server[IUserSession::class]->getUser();
         $this->config = $config;
+        $this->l10nFactory = $l10nFactory;
     }
 
     /**
@@ -86,6 +98,7 @@ class JsController extends Controller
         $useAvatar = $this->config->getAppValueBool('use-avatar', '0');
         $isForced = $this->config->getAppValueBool('force', '0');
         $avatar = null;
+        $settings = null;
 
         if ($this->user) {
             $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
@@ -104,13 +117,27 @@ class JsController extends Controller
             $isAvatarSet = OC::$server->getAvatarManager()->getAvatar($this->user->getUid())->exists();
 
             if ($useAvatar && $isAvatarSet) {
-                $avatar = OC::$server->getURLGenerator()->linkToRoute(
-                    'core.avatar.getAvatar', [
-                        'userId' => $this->user->getUid(),
-                        'size' => 128,
-                        'v' => $this->config->getUserValueInt($this->user, 'avatar', 'version', 0),
-                    ]
-                );
+                $avatar = OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', [
+                    'userId' => $this->user->getUid(),
+                    'size' => 128,
+                    'v' => $this->config->getUserValueInt($this->user, 'avatar', 'version', 0),
+                ]);
+            }
+
+            if ($this->config->getAppValueBool('show-settings', '0')) {
+                $settingsNav = OC::$server->getNavigationManager()->getAll('settings');
+
+                if (isset($settingsNav['settings'])) {
+                    $settings = [
+                        'href' => $settingsNav['settings']['href'],
+                        'name' => $settingsNav['settings']['name'],
+                        'avatar' => OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', [
+                            'userId' => $this->user->getUid(),
+                            'size' => 32,
+                            'v' => $this->config->getUserValueInt($this->user, 'avatar', 'version', 0),
+                        ]),
+                    ];
+                }
             }
         }
 
@@ -126,6 +153,7 @@ class JsController extends Controller
             'avatar' => $avatar,
             'top-menu-apps' => $topMenuApps,
             'target-blank-apps' => $targetBlankApps,
+            'settings' => $settings,
             'logo' => $this->themingDefaults->getLogo(),
         ];
     }

lib/Controller/NavController.php

@@ -73,8 +73,8 @@ class NavController extends Controller
         CategoryFetcher $categoryFetcher,
         URLGenerator $router,
         IL10N $trans,
-        IFactory $l10nFactory)
-    {
+        IFactory $l10nFactory
+    ) {
         parent::__construct($appName, $request);
 
         $this->config = $config;

lib/Settings/Admin.php

@@ -82,6 +82,7 @@ class Admin implements ISettings
             'opener-position' => $this->config->getAppValue('opener-position', 'before'),
             'opener-hover' => $this->config->getAppValue('opener-hover', '0'),
             'opener-only' => $this->config->getAppValue('opener-only', '0'),
+            'show-settings' => $this->config->getAppValue('show-settings', '0'),
             'hide-when-no-apps' => $this->config->getAppValue('hide-when-no-apps', '0'),
             'size-icon' => $this->config->getAppValue('size-icon', 'normal'),
             'size-text' => $this->config->getAppValue('size-text', 'normal'),

src/CloserButton.vue

@@ -0,0 +1,9 @@
+<template>
+    <button class="side-menu-opener side-menu-closer"></button>
+</template>
+
+<script>
+export default {
+    name: 'CloserButton',
+}
+</script>

src/Loader.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="side-menu-loader">
+        <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fill-rule="evenodd">
+                <g transform="translate(1 1)" stroke-width="2">
+                    <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                    <path d="M36 18c0-9.94-8.06-18-18-18">
+                        <animateTransform
+                            attributeName="transform"
+                            type="rotate"
+                            from="0 18 18"
+                            to="360 18 18"
+                            dur="1s"
+                            repeatCount="indefinite"/>
+                    </path>
+                </g>
+            </g>
+        </svg>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Loader',
+}
+</script>

src/Logo.vue

@@ -0,0 +1,21 @@
+<template>
+    <div v-bind:class="classes">
+        <img v-bind:src="image">
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Logo',
+    props: {
+        image: {
+            type: String,
+            required: true
+        },
+        classes: {
+            type: Object,
+            required: true
+        },
+    },
+}
+</script>

src/OpenerButton.vue

@@ -0,0 +1,9 @@
+<template>
+    <button class="side-menu-opener"></button>
+</template>
+
+<script>
+export default {
+    name: 'OpenerButton',
+}
+</script>

src/SettingsButton.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="side-menu-settings">
+        <a v-bind:href="href">
+            {{ label }}
+
+            <span class="avatardiv avatardiv-shown">
+                <img v-bind:src="avatar" v-bind:alt="name" v-bind:title="name">
+            </span>
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SettingsButton',
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        href: {
+            type: String,
+            required: true
+        },
+        avatar: {
+            type: String,
+            required: true
+        },
+    },
+}
+</script>

src/SideMenu.vue

@@ -17,23 +17,27 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
     <div id="side-menu">
         <div class="side-menu-header">
-            <button class="side-menu-opener"></button>
+            <SettingsButton
+                v-if="settings"
+                v-bind:href="settings.href"
+                v-bind:label="settings.name"
+                v-bind:avatar="settings.avatar" />
 
-            <div v-if="!avatar && logo" v-bind:class="{'side-menu-logo': true, 'avatardiv': false}">
-                <img v-bind:src="logo">
-            </div>
-            <div v-if="avatar" v-bind:class="{'side-menu-logo': true, 'avatardiv': true}">
-                <img v-bind:src="avatar">
-            </div>
+            <OpenerButton />
+
+            <Logo v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}" v-bind:image="logo" />
+            <Logo v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}" v-bind:image="avatar" />
         </div>
 
         <ul class="side-menu-apps-list">
-            <li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'active': app.active}">
-                <a v-bind:href="app.href" :target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined" v-bind:title="app.name">
-                     <span class="side-menu-app-icon" v-html="app.icon"></span>
-                     <span class="side-menu-app-text" v-html="app.name"></span>
-                </a>
-            </li>
+            <SideMenuApp
+                v-for="app in apps"
+                v-bind:classes="{'side-menu-app': true, 'active': app.active}"
+                v-bind:icon="app.icon"
+                v-bind:label="app.name"
+                v-bind:href="app.href"
+                v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
+            />
         </ul>
     </div>
 </template>
@@ -41,9 +45,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import trim from 'trim'
 import axios from 'axios'
+import OpenerButton from './OpenerButton'
+import SettingsButton from './SettingsButton'
+import SideMenuApp from './SideMenuApp'
+import Logo from './Logo'
 
 export default {
     name: 'SideMenu',
+    components: {
+        SettingsButton,
+        OpenerButton,
+        SideMenuApp,
+        Logo,
+    },
     data() {
         return {
             apps: [],
@@ -51,6 +65,7 @@ export default {
             avatar: null,
             forceLightIcon: false,
             targetBlankApps: [],
+            settings: null,
         }
     },
     methods: {
@@ -120,6 +135,7 @@ export default {
                     that.forceLightIcon = config['force-light-icon']
                     that.avatar = config['avatar']
                     that.logo = config['logo']
+                    that.settings = config['settings']
                 });
         },
     },

src/SideMenuApp.vue

@@ -0,0 +1,36 @@
+<template>
+    <li v-bind:class="classes">
+        <a v-bind:href="href" :target="target" v-bind:title="label">
+            <span class="side-menu-app-icon" v-html="icon"></span>
+            <span class="side-menu-app-text" v-html="label"></span>
+        </a>
+    </li>
+</template>
+
+<script>
+export default {
+    name: 'SideMenuApp',
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        icon: {
+            type: String,
+            required: true
+        },
+        href: {
+            type: String,
+            required: true
+        },
+        classes: {
+            type: Object,
+            required: true
+        },
+        target: {
+            type: String,
+            required: false
+        },
+    },
+}
+</script>

src/SideMenuBig.vue

@@ -17,41 +17,34 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
     <div id="side-menu" class="side-menu-big">
         <div class="side-menu-header">
-            <button class="side-menu-opener side-menu-closer"></button>
-            <button class="side-menu-opener"></button>
+            <CloserButton />
+
+            <SettingsButton
+                v-if="settings"
+                v-bind:href="settings.href"
+                v-bind:label="settings.name"
+                v-bind:avatar="settings.avatar"
+            />
+
+            <OpenerButton />
         </div>
 
         <div class="side-menu-categories-wrapper">
             <div class="side-menu-categories">
-                <div v-if="!items.length" class="side-menu-loader">
-                    <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
-                        <g fill="none" fill-rule="evenodd">
-                            <g transform="translate(1 1)" stroke-width="2">
-                                <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
-                                <path d="M36 18c0-9.94-8.06-18-18-18">
-                                    <animateTransform
-                                        attributeName="transform"
-                                        type="rotate"
-                                        from="0 18 18"
-                                        to="360 18 18"
-                                        dur="1s"
-                                        repeatCount="indefinite"/>
-                                </path>
-                            </g>
-                        </g>
-                    </svg>
-                </div>
+                <Loader v-if="!items.length" />
 
                 <div class="side-menu-category" v-for="category in items">
                     <h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2>
 
                     <ul class="side-menu-apps-list">
-                        <li v-bind:class="{'side-menu-app': true, 'active': activeApp === appId}" v-for="(app, appId) in category.apps">
-                            <a v-bind:href="app.href" :target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined" v-bind:title="app.name">
-                                 <img class="side-menu-app-icon" v-bind:src="app.icon"></span>
-                                 <span class="side-menu-app-text" v-html="app.name"></span>
-                            </a>
-                        </li>
+                        <SideMenuBigApp
+                            v-for="(app, appId) in category.apps"
+                            v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
+                            v-bind:icon="app.icon"
+                            v-bind:label="app.name"
+                            v-bind:href="app.href"
+                            v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
+                        />
                     </ul>
                 </div>
             </div>
@@ -62,15 +55,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import trim from 'trim'
 import axios from 'axios'
+import OpenerButton from './OpenerButton'
+import CloserButton from './CloserButton'
+import SettingsButton from './SettingsButton'
+import Loader from './Loader'
+import SideMenuBigApp from './SideMenuBigApp'
 
 export default {
     name: 'SideMenuBig',
+    components: {
+        SettingsButton,
+        OpenerButton,
+        CloserButton,
+        Loader,
+        SideMenuBigApp,
+    },
     data() {
         return {
             items: [],
             activeApp: null,
             targetBlank: false,
             targetBlankApps: [],
+            settings: null,
         }
     },
     methods: {
@@ -109,6 +115,7 @@ export default {
                     const config = response.data
 
                     that.targetBlankApps = config['target-blank-apps']
+                    that.settings = config['settings']
                 });
         },
     },

src/SideMenuBigApp.vue

@@ -0,0 +1,36 @@
+<template>
+    <li v-bind:class="classes">
+        <a v-bind:href="href" :target="target" v-bind:title="label">
+            <img class="side-menu-app-icon" v-bind:src="icon"></span>
+            <span class="side-menu-app-text" v-html="label"></span>
+        </a>
+    </li>
+</template>
+
+<script>
+export default {
+    name: 'SideMenuBigApp',
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        icon: {
+            type: String,
+            required: true
+        },
+        href: {
+            type: String,
+            required: true
+        },
+        classes: {
+            type: Object,
+            required: true
+        },
+        target: {
+            type: String,
+            required: false
+        },
+    },
+}
+</script>

src/l10n/fixtures/de.yaml

@@ -61,3 +61,4 @@
 "Force this configuration to users": "Erzwingen Sie diese Konfiguration für Benutzer"
 "Export the configuration": "Exportieren Sie die Konfiguration"
 "Purge the cache": "Leeren Sie den Cache"
+"Show the link to settings": "Zeigen Sie den Link zu den Einstellungen an"

src/l10n/fixtures/fr.yaml

@@ -61,3 +61,4 @@
 "Force this configuration to users": "Forcer cette configuration aux utilisateurs"
 "Export the configuration": "Exporter la configuration"
 "Purge the cache": "Purger le cache"
+"Show the link to settings": "Afficher le lien vers les paramètres"

templates/settings/admin-form.php

@@ -361,6 +361,22 @@ $choicesSizes = [
             </select>
         </div>
 
+        <div>
+            <label for="side-menu-show-settings">
+                <?php p($l->t('Show the link to settings')); ?>
+            </label>
+        </div>
+
+        <div>
+            <select id="side-menu-show-settings" name="show-settings" class="side-menu-setting">
+                <?php foreach ($choicesYesNo as $label => $value): ?>
+                    <option value="<?php echo $value ?>" <?php if ($value === $_['show-settings']): ?>selected<?php endif; ?>>
+                        <?php echo $l->t($label);  ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
+        </div>
+
         <div>
             <label>
                 <?php p($l->t('Icons and texts')); ?>

webpack.js

@@ -3,51 +3,51 @@ const { VueLoaderPlugin } = require('vue-loader')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
 
 module.exports = {
-	entry: {
-		'admin': path.join(__dirname, 'src', 'admin.js'),
-		'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
-	},
-	output: {
-		path: path.resolve(__dirname, './js'),
-		publicPath: '/js',
-		filename: '[name].js?v=[hash]',
-		chunkFilename: 'chunks/[name]-[hash].js',
-	},
-	module: {
-		rules: [
-			{
-				test: /\.css$/,
-				use: ['vue-style-loader', 'css-loader'],
-			},
-			{
-				test: /\.scss$/,
-				use: ['vue-style-loader', 'css-loader', 'sass-loader'],
-			},
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader',
-			},
-			{
-				test: /\.js$/,
-				loader: 'babel-loader',
-				exclude: /node_modules/,
-			},
-			{
-				test: /\.(png|jpg|gif|svg)$/,
-				loader: 'url-loader',
-				options: {
-					name: '[name].[ext]?[hash]',
-					limit: 8192,
-				},
-			},
-		],
-	},
-	plugins: [
-		new VueLoaderPlugin(),
-		new StyleLintPlugin(),
-	],
-	resolve: {
-		extensions: ['*', '.js', '.vue'],
-		symlinks: false,
-	},
+    entry: {
+        'admin': path.join(__dirname, 'src', 'admin.js'),
+        'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
+    },
+    output: {
+        path: path.resolve(__dirname, './js'),
+        publicPath: '/js',
+        filename: '[name].js?v=[hash]',
+        chunkFilename: 'chunks/[name]-[hash].js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: ['vue-style-loader', 'css-loader'],
+            },
+            {
+                test: /\.scss$/,
+                use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.(png|jpg|gif|svg)$/,
+                loader: 'url-loader',
+                options: {
+                    name: '[name].[ext]?[hash]',
+                    limit: 8192,
+                },
+            },
+        ],
+    },
+    plugins: [
+        new VueLoaderPlugin(),
+        new StyleLintPlugin(),
+    ],
+    resolve: {
+        extensions: ['*', '.js', '.vue'],
+        symlinks: false,
+    },
 }