Compare commits
27 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1715ae5d52 | |||
| 847fa23345 | |||
| 0495046d02 | |||
| 0474ef55e8 | |||
| 7c9653943a | |||
| 457bfc282b | |||
| 84c78538f0 | |||
| f0d17a61bd | |||
| fdbeaf6677 | |||
| 9d18b33715 | |||
| bfb2b5d819 | |||
| a6e789c859 | |||
| 0cceb03213 | |||
| 91db830ea7 | |||
| af69d64e87 | |||
| f4ec00c9f7 | |||
| 8b20b11ce2 | |||
| e597ed95a3 | |||
| bf3493bb03 | |||
| fe665d58a9 | |||
| 407073dd98 | |||
| f85b5de28d | |||
| ee5be2cf21 | |||
| 91195d0160 | |||
| 29e0526844 | |||
| 8d2818150c | |||
| 299abe5e96 |
@@ -23,7 +23,9 @@ $ unzip -d side_menu /path/to/side_menu_vX.Y.Z.zip
|
|||||||
Upgrade
|
Upgrade
|
||||||
-------
|
-------
|
||||||
|
|
||||||
Go to https://gitnet.fr/deblan/side_menu/releases and download the last release (side_menu_vX.Y.Z.zip).
|
Side menu can be upgraded from the app store.
|
||||||
|
|
||||||
|
If you want to install it from source: go to https://gitnet.fr/deblan/side_menu/releases and download the last release (side_menu_vX.Y.Z.zip).
|
||||||
|
|
||||||
Copy the archive to your Nextcloud server.
|
Copy the archive to your Nextcloud server.
|
||||||
|
|
||||||
@@ -37,4 +39,14 @@ $ unzip -d side_menu /path/to/side_menu_vX.Y.Z.zip
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
||||||
|
How to contribute?
|
||||||
|
------------------
|
||||||
|
|
||||||
|
Fork the repository, go to `apps/`, clone your repository and run `npm install` inside.
|
||||||
|
|
||||||
|
Build javascripts using `webpack --config ./webpack.js` (add `-w` to build them in real time).
|
||||||
|
|
||||||
|
Then commit and create a pull request.
|
||||||
|
|||||||
+22
-11
@@ -24,6 +24,11 @@ use OCP\Util;
|
|||||||
|
|
||||||
$config = \OC::$server->getConfig();
|
$config = \OC::$server->getConfig();
|
||||||
$cspnm = \OC::$server->getContentSecurityPolicyNonceManager();
|
$cspnm = \OC::$server->getContentSecurityPolicyNonceManager();
|
||||||
|
|
||||||
|
|
||||||
|
Util::addScript('side_menu', 'sideMenu');
|
||||||
|
Util::addStyle('side_menu', 'sideMenu');
|
||||||
|
|
||||||
$stylesheet = \OC::$server->getURLGenerator()->linkToRoute(
|
$stylesheet = \OC::$server->getURLGenerator()->linkToRoute(
|
||||||
'side_menu.Css.stylesheet',
|
'side_menu.Css.stylesheet',
|
||||||
[
|
[
|
||||||
@@ -31,21 +36,27 @@ $stylesheet = \OC::$server->getURLGenerator()->linkToRoute(
|
|||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$script = \OC::$server->getURLGenerator()->linkToRoute(
|
||||||
|
'side_menu.Js.script',
|
||||||
|
[
|
||||||
|
'v' => $config->getAppValue('side_menu', 'cache', '0'),
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
Util::addHeader(
|
Util::addHeader(
|
||||||
'link',
|
'link',
|
||||||
[
|
[
|
||||||
'href' => $stylesheet,
|
'href' => $stylesheet,
|
||||||
'rel' => 'stylesheet'
|
'rel' => 'stylesheet'
|
||||||
], ''
|
],
|
||||||
|
''
|
||||||
);
|
);
|
||||||
|
|
||||||
Util::addScript('side_menu', 'main');
|
Util::addHeader(
|
||||||
Util::addScript('side_menu', 'sideMenu');
|
'script',
|
||||||
Util::addStyle('side_menu', 'sideMenu');
|
[
|
||||||
// whitelist the URL to allow loading JS from this external domain
|
'src' => $script,
|
||||||
// $CSPManager = \OC::$server->getContentSecurityPolicyManager();
|
'nonce' => $cspnm->getNonce(),
|
||||||
// $policy = new ContentSecurityPolicy();
|
],
|
||||||
// $policy->addAllowedScriptDomain($url);
|
''
|
||||||
// $policy->addAllowedImageDomain($url);
|
);
|
||||||
// $policy->addAllowedConnectDomain($url);
|
|
||||||
// $CSPManager->addDefaultPolicy($policy);
|
|
||||||
|
|||||||
+2
-2
@@ -6,7 +6,7 @@
|
|||||||
<description>Move the top menu to the left side.</description>
|
<description>Move the top menu to the left side.</description>
|
||||||
<licence>agpl</licence>
|
<licence>agpl</licence>
|
||||||
<author mail="dev+sidemenu@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
|
<author mail="dev+sidemenu@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
|
||||||
<version>1.1.3</version>
|
<version>1.3.2</version>
|
||||||
<namespace>SideMenu</namespace>
|
<namespace>SideMenu</namespace>
|
||||||
<category>customization</category>
|
<category>customization</category>
|
||||||
<website>https://gitnet.fr/deblan/side_menu</website>
|
<website>https://gitnet.fr/deblan/side_menu</website>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
<repository type="git">https://gitnet.fr/deblan/side_menu</repository>
|
<repository type="git">https://gitnet.fr/deblan/side_menu</repository>
|
||||||
<screenshot>https://upload.deblan.org/u/2020-03/5e7fab2b.jpg</screenshot>
|
<screenshot>https://upload.deblan.org/u/2020-03/5e7fab2b.jpg</screenshot>
|
||||||
<screenshot>https://upload.deblan.org/u/2020-03/5e81b219.jpg</screenshot>
|
<screenshot>https://upload.deblan.org/u/2020-03/5e81b219.jpg</screenshot>
|
||||||
<screenshot>https://upload.deblan.org/u/2020-04/5e8ee1f7.jpg</screenshot>
|
<screenshot>https://upload.deblan.org/u/2020-04/5e9d9058.png</screenshot>
|
||||||
<dependencies>
|
<dependencies>
|
||||||
<nextcloud min-version="18" max-version="18"/>
|
<nextcloud min-version="18" max-version="18"/>
|
||||||
</dependencies>
|
</dependencies>
|
||||||
|
|||||||
@@ -20,5 +20,6 @@
|
|||||||
return [
|
return [
|
||||||
'routes' => [
|
'routes' => [
|
||||||
['name' => 'Css#stylesheet', 'url' => '/css/stylesheet', 'verb' => 'GET'],
|
['name' => 'Css#stylesheet', 'url' => '/css/stylesheet', 'verb' => 'GET'],
|
||||||
|
['name' => 'Js#script', 'url' => '/js/script', 'verb' => 'GET'],
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|||||||
+10
-2
@@ -33,7 +33,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#side-menu.is-active {
|
#side-menu.open {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -45,6 +45,10 @@
|
|||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#side-menu.hide-opener .side-menu-opener {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.side-menu-apps-list {
|
.side-menu-apps-list {
|
||||||
height: calc(100vh - 150px);
|
height: calc(100vh - 150px);
|
||||||
z-index: 2200;
|
z-index: 2200;
|
||||||
@@ -71,7 +75,7 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-menu-app a:hover, .side-menu-app.is-active a {
|
.side-menu-app a:hover, .side-menu-app.active a {
|
||||||
background: var(--side-menu-current-app-background-color, #444);
|
background: var(--side-menu-current-app-background-color, #444);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,3 +98,7 @@
|
|||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#side-menu.hide-opener .side-menu-logo {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
namespace OCA\SideMenu\Controller;
|
namespace OCA\SideMenu\Controller;
|
||||||
|
|
||||||
use OCP\AppFramework\Controller;
|
use OCP\AppFramework\Controller;
|
||||||
use OCP\AppFramework\Http\DataDownloadResponse;
|
use OCP\AppFramework\Http\TemplateResponse;
|
||||||
use OCP\AppFramework\Http\Response;
|
use OCP\AppFramework\Http\Response;
|
||||||
use OCP\IConfig;
|
use OCP\IConfig;
|
||||||
use OCP\IRequest;
|
use OCP\IRequest;
|
||||||
@@ -38,6 +38,7 @@ class CssController extends Controller
|
|||||||
public function __construct($appName, IRequest $request, IConfig $config)
|
public function __construct($appName, IRequest $request, IConfig $config)
|
||||||
{
|
{
|
||||||
parent::__construct($appName, $request);
|
parent::__construct($appName, $request);
|
||||||
|
|
||||||
$this->config = $config;
|
$this->config = $config;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -51,24 +52,18 @@ class CssController extends Controller
|
|||||||
public function stylesheet()
|
public function stylesheet()
|
||||||
{
|
{
|
||||||
$parameters = [
|
$parameters = [
|
||||||
'--side-menu-background-color' => $this->config->getAppValue('side_menu', 'background-color', '#333333'),
|
'vars' => [
|
||||||
'--side-menu-current-app-background-color' => $this->config->getAppValue('side_menu', 'current-app-background-color', '#444444'),
|
'background-color' => $this->config->getAppValue('side_menu', 'background-color', '#333333'),
|
||||||
'--side-menu-text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'),
|
'current-app-background-color' => $this->config->getAppValue('side_menu', 'current-app-background-color', '#444444'),
|
||||||
'--side-menu-opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
'text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'),
|
||||||
|
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
||||||
|
],
|
||||||
|
'display-logo' => (bool) $this->config->getAppValue('side_menu', 'display-logo', 1),
|
||||||
];
|
];
|
||||||
|
|
||||||
$css = '';
|
$response = new TemplateResponse('side_menu', 'css/stylesheet', $parameters, 'blank');
|
||||||
|
$response->addHeader('Content-Type', 'text/css');
|
||||||
|
|
||||||
foreach ($parameters as $key => $value) {
|
return $response;
|
||||||
if ($key === '--side-menu-opener') {
|
|
||||||
$value = sprintf("url('../img/%s.svg')", $value);
|
|
||||||
}
|
|
||||||
|
|
||||||
$css.= sprintf('%s: %s;', $key, $value);
|
|
||||||
}
|
|
||||||
|
|
||||||
$css = sprintf(':root { %s }', $css);
|
|
||||||
|
|
||||||
return new DataDownloadResponse($css, 'stylesheet', 'text/css');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,64 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* @license GNU AGPL version 3 or any later version
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace OCA\SideMenu\Controller;
|
||||||
|
|
||||||
|
use OCP\AppFramework\Controller;
|
||||||
|
use OCP\AppFramework\Http\TemplateResponse;
|
||||||
|
use OCP\AppFramework\Http\Response;
|
||||||
|
use OCP\IConfig;
|
||||||
|
use OCP\IRequest;
|
||||||
|
|
||||||
|
class JsController extends Controller
|
||||||
|
{
|
||||||
|
|
||||||
|
/** @var \OCP\IConfig */
|
||||||
|
protected $config;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param string $appName
|
||||||
|
* @param IRequest $request
|
||||||
|
* @param IConfig $config
|
||||||
|
*/
|
||||||
|
public function __construct($appName, IRequest $request, IConfig $config)
|
||||||
|
{
|
||||||
|
parent::__construct($appName, $request);
|
||||||
|
|
||||||
|
$this->config = $config;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @NoAdminRequired
|
||||||
|
* @NoCSRFRequired
|
||||||
|
* @PublicPage
|
||||||
|
*
|
||||||
|
* @return Response
|
||||||
|
*/
|
||||||
|
public function script()
|
||||||
|
{
|
||||||
|
$parameters = [
|
||||||
|
'opener-position' => $this->config->getAppValue('side_menu', 'opener-position', 'before'),
|
||||||
|
'opener-hover' => (bool) $this->config->getAppValue('side_menu', 'opener-hover', '0'),
|
||||||
|
];
|
||||||
|
|
||||||
|
$response = new TemplateResponse('side_menu', 'js/script', $parameters, 'blank');
|
||||||
|
$response->addHeader('Content-Type', 'text/javascript');
|
||||||
|
|
||||||
|
return $response;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -35,7 +35,8 @@ class Admin implements ISettings
|
|||||||
/** @var IConfig */
|
/** @var IConfig */
|
||||||
private $config;
|
private $config;
|
||||||
|
|
||||||
public function __construct(IL10N $l, ILogger $logger, IConfig $config) {
|
public function __construct(IL10N $l, ILogger $logger, IConfig $config)
|
||||||
|
{
|
||||||
$this->l = $l;
|
$this->l = $l;
|
||||||
$this->logger = $logger;
|
$this->logger = $logger;
|
||||||
$this->config = $config;
|
$this->config = $config;
|
||||||
@@ -52,6 +53,9 @@ class Admin implements ISettings
|
|||||||
'text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'),
|
'text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'),
|
||||||
'cache' => $this->config->getAppValue('side_menu', 'cache', '0'),
|
'cache' => $this->config->getAppValue('side_menu', 'cache', '0'),
|
||||||
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
||||||
|
'display-logo' => $this->config->getAppValue('side_menu', 'display-logo', '1'),
|
||||||
|
'opener-position' => $this->config->getAppValue('side_menu', 'opener-position', 'before'),
|
||||||
|
'opener-hover' => $this->config->getAppValue('side_menu', 'opener-hover', '0'),
|
||||||
];
|
];
|
||||||
|
|
||||||
return new TemplateResponse('side_menu', 'settings/admin-form', $parameters, '');
|
return new TemplateResponse('side_menu', 'settings/admin-form', $parameters, '');
|
||||||
|
|||||||
@@ -79,6 +79,6 @@ class Section implements IIconSection
|
|||||||
*/
|
*/
|
||||||
public function getIcon()
|
public function getIcon()
|
||||||
{
|
{
|
||||||
return $this->url->imagePath('theming', 'app-dark.svg');
|
return $this->url->imagePath('theming', 'app-dark.svg');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-5
@@ -18,19 +18,19 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import SideMenu from './SideMenu.vue'
|
import SideMenu from './SideMenu.vue'
|
||||||
|
|
||||||
Vue.prototype.t = t
|
// Vue.prototype.t = t
|
||||||
Vue.prototype.OC = OC
|
// Vue.prototype.OC = OC
|
||||||
Vue.prototype.OC = OCP
|
// Vue.prototype.OC = OCP
|
||||||
|
|
||||||
const View = Vue.extend(SideMenu)
|
const View = Vue.extend(SideMenu)
|
||||||
const sideMenu = new View({
|
const sideMenu = new View({})
|
||||||
})
|
|
||||||
|
|
||||||
const mountSideMenuComponent = () => {
|
const mountSideMenuComponent = () => {
|
||||||
const sideMenuContainer = document.querySelector('#side-menu')
|
const sideMenuContainer = document.querySelector('#side-menu')
|
||||||
|
|
||||||
if (sideMenuContainer) {
|
if (sideMenuContainer) {
|
||||||
sideMenu.$mount('#side-menu')
|
sideMenu.$mount('#side-menu')
|
||||||
|
$('body').trigger('side-menu.ready')
|
||||||
} else {
|
} else {
|
||||||
window.setTimeout(mountSideMenuComponent, 50)
|
window.setTimeout(mountSideMenuComponent, 50)
|
||||||
}
|
}
|
||||||
|
|||||||
+13
-8
@@ -25,7 +25,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
<ul class="side-menu-apps-list">
|
||||||
<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'is-active': app.active}">
|
<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'active': app.active}">
|
||||||
<a v-bind:href="app.href">
|
<a v-bind:href="app.href">
|
||||||
<span class="side-menu-app-icon" v-html="app.icon"></span>
|
<span class="side-menu-app-icon" v-html="app.icon"></span>
|
||||||
|
|
||||||
@@ -37,9 +37,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from '@nextcloud/axios'
|
|
||||||
import { generateUrl } from '@nextcloud/router'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenu',
|
name: 'SideMenu',
|
||||||
data() {
|
data() {
|
||||||
@@ -67,10 +64,18 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
retrieveLogo() {
|
retrieveLogo() {
|
||||||
this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
|
const ncLogo = document.querySelector('#nextcloud .logo')
|
||||||
.getPropertyValue('background-image')
|
|
||||||
.replace('url("', '')
|
if (ncLogo) {
|
||||||
.replace('")', '')
|
const url = window.getComputedStyle(ncLogo, null)
|
||||||
|
.getPropertyValue('background-image')
|
||||||
|
.replace('url("', '')
|
||||||
|
.replace('")', '')
|
||||||
|
|
||||||
|
if (url && url !== 'none') {
|
||||||
|
this.logo = url
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|||||||
+8
-5
@@ -20,6 +20,9 @@ const elements = [
|
|||||||
'side-menu-current-app-background-color',
|
'side-menu-current-app-background-color',
|
||||||
'side-menu-text-color',
|
'side-menu-text-color',
|
||||||
'side-menu-opener',
|
'side-menu-opener',
|
||||||
|
'side-menu-opener-position',
|
||||||
|
'side-menu-opener-hover',
|
||||||
|
'side-menu-display-logo',
|
||||||
'side-menu-cache',
|
'side-menu-cache',
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -42,7 +45,7 @@ const saveSettings = (key) => {
|
|||||||
t('side_menu', (key + 1) + '/' + size)
|
t('side_menu', (key + 1) + '/' + size)
|
||||||
)
|
)
|
||||||
|
|
||||||
if (key < size -1) {
|
if (key < size - 1) {
|
||||||
saveSettings(++key)
|
saveSettings(++key)
|
||||||
} else {
|
} else {
|
||||||
OC.msg.finishedSuccess(selector, t('side_menu', 'Saved'))
|
OC.msg.finishedSuccess(selector, t('side_menu', 'Saved'))
|
||||||
@@ -55,10 +58,10 @@ const saveSettings = (key) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(() => {
|
$(document).ready(() => {
|
||||||
$('#side-menu-save').on('click', (event) => {
|
$('#side-menu-save').on('click', (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
OC.msg.startSaving(selector)
|
OC.msg.startSaving(selector)
|
||||||
|
|
||||||
saveSettings(0)
|
saveSettings(0)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
-27
@@ -1,27 +0,0 @@
|
|||||||
/**
|
|
||||||
* @license GNU AGPL version 3 or any later version
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const sideMenuContainer = $('<div id="side-menu">')
|
|
||||||
const sideMenuOpener = $('<button class="side-menu-opener"></button>')
|
|
||||||
|
|
||||||
$('body').append(sideMenuContainer);
|
|
||||||
|
|
||||||
sideMenuOpener.insertBefore('#nextcloud');
|
|
||||||
|
|
||||||
$('body').on('click', '.side-menu-opener', () => {
|
|
||||||
$('#side-menu').toggleClass('is-active');
|
|
||||||
})
|
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
:root {
|
||||||
|
<?php foreach ($_['vars'] as $key => $value): ?>
|
||||||
|
<?php if ($key === 'opener'): ?>
|
||||||
|
--side-menu-<?php echo $key ?>: url('<?php print_unescaped(image_path('side_menu', $value.'.svg')); ?>');
|
||||||
|
<?php else: ?>
|
||||||
|
--side-menu-<?php echo $key ?>: <?php echo $value ?>;
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
}
|
||||||
|
|
||||||
|
<?php if ($_['display-logo'] === false): ?>
|
||||||
|
.side-menu-logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-header {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-apps-list {
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side-menu.hide-opener .side-menu-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side-menu.hide-opener .side-menu-apps-list {
|
||||||
|
height: calc(100vh);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
<?php endif; ?>
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
(function() {
|
||||||
|
var sideMenuContainer = $('<div id="side-menu-container">')
|
||||||
|
var sideMenuOpener = $('<button class="side-menu-opener"></button>')
|
||||||
|
var sideMenu = $('<div id="side-menu">')
|
||||||
|
var body = $('body')
|
||||||
|
|
||||||
|
body.append(sideMenuContainer)
|
||||||
|
|
||||||
|
sideMenuContainer.append(sideMenu)
|
||||||
|
|
||||||
|
<?php if ($_['opener-position'] === 'before'): ?>
|
||||||
|
sideMenuOpener.insertBefore('#nextcloud')
|
||||||
|
<?php else: ?>
|
||||||
|
sideMenuOpener.insertAfter('#nextcloud')
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
|
||||||
|
|
||||||
|
body.on('side-menu.ready', function() {
|
||||||
|
sideMenu = $('#side-menu')
|
||||||
|
|
||||||
|
var headerMenuOpener = $('#header .side-menu-opener')
|
||||||
|
var sideMenuOpener = $('#side-menu .side-menu-opener')
|
||||||
|
|
||||||
|
<?php if ($_['opener-hover']): ?>
|
||||||
|
var sideMenuMouseLeave = function() {
|
||||||
|
sideMenu
|
||||||
|
.removeClass('open')
|
||||||
|
.off('mouseleave', sideMenuMouseLeave)
|
||||||
|
}
|
||||||
|
|
||||||
|
var sideMenuMouseEnter = function() {
|
||||||
|
sideMenu.on('mouseleave', sideMenuMouseLeave)
|
||||||
|
}
|
||||||
|
|
||||||
|
var sideMenuOpenerMouseEnter = function() {
|
||||||
|
sideMenu
|
||||||
|
.addClass('open')
|
||||||
|
.on('mouseenter', sideMenuMouseEnter)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isTouchDevice) {
|
||||||
|
headerMenuOpener.on('mouseenter', sideMenuOpenerMouseEnter)
|
||||||
|
|
||||||
|
sideMenu.addClass('hide-opener')
|
||||||
|
}
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
headerMenuOpener.on('click', function() {
|
||||||
|
sideMenu.addClass('open');
|
||||||
|
})
|
||||||
|
|
||||||
|
sideMenuOpener.on('click', function() {
|
||||||
|
sideMenu.removeClass('open');
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})();
|
||||||
@@ -18,77 +18,169 @@
|
|||||||
|
|
||||||
script('side_menu', 'admin');
|
script('side_menu', 'admin');
|
||||||
style('side_menu', 'admin');
|
style('side_menu', 'admin');
|
||||||
|
style('side_menu', 'support');
|
||||||
|
|
||||||
|
$choicesYesNo = [
|
||||||
|
'No' => '0',
|
||||||
|
'Yes' => '1',
|
||||||
|
];
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div id="side-menu-section" class="section">
|
<div id="side-menu-section">
|
||||||
<h2 class="inlineblock"><?php p($l->t('Side menu settings')); ?></h2>
|
<div class="section">
|
||||||
|
<h2>
|
||||||
|
<?php p($l->t('Colors')); ?>
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="side-menu-background-color" class="settings-hint">
|
<label for="side-menu-background-color" class="settings-hint">
|
||||||
<?php p($l->t('Background color')); ?>
|
<?php p($l->t('Background color')); ?>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
id="side-menu-background-color"
|
id="side-menu-background-color"
|
||||||
name="background-color"
|
name="background-color"
|
||||||
type="color"
|
type="color"
|
||||||
value="<?php print_unescaped($_['background-color']); ?>">
|
value="<?php print_unescaped($_['background-color']); ?>">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="side-menu-current-app-background-color" class="settings-hint">
|
||||||
|
<?php p($l->t('Background color of current app')); ?>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
id="side-menu-current-app-background-color"
|
||||||
|
name="current-app-background-color"
|
||||||
|
type="color"
|
||||||
|
value="<?php print_unescaped($_['current-app-background-color']); ?>">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="side-menu-text-color" class="settings-hint">
|
||||||
|
<?php p($l->t('Text color')); ?>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
id="side-menu-text-color"
|
||||||
|
name="text-color"
|
||||||
|
type="color"
|
||||||
|
value="<?php print_unescaped($_['text-color']); ?>">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="section">
|
||||||
<label for="side-menu-current-app-background-color" class="settings-hint">
|
<h2>
|
||||||
<?php p($l->t('Background color of current app')); ?>
|
<?php p($l->t('Opener')); ?>
|
||||||
</label>
|
</h2>
|
||||||
</div>
|
|
||||||
<div>
|
<?php
|
||||||
<input
|
$choices = [
|
||||||
id="side-menu-current-app-background-color"
|
'Default' => 'side-menu-opener',
|
||||||
name="current-app-background-color"
|
'Hamburger' => 'side-menu-opener-hamburger',
|
||||||
type="color"
|
];
|
||||||
value="<?php print_unescaped($_['current-app-background-color']); ?>">
|
?>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="side-menu-opener" class="settings-hint">
|
||||||
|
<?php p($l->t('Icon')); ?>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<select id="side-menu-opener" name="opener">
|
||||||
|
<?php foreach ($choices as $label => $value): ?>
|
||||||
|
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
|
||||||
|
<?php echo $l->t($label); ?>
|
||||||
|
</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
$choices = [
|
||||||
|
'Before the logo' => 'before',
|
||||||
|
'After the logo' => 'after',
|
||||||
|
];
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="side-menu-opener-position" class="settings-hint">
|
||||||
|
<?php p($l->t('Position')); ?>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<select id="side-menu-opener-position" name="opener-position">
|
||||||
|
<?php foreach ($choices as $label => $value): ?>
|
||||||
|
<option value="<?php echo $value ?>" <?php if ($value === $_['opener-position']): ?>selected<?php endif; ?>>
|
||||||
|
<?php echo $l->t($label); ?>
|
||||||
|
</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="section">
|
||||||
<label for="side-menu-text-color" class="settings-hint">
|
<h2>
|
||||||
<?php p($l->t('Text color')); ?>
|
<?php p($l->t('Panel')); ?>
|
||||||
</label>
|
</h2>
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<input
|
<label for="side-menu-opener" class="settings-hint">
|
||||||
id="side-menu-text-color"
|
<?php p($l->t('Open the menu when the mouse is hover the opener (automatically disabled on touch screens)')); ?>
|
||||||
name="text-color"
|
</label>
|
||||||
type="color"
|
</div>
|
||||||
value="<?php print_unescaped($_['text-color']); ?>">
|
|
||||||
|
<div>
|
||||||
|
<select id="side-menu-opener-hover" name="opener-hover">
|
||||||
|
<?php foreach ($choicesYesNo as $label => $value): ?>
|
||||||
|
<option value="<?php echo $value ?>" <?php if ($value === $_['opener-hover']): ?>selected<?php endif; ?>>
|
||||||
|
<?php echo $l->t($label); ?>
|
||||||
|
</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="side-menu-opener" class="settings-hint">
|
||||||
|
<?php p($l->t('Display the logo')); ?>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<select id="side-menu-display-logo" name="display-logo">
|
||||||
|
<?php foreach ($choicesYesNo as $label => $value): ?>
|
||||||
|
<option value="<?php echo $value ?>" <?php if ($value === $_['display-logo']): ?>selected<?php endif; ?>>
|
||||||
|
<?php echo $l->t($label); ?>
|
||||||
|
</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="section">
|
||||||
<label for="side-menu-opener" class="settings-hint">
|
<input type="hidden" id="side-menu-cache" name="cache" value="<?php print_unescaped($_['cache']); ?>">
|
||||||
<?php p($l->t('Opener icon')); ?>
|
|
||||||
</label>
|
<button id="side-menu-save" class="btn btn-primary"><?php p($l->t('Save')); ?></button>
|
||||||
|
|
||||||
|
<span id="side-menu-message" class="msg"></span>
|
||||||
|
|
||||||
|
<div style="height: 30px"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span for="side-menu-opener" class="settings-hint">
|
||||||
|
<?php p($l->t('You like this app and you want to support me?')); ?>
|
||||||
|
|
||||||
|
<a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan">
|
||||||
|
<button>
|
||||||
|
<?php p($l->t('Buy me a coffe ☕')); ?>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php
|
|
||||||
$choices = [
|
|
||||||
'Default' => 'side-menu-opener',
|
|
||||||
'Hamburger' => 'side-menu-opener-hamburger',
|
|
||||||
];
|
|
||||||
?>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<select id="side-menu-opener" name="opener">
|
|
||||||
<?php foreach ($choices as $label => $value): ?>
|
|
||||||
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
|
|
||||||
<?php echo $l->t($label); ?>
|
|
||||||
</option>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="hidden" id="side-menu-cache" name="cache" value="<?php print_unescaped($_['cache']); ?>">
|
|
||||||
|
|
||||||
<button id="side-menu-save" class="btn btn-primary"><?php p($l->t('Save')); ?></button>
|
|
||||||
|
|
||||||
<span id="side-menu-message" class="msg"></span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ const StyleLintPlugin = require('stylelint-webpack-plugin')
|
|||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
'main': path.join(__dirname, 'src', 'main.js'),
|
|
||||||
'admin': path.join(__dirname, 'src', 'admin.js'),
|
'admin': path.join(__dirname, 'src', 'admin.js'),
|
||||||
'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
|
'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user