Merge pull request #1715 from nextcloud/artonge/fix/visibility_icon

Use more appropriate icon for attachments

src/components/Composer/Composer.vue

@@ -85,7 +85,7 @@
 					:aria-label="t('social', 'Add attachment')"
 					@click.prevent="clickImportInput">
 					<template #icon>
-						<FileUpload :size="22" decorative title="" />
+						<Paperclip :size="22" decorative title="" />
 					</template>
 				</NcButton>
 
@@ -118,7 +118,7 @@
 
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
-import FileUpload from 'vue-material-design-icons/FileUpload.vue'
+import Paperclip from 'vue-material-design-icons/Paperclip.vue'
 import debounce from 'debounce'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -131,7 +131,7 @@ import axios from '@nextcloud/axios'
 import ActorAvatar from '../ActorAvatar.vue'
 import { generateUrl } from '@nextcloud/router'
 import PreviewGrid from './PreviewGrid.vue'
-import VisibilitySelect from './VisibilitySelect.vue'
+import VisibilitySelect from '../Visibility/VisibilitySelect.vue'
 import SubmitStatusButton from './SubmitStatusButton.vue'
 import MessageContent from '../MessageContent.js'
 
@@ -148,7 +148,7 @@ export default {
 		NcEmojiPicker,
 		NcButton,
 		ActorAvatar,
-		FileUpload,
+		Paperclip,
 		VueTribute,
 		EmoticonOutline,
 		Close,

src/components/TimelinePost.vue

@@ -14,10 +14,10 @@
 					</span>
 				</router-link>
 			</div>
-			<div v-if="visibility"
+			<VisibilityIcon v-if="visibility"
+				:title="visibility.text"
 				class="post-visibility"
-				:class="{ [visibility.icon]: true }"
-				:title="visibility.text" />
+				:visibility="visibility.id" />
 			<a :data-timestamp="timestamp"
 				class="post-timestamp live-relative-timestamp"
 				:title="formattedDate"
@@ -106,7 +106,8 @@ import HeartOutline from 'vue-material-design-icons/HeartOutline.vue'
 import logger from '../services/logger.js'
 import moment from '@nextcloud/moment'
 import MessageContent from './MessageContent.js'
-import visibilitiesInfo from './VisibilitiesInfos.js'
+import visibilitiesInfo from './Visibility/VisibilitiesInfos.js'
+import VisibilityIcon from './Visibility/VisibilityIcon.vue'
 
 export default {
 	name: 'TimelinePost',
@@ -120,6 +121,7 @@ export default {
 		Heart,
 		HeartOutline,
 		MessageContent,
+		VisibilityIcon,
 	},
 	mixins: [currentUser],
 	props: {
@@ -285,6 +287,8 @@ export default {
 			justify-content: space-between;
 
 			.post-author-wrapper {
+				flex-grow: 1;
+
 				&:hover {
 					text-decoration: underline;
 				}
@@ -300,7 +304,6 @@ export default {
 			}
 
 			.post-visibility {
-				flex-grow: 1;
 				opacity: 0.5;
 				background-position: right;
 			}

src/components/VisibilitiesInfos.js

@@ -1,35 +0,0 @@
-import { translate as t } from '@nextcloud/l10n'
-
-const visibilityToClass = {
-	public: 'icon-link',
-	followers: 'icon-contacts-dark',
-	direct: 'icon-external',
-	unlisted: 'icon-password',
-}
-
-export default [
-	{
-		id: 'public',
-		icon: visibilityToClass.public,
-		text: t('social', 'Public'),
-		longtext: t('social', 'Post to public timelines'),
-	},
-	{
-		id: 'unlisted',
-		icon: visibilityToClass.unlisted,
-		text: t('social', 'Unlisted'),
-		longtext: t('social', 'Do not post to public timelines'),
-	},
-	{
-		id: 'followers',
-		icon: visibilityToClass.followers,
-		text: t('social', 'Followers'),
-		longtext: t('social', 'Post to followers only'),
-	},
-	{
-		id: 'direct',
-		icon: visibilityToClass.direct,
-		text: t('social', 'Direct'),
-		longtext: t('social', 'Post to mentioned users only'),
-	},
-]

src/components/Visibility/VisibilitiesInfos.js

@@ -0,0 +1,32 @@
+import { translate as t } from '@nextcloud/l10n'
+
+/**
+ * @typedef {object} Visibility
+ * @property {string} id - One of 'public', 'followers', 'direct', 'unlisted'
+ * @property {string} text - Short label of the visibility
+ * @property {string} description - Description of the visibility
+ */
+
+/** @type {Visibility[]} */
+export default [
+	{
+		id: 'public',
+		text: t('social', 'Public'),
+		description: t('social', 'Visible for all'),
+	},
+	{
+		id: 'unlisted',
+		text: t('social', 'Unlisted'),
+		description: t('social', 'Visible for all, but opted-out of discovery features'),
+	},
+	{
+		id: 'followers',
+		text: t('social', 'Followers'),
+		description: t('social', 'Visible to followers only'),
+	},
+	{
+		id: 'direct',
+		text: t('social', 'Direct'),
+		description: t('social', 'Visible to mentioned users only'),
+	},
+]

src/components/Visibility/VisibilityIcon.vue

@@ -0,0 +1,59 @@
+<!--
+  - @copyright Copyright (c) 2023 Louis Chmn <louis@chmn.me>
+  -
+  - @2023 Louis Chmn <louis@chmn.me>
+  -
+  - @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>
+	<Earth v-if="visibility === 'public'" :size="22" />
+	<AccountMultiple v-else-if="visibility === 'followers'" :size="22" />
+	<LockOpen v-else-if="visibility === 'unlisted'" :size="22" />
+	<At v-else-if="visibility === 'direct'" :size="22" />
+</template>
+<script>
+import Earth from 'vue-material-design-icons/Earth.vue'
+import LockOpen from 'vue-material-design-icons/LockOpen.vue'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import At from 'vue-material-design-icons/At.vue'
+
+export default {
+	name: 'VisibilityIcon',
+	components: {
+		Earth,
+		LockOpen,
+		AccountMultiple,
+		At,
+	},
+	props: {
+		visibility: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {}
+	},
+	computed: {
+
+	},
+	methods: {
+
+	},
+}
+</script>

src/components/Visibility/VisibilitySelect.vue

@@ -22,27 +22,35 @@
   -->
 
 <template>
-	<div v-click-outside="hidePopoverMenu" class="popovermenu-parent">
-		<NcButton :title="t('social', 'Change visibility')"
-			type="tertiary"
-			:class="currentVisibilityIconClass"
-			@click.prevent="togglePopoverMenu" />
-		<div :class="{open: menuOpened}" class="popovermenu">
-			<NcPopoverMenu :menu="visibilityPopover" />
-		</div>
-	</div>
+	<NcActions type="tertiary" :menu-title="selectedVisibilityDetails.text" :aria-label="t('social', 'Choose a visibility')">
+		<template #icon>
+			<VisibilityIcon :visibility="selectedVisibilityDetails.id" :size="20" />
+		</template>
+		<NcActionButton v-for="visibilityDetails of visibilitiesInfo"
+			:key="visibilityDetails.id"
+			:class="{'selected-visibility': visibilityDetails.id === selectedVisibilityDetails.id}"
+			:close-after-click="true"
+			@click="switchType(visibilityDetails)">
+			<template #icon>
+				<VisibilityIcon :visibility="visibilityDetails.id" :size="20" />
+			</template>
+			{{ visibilityDetails.description }}
+		</NcActionButton>
+	</NcActions>
 </template>
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
-import visibilitiesInfo from '../VisibilitiesInfos.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import { translate } from '@nextcloud/l10n'
+import visibilitiesInfo from './VisibilitiesInfos.js'
+import VisibilityIcon from './VisibilityIcon.vue'
 
 export default {
 	name: 'VisibilitySelect',
 	components: {
-		NcPopoverMenu,
-		NcButton,
+		NcActions,
+		NcActionButton,
+		VisibilityIcon,
 	},
 	props: {
 		visibility: {
@@ -52,39 +60,20 @@ export default {
 	},
 	data() {
 		return {
-			menuOpened: false,
+			visibilitiesInfo,
 		}
 	},
 	computed: {
-		/** @return {string} */
-		currentVisibilityIconClass() {
-			return visibilitiesInfo.find(({ id }) => this.visibility === id).icon
-		},
-
-		/** @return {object[]} */
-		visibilityPopover() {
-			return visibilitiesInfo.map(visibilityInfo => {
-				return {
-					...visibilityInfo,
-					action: () => this.switchType(visibilityInfo.id),
-					active: this.visibility === visibilityInfo.id,
-				}
-			})
+		/** @return {import('./VisibilitiesInfos.js').Visibility} */
+		selectedVisibilityDetails() {
+			return visibilitiesInfo.find(({ id }) => this.visibility === id)
 		},
 	},
 	methods: {
-		togglePopoverMenu() {
-			this.menuOpened = !this.menuOpened
-		},
-
-		hidePopoverMenu() {
-			this.menuOpened = false
-		},
-
 		switchType(visibility) {
-			this.$emit('update:visibility', visibility)
-			this.menuOpened = false
-			localStorage.setItem('social.lastPostType', visibility)
+			this.$emit('update:visibility', visibility.id)
+			// this.menuOpened = false
+			localStorage.setItem('social.lastPostType', visibility.id)
 		},
 
 		t: translate,
@@ -92,11 +81,9 @@ export default {
 }
 </script>
 <style scoped>
-.popovermenu-parent {
-	position: relative;
-}
-
-.popovermenu {
-	top: 55px;
+.selected-visibility {
+	outline: 1px solid var(--color-success);
+	border-radius: 6px;
+	background: var(--color-background-hover);
 }
 </style>