diff options
Diffstat (limited to 'core/src/components/MainMenu.js')
| -rw-r--r-- | core/src/components/MainMenu.js | 126 |
1 files changed, 20 insertions, 106 deletions
diff --git a/core/src/components/MainMenu.js b/core/src/components/MainMenu.js index 436fd835cc3..21a0b6a772f 100644 --- a/core/src/components/MainMenu.js +++ b/core/src/components/MainMenu.js @@ -1,120 +1,34 @@ /** - * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at> - * - * @author Christoph Wurst <christoph@winzerhof-wurst.at> - * @author John Molakvoæ <skjnldsv@protonmail.com> - * @author Julius Härtl <jus@bitgrid.net> - * - * @license AGPL-3.0-or-later - * - * 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/>. - * + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ -import $ from 'jquery' +import { translate as t, translatePlural as n } from '@nextcloud/l10n' +import Vue from 'vue' -import OC from '../OC' +import AppMenu from './AppMenu.vue' -/** - * Set up the main menu toggle to react to media query changes. - * If the screen is small enough, the main menu becomes a toggle. - * If the screen is bigger, the main menu is not a toggle any more. - */ export const setUp = () => { - Object.assign(OC, { - setNavigationCounter(id, counter) { - const appmenuElement = document.getElementById('appmenu').querySelector('[data-id="' + id + '"] svg') - const appsElement = document.getElementById('apps').querySelector('[data-id="' + id + '"] svg') - if (counter === 0) { - appmenuElement.classList.remove('has-unread') - appsElement.classList.remove('has-unread') - appmenuElement.getElementsByTagName('image')[0].style.mask = '' - appsElement.getElementsByTagName('image')[0].style.mask = '' - } else { - appmenuElement.classList.add('has-unread') - appsElement.classList.add('has-unread') - appmenuElement.getElementsByTagName('image')[0].style.mask = 'url(#hole)' - appsElement.getElementsByTagName('image')[0].style.mask = 'url(#hole)' - } - document.getElementById('appmenu').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter - document.getElementById('apps').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter + Vue.mixin({ + methods: { + t, + n, }, }) - // init the more-apps menu - OC.registerMenu($('#more-apps > a'), $('#navigation')) - - // toggle the navigation - const $toggle = $('#header .header-appname-container') - const $navigation = $('#navigation') - const $appmenu = $('#appmenu') - - // init the menu - OC.registerMenu($toggle, $navigation) - $toggle.data('oldhref', $toggle.attr('href')) - $toggle.attr('href', '#') - $navigation.hide() - // show loading feedback on more apps list - $navigation.delegate('a', 'click', event => { - let $app = $(event.target) - if (!$app.is('a')) { - $app = $app.closest('a') - } - if (event.which === 1 && !event.ctrlKey && !event.metaKey && $app.attr('target') !== '_blank') { - $app.find('svg').remove() - $app.find('div').remove() // prevent odd double-clicks - // no need for theming, loader is already inverted on dark mode - // but we need it over the primary colour - $app.prepend($('<div></div>').addClass('icon-loading-small')) - } else { - // Close navigation when opening app in - // a new tab - OC.hideMenus(() => false) - } - }) + const container = document.getElementById('header-start__appmenu') + if (!container) { + // no container, possibly we're on a public page + return + } + const AppMenuApp = Vue.extend(AppMenu) + const appMenu = new AppMenuApp({}).$mount(container) - $navigation.delegate('a', 'mouseup', event => { - if (event.which === 2) { - // Close navigation when opening app in - // a new tab via middle click - OC.hideMenus(() => false) - } + Object.assign(OC, { + setNavigationCounter(id, counter) { + appMenu.setNavigationCounter(id, counter) + }, }) - // show loading feedback on visible apps list - $appmenu.delegate('li:not(#more-apps) > a', 'click', event => { - let $app = $(event.target) - if (!$app.is('a')) { - $app = $app.closest('a') - } - - if (event.which === 1 && !event.ctrlKey && !event.metaKey && $app.parent('#more-apps').length === 0 && $app.attr('target') !== '_blank') { - $app.find('svg').remove() - $app.find('div').remove() // prevent odd double-clicks - $app.prepend($('<div></div>').addClass( - OCA.Theming && OCA.Theming.inverted - ? 'icon-loading-small' - : 'icon-loading-small-dark' - )) - // trigger redirect - // needed for ie, but also works for every browser - window.location = $app.attr('href') - } else { - // Close navigation when opening app in - // a new tab - OC.hideMenus(() => false) - } - }) } |