最近使ったハッシュタグを表示するようにするなど
This commit is contained in:
parent
cbdc061891
commit
8dc5375d55
File diff suppressed because it is too large
Load Diff
|
@ -126,6 +126,7 @@
|
||||||
"highlight.js": "9.12.0",
|
"highlight.js": "9.12.0",
|
||||||
"html-minifier": "3.5.19",
|
"html-minifier": "3.5.19",
|
||||||
"http-signature": "1.2.0",
|
"http-signature": "1.2.0",
|
||||||
|
"insert-text-at-cursor": "0.1.1",
|
||||||
"is-root": "2.0.0",
|
"is-root": "2.0.0",
|
||||||
"is-url": "1.2.4",
|
"is-url": "1.2.4",
|
||||||
"jquery": "3.3.1",
|
"jquery": "3.3.1",
|
||||||
|
@ -205,6 +206,7 @@
|
||||||
"vue-json-tree-view": "2.1.4",
|
"vue-json-tree-view": "2.1.4",
|
||||||
"vue-loader": "15.2.6",
|
"vue-loader": "15.2.6",
|
||||||
"vue-router": "3.0.1",
|
"vue-router": "3.0.1",
|
||||||
|
"vue-style-loader": "4.1.1",
|
||||||
"vue-template-compiler": "2.5.16",
|
"vue-template-compiler": "2.5.16",
|
||||||
"vuedraggable": "2.16.0",
|
"vuedraggable": "2.16.0",
|
||||||
"vuex": "3.0.1",
|
"vuex": "3.0.1",
|
||||||
|
|
|
@ -10,6 +10,9 @@
|
||||||
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
|
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
|
||||||
<a @click="addVisibleUser">+ユーザーを追加</a>
|
<a @click="addVisibleUser">+ユーザーを追加</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hashtags" v-if="recentHashtags.length > 0">
|
||||||
|
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
|
||||||
|
</div>
|
||||||
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
|
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
|
||||||
<textarea :class="{ with: (files.length != 0 || poll) }"
|
<textarea :class="{ with: (files.length != 0 || poll) }"
|
||||||
ref="text" v-model="text" :disabled="posting"
|
ref="text" v-model="text" :disabled="posting"
|
||||||
|
@ -46,6 +49,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||||
import * as XDraggable from 'vuedraggable';
|
import * as XDraggable from 'vuedraggable';
|
||||||
import getKao from '../../../common/scripts/get-kao';
|
import getKao from '../../../common/scripts/get-kao';
|
||||||
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
||||||
|
@ -91,7 +95,8 @@ export default Vue.extend({
|
||||||
visibility: 'public',
|
visibility: 'public',
|
||||||
visibleUsers: [],
|
visibleUsers: [],
|
||||||
autocomplete: null,
|
autocomplete: null,
|
||||||
draghover: false
|
draghover: false,
|
||||||
|
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -183,6 +188,10 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addTag(tag: string) {
|
||||||
|
insertTextAtCursor(this.$refs.text, ` #${tag} `);
|
||||||
|
},
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
this.$watch('text', () => this.saveDraft());
|
this.$watch('text', () => this.saveDraft());
|
||||||
this.$watch('poll', () => this.saveDraft());
|
this.$watch('poll', () => this.saveDraft());
|
||||||
|
@ -370,6 +379,13 @@ export default Vue.extend({
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.posting = false;
|
this.posting = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (this.text && this.text != '') {
|
||||||
|
const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
|
||||||
|
let history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
|
||||||
|
history = history.filter(x => !hashtags.includes(x));
|
||||||
|
localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history)));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
saveDraft() {
|
saveDraft() {
|
||||||
|
@ -478,6 +494,10 @@ root(isDark)
|
||||||
margin-right 16px
|
margin-right 16px
|
||||||
color isDark ? #fff : #666
|
color isDark ? #fff : #666
|
||||||
|
|
||||||
|
> .hashtags
|
||||||
|
> *
|
||||||
|
margin-right 8px
|
||||||
|
|
||||||
> .medias
|
> .medias
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-post-form">
|
<div class="mk-post-form">
|
||||||
|
<div class="form">
|
||||||
<header>
|
<header>
|
||||||
<button class="cancel" @click="cancel">%fa:times%</button>
|
<button class="cancel" @click="cancel">%fa:times%</button>
|
||||||
<div>
|
<div>
|
||||||
|
@ -37,11 +38,16 @@
|
||||||
</footer>
|
</footer>
|
||||||
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
|
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hashtags" v-if="recentHashtags.length > 0">
|
||||||
|
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||||
import * as XDraggable from 'vuedraggable';
|
import * as XDraggable from 'vuedraggable';
|
||||||
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
||||||
import getKao from '../../../common/scripts/get-kao';
|
import getKao from '../../../common/scripts/get-kao';
|
||||||
|
@ -85,7 +91,8 @@ export default Vue.extend({
|
||||||
visibility: 'public',
|
visibility: 'public',
|
||||||
visibleUsers: [],
|
visibleUsers: [],
|
||||||
useCw: false,
|
useCw: false,
|
||||||
cw: null
|
cw: null,
|
||||||
|
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -161,6 +168,10 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addTag(tag: string) {
|
||||||
|
insertTextAtCursor(this.$refs.text, ` #${tag} `);
|
||||||
|
},
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
(this.$refs.text as any).focus();
|
(this.$refs.text as any).focus();
|
||||||
},
|
},
|
||||||
|
@ -281,6 +292,13 @@ export default Vue.extend({
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
this.posting = false;
|
this.posting = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (this.text && this.text != '') {
|
||||||
|
const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
|
||||||
|
let history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
|
||||||
|
history = history.filter(x => !hashtags.includes(x));
|
||||||
|
localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history)));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
cancel() {
|
cancel() {
|
||||||
|
@ -302,18 +320,22 @@ root(isDark)
|
||||||
max-width 500px
|
max-width 500px
|
||||||
width calc(100% - 16px)
|
width calc(100% - 16px)
|
||||||
margin 8px auto
|
margin 8px auto
|
||||||
background isDark ? #282C37 : #fff
|
|
||||||
border-radius 8px
|
|
||||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
margin 16px auto
|
margin 16px auto
|
||||||
width calc(100% - 32px)
|
width calc(100% - 32px)
|
||||||
|
|
||||||
|
> .form
|
||||||
box-shadow 0 8px 32px rgba(#000, 0.1)
|
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||||
|
|
||||||
@media (min-width 600px)
|
@media (min-width 600px)
|
||||||
margin 32px auto
|
margin 32px auto
|
||||||
|
|
||||||
|
> .form
|
||||||
|
background isDark ? #282C37 : #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
z-index 1000
|
z-index 1000
|
||||||
height 50px
|
height 50px
|
||||||
|
@ -443,6 +465,12 @@ root(isDark)
|
||||||
border-radius 0
|
border-radius 0
|
||||||
box-shadow none
|
box-shadow none
|
||||||
|
|
||||||
|
> .hashtags
|
||||||
|
margin 8px
|
||||||
|
|
||||||
|
> *
|
||||||
|
margin-right 8px
|
||||||
|
|
||||||
.mk-post-form[data-darkmode]
|
.mk-post-form[data-darkmode]
|
||||||
root(true)
|
root(true)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue