diff options
author | dartcafe <github@dartcafe.de> | 2022-04-12 09:20:19 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-04-12 09:20:19 +0300 |
commit | 84f283e548143294dfcb090ddd6012de6b2a5e3d (patch) | |
tree | aa662cf5beb75e96e05888c05e6c87c8ab2c3497 /src | |
parent | 2344cf80002a2618d14e58429efa41fe25f2ae3d (diff) |
pollInfoLine improvement
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
-rw-r--r-- | src/js/assets/icons/material-design/publish-off.svg | 1 | ||||
-rw-r--r-- | src/js/assets/scss/icons-md.scss | 2 | ||||
-rw-r--r-- | src/js/components/Poll/PollInfoLine.vue | 42 |
3 files changed, 32 insertions, 13 deletions
diff --git a/src/js/assets/icons/material-design/publish-off.svg b/src/js/assets/icons/material-design/publish-off.svg new file mode 100644 index 00000000..fcd3525f --- /dev/null +++ b/src/js/assets/icons/material-design/publish-off.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.8 22.7L15 16.9V20H9V14H5L8.6 10.4L1.1 3L2.4 1.7L22.1 21.4L20.8 22.7M19 6V4H7.2L9.2 6H19M17.2 14H19L12 7L11.1 7.9L17.2 14Z" /></svg>
\ No newline at end of file diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss index 8dd9a8cd..efcd85d2 100644 --- a/src/js/assets/scss/icons-md.scss +++ b/src/js/assets/scss/icons-md.scss @@ -57,6 +57,7 @@ --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-publish-off: url('../icons/material-design/publish-off.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'); @@ -143,6 +144,7 @@ .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-unpublished-poll { @include masked-icon(var(--icon-md-publish-off)); } .icon-mask-md-yes-vote, .icon-mask-md-yes-votes { diff --git a/src/js/components/Poll/PollInfoLine.vue b/src/js/components/Poll/PollInfoLine.vue index 13ba62a1..b710756a 100644 --- a/src/js/components/Poll/PollInfoLine.vue +++ b/src/js/components/Poll/PollInfoLine.vue @@ -22,7 +22,7 @@ <template lang="html"> <div class="poll-info-line"> - <span v-for="(subText) in subTexts" :key="subText.id" :class="subText.class"> + <span v-for="(subText) in subTexts" :key="subText.id" :class="['sub-text', subText.class]"> <span :class="subText.icon" /> <span class="sub-text">{{ subText.text }}</span> </span> @@ -62,6 +62,16 @@ export default { subTexts() { const subTexts = [] + if (this.isNoAccessSet) { + subTexts.push({ + id: 'no-access', + text: t('polls', 'Poll is unpublished. Invite users via the share tab in the sidebar'), + icon: 'icon-mask-md-unpublished-poll', + class: 'unpublished', + }) + return subTexts + } + if (this.access === 'private') { subTexts.push({ id: this.access, @@ -78,15 +88,6 @@ export default { }) } - if (this.isNoAccessSet) { - subTexts.push({ - id: 'no-access', - text: t('polls', 'Invite users via the share tab in the sidebar'), - icon: 'icon-mask-md-sidebar-share', - class: 'closed', - }) - return subTexts - } if (this.isDeleted) { subTexts.push({ id: 'deleted', @@ -167,7 +168,11 @@ export default { } </script> - +.poll-info-line [class^="icon-"], .poll-info-line [class*=" icon-"] { + /* padding-right: 21px; */ + width: var(--icon-size); + margin: 0px 6px 0 2px; +} <style lang="scss"> .poll-info-line { display: flex; @@ -175,6 +180,10 @@ export default { opacity: 0.7; font-size: 1em; + .sub-text { + display: flex; + } + & > span:not(:last-child)::after { content: "|"; padding: 0 2px; @@ -182,12 +191,13 @@ export default { [class^="icon-"], [class*=" icon-"] { - padding-right: 21px; + width: var(--icon-size); + margin: 0px 6px 0 2px; } [class^="icon-md"], [class*=" icon-md"] { - mask-size: 1em; + mask-size: var(--icon-size); } .closed { @@ -197,6 +207,12 @@ export default { } } + .unpublished { + .sub-text{ + font-weight: 700; + } + } + .closing { .sub-text{ color: var(--color-warning); |