profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve post form attaches; Fix #4673, Resolve #2327, Resolve #2145 [v11] (#4674)

Browse source 
* improve post form attaches

* Fix

* chain

* 右クリックでも反応するように
This commit is contained in:
tamaina 2019-04-14 17:12:04 +09:00 • committed by syuilo
parent 2d5158c680
commit 487a3079cd
10 changed files with 169 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/client/app/admin/views/drive.vue
View file

@ -38,7 +38,7 @@
<div class="kidvdlkg" v-for="file in files">
<div @click="file._open = !file._open">
<div>
<div class="thumbnail" :style="thumbnail(file)"></div>
<x-file-thumbnail class="thumbnail" :file="file" fit="contain" @click="showFileMenu(file)"/>
</div>
<div>
<header>
@ -75,10 +75,15 @@ import Vue from 'vue';
import i18n from '../../i18n';
import { faCloud, faTerminal, faSearch } from '@fortawesome/free-solid-svg-icons';
import { faTrashAlt, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import XFileThumbnail from '../../common/views/components/drive-file-thumbnail.vue';
export default Vue.extend({
i18n: i18n('admin/views/drive.vue'),
components: {
XFileThumbnail
},
data() {
return {
file: null,
@ -151,13 +156,6 @@ export default Vue.extend({
});
},
thumbnail(file: any): any {
return {
'background-color': file.properties.avgColor || 'transparent',
'background-image': `url(${file.thumbnailUrl})`
};
},
async del(file: any) {
const process = async () => {
await this.$root.api('drive/files/delete', { fileId: file.id });
@ -179,9 +177,9 @@ export default Vue.extend({
this.$root.api('drive/files/update', {
fileId: file.id,
isSensitive: !file.isSensitive
}).then(() => {
file.isSensitive = !file.isSensitive;
});
file.isSensitive = !file.isSensitive;
},
async show() {

4
src/client/app/common/views/components/drive-file-thumbnail.vue
View file

@ -105,9 +105,7 @@ export default Vue.extend({
},
isThumbnailAvailable(): boolean {
return this.file.thumbnailUrl
? this.file.thumbnailUrl.endsWith('?thumbnail')
? (this.is === 'image' || this.is === 'video')
: true
? (this.is === 'image' || this.is === 'video')
: false;
},
background(): string {

139
src/client/app/common/views/components/post-form-attaches.vue Normal file
View file

@ -0,0 +1,139 @@
<template>
<div class="skeikyzd" v-show="files.length != 0">
<x-draggable class="files" :list="files" :options="{ animation: 150 }">
<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
<x-file-thumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
<img class="remove" @click.stop="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
<div class="sensitive" v-if="file.isSensitive">
<fa class="icon" :icon="faExclamationTriangle"/>
</div>
</div>
</x-draggable>
<p class="remain">{{ 4 - files.length }}/4</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import * as XDraggable from 'vuedraggable';
import XMenu from '../../../common/views/components/menu.vue';
import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import XFileThumbnail from './drive-file-thumbnail.vue'
export default Vue.extend({
i18n: i18n('common/views/components/post-form-attaches.vue'),
components: {
XDraggable,
XFileThumbnail
},
props: {
files: {
type: Object,
required: true
},
detachMediaFn: {
type: Object,
required: false
}
},
data() {
return {
faExclamationTriangle
};
},
methods: {
detachMedia(id) {
if (this.detachMediaFn) this.detachMediaFn(id)
else if (this.$parent.detachMedia) this.$parent.detachMedia(id)
},
toggleSensitive(file) {
this.$root.api('drive/files/update', {
fileId: file.id,
isSensitive: !file.isSensitive
}).then(() => {
file.isSensitive = !file.isSensitive;
});
},
showFileMenu(file, ev: MouseEvent) {
this.$root.new(XMenu, {
items: [{
type: 'item',
text: file.isSensitive ? this.$t('unmark-as-sensitive') : this.$t('mark-as-sensitive'),
icon: file.isSensitive ? faEyeSlash : faEye,
action: () => { this.toggleSensitive(file) }
}, {
type: 'item',
text: this.$t('attach-cancel'),
icon: faTimesCircle,
action: () => { this.detachMedia(file.id) }
}],
source: ev.currentTarget || ev.target
});
}
}
});
</script>
<style lang="stylus" scoped>
.skeikyzd
padding 4px
> .files
display flex
flex-wrap wrap
> div
width 64px
height 64px
margin 4px
cursor move
&:hover > .remove
display block
> .thumbnail
width 100%
height 100%
z-index 1
color var(--text)
> .remove
display none
position absolute
top -6px
right -6px
width 16px
height 16px
cursor pointer
z-index 1000
> .sensitive
display flex
position absolute
width 64px
height 64px
top 0
left 0
z-index 2
background rgba(17, 17, 17, .7)
color #fff
> .icon
margin auto
> .remain
display block
position absolute
top 8px
right 8px
margin 0
padding 0
color var(--primaryAlpha04)
</style>

45
src/client/app/common/views/widgets/post-form.vue
View file

@ -21,14 +21,7 @@
<fa :icon="['far', 'laugh']"/>
</button>
</div>
<div class="files" v-show="files.length != 0">
<x-draggable :list="files" :options="{ animation: 150 }">
<div v-for="file in files" :key="file.id">
<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
</div>
</x-draggable>
</div>
<x-post-form-attaches class="files" :files="files" :detachMediaFn="detachMedia"/>
<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
<mk-uploader ref="uploader" @uploaded="attachMedia"/>
<footer>
@ -45,7 +38,7 @@
import define from '../../../common/define-widget';
import i18n from '../../../i18n';
import insertTextAtCursor from 'insert-text-at-cursor';
import * as XDraggable from 'vuedraggable';
import XPostFormAttaches from '../components/post-form-attaches.vue';
export default define({
name: 'post-form',
@ -56,7 +49,7 @@ export default define({
i18n: i18n('desktop/views/widgets/post-form.vue'),
components: {
XDraggable
XPostFormAttaches
},
data() {
@ -249,38 +242,6 @@ export default define({
& + .emoji
opacity 0.7
> .files
> div
padding 4px
&:after
content ""
display block
clear both
> div
float left
border solid 4px transparent
cursor move
&:hover > .remove
display block
> .img
width 64px
height 64px
background-size cover
background-position center center
> .remove
display none
position absolute
top -6px
right -6px
width 16px
height 16px
cursor pointer
> input[type=file]
display none

1
src/client/app/desktop/views/components/drive.vue
View file

@ -769,7 +769,6 @@ export default Vue.extend({
> .mk-uploader
height 100px
padding 16px
background #fff
> input
display none

58
src/client/app/desktop/views/components/post-form.vue
View file

@ -27,15 +27,7 @@
<button class="emoji" @click="emoji" ref="emoji">
<fa :icon="['far', 'laugh']"/>
</button>
<div class="files" :class="{ with: poll }" v-show="files.length != 0">
<x-draggable :list="files" :options="{ animation: 150 }">
<div v-for="file in files" :key="file.id">
<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
</div>
</x-draggable>
<p class="remain">{{ 4 - files.length }}/4</p>
</div>
<x-post-form-attaches class="files" :class="{ with: poll }" :files="files"/>
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
</div>
</div>
@ -65,7 +57,6 @@
import Vue from 'vue';
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';
import { parse } from '../../../../../mfm/parse';
@ -74,13 +65,14 @@ import { erase, unique } from '../../../../../prelude/array';
import { length } from 'stringz';
import { toASCII } from 'punycode';
import extractMentions from '../../../../../misc/extract-mentions';
import XPostFormAttaches from '../../../common/views/components/post-form-attaches.vue';
export default Vue.extend({
i18n: i18n('desktop/views/components/post-form.vue'),
components: {
XDraggable,
MkVisibilityChooser
MkVisibilityChooser,
XPostFormAttaches
},
props: {
@ -513,7 +505,7 @@ export default Vue.extend({
kao() {
this.text += getFace();
}
},
}
});
</script>
@ -618,46 +610,6 @@ export default Vue.extend({
border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 0
> .remain
display block
position absolute
top 8px
right 8px
margin 0
padding 0
color var(--primaryAlpha04)
> div
padding 4px
&:after
content ""
display block
clear both
> div
float left
border solid 4px transparent
cursor move
&:hover > .remove
display block
> .img
width 64px
height 64px
background-size cover
background-position center center
> .remove
display none
position absolute
top -6px
right -6px
width 16px
height 16px
cursor pointer
> .mk-poll-editor
background var(--desktopPostFormTextareaBg)
border solid 1px var(--primaryAlpha01)

42
src/client/app/mobile/views/components/post-form.vue
View file

@ -21,13 +21,7 @@
</div>
<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="{ model: 'cw' }">
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: '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.thumbnailUrl})`" @click="detachMedia(file)"></div>
</div>
</x-draggable>
</div>
<x-post-form-attaches class="attaches" :files="files"/>
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
<footer>
@ -57,7 +51,6 @@
import Vue from 'vue';
import i18n from '../../../i18n';
import insertTextAtCursor from 'insert-text-at-cursor';
import * as XDraggable from 'vuedraggable';
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
import getFace from '../../../common/scripts/get-face';
import { parse } from '../../../../../mfm/parse';
@ -66,11 +59,12 @@ import { erase, unique } from '../../../../../prelude/array';
import { length } from 'stringz';
import { toASCII } from 'punycode';
import extractMentions from '../../../../../misc/extract-mentions';
import XPostFormAttaches from '../../../common/views/components/post-form-attaches.vue';
export default Vue.extend({
i18n: i18n('mobile/views/components/post-form.vue'),
components: {
XDraggable
XPostFormAttaches
},
props: {
@ -264,8 +258,8 @@ export default Vue.extend({
this.$emit('change-attached-files', this.files);
},
detachMedia(file) {
this.files = this.files.filter(x => x.id != file.id);
detachMedia(id) {
this.files = this.files.filter(x => x.id != id);
this.$emit('change-attached-files', this.files);
},
@ -481,32 +475,6 @@ export default Vue.extend({
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

8
src/models/repositories/drive-file.ts
View file

@ -18,12 +18,8 @@ export class DriveFileRepository extends Repository<DriveFile> {
);
}
public getPublicUrl(file: DriveFile, thumbnail = false): string {
if (thumbnail) {
return file.thumbnailUrl || file.webpublicUrl || file.url;
} else {
return file.webpublicUrl || file.thumbnailUrl || file.url;
}
public getPublicUrl(file: DriveFile, thumbnail = false): string | null {
return thumbnail ? (file.thumbnailUrl || file.webpublicUrl || null) : (file.webpublicUrl || file.thumbnailUrl || file.url);
}
public async clacDriveUsageOf(user: User['id'] | User): Promise<number> {

2
src/server/web/feed.ts
View file

@ -50,7 +50,7 @@ export default async function(user: User) {
date: note.createdAt,
description: note.cw || undefined,
content: note.text || undefined,
image: file ? DriveFiles.getPublicUrl(file) : undefined
image: file ? DriveFiles.getPublicUrl(file) || undefined : undefined
});
}