diff options
author | dartcafe <github@dartcafe.de> | 2022-04-02 16:24:03 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-04-02 16:24:03 +0300 |
commit | 5304c63aa4963c0d72ac6a2014c4b5c873f43927 (patch) | |
tree | 39d5eb11d8aa36ced3ed8484ed953628df282caa /src | |
parent | 91ec2cd5f9e065e7f47d30c3771ad145a5d401a0 (diff) |
replace ButtonDiv with VueButton and last icons
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
-rw-r--r-- | src/js/App.vue | 1 | ||||
-rw-r--r-- | src/js/adminSettings.js | 2 | ||||
-rw-r--r-- | src/js/assets/scss/icons-md.scss | 114 | ||||
-rw-r--r-- | src/js/assets/scss/icons.scss | 160 | ||||
-rw-r--r-- | src/js/components/Actions/ActionToggleSidebar.vue | 35 | ||||
-rw-r--r-- | src/js/components/Base/ButtonDiv.vue | 126 | ||||
-rw-r--r-- | src/js/components/Configuration/ConfigClosing.vue | 17 | ||||
-rw-r--r-- | src/js/components/Options/Confirmation.vue | 82 | ||||
-rw-r--r-- | src/js/components/Options/OptionCloneDate.vue | 12 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDate.vue | 28 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDateShift.vue | 27 | ||||
-rw-r--r-- | src/js/components/Options/OptionsText.vue | 29 | ||||
-rw-r--r-- | src/js/components/Options/OptionsTextAddBulk.vue | 12 | ||||
-rw-r--r-- | src/js/components/Poll/PollInfoLine.vue | 2 | ||||
-rw-r--r-- | src/js/components/Poll/PublicRegisterModal.vue | 24 | ||||
-rw-r--r-- | src/js/components/SideBar/SideBarTabConfiguration.vue | 51 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteColumn.vue | 28 | ||||
-rw-r--r-- | src/js/main.js | 2 | ||||
-rw-r--r-- | src/js/userSettings.js | 2 | ||||
-rw-r--r-- | src/js/views/Administration.vue | 27 |
20 files changed, 313 insertions, 468 deletions
diff --git a/src/js/App.vue b/src/js/App.vue index 45c95267..d84e5e9d 100644 --- a/src/js/App.vue +++ b/src/js/App.vue @@ -288,6 +288,7 @@ export default { .modal__buttons { display: flex; + gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; diff --git a/src/js/adminSettings.js b/src/js/adminSettings.js index cf49c0f3..5b705a58 100644 --- a/src/js/adminSettings.js +++ b/src/js/adminSettings.js @@ -27,7 +27,6 @@ import appSettings from './store/modules/appSettings' import { translate, translatePlural } from '@nextcloud/l10n' import AdminSettingsPage from './views/AdminSettingsPage' -import ButtonDiv from './components/Base/ButtonDiv' // /* eslint-disable-next-line camelcase, no-undef */ // __webpack_nonce__ = btoa(getRequestToken()) @@ -40,7 +39,6 @@ Vue.prototype.n = translatePlural Vue.config.debug = process.env.NODE_ENV !== 'production' Vue.config.devTools = process.env.NODE_ENV !== 'production' // eslint-disable-next-line vue/match-component-file-name -Vue.component('ButtonDiv', ButtonDiv) Vue.use(Vuex) diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss index ee8f8fe0..b53496c1 100644 --- a/src/js/assets/scss/icons-md.scss +++ b/src/js/assets/scss/icons-md.scss @@ -1,4 +1,18 @@ // material design icons +@mixin svg-icon($url) { + background-image: $url; +} + +// masked svg background icon +@mixin masked-icon($url, $color: var(--icon-md-color-default)) { + -webkit-mask-image: $url; + mask-image: $url; + mask-repeat: no-repeat; + mask-position: center; + mask-size: var(--icon-size); + background-color: $color; +} + :root { --icon-md-account-check: url('../icons/material-design/account-check.svg'); --icon-md-account-group: url('../icons/material-design/account-group.svg'); @@ -59,13 +73,6 @@ background-color: #000; } -// .material-design-icon { -// display: flex; -// align-self: center; -// align-items: center; -// justify-content: center; -// } - .theme--dark { &[class*='icon-mask-md-'] { background-color: #000 !important; @@ -75,76 +82,63 @@ } } -@mixin svg-icon($url) { - background-image: $url; -} - -// masked svg background icon -@mixin masked-icon($url, $color: var(--icon-md-color-default)) { - -webkit-mask-image: $url; - mask-image: $url; - mask-repeat: no-repeat; - mask-position: center; - mask-size: var(--icon-size); - background-color: $color; -} - - // material design icons // just svg background icon .icon-svg-md-email { @include svg-icon(var(--icon-md-email)); } .icon-svg-md-share { @include svg-icon(var(--icon-md-share-variant)); } .icon-svg-md-link { @include svg-icon(var(--icon-md-link-variant)); } -.icon-mask-md-navigation-relevant { @include masked-icon(var(--icon-md-exclamation-thick)); } -.icon-mask-md-navigation-my { @include masked-icon(var(--icon-md-crown)); } -.icon-mask-md-owner { @include masked-icon(var(--icon-md-crown)); } -.icon-mask-md-navigation-private { @include masked-icon(var(--icon-md-key)); } -.icon-mask-md-private-poll { @include masked-icon(var(--icon-md-key)); } -.icon-mask-md-navigation-open { @include masked-icon(var(--icon-md-earth)); } -.icon-mask-md-open-poll { @include masked-icon(var(--icon-md-earth)); } -.icon-mask-md-navigation-participated { @include masked-icon(var(--icon-md-account-check)); } -.icon-mask-md-navigation-all { @include masked-icon(var(--icon-md-poll)); } -.icon-mask-md-navigation-closed, .icon-mask-md-closed-poll { @include masked-icon(var(--icon-md-lock)); } -.icon-mask-md-navigation-archived { @include masked-icon(var(--icon-md-archive)); } -.icon-mask-md-archived-poll { @include masked-icon(var(--icon-md-archive)); } -.icon-mask-md-archive-poll { @include masked-icon(var(--icon-md-archive)); } -.icon-mask-md-navigation-combo { @include masked-icon(var(--icon-md-vector-combine)); } -.icon-mask-md-navigation-administration { @include masked-icon(var(--icon-md-cog)); } -.icon-mask-md-navigation-personal-settings { @include masked-icon(var(--icon-md-account-cog)); } -.icon-mask-md-sidebar-options { @include masked-icon(var(--icon-md-format-list-checks)); } -.icon-mask-md-email { @include masked-icon(var(--icon-md-email)); } +// mask icons .icon-mask-md-admin { @include masked-icon(var(--icon-md-shield-crown-outline)); } .icon-mask-md-admin-remove { @include masked-icon(var(--icon-md-shield-crown-outline-strike-thru)); } -.icon-mask-md-sidebar-configuration { @include masked-icon(var(--icon-md-wrench)); } -.icon-mask-md-sidebar-comments { @include masked-icon(var(--icon-md-comment-processing)); } -.icon-mask-md-sidebar-share { @include masked-icon(var(--icon-md-share-variant)); } -.icon-mask-md-date-options { @include masked-icon(var(--icon-md-calendar-month)); } -.icon-mask-md-date-poll { @include masked-icon(var(--icon-md-calendar-blank)); } .icon-mask-md-anonymous-poll { @include masked-icon(var(--icon-md-incognito)); } -.icon-mask-md-text-poll { @include masked-icon(var(--icon-md-format-list-bulleted-square)); } +.icon-mask-md-archive-poll { @include masked-icon(var(--icon-md-archive)); } +.icon-mask-md-archived-poll { @include masked-icon(var(--icon-md-archive)); } +.icon-mask-md-clippy { @include masked-icon(var(--icon-md-clipboard-arrow-left-outline)); } .icon-mask-md-clone-poll { @include masked-icon(var(--icon-md-content-copy)); } -.icon-mask-md-restore-poll { @include masked-icon(var(--icon-md-recycle)); } +.icon-mask-md-closed-poll { @include masked-icon(var(--icon-md-lock)); } +.icon-mask-md-creation { @include masked-icon(var(--icon-md-clock-outline)); } +.icon-mask-md-date-options { @include masked-icon(var(--icon-md-calendar-month)); } +.icon-mask-md-date-poll { @include masked-icon(var(--icon-md-calendar-blank)); } .icon-mask-md-delete-poll { @include masked-icon(var(--icon-md-delete)); } +.icon-mask-md-edit-email-address { @include masked-icon(var(--icon-md-email-edit)); } +.icon-mask-md-email { @include masked-icon(var(--icon-md-email)); } .icon-mask-md-expiration { @include masked-icon(var(--icon-md-calendar-end)); } -.icon-mask-md-creation { @include masked-icon(var(--icon-md-clock-outline)); } -.icon-mask-md-clippy { @include masked-icon(var(--icon-md-clipboard-arrow-left-outline)); } -.icon-mask-md-reset-votes { @include masked-icon(var(--icon-md-undo)); } -.icon-mask-md-subscribed { @include masked-icon(var(--icon-md-bell)); } -.icon-mask-md-unsubscribed { @include masked-icon(var(--icon-md-bell-off)); } -.icon-mask-md-participants { @include masked-icon(var(--icon-md-account-group)); } -.icon-mask-md-show-results { @include masked-icon(var(--icon-md-monitor)); } .icon-mask-md-hide-results-until-closed { @include masked-icon(var(--icon-md-monitor-lock)); } -.icon-mask-md-show-results-never { @include masked-icon(var(--icon-md-monitor-off)); } +.icon-mask-md-navigation-administration { @include masked-icon(var(--icon-md-cog)); } +.icon-mask-md-navigation-all { @include masked-icon(var(--icon-md-poll)); } +.icon-mask-md-navigation-archived { @include masked-icon(var(--icon-md-archive)); } +.icon-mask-md-navigation-closed { @include masked-icon(var(--icon-md-lock)); } +.icon-mask-md-navigation-combo { @include masked-icon(var(--icon-md-vector-combine)); } +.icon-mask-md-navigation-my { @include masked-icon(var(--icon-md-crown)); } +.icon-mask-md-navigation-open { @include masked-icon(var(--icon-md-earth)); } +.icon-mask-md-navigation-participated { @include masked-icon(var(--icon-md-account-check)); } +.icon-mask-md-navigation-personal-settings { @include masked-icon(var(--icon-md-account-cog)); } +.icon-mask-md-navigation-private { @include masked-icon(var(--icon-md-key)); } +.icon-mask-md-navigation-relevant { @include masked-icon(var(--icon-md-exclamation-thick)); } +.icon-mask-md-open-poll { @include masked-icon(var(--icon-md-earth)); } .icon-mask-md-options { @include masked-icon(var(--icon-md-format-list-checkbox)); } -.icon-mask-md-timezone { @include masked-icon(var(--icon-md-map-clock-outline)); } +.icon-mask-md-options-order-date { @include masked-icon(var(--icon-md-sort-clock-ascending-outline)); } +.icon-mask-md-options-order-original { @include masked-icon(var(--icon-md-format-list-bulleted-square)); } +.icon-mask-md-options-order-ranked { @include masked-icon(var(--icon-md-format-list-numbered)); } +.icon-mask-md-owner { @include masked-icon(var(--icon-md-crown)); } +.icon-mask-md-participants { @include masked-icon(var(--icon-md-account-group)); } +.icon-mask-md-private-poll { @include masked-icon(var(--icon-md-key)); } .icon-mask-md-proposals-allowed { @include masked-icon(var(--icon-md-offer)); } .icon-mask-md-proposals { @include masked-icon(var(--icon-md-offer)); } -.icon-mask-md-edit-email-address { @include masked-icon(var(--icon-md-email-edit)); } .icon-mask-md-send-link-per-email { @include masked-icon(var(--icon-md-link-variant)); } -.icon-mask-md-options-order-ranked { @include masked-icon(var(--icon-md-format-list-numbered)); } -.icon-mask-md-options-order-original { @include masked-icon(var(--icon-md-format-list-bulleted-square)); } -.icon-mask-md-options-order-date { @include masked-icon(var(--icon-md-sort-clock-ascending-outline)); } +.icon-mask-md-show-results { @include masked-icon(var(--icon-md-monitor)); } +.icon-mask-md-show-results-never { @include masked-icon(var(--icon-md-monitor-off)); } +.icon-mask-md-sidebar-comments { @include masked-icon(var(--icon-md-comment-processing)); } +.icon-mask-md-sidebar-configuration { @include masked-icon(var(--icon-md-wrench)); } +.icon-mask-md-sidebar-options { @include masked-icon(var(--icon-md-format-list-checks)); } +.icon-mask-md-sidebar-share { @include masked-icon(var(--icon-md-share-variant)); } +.icon-mask-md-subscribed { @include masked-icon(var(--icon-md-bell)); } +.icon-mask-md-reset-votes { @include masked-icon(var(--icon-md-undo)); } +.icon-mask-md-restore-poll { @include masked-icon(var(--icon-md-recycle)); } +.icon-mask-md-text-poll { @include masked-icon(var(--icon-md-format-list-bulleted-square)); } +.icon-mask-md-timezone { @include masked-icon(var(--icon-md-map-clock-outline)); } +.icon-mask-md-unsubscribed { @include masked-icon(var(--icon-md-bell-off)); } .icon-mask-md-yes-vote, .icon-mask-md-yes-votes { diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss index a7e8be80..512a9073 100644 --- a/src/js/assets/scss/icons.scss +++ b/src/js/assets/scss/icons.scss @@ -3,49 +3,49 @@ --polls-vote-columns: 1; --icon-circles: url('../icons/circles.svg'); --icon-circles--fff: url('../icons/circles-fff.svg'); - --icon-clock: url('../icons/clock.svg'); - --icon-clock--fff: url('../icons/clock-fff.svg'); --icon-polls: url('../icons/polls.svg'); --icon-polls--fff: url('../icons/polls-fff.svg'); - --icon-polls-anonymous: url('../icons/anonymous.svg'); - --icon-polls-anonymous--fff: url('../icons/anonymous-fff.svg'); - --icon-polls-back: url('../icons/back.svg'); - --icon-polls-back--fff: url('../icons/back-fff.svg'); - --icon-polls-clone: url('../icons/clone.svg'); - --icon-polls-clone--fff: url('../icons/clone-fff.svg'); - --icon-polls-closed: url('../icons/closed.svg'); - --icon-polls-closed--fff: url('../icons/closed-fff.svg'); - --icon-polls-confirmed: url('../icons/confirmed.svg'); - --icon-polls-confirmed--fff: url('../icons/confirmed-fff.svg'); - --icon-polls-handle: url('../icons/handle.svg'); - --icon-polls-handle--fff: url('../icons/handle-fff.svg'); - --icon-polls-private-poll: url('../icons/invisible.svg'); - --icon-polls-private-poll--fff: url('../icons/invisible-fff.svg'); - --icon-polls-private: url('../icons/invisible.svg'); - --icon-polls-private--fff: url('../icons/invisible-fff.svg'); - --icon-polls-list-view: url('../icons/list-view.svg'); - --icon-polls-list-view-fff: url('../icons/list-view-fff.svg'); - --icon-polls-loading: url('../icons/loading-small.gif'); - --icon-polls-mail: url('../icons/mail.svg'); - --icon-polls-mail--fff: url('../icons/mail-fff.svg'); --icon-polls-maybe: url('../icons/maybe-vote.svg'); - --icon-polls-move: url('../icons/move.svg'); - --icon-polls-move--fff: url('../icons/move-fff.svg'); - --icon-polls-minus: url('../icons/minus.svg'); --icon-polls-no: url('../icons/no-vote.svg'); - --icon-polls-open: url('../icons/open.svg'); - --icon-polls-open--fff: url('../icons/open-fff.svg'); - --icon-polls-open-poll: url('../icons/visible.svg'); - --icon-polls-open-poll--fff: url('../icons/visible-fff.svg'); - --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg'); - --icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg'); - --icon-polls-table-view: url('../icons/table-view.svg'); - --icon-polls-table-view-fff: url('../icons/table-view-fff.svg'); - --icon-polls-visible: url('../icons/visible.svg'); - --icon-polls-visible--fff: url('../icons/visible-fff.svg'); - --icon-polls-unconfirmed: url('../icons/unconfirmed.svg'); - --icon-polls-unconfirmed--fff: url('../icons/unconfirmed-fff.svg'); --icon-polls-yes: url('../icons/yes-vote.svg'); + // --icon-clock: url('../icons/clock.svg'); + // --icon-clock--fff: url('../icons/clock-fff.svg'); + // --icon-polls-anonymous: url('../icons/anonymous.svg'); + // --icon-polls-anonymous--fff: url('../icons/anonymous-fff.svg'); + // --icon-polls-back: url('../icons/back.svg'); + // --icon-polls-back--fff: url('../icons/back-fff.svg'); + // --icon-polls-clone: url('../icons/clone.svg'); + // --icon-polls-clone--fff: url('../icons/clone-fff.svg'); + // --icon-polls-closed: url('../icons/closed.svg'); + // --icon-polls-closed--fff: url('../icons/closed-fff.svg'); + // --icon-polls-confirmed: url('../icons/confirmed.svg'); + // --icon-polls-confirmed--fff: url('../icons/confirmed-fff.svg'); + // --icon-polls-handle: url('../icons/handle.svg'); + // --icon-polls-handle--fff: url('../icons/handle-fff.svg'); + // --icon-polls-private-poll: url('../icons/invisible.svg'); + // --icon-polls-private-poll--fff: url('../icons/invisible-fff.svg'); + // --icon-polls-private: url('../icons/invisible.svg'); + // --icon-polls-private--fff: url('../icons/invisible-fff.svg'); + // --icon-polls-list-view: url('../icons/list-view.svg'); + // --icon-polls-list-view-fff: url('../icons/list-view-fff.svg'); + // --icon-polls-loading: url('../icons/loading-small.gif'); + // --icon-polls-mail: url('../icons/mail.svg'); + // --icon-polls-mail--fff: url('../icons/mail-fff.svg'); + // --icon-polls-move: url('../icons/move.svg'); + // --icon-polls-move--fff: url('../icons/move-fff.svg'); + // --icon-polls-minus: url('../icons/minus.svg'); + // --icon-polls-open: url('../icons/open.svg'); + // --icon-polls-open--fff: url('../icons/open-fff.svg'); + // --icon-polls-open-poll: url('../icons/visible.svg'); + // --icon-polls-open-poll--fff: url('../icons/visible-fff.svg'); + // --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg'); + // --icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg'); + // --icon-polls-table-view: url('../icons/table-view.svg'); + // --icon-polls-table-view-fff: url('../icons/table-view-fff.svg'); + // --icon-polls-visible: url('../icons/visible.svg'); + // --icon-polls-visible--fff: url('../icons/visible-fff.svg'); + // --icon-polls-unconfirmed: url('../icons/unconfirmed.svg'); + // --icon-polls-unconfirmed--fff: url('../icons/unconfirmed-fff.svg'); // filters to colorize background svg from black // generated with https://codepen.io/jsm91/embed/ZEEawyZ?height=600&default-tab=result&embed-version=2 @@ -55,58 +55,50 @@ } .icon-circles { background-image: var(--icon-circles); } -.icon-clock { background-image: var(--icon-clock); } -.icon-clock-fff { background-image: var(--icon-clock--fff); } -.icon-handle { background-image: var(--icon-polls-handle); } -.icon-list-view { background-image: var(--icon-polls-list-view); } .icon-polls { background-image: var(--icon-polls); } -.icon-polls-anonymous { background-image: var(--icon-polls-anonymous); } -.icon-polls-back { background-image: var(--icon-polls-back); } -.icon-polls-clone { background-image: var(--icon-polls-clone); } -.icon-polls-closed { background-image: var(--icon-polls-closed); } -.icon-polls-closed-fff { background-image: var(--icon-polls-closed--fff); } -.icon-polls-confirmed { background-image: var(--icon-polls-confirmed); } -.icon-polls-private-poll { background-image: var(--icon-polls-private-poll); } -.icon-polls-private { background-image: var(--icon-polls-private-poll); } -.icon-polls-mail { background-image: var(--icon-polls-mail); } .icon-polls-maybe { background-image: var(--icon-polls-maybe); } -.icon-polls-minus { background-image: var(--icon-polls-minus); } -.icon-polls-move { background-image: var(--icon-polls-move); } .icon-polls-no { background-image: var(--icon-polls-no); } -.icon-polls-open { background-image: var(--icon-polls-open); } -.icon-polls-open-poll { background-image: var(--icon-polls-open-poll); } -.icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle); } -.icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed); } -.icon-table-view { background-image: var(--icon-polls-table-view); } -.icon-polls-visible { background-image: var(--icon-polls-open-poll); } .icon-polls-yes { background-image: var(--icon-polls-yes); } +// .icon-clock { background-image: var(--icon-clock); } +// .icon-clock-fff { background-image: var(--icon-clock--fff); } +// .icon-handle { background-image: var(--icon-polls-handle); } +// .icon-list-view { background-image: var(--icon-polls-list-view); } +// .icon-polls-anonymous { background-image: var(--icon-polls-anonymous); } +// .icon-polls-back { background-image: var(--icon-polls-back); } +// .icon-polls-clone { background-image: var(--icon-polls-clone); } +// .icon-polls-closed { background-image: var(--icon-polls-closed); } +// .icon-polls-closed-fff { background-image: var(--icon-polls-closed--fff); } +// .icon-polls-confirmed { background-image: var(--icon-polls-confirmed); } +// .icon-polls-private-poll { background-image: var(--icon-polls-private-poll); } +// .icon-polls-private { background-image: var(--icon-polls-private-poll); } +// .icon-polls-mail { background-image: var(--icon-polls-mail); } +// .icon-polls-minus { background-image: var(--icon-polls-minus); } +// .icon-polls-move { background-image: var(--icon-polls-move); } +// .icon-polls-open { background-image: var(--icon-polls-open); } +// .icon-polls-open-poll { background-image: var(--icon-polls-open-poll); } +// .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle); } +// .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed); } +// .icon-table-view { background-image: var(--icon-polls-table-view); } +// .icon-polls-visible { background-image: var(--icon-polls-open-poll); } .theme--dark { - .icon-clock { background-image: var(--icon-clock--fff); } .icon-circles { background-image: var(--icon-circles--fff); } - .icon-handle { background-image: var(--icon-polls-handle--fff); } - .icon-list-view { background-image: var(--icon-polls-list-view-fff); } .icon-polls { background-image: var(--icon-polls--fff); } - .icon-polls-anonymous { background-image: var(--icon-polls-anonymous--fff); } - .icon-polls-back { background-image: var(--icon-polls-back--fff); } - .icon-polls-clone { background-image: var(--icon-polls-clone--fff); } - .icon-polls-closed { background-image: var(--icon-polls-closed--fff); } - .icon-polls-confirmed { background-image: var(--icon-polls-confirmed--fff); } - .icon-polls-private { background-image: var(--icon-polls-private-poll--fff); } - .icon-polls-private-poll { background-image: var(--icon-polls-private-poll--fff); } - .icon-polls-mail { background-image: var(--icon-polls-mail--fff); } - .icon-polls-move { background-image: var(--icon-polls-move--fff); } - .icon-polls-open { background-image: var(--icon-polls-open--fff); } - .icon-polls-open-poll { background-image: var(--icon-polls-open-poll--fff); } - .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle--fff); } - .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed--fff); } - .icon-table-view { background-image: var(--icon-polls-table-view-fff); } - - [class^='icon-md'] { - background-color: #fff; - &.light { - background-color: #000; - } - } - + // .icon-clock { background-image: var(--icon-clock--fff); } + // .icon-handle { background-image: var(--icon-polls-handle--fff); } + // .icon-list-view { background-image: var(--icon-polls-list-view-fff); } + // .icon-polls-anonymous { background-image: var(--icon-polls-anonymous--fff); } + // .icon-polls-back { background-image: var(--icon-polls-back--fff); } + // .icon-polls-clone { background-image: var(--icon-polls-clone--fff); } + // .icon-polls-closed { background-image: var(--icon-polls-closed--fff); } + // .icon-polls-confirmed { background-image: var(--icon-polls-confirmed--fff); } + // .icon-polls-private { background-image: var(--icon-polls-private-poll--fff); } + // .icon-polls-private-poll { background-image: var(--icon-polls-private-poll--fff); } + // .icon-polls-mail { background-image: var(--icon-polls-mail--fff); } + // .icon-polls-move { background-image: var(--icon-polls-move--fff); } + // .icon-polls-open { background-image: var(--icon-polls-open--fff); } + // .icon-polls-open-poll { background-image: var(--icon-polls-open-poll--fff); } + // .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle--fff); } + // .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed--fff); } + // .icon-table-view { background-image: var(--icon-polls-table-view-fff); } } diff --git a/src/js/components/Actions/ActionToggleSidebar.vue b/src/js/components/Actions/ActionToggleSidebar.vue index 806a33fd..766754f5 100644 --- a/src/js/components/Actions/ActionToggleSidebar.vue +++ b/src/js/components/Actions/ActionToggleSidebar.vue @@ -21,50 +21,35 @@ --> <template> - <div class="action change-view"> - <ButtonDiv v-if="buttonMode" - :title="caption" - simple - :icon="icon" - @click="clickAction()" /> - <Actions v-else> - <ActionButton :icon="icon" @click="clickAction()"> - {{ caption }} - </ActionButton> - </Actions> + <div class="action toggle-sidebar"> + <VueButton v-tooltip="caption" + type="tertiary" + @click="clickAction()"> + <SidebarIcon /> + </VueButton> </div> </template> <script> -import { Actions, ActionButton } from '@nextcloud/vue' -import ButtonDiv from '../Base/ButtonDiv' +import { Button as VueButton } from '@nextcloud/vue' import { emit } from '@nextcloud/event-bus' +import SidebarIcon from 'vue-material-design-icons/TextAccount.vue' // view-comfy-outline export default { name: 'ActionToggleSidebar', components: { - Actions, - ActionButton, - ButtonDiv, - }, - - props: { - buttonMode: { - type: Boolean, - default: false, - }, + SidebarIcon, + VueButton, }, data() { return { caption: t('polls', 'Toggle Sidebar'), - icon: 'icon-menu-sidebar', } }, methods: { - clickAction() { emit('polls:sidebar:toggle') }, diff --git a/src/js/components/Base/ButtonDiv.vue b/src/js/components/Base/ButtonDiv.vue deleted file mode 100644 index 72e6d032..00000000 --- a/src/js/components/Base/ButtonDiv.vue +++ /dev/null @@ -1,126 +0,0 @@ -<!-- - - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> - - - - @author René Gieling <github@dartcafe.de> - - - - @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 lang="html"> - <Component :is="tag" :class="buttonClass" @click="$emit('click')"> - {{ title }} - </Component> -</template> - -<script> -export default { - name: 'ButtonDiv', - props: { - title: { - type: String, - default: '', - }, - icon: { - type: String, - default: '', - }, - primary: { - type: Boolean, - default: false, - }, - simple: { - type: Boolean, - default: false, - }, - tag: { - type: String, - default: 'button', - }, - submit: { - type: Boolean, - default: false, - }, - }, - - computed: { - buttonStyle() { - if (this.submit) { - return 'submit' - } - - if (this.simple) { - return 'simple' - } - - return 'button' - }, - - buttonClass() { - return [ - this.buttonStyle, - this.submit ? 'icon-confirm' : this.icon, - { - withIcon: (this.icon && !this.submit), - primary: this.primary, - }, - ] - }, - - }, -} -</script> - -<style lang="scss" scoped> - .withIcon { - padding-left: 34px; - background-position: 12px center; - } - - .button { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - } - - .simple { - border: none; - background-color: transparent; - border-radius: 0; - opacity: 0.7; - text-align: left; - cursor: pointer; - &.withIcon { - padding-left: 32px; - background-position: 0 center; - } - &:hover { - background-color: var(--color-background-dark) - } - } - - .submit { - flex: 0; - width: 30px; - max-width: 30px; - min-width: 30px; - background-color: transparent; - border: none; - opacity: 0.3; - cursor: pointer; - } - -</style> diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue index 1edf5224..925fbbeb 100644 --- a/src/js/components/Configuration/ConfigClosing.vue +++ b/src/js/components/Configuration/ConfigClosing.vue @@ -22,9 +22,13 @@ <template> <div> - <ButtonDiv :icon="closed ? 'icon-polls-open' : 'icon-polls-closed'" - :title="closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll')" - @click="toggleClosed()" /> + <VueButton @click="toggleClosed()"> + <template #icon> + <OpenPollIcon v-if="closed" /> + <ClosePollIcon v-else /> + </template> + {{ closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll') }} + </VueButton> <CheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch"> {{ t('polls', 'Poll closing date') }} </CheckboxRadioSwitch> @@ -35,14 +39,19 @@ <script> import { mapState, mapGetters } from 'vuex' import moment from '@nextcloud/moment' -import { DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue' +import { Button as VueButton, DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue' +import OpenPollIcon from 'vue-material-design-icons/LockOpenVariant.vue' +import ClosePollIcon from 'vue-material-design-icons/Lock.vue' export default { name: 'ConfigClosing', components: { + OpenPollIcon, + ClosePollIcon, CheckboxRadioSwitch, DatetimePicker, + VueButton, }, data() { diff --git a/src/js/components/Options/Confirmation.vue b/src/js/components/Options/Confirmation.vue deleted file mode 100644 index 971a6573..00000000 --- a/src/js/components/Options/Confirmation.vue +++ /dev/null @@ -1,82 +0,0 @@ -<!-- - - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> - - - - @author René Gieling <github@dartcafe.de> - - - - @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="confirmation" :class=" { 'icon-polls-confirmed': isConfirmed }"> - <div class="confirmation--text"> - {{ confirmations }} - </div> - </div> -</template> - -<script> -import { mapGetters } from 'vuex' - -export default { - name: 'Confirmation', - - props: { - option: { - type: Object, - default: undefined, - }, - }, - - computed: { - ...mapGetters({ - isClosed: 'poll/isClosed', - }), - - isConfirmed() { - return this.option.confirmed && this.isClosed - }, - - confirmations() { - if (this.isConfirmed) { - return t('polls', 'Confirmed') - } - return ' ' - - }, - }, -} - -</script> - -<style lang="scss"> - -.confirmation { - align-items: center; - justify-content: center; - background-repeat: no-repeat; - background-position: center; - background-size: 21px; - font-size: 0; - align-self: stretch; - min-width: 24px; -} - -.confirmation--text { - text-align: center; -} - -</style> diff --git a/src/js/components/Options/OptionCloneDate.vue b/src/js/components/Options/OptionCloneDate.vue index 795d2295..36311627 100644 --- a/src/js/components/Options/OptionCloneDate.vue +++ b/src/js/components/Options/OptionCloneDate.vue @@ -38,8 +38,13 @@ </div> <div class="modal__buttons"> - <ButtonDiv :title="t('polls', 'Cancel')" @click="$emit('close')" /> - <ButtonDiv :primary="true" :title="t('polls', 'OK')" @click="createSequence" /> + <VueButton @click="$emit('close')"> + {{ t('polls', 'Cancel') }} + </VueButton> + + <VueButton type="primary" @click="createSequence()"> + {{ t('polls', 'OK') }} + </VueButton> </div> </div> </template> @@ -47,7 +52,7 @@ <script> import moment from '@nextcloud/moment' -import { Multiselect } from '@nextcloud/vue' +import { Button as VueButton, Multiselect } from '@nextcloud/vue' import { dateUnits } from '../../mixins/dateMixins' export default { @@ -55,6 +60,7 @@ export default { components: { Multiselect, + VueButton, }, mixins: [dateUnits], diff --git a/src/js/components/Options/OptionsDate.vue b/src/js/components/Options/OptionsDate.vue index 37aec4f7..4a213813 100644 --- a/src/js/components/Options/OptionsDate.vue +++ b/src/js/components/Options/OptionsDate.vue @@ -36,23 +36,28 @@ :option="option" class="owner" /> </template> - <template #actions> - <ActionDelete v-if="acl.allowEdit" + <template v-if="acl.allowEdit" #actions> + <ActionDelete v-if="!closed" :title="t('polls', 'Delete option')" @delete="removeOption(option)" /> - <Actions v-if="acl.allowEdit" class="action"> + + <Actions v-if="!closed" class="action"> <ActionButton v-if="!closed" @click="cloneOptionModal(option)"> <template #icon> <CloneDateIcon /> </template> {{ t('polls', 'Clone option') }} </ActionButton> - <ActionButton v-if="closed" - :icon="option.confirmed ? 'icon-polls-confirmed' : 'icon-polls-unconfirmed'" - @click="confirmOption(option)"> - {{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }} - </ActionButton> </Actions> + <VueButton v-if="closed" + v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')" + type="tertiary" + @click="confirmOption(option)"> + <template #icon> + <UnconfirmIcon v-if="option.confirmed" /> + <ConfirmIcon v-else /> + </template> + </VueButton> </template> </OptionItem> </transition-group> @@ -72,19 +77,23 @@ <script> import { mapGetters, mapState } from 'vuex' -import { Actions, ActionButton, EmptyContent, Modal } from '@nextcloud/vue' +import { Actions, ActionButton, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue' import ActionDelete from '../Actions/ActionDelete' import OptionCloneDate from './OptionCloneDate' import OptionItem from './OptionItem' import { confirmOption, removeOption } from '../../mixins/optionMixins' import { dateUnits } from '../../mixins/dateMixins' import CloneDateIcon from 'vue-material-design-icons/CalendarMultiple.vue' +import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue' +import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue' export default { name: 'OptionsDate', components: { CloneDateIcon, + ConfirmIcon, + UnconfirmIcon, Actions, ActionButton, ActionDelete, @@ -92,6 +101,7 @@ export default { Modal, OptionCloneDate, OptionItem, + VueButton, OptionItemOwner: () => import('./OptionItemOwner'), }, diff --git a/src/js/components/Options/OptionsDateShift.vue b/src/js/components/Options/OptionsDateShift.vue index 6bf6ccf9..58270686 100644 --- a/src/js/components/Options/OptionsDateShift.vue +++ b/src/js/components/Options/OptionsDateShift.vue @@ -25,7 +25,7 @@ <div v-if="proposalsExist"> {{ t('polls', 'Shifting dates is disabled to prevent shifting of other user\'s proposals.') }} </div> - <div v-else class="selectUnit"> + <div v-else class="select-unit"> <InputDiv v-model="shift.step" use-num-modifiers @add="shift.step += 1" @@ -34,8 +34,11 @@ :options="dateUnits" label="name" track-by="value" /> - <ButtonDiv submit - @click="shiftDates(shift)" /> + <VueButton class="submit" + type="tertiary" + @click="shiftDates(shift)"> + <SubmitIcon /> + </VueButton> </div> </div> </template> @@ -44,15 +47,18 @@ import { mapState, mapGetters } from 'vuex' import InputDiv from '../Base/InputDiv' -import { Multiselect } from '@nextcloud/vue' +import { Button as VueButton, Multiselect } from '@nextcloud/vue' import { dateUnits } from '../../mixins/dateMixins' +import SubmitIcon from 'vue-material-design-icons/ArrowRight.vue' export default { name: 'OptionsDateShift', components: { + SubmitIcon, InputDiv, Multiselect, + VueButton, }, mixins: [dateUnits], @@ -86,7 +92,7 @@ export default { </script> <style lang="scss"> -.selectUnit { +.select-unit { display: flex; flex-wrap: wrap; align-items: center; @@ -96,6 +102,15 @@ export default { min-width: 75px; flex: 1; } -} + .button-vue.button-vue--vue-tertiary { + padding: 0; + min-width: 0; + } + + .button-vue__text, + .button-vue--text-only .button-vue__text { + margin: 0; + } +} </style> diff --git a/src/js/components/Options/OptionsText.vue b/src/js/components/Options/OptionsText.vue index d0b62647..b9763392 100644 --- a/src/js/components/Options/OptionsText.vue +++ b/src/js/components/Options/OptionsText.vue @@ -36,17 +36,19 @@ :option="option" class="owner" /> </template> - <template #actions> - <ActionDelete v-if="acl.allowEdit" + <template v-if="acl.allowEdit" #actions> + <ActionDelete v-if="!closed" :title="t('polls', 'Delete option')" @delete="removeOption(option)" /> - <Actions v-if="acl.allowEdit" class="action"> - <ActionButton v-if="closed" - :icon="option.confirmed ? 'icon-polls-yes' : 'icon-checkmark'" - @click="confirmOption(option)"> - {{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }} - </ActionButton> - </Actions> + <VueButton v-if="closed" + v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')" + type="tertiary" + @click="confirmOption(option)"> + <template #icon> + <UnconfirmIcon v-if="option.confirmed" /> + <ConfirmIcon v-else /> + </template> + </VueButton> </template> </OptionItem> </transition-group> @@ -63,24 +65,27 @@ <script> import { mapGetters, mapState } from 'vuex' -import { Actions, ActionButton, EmptyContent } from '@nextcloud/vue' +import { Button as VueButton, EmptyContent } from '@nextcloud/vue' import draggable from 'vuedraggable' import ActionDelete from '../Actions/ActionDelete' import OptionItem from './OptionItem' import OptionItemOwner from '../Options/OptionItemOwner' import { confirmOption, removeOption } from '../../mixins/optionMixins' +import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue' +import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue' export default { name: 'OptionsText', components: { - Actions, - ActionButton, + ConfirmIcon, + UnconfirmIcon, ActionDelete, EmptyContent, draggable, OptionItem, OptionItemOwner, + VueButton, OptionsTextAdd: () => import('./OptionsTextAdd'), }, diff --git a/src/js/components/Options/OptionsTextAddBulk.vue b/src/js/components/Options/OptionsTextAddBulk.vue index 4a3c3963..6d652634 100644 --- a/src/js/components/Options/OptionsTextAddBulk.vue +++ b/src/js/components/Options/OptionsTextAddBulk.vue @@ -42,8 +42,13 @@ :placeholder="placeholder" /> <div class="modal__buttons"> - <ButtonDiv :title="t('polls', 'Close')" @click="showModal = false" /> - <ButtonDiv :primary="true" :title="t('polls', 'Add options')" @click="addOptionsList()" /> + <VueButton @click="showModal = false"> + {{ t('polls', 'Close') }} + </VueButton> + + <VueButton type="primary" @click="addOptionsList()"> + {{ t('polls', 'OK') }} + </VueButton> </div> </div> </Modal> @@ -52,7 +57,7 @@ <script> import { showError, showSuccess } from '@nextcloud/dialogs' -import { Actions, ActionButton, Modal } from '@nextcloud/vue' +import { Actions, ActionButton, Button as VueButton, Modal } from '@nextcloud/vue' import PasteIcon from 'vue-material-design-icons/ClipboardTextMultiple.vue' export default { @@ -63,6 +68,7 @@ export default { Actions, ActionButton, Modal, + VueButton, }, props: { diff --git a/src/js/components/Poll/PollInfoLine.vue b/src/js/components/Poll/PollInfoLine.vue index 2e19fff4..6f4352b2 100644 --- a/src/js/components/Poll/PollInfoLine.vue +++ b/src/js/components/Poll/PollInfoLine.vue @@ -101,7 +101,7 @@ export default { subTexts.push({ id: 'closed', text: this.timeExpirationRelative, - icon: 'icon-polls-closed', + icon: 'icon-mask-md-closed-poll', class: 'closed', }) return subTexts diff --git a/src/js/components/Poll/PublicRegisterModal.vue b/src/js/components/Poll/PublicRegisterModal.vue index 87d84ad4..17663d4d 100644 --- a/src/js/components/Poll/PublicRegisterModal.vue +++ b/src/js/components/Poll/PublicRegisterModal.vue @@ -61,18 +61,21 @@ <RichText :text="privacyRich.subject" :arguments="privacyRich.parameters" /> </div> <div class="modal__buttons"> - <div class="modal__buttons__spacer" /> - <ButtonDiv :title="t('polls', 'Cancel')" @click="closeModal" /> - <ButtonDiv :primary="true" - :disabled="disableSubmit" - :title="t('polls', 'OK')" - @click="submitRegistration" /> + <VueButton @click="closeModal"> + {{ t('polls', 'Cancel') }} + </VueButton> + + <VueButton type="primary" :disabled="disableSubmit" @click="submitRegistration()"> + {{ t('polls', 'OK') }} + </VueButton> </div> </div> <div v-if="share.showLogin" class="registration__login"> <h2> {{ t('polls', 'You are a registered user of this site?') }} </h2> - <ButtonDiv :title="t('polls', 'Login')" @click="login()" /> + <VueButton wide @click="login()"> + {{ t('polls', 'Login') }} + </VueButton> <div> {{ t('polls', 'As a regular user of this site, you can participate with your internal identity after logging in.') }} </div> @@ -94,24 +97,23 @@ <script> import debounce from 'lodash/debounce' import axios from '@nextcloud/axios' -import ButtonDiv from '../Base/ButtonDiv' -import InputDiv from '../Base/InputDiv' import { showError } from '@nextcloud/dialogs' import { generateUrl } from '@nextcloud/router' -import { Modal } from '@nextcloud/vue' +import { Button as VueButton, Modal } from '@nextcloud/vue' import { mapState } from 'vuex' import RichText from '@juliushaertl/vue-richtext' +import InputDiv from '../Base/InputDiv' import SimpleLink from '../../helpers/SimpleLink' export default { name: 'PublicRegisterModal', components: { - ButtonDiv, SimpleLink, InputDiv, Modal, RichText, + VueButton, }, data() { diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue index cb81fdb8..fd3ccafc 100644 --- a/src/js/components/SideBar/SideBarTabConfiguration.vue +++ b/src/js/components/SideBar/SideBarTabConfiguration.vue @@ -74,21 +74,29 @@ <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' @@ -102,8 +110,11 @@ 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' @@ -111,19 +122,24 @@ 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, - ShowResultsIcon, - HideResultsUntilClosedIcon, - ShowResultsNeverIcon, LockedIcon, - UnlockedIcon, + HideResultsUntilClosedIcon, PollConfigIcon, + RestorePollIcon, + ShowResultsIcon, + ShowResultsNeverIcon, SpeakerIcon, + UnlockedIcon, ConfigBox, ConfigAllowComment, ConfigAllowMayBe, @@ -136,6 +152,7 @@ export default { ConfigTitle, ConfigUseNo, ConfigVoteLimit, + VueButton, }, mixins: [writePoll], @@ -178,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/VoteTable/VoteColumn.vue b/src/js/components/VoteTable/VoteColumn.vue index b509378b..82f1bd30 100644 --- a/src/js/components/VoteTable/VoteColumn.vue +++ b/src/js/components/VoteTable/VoteColumn.vue @@ -24,8 +24,6 @@ <div :class="['vote-column', { 'confirmed' : option.confirmed && closed }]"> <VoteTableHeaderItem :option="option" :view-mode="viewMode" /> - <!-- <Confirmation v-if="option.confirmed && closed" :option="option" /> --> - <Counter v-if="acl.allowSeeResults" :show-maybe="!!poll.allowMaybe" :option="option" /> @@ -42,33 +40,39 @@ :avatar-size="24" class="owner" /> - <Actions v-if="acl.allowEdit && closed" class="action confirm"> - <ActionButton v-if="closed" - :icon="option.confirmed ? 'icon-polls-confirmed' : 'icon-polls-unconfirmed'" + <div v-if="acl.allowEdit && closed" class="action confirm"> + <VueButton v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')" + type="tertiary" @click="confirmOption(option)"> - {{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }} - </ActionButton> - </Actions> + <template #icon> + <UnconfirmIcon v-if="option.confirmed" :size="20" /> + <ConfirmIcon v-else :size="20" /> + </template> + </VueButton> + </div> </div> </template> <script> import { mapState, mapGetters } from 'vuex' -import { Actions, ActionButton } from '@nextcloud/vue' +import { Button as VueButton } from '@nextcloud/vue' import Counter from '../Options/Counter' import VoteItem from './VoteItem' import VoteTableHeaderItem from './VoteTableHeaderItem' import { confirmOption } from '../../mixins/optionMixins' +import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue' +import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue' export default { name: 'VoteColumn', components: { - Actions, - ActionButton, - CalendarPeek: () => import('../Calendar/CalendarPeek'), + ConfirmIcon, + UnconfirmIcon, Counter, VoteTableHeaderItem, VoteItem, + VueButton, + CalendarPeek: () => import('../Calendar/CalendarPeek'), OptionItemOwner: () => import('../Options/OptionItemOwner'), }, diff --git a/src/js/main.js b/src/js/main.js index b378ce9a..e5597de6 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -34,7 +34,6 @@ import { generateFilePath } from '@nextcloud/router' import { Tooltip } from '@nextcloud/vue' import UserItem from './components/User/UserItem' -import ButtonDiv from './components/Base/ButtonDiv' /* eslint-disable-next-line camelcase, no-undef */ __webpack_nonce__ = btoa(getRequestToken()) @@ -53,7 +52,6 @@ Vue.prototype.getCurrentUser = getCurrentUser // eslint-disable-next-line vue/match-component-file-name Vue.component('UserItem', UserItem) // eslint-disable-next-line vue/match-component-file-name -Vue.component('ButtonDiv', ButtonDiv) Vue.directive('tooltip', Tooltip) Vue.use(ClickOutside) diff --git a/src/js/userSettings.js b/src/js/userSettings.js index 6fb73bf1..c14e64cb 100644 --- a/src/js/userSettings.js +++ b/src/js/userSettings.js @@ -29,7 +29,6 @@ import { getRequestToken } from '@nextcloud/auth' import { generateFilePath } from '@nextcloud/router' import UserSettingsPage from './views/UserSettingsPage' -import ButtonDiv from './components/Base/ButtonDiv' /* eslint-disable-next-line camelcase, no-undef */ __webpack_nonce__ = btoa(getRequestToken()) @@ -42,7 +41,6 @@ Vue.prototype.n = translatePlural // Vue.config.debug = process.env.NODE_ENV !== 'production' // Vue.config.devTools = process.env.NODE_ENV !== 'production' // eslint-disable-next-line vue/match-component-file-name -Vue.component('ButtonDiv', ButtonDiv) Vue.use(Vuex) diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue index cb308b1b..366d8218 100644 --- a/src/js/views/Administration.vue +++ b/src/js/views/Administration.vue @@ -84,11 +84,13 @@ <h2>{{ t('polls', 'Do you want to take over this poll?') }}</h2> <div>{{ t('polls', '{username} will get notified.', {username: currentPoll.owner.displayName}) }}</div> <div class="modal__buttons"> - <ButtonDiv :title="t('polls', 'No')" - @click="takeOverModal = false" /> - <ButtonDiv :primary="true" - :title="t('polls', 'Yes')" - @click="takeOverPoll()" /> + <VueButton @click="takeOverModal = false"> + {{ t('polls', 'No') }} + </VueButton> + + <VueButton type="primary" @click="takeOverPoll()"> + {{ t('polls', 'Yes') }} + </VueButton> </div> </div> </Modal> @@ -101,11 +103,13 @@ {{ t('polls', '{username} will get notified.', {username: currentPoll.owner.displayName}) }} </div> <div class="modal__buttons"> - <ButtonDiv :title="t('polls', 'No')" - @click="deleteModal = false" /> - <ButtonDiv :primary="true" - :title="t('polls', 'Yes')" - @click="deletePoll()" /> + <VueButton @click="deleteModal = false"> + {{ t('polls', 'No') }} + </VueButton> + + <VueButton type="primary" @click="deletePoll()"> + {{ t('polls', 'Yes') }} + </VueButton> </div> </div> </Modal> @@ -116,7 +120,7 @@ import { mapGetters } from 'vuex' import { showError } from '@nextcloud/dialogs' import { emit } from '@nextcloud/event-bus' -import { Actions, ActionButton, AppContent, EmptyContent, Modal } from '@nextcloud/vue' +import { Actions, ActionButton, AppContent, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue' import sortBy from 'lodash/sortBy' import HeaderBar from '../components/Base/HeaderBar' @@ -130,6 +134,7 @@ export default { EmptyContent, HeaderBar, Modal, + VueButton, LoadingOverlay: () => import('../components/Base/LoadingOverlay'), PollItem: () => import('../components/PollList/PollItem'), }, |