From 584969dd19d173a5aefe7e9a15ac0cdc10964b45 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 Use left swipe to close nav Added transition Updated ODS --- apps/files/src/components/FileOpenActions.vue | 12 + changelog/unreleased/branded-sidebar | 6 + package.json | 7 +- src/Phoenix.vue | 155 +++++++++--- 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 | 4 +- src/store/config.js | 4 +- tests/acceptance/pageObjects/phoenixPage.js | 32 ++- themes/owncloud/assets/logo.png | Bin 0 -> 15250 bytes yarn.lock | 222 ++---------------- 14 files changed, 227 insertions(+), 375 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/apps/files/src/components/FileOpenActions.vue b/apps/files/src/components/FileOpenActions.vue index e1ceb783e03..dbd76c728c7 100644 --- a/apps/files/src/components/FileOpenActions.vue +++ b/apps/files/src/components/FileOpenActions.vue @@ -80,3 +80,15 @@ export default { } } + + 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/package.json b/package.json index 6ddd8b98658..5c81fe52b14 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "node-fs-extra": "^0.8.2", "npm-run-all": "^4.1.5", "oidc-client": "^1.9.1", - "owncloud-design-system": "^1.3.0", + "owncloud-design-system": "^1.5.0", "owncloud-sdk": "^1.0.0-608", "p-limit": "^2.2.1", "p-queue": "^6.1.1", @@ -110,6 +110,7 @@ "vue-router": "^3.1.3", "vue-scrollto": "^2.15.0", "vue-template-compiler": "^2.6.10", + "vue2-touch-events": "^2.2.1", "vuex": "^3.1.1", "vuex-persist": "2.0.1", "vuex-router-sync": "^5.0.0", @@ -141,7 +142,7 @@ "git add" ] }, - "engines": { - "node": ">=10 <13" + "engines": { + "node": ">=10 <13" } } diff --git a/src/Phoenix.vue b/src/Phoenix.vue index 77aef0e60df..fc6fe53f05d 100644 --- a/src/Phoenix.vue +++ b/src/Phoenix.vue @@ -1,30 +1,39 @@ @@ -32,21 +41,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 +81,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 +108,52 @@ 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 + }, + + isSidebarVisible() { + return this.windowWidth >= 1200 || this.appNavigationVisible + }, + + appNavigationAnimation() { + if (this.windowWidth > 1200) { + return null + } + + if (this.windowWidth > 960) { + return 'push-right' + } + + return 'fade' } }, watch: { @@ -126,11 +177,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 +197,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 +229,25 @@ 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 + }, + + handleNavSwipe() { + if (this.windowWidth <= 960 || this.windowWidth > 1200) { + return + } + + this.appNavigationVisible = false } } } 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 }}
+