pollInfoLine improvement

Signed-off-by: dartcafe <github@dartcafe.de>

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);