diff options
author | dartcafe <github@dartcafe.de> | 2022-04-01 13:32:07 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-04-01 13:32:07 +0300 |
commit | 91ec2cd5f9e065e7f47d30c3771ad145a5d401a0 (patch) | |
tree | 138e54727d6c025ea7d1e6cf7c133b2027d44d55 /src | |
parent | 85e2b003523ceed631f896396522714076330453 (diff) |
replace the rest of the rest
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
-rw-r--r-- | src/js/assets/icons/material-design/format-list-numbered.svg | 1 | ||||
-rw-r--r-- | src/js/assets/icons/material-design/polls-shield-crown-outline-strike-thru.svg | 2 | ||||
-rw-r--r-- | src/js/assets/icons/material-design/sort-clock-ascending-outline.svg | 1 | ||||
-rw-r--r-- | src/js/assets/scss/hacks.scss | 4 | ||||
-rw-r--r-- | src/js/assets/scss/icons-md.scss | 362 | ||||
-rw-r--r-- | src/js/components/Actions/ActionChangeView.vue | 42 | ||||
-rw-r--r-- | src/js/components/Actions/ActionSortOptions.vue | 59 | ||||
-rw-r--r-- | src/js/components/PollList/PollItemAdmin.vue | 276 | ||||
-rw-r--r-- | src/js/components/Shares/SharesList.vue | 54 | ||||
-rw-r--r-- | src/js/components/User/UserItem.vue | 10 | ||||
-rw-r--r-- | src/js/components/User/UserMenu.vue | 2 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteMenu.vue | 2 |
12 files changed, 208 insertions, 607 deletions
diff --git a/src/js/assets/icons/material-design/format-list-numbered.svg b/src/js/assets/icons/material-design/format-list-numbered.svg new file mode 100644 index 00000000..8a0fac2d --- /dev/null +++ b/src/js/assets/icons/material-design/format-list-numbered.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z" /></svg>
\ No newline at end of file diff --git a/src/js/assets/icons/material-design/polls-shield-crown-outline-strike-thru.svg b/src/js/assets/icons/material-design/polls-shield-crown-outline-strike-thru.svg new file mode 100644 index 00000000..af3ff0d3 --- /dev/null +++ b/src/js/assets/icons/material-design/polls-shield-crown-outline-strike-thru.svg @@ -0,0 +1,2 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M 12 1 L 6.2246094 3.5664062 L 7.7382812 5.0800781 L 12 3.1796875 L 19 6.3007812 L 19 11.220703 C 19 12.637983 18.643799 14.066906 18.041016 15.386719 L 19.527344 16.875 C 20.464898 15.090266 21 13.070015 21 11 L 21 5 L 12 1 z M 1.4101562 1.5800781 L 0 3 L 3 6 L 3 11 C 3 16.55 6.84 21.74 12 23 C 13.934538 22.527613 15.682612 21.502326 17.113281 20.113281 L 17.115234 20.113281 L 20.75 23.75 L 22.160156 22.339844 L 18.433594 18.611328 C 18.434683 18.609871 18.436412 18.60888 18.4375 18.607422 L 17.021484 17.191406 C 17.020461 17.192881 17.018602 17.193838 17.017578 17.195312 L 15.746094 15.923828 C 15.747717 15.922943 15.748389 15.920819 15.75 15.919922 L 13.830078 14 L 13.824219 14 L 12.824219 13 L 12.830078 13 L 10.085938 10.253906 L 10.082031 10.257812 L 5.7832031 5.953125 L 4.2675781 4.4375 L 1.4101562 1.5800781 z M 5 8 L 7.5 10.5 L 8 13 L 10 13 L 11 14 L 8 14 L 8 15.5 L 8 15.589844 C 8.04 15.809844 8.2207031 15.96 8.4707031 16 L 8.5703125 16 L 13 16 L 15.734375 18.734375 C 14.640664 19.827028 13.353093 20.639175 12 21 C 8.25 20 5 15.540703 5 11.220703 L 5 8 z M 17 8 L 14.330078 10.669922 L 12 8.3398438 L 11.498047 8.8417969 L 15.654297 13 L 16 13 L 17 8 z " /> +</svg> diff --git a/src/js/assets/icons/material-design/sort-clock-ascending-outline.svg b/src/js/assets/icons/material-design/sort-clock-ascending-outline.svg new file mode 100644 index 00000000..9cfe0e71 --- /dev/null +++ b/src/js/assets/icons/material-design/sort-clock-ascending-outline.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 17H23L19 21L15 17H18V3H20V17M8 5C4.14 5 1 8.13 1 12C1 15.87 4.13 19 8 19C11.86 19 15 15.87 15 12C15 8.13 11.87 5 8 5M8 7.15C10.67 7.15 12.85 9.32 12.85 12C12.85 14.68 10.68 16.85 8 16.85C5.32 16.85 3.15 14.68 3.15 12C3.15 9.32 5.32 7.15 8 7.15M7 9V12.69L10.19 14.53L10.94 13.23L8.5 11.82V9" /></svg>
\ No newline at end of file diff --git a/src/js/assets/scss/hacks.scss b/src/js/assets/scss/hacks.scss index deac6e05..395c97a6 100644 --- a/src/js/assets/scss/hacks.scss +++ b/src/js/assets/scss/hacks.scss @@ -14,6 +14,10 @@ } } +.mx-input-wrapper .button-vue--vue-primary .material-design-icon__svg { + fill: var(--color-primary-text); +} + .mx-datepicker-main .checkbox-radio-switch--checked svg { fill: var(--color-primary-element); } diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss index 24a4c950..ee8f8fe0 100644 --- a/src/js/assets/scss/icons-md.scss +++ b/src/js/assets/scss/icons-md.scss @@ -1,61 +1,71 @@ // material design icons :root { - --icon-md-exclamation-thick: url('../icons/material-design/exclamation-thick.svg'); - --icon-md-wrench: url('../icons/material-design/wrench.svg'); - --icon-md-format-list-checks: url('../icons/material-design/format-list-checks.svg'); - --icon-md-share-variant: url('../icons/material-design/share-variant.svg'); - --icon-md-comment-processing: url('../icons/material-design/comment-processing.svg'); - --icon-md-lock: url('../icons/material-design/lock.svg'); - --icon-md-clock-outline: url('../icons/material-design/clock-outline.svg'); - --icon-md-poll: url('../icons/material-design/poll.svg'); - --icon-md-link-variant: url('../icons/material-design/link-variant.svg'); + --icon-md-account-check: url('../icons/material-design/account-check.svg'); + --icon-md-account-group: url('../icons/material-design/account-group.svg'); + --icon-md-account-cog: url('../icons/material-design/account-cog.svg'); + --icon-md-archive: url('../icons/material-design/archive.svg'); + --icon-md-bell: url('../icons/material-design/bell.svg'); + --icon-md-bell-off: url('../icons/material-design/bell-off.svg'); --icon-md-calendar-month: url('../icons/material-design/calendar-month.svg'); --icon-md-calendar-blank: url('../icons/material-design/calendar-blank.svg'); --icon-md-calendar-end: url('../icons/material-design/calendar-end.svg'); - --icon-md-format-list-bulleted-square: url('../icons/material-design/format-list-bulleted-square.svg'); - --icon-md-format-list-checkbox: url('../icons/material-design/format-list-checkbox.svg'); - --icon-md-earth: url('../icons/material-design/earth.svg'); - --icon-md-email-edit-outline: url('../icons/material-design/email-edit-outline.svg'); - --icon-md-archive: url('../icons/material-design/archive.svg'); - --icon-md-crown: url('../icons/material-design/crown.svg'); - --icon-md-shield-crown-outline: url('../icons/material-design/shield-crown-outline.svg'); - --icon-md-email: url('../icons/material-design/email.svg'); --icon-md-check: url('../icons/material-design/check.svg'); + --icon-md-clipboard-arrow-left-outline: url('../icons/material-design/clipboard-arrow-left-outline.svg'); --icon-md-close: url('../icons/material-design/close.svg'); - --icon-md-polls-maybe: url('../icons/material-design/polls-maybe.svg'); - --icon-md-offer: url('../icons/material-design/offer.svg'); - --icon-md-map-clock-outline: url('../icons/material-design/map-clock-outline.svg'); + --icon-md-clock-outline: url('../icons/material-design/clock-outline.svg'); + --icon-md-checkbox-marked-outline: url('../icons/material-design/checkbox-marked-outline.svg'); + --icon-md-cog: url('../icons/material-design/cog.svg'); + --icon-md-comment-processing: url('../icons/material-design/comment-processing.svg'); --icon-md-content-copy: url('../icons/material-design/content-copy.svg'); - --icon-md-account-cog: url('../icons/material-design/account-cog.svg'); - --icon-md-recycle: url('../icons/material-design/recycle.svg'); + --icon-md-crown: url('../icons/material-design/crown.svg'); + --icon-md-delete: url('../icons/material-design/delete.svg'); + --icon-md-earth: url('../icons/material-design/earth.svg'); + --icon-md-email: url('../icons/material-design/email.svg'); + --icon-md-email-edit-outline: url('../icons/material-design/email-edit-outline.svg'); + --icon-md-exclamation-thick: url('../icons/material-design/exclamation-thick.svg'); + --icon-md-format-list-bulleted-square: url('../icons/material-design/format-list-bulleted-square.svg'); + --icon-md-format-list-checkbox: url('../icons/material-design/format-list-checkbox.svg'); + --icon-md-format-list-numbered: url('../icons/material-design/format-list-numbered.svg'); + --icon-md-format-list-checks: url('../icons/material-design/format-list-checks.svg'); + --icon-md-incognito: url('../icons/material-design/incognito.svg'); + --icon-md-link-variant: url('../icons/material-design/link-variant.svg'); + --icon-md-lock: url('../icons/material-design/lock.svg'); + --icon-md-lock-open-variant: url('../icons/material-design/lock-open-variant.svg'); --icon-md-key: url('../icons/material-design/key.svg'); + --icon-md-map-clock-outline: url('../icons/material-design/map-clock-outline.svg'); --icon-md-monitor: url('../icons/material-design/monitor.svg'); - --icon-md-monitor-off: url('../icons/material-design/monitor-off.svg'); --icon-md-monitor-lock: url('../icons/material-design/monitor-lock.svg'); - --icon-md-delete: url('../icons/material-design/delete.svg'); + --icon-md-monitor-off: url('../icons/material-design/monitor-off.svg'); + --icon-md-offer: url('../icons/material-design/offer.svg'); + --icon-md-poll: url('../icons/material-design/poll.svg'); + --icon-md-polls-maybe: url('../icons/material-design/polls-maybe.svg'); + --icon-md-recycle: url('../icons/material-design/recycle.svg'); + --icon-md-share-variant: url('../icons/material-design/share-variant.svg'); + --icon-md-shield-crown-outline: url('../icons/material-design/shield-crown-outline.svg'); + --icon-md-polls-shield-crown-outline-strike-thru: url('../icons/material-design/polls-shield-crown-outline-strike-thru.svg'); + --icon-md-sort-clock-ascending-outline: url('../icons/material-design/sort-clock-ascending-outline.svg'); --icon-md-undo: url('../icons/material-design/undo.svg'); - --icon-md-cog: url('../icons/material-design/cog.svg'); - --icon-md-account-group: url('../icons/material-design/account-group.svg'); - --icon-md-incognito: url('../icons/material-design/incognito.svg'); - --icon-md-bell: url('../icons/material-design/bell.svg'); - --icon-md-bell-off: url('../icons/material-design/bell-off.svg'); - --icon-md-account-check: url('../icons/material-design/account-check.svg'); - --icon-md-lock-open-variant: url('../icons/material-design/lock-open-variant.svg'); --icon-md-vector-combine: url('../icons/material-design/vector-combine.svg'); - --icon-md-clipboard-arrow-left-outline: url('../icons/material-design/clipboard-arrow-left-outline.svg'); - --icon-md-checkbox-marked-outline: url('../icons/material-design/checkbox-marked-outline.svg'); + --icon-md-wrench: url('../icons/material-design/wrench.svg'); + + + --icon-size: 18px; + --icon-md-color-default: #000; + --icon-color-dark: #000; + --icon-md-color-light: #fff; } [class*='icon-mask-md-'] { background-color: #000; - mask-repeat: no-repeat; - mask-position: center; - mask-size: 18px; - &.empty-content__icon { - mask-size: 64px; - } } +// .material-design-icon { +// display: flex; +// align-self: center; +// align-items: center; +// justify-content: center; +// } + .theme--dark { &[class*='icon-mask-md-'] { background-color: #000 !important; @@ -65,229 +75,91 @@ } } -// material design icons -.icon-mask-md-navigation-relevant { - -webkit-mask-image: var(--icon-md-exclamation-thick); - mask-image: var(--icon-md-exclamation-thick); -} - -.icon-mask-md-navigation-my, -.icon-mask-md-owner { - -webkit-mask-image: var(--icon-md-crown); - mask-image: var(--icon-md-crown); +@mixin svg-icon($url) { + background-image: $url; } -.icon-mask-md-navigation-private, -.icon-mask-md-private-poll { - -webkit-mask-image: var(--icon-md-key); - mask-image: var(--icon-md-key); -} - -.icon-mask-md-navigation-open, -.icon-mask-md-open-poll { - -webkit-mask-image: var(--icon-md-earth); - mask-image: var(--icon-md-earth); -} - -.icon-mask-md-navigation-participated { - -webkit-mask-image: var(--icon-md-account-check); - mask-image: var(--icon-md-account-check); -} - -.icon-mask-md-navigation-all { - -webkit-mask-image: var(--icon-md-poll); - mask-image: var(--icon-md-poll); -} - -.icon-mask-md-navigation-closed, .icon-mask-md-closed-poll { - -webkit-mask-image: var(--icon-md-lock); - mask-image: var(--icon-md-lock); -} - -.icon-mask-md-navigation-archived, -.icon-mask-md-archived-poll, -.icon-mask-md-archive-poll { - -webkit-mask-image: var(--icon-md-archive); - mask-image: var(--icon-md-archive); -} - -.icon-mask-md-navigation-combo { - -webkit-mask-image: var(--icon-md-vector-combine); - mask-image: var(--icon-md-vector-combine); -} - -.icon-mask-md-navigation-administration { - -webkit-mask-image: var(--icon-md-cog); - mask-image: var(--icon-md-cog); -} - -.icon-mask-md-navigation-personal-settings { - -webkit-mask-image: var(--icon-md-account-cog); - mask-image: var(--icon-md-account-cog); -} - -.icon-mask-md-sidebar-options { - -webkit-mask-image: var(--icon-md-format-list-checks); - mask-image: var(--icon-md-format-list-checks); -} - -.icon-mask-md-email { - -webkit-mask-image: var(--icon-md-email); - mask-image: var(--icon-md-email); -} - -.icon-svg-md-email { - background-image: var(--icon-md-email); -} - -.icon-mask-md-admin { - -webkit-mask-image: var(--icon-md-shield-crown-outline); - mask-image: var(--icon-md-shield-crown-outline); -} - -.icon-mask-md-sidebar-configuration { - -webkit-mask-image: var(--icon-md-wrench); - mask-image: var(--icon-md-wrench); -} - -.icon-mask-md-sidebar-comments { - -webkit-mask-image: var(--icon-md-comment-processing); - mask-image: var(--icon-md-comment-processing); -} - -.icon-mask-md-sidebar-share { - -webkit-mask-image: var(--icon-md-share-variant); - mask-image: var(--icon-md-share-variant); -} - -.icon-mask-md-date-options { - -webkit-mask-image: var(--icon-md-calendar-month); - mask-image: var(--icon-md-calendar-month); -} - -.icon-mask-md-date-poll { - -webkit-mask-image: var(--icon-md-calendar-blank); - mask-image: var(--icon-md-calendar-blank); -} - -.icon-mask-md-anonymous-poll { - -webkit-mask-image: var(--icon-md-incognito); - mask-image: var(--icon-md-incognito); -} - -.icon-mask-md-text-poll { - -webkit-mask-image: var(--icon-md-format-list-bulleted-square); - mask-image: var(--icon-md-format-list-bulleted-square); -} - -.icon-mask-md-clone-poll { - -webkit-mask-image: var(--icon-md-content-copy); - mask-image: var(--icon-md-content-copy); -} - -.icon-mask-md-restore-poll { - -webkit-mask-image: var(--icon-md-recycle); - mask-image: var(--icon-md-recycle); -} - -.icon-mask-md-delete-poll { - -webkit-mask-image: var(--icon-md-delete); - mask-image: var(--icon-md-delete); -} - -.icon-mask-md-expiration { - -webkit-mask-image: var(--icon-md-calendar-end); - mask-image: var(--icon-md-calendar-end); -} - -.icon-mask-md-creation { - -webkit-mask-image: var(--icon-md-clock-outline); - mask-image: var(--icon-md-clock-outline); -} - -.icon-mask-md-clippy { - -webkit-mask-image: var(--icon-md-clipboard-arrow-left-outline); - mask-image: var(--icon-md-clipboard-arrow-left-outline); -} - -.icon-mask-md-reset-votes { - -webkit-mask-image: var(--icon-md-undo); - mask-image: var(--icon-md-undo); -} - -.icon-mask-md-subscribed { - -webkit-mask-image: var(--icon-md-bell); - mask-image: var(--icon-md-bell); -} - -.icon-mask-md-unsubscribed { - -webkit-mask-image: var(--icon-md-bell-off); - mask-image: var(--icon-md-bell-off); -} - -.icon-mask-md-participants { - -webkit-mask-image: var(--icon-md-account-group); - mask-image: var(--icon-md-account-group); -} - -.icon-mask-md-show-results { - -webkit-mask-image: var(--icon-md-monitor); - mask-image: var(--icon-md-monitor); -} - -.icon-mask-md-hide-results-until-closed { - -webkit-mask-image: var(--icon-md-monitor-lock); - mask-image: var(--icon-md-monitor-lock); -} - -.icon-mask-md-show-results-never { - -webkit-mask-image: var(--icon-md-monitor-off); - mask-image: var(--icon-md-monitor-off); -} - -.icon-mask-md-options { - -webkit-mask-image: var(--icon-md-format-list-checkbox); - mask-image: var(--icon-md-format-list-checkbox); -} - -.icon-mask-md-timezone { - -webkit-mask-image: var(--icon-md-map-clock-outline); - mask-image: var(--icon-md-map-clock-outline); -} - -.icon-mask-md-proposals-allowed, -.icon-mask-md-proposals { - -webkit-mask-image: var(--icon-md-offer); - mask-image: var(--icon-md-offer); +// 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; } -.icon-mask-md-edit-email-address { - -webkit-mask-image: var(--icon-md-email-edit); - mask-image: var(--icon-md-email-edit); -} -.icon-mask-md-send-link-per-email { - -webkit-mask-image: var(--icon-md-link-variant); - mask-image: var(--icon-md-link-variant); -} +// 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)); } +.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-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-delete-poll { @include masked-icon(var(--icon-md-delete)); } +.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-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-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-yes-vote, .icon-mask-md-yes-votes { background-color: var(--color-polls-foreground-yes) !important; - -webkit-mask-image: var(--icon-md-check); - mask-image: var(--icon-md-check); + @include masked-icon(var(--icon-md-check)); } .icon-mask-md-no-vote, .icon-mask-md-no-votes { background-color: var(--color-polls-foreground-no) !important; - -webkit-mask-image: var(--icon-md-close); - mask-image: var(--icon-md-close); + @include masked-icon(var(--icon-md-close)); } .icon-mask-md-maybe-vote, .icon-mask-md-maybe-votes { background-color: var(--color-polls-foreground-maybe) !important; - -webkit-mask-image: var(--icon-md-polls-maybe); - mask-image: var(--icon-md-polls-maybe); + @include masked-icon(var(--icon-md-polls-maybe)); } diff --git a/src/js/components/Actions/ActionChangeView.vue b/src/js/components/Actions/ActionChangeView.vue index a1ef82b7..f9263d7c 100644 --- a/src/js/components/Actions/ActionChangeView.vue +++ b/src/js/components/Actions/ActionChangeView.vue @@ -22,39 +22,29 @@ <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> + <VueButton v-tooltip="caption" + type="tertiary" + @click="clickAction()"> + <ListViewIcon v-if="viewMode === 'table-view'" /> + <TableViewIcon v-else /> + </VueButton> </div> </template> <script> import { mapState, mapGetters } from 'vuex' -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 ListViewIcon from 'vue-material-design-icons/ViewListOutline.vue' // view-sequential-outline +import TableViewIcon from 'vue-material-design-icons/Table.vue' // view-comfy-outline export default { name: 'ActionChangeView', components: { - Actions, - ActionButton, - ButtonDiv, - }, - - props: { - buttonMode: { - type: Boolean, - default: false, - }, + ListViewIcon, + TableViewIcon, + VueButton, }, computed: { @@ -74,16 +64,8 @@ export default { return t('polls', 'Switch to list view') } return t('polls', 'Switch to table view') - }, - icon() { - if (this.viewMode === 'table-view') { - return 'icon-list-view' - } - return 'icon-table-view' - - }, }, methods: { diff --git a/src/js/components/Actions/ActionSortOptions.vue b/src/js/components/Actions/ActionSortOptions.vue index bcf09854..adcc8f6a 100644 --- a/src/js/components/Actions/ActionSortOptions.vue +++ b/src/js/components/Actions/ActionSortOptions.vue @@ -22,38 +22,31 @@ <template> <div class="action sort-options"> - <ButtonDiv v-if="buttonMode" - :title="caption" - simple - :icon="icon" - @click="clickAction()" /> - <Actions v-else> - <ActionButton :icon="icon" @click="clickAction()"> - {{ caption }} - </ActionButton> - </Actions> + <VueButton v-tooltip="caption" + type="tertiary" + @click="clickAction()"> + <SortByDateOptionIcon v-if="isRanked && pollType === 'datePoll'" /> + <SortByOriginalOrderIcon v-else-if="isRanked && pollType === 'textPoll'" /> + <SortByRankIcon v-else /> + </VueButton> </div> </template> <script> import { mapState, mapMutations } from 'vuex' -import { Actions, ActionButton } from '@nextcloud/vue' -import ButtonDiv from '../Base/ButtonDiv' +import { Button as VueButton } from '@nextcloud/vue' +import SortByOriginalOrderIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue' +import SortByRankIcon from 'vue-material-design-icons/FormatListNumbered.vue' +import SortByDateOptionIcon from 'vue-material-design-icons/SortClockAscendingOutline.vue' export default { name: 'ActionSortOptions', components: { - Actions, - ActionButton, - ButtonDiv, - }, - - props: { - buttonMode: { - type: Boolean, - default: false, - }, + SortByRankIcon, + SortByOriginalOrderIcon, + SortByDateOptionIcon, + VueButton, }, computed: { @@ -63,27 +56,15 @@ export default { }), caption() { - if (this.isRanked) { - if (this.pollType === 'datePoll') { - return t('polls', 'Date order') - } - return t('polls', 'Original order') - + if (this.isRanked && this.pollType === 'datePoll') { + return t('polls', 'Date order') } - return t('polls', 'Ranked order') - - }, - - icon() { - if (this.isRanked) { - if (this.pollType === 'datePoll') { - return 'icon-calendar-000' - } - return 'icon-toggle-filelist' + if (this.isRanked && this.pollType === 'textPoll') { + return t('polls', 'Original order') } - return 'icon-quota' + return t('polls', 'Ranked order') }, }, diff --git a/src/js/components/PollList/PollItemAdmin.vue b/src/js/components/PollList/PollItemAdmin.vue deleted file mode 100644 index 03df6497..00000000 --- a/src/js/components/PollList/PollItemAdmin.vue +++ /dev/null @@ -1,276 +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 v-if="header" class="poll-item__header"> - <div class="item__title sortable" @click="$emit('sort-list', {sort: 'title'})"> - {{ t('polls', 'Title') }} - <span :class="['sort-indicator', { 'hidden': sort !== 'title'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> - </div> - - <div class="item__icon-spacer" /> - - <div class="item__access sortable" @click="$emit('sort-list', {sort: 'access'})"> - {{ t('polls', 'Access') }} - <span :class="['sort-indicator', { 'hidden': sort !== 'access'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> - </div> - - <div class="item__owner sortable" @click="$emit('sort-list', {sort: 'owner.displayName'})"> - {{ t('polls', 'Owner') }} - <span :class="['sort-indicator', { 'hidden': sort !== 'owner.displayName'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> - </div> - - <div class="wrapper"> - <div class="item__created sortable" @click="$emit('sort-list', {sort: 'created'})"> - {{ t('polls', 'Created') }} - <span :class="['sort-indicator', { 'hidden': sort !== 'created'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> - </div> - - <div class="item__expiry sortable" @click="$emit('sort-list', {sort: 'expire'})"> - {{ t('polls', 'Closing date') }} - <span :class="['sort-indicator', { 'hidden': sort !== 'expire'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> - </div> - </div> - </div> - - <div v-else class="poll-item__item" :class="{ closed: closed, active: (poll.id === $store.state.poll.id) }"> - <div v-tooltip.auto="pollTypeName" :class="pollTypeIcon" /> - - <div class="item__title"> - <div class="item__title__title"> - {{ poll.title }} - </div> - <div class="item__title__description"> - {{ poll.description ? poll.description : t('polls', 'No description provided') }} - </div> - </div> - - <slot name="actions" /> - - <div v-tooltip.auto="accessType" :class="'item__access--' + poll.access" /> - - <div class="item__owner"> - <UserItem v-bind="poll.owner" /> - </div> - - <div class="wrapper"> - <div class="item__created"> - {{ timeCreatedRelative }} - </div> - <div class="item__expiry"> - {{ timeExpirationRelative }} - </div> - </div> - </div> -</template> - -<script> -import { mapGetters } from 'vuex' -import moment from '@nextcloud/moment' - -export default { - name: 'PollItemAdmin', - - props: { - header: { - type: Boolean, - default: false, - }, - poll: { - type: Object, - default: undefined, - }, - sort: { - type: String, - default: 'created', - }, - reverse: { - type: Boolean, - default: true, - }, - }, - - computed: { - ...mapGetters({ - closed: 'poll/isClosed', - }), - - accessType() { - if (this.poll.access === 'open') { - return t('polls', 'Open poll') - } - return t('polls', 'Private poll') - - }, - - pollTypeName() { - if (this.poll.type === 'textPoll') { - return t('polls', 'Text poll') - } - - return t('polls', 'Date poll') - }, - - pollTypeIcon() { - if (this.poll.type === 'textPoll') { - return 'icon-mask-md-text-poll' - } - - return 'icon-mask-md-date-poll' - }, - - timeExpirationRelative() { - if (this.poll.expire) { - return moment.unix(this.poll.expire).fromNow() - } - return t('polls', 'never') - - }, - timeCreatedRelative() { - return moment.unix(this.poll.created).fromNow() - }, - }, -} -</script> - -<style lang="scss"> - -[class^='item__'] { - padding-right: 8px; - display: flex; - align-items: center; - flex: 0 0 auto; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - -} - -.item__icon-spacer { - width: 44px; - min-width: 44px; -} - -.item__title { - display: flex; - flex-direction: column; - flex: 1 0 auto; - align-items: stretch; - width: 210px; -} - -.item__title__description { - opacity: 0.5; -} - -.item__access { - width: 80px; -} - -.item__owner { - width: 230px; -} - -.wrapper { - width: 240px; - display: flex; - flex: 0 1 auto; - flex-wrap: wrap; -} - -.item__created, .item__expiry { - width: 110px; -} - -.closed { - .item__expiry { - color: var(--color-error); - } -} - -[class^='poll-item__'] { - display: flex; - flex: 1; - padding: 4px 8px; - border-bottom: 1px solid var(--color-border-dark); -} - -.poll-item__header { - opacity: 0.7; - flex: auto; - height: 4em; - align-items: center; - padding-left: 52px; -} - -.sortable { - cursor: pointer; - &:hover { - .sort-indicator.hidden { - visibility: visible; - display: block; - } - } -} - -[class^='item__type'] { - width: 44px; - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; -} - -.item__type--textPoll { - background-image: var(--icon-toggle-filelist-000); -} - -.item__type--datePoll { - background-image: var(--icon-calendar-000); -} - -[class^='item__access'] { - width: 44px; - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; -} - -.item__access--public { - background-image: var(--icon-polls-open-poll); -} - -.item__access--hidden { - background-image: var(--icon-polls-private-poll); -} - -.poll-item__item { - &.active { - background-color: var(--color-primary-light); - } - &:hover { - background-color: var(--color-background-hover); - } -} - -</style> diff --git a/src/js/components/Shares/SharesList.vue b/src/js/components/Shares/SharesList.vue index 316da927..7df2d793 100644 --- a/src/js/components/Shares/SharesList.vue +++ b/src/js/components/Shares/SharesList.vue @@ -49,17 +49,47 @@ </template> <Actions> - <ActionButton v-if="share.emailAddress || share.type === 'group'" - icon="icon-confirm" - @click="sendInvitation(share)"> + <ActionButton v-if="share.emailAddress || share.type === 'group'" @click="sendInvitation(share)"> + <template #icon> + <SendEmailIcon /> + </template> {{ share.invitationSent ? t('polls', 'Resend invitation mail') : t('polls', 'Send invitation mail') }} </ActionButton> - <ActionButton v-if="share.type === 'user' || share.type === 'admin'" - :icon="share.type === 'user' ? 'icon-user-admin' : 'icon-user'" - @click="switchAdmin({ share })"> + + <ActionButton v-if="share.type === 'user' || share.type === 'admin'" @click="switchAdmin({ share })"> + <template #icon> + <span v-if="share.type === 'user'" + aria-hidden="true" + role="img" + class="material-design-icon shield-crown-outline"> + <svg fill="currentColor" + class="material-design-icon__svg" + width="24" + height="24" + viewBox="0 0 24 24"> + <path d="M12 1L21 5V11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5L12 1M12 3.18L5 6.3V11.22C5 15.54 8.25 20 12 21C15.75 20 19 15.54 19 11.22V6.3L12 3.18M16 14V15.5L16 15.59C15.96 15.81 15.78 15.96 15.53 16L15.43 16H8.57L8.47 16C8.22 15.96 8.04 15.81 8 15.59L8 15.5V14H16M17 8L16 13H8L7 8L7 8L9.67 10.67L12 8.34L14.33 10.67L17 8L17 8Z" /> + </svg> + </span> + <span v-else + aria-hidden="true" + role="img" + class="material-design-icon shield-crown-outline-strike-thru"> + <svg fill="currentColor" + class="material-design-icon__svg" + width="24" + height="24" + viewBox="0 0 24 24"> + <path d="M 12 1 L 6.2246094 3.5664062 L 7.7382812 5.0800781 L 12 3.1796875 L 19 6.3007812 L 19 11.220703 C 19 12.637983 18.643799 14.066906 18.041016 15.386719 L 19.527344 16.875 C 20.464898 15.090266 21 13.070015 21 11 L 21 5 L 12 1 z M 1.4101562 1.5800781 L 0 3 L 3 6 L 3 11 C 3 16.55 6.84 21.74 12 23 C 13.934538 22.527613 15.682612 21.502326 17.113281 20.113281 L 17.115234 20.113281 L 20.75 23.75 L 22.160156 22.339844 L 18.433594 18.611328 C 18.434683 18.609871 18.436412 18.60888 18.4375 18.607422 L 17.021484 17.191406 C 17.020461 17.192881 17.018602 17.193838 17.017578 17.195312 L 15.746094 15.923828 C 15.747717 15.922943 15.748389 15.920819 15.75 15.919922 L 13.830078 14 L 13.824219 14 L 12.824219 13 L 12.830078 13 L 10.085938 10.253906 L 10.082031 10.257812 L 5.7832031 5.953125 L 4.2675781 4.4375 L 1.4101562 1.5800781 z M 5 8 L 7.5 10.5 L 8 13 L 10 13 L 11 14 L 8 14 L 8 15.5 L 8 15.589844 C 8.04 15.809844 8.2207031 15.96 8.4707031 16 L 8.5703125 16 L 13 16 L 15.734375 18.734375 C 14.640664 19.827028 13.353093 20.639175 12 21 C 8.25 20 5 15.540703 5 11.220703 L 5 8 z M 17 8 L 14.330078 10.669922 L 12 8.3398438 L 11.498047 8.8417969 L 15.654297 13 L 16 13 L 17 8 z " /> + </svg> + </span> + </template> {{ share.type === 'user' ? t('polls', 'Grant poll admin access') : t('polls', 'Withdraw poll admin access') }} </ActionButton> - <ActionButton icon="icon-clippy" @click="copyLink( { url: share.URL })"> + + <ActionButton @click="copyLink( { url: share.URL })"> + <template #icon> + <ClippyIcon /> + </template> {{ t('polls', 'Copy link to clipboard') }} </ActionButton> <ActionCaption v-if="share.type === 'public'" :title="t('polls', 'Options for the registration dialog')" /> @@ -106,12 +136,19 @@ import UserSearch from '../User/UserSearch' import SharePublicAdd from './SharePublicAdd' import ShareItemAllUsers from './ShareItemAllUsers' import ShareIcon from 'vue-material-design-icons/ShareVariant.vue' +import SendEmailIcon from 'vue-material-design-icons/EmailSend.vue' +import ClippyIcon from 'vue-material-design-icons/ClipboardArrowLeftOutline.vue' export default { name: 'SharesList', components: { + ClippyIcon, ShareIcon, + SendEmailIcon, + UnvotedIcon, + UserSearch, + VotedIcon, Actions, ActionButton, ActionCaption, @@ -120,9 +157,6 @@ export default { ConfigBox, SharePublicAdd, ShareItemAllUsers, - UnvotedIcon, - UserSearch, - VotedIcon, }, computed: { diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue index eea34c08..d24be019 100644 --- a/src/js/components/User/UserItem.vue +++ b/src/js/components/User/UserItem.vue @@ -184,23 +184,23 @@ export default { avatarIcon() { if (this.type === 'public') { - return 'icon-public' + return 'icon-svg-md-link' } if (this.type === 'internalAccess') { - return 'icon-public' + return 'icon-svg-md-link' } if (this.type === 'contact') { - return 'icon-mail' + return 'icon-svg-md-email' } if (this.type === 'email') { - return 'icon-mail' + return 'icon-svg-md-email' } if (this.type === 'external') { - return 'icon-share' + return 'icon-svg-md-share' } if (this.type === 'contactGroup') { diff --git a/src/js/components/User/UserMenu.vue b/src/js/components/User/UserMenu.vue index 3b895321..d02ea849 100644 --- a/src/js/components/User/UserMenu.vue +++ b/src/js/components/User/UserMenu.vue @@ -22,7 +22,7 @@ <template> <Actions default-icon="icon-settings" primary> - <ActionButton v-if="$route.name === 'publicVote'" icon="icon-clippy" @click="copyLink()"> + <ActionButton v-if="$route.name === 'publicVote'" icon="icon-md-link" @click="copyLink()"> {{ t('polls', 'Copy your personal link to clipboard') }} </ActionButton> <ActionSeparator /> diff --git a/src/js/components/VoteTable/VoteMenu.vue b/src/js/components/VoteTable/VoteMenu.vue index 940d4b9d..bde47c2e 100644 --- a/src/js/components/VoteTable/VoteMenu.vue +++ b/src/js/components/VoteTable/VoteMenu.vue @@ -22,7 +22,7 @@ <template> <div class="vote_menu"> - <ActionSortOptions /> + <ActionSortOptions button-mode /> <ActionChangeView /> </div> </template> |