diff options
author | René Gieling <github@dartcafe.de> | 2022-03-22 22:16:20 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-22 22:16:20 +0300 |
commit | eff300b9dc9838696b2128ff7224e5390e5c715c (patch) | |
tree | 35ae2c07669be0bbc01865d9d2305e5b096d38c7 /src/js/views | |
parent | 4ddd0a113906867c9e6e14cc48708100953218f6 (diff) | |
parent | 457664e1574a241c12a029b61b086a458d1a0467 (diff) |
Merge pull request #2294 from nextcloud/enh/votepage-design
Move title to header and rearrange action buttons
Diffstat (limited to 'src/js/views')
-rw-r--r-- | src/js/views/Administration.vue | 26 | ||||
-rw-r--r-- | src/js/views/Combo.vue | 44 | ||||
-rw-r--r-- | src/js/views/PollList.vue | 21 | ||||
-rw-r--r-- | src/js/views/SideBar.vue | 1 | ||||
-rw-r--r-- | src/js/views/Vote.vue | 111 |
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> |