ウィジットに顔文字と公開範囲ボタンを追加

mei23 · Apr 10, 2019 · 8c4bab1 · 8c4bab1
1 parent 2c6b773
commit 8c4bab1
Showing 1 changed file with 50 additions and 11 deletions.
diff --git a/src/client/app/common/views/widgets/post-form.vue b/src/client/app/common/views/widgets/post-form.vue
@@ -34,6 +34,14 @@
 			<footer>
 				<button @click="chooseFile"><fa icon="upload"/></button>
 				<button @click="chooseFileFromDrive"><fa icon="cloud"/></button>
+				<button @click="kao"><fa :icon="['far', 'smile']"/></button>
+				<button @click="setVisibility" ref="visibilityButton">
+					<span v-if="visibility === 'public'"><fa icon="globe"/></span>
+					<span v-if="visibility === 'home'"><fa icon="home"/></span>
+					<span v-if="visibility === 'followers'"><fa icon="unlock"/></span>
+					<span v-if="visibility === 'specified'"><fa icon="envelope"/></span>
+					<span v-if="localOnly" class="localOnly"><fa icon="heart"/></span>
+				</button>
 				<button @click="post" :disabled="posting" class="post">{{ $t('note') }}</button>
 			</footer>
 		</div>
@@ -46,6 +54,8 @@ import define from '../../../common/define-widget';
 import i18n from '../../../i18n';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as XDraggable from 'vuedraggable';
+import getFace from '../../../common/scripts/get-face';
+import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 
 export default define({
 	name: 'post-form',
@@ -56,14 +66,17 @@ export default define({
 	i18n: i18n('desktop/views/widgets/post-form.vue'),
 
 	components: {
-		XDraggable
+		XDraggable,
+		MkVisibilityChooser
 	},
 
 	data() {
 		return {
 			posting: false,
 			text: '',
 			files: [],
+			visibility: 'public',
+			localOnly: false,
 		};
 	},
 
@@ -81,6 +94,11 @@ export default define({
 		}
 	},
 
+	mounted() {
+		// デフォルト公開範囲
+		this.applyVisibility(this.$store.state.settings.defaultNoteVisibility);
+	},
+
 	methods: {
 		func() {
 			if (this.props.design == 1) {
@@ -173,25 +191,39 @@ export default define({
 			});
 		},
 
-		post() {
-			this.posting = true;
+		kao() {
+			this.text += getFace();
+		},
 
-			let visibility = 'public';
-			let localOnly = false;
+		setVisibility() {
+			const w = this.$root.new(MkVisibilityChooser, {
+				source: this.$refs.visibilityButton,
+				currentVisibility: this.visibility
+			});
+			w.$once('chosen', v => {
+				this.applyVisibility(v);
+			});
+		},
 
-			const m = this.$store.state.settings.defaultNoteVisibility.match(/^local-(.+)/);
+		applyVisibility(v :string) {
+			const m = v.match(/^local-(.+)/);
 			if (m) {
-				visibility = m[1];
-				localOnly = true;
+				this.localOnly = true;
+				this.visibility = m[1];
 			} else {
-				visibility = this.$store.state.settings.defaultNoteVisibility;
+				this.localOnly = false;
+				this.visibility = v;
 			}
+		},
+
+		post() {
+			this.posting = true;
 
 			this.$root.api('notes/create', {
 				text: this.text == '' ? undefined : this.text,
 				fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
-				visibility,
-				localOnly,
+				visibility: this.visibility,
+				localOnly: this.localOnly,
 			}).then(data => {
 				this.clear();
 			}).catch(err => {
@@ -294,6 +326,13 @@ export default define({
 			&:hover
 				color var(--textHighlighted)
 
+		> button > .localOnly
+			color var(--primary)
+			position absolute
+			top 0
+			right 2px
+			transform scale(.8)
+
 		> .post
 			display block
 			margin 0 0 0 auto