diff options
author | René Gieling <github@dartcafe.de> | 2022-04-02 16:32:16 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-02 16:32:16 +0300 |
commit | bb7720cc5eba7e2cf159749d2793761902d6e2af (patch) | |
tree | 83f00c6b4571162c1b506fddfd39a805ca3fc13a /src/js/components/SideBar | |
parent | 24d9a1c83b6f78c051a850c9879490589bafcbb4 (diff) | |
parent | 5304c63aa4963c0d72ac6a2014c4b5c873f43927 (diff) |
Merge pull request #2344 from nextcloud/enh/md-icons
Replace icons with material design icons
Diffstat (limited to 'src/js/components/SideBar')
-rw-r--r-- | src/js/components/SideBar/SideBarTabComments.vue | 2 | ||||
-rw-r--r-- | src/js/components/SideBar/SideBarTabConfiguration.vue | 88 | ||||
-rw-r--r-- | src/js/components/SideBar/SideBarTabOptions.vue | 45 |
3 files changed, 112 insertions, 23 deletions
diff --git a/src/js/components/SideBar/SideBarTabComments.vue b/src/js/components/SideBar/SideBarTabComments.vue index b3dedf04..9c101ae0 100644 --- a/src/js/components/SideBar/SideBarTabComments.vue +++ b/src/js/components/SideBar/SideBarTabComments.vue @@ -24,7 +24,7 @@ <div class="comments"> <CommentAdd v-if="acl.allowComment" /> <Comments v-if="!showEmptyContent" /> - <EmptyContent v-else icon="icon-comment"> + <EmptyContent v-else icon="icon-mask-md-sidebar-comments"> {{ t('polls', 'No comments') }} <template #desc> {{ t('polls', 'Be the first.') }} diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue index de60eaec..fd3ccafc 100644 --- a/src/js/components/SideBar/SideBarTabConfiguration.vue +++ b/src/js/components/SideBar/SideBarTabConfiguration.vue @@ -28,15 +28,24 @@ <ConfigBox v-if="!isOwner" :title="t('polls', 'As an admin you may edit this poll')" icon-class="icon-checkmark" /> - <ConfigBox :title="t('polls', 'Title')" icon-class="icon-sound"> + <ConfigBox :title="t('polls', 'Title')"> + <template #icon> + <SpeakerIcon /> + </template> <ConfigTitle @change="writePoll" /> </ConfigBox> - <ConfigBox :title="t('polls', 'Description')" icon-class="icon-edit"> + <ConfigBox :title="t('polls', 'Description')"> + <template #icon> + <DescriptionIcon /> + </template> <ConfigDescription @change="writePoll" /> </ConfigBox> - <ConfigBox :title="t('polls', 'Poll configurations')" icon-class="icon-category-customization"> + <ConfigBox :title="t('polls', 'Poll configurations')"> + <template #icon> + <PollConfigIcon /> + </template> <ConfigAllowComment @change="writePoll" /> <ConfigAllowMayBe @change="writePoll" /> <ConfigUseNo @change="writePoll" /> @@ -46,31 +55,48 @@ <ConfigOptionLimit @change="writePoll" /> </ConfigBox> - <ConfigBox :title="t('polls', 'Poll closing status')" :icon-class="closed ? 'icon-polls-closed' : 'icon-polls-open'"> + <ConfigBox :title="t('polls', 'Poll closing status')"> + <template #icon> + <LockedIcon v-if="closed" /> + <UnlockedIcon v-else /> + </template> <ConfigClosing @change="writePoll" /> <ConfigAutoReminder v-if="pollType === 'datePoll' || hasEpiration" @change="writePoll" /> </ConfigBox> - <ConfigBox :title="t('polls', 'Result display')" icon-class="icon-screen"> + <ConfigBox :title="t('polls', 'Result display')"> + <template #icon> + <ShowResultsIcon v-if="showResults === 'always'" /> + <HideResultsUntilClosedIcon v-if="showResults === 'closed'" /> + <ShowResultsNeverIcon v-if="showResults === 'never'" /> + </template> <ConfigShowResults @change="writePoll" /> </ConfigBox> - <ButtonDiv :icon="isPollArchived ? 'icon-history' : 'icon-category-app-bundles'" - :title="isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll')" - @click="toggleArchive()" /> - - <ButtonDiv v-if="isPollArchived" - icon="icon-delete" - class="error" - :title="t('polls', 'Delete poll')" - @click="deletePoll()" /> + <div class="delete-area"> + <VueButton @click="toggleArchive()"> + <template #icon> + <RestorePollIcon v-if="isPollArchived" /> + <ArchivePollIcon v-else /> + </template> + {{ isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll') }} + </VueButton> + + <VueButton v-if="isPollArchived" type="error" @click="deletePoll()"> + <template #icon> + <DeletePollIcon /> + </template> + {{ t('polls', 'Delete poll') }} + </VueButton> + </div> </div> </template> <script> import { mapGetters, mapState } from 'vuex' import { showError } from '@nextcloud/dialogs' +import { Button as VueButton } from '@nextcloud/vue' import moment from '@nextcloud/moment' import ConfigBox from '../Base/ConfigBox' import ConfigAllowComment from '../Configuration/ConfigAllowComment' @@ -84,12 +110,36 @@ import ConfigShowResults from '../Configuration/ConfigShowResults' import ConfigTitle from '../Configuration/ConfigTitle' import ConfigUseNo from '../Configuration/ConfigUseNo' import ConfigVoteLimit from '../Configuration/ConfigVoteLimit' + import { writePoll } from '../../mixins/writePoll' +import SpeakerIcon from 'vue-material-design-icons/Bullhorn.vue' +import DeletePollIcon from 'vue-material-design-icons/Delete.vue' +import DescriptionIcon from 'vue-material-design-icons/TextBox.vue' +import PollConfigIcon from 'vue-material-design-icons/Wrench.vue' +import LockedIcon from 'vue-material-design-icons/Lock.vue' +import UnlockedIcon from 'vue-material-design-icons/LockOpenVariant.vue' +import ShowResultsIcon from 'vue-material-design-icons/Monitor.vue' +import HideResultsUntilClosedIcon from 'vue-material-design-icons/MonitorLock.vue' +import ShowResultsNeverIcon from 'vue-material-design-icons/MonitorOff.vue' +import RestorePollIcon from 'vue-material-design-icons/Recycle.vue' +import ArchivePollIcon from 'vue-material-design-icons/Archive.vue' + export default { name: 'SideBarTabConfiguration', components: { + ArchivePollIcon, + DeletePollIcon, + DescriptionIcon, + LockedIcon, + HideResultsUntilClosedIcon, + PollConfigIcon, + RestorePollIcon, + ShowResultsIcon, + ShowResultsNeverIcon, + SpeakerIcon, + UnlockedIcon, ConfigBox, ConfigAllowComment, ConfigAllowMayBe, @@ -102,6 +152,7 @@ export default { ConfigTitle, ConfigUseNo, ConfigVoteLimit, + VueButton, }, mixins: [writePoll], @@ -113,6 +164,7 @@ export default { pollId: (state) => state.poll.id, hasEpiration: (state) => state.poll.expire, isOwner: (state) => state.poll.acl.isOwner, + showResults: (state) => state.poll.showResults, }), ...mapGetters({ @@ -143,3 +195,11 @@ export default { }, } </script> + +<style lang="scss"> +.delete-area { + display: flex; + gap: 8px; + justify-content: space-between; +} +</style> diff --git a/src/js/components/SideBar/SideBarTabOptions.vue b/src/js/components/SideBar/SideBarTabOptions.vue index 8181e117..fb09a11a 100644 --- a/src/js/components/SideBar/SideBarTabOptions.vue +++ b/src/js/components/SideBar/SideBarTabOptions.vue @@ -22,22 +22,43 @@ <template> <div class="side-bar-tab-options"> - <ConfigBox v-if="!isOwner" :title="t('polls', 'As an admin you may edit this poll')" icon-class="icon-checkmark" /> - <ConfigBox :title="t('polls', 'Allow proposals from users')" icon-class="icon-category-customization"> + <ConfigBox v-if="!isOwner" :title="t('polls', 'As an admin you may edit this poll')" /> + <ConfigBox :title="t('polls', 'Allow proposals from users')"> + <template #icon> + <AddDateIcon /> + </template> <ConfigProposals /> </ConfigBox> - <ConfigBox v-if="pollType === 'datePoll' && countOptions && !closed" :title="t('polls', 'Shift all date options')" icon-class="icon-polls-move"> + <ConfigBox v-if="pollType === 'datePoll' && countOptions && !closed" :title="t('polls', 'Shift all date options')"> + <template #icon> + <ShiftDateIcon /> + </template> <OptionsDateShift /> </ConfigBox> - <ConfigBox :title="t('polls', 'Available Options')" :icon-class="pollTypeIcon"> + <ConfigBox v-if="pollType === 'datePoll'" :title="t('polls', 'Available Options')"> + <template #icon> + <DateOptionsIcon /> + </template> + + <OptionsDate /> + + <template #actions> + <OptionsDateAdd v-if="!closed" /> + </template> + </ConfigBox> + + <ConfigBox v-if="pollType === 'textPoll'" :title="t('polls', 'Available Options')"> + <template #icon> + <TextOptionsIcon /> + </template> + + <OptionsText /> + <template #actions> - <OptionsTextAddBulk v-if="pollType === 'textPoll' && !closed" /> - <OptionsDateAdd v-if="pollType === 'datePoll' && !closed" /> + <OptionsTextAddBulk v-if="!closed" /> </template> - <OptionsDate v-if="pollType === 'datePoll'" /> - <OptionsText v-if="pollType === 'textPoll'" /> </ConfigBox> </div> </template> @@ -49,11 +70,19 @@ import OptionsDate from '../Options/OptionsDate' import OptionsDateShift from '../Options/OptionsDateShift' import OptionsText from '../Options/OptionsText' import ConfigProposals from '../Configuration/ConfigProposals' +import AddDateIcon from 'vue-material-design-icons/CalendarPlus.vue' +import DateOptionsIcon from 'vue-material-design-icons/CalendarMonth.vue' +import ShiftDateIcon from 'vue-material-design-icons/CalendarStart.vue' +import TextOptionsIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue' export default { name: 'SideBarTabOptions', components: { + AddDateIcon, + DateOptionsIcon, + ShiftDateIcon, + TextOptionsIcon, ConfigBox, ConfigProposals, OptionsDate, |