add base of the big menu

This commit is contained in:
Simon Vieille 2020-08-06 15:00:59 +02:00
parent ddb7cc40ce
commit 8e0be738a6
Signed by: deblan
GPG Key ID: 03383D15A1D31745
14 changed files with 324 additions and 7 deletions

View File

@ -21,6 +21,7 @@ return [
'routes' => [
['name' => 'Css#stylesheet', 'url' => '/css/stylesheet', 'verb' => 'GET'],
['name' => 'Js#script', 'url' => '/js/script', 'verb' => 'GET'],
['name' => 'Nav#items', 'url' => '/nav/items', 'verb' => 'GET'],
['name' => 'PersonalSetting#valueSet', 'url' => '/personalSetting/valueSet', 'verb' => 'POST'],
],
];

View File

@ -70,6 +70,7 @@ class CssController extends Controller
'external-sites-in-top-menu' => (bool) $this->config->getAppValue('side_menu', 'external-sites-in-top-menu', 0),
'size-icon' => $this->config->getAppValue('side_menu', 'size-icon', 'normal'),
'size-text' => $this->config->getAppValue('side_menu', 'size-text', 'normal'),
'big-menu' => (bool) $this->config->getAppValue('side_menu', 'big-menu', '0'),
];
$response = new TemplateResponse('side_menu', 'css/stylesheet', $parameters, 'blank');

View File

@ -60,6 +60,7 @@ class JsController extends Controller
'force-light-icon' => (bool) $this->config->getAppValue('side_menu', 'force-light-icon', '0'),
'hide-when-no-apps' => (bool) $this->config->getAppValue('side_menu', 'hide-when-no-apps', '0'),
'loader-enabled' => (bool) $this->config->getAppValue('side_menu', 'loader-enabled', '1'),
'big-menu' => (bool) $this->config->getAppValue('side_menu', 'big-menu', '0'),
];
$response = new TemplateResponse('side_menu', 'js/script', $parameters, 'blank');

View File

@ -0,0 +1,139 @@
<?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 OCA\SideMenu\Service\AppRepository;
use OCP\AppFramework\Controller;
use OCP\AppFramework\Http\JSONResponse;
use OCP\IConfig;
use OCP\IL10N;
use OCP\IRequest;
use OC\App\AppStore\Fetcher\CategoryFetcher;
use OCP\L10N\IFactory;
class NavController extends Controller
{
/**
* @var \OCP\IConfig
*/
protected $config;
/**
* @var AppRepository
*/
protected $appRepository;
/**
* @var IL10N
*/
protected $trans;
/**
* @var IFactory
*/
protected $l10nFactory;
/**
* @var CategoryFetcher
*/
protected $categoryFetcher;
/**
* @param string $appName
*/
public function __construct(
$appName,
IRequest $request,
IConfig $config,
AppRepository $appRepository,
CategoryFetcher $categoryFetcher,
IFactory $l10nFactory,
IL10N $trans)
{
parent::__construct($appName, $request);
$this->config = $config;
$this->appRepository = $appRepository;
$this->categoryFetcher = $categoryFetcher;
$this->l10nFactory = $l10nFactory;
$this->trans = $trans;
}
/**
* @NoAdminRequired
* @NoCSRFRequired
* @PublicPage
*
* @return JSONResponse
*/
public function items()
{
$apps = $this->appRepository->getVisibleApps();
$currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2);
$categoriesLabels = $this->categoryFetcher->get();
$items = [];
foreach ($categoriesLabels as $k => $category) {
$categoriesLabels[$category['id']] = $category['translations'][$currentLanguage]['name'] ?? $category['translations']['en']['name'];
unset($categoriesLabels[$k]);
}
foreach ($apps as $app) {
$categories = $app['category'];
foreach ($categories as $category) {
if (!isset($items[$category])) {
$items[$category] = [
'name' => $categoriesLabels[$category],
'apps' => [],
];
}
$items[$category]['apps'][$app['id']] = [
'name' => $app['name'],
'href' => '#',
'icon' => $app['previewAsIcon'] ? $app['preview'] : null,
];
}
}
$items['other'] = [
'label' => $this->trans->t('Other'),
'apps' => [],
];
// foreach ($items as $category => $value) {
// if ($category !== 'other') {
// if (count($value['apps']) < 0) {
// $items['other']['apps'] = array_merge(
// $items['other']['apps'],
// $value['apps']
// );
//
// unset($items[$category]);
// }
// }
// }
return new JSONResponse([
'items' => $items,
]);
}
}

View File

@ -61,10 +61,16 @@ class PersonalSettingController extends Controller
if (!in_array($value, ['0', '1'])) {
$value = '1';
}
} elseif ($name === 'big-menu') {
$doSave = true;
if (!in_array($value, ['0', '1'])) {
$value = '0';
}
}
if ($doSave) {
$this->config->setUserValue($user->getUid(), 'side_menu', 'enabled', $value);
$this->config->setUserValue($user->getUid(), 'side_menu', $name, $value);
}
return [];

View File

@ -0,0 +1,48 @@
<?php
namespace OCA\SideMenu\Service;
use \OC_App;
/**
* class AppRepository.
*
* @author Simon Vieille <simon@deblan.fr>
*/
class AppRepository
{
/**
* @var OC_App
*/
protected $ocApp;
/**
* @param OC_App $ocApp
*/
public function __construct(OC_App $ocApp)
{
$this->ocApp = $ocApp;
}
/**
* Retrieves visibles apps.
*
* @return array
*/
public function getVisibleApps()
{
$navigation = $this->ocApp->getNavigation();
$apps = $this->ocApp->listAllApps();
$visibleApps = [];
foreach ($apps as $app) {
$id = $app['id'];
if (isset($navigation[$id])) {
$visibleApps[$id] = $app;
}
}
return $visibleApps;
}
}

View File

@ -66,6 +66,7 @@ class Admin implements ISettings
'force-light-icon' => $this->config->getAppValue('side_menu', 'force-light-icon', '0'),
'cache' => $this->config->getAppValue('side_menu', 'cache', '0'),
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
'big-menu' => $this->config->getAppValue('side_menu', 'big-menu', '0'),
'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'),

View File

@ -64,6 +64,7 @@ class Personal implements ISettings
$parameters = [
'enabled' => $this->config->getUserValue($user->getUid(), 'side_menu', 'enabled', '1'),
'big-menu' => $this->config->getUserValue($user->getUid(), 'side_menu', 'big-menu', '0'),
];
return new TemplateResponse('side_menu', 'settings/personal-form', $parameters, '');

View File

@ -13,6 +13,7 @@
"dependencies": {
"@nextcloud/axios": "^1.3.2",
"@nextcloud/vue": "^1.4.0",
"axios": "^0.19.2",
"trim": "0.0.1",
"vue": "^2.6.11"
},

View File

@ -17,18 +17,28 @@
import Vue from 'vue'
import SideMenu from './SideMenu.vue'
import SideMenuBig from './SideMenuBig.vue'
// Vue.prototype.t = t
// Vue.prototype.OC = OC
Vue.prototype.OC = OC
// Vue.prototype.OC = OCP
const View = Vue.extend(SideMenu)
const sideMenu = new View({})
const mountSideMenuComponent = () => {
const sideMenuContainer = document.querySelector('#side-menu')
if (sideMenuContainer) {
let component
if (sideMenuContainer.getAttribute('data-bigmenu')) {
component = SideMenuBig
} else {
component = SideMenu
}
const View = Vue.extend(component)
const sideMenu = new View({})
sideMenu.$mount('#side-menu')
$('body').trigger('side-menu.ready')

68
src/SideMenuBig.vue Normal file
View File

@ -0,0 +1,68 @@
<!--
@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/>.
-->
<template>
<div id="side-menu">
<div v-for="category in items">
<h2 v-html="category.name"></h2>
<ul>
<li v-for="app in category.apps">
<a v-bind:href="app.href" 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>
</ul>
</div>
</div>
</template>
<script>
import trim from 'trim'
import axios from 'axios'
export default {
name: 'SideMenuBig',
data() {
return {
items: [],
logo: null,
forceLightIcon: false,
}
},
methods: {
retrieveApps() {
this.apps = []
let that = this
axios
.get(OC.generateUrl('/apps/side_menu/nav/items'))
.then(function(response) {
that.items = response.data.items
jQuery('body').trigger('side-menu.apps', [])
});
},
},
mounted() {
this.retrieveApps()
this.forceLightIcon = document.querySelector('#side-menu-container').getAttribute('data-forcelighticon') == 1;
this.ignoreExternalSites = document.querySelector('#side-menu-container').getAttribute('data-externalsitesintopmenu') == 1;
}
}
</script>

View File

@ -5,6 +5,10 @@
var body = $('body')
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
<?php if ($_['big-menu']): ?>
sideMenu.attr('data-bigmenu', '1')
<?php endif; ?>
<?php if ($_['force-light-icon']): ?>
sideMenuContainer.attr('data-forcelighticon', '1')
<?php endif; ?>

View File

@ -217,6 +217,9 @@ $choicesSizes = [
</label>
</div>
<p>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.</p>
<div>
<select id="side-menu-opener-hover" name="opener-hover" class="side-menu-setting">
<?php foreach ($choicesYesNo as $label => $value): ?>
@ -227,8 +230,23 @@ $choicesSizes = [
</select>
</div>
<p>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.</p>
<div>
<label for="side-menu-big-menu" class="settings-hint">
<?php p($l->t('Display the big menu')); ?>
</label>
</div>
<p>The big menu is not compatible with AppOrder.</p>
<div>
<select id="side-menu-big-menu" name="big-menu" class="side-menu-setting">
<?php foreach ($choicesYesNo as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['big-menu']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div>
<label for="side-menu-opener" class="settings-hint">
@ -309,7 +327,7 @@ $choicesSizes = [
<?php p($l->t('Tips')); ?>
</h2>
<p class="settings-hint">Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span>
<p class="settings-hint">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.</p>
</div>

View File

@ -49,6 +49,24 @@ $choicesYesNo = [
</select>
</div>
<div>
<label for="side-menu-big-menu" class="settings-hint">
<?php p($l->t('Display the big menu')); ?>
</label>
</div>
<div>
<select id="side-menu-big-menu" name="big-menu" class="side-menu-setting" data-personal>
<?php foreach ($choicesYesNo as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['big-menu']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<p>The big menu is not compatible with AppOrder.</p>
<p>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.</p>
</div>