Merge pull request #1673 from nextcloud/artonge/feat/use_visibility_of_parent_for_reply

Use visibility of parent message when composing a reply

src/components/Composer/Composer.vue

@@ -106,9 +106,9 @@
 					</NcEmojiPicker>
 				</div>
 
-				<VisibilitySelect :type.sync="type" />
+				<VisibilitySelect :visibility.sync="visibility" />
 				<div class="emptySpace" />
-				<SubmitStatusButton :type="type" :disabled="!canPost || loading" @click="createPost" />
+				<SubmitStatusButton :visibility="visibility" :disabled="!canPost || loading" @click="createPost" />
 
 				<!-- <NcButton :value="currentVisibilityPostLabel"
 					:disabled="!canPost"
@@ -175,7 +175,7 @@ export default {
 	data() {
 		return {
 			statusContent: '',
-			type: localStorage.getItem('social.lastPostType') || 'followers',
+			visibility: localStorage.getItem('social.lastPostType') || 'followers',
 			loading: false,
 			/** @type {Object<string, LocalAttachment>} */
 			attachments: {},
@@ -274,7 +274,7 @@ export default {
 	mounted() {
 		this.$root.$on('composer-reply', (data) => {
 			this.replyTo = data
-			this.type = 'direct'
+			this.visibility = data.visibility
 		})
 	},
 	methods: {
@@ -364,7 +364,7 @@ export default {
 				spoiler_text: '',
 				status,
 				in_reply_to_id: this.replyTo?.id,
-				visibility: this.type,
+				visibility: this.visibility,
 			}
 
 			console.debug('[Composer] Posting status', statusData)

src/components/Composer/SubmitStatusButton.vue

@@ -46,7 +46,7 @@ export default {
 		Send,
 	},
 	props: {
-		type: {
+		visibility: {
 			type: String,
 			required: true,
 		},
@@ -58,7 +58,7 @@ export default {
 	computed: {
 		/** @return {string} */
 		postTo() {
-			switch (this.type) {
+			switch (this.visibility) {
 			case 'public':
 			case 'unlisted':
 				return t('social', 'Post')
@@ -71,15 +71,15 @@ export default {
 		},
 		/** @return {string} */
 		currentVisibilityPostLabel() {
-			return this.visibilityPostLabel(this.type)
+			return this.visibilityPostLabel(this.visibility)
 		},
 		/** @return {Function} */
 		visibilityPostLabel() {
-			return (type) => {
+			return (visibility) => {
-				if (typeof type === 'undefined') {
+				if (visibility === undefined) {
-					type = this.type
+					visibility = this.visibility
 				}
-				switch (type) {
+				switch (visibility) {
 				case 'public':
 					return t('social', 'Post publicly')
 				case 'followers':
@@ -100,38 +100,3 @@ export default {
 }
 
 </script>
-
-<style scoped lang="scss">
-.new-post {
-	padding: 10px;
-	background-color: var(--color-main-background);
-	position: sticky;
-	z-index: 100;
-	margin-bottom: 10px;
-	top: 0;
-
-	&-form {
-		flex-grow: 1;
-		position: relative;
-		top: -10px;
-		margin-left: 39px;
-		&__emoji-picker {
-			z-index: 1;
-		}
-	}
-}
-
-input[type=submit].inline {
-	width: 44px;
-	height: 44px;
-	margin: 0;
-	padding: 13px;
-	background-color: transparent;
-	border: none;
-	opacity: 0.3;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-</style>

src/components/Composer/VisibilitySelect.vue

@@ -44,7 +44,7 @@ export default {
 		NcButton,
 	},
 	props: {
-		type: {
+		visibility: {
 			type: String,
 			required: true,
 		},
@@ -64,7 +64,7 @@ export default {
 	computed: {
 		/** @return {string} */
 		currentVisibilityIconClass() {
-			return this.typeToClass[this.type]
+			return this.typeToClass[this.visibility]
 		},
 		/** @return {Array} */
 		visibilityPopover() {
@@ -72,28 +72,28 @@ export default {
 				{
 					action: () => this.switchType('public'),
 					icon: this.typeToClass.public,
-					active: this.type === 'public',
+					active: this.visibility === 'public',
 					text: t('social', 'Public'),
 					longtext: t('social', 'Post to public timelines'),
 				},
 				{
 					action: () => this.switchType('unlisted'),
 					icon: this.typeToClass.unlisted,
-					active: this.type === '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.type === '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.type === 'direct',
+					active: this.visibility === 'direct',
 					text: t('social', 'Direct'),
 					longtext: t('social', 'Post to mentioned users only'),
 				},
@@ -109,10 +109,10 @@ export default {
 			this.menuOpened = false
 		},
 
-		switchType(type) {
+		switchType(visibility) {
-			this.$emit('update:type', type)
+			this.$emit('update:visibility', visibility)
 			this.menuOpened = false
-			localStorage.setItem('social.lastPostType', type)
+			localStorage.setItem('social.lastPostType', visibility)
 		},
 
 		t: translate,