From 5a2dd2b5d8ee8de236113497952de6eced87a755 Mon Sep 17 00:00:00 2001 From: Lukas Hirt Date: Sun, 10 May 2020 18:29:29 +0200 Subject: [PATCH] Permanently visible left sidebar Check if the navigation is visible in tests --- changelog/unreleased/branded-sidebar | 6 + src/Phoenix.vue | 125 ++++++++++++++------ src/components/ApplicationsMenu.vue | 11 +- src/components/Menu.vue | 85 ------------- src/components/Notifications.vue | 5 +- src/components/Top-Bar.vue | 50 ++++---- src/components/UserMenu.vue | 9 +- src/phoenix.js | 2 +- src/store/config.js | 4 +- tests/acceptance/pageObjects/phoenixPage.js | 33 ++++-- themes/owncloud/assets/logo.png | Bin 0 -> 15250 bytes 11 files changed, 158 insertions(+), 172 deletions(-) create mode 100644 changelog/unreleased/branded-sidebar delete mode 100644 src/components/Menu.vue create mode 100644 themes/owncloud/assets/logo.png diff --git a/changelog/unreleased/branded-sidebar b/changelog/unreleased/branded-sidebar new file mode 100644 index 00000000000..a1c78a7e027 --- /dev/null +++ b/changelog/unreleased/branded-sidebar @@ -0,0 +1,6 @@ +Change: Permanently visible branded left navigation sidebar + +We've made left navigation sidebar permanently visible and moved branding (logo and brand color) into it. + +https://github.com/owncloud/phoenix/issues/3395 +https://github.com/owncloud/phoenix/pull/3442 \ No newline at end of file diff --git a/src/Phoenix.vue b/src/Phoenix.vue index 77aef0e60df..79b4999cdb0 100644 --- a/src/Phoenix.vue +++ b/src/Phoenix.vue @@ -1,30 +1,35 @@ @@ -32,21 +37,20 @@ import 'inert-polyfill' import { mapGetters, mapState, mapActions } from 'vuex' import TopBar from './components/Top-Bar.vue' -import Menu from './components/Menu.vue' import MessageBar from './components/MessageBar.vue' import SkipTo from './components/SkipTo.vue' export default { components: { MessageBar, - 'side-menu': Menu, TopBar, SkipTo }, data() { return { appNavigationVisible: false, - $_notificationsInterval: null + $_notificationsInterval: null, + windowWidth: 0 } }, computed: { @@ -73,7 +77,22 @@ export default { return list.flat() }, - appNavigationEntries() { + showHeader() { + return this.$route.meta.hideHeadbar !== true + }, + favicon() { + return this.configuration.theme.logo.favicon + }, + + logoImage() { + return `/themes/${this.configuration.theme.name}/assets/logo.png` + }, + + productName() { + return this.configuration.theme.general.name + }, + + navItems() { if (this.publicPage()) { return [] } @@ -85,24 +104,36 @@ export default { return [] } - return items.filter(item => { - if (item.enabled === undefined) { - return true - } - + items.filter(item => { if (this.capabilities === undefined) { return false } + if (item.enabled === undefined) { + return true + } + return item.enabled(this.capabilities) }) + + return items.map(item => { + item.name = this.$gettext(item.name) + item.active = this.$route.name === item.route.name + + return item + }) }, - showHeader() { - return this.$route.meta.hideHeadbar !== true + sidebarClasses() { + if (this.appNavigationVisible) { + return '' + } + + return 'uk-visible@l' }, - favicon() { - return this.configuration.theme.logo.favicon + + isSidebarFixed() { + return this.windowWidth <= 960 } }, watch: { @@ -126,11 +157,17 @@ export default { } } }, + + beforeDestroy() { + window.removeEventListener('resize', this.onResize) + }, + destroyed() { if (this.$_notificationsInterval) { clearInterval(this.$_notificationsInterval) } }, + metaInfo() { const metaInfo = { title: this.configuration.theme.general.name @@ -140,9 +177,18 @@ export default { } return metaInfo }, + + mounted() { + this.$nextTick(() => { + window.addEventListener('resize', this.onResize) + this.onResize() + }) + }, + beforeMount() { this.initAuth() }, + methods: { ...mapActions(['initAuth', 'fetchNotifications', 'deleteMessage']), @@ -163,6 +209,17 @@ export default { $_deleteMessage(item) { this.deleteMessage(item) + }, + + onResize() { + const width = window.innerWidth + + // Reset navigation visibility in case of switching back to permanently visible sidebar + if (width >= 1200) { + this.appNavigationVisible = false + } + + this.windowWidth = width } } } diff --git a/src/components/ApplicationsMenu.vue b/src/components/ApplicationsMenu.vue index e0940797a7e..9754aa53837 100644 --- a/src/components/ApplicationsMenu.vue +++ b/src/components/ApplicationsMenu.vue @@ -1,13 +1,14 @@ - - - - diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue index bf4ee8a13a4..2e509e33501 100644 --- a/src/components/Notifications.vue +++ b/src/components/Notifications.vue @@ -1,10 +1,9 @@ -TODO: Move to ODS and enable theming diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue index 16018a7389d..705050bd0ab 100644 --- a/src/components/UserMenu.vue +++ b/src/components/UserMenu.vue @@ -4,17 +4,17 @@ id="_userMenuButton" ref="menuButton" class="oc-topbar-personal uk-height-1-1" - variation="primary" + variation="raw" :aria-label="$gettext('User Menu')" > - + -
{{ userDisplayName }}
+