diff options
author | dartcafe <github@dartcafe.de> | 2022-03-28 19:19:53 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-03-28 19:19:53 +0300 |
commit | 8d64ec655c91a4d2aaae10bc062bb67af3cca799 (patch) | |
tree | f57d8904fdc088880b76423b7cede7ece9a9fd41 /src | |
parent | 8f426e577319f846869d5fd2d5661b19bb8a063d (diff) |
refactor ActionDelete
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
-rw-r--r-- | src/js/components/Actions/ActionDelete.vue | 40 | ||||
-rw-r--r-- | src/js/components/Comments/CommentItem.vue | 8 | ||||
-rw-r--r-- | src/js/components/Options/OptionItem.vue | 26 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteTable.vue | 24 |
4 files changed, 62 insertions, 36 deletions
diff --git a/src/js/components/Actions/ActionDelete.vue b/src/js/components/Actions/ActionDelete.vue index 52563d53..e645d138 100644 --- a/src/js/components/Actions/ActionDelete.vue +++ b/src/js/components/Actions/ActionDelete.vue @@ -22,32 +22,30 @@ <template> <div class=""> - <DeleteIcon v-if="iconMode && !deleteTimeout" :size="iconSize" @click="deleteItem()" /> - <UndoIcon v-if="iconMode && deleteTimeout" :size="iconSize" @click="cancelDelete()" /> - - <Actions v-if="!iconMode"> - <ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDelete()"> - {{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }} - </ActionButton> - <ActionButton v-else icon="icon-delete" @click="deleteItem()"> - {{ title }} - </ActionButton> - </Actions> + <VueButton type="tertiary"> + <UndoIcon v-if="deleteTimeout" + v-tooltip="countdownTitle" + :size="iconSize" + @click="cancelDelete()" /> + <DeleteIcon v-else + v-tooltip="title" + :size="iconSize" + @click="deleteItem()" /> + </VueButton> </div> </template> <script> -import { Actions, ActionButton } from '@nextcloud/vue' +import { Button as VueButton } from '@nextcloud/vue' import DeleteIcon from 'vue-material-design-icons/Delete.vue' import UndoIcon from 'vue-material-design-icons/ArrowULeftTop.vue' export default { name: 'ActionDelete', components: { - Actions, - ActionButton, DeleteIcon, UndoIcon, + VueButton, }, props: { @@ -60,10 +58,6 @@ export default { type: String, default: t('polls', 'Delete'), }, - iconMode: { - type: Boolean, - default: false, - }, iconSize: { type: Number, default: 20, @@ -78,6 +72,12 @@ export default { } }, + computed: { + countdownTitle() { + return n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', this.countdown, { countdown: this.countdown }) + }, + }, + methods: { deleteItem() { this.countDown = this.timeout @@ -117,5 +117,9 @@ export default { &.delete-icon:hover { color: var(--color-error-hover); } + &.arrow-u-left-top-icon { + /* force the undo icon always to be visible */ + visibility: visible !important; + } } </style> diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue index 732fd8ce..d5e4b099 100644 --- a/src/js/components/Comments/CommentItem.vue +++ b/src/js/components/Comments/CommentItem.vue @@ -33,7 +33,6 @@ {{ subComment.comment }} </span> <ActionDelete v-if="comment.user.userId === acl.userId || acl.isOwner" - icon-mode :title="t('polls', 'Delete comment')" @delete="deleteComment(subComment)" /> </div> @@ -107,15 +106,18 @@ export default { flex: 1 1; padding-top: 2px; - .material-design-icon.delete-icon { + .material-design-icon { // display: none; visibility: hidden; } .comment-item__subcomment { display: flex; + align-items: center; + &:hover { - .material-design-icon.delete-icon { + background: var(--color-background-hover); + .material-design-icon { visibility: visible; // display: flex; } diff --git a/src/js/components/Options/OptionItem.vue b/src/js/components/Options/OptionItem.vue index 439d34eb..de51ec15 100644 --- a/src/js/components/Options/OptionItem.vue +++ b/src/js/components/Options/OptionItem.vue @@ -22,7 +22,7 @@ <template> <Component :is="tag" class="option-item" :class="{ draggable: isDraggable, 'date-box': show === 'dateBox' }"> - <div v-if="isDraggable" class="option-item__handle icon icon-handle" /> + <DragIcon v-if="isDraggable" :class="{ draggable: isDraggable }" /> <slot name="icon" /> @@ -77,10 +77,15 @@ <script> import moment from '@nextcloud/moment' import linkifyStr from 'linkify-string' +import DragIcon from 'vue-material-design-icons/DragHorizontalVariant.vue' export default { name: 'OptionItem', + components: { + DragIcon, + }, + props: { draggable: { type: Boolean, @@ -103,6 +108,7 @@ export default { default: 'textPoll', }, }, + computed: { isDraggable() { return this.draggable @@ -210,7 +216,6 @@ export default { </script> <style lang="scss"> - .option-item { display: flex; align-items: center; @@ -220,6 +225,16 @@ export default { align-items: stretch; flex-direction: column; } + + .material-design-icon { + visibility: hidden; + } + + &:hover { + .material-design-icon { + visibility: visible; + } + } } .devider { @@ -306,13 +321,6 @@ export default { cursor: -moz-grabbing; cursor: -webkit-grabbing; } - .option-item__handle { - visibility: hidden; - } - &:hover > .option-item__handle { - visibility: visible; - } - } .option-item__rank { diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue index 34ca77dc..4982a5b5 100644 --- a/src/js/components/VoteTable/VoteTable.vue +++ b/src/js/components/VoteTable/VoteTable.vue @@ -105,12 +105,6 @@ export default { display: flex; flex: 1; - .participant { - display: flex; - align-self: stretch; - justify-content: center; - } - .participant, .vote-item { flex: 0 0 auto; height: 4.5em; @@ -123,6 +117,24 @@ export default { } } + .participant { + display: flex; + align-self: stretch; + justify-content: center; + + .material-design-icon { + // display: none; + visibility: hidden; + } + + &:hover { + background: var(--color-background-hover); + .material-design-icon { + visibility: visible; + } + } + } + .vote-table__users { display: flex; flex-direction: column; |