Minor design improvements and hint for unpublished polls

src/js/App.vue

@@ -24,7 +24,7 @@
 	<NcContent app-name="polls" :class="appClass">
 		<router-view v-if="getCurrentUser()" name="navigation" />
 		<router-view />
-		<router-view v-show="sideBar.open" name="sidebar" :active="sideBar.activeTab" />
+		<router-view v-show="sideBar.open" name="sidebar" />
 		<LoadingOverlay v-if="loading" />
 		<UserSettingsDlg />
 	</NcContent>
@@ -34,7 +34,7 @@
 import UserSettingsDlg from './components/Settings/UserSettingsDlg.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import { NcContent } from '@nextcloud/vue'
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { mapState, mapActions } from 'vuex'
 import '@nextcloud/dialogs/dist/index.css'
 import './assets/scss/colors.scss'
@@ -59,7 +59,6 @@ export default {
 		return {
 			sideBar: {
 				open: (window.innerWidth > 920),
-				activeTab: 'comments',
 			},
 			transitionClass: 'transitions-active',
 			loading: false,
@@ -121,7 +120,7 @@ export default {
 		})
 
 		subscribe('polls:sidebar:toggle', (payload) => {
-			this.sideBar.activeTab = payload?.activeTab ?? this.sideBar.activeTab
+			emit('polls:sidebar:changeTab', { activeTab: payload.activeTab })
 			this.sideBar.open = payload?.open ?? !this.sideBar.open
 		})
 	},

src/js/components/Options/Counter.vue

@@ -65,7 +65,7 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: space-around;
-	gap: 4px;
+	gap: 4px 16px;
 	padding: 0 12px;
 	font-size: 1.1em;
 

src/js/components/Options/OptionItem.vue

@@ -253,6 +253,7 @@ export default {
 		justify-content: flex-start;
 		text-align: center;
 		hyphens: auto;
+		white-space: nowrap !important;
 	}
 
 	.event-date {

src/js/components/Poll/PollInfoLine.vue

@@ -82,8 +82,7 @@ export default {
 				subTexts.push({
 					id: 'no-access',
 					text: [
-						t('polls', 'This poll is unpublished'),
-						t('polls', 'Invite users via the share tab in the sidebar'),
+						t('polls', 'Unpublished'),
 					].join('. '),
 					class: 'unpublished',
 					iconComponent: unpublishedIcon,

src/js/components/VoteTable/VoteTable.vue

@@ -116,6 +116,7 @@ export default {
 		border-radius: 12px;
 		&.currentuser {
 			order:5;
+			margin-bottom: 30px;
 		}
 	}
 
@@ -153,22 +154,22 @@ export default {
 	.vote-column {
 		order: 2;
 		display: flex;
-		flex: 1 0 85px;
+		flex: 1 0 11em;
 		flex-direction: column;
 		align-items: stretch;
-		max-width: 280px;
+		max-width: 19em;
 		margin-bottom: 4px;
 
 		&>div {
 			display: flex;
-			justify-content: space-around;
+			justify-content: center;
 			align-items: center;
 		}
 		.option-item {
-			align-items: stretch;
 			flex: 1;
 			order: 1;
 		}
+
 	}
 
 	&.closed .vote-column {
@@ -233,6 +234,10 @@ export default {
 
 		.option-item .option-item__option--text {
 			text-align: center;
+			/* Notice: https://caniuse.com/css-text-wrap-balance */
+			text-wrap: balance;
+			hyphens: auto;
+			padding: 0 0.6em;
 		}
 	}
 
@@ -241,6 +246,7 @@ export default {
 
 		.vote-column {
 			flex-direction: row-reverse;
+			flex: 1 5.5em;
 			align-items: center;
 			max-width: initial;
 			position: relative;

src/js/views/SideBar.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<NcAppSidebar :active="active"
+	<NcAppSidebar :active.sync="activeTab"
 		:title="t('polls', 'Details')"
 		@close="closeSideBar()">
 		<NcAppSidebarTab v-if="acl.allowEdit"
@@ -84,29 +84,17 @@
 <script>
 import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 import { mapState } from 'vuex'
-import { emit } from '@nextcloud/event-bus'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import SidebarConfigurationIcon from 'vue-material-design-icons/Wrench.vue'
 import SidebarOptionsIcon from 'vue-material-design-icons/FormatListChecks.vue'
 import SidebarShareIcon from 'vue-material-design-icons/ShareVariant.vue'
 import SidebarCommentsIcon from 'vue-material-design-icons/CommentProcessing.vue'
 import SidebarActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
-// test static loading
-// import SideBarTabConfiguration from '../components/SideBar/SideBarTabConfiguration.vue'
-// import SideBarTabComments from '../components/SideBar/SideBarTabComments.vue'
-// import SideBarTabOptions from '../components/SideBar/SideBarTabOptions.vue'
-// import SideBarTabShare from '../components/SideBar/SideBarTabShare.vue'
-// import SideBarTabActivity from '../components/SideBar/SideBarTabActivity.vue'
 
 export default {
 	name: 'SideBar',
 
 	components: {
-		// test static loading
-		// SideBarTabConfiguration,
-		// SideBarTabComments,
-		// SideBarTabOptions,
-		// SideBarTabShare,
-		// SideBarTabActivity,
 		SideBarTabConfiguration: () => import('../components/SideBar/SideBarTabConfiguration.vue'),
 		SideBarTabComments: () => import('../components/SideBar/SideBarTabComments.vue'),
 		SideBarTabOptions: () => import('../components/SideBar/SideBarTabOptions.vue'),
@@ -121,11 +109,10 @@ export default {
 		SidebarCommentsIcon,
 	},
 
-	props: {
-		active: {
-			type: String,
-			default: t('polls', 'Comments').toLowerCase(),
-		},
+	data() {
+		return {
+			activeTab: t('polls', 'Comments').toLowerCase(),
+		}
 	},
 
 	computed: {
@@ -135,6 +122,17 @@ export default {
 			useActivity: (state) => state.appSettings.useActivity,
 			useCollaboration: (state) => state.appSettings.useCollaboration,
 		}),
+
+	},
+
+	created() {
+		subscribe('polls:sidebar:changeTab', (payload) => {
+			this.activeTab = payload?.activeTab ?? this.activeTab
+		})
+	},
+
+	beforeDestroy() {
+		unsubscribe('polls:sidebar:changeTab')
 	},
 
 	methods: {

src/js/views/Vote.vue

@@ -33,6 +33,16 @@
 		</HeaderBar>
 
 		<div class="vote_main">
+			<CardDiv v-if="isNoAccessSet && options.length" type="warning">
+				{{ t('polls', 'This poll is unpublished.') }}
+				{{ t('polls', 'Invite users or allow internal access for all site users.') }}
+				<template #button>
+					<NcButton type="primary" @click="openShares">
+						{{ t('polls', 'Edit access') }}
+					</NcButton>
+				</template>
+			</CardDiv>
+
 			<div v-if="poll.description" class="area__description">
 				<MarkUpDescription />
 			</div>
@@ -144,8 +154,13 @@ export default {
 			countHiddenParticipants: 'poll/countHiddenParticipants',
 			safeTable: 'poll/safeTable',
 			confirmedOptions: 'options/confirmed',
+			hasShares: 'shares/hasShares',
 		}),
 
+		isNoAccessSet() {
+			return this.poll.access === 'private' && !this.hasShares && this.acl.allowEdit
+		},
+
 		showConfirmationMail() {
 			return this.acl.isOwner && this.closed && this.confirmedOptions.length > 0
 		},
@@ -191,6 +206,10 @@ export default {
 		openOptions() {
 			emit('polls:sidebar:toggle', { open: true, activeTab: 'options' })
 		},
+
+		openShares() {
+			emit('polls:sidebar:toggle', { open: true, activeTab: 'sharing' })
+		},
 	},
 }