Merge pull request #2369 from nextcloud/fix/lost-icons

lost icons

src/js/assets/scss/icons-md.scss

@@ -11,6 +11,10 @@
 	mask-position: center;
 	mask-size: var(--icon-size);
 	background-color: $color;
+
+	&.empty-content__icon {
+		mask-size: 64px;
+	}
 }
 
 :root {
@@ -53,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');
@@ -139,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 {

src/js/assets/scss/theming.scss

@@ -54,7 +54,8 @@
 }
 
 @mixin flatAppHeader {
-	.area__header_vote {
+	.area__header {
+		padding-left: 40px;
 		box-shadow: none;
 		backdrop-filter: none !important;
 		border: none;
@@ -67,6 +68,7 @@
 	// fixes the app header, when page is scrolled horizontally
 	[class*=" area__header"],
 	[class^="area__header"] {
+		padding-left: 40px;
 		background-color: var(--color-main-background);
 		backdrop-filter: initial;
 		box-shadow: 6px 6px 6px var(--color-box-shadow);

src/js/components/Actions/ActionChangeView.vue

@@ -25,8 +25,10 @@
 		<VueButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
-			<ListViewIcon v-if="viewMode === 'table-view'" />
-			<TableViewIcon v-else />
+			<template #icon>
+				<ListViewIcon v-if="viewMode === 'table-view'" />
+				<TableViewIcon v-else />
+			</template>
 		</VueButton>
 	</div>
 </template>

src/js/components/Actions/ActionDelete.vue

@@ -23,14 +23,16 @@
 <template>
 	<div class="">
 		<VueButton type="tertiary">
-			<UndoIcon v-if="deleteTimeout"
-				v-tooltip="countdownTitle"
-				:size="iconSize"
-				@click="cancelDelete()" />
-			<DeleteIcon v-else
-				v-tooltip="title"
-				:size="iconSize"
-				@click="deleteItem()" />
+			<template #icon>
+				<UndoIcon v-if="deleteTimeout"
+					v-tooltip="countdownTitle"
+					:size="iconSize"
+					@click="cancelDelete()" />
+				<DeleteIcon v-else
+					v-tooltip="title"
+					:size="iconSize"
+					@click="deleteItem()" />
+			</template>
 		</VueButton>
 	</div>
 </template>

src/js/components/Actions/ActionSortOptions.vue

@@ -25,9 +25,11 @@
 		<VueButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
-			<SortByDateOptionIcon v-if="isRanked && pollType === 'datePoll'" />
-			<SortByOriginalOrderIcon v-else-if="isRanked && pollType === 'textPoll'" />
-			<SortByRankIcon v-else />
+			<template #icon>
+				<SortByDateOptionIcon v-if="isRanked && pollType === 'datePoll'" />
+				<SortByOriginalOrderIcon v-else-if="isRanked && pollType === 'textPoll'" />
+				<SortByRankIcon v-else />
+			</template>
 		</VueButton>
 	</div>
 </template>

src/js/components/Actions/ActionToggleSidebar.vue

@@ -25,7 +25,9 @@
 		<VueButton v-tooltip="caption"
 			type="tertiary"
 			@click="clickAction()">
-			<SidebarIcon />
+			<template #icon>
+				<SidebarIcon />
+			</template>
 		</VueButton>
 	</div>
 </template>

src/js/components/Options/OptionsDateShift.vue

@@ -37,7 +37,9 @@
 			<VueButton class="submit"
 				type="tertiary"
 				@click="shiftDates(shift)">
-				<SubmitIcon />
+				<template #icon>
+					<SubmitIcon />
+				</template>
 			</VueButton>
 		</div>
 	</div>

src/js/components/Poll/PollHeaderButtons.vue

@@ -27,7 +27,9 @@
 			<template #trigger>
 				<VueButton v-tooltip="t('polls', 'Poll informations')"
 					type="tertiary">
-					<PollInformationIcon />
+					<template #icon>
+						<PollInformationIcon />
+					</template>
 				</VueButton>
 			</template>
 			<PollInformation />

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,19 @@ export default {
 		subTexts() {
 			const subTexts = []
 
+			if (this.isNoAccessSet) {
+				subTexts.push({
+					id: 'no-access',
+					text: [
+						t('polls', 'This poll is unpublished'),
+						t('polls', 'Invite users via the share tab in the sidebar'),
+					].join('. '),
+					icon: 'icon-mask-md-unpublished-poll',
+					class: 'unpublished',
+				})
+				return subTexts
+			}
+
 			if (this.access === 'private') {
 				subTexts.push({
 					id: this.access,
@@ -78,15 +91,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,27 +171,36 @@ 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;
 	flex-wrap: wrap;
 	opacity: 0.7;
 	font-size: 1em;
 
+	.sub-text {
+		display: flex;
+	}
+
 	& > span:not(:last-child)::after {
 		content: "|";
 		padding: 0 2px;
 	}
 
 	[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 +210,12 @@ export default {
 		}
 	}
 
+	.unpublished {
+		.sub-text{
+			font-weight: 700;
+		}
+	}
+
 	.closing {
 		.sub-text{
 			color: var(--color-warning);

src/js/components/VoteTable/VoteColumn.vue

@@ -21,7 +21,7 @@
   -->
 
 <template lang="html">
-	<div :class="['vote-column', { 'confirmed' : option.confirmed && closed }]">
+	<div :class="componentClass">
 		<VoteTableHeaderItem :option="option" :view-mode="viewMode" />
 
 		<Counter v-if="acl.allowSeeResults"
@@ -94,14 +94,36 @@ export default {
 			acl: (state) => state.poll.acl,
 			poll: (state) => state.poll,
 			settings: (state) => state.settings.user,
+			currentUser: (state) => state.poll.acl.userId,
 		}),
 
 		...mapGetters({
 			closed: 'poll/isClosed',
 			participants: 'poll/safeParticipants',
 			proposalsExist: 'options/proposalsExist',
+			getVote: 'votes/getVote',
 		}),
 
+		componentClass() {
+			const classList = ['vote-column']
+			const ownAnswer = this.getVote({
+				userId: this.currentUser,
+				option: this.option,
+			})
+
+			if (this.option.computed.isBookedUp && !this.closed) {
+				classList.push('locked')
+			}
+
+			if (this.option.confirmed && this.closed) {
+				classList.push('confirmed')
+			}
+
+			classList.push(ownAnswer)
+
+			return classList.join(' ')
+		},
+
 		showCalendarPeek() {
 			return this.poll.type === 'datePoll' && this.getCurrentUser() && this.settings.calendarPeek
 		},

src/js/components/VoteTable/VoteTable.vue

@@ -246,6 +246,10 @@ export default {
 			border-top: solid 1px var(--color-border);
 			border-left: none;
 			padding: 0;
+
+			&.locked {
+				background-color: var(--color-polls-background-no);
+			}
 		}
 
 		.participant {

src/js/views/Vote.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<AppContent :class="[{ closed: closed }, poll.type]">
-		<HeaderBar class="area__header_vote">
+		<HeaderBar class="area__header">
 			<template #title>
 				{{ poll.title }}
 			</template>