Merge pull request #2294 from nextcloud/enh/votepage-design

Move title to header and rearrange action buttons

5 files changed, 98 insertions, 105 deletions

diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue
index d6446212..33050f7c 100644
--- a/src/js/views/Administration.vue
+++ b/src/js/views/Administration.vue
@@ -22,22 +22,14 @@
 
 <template>
 	<AppContent class="poll-list">
-		<div class="area__header">
-			<h2 class="title">
-				{{ title }}
-			</h2>
-		</div>
+		<HeaderBar class="area__header">
+			<template #title>
+				{{ t('polls', 'Adminitrative poll management') }}
+			</template>
+			{{ t('polls', 'Manage polls of other users. You can take over the ownership or delete polls.') }}
+		</HeaderBar>
 
 		<div class="area__main">
-			<div>
-				<h2 class="title">
-					{{ t('polls', 'Manage polls') }}
-				</h2>
-				<h3 class="description">
-					{{ t('polls', 'Manage polls of other users. You can take over the ownership or delete polls.') }}
-				</h3>
-			</div>
-
 			<EmptyContent v-if="noPolls" icon="icon-polls">
 				{{ t('polls', 'No polls found for this category') }}
 				<template #desc>
@@ -123,6 +115,7 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { Actions, ActionButton, AppContent, EmptyContent, Modal } from '@nextcloud/vue'
 import sortBy from 'lodash/sortBy'
+import HeaderBar from '../components/Base/HeaderBar'
 
 export default {
 	name: 'Administration',
@@ -131,10 +124,11 @@ export default {
 		AppContent,
 		Actions,
 		ActionButton,
-		LoadingOverlay: () => import('../components/Base/LoadingOverlay'),
-		PollItem: () => import('../components/PollList/PollItem'),
 		EmptyContent,
+		HeaderBar,
 		Modal,
+		LoadingOverlay: () => import('../components/Base/LoadingOverlay'),
+		PollItem: () => import('../components/PollList/PollItem'),
 	},
 
 	data() {
diff --git a/src/js/views/Combo.vue b/src/js/views/Combo.vue
index 9b7af214..5eaa9582 100644
--- a/src/js/views/Combo.vue
+++ b/src/js/views/Combo.vue
@@ -22,16 +22,17 @@
 
 <template>
 	<AppContent>
-		<div class="poll-header-buttons">
-			<ActionToggleSidebar />
-		</div>
-		<div class="combo-title">
-			{{ title }}
-		</div>
-
-		<div v-if="description" class="area__header">
+		<HeaderBar class="area__header">
+			<template #title>
+				{{ title }}
+			</template>
+			<template #right>
+				<div class="poll-header-buttons">
+					<ActionToggleSidebar />
+				</div>
+			</template>
 			{{ description }}
-		</div>
+		</HeaderBar>
 
 		<div class="area__main">
 			<ComboTable v-show="polls.length" />
@@ -54,15 +55,17 @@ import { AppContent, EmptyContent } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import ComboTable from '../components/Combo/ComboTable'
 import ActionToggleSidebar from '../components/Actions/ActionToggleSidebar'
+import HeaderBar from '../components/Base/HeaderBar'
 
 export default {
 	name: 'Combo',
 
 	components: {
+		ActionToggleSidebar,
 		AppContent,
 		ComboTable,
 		EmptyContent,
-		ActionToggleSidebar,
+		HeaderBar,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay'),
 	},
 
@@ -109,10 +112,6 @@ export default {
 		this.verifyPolls()
 	},
 
-	beforeDestroy() {
-		// this.$store.dispatch({ type: 'combo/reset' })
-	},
-
 	methods: {
 		...mapActions({
 			setPollCombo: 'settings/setPollCombo',
@@ -123,20 +122,3 @@ export default {
 }
 
 </script>
-
-<style lang="scss">
-	.combo-title {
-		font-weight: bold;
-		font-size: 1.3em;
-		line-height: 1.5em;
-	}
-
-	.poll-header-buttons {
-		display: flex;
-		flex-wrap: wrap-reverse;
-		flex: 0 1 auto;
-		justify-content: flex-end;
-		align-self: flex-end;
-		border-radius: var(--border-radius-pill);
-	}
-</style>
diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue
index eb82ecef..5593523f 100644
--- a/src/js/views/PollList.vue
+++ b/src/js/views/PollList.vue
@@ -22,14 +22,12 @@
 
 <template>
 	<AppContent class="poll-list">
-		<div class="poll-list-title">
-			<h2 class="title">
+		<HeaderBar class="area__header">
+			<template #title>
 				{{ title }}
-			</h2>
-			<h3 class="description">
-				{{ description }}
-			</h3>
-		</div>
+			</template>
+			{{ description }}
+		</HeaderBar>
 
 		<div class="area__main">
 			<EmptyContent v-if="noPolls" icon="icon-polls">
@@ -93,10 +91,10 @@
 
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex'
-// import sortBy from 'lodash/sortBy'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { Actions, ActionButton, AppContent, EmptyContent } from '@nextcloud/vue'
+import HeaderBar from '../components/Base/HeaderBar'
 
 export default {
 	name: 'PollList',
@@ -105,9 +103,10 @@ export default {
 		AppContent,
 		Actions,
 		ActionButton,
+		EmptyContent,
+		HeaderBar,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay'),
 		PollItem: () => import('../components/PollList/PollItem'),
-		EmptyContent,
 	},
 
 	data() {
@@ -214,10 +213,6 @@ export default {
 </script>
 
 <style lang="scss">
-	.poll-list {
-		padding-top: 5px;
-	}
-
 	.poll-list__list {
 		width: 100%;
 		display: flex;
diff --git a/src/js/views/SideBar.vue b/src/js/views/SideBar.vue
index bcb30f64..edfe0e18 100644
--- a/src/js/views/SideBar.vue
+++ b/src/js/views/SideBar.vue
@@ -90,7 +90,6 @@ export default {
 		SideBarTabShare: () => import('../components/SideBar/SideBarTabShare'),
 		SideBarTabCollaboration: () => import('../components/SideBar/SideBarTabCollaboration'),
 		SideBarTabActivity: () => import('../components/SideBar/SideBarTabActivity'),
-		// SideBarTabUserOptions: () => import('../components/SideBar/SideBarTabUserOptions'),
 		AppSidebar,
 		AppSidebarTab,
 	},
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index 267cdcdf..f4b8af88 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -22,42 +22,52 @@
 
 <template>
 	<AppContent :class="[{ closed: closed }, poll.type]">
-		<PollHeaderButtons />
-		<PollTitle show-sub-text />
-		<div v-if="poll.description" class="area__header">
-			<MarkUpDescription />
-		</div>
+		<HeaderBar class="area__header">
+			<template #title>
+				{{ poll.title }}
+			</template>
+			<template #right>
+				<PollHeaderButtons />
+			</template>
+			<PollInfoLine />
+		</HeaderBar>
+
+		<div class="vote_main">
+			<div v-if="poll.description" class="area__description">
+				<MarkUpDescription />
+			</div>
 
-		<div v-if="acl.allowAddOptions && proposalsOpen && !closed" class="area__proposal">
-			<OptionProposals />
-		</div>
+			<div v-if="acl.allowAddOptions && proposalsOpen && !closed" class="area__proposal">
+				<OptionProposals />
+			</div>
 
-		<div class="area__main" :class="viewMode">
-			<VoteTable v-show="options.length" :view-mode="viewMode" />
-
-			<EmptyContent v-if="!options.length" :icon="pollTypeIcon">
-				{{ t('polls', 'No vote options available') }}
-				<template #desc>
-					<button v-if="acl.allowEdit" @click="openOptions">
-						{{ t('polls', 'Add some!') }}
-					</button>
-					<div v-if="!acl.allowEdit">
-						{{ t('polls', 'Maybe the owner did not provide some until now.') }}
-					</div>
-				</template>
-			</EmptyContent>
-		</div>
+			<div class="area__main" :class="viewMode">
+				<VoteTable v-show="options.length" :view-mode="viewMode" />
+
+				<EmptyContent v-if="!options.length" :icon="pollTypeIcon">
+					{{ t('polls', 'No vote options available') }}
+					<template #desc>
+						<button v-if="acl.allowEdit" @click="openOptions">
+							{{ t('polls', 'Add some!') }}
+						</button>
+						<div v-if="!acl.allowEdit">
+							{{ t('polls', 'Maybe the owner did not provide some until now.') }}
+						</div>
+					</template>
+				</EmptyContent>
+			</div>
 
-		<div v-if="countHiddenParticipants" class="area__footer">
-			<h2>
-				{{ t('polls', 'Due to performance concerns {countHiddenParticipants} voters are hidden.', { countHiddenParticipants }) }}
-			</h2>
-		</div>
+			<div v-if="countHiddenParticipants" class="area__footer">
+				<h2>
+					{{ t('polls', 'Due to performance concerns {countHiddenParticipants} voters are hidden.', { countHiddenParticipants }) }}
+				</h2>
+			</div>
 
-		<div v-if="poll.anonymous" class="area__footer">
-			<div>
-				{{ t('polls', 'Although participant\'s names are hidden, this is not a real anonymous poll because they are not hidden from the owner.') }}
-				{{ t('polls', 'Additionally the owner can remove the anonymous flag at any time, which will reveal the participant\'s names.') }}
+			<div v-if="poll.anonymous" class="area__footer">
+				<div>
+					{{ t('polls', 'Although participant\'s names are hidden, this is not a real anonymous poll because they are not hidden from the owner.') }}
+					{{ t('polls', 'Additionally the owner can remove the anonymous flag at any time, which will reveal the participant\'s names.') }}
+				</div>
 			</div>
 		</div>
 
@@ -71,21 +81,23 @@ import { mapState, mapGetters } from 'vuex'
 import { AppContent, EmptyContent } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import MarkUpDescription from '../components/Poll/MarkUpDescription'
-import PollTitle from '../components/Poll/PollTitle'
+import PollInfoLine from '../components/Poll/PollInfoLine'
 import PollHeaderButtons from '../components/Poll/PollHeaderButtons'
+import HeaderBar from '../components/Base/HeaderBar'
 
 export default {
 	name: 'Vote',
 	components: {
 		AppContent,
-		MarkUpDescription,
 		EmptyContent,
-		LoadingOverlay: () => import('../components/Base/LoadingOverlay'),
+		HeaderBar,
+		MarkUpDescription,
 		PollHeaderButtons,
-		PollTitle,
+		PollInfoLine,
+		LoadingOverlay: () => import('../components/Base/LoadingOverlay'),
+		OptionProposals: () => import('../components/Options/OptionProposals'),
 		PublicRegisterModal: () => import('../components/Poll/PublicRegisterModal'),
 		VoteTable: () => import('../components/VoteTable/VoteTable'),
-		OptionProposals: () => import('../components/Options/OptionProposals'),
 	},
 
 	data() {
@@ -157,16 +169,28 @@ export default {
 </script>
 
 <style lang="scss">
-.poll-title {
-	margin-bottom: 16px;
+.vote_main {
+	display: flex;
+	flex-direction: column;
+	row-gap: 8px;
 }
 
-.area__proposal .mx-input-wrapper > button {
-	width: initial;
+.vote_head {
+	display: flex;
+	flex-wrap: wrap-reverse;
+	justify-content: flex-end;
+	.poll-title {
+		flex: 1 270px;
+	}
 }
 
-.markup-description {
-	font-size: 1.1em;
+.area__main {
+	display: flex;
+	flex-direction: column;
+}
+
+.area__proposal .mx-input-wrapper > button {
+	width: initial;
 }
 
 .icon.icon-settings.active {
@@ -174,5 +198,4 @@ export default {
 	width: 44px;
 	height: 44px;
 }
-
 </style>