最近使ったハッシュタグを表示するようにするなど
This commit is contained in:
syuilo
parent
cbdc061891
commit
8dc5375d55
5 changed files with 211 additions and 18358 deletions
1
.npmrc
1
.npmrc
|
|
@ -1 +1,2 @@
|
|||
save-exact=true
|
||||
package-lock = false
|
||||
|
|
|
|||
18198
package-lock.json
generated
18198
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -126,6 +126,7 @@
|
|||
"highlight.js": "9.12.0",
|
||||
"html-minifier": "3.5.19",
|
||||
"http-signature": "1.2.0",
|
||||
"insert-text-at-cursor": "0.1.1",
|
||||
"is-root": "2.0.0",
|
||||
"is-url": "1.2.4",
|
||||
"jquery": "3.3.1",
|
||||
|
|
@ -205,6 +206,7 @@
|
|||
"vue-json-tree-view": "2.1.4",
|
||||
"vue-loader": "15.2.6",
|
||||
"vue-router": "3.0.1",
|
||||
"vue-style-loader": "4.1.1",
|
||||
"vue-template-compiler": "2.5.16",
|
||||
"vuedraggable": "2.16.0",
|
||||
"vuex": "3.0.1",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
|
||||
<a @click="addVisibleUser">+ユーザーを追加</a>
|
||||
</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="内容への注釈 (オプション)">
|
||||
<textarea :class="{ with: (files.length != 0 || poll) }"
|
||||
ref="text" v-model="text" :disabled="posting"
|
||||
|
|
@ -46,6 +49,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||
import * as XDraggable from 'vuedraggable';
|
||||
import getKao from '../../../common/scripts/get-kao';
|
||||
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
||||
|
|
@ -91,7 +95,8 @@ export default Vue.extend({
|
|||
visibility: 'public',
|
||||
visibleUsers: [],
|
||||
autocomplete: null,
|
||||
draghover: false
|
||||
draghover: false,
|
||||
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -183,6 +188,10 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
methods: {
|
||||
addTag(tag: string) {
|
||||
insertTextAtCursor(this.$refs.text, ` #${tag} `);
|
||||
},
|
||||
|
||||
watch() {
|
||||
this.$watch('text', () => this.saveDraft());
|
||||
this.$watch('poll', () => this.saveDraft());
|
||||
|
|
@ -370,6 +379,13 @@ export default Vue.extend({
|
|||
}).then(() => {
|
||||
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() {
|
||||
|
|
@ -478,6 +494,10 @@ root(isDark)
|
|||
margin-right 16px
|
||||
color isDark ? #fff : #666
|
||||
|
||||
> .hashtags
|
||||
> *
|
||||
margin-right 8px
|
||||
|
||||
> .medias
|
||||
margin 0
|
||||
padding 0
|
||||
|
|
|
|||
|
|
@ -1,47 +1,53 @@
|
|||
<template>
|
||||
<div class="mk-post-form">
|
||||
<header>
|
||||
<button class="cancel" @click="cancel">%fa:times%</button>
|
||||
<div>
|
||||
<span class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</span>
|
||||
<span class="geo" v-if="geo">%fa:map-marker-alt%</span>
|
||||
<button class="submit" :disabled="!canPost" @click="post">{{ submitText }}</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="form">
|
||||
<mk-note-preview v-if="reply" :note="reply"/>
|
||||
<mk-note-preview v-if="renote" :note="renote"/>
|
||||
<div v-if="visibility == 'specified'" class="visibleUsers">
|
||||
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
|
||||
<a @click="addVisibleUser">+%i18n:@add-visible-user%</a>
|
||||
<header>
|
||||
<button class="cancel" @click="cancel">%fa:times%</button>
|
||||
<div>
|
||||
<span class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</span>
|
||||
<span class="geo" v-if="geo">%fa:map-marker-alt%</span>
|
||||
<button class="submit" :disabled="!canPost" @click="post">{{ submitText }}</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="form">
|
||||
<mk-note-preview v-if="reply" :note="reply"/>
|
||||
<mk-note-preview v-if="renote" :note="renote"/>
|
||||
<div v-if="visibility == 'specified'" class="visibleUsers">
|
||||
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
|
||||
<a @click="addVisibleUser">+%i18n:@add-visible-user%</a>
|
||||
</div>
|
||||
<input v-show="useCw" v-model="cw" placeholder="%i18n:@cw-placeholder%">
|
||||
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="'text'"></textarea>
|
||||
<div class="attaches" v-show="files.length != 0">
|
||||
<x-draggable class="files" :list="files" :options="{ animation: 150 }">
|
||||
<div class="file" v-for="file in files" :key="file.id">
|
||||
<div class="img" :style="`background-image: url(${file.url}?thumbnail&size=128)`" @click="detachMedia(file)"></div>
|
||||
</div>
|
||||
</x-draggable>
|
||||
</div>
|
||||
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false"/>
|
||||
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
|
||||
<footer>
|
||||
<button class="upload" @click="chooseFile">%fa:upload%</button>
|
||||
<button class="drive" @click="chooseFileFromDrive">%fa:cloud%</button>
|
||||
<button class="kao" @click="kao">%fa:R smile%</button>
|
||||
<button class="poll" @click="poll = true">%fa:chart-pie%</button>
|
||||
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
|
||||
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
|
||||
<button class="visibility" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
|
||||
</footer>
|
||||
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
|
||||
</div>
|
||||
<input v-show="useCw" v-model="cw" placeholder="%i18n:@cw-placeholder%">
|
||||
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="'text'"></textarea>
|
||||
<div class="attaches" v-show="files.length != 0">
|
||||
<x-draggable class="files" :list="files" :options="{ animation: 150 }">
|
||||
<div class="file" v-for="file in files" :key="file.id">
|
||||
<div class="img" :style="`background-image: url(${file.url}?thumbnail&size=128)`" @click="detachMedia(file)"></div>
|
||||
</div>
|
||||
</x-draggable>
|
||||
</div>
|
||||
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false"/>
|
||||
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
|
||||
<footer>
|
||||
<button class="upload" @click="chooseFile">%fa:upload%</button>
|
||||
<button class="drive" @click="chooseFileFromDrive">%fa:cloud%</button>
|
||||
<button class="kao" @click="kao">%fa:R smile%</button>
|
||||
<button class="poll" @click="poll = true">%fa:chart-pie%</button>
|
||||
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
|
||||
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
|
||||
<button class="visibility" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
|
||||
</footer>
|
||||
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
|
||||
</div>
|
||||
<div class="hashtags" v-if="recentHashtags.length > 0">
|
||||
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||
import * as XDraggable from 'vuedraggable';
|
||||
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
||||
import getKao from '../../../common/scripts/get-kao';
|
||||
|
|
@ -85,7 +91,8 @@ export default Vue.extend({
|
|||
visibility: 'public',
|
||||
visibleUsers: [],
|
||||
useCw: false,
|
||||
cw: null
|
||||
cw: null,
|
||||
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -161,6 +168,10 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
methods: {
|
||||
addTag(tag: string) {
|
||||
insertTextAtCursor(this.$refs.text, ` #${tag} `);
|
||||
},
|
||||
|
||||
focus() {
|
||||
(this.$refs.text as any).focus();
|
||||
},
|
||||
|
|
@ -281,6 +292,13 @@ export default Vue.extend({
|
|||
}).catch(err => {
|
||||
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() {
|
||||
|
|
@ -302,146 +320,156 @@ root(isDark)
|
|||
max-width 500px
|
||||
width calc(100% - 16px)
|
||||
margin 8px auto
|
||||
background isDark ? #282C37 : #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 16px auto
|
||||
width calc(100% - 32px)
|
||||
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||
|
||||
> .form
|
||||
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||
|
||||
@media (min-width 600px)
|
||||
margin 32px auto
|
||||
|
||||
> header
|
||||
z-index 1000
|
||||
height 50px
|
||||
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
|
||||
|
||||
> .cancel
|
||||
padding 0
|
||||
width 50px
|
||||
line-height 50px
|
||||
font-size 24px
|
||||
color isDark ? #9baec8 : #555
|
||||
|
||||
> div
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
color #657786
|
||||
|
||||
> .text-count
|
||||
line-height 50px
|
||||
|
||||
> .geo
|
||||
margin 0 8px
|
||||
line-height 50px
|
||||
|
||||
> .submit
|
||||
margin 8px
|
||||
padding 0 16px
|
||||
line-height 34px
|
||||
vertical-align bottom
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
border-radius 4px
|
||||
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
|
||||
> .form
|
||||
max-width 500px
|
||||
margin 0 auto
|
||||
background isDark ? #282C37 : #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||
|
||||
> .mk-note-preview
|
||||
padding 16px
|
||||
|
||||
> .visibleUsers
|
||||
margin-bottom 8px
|
||||
font-size 14px
|
||||
|
||||
> span
|
||||
margin-right 16px
|
||||
color isDark ? #fff : #666
|
||||
|
||||
> input
|
||||
z-index 1
|
||||
|
||||
> input
|
||||
> textarea
|
||||
display block
|
||||
padding 12px
|
||||
margin 0
|
||||
width 100%
|
||||
font-size 16px
|
||||
color isDark ? #fff : #333
|
||||
background isDark ? #191d23 : #fff
|
||||
border none
|
||||
border-radius 0
|
||||
> header
|
||||
z-index 1000
|
||||
height 50px
|
||||
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
|
||||
|
||||
&:disabled
|
||||
opacity 0.5
|
||||
|
||||
> textarea
|
||||
max-width 100%
|
||||
min-width 100%
|
||||
min-height 80px
|
||||
|
||||
> .attaches
|
||||
|
||||
> .files
|
||||
display block
|
||||
margin 0
|
||||
padding 4px
|
||||
list-style none
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .file
|
||||
display block
|
||||
float left
|
||||
margin 0
|
||||
padding 0
|
||||
border solid 4px transparent
|
||||
|
||||
> .img
|
||||
width 64px
|
||||
height 64px
|
||||
background-size cover
|
||||
background-position center center
|
||||
|
||||
> .mk-uploader
|
||||
margin 8px 0 0 0
|
||||
padding 8px
|
||||
|
||||
> .file
|
||||
display none
|
||||
|
||||
> footer
|
||||
white-space nowrap
|
||||
overflow auto
|
||||
-webkit-overflow-scrolling touch
|
||||
overflow-scrolling touch
|
||||
|
||||
> *
|
||||
display inline-block
|
||||
> .cancel
|
||||
padding 0
|
||||
margin 0
|
||||
width 48px
|
||||
height 48px
|
||||
font-size 20px
|
||||
width 50px
|
||||
line-height 50px
|
||||
font-size 24px
|
||||
color isDark ? #9baec8 : #555
|
||||
|
||||
> div
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
color #657786
|
||||
background transparent
|
||||
outline none
|
||||
|
||||
> .text-count
|
||||
line-height 50px
|
||||
|
||||
> .geo
|
||||
margin 0 8px
|
||||
line-height 50px
|
||||
|
||||
> .submit
|
||||
margin 8px
|
||||
padding 0 16px
|
||||
line-height 34px
|
||||
vertical-align bottom
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
border-radius 4px
|
||||
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
|
||||
> .form
|
||||
max-width 500px
|
||||
margin 0 auto
|
||||
|
||||
> .mk-note-preview
|
||||
padding 16px
|
||||
|
||||
> .visibleUsers
|
||||
margin-bottom 8px
|
||||
font-size 14px
|
||||
|
||||
> span
|
||||
margin-right 16px
|
||||
color isDark ? #fff : #666
|
||||
|
||||
> input
|
||||
z-index 1
|
||||
|
||||
> input
|
||||
> textarea
|
||||
display block
|
||||
padding 12px
|
||||
margin 0
|
||||
width 100%
|
||||
font-size 16px
|
||||
color isDark ? #fff : #333
|
||||
background isDark ? #191d23 : #fff
|
||||
border none
|
||||
border-radius 0
|
||||
box-shadow none
|
||||
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
|
||||
|
||||
&:disabled
|
||||
opacity 0.5
|
||||
|
||||
> textarea
|
||||
max-width 100%
|
||||
min-width 100%
|
||||
min-height 80px
|
||||
|
||||
> .attaches
|
||||
|
||||
> .files
|
||||
display block
|
||||
margin 0
|
||||
padding 4px
|
||||
list-style none
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .file
|
||||
display block
|
||||
float left
|
||||
margin 0
|
||||
padding 0
|
||||
border solid 4px transparent
|
||||
|
||||
> .img
|
||||
width 64px
|
||||
height 64px
|
||||
background-size cover
|
||||
background-position center center
|
||||
|
||||
> .mk-uploader
|
||||
margin 8px 0 0 0
|
||||
padding 8px
|
||||
|
||||
> .file
|
||||
display none
|
||||
|
||||
> footer
|
||||
white-space nowrap
|
||||
overflow auto
|
||||
-webkit-overflow-scrolling touch
|
||||
overflow-scrolling touch
|
||||
|
||||
> *
|
||||
display inline-block
|
||||
padding 0
|
||||
margin 0
|
||||
width 48px
|
||||
height 48px
|
||||
font-size 20px
|
||||
color #657786
|
||||
background transparent
|
||||
outline none
|
||||
border none
|
||||
border-radius 0
|
||||
box-shadow none
|
||||
|
||||
> .hashtags
|
||||
margin 8px
|
||||
|
||||
> *
|
||||
margin-right 8px
|
||||
|
||||
.mk-post-form[data-darkmode]
|
||||
root(true)
|
||||
|
|
|
|||
Loading…
Reference in a new issue