@@ -16,7 +16,6 @@ | |||
/* prevent ugly selection effect on accidental selection */ | |||
#header, | |||
#navigation, | |||
#expanddiv { | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
@@ -72,7 +71,6 @@ | |||
/* Header menu */ | |||
$header-menu-entry-height: 44px; | |||
.header-left > nav > .menu, | |||
.header-right > div > .menu { | |||
background-color: var(--color-main-background); | |||
filter: drop-shadow(0 1px 5px var(--color-box-shadow)); | |||
@@ -103,7 +101,6 @@ | |||
right: 10px; | |||
} | |||
#apps > ul, | |||
& > div, | |||
& > ul { | |||
overflow-y: auto; | |||
@@ -111,8 +108,7 @@ | |||
@include header-menu-height(); | |||
} | |||
/* Use by the apps menu and the settings right menu */ | |||
#apps > ul, | |||
/* Use by the settings right menu */ | |||
&.settings-menu > ul { | |||
li { | |||
a { | |||
@@ -182,16 +178,6 @@ | |||
padding-right: 10px; | |||
flex-shrink: 0; | |||
} | |||
/* show caret indicator next to logo to make clear it is tappable */ | |||
.icon-caret { | |||
display: inline-block; | |||
width: 12px; | |||
height: 12px; | |||
margin: 0; | |||
margin-top: -21px; | |||
padding: 0; | |||
vertical-align: middle; | |||
} | |||
#header-left, .header-left, | |||
#header-right, .header-right { | |||
@@ -245,27 +231,6 @@ | |||
opacity: .75; | |||
} | |||
.menutoggle { | |||
.icon-caret { | |||
opacity: .75; | |||
} | |||
&:hover { | |||
.header-appname, .icon-caret { | |||
opacity: 1; | |||
} | |||
} | |||
&:focus { | |||
.header-appname, .icon-caret { | |||
opacity: 1; | |||
} | |||
} | |||
&.active { | |||
.header-appname, .icon-caret { | |||
opacity: 1; | |||
} | |||
} | |||
} | |||
/* TODO: move into minimal css file for public shared template */ | |||
/* only used for public share pages now as we have the app icons when logged in */ | |||
.header-appname { | |||
@@ -291,56 +256,6 @@ | |||
text-overflow: ellipsis; | |||
} | |||
/* do not show menu toggle on public share links as there is no menu */ | |||
#body-public #header .icon-caret { | |||
display: none; | |||
} | |||
/* NAVIGATION --------------------------------------------------------------- */ | |||
nav[role='navigation'] { | |||
display: inline-block; | |||
width: variables.$header-height; | |||
height: variables.$header-height; | |||
margin-left: -#{variables.$header-height}; | |||
position: relative; | |||
} | |||
#header .header-left > nav > #navigation { | |||
position: relative; | |||
left: 25px; /* half the togglemenu */ | |||
transform: translateX(-50%); | |||
width: 160px; | |||
} | |||
#header .header-left > nav > #navigation, | |||
.ui-datepicker, | |||
.ui-timepicker.ui-widget { | |||
background-color: var(--color-main-background); | |||
filter: drop-shadow(0 1px 10px var(--color-box-shadow)); | |||
&:after { | |||
/* position of dropdown arrow */ | |||
left: 50%; | |||
bottom: 100%; | |||
border: solid transparent; | |||
content: ' '; | |||
height: 0; | |||
width: 0; | |||
position: absolute; | |||
pointer-events: none; | |||
border-color: rgba(0, 0, 0, 0); | |||
border-bottom-color: var(--color-main-background); | |||
border-width: 10px; | |||
margin-left: -10px; /* border width */ | |||
} | |||
} | |||
#navigation { | |||
box-sizing: border-box; | |||
.in-header { | |||
display: none; | |||
} | |||
} | |||
/* USER MENU -----------------------------------------------------------------*/ | |||
#settings { | |||
display: inline-block; | |||
@@ -420,220 +335,6 @@ nav[role='navigation'] { | |||
} | |||
} | |||
/* Apps menu */ | |||
#appmenu { | |||
display: inline-flex; | |||
min-width: variables.$header-height; | |||
z-index: 2; | |||
li { | |||
position: relative; | |||
cursor: pointer; | |||
padding: 0 2px; | |||
display: flex; | |||
justify-content: center; | |||
a { | |||
position: relative; | |||
display: flex; | |||
margin: 0; | |||
height: calc(variables.$header-height - 6px); | |||
width: variables.$header-height; | |||
align-items: center; | |||
justify-content: center; | |||
opacity: .85; | |||
// Make sure most app names don’t ellipsize | |||
letter-spacing: -0.5px; | |||
font-size: 12px; | |||
margin: 2px; | |||
} | |||
/* focused app visual feedback */ | |||
&:hover a, | |||
a:focus, | |||
a.active { | |||
opacity: 1; | |||
font-weight: bold; | |||
} | |||
// Text size back to normal for hover/focus | |||
&:hover a, | |||
a:focus { | |||
font-size: 14px; | |||
} | |||
&:hover a + span, | |||
a:focus + span, | |||
&:hover span, | |||
&:focus span, | |||
a:focus span, | |||
a.active span { | |||
display: inline-block; | |||
text-overflow: initial; | |||
width: auto; | |||
overflow: hidden; | |||
padding: 0 5px; | |||
z-index: 2; | |||
} | |||
/* hidden apps menu */ | |||
img, | |||
.icon-more-white { | |||
display: inline-block; | |||
width: 20px; | |||
height: 20px; | |||
} | |||
.icon-more-white { | |||
background-image: url('../img/actions/more-white.svg?v=1'); | |||
} | |||
/* App title */ | |||
span { | |||
opacity: 0; | |||
position: absolute; | |||
color: var(--color-primary-text); | |||
bottom: 2px; | |||
width: 100%; | |||
text-align: center; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
transition: all var(--animation-quick) ease; | |||
pointer-events: none; | |||
} | |||
/* Set up transitions for showing app titles on hover */ | |||
/* App icon */ | |||
svg, | |||
.icon-more-white { | |||
transition: transform var(--animation-quick) ease; | |||
// If the primary is too bright, invert the app icons | |||
filter: var(--primary-invert-if-bright); | |||
} | |||
/* Triangle */ | |||
a::before { | |||
transition: border var(--animation-quick) ease; | |||
} | |||
} | |||
/* Show all app titles on hovering app menu area */ | |||
&:hover { | |||
li { | |||
/* Move up app icon */ | |||
svg, | |||
.icon-more, | |||
.icon-more-white, | |||
.icon-loading-small, | |||
.icon-loading-small-dark { | |||
transform: translateY(-7px); | |||
} | |||
/* Show app title */ | |||
span { | |||
opacity: 1; | |||
bottom: 2px; | |||
z-index: -1; /* fix clickability issue - otherwise we need to move the span into the link */ | |||
} | |||
/* Prominent app title for current and hovered/focused app */ | |||
&:hover span, | |||
&:focus span, | |||
.active + span { | |||
opacity: 1; | |||
} | |||
/* Smaller triangle because of limited space */ | |||
a::before { | |||
border-width: 5px; | |||
} | |||
} | |||
} | |||
/* Also show app title on focusing single entry (showing all on focus is only possible with CSS4 and parent selectors) */ | |||
li a:focus { | |||
/* Move up app icon */ | |||
svg, | |||
.icon-more, | |||
.icon-more-white, | |||
.icon-loading-small, | |||
.icon-loading-small-dark { | |||
transform: translateY(-7px); | |||
} | |||
/* Show app title */ | |||
& + span, | |||
span { | |||
opacity: 1; | |||
bottom: 2px; | |||
} | |||
/* Smaller triangle because of limited space */ | |||
&::before { | |||
border-width: 5px; | |||
} | |||
} | |||
/* show triangle below active app */ | |||
li a::before { | |||
content: ' '; | |||
height: 0; | |||
width: 0; | |||
position: absolute; | |||
pointer-events: none; | |||
border: 0 solid transparent; | |||
border-bottom-color: var(--color-main-background); | |||
border-width: 10px; | |||
transform: translateX(-50%); | |||
left: 50%; | |||
bottom: -5px; | |||
display: none; | |||
} | |||
/* triangle focus feedback */ | |||
li a.active::before, | |||
li:hover a::before, | |||
li:hover a.active::before, | |||
li a:focus::before { | |||
display: block; | |||
} | |||
li a.active::before { | |||
z-index: 99; | |||
} | |||
li:hover a::before, | |||
li a.active:hover::before, | |||
li a:focus::before { | |||
z-index: 101; | |||
} | |||
li.hidden { | |||
display: none; | |||
} | |||
#more-apps { | |||
z-index: 3; | |||
} | |||
} | |||
.unread-counter { | |||
display: none; | |||
} | |||
#apps .app-icon-notification, | |||
#appmenu .app-icon-notification { | |||
fill: var(--color-error); | |||
} | |||
#apps svg:not(.has-unread), | |||
#appmenu svg:not(.has-unread) { | |||
.app-icon-notification-mask { | |||
display: none; | |||
} | |||
.app-icon-notification { | |||
display: none; | |||
} | |||
} | |||
/* Skip navigation links – show only on keyboard focus */ | |||
#skip-actions { | |||
position: absolute; |
@@ -0,0 +1,268 @@ | |||
<!-- | |||
- @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net> | |||
- | |||
- @author Julius Härtl <jus@bitgrid.net> | |||
- | |||
- @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> | |||
<nav class="app-menu"> | |||
<ul class="app-menu-main"> | |||
<li v-for="app in mainAppList" | |||
:key="app.id" | |||
:data-app-id="app.id" | |||
class="app-menu-entry" | |||
:class="{ 'app-menu-entry__active': app.active }"> | |||
<a :href="app.href" :class="{ 'has-unread': app.unread > 0 }" :aria-label="appLabel(app)"> | |||
<img :src="app.icon" alt=""> | |||
<div class="app-menu-entry--label"> | |||
{{ app.name }} | |||
<span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span> | |||
</div> | |||
</a> | |||
</li> | |||
</ul> | |||
<NcActions class="app-menu-more" :aria-label="t('core', 'More apps')"> | |||
<NcActionLink v-for="app in popoverAppList" | |||
:key="app.id" | |||
:aria-label="appLabel(app)" | |||
:href="app.href" | |||
class="app-menu-popover-entry"> | |||
<template #icon> | |||
<div class="app-icon" :class="{ 'has-unread': app.unread > 0 }"> | |||
<img :src="app.icon" alt=""> | |||
</div> | |||
</template> | |||
{{ app.name }} | |||
<span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span> | |||
</NcActionLink> | |||
</NcActions> | |||
</nav> | |||
</template> | |||
<script> | |||
import { loadState } from '@nextcloud/initial-state' | |||
import NcActions from '@nextcloud/vue/dist/Components/NcActions' | |||
import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink' | |||
export default { | |||
name: 'AppMenu', | |||
components: { | |||
NcActions, NcActionLink, | |||
}, | |||
data() { | |||
return { | |||
apps: loadState('core', 'apps', {}), | |||
appLimit: 0, | |||
} | |||
}, | |||
computed: { | |||
appList() { | |||
return Object.values(this.apps) | |||
}, | |||
mainAppList() { | |||
return this.appList.slice(0, this.appLimit) | |||
}, | |||
popoverAppList() { | |||
return this.appList.slice(this.appLimit) | |||
}, | |||
appLabel() { | |||
return (app) => app.name | |||
+ (app.active ? ' (' + t('core', 'Currently open') + ')' : '') | |||
+ (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '') | |||
}, | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', this.resize) | |||
this.resize() | |||
}, | |||
methods: { | |||
setNavigationCounter(id, counter) { | |||
this.$set(this.apps[id], 'unread', counter) | |||
}, | |||
resize() { | |||
const availableWidth = this.$el.offsetWidth | |||
let appCount = Math.floor(availableWidth / 50) - 1 | |||
const popoverAppCount = this.appList.length - appCount | |||
if (popoverAppCount === 1) { | |||
appCount-- | |||
} | |||
if (appCount < 1) { | |||
appCount = 0 | |||
} | |||
this.appLimit = appCount | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
$header-icon-size: 20px; | |||
.app-menu { | |||
width: 100%; | |||
display: flex; | |||
flex-shrink: 1; | |||
flex-wrap: wrap; | |||
} | |||
.app-menu-main { | |||
display: flex; | |||
flex-wrap: nowrap; | |||
.app-menu-entry { | |||
width: 50px; | |||
height: 50px; | |||
position: relative; | |||
display: flex; | |||
opacity: .7; | |||
&.app-menu-entry__active { | |||
opacity: 1; | |||
&::before { | |||
content: " "; | |||
position: absolute; | |||
pointer-events: none; | |||
border: 8px solid transparent; | |||
border-bottom-color: var(--color-main-background); | |||
transform: translateX(-50%); | |||
left: 50%; | |||
bottom: 0; | |||
display: block; | |||
transition: all 0.1s ease-in-out; | |||
opacity: 1; | |||
} | |||
.app-menu-entry--label { | |||
font-weight: bold; | |||
} | |||
} | |||
a { | |||
width: 100%; | |||
height: 100%; | |||
color: var(--color-primary-text); | |||
position: relative; | |||
} | |||
img { | |||
transition: margin 0.1s ease-in-out; | |||
width: $header-icon-size; | |||
height: $header-icon-size; | |||
padding: calc((100% - $header-icon-size) / 2); | |||
filter: var(--primary-invert-if-bright); | |||
} | |||
.app-menu-entry--label { | |||
opacity: 0; | |||
position: absolute; | |||
font-size: 12px; | |||
color: var(--color-primary-text); | |||
text-align: center; | |||
bottom: -5px; | |||
left: 50%; | |||
display: block; | |||
min-width: 100%; | |||
transform: translateX(-50%); | |||
transition: all 0.1s ease-in-out; | |||
width: 100%; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
} | |||
&:hover, | |||
&:focus-within { | |||
opacity: 1; | |||
.app-menu-entry--label { | |||
opacity: 1; | |||
font-weight: bold; | |||
font-size: 14px; | |||
bottom: 0; | |||
width: auto; | |||
overflow: visible; | |||
} | |||
} | |||
} | |||
// Show labels | |||
&:hover, | |||
&:focus-within, | |||
.app-menu-entry:hover, | |||
.app-menu-entry:focus { | |||
opacity: 1; | |||
img { | |||
margin-top: -6px; | |||
} | |||
.app-menu-entry--label { | |||
opacity: 1; | |||
bottom: 0; | |||
} | |||
&::before, .app-menu-entry::before { | |||
border-width: 3px; | |||
} | |||
} | |||
} | |||
::v-deep .app-menu-more .button-vue--vue-tertiary { | |||
color: var(--color-primary-text); | |||
opacity: .7; | |||
margin: 3px; | |||
&:hover { | |||
opacity: 1; | |||
background-color: transparent !important; | |||
} | |||
} | |||
.app-menu-popover-entry { | |||
.app-icon { | |||
position: relative; | |||
height: 44px; | |||
&.has-unread::after { | |||
background-color: var(--color-main-text); | |||
} | |||
img { | |||
filter: var(--background-invert-if-bright); | |||
width: $header-icon-size; | |||
height: $header-icon-size; | |||
padding: calc((50px - $header-icon-size) / 2); | |||
} | |||
} | |||
} | |||
.has-unread::after { | |||
content: ""; | |||
width: 8px; | |||
height: 8px; | |||
background-color: var(--color-primary-text); | |||
border-radius: 50%; | |||
position: absolute; | |||
display: block; | |||
top: 10px; | |||
right: 10px; | |||
} | |||
.unread-counter { | |||
display: none; | |||
} | |||
</style> |
@@ -22,99 +22,27 @@ | |||
* | |||
*/ | |||
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-appmenu-' + id + ')' | |||
appsElement.getElementsByTagName('image')[0].style.mask = 'url(#hole-' + id + ')' | |||
} | |||
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 AppMenuApp = Vue.extend(AppMenu) | |||
const appMenu = new AppMenuApp({}).$mount('#header-left__appmenu') | |||
$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) | |||
} | |||
}) | |||
} |
@@ -36,62 +36,7 @@ import { setUp as setUpMainMenu } from './components/MainMenu' | |||
import { setUp as setUpUserMenu } from './components/UserMenu' | |||
import PasswordConfirmation from './OC/password-confirmation' | |||
// keep in sync with core/css/variables.scss | |||
const breakpointMobileWidth = 1024 | |||
const resizeMenu = () => { | |||
const appList = $('#appmenu li') | |||
const rightHeaderWidth = $('.header-right').outerWidth() | |||
const headerWidth = $('header').outerWidth() | |||
const usePercentualAppMenuLimit = 0.67 | |||
const minAppsDesktop = 12 | |||
let availableWidth = headerWidth - $('#nextcloud').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210) | |||
const isMobile = $(window).width() < breakpointMobileWidth | |||
if (!isMobile) { | |||
availableWidth = availableWidth * usePercentualAppMenuLimit | |||
} | |||
let appCount = Math.floor((availableWidth / $(appList).width())) | |||
if (isMobile && appCount > minAppsDesktop) { | |||
appCount = minAppsDesktop | |||
} | |||
if (!isMobile && appCount < minAppsDesktop) { | |||
appCount = minAppsDesktop | |||
} | |||
// show at least 2 apps in the popover | |||
if (appList.length - 1 - appCount >= 1) { | |||
appCount-- | |||
} | |||
$('#more-apps a').removeClass('active') | |||
let lastShownApp | |||
for (let k = 0; k < appList.length - 1; k++) { | |||
const name = $(appList[k]).data('id') | |||
if (k < appCount) { | |||
$(appList[k]).removeClass('hidden') | |||
$('#apps li[data-id=' + name + ']').addClass('in-header') | |||
lastShownApp = appList[k] | |||
} else { | |||
$(appList[k]).addClass('hidden') | |||
$('#apps li[data-id=' + name + ']').removeClass('in-header') | |||
// move active app to last position if it is active | |||
if (appCount > 0 && $(appList[k]).children('a').hasClass('active')) { | |||
$(lastShownApp).addClass('hidden') | |||
$('#apps li[data-id=' + $(lastShownApp).data('id') + ']').removeClass('in-header') | |||
$(appList[k]).removeClass('hidden') | |||
$('#apps li[data-id=' + name + ']').addClass('in-header') | |||
} | |||
} | |||
} | |||
// show/hide more apps icon | |||
if ($('#apps li:not(.in-header)').length === 0) { | |||
$('#more-apps').hide() | |||
$('#navigation').hide() | |||
} else { | |||
$('#more-apps').show() | |||
} | |||
} | |||
const breakpointMobileWidth = getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-mobile') | |||
const initLiveTimestamps = () => { | |||
// Update live timestamps every 30 seconds | |||
@@ -179,30 +124,6 @@ export const initCore = () => { | |||
setUpUserMenu() | |||
setUpContactsMenu() | |||
// move triangle of apps dropdown to align with app name triangle | |||
// 2 is the additional offset between the triangles | |||
if ($('#navigation').length) { | |||
$('#header #nextcloud + .menutoggle').on('click', () => { | |||
$('#menu-css-helper').remove() | |||
const caretPosition = $('.header-appname + .icon-caret').offset().left - 2 | |||
if (caretPosition > 255) { | |||
// if the app name is longer than the menu, just put the triangle in the middle | |||
} else { | |||
$('head').append('<style id="menu-css-helper">#navigation:after { left: ' + caretPosition + 'px }</style>') | |||
} | |||
}) | |||
$('#header #appmenu .menutoggle').on('click', () => { | |||
$('#appmenu').toggleClass('menu-open') | |||
if ($('#appmenu').is(':visible')) { | |||
$('#menu-css-helper').remove() | |||
} | |||
}) | |||
} | |||
$(window).resize(resizeMenu) | |||
setTimeout(resizeMenu, 0) | |||
// just add snapper for logged in users | |||
// and if the app doesn't handle the nav slider itself | |||
if ($('#app-navigation').length && !$('html').hasClass('lte9') |
@@ -65,70 +65,7 @@ $getUserAvatar = static function (int $size) use ($_): string { | |||
</div> | |||
</a> | |||
<ul id="appmenu"> | |||
<?php foreach ($_['navigation'] as $entry): ?> | |||
<li data-id="<?php p($entry['id']); ?>" class="hidden" tabindex="-1"> | |||
<a href="<?php print_unescaped($entry['href']); ?>" | |||
<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?> | |||
<?php if ($entry['active']): ?> class="active"<?php endif; ?> | |||
aria-label="<?php p($entry['name']); ?>"> | |||
<svg width="24" height="20" viewBox="0 0 24 20"<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>> | |||
<defs> | |||
<mask id="hole-appmenu-<?php p($entry['id']); ?>"> | |||
<rect width="100%" height="100%" fill="white"/> | |||
<circle r="4.5" cx="21" cy="3" fill="black"/> | |||
</mask> | |||
</defs> | |||
<image x="2" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image> | |||
<circle class="app-icon-notification" r="3" cx="21" cy="3" fill="red"/> | |||
</svg> | |||
<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div> | |||
<span> | |||
<?php p($entry['name']); ?> | |||
</span> | |||
</a> | |||
</li> | |||
<?php endforeach; ?> | |||
<li id="more-apps" class="menutoggle" | |||
aria-haspopup="true" aria-controls="navigation" aria-expanded="false"> | |||
<a href="#" aria-label="<?php p($l->t('More apps')); ?>"> | |||
<div class="icon-more-white"></div> | |||
<span><?php p($l->t('More')); ?></span> | |||
</a> | |||
</li> | |||
</ul> | |||
<nav role="navigation"> | |||
<div id="navigation" style="display: none;" aria-label="<?php p($l->t('More apps menu')); ?>"> | |||
<div id="apps"> | |||
<ul> | |||
<?php foreach ($_['navigation'] as $entry): ?> | |||
<li data-id="<?php p($entry['id']); ?>"> | |||
<a href="<?php print_unescaped($entry['href']); ?>" | |||
<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?> | |||
<?php if ($entry['active']): ?> class="active"<?php endif; ?> | |||
aria-label="<?php p($entry['name']); ?>"> | |||
<svg width="20" height="20" viewBox="0 0 16 16"<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>> | |||
<defs> | |||
<filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter> | |||
<mask id="hole-<?php p($entry['id']); ?>"> | |||
<rect width="100%" height="100%" fill="white"/> | |||
<circle r="4.5" cx="17" cy="3" fill="black"/> | |||
</mask> | |||
</defs> | |||
<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image> | |||
<circle class="app-icon-notification" r="3" cx="17" cy="3" fill="red"/> | |||
</svg> | |||
<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div> | |||
<span class="app-title"><?php p($entry['name']); ?></span> | |||
</a> | |||
</li> | |||
<?php endforeach; ?> | |||
</ul> | |||
</div> | |||
</div> | |||
</nav> | |||
<nav id="header-left__appmenu"></nav> | |||
</div> | |||
<div class="header-right"> |
@@ -100,6 +100,7 @@ class TemplateLayout extends \OC_Template { | |||
} | |||
$this->initialState->provideInitialState('core', 'active-app', $this->navigationManager->getActiveEntry()); | |||
$this->initialState->provideInitialState('core', 'apps', $this->navigationManager->getAll()); | |||
$this->initialState->provideInitialState('unified-search', 'limit-default', (int)$this->config->getAppValue('core', 'unified-search.limit-default', (string)SearchQuery::LIMIT_DEFAULT)); | |||
$this->initialState->provideInitialState('unified-search', 'min-search-length', (int)$this->config->getAppValue('core', 'unified-search.min-search-length', (string)2)); | |||
$this->initialState->provideInitialState('unified-search', 'live-search', $this->config->getAppValue('core', 'unified-search.live-search', 'yes') === 'yes'); |