Merge pull request #1675 from nextcloud/artonge/display_visibility_on_statuses

Add visibility on statuses

package-lock.json

@@ -29,7 +29,6 @@
 				"tributejs": "^5.1.3",
 				"twemoji": "12.0.1",
 				"uuid": "^8.3.2",
-				"v-tooltip": "^4.0.0-beta.0",
 				"vue": "^2.7.10",
 				"vue-click-outside": "^1.0.7",
 				"vue-infinite-loading": "^2.4.4",
@@ -3643,15 +3642,6 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/@popperjs/core": {
-			"version": "2.11.6",
-			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-			"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/popperjs"
-			}
-		},
 		"node_modules/@sideway/address": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -18485,18 +18475,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/v-tooltip": {
-			"version": "4.0.0-beta.0",
-			"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-beta.0.tgz",
-			"integrity": "sha512-I0X7ggjr8W0DsJG4qmtOl+rpHzvC1pa0DyjVC7sRzSG4cBDEhy97oYR1eo38RSblZ0nWE8Hhxcv/1JFF1k0Kig==",
-			"dependencies": {
-				"@popperjs/core": "^2.11.0",
-				"vue-resize": "^1.0.0"
-			},
-			"peerDependencies": {
-				"vue": "^2.6.10"
-			}
-		},
 		"node_modules/v8-compile-cache": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -22366,11 +22344,6 @@
 				"fastq": "^1.6.0"
 			}
 		},
-		"@popperjs/core": {
-			"version": "2.11.6",
-			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-			"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
-		},
 		"@sideway/address": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -33597,15 +33570,6 @@
 			"resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
 			"integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w=="
 		},
-		"v-tooltip": {
-			"version": "4.0.0-beta.0",
-			"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-beta.0.tgz",
-			"integrity": "sha512-I0X7ggjr8W0DsJG4qmtOl+rpHzvC1pa0DyjVC7sRzSG4cBDEhy97oYR1eo38RSblZ0nWE8Hhxcv/1JFF1k0Kig==",
-			"requires": {
-				"@popperjs/core": "^2.11.0",
-				"vue-resize": "^1.0.0"
-			}
-		},
 		"v8-compile-cache": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package.json

@@ -52,7 +52,6 @@
 		"tributejs": "^5.1.3",
 		"twemoji": "12.0.1",
 		"uuid": "^8.3.2",
-		"v-tooltip": "^4.0.0-beta.0",
 		"vue": "^2.7.10",
 		"vue-click-outside": "^1.0.7",
 		"vue-infinite-loading": "^2.4.4",

src/components/Composer/Composer.vue

@@ -80,7 +80,7 @@
 				@deleted="deletePreview" />
 
 			<div class="options">
-				<NcButton v-tooltip="t('social', 'Add attachment')"
+				<NcButton :title="t('social', 'Add attachment')"
 					type="tertiary"
 					:aria-label="t('social', 'Add attachment')"
 					@click.prevent="clickImportInput">
@@ -95,7 +95,7 @@
 						:close-on-select="false"
 						container="#content-vue"
 						@select="insert">
-						<NcButton v-tooltip="t('social', 'Add emoji')"
+						<NcButton :title="t('social', 'Add emoji')"
 							type="tertiary"
 							:aria-haspopup="true"
 							:aria-label="t('social', 'Add emoji')">
@@ -526,13 +526,6 @@ input[type=submit].inline {
 	flex-grow:1;
 }
 
-.popovermenu-parent {
-	position: relative;
-}
-.popovermenu {
-	top: 55px;
-}
-
 .attachment-picker-wrapper {
 	position: absolute;
 	right: 0;

src/components/Composer/VisibilitySelect.vue

@@ -23,7 +23,7 @@
 
 <template>
 	<div v-click-outside="hidePopoverMenu" class="popovermenu-parent">
-		<NcButton v-tooltip="t('social', 'Visibility')"
+		<NcButton :title="t('social', 'Change visibility')"
 			type="tertiary"
 			:class="currentVisibilityIconClass"
 			@click.prevent="togglePopoverMenu" />
@@ -35,6 +35,7 @@
 <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 { translate } from '@nextcloud/l10n'
 
 export default {
@@ -52,52 +53,23 @@ export default {
 	data() {
 		return {
 			menuOpened: false,
-			test: false,
-			typeToClass: {
-				public: 'icon-link',
-				followers: 'icon-contacts-dark',
-				direct: 'icon-external',
-				unlisted: 'icon-password',
-			},
 		}
 	},
 	computed: {
 		/** @return {string} */
 		currentVisibilityIconClass() {
-			return this.typeToClass[this.visibility]
+			return visibilitiesInfo.find(({ id }) => this.visibility === id).icon
 		},
-		/** @return {Array} */
+
+		/** @return {object[]} */
 		visibilityPopover() {
-			return [
+			return visibilitiesInfo.map(visibilityInfo => {
-				{
+				return {
-					action: () => this.switchType('public'),
+					...visibilityInfo,
-					icon: this.typeToClass.public,
+					action: () => this.switchType(visibilityInfo.id),
-					active: this.visibility === 'public',
+					active: this.visibility === visibilityInfo.id,
-					text: t('social', 'Public'),
+				}
-					longtext: t('social', 'Post to public timelines'),
+			})
-				},
-				{
-					action: () => this.switchType('unlisted'),
-					icon: this.typeToClass.unlisted,
-					active: this.visibility === 'unlisted',
-					text: t('social', 'Unlisted'),
-					longtext: t('social', 'Do not post to public timelines'),
-				},
-				{
-					action: () => this.switchType('followers'),
-					icon: this.typeToClass.followers,
-					active: this.visibility === 'followers',
-					text: t('social', 'Followers'),
-					longtext: t('social', 'Post to followers only'),
-				},
-				{
-					action: () => this.switchType('direct'),
-					icon: this.typeToClass.direct,
-					active: this.visibility === 'direct',
-					text: t('social', 'Direct'),
-					longtext: t('social', 'Post to mentioned users only'),
-				},
-			]
 		},
 	},
 	methods: {
@@ -119,3 +91,12 @@ export default {
 	},
 }
 </script>
+<style scoped>
+.popovermenu-parent {
+	position: relative;
+}
+
+.popovermenu {
+	top: 55px;
+}
+</style>

src/components/TimelinePost.vue

@@ -14,6 +14,9 @@
 					</span>
 				</router-link>
 			</div>
+			<div class="post-visibility"
+				:class="{ [visibility.icon]: true }"
+				:title="visibility.text" />
 			<a :data-timestamp="timestamp"
 				class="post-timestamp live-relative-timestamp"
 				:title="formattedDate"
@@ -28,14 +31,14 @@
 		<div v-else class="post-message" v-html="item.account.note" />
 		<PostAttachment v-if="hasAttachments" :attachments="item.media_attachments || []" />
 		<div v-if="$route && $route.params.type !== 'notifications' && !serverData.public" class="post-actions">
-			<NcButton v-tooltip="t('social', 'Reply')"
+			<NcButton :title="t('social', 'Reply')"
 				type="tertiary-no-background"
 				@click="reply">
 				<template #icon>
 					<Reply :size="20" />
 				</template>
 			</NcButton>
-			<NcButton v-tooltip="t('social', 'Boost')"
+			<NcButton :title="t('social', 'Boost')"
 				type="tertiary-no-background"
 				@click="boost">
 				<template #icon>
@@ -43,7 +46,7 @@
 				</template>
 			</NcButton>
 			<NcButton v-if="!isLiked"
-				v-tooltip="t('social', 'Like')"
+				:title="t('social', 'Like')"
 				type="tertiary-no-background"
 				@click="like">
 				<template #icon>
@@ -51,7 +54,7 @@
 				</template>
 			</NcButton>
 			<NcButton v-if="isLiked"
-				v-tooltip="t('social', 'Undo Like')"
+				:title="t('social', 'Undo Like')"
 				type="tertiary-no-background"
 				@click="like">
 				<template #icon>
@@ -86,6 +89,7 @@ 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'
 
 export default {
 	name: 'TimelinePost',
@@ -171,6 +175,10 @@ export default {
 		isNotification() {
 			return this.item.type !== undefined
 		},
+		/** @return {object} */
+		visibility() {
+			return visibilitiesInfo.find(({ id }) => this.item.visibility === id)
+		},
 	},
 	methods: {
 		/**
@@ -238,6 +246,7 @@ export default {
 </script>
 <style scoped lang="scss">
 	@import '@nextcloud/vue-richtext/dist/style.css';
+
 	.post-content {
 		padding: 4px 4px 4px 8px;
 		font-size: 15px;
@@ -252,20 +261,51 @@ export default {
 			border-radius: 8px;
 			background-color: var(--color-background-hover);
 		}
+
+		.post-header {
+			display: flex;
+			gap: 8px;
+			flex-direction: row;
+			justify-content: space-between;
+
+			.post-author-wrapper {
+				&:hover {
+					text-decoration: underline;
+				}
+
+				.post-author {
+					font-weight: bold;
+
+				}
+
+				.post-author-id {
+					color: var(--color-text-lighter);
+				}
+			}
+
+			.post-visibility {
+				flex-grow: 1;
+				opacity: 0.5;
+				background-position: right;
+			}
+
+			.post-timestamp {
+				text-align: right;
+				color: var(--color-text-lighter);
+
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
 	}
 
-	.post-author {
+	.post-message :deep(a) {
-		font-weight: bold;
+		overflow-wrap: anywhere;
-	}
 
-	.post-author-id {
+		&:hover {
-		opacity: .7;
+			text-decoration: underline;
-	}
+		}
-
-	.post-timestamp {
-		width: 120px;
-		text-align: right;
-		flex-grow: 2;
 	}
 
 	.post-actions {
@@ -279,6 +319,7 @@ export default {
 			height: 34px;
 			display: inline-block;
 		}
+
 		.icon-reply,
 		.icon-boost,
 		.icon-boosted,
@@ -293,24 +334,9 @@ export default {
 				opacity: 1;
 			}
 		}
+
 		.icon-boosted {
 			opacity: 1;
 		}
 	}
-
-	.post-header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
-
-	.post-timestamp {
-		opacity: .7;
-	}
-</style>
-<style>
-	.post-message a {
-		text-decoration: underline;
-		overflow-wrap: anywhere;
-	}
 </style>

src/components/VisibilitiesInfos.js

@@ -0,0 +1,35 @@
+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/main.js

@@ -28,7 +28,6 @@ import store from './store/index.js'
 import router from './router.js'
 import vuetwemoji from 'vue-twemoji'
 import ClickOutside from 'vue-click-outside'
-import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import VueMasonry from 'vue-masonry-css'
 
 sync(store, router)
@@ -48,7 +47,6 @@ Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
 Vue.directive('ClickOutside', ClickOutside)
-Vue.directive('Tooltip', VTooltip)
 Vue.use(vuetwemoji, {
 	baseUrl: OC.linkTo('social', 'img/'), // can set to local folder of emojis. default: https://twemoji.maxcdn.com/
 	extension: '.svg', // .svg, .png

src/views/Timeline.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="social__wrapper">
 		<transition name="slide-fade">
-			<div v-if="true || showInfo" class="social__welcome">
+			<div v-if="showInfo" class="social__welcome">
 				<a class="close icon-close" href="#" @click="hideInfo()">
 					<span class="hidden-visually">
 						{{ t('social', 'Close') }}