Merge pull request #1579 from nextcloud/feature/1021/new_design_top_navigation_part

Implement new Design for upper AppNavigation part

css/app-navigation.scss

@@ -42,11 +42,11 @@
 	}
 
 	.button:first-child:not(:only-of-type) {
-		border-radius: var(--border-radius) 0 0 var(--border-radius);
+		border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill);
 	}
 
 	.button:last-child:not(:only-of-type) {
-		border-radius: 0 var(--border-radius) var(--border-radius) 0;
+		border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
 	}
 
 	.button:not(:only-of-type):not(:first-child):not(:last-child) {
@@ -54,7 +54,7 @@
 	}
 
 	.button:only-child {
-		border-radius: var(--border-radius);
+		border-radius: var(--border-radius-pill);
 	}
 
 	.button:hover,
@@ -89,6 +89,28 @@
 	}
 }
 
+.app-navigation-header {
+	padding: 3px 3px 0 3px;
+}
+
+.new-event-today-view-section {
+	display: flex;
+	margin-left: 3px;
+	margin-right: 3px;
+
+	.new-event {
+		flex-grow: 5;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.today {
+		flex-grow: 1;
+		font-weight: normal !important;
+	}
+}
+
 #app-navigation {
 	button.icon-share {
 		opacity: 0.3 !important;

css/icons.scss

@@ -33,3 +33,7 @@
 @include icon-black-white('repeat', 'calendar', 1);
 @include icon-black-white('rightarrow', 'calendar', 2);
 @include icon-black-white('timezone', 'calendar', 1);
+@include icon-black-white('view-day', 'calendar', 1);
+@include icon-black-white('view-list', 'calendar', 1);
+@include icon-black-white('view-module', 'calendar', 1);
+@include icon-black-white('view-week', 'calendar', 1);

img/LICENSES.md

@@ -19,3 +19,23 @@
 - Created by: [Brandy Bora](https://thenounproject.com/brandy.bora/)
 - License: CC-BY
 - Link: https://thenounproject.com/search/?q=repeat&i=1555394
+
+## view-day.svg
+- Created by: Google
+- License: Apache License version 2.0
+- Link: https://material.io/resources/icons/?search=view_&icon=view_day&style=baseline
+
+## view-list.svg
+- Created by: Google
+- License: Apache License version 2.0
+- Link: https://material.io/resources/icons/?search=view_&icon=view_list&style=baseline
+
+## view-module.svg
+- Created by: Google
+- License: Apache License version 2.0
+- Link: https://material.io/resources/icons/?search=view_&icon=view_module&style=baseline
+
+## view-week.svg
+- Created by: Google
+- License: Apache License version 2.0
+- Link: https://material.io/resources/icons/?search=view_&icon=view_week&style=baseline

img/view-day.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M2 21h19v-3H2v3zM20 8H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zM2 3v3h19V3H2z"/></svg>

img/view-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

img/view-module.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

img/view-week.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z"/></svg>

src/components/AppNavigation/AppNavigationHeader.vue

@@ -22,22 +22,27 @@
 <template>
 	<header class="app-navigation-header">
 		<AppNavigationHeaderDatePicker />
-		<AppNavigationHeaderViewButtons />
-		<AppNavigationHeaderTodayButton />
+		<div class="new-event-today-view-section">
+			<AppNavigationHeaderNewEvent />
+			<AppNavigationHeaderTodayButton />
+			<AppNavigationHeaderViewMenu />
+		</div>
 	</header>
 </template>
 
 <script>
 import AppNavigationHeaderDatePicker from './AppNavigationHeader/AppNavigationHeaderDatePicker.vue'
 import AppNavigationHeaderTodayButton from './AppNavigationHeader/AppNavigationHeaderTodayButton.vue'
-import AppNavigationHeaderViewButtons from './AppNavigationHeader/AppNavigationHeaderViewButtons.vue'
+import AppNavigationHeaderNewEvent from './AppNavigationHeader/AppNavigationHeaderNewEvent.vue'
+import AppNavigationHeaderViewMenu from './AppNavigationHeader/AppNavigationHeaderViewMenu.vue'
 
 export default {
 	name: 'AppNavigationHeader',
 	components: {
 		AppNavigationHeaderDatePicker,
 		AppNavigationHeaderTodayButton,
-		AppNavigationHeaderViewButtons
+		AppNavigationHeaderNewEvent,
+		AppNavigationHeaderViewMenu
 	}
 }
 </script>

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue

@@ -0,0 +1,70 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
+  -
+  - @author Georg Ehrke <oc.list@georgehrke.com>
+  -
+  - @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>
+	<button class="button primary new-event" @click="newEvent">
+		{{ $t('calendar', '+ New event') }}
+	</button>
+</template>
+
+<script>
+import { dateFactory } from '../../../utils/date'
+
+export default {
+	name: 'AppNavigationHeaderNewEvent',
+	methods: {
+		newEvent() {
+			let name = this.$store.state.settings.skipPopover
+				? 'NewSidebarView'
+				: 'NewPopoverView'
+
+			if (window.innerWidth <= 768 && name === 'NewPopoverView') {
+				name = 'NewSidebarView'
+			}
+
+			const start = dateFactory()
+			// Setting a value greater than 23 is actually supported with the expected behavior:
+			// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setHours
+			start.setHours(start.getHours() + Math.ceil(start.getMinutes() / 60))
+			start.setMinutes(0)
+			const end = new Date(start.getTime())
+			end.setHours(start.getHours() + 1)
+
+			const params = Object.assign({}, this.$store.state.route.params, {
+				allDay: '0',
+				dtstart: String(Math.floor(start.getTime() / 1000)),
+				dtend: String(Math.floor(end.getTime() / 1000))
+			})
+
+			// Don't push new route when day didn't change
+			if (name === this.$store.state.route.name
+				&& params.allDay === this.$store.state.route.params.allDay
+				&& params.dtstart === this.$store.state.route.params.dtstart
+				&& params.dtend === this.$store.state.route.params.dtend) {
+				return
+			}
+
+			this.$router.push({ name, params })
+		}
+	}
+}
+</script>

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue

@@ -21,15 +21,13 @@
   -->
 
 <template>
-	<div class="today-button-section">
-		<button
-			:aria-label="title"
-			class="button"
-			:title="title"
-			@click="today()">
-			{{ $t('calendar', 'Today') }}
-		</button>
-	</div>
+	<button
+		:aria-label="title"
+		class="button today"
+		:title="title"
+		@click="today()">
+		{{ $t('calendar', 'Today') }}
+	</button>
 </template>
 
 <script>

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue

@@ -0,0 +1,85 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
+  - @author Georg Ehrke <oc.list@georgehrke.com>
+  -
+  - @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>
+	<Actions :default-icon="defaultIcon" menu-align="right">
+		<ActionButton
+			v-for="view in views"
+			:key="view.id"
+			:icon="view.icon"
+			@click="selectView(view.id)">
+			{{ view.label }}
+		</ActionButton>
+	</Actions>
+</template>
+
+<script>
+import { Actions, ActionButton } from '@nextcloud/vue'
+
+export default {
+	name: 'AppNavigationHeaderViewMenu',
+	components: {
+		Actions,
+		ActionButton
+	},
+	computed: {
+		views() {
+			return [{
+				id: 'timeGridDay',
+				icon: 'icon-view-day',
+				label: this.$t('calendar', 'Day')
+			}, {
+				id: 'timeGridWeek',
+				icon: 'icon-view-week',
+				label: this.$t('calendar', 'Week')
+			}, {
+				id: 'dayGridMonth',
+				icon: 'icon-view-module',
+				label: this.$t('calendar', 'Month')
+			}]
+		},
+		defaultIcon() {
+			for (const view of this.views) {
+				if (view.id === this.$route.params.view) {
+					return view.icon
+				}
+			}
+
+			return 'icon-toggle-pictures'
+		}
+	},
+	methods: {
+		selectView(viewName) {
+			const name = this.$route.name
+			const params = Object.assign({}, this.$route.params, {
+				view: viewName
+			})
+
+			// Don't push new route when view didn't change
+			if (this.$route.params.view === viewName) {
+				return
+			}
+
+			this.$router.push({ name, params })
+		}
+	}
+}
+</script>

src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue

@@ -0,0 +1,61 @@
+<!--
+  - @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
+  -
+  - @author Georg Ehrke <oc.list@georgehrke.com>
+  -
+  - @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 class="today-button-section">
+		<button
+			:aria-label="title"
+			class="button"
+			:title="title"
+			@click="today()">
+			{{ $t('calendar', 'Today') }}
+		</button>
+	</div>
+</template>
+
+<script>
+import moment from '@nextcloud/moment'
+
+export default {
+	name: 'EmbedHeaderTodayButton',
+	computed: {
+		title() {
+			return moment().format('ll')
+		}
+	},
+	methods: {
+		today() {
+			const name = this.$route.name
+			const params = Object.assign({}, this.$route.params, {
+				firstDay: 'now'
+			})
+
+			// Don't push new route when day didn't change
+			if (this.$route.params.firstDay === 'now') {
+				return
+			}
+
+			this.$router.push({ name, params })
+		}
+	}
+}
+</script>

src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue

@@ -36,7 +36,7 @@
 
 <script>
 export default {
-	name: 'AppNavigationHeaderViewButtons',
+	name: 'EmbedHeaderViewButtons',
 	computed: {
 		isAgendaDayViewSelected() {
 			return this.selectedView === 'timeGridDay'

src/components/AppNavigation/EmbedTopNavigation.vue

@@ -44,8 +44,8 @@ import {
 import { generateRemoteUrl } from '@nextcloud/router'
 
 import AppNavigationHeaderDatePicker from './AppNavigationHeader/AppNavigationHeaderDatePicker.vue'
-import AppNavigationHeaderTodayButton from './AppNavigationHeader/AppNavigationHeaderTodayButton.vue'
-import AppNavigationHeaderViewButtons from './AppNavigationHeader/AppNavigationHeaderViewButtons.vue'
+import AppNavigationHeaderTodayButton from './EmbedHeader/EmbedHeaderTodayButton.vue'
+import AppNavigationHeaderViewButtons from './EmbedHeader/EmbedHeaderViewButtons.vue'
 
 export default {
 	name: 'EmbedTopNavigation',