refactor: Composition APIへ移行 (#8138)

* components/drive-file-thumbnail.vue

* components/drive-select-dialog.vue

* components/drive-window.vue

* wip

* wip drive.file.vue, drive.vue

* fix prop

* wip(

* components/drive.folder.vue

* maybe ok

* ✌️

* fix variable

* FIX FOLDER VARIABLE

* components/emoji-picker-dialog.vue

* Hate `$emit`

* hate global property

* components/emoji-picker-window.vue

* components/emoji-picker.section.vue

* fix

* fixx

* wip components/emoji-picker.vue

* fix

* defineExpose

* ユニコード絵文字の型をもっといい感じに

* components/featured-photos.vue

* components/follow-button.vue

* forgot-password.vue

* forgot-password.vue

* 🎨

* fix
This commit is contained in:
tamaina 2022-01-18 23:06:16 +09:00 committed by GitHub
parent efb0ffc4ec
commit 7be09a4af9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 1608 additions and 1763 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="$emit('closed')"> <MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
<div class="mk-dialog"> <div class="mk-dialog">
<div v-if="icon" class="icon"> <div v-if="icon" class="icon">
<i :class="icon"></i> <i :class="icon"></i>
@ -28,8 +28,8 @@
</template> </template>
</MkSelect> </MkSelect>
<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons"> <div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton> <MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.locale.ok : i18n.locale.gotIt }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ $ts.cancel }}</MkButton> <MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.locale.cancel }}</MkButton>
</div> </div>
<div v-if="actions" class="buttons"> <div v-if="actions" class="buttons">
<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton> <MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
@ -44,6 +44,7 @@ import MkModal from '@/components/ui/modal.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import { i18n } from '@/i18n';
type Input = { type Input = {
type: HTMLInputElement['type']; type: HTMLInputElement['type'];

View File

@ -14,71 +14,42 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed } from 'vue';
import * as Misskey from 'misskey-js';
import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
import { ColdDeviceStorage } from '@/store';
export default defineComponent({ const props = defineProps<{
components: { file: Misskey.entities.DriveFile;
ImgWithBlurhash fit: string;
}, }>();
props: {
file: {
type: Object,
required: true
},
fit: {
type: String,
required: false,
default: 'cover'
},
},
data() {
return {
isContextmenuShowing: false,
isDragging: false,
}; const is = computed(() => {
}, if (props.file.type.startsWith('image/')) return 'image';
computed: { if (props.file.type.startsWith('video/')) return 'video';
is(): 'image' | 'video' | 'midi' | 'audio' | 'csv' | 'pdf' | 'textfile' | 'archive' | 'unknown' { if (props.file.type === 'audio/midi') return 'midi';
if (this.file.type.startsWith('image/')) return 'image'; if (props.file.type.startsWith('audio/')) return 'audio';
if (this.file.type.startsWith('video/')) return 'video'; if (props.file.type.endsWith('/csv')) return 'csv';
if (this.file.type === 'audio/midi') return 'midi'; if (props.file.type.endsWith('/pdf')) return 'pdf';
if (this.file.type.startsWith('audio/')) return 'audio'; if (props.file.type.startsWith('text/')) return 'textfile';
if (this.file.type.endsWith('/csv')) return 'csv'; if ([
if (this.file.type.endsWith('/pdf')) return 'pdf'; "application/zip",
if (this.file.type.startsWith('text/')) return 'textfile'; "application/x-cpio",
if ([ "application/x-bzip",
"application/zip", "application/x-bzip2",
"application/x-cpio", "application/java-archive",
"application/x-bzip", "application/x-rar-compressed",
"application/x-bzip2", "application/x-tar",
"application/java-archive", "application/gzip",
"application/x-rar-compressed", "application/x-7z-compressed"
"application/x-tar", ].some(e => e === props.file.type)) return 'archive';
"application/gzip", return 'unknown';
"application/x-7z-compressed" });
].some(e => e === this.file.type)) return 'archive';
return 'unknown'; const isThumbnailAvailable = computed(() => {
}, return props.file.thumbnailUrl
isThumbnailAvailable(): boolean { ? (is.value === 'image' as const || is.value === 'video')
return this.file.thumbnailUrl : false;
? (this.is === 'image' || this.is === 'video')
: false;
},
},
mounted() {
const audioTag = this.$refs.volumectrl as HTMLAudioElement;
if (audioTag) audioTag.volume = ColdDeviceStorage.get('mediaVolume');
},
methods: {
volumechange() {
const audioTag = this.$refs.volumectrl as HTMLAudioElement;
ColdDeviceStorage.set('mediaVolume', audioTag.volume);
}
}
}); });
</script> </script>

View File

@ -7,64 +7,51 @@
@click="cancel()" @click="cancel()"
@close="cancel()" @close="cancel()"
@ok="ok()" @ok="ok()"
@closed="$emit('closed')" @closed="emit('closed')"
> >
<template #header> <template #header>
{{ multiple ? ((type === 'file') ? $ts.selectFiles : $ts.selectFolders) : ((type === 'file') ? $ts.selectFile : $ts.selectFolder) }} {{ multiple ? ((type === 'file') ? i18n.locale.selectFiles : i18n.locale.selectFolders) : ((type === 'file') ? i18n.locale.selectFile : i18n.locale.selectFolder) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span> <span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template> </template>
<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/> <XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
</XModalWindow> </XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import XDrive from './drive.vue'; import XDrive from './drive.vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XModalWindow from '@/components/ui/modal-window.vue';
import number from '@/filters/number'; import number from '@/filters/number';
import { i18n } from '@/i18n';
export default defineComponent({ withDefaults(defineProps<{
components: { type?: 'file' | 'folder';
XDrive, multiple: boolean;
XModalWindow, }>(), {
}, type: 'file',
props: {
type: {
type: String,
required: false,
default: 'file'
},
multiple: {
type: Boolean,
default: false
}
},
emits: ['done', 'closed'],
data() {
return {
selected: []
};
},
methods: {
ok() {
this.$emit('done', this.selected);
this.$refs.dialog.close();
},
cancel() {
this.$emit('done');
this.$refs.dialog.close();
},
onChangeSelection(xs) {
this.selected = xs;
},
number
}
}); });
const emit = defineEmits<{
(e: 'done', r?: Misskey.entities.DriveFile[]): void;
(e: 'closed'): void;
}>();
const dialog = ref<InstanceType<typeof XModalWindow>>();
const selected = ref<Misskey.entities.DriveFile[]>([]);
function ok() {
emit('done', selected.value);
dialog.value?.close();
}
function cancel() {
emit('done');
dialog.value?.close();
}
function onChangeSelection(files: Misskey.entities.DriveFile[]) {
selected.value = files;
}
</script> </script>

View File

@ -3,42 +3,27 @@
:initial-width="800" :initial-width="800"
:initial-height="500" :initial-height="500"
:can-resize="true" :can-resize="true"
@closed="$emit('closed')" @closed="emit('closed')"
> >
<template #header> <template #header>
{{ $ts.drive }} {{ i18n.locale.drive }}
</template> </template>
<XDrive :initial-folder="initialFolder"/> <XDrive :initial-folder="initialFolder"/>
</XWindow> </XWindow>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import * as Misskey from 'misskey-js';
import XDrive from './drive.vue'; import XDrive from './drive.vue';
import XWindow from '@/components/ui/window.vue'; import XWindow from '@/components/ui/window.vue';
import { i18n } from '@/i18n';
export default defineComponent({ defineProps<{
components: { initialFolder?: Misskey.entities.DriveFolder;
XDrive, }>();
XWindow,
},
props: { const emit = defineEmits<{
initialFolder: { (e: 'closed'): void;
type: Object, }>();
required: false
},
},
emits: ['closed'],
data() {
return {
};
},
methods: {
}
});
</script> </script>

View File

@ -8,17 +8,17 @@
@dragstart="onDragstart" @dragstart="onDragstart"
@dragend="onDragend" @dragend="onDragend"
> >
<div v-if="$i.avatarId == file.id" class="label"> <div v-if="$i?.avatarId == file.id" class="label">
<img src="/client-assets/label.svg"/> <img src="/client-assets/label.svg"/>
<p>{{ $ts.avatar }}</p> <p>{{ i18n.locale.avatar }}</p>
</div> </div>
<div v-if="$i.bannerId == file.id" class="label"> <div v-if="$i?.bannerId == file.id" class="label">
<img src="/client-assets/label.svg"/> <img src="/client-assets/label.svg"/>
<p>{{ $ts.banner }}</p> <p>{{ i18n.locale.banner }}</p>
</div> </div>
<div v-if="file.isSensitive" class="label red"> <div v-if="file.isSensitive" class="label red">
<img src="/client-assets/label-red.svg"/> <img src="/client-assets/label-red.svg"/>
<p>{{ $ts.nsfw }}</p> <p>{{ i18n.locale.nsfw }}</p>
</div> </div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/> <MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
@ -30,179 +30,155 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed, ref } from 'vue';
import * as Misskey from 'misskey-js';
import copyToClipboard from '@/scripts/copy-to-clipboard'; import copyToClipboard from '@/scripts/copy-to-clipboard';
import MkDriveFileThumbnail from './drive-file-thumbnail.vue'; import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
import bytes from '@/filters/bytes'; import bytes from '@/filters/bytes';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n';
import { $i } from '@/account';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { file: Misskey.entities.DriveFile;
MkDriveFileThumbnail isSelected?: boolean;
}, selectMode?: boolean;
}>(), {
props: { isSelected: false,
file: { selectMode: false,
type: Object,
required: true,
},
isSelected: {
type: Boolean,
required: false,
default: false,
},
selectMode: {
type: Boolean,
required: false,
default: false,
}
},
emits: ['chosen'],
data() {
return {
isDragging: false
};
},
computed: {
// TODO: parent
browser(): any {
return this.$parent;
},
title(): string {
return `${this.file.name}\n${this.file.type} ${bytes(this.file.size)}`;
}
},
methods: {
getMenu() {
return [{
text: this.$ts.rename,
icon: 'fas fa-i-cursor',
action: this.rename
}, {
text: this.file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
icon: this.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
action: this.toggleSensitive
}, {
text: this.$ts.describeFile,
icon: 'fas fa-i-cursor',
action: this.describe
}, null, {
text: this.$ts.copyUrl,
icon: 'fas fa-link',
action: this.copyUrl
}, {
type: 'a',
href: this.file.url,
target: '_blank',
text: this.$ts.download,
icon: 'fas fa-download',
download: this.file.name
}, null, {
text: this.$ts.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: this.deleteFile
}];
},
onClick(ev) {
if (this.selectMode) {
this.$emit('chosen', this.file);
} else {
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
}
},
onContextmenu(e) {
os.contextMenu(this.getMenu(), e);
},
onDragstart(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(this.file));
this.isDragging = true;
//
// (=)
this.browser.isDragSource = true;
},
onDragend(e) {
this.isDragging = false;
this.browser.isDragSource = false;
},
rename() {
os.inputText({
title: this.$ts.renameFile,
placeholder: this.$ts.inputNewFileName,
default: this.file.name,
allowEmpty: false
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/files/update', {
fileId: this.file.id,
name: name
});
});
},
describe() {
os.popup(import('@/components/media-caption.vue'), {
title: this.$ts.describeFile,
input: {
placeholder: this.$ts.inputNewDescription,
default: this.file.comment !== null ? this.file.comment : '',
},
image: this.file
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result;
os.api('drive/files/update', {
fileId: this.file.id,
comment: comment.length == 0 ? null : comment
});
}
}, 'closed');
},
toggleSensitive() {
os.api('drive/files/update', {
fileId: this.file.id,
isSensitive: !this.file.isSensitive
});
},
copyUrl() {
copyToClipboard(this.file.url);
os.success();
},
addApp() {
alert('not implemented yet');
},
async deleteFile() {
const { canceled } = await os.confirm({
type: 'warning',
text: this.$t('driveFileDeleteConfirm', { name: this.file.name }),
});
if (canceled) return;
os.api('drive/files/delete', {
fileId: this.file.id
});
},
bytes
}
}); });
const emit = defineEmits<{
(e: 'chosen', r: Misskey.entities.DriveFile): void;
(e: 'dragstart'): void;
(e: 'dragend'): void;
}>();
const isDragging = ref(false);
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
function getMenu() {
return [{
text: i18n.locale.rename,
icon: 'fas fa-i-cursor',
action: rename
}, {
text: props.file.isSensitive ? i18n.locale.unmarkAsSensitive : i18n.locale.markAsSensitive,
icon: props.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
action: toggleSensitive
}, {
text: i18n.locale.describeFile,
icon: 'fas fa-i-cursor',
action: describe
}, null, {
text: i18n.locale.copyUrl,
icon: 'fas fa-link',
action: copyUrl
}, {
type: 'a',
href: props.file.url,
target: '_blank',
text: i18n.locale.download,
icon: 'fas fa-download',
download: props.file.name
}, null, {
text: i18n.locale.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: deleteFile
}];
}
function onClick(ev: MouseEvent) {
if (props.selectMode) {
emit('chosen', props.file);
} else {
os.popupMenu(getMenu(), (ev.currentTarget || ev.target || undefined) as HTMLElement | undefined);
}
}
function onContextmenu(e: MouseEvent) {
os.contextMenu(getMenu(), e);
}
function onDragstart(e: DragEvent) {
if (e.dataTransfer) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
}
isDragging.value = true;
emit('dragstart');
}
function onDragend() {
isDragging.value = false;
emit('dragend');
}
function rename() {
os.inputText({
title: i18n.locale.renameFile,
placeholder: i18n.locale.inputNewFileName,
default: props.file.name,
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/files/update', {
fileId: props.file.id,
name: name
});
});
}
function describe() {
os.popup(import('@/components/media-caption.vue'), {
title: i18n.locale.describeFile,
input: {
placeholder: i18n.locale.inputNewDescription,
default: props.file.comment !== null ? props.file.comment : '',
},
image: props.file
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result;
os.api('drive/files/update', {
fileId: props.file.id,
comment: comment.length == 0 ? null : comment
});
}
}, 'closed');
}
function toggleSensitive() {
os.api('drive/files/update', {
fileId: props.file.id,
isSensitive: !props.file.isSensitive
});
}
function copyUrl() {
copyToClipboard(props.file.url);
os.success();
}
/*
function addApp() {
alert('not implemented yet');
}
*/
async function deleteFile() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
});
if (canceled) return;
os.api('drive/files/delete', {
fileId: props.file.id
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -19,243 +19,233 @@
<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template> <template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
{{ folder.name }} {{ folder.name }}
</p> </p>
<p v-if="$store.state.uploadFolder == folder.id" class="upload"> <p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
{{ $ts.uploadFolder }} {{ i18n.locale.uploadFolder }}
</p> </p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button> <button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed, ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { folder: Misskey.entities.DriveFolder;
folder: { isSelected?: boolean;
type: Object, selectMode?: boolean;
required: true, }>(), {
}, isSelected: false,
isSelected: { selectMode: false,
type: Boolean,
required: false,
default: false,
},
selectMode: {
type: Boolean,
required: false,
default: false,
}
},
emits: ['chosen'],
data() {
return {
hover: false,
draghover: false,
isDragging: false,
};
},
computed: {
browser(): any {
return this.$parent;
},
title(): string {
return this.folder.name;
}
},
methods: {
checkboxClicked(e) {
this.$emit('chosen', this.folder);
},
onClick() {
this.browser.move(this.folder);
},
onMouseover() {
this.hover = true;
},
onMouseout() {
this.hover = false
},
onDragover(e) {
//
if (this.isDragging) {
//
e.dataTransfer.dropEffect = 'none';
return;
}
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
} else {
e.dataTransfer.dropEffect = 'none';
}
},
onDragenter() {
if (!this.isDragging) this.draghover = true;
},
onDragleave() {
this.draghover = false;
},
onDrop(e) {
this.draghover = false;
//
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
this.browser.upload(file, this.folder);
}
return;
}
//#region
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
this.browser.removeFile(file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: this.folder.id
});
}
//#endregion
//#region
const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder != '') {
const folder = JSON.parse(driveFolder);
// reject
if (folder.id == this.folder.id) return;
this.browser.removeFolder(folder.id);
os.api('drive/folders/update', {
folderId: folder.id,
parentId: this.folder.id
}).then(() => {
// noop
}).catch(err => {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: this.$ts.unableToProcess,
text: this.$ts.circularReferenceFolder
});
break;
default:
os.alert({
type: 'error',
text: this.$ts.somethingHappened
});
}
});
}
//#endregion
},
onDragstart(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(this.folder));
this.isDragging = true;
//
// (=)
this.browser.isDragSource = true;
},
onDragend() {
this.isDragging = false;
this.browser.isDragSource = false;
},
go() {
this.browser.move(this.folder.id);
},
newWindow() {
this.browser.newWindow(this.folder);
},
rename() {
os.inputText({
title: this.$ts.renameFolder,
placeholder: this.$ts.inputNewFolderName,
default: this.folder.name
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/update', {
folderId: this.folder.id,
name: name
});
});
},
deleteFolder() {
os.api('drive/folders/delete', {
folderId: this.folder.id
}).then(() => {
if (this.$store.state.uploadFolder === this.folder.id) {
this.$store.set('uploadFolder', null);
}
}).catch(err => {
switch(err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: this.$ts.unableToDelete,
text: this.$ts.hasChildFilesOrFolders
});
break;
default:
os.alert({
type: 'error',
text: this.$ts.unableToDelete
});
}
});
},
setAsUploadFolder() {
this.$store.set('uploadFolder', this.folder.id);
},
onContextmenu(e) {
os.contextMenu([{
text: this.$ts.openInWindow,
icon: 'fas fa-window-restore',
action: () => {
os.popup(import('./drive-window.vue'), {
initialFolder: this.folder
}, {
}, 'closed');
}
}, null, {
text: this.$ts.rename,
icon: 'fas fa-i-cursor',
action: this.rename
}, null, {
text: this.$ts.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: this.deleteFolder
}], e);
},
}
}); });
const emit = defineEmits<{
(e: 'chosen', v: Misskey.entities.DriveFolder): void;
(e: 'move', v: Misskey.entities.DriveFolder): void;
(e: 'upload', file: File, folder: Misskey.entities.DriveFolder);
(e: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
(e: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
(e: 'dragstart'): void;
(e: 'dragend'): void;
}>();
const hover = ref(false);
const draghover = ref(false);
const isDragging = ref(false);
const title = computed(() => props.folder.name);
function checkboxClicked(e) {
emit('chosen', props.folder);
}
function onClick() {
emit('move', props.folder);
}
function onMouseover() {
hover.value = true;
}
function onMouseout() {
hover.value = false
}
function onDragover(e: DragEvent) {
if (!e.dataTransfer) return;
//
if (isDragging.value) {
//
e.dataTransfer.dropEffect = 'none';
return;
}
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
} else {
e.dataTransfer.dropEffect = 'none';
}
}
function onDragenter() {
if (!isDragging.value) draghover.value = true;
}
function onDragleave() {
draghover.value = false;
}
function onDrop(e: DragEvent) {
draghover.value = false;
if (!e.dataTransfer) return;
//
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
emit('upload', file, props.folder);
}
return;
}
//#region
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
emit('removeFile', file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder.id
});
}
//#endregion
//#region
const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder != '') {
const folder = JSON.parse(driveFolder);
// reject
if (folder.id == props.folder.id) return;
emit('removeFolder', folder.id);
os.api('drive/folders/update', {
folderId: folder.id,
parentId: props.folder.id
}).then(() => {
// noop
}).catch(err => {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: i18n.locale.unableToProcess,
text: i18n.locale.circularReferenceFolder
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.somethingHappened
});
}
});
}
//#endregion
}
function onDragstart(e: DragEvent) {
if (!e.dataTransfer) return;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
isDragging.value = true;
//
// (=)
emit('dragstart');
}
function onDragend() {
isDragging.value = false;
emit('dragend');
}
function go() {
emit('move', props.folder.id);
}
function rename() {
os.inputText({
title: i18n.locale.renameFolder,
placeholder: i18n.locale.inputNewFolderName,
default: props.folder.name
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/update', {
folderId: props.folder.id,
name: name
});
});
}
function deleteFolder() {
os.api('drive/folders/delete', {
folderId: props.folder.id
}).then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch(err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.locale.unableToDelete,
text: i18n.locale.hasChildFilesOrFolders
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.unableToDelete
});
}
});
}
function setAsUploadFolder() {
defaultStore.set('uploadFolder', props.folder.id);
}
function onContextmenu(e) {
os.contextMenu([{
text: i18n.locale.openInWindow,
icon: 'fas fa-window-restore',
action: () => {
os.popup(import('./drive-window.vue'), {
initialFolder: props.folder
}, {
}, 'closed');
}
}, null, {
text: i18n.locale.rename,
icon: 'fas fa-i-cursor',
action: rename,
}, null, {
text: i18n.locale.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: deleteFolder,
}], e);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -8,114 +8,111 @@
@drop.stop="onDrop" @drop.stop="onDrop"
> >
<i v-if="folder == null" class="fas fa-cloud"></i> <i v-if="folder == null" class="fas fa-cloud"></i>
<span>{{ folder == null ? $ts.drive : folder.name }}</span> <span>{{ folder == null ? i18n.locale.drive : folder.name }}</span>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n';
export default defineComponent({ const props = defineProps<{
props: { folder?: Misskey.entities.DriveFolder;
folder: { parentFolder: Misskey.entities.DriveFolder | null;
type: Object, }>();
required: false,
}
},
data() { const emit = defineEmits<{
return { (e: 'move', v?: Misskey.entities.DriveFolder): void;
hover: false, (e: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
draghover: false, (e: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
}; (e: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
}, }>();
computed: { const hover = ref(false);
browser(): any { const draghover = ref(false);
return this.$parent;
}
},
methods: { function onClick() {
onClick() { emit('move', props.folder);
this.browser.move(this.folder); }
},
onMouseover() { function onMouseover() {
this.hover = true; hover.value = true;
}, }
onMouseout() { function onMouseout() {
this.hover = false; hover.value = false;
}, }
onDragover(e) { function onDragover(e: DragEvent) {
// if (!e.dataTransfer) return;
if (this.folder == null && this.browser.folder == null) {
e.dataTransfer.dropEffect = 'none';
}
const isFile = e.dataTransfer.items[0].kind == 'file'; //
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_; if (props.folder == null && props.parentFolder == null) {
const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_; e.dataTransfer.dropEffect = 'none';
if (isFile || isDriveFile || isDriveFolder) {
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
} else {
e.dataTransfer.dropEffect = 'none';
}
return false;
},
onDragenter() {
if (this.folder || this.browser.folder) this.draghover = true;
},
onDragleave() {
if (this.folder || this.browser.folder) this.draghover = false;
},
onDrop(e) {
this.draghover = false;
//
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
this.browser.upload(file, this.folder);
}
return;
}
//#region
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
this.browser.removeFile(file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: this.folder ? this.folder.id : null
});
}
//#endregion
//#region
const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder != '') {
const folder = JSON.parse(driveFolder);
// reject
if (this.folder && folder.id == this.folder.id) return;
this.browser.removeFolder(folder.id);
os.api('drive/folders/update', {
folderId: folder.id,
parentId: this.folder ? this.folder.id : null
});
}
//#endregion
}
} }
});
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
} else {
e.dataTransfer.dropEffect = 'none';
}
return false;
}
function onDragenter() {
if (props.folder || props.parentFolder) draghover.value = true;
}
function onDragleave() {
if (props.folder || props.parentFolder) draghover.value = false;
}
function onDrop(e: DragEvent) {
draghover.value = false;
if (!e.dataTransfer) return;
//
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
emit('upload', file, props.folder);
}
return;
}
//#region
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
emit('removeFile', file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder ? props.folder.id : null
});
}
//#endregion
//#region
const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder != '') {
const folder = JSON.parse(driveFolder);
// reject
if (props.folder && folder.id == props.folder.id) return;
emit('removeFolder', folder.id);
os.api('drive/folders/update', {
folderId: folder.id,
parentId: props.folder ? props.folder.id : null
});
}
//#endregion
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

File diff suppressed because it is too large Load Diff

View File

@ -1,58 +1,65 @@
<template> <template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'middle'" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> <MkModal
<MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ drawer: type === 'drawer' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" :as-drawer="type === 'drawer'" :max-height="maxHeight" @chosen="chosen"/> ref="modal"
v-slot="{ type, maxHeight }"
:z-priority="'middle'"
:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
:transparent-bg="true"
:manual-showing="manualShowing"
:src="src"
@click="modal?.close()"
@opening="opening"
@close="emit('close')"
@closed="emit('closed')"
>
<MkEmojiPicker
ref="picker"
class="ryghynhb _popup _shadow"
:class="{ drawer: type === 'drawer' }"
:show-pinned="showPinned"
:as-reaction-picker="asReactionPicker"
:as-drawer="type === 'drawer'"
:max-height="maxHeight"
@chosen="chosen"
/>
</MkModal> </MkModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, markRaw } from 'vue'; import { ref } from 'vue';
import MkModal from '@/components/ui/modal.vue'; import MkModal from '@/components/ui/modal.vue';
import MkEmojiPicker from '@/components/emoji-picker.vue'; import MkEmojiPicker from '@/components/emoji-picker.vue';
import { defaultStore } from '@/store';
export default defineComponent({ withDefaults(defineProps<{
components: { manualShowing?: boolean;
MkModal, src?: HTMLElement;
MkEmojiPicker, showPinned?: boolean;
}, asReactionPicker?: boolean;
}>(), {
props: { manualShowing: false,
manualShowing: { showPinned: true,
type: Boolean, asReactionPicker: false,
required: false,
default: null,
},
src: {
required: false
},
showPinned: {
required: false,
default: true
},
asReactionPicker: {
required: false
},
},
emits: ['done', 'close', 'closed'],
data() {
return {
};
},
methods: {
chosen(emoji: any) {
this.$emit('done', emoji);
this.$refs.modal.close();
},
opening() {
this.$refs.picker.reset();
this.$refs.picker.focus();
}
}
}); });
const emit = defineEmits<{
(e: 'done', v: any): void;
(e: 'close'): void;
(e: 'closed'): void;
}>();
const modal = ref<InstanceType<typeof MkModal>>();
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
function chosen(emoji: any) {
emit('done', emoji);
modal.value?.close();
}
function opening() {
picker.value?.reset();
picker.value?.focus();
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -5,50 +5,33 @@
:can-resize="false" :can-resize="false"
:mini="true" :mini="true"
:front="true" :front="true"
@closed="$emit('closed')" @closed="emit('closed')"
> >
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/> <MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/>
</MkWindow> </MkWindow>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, markRaw } from 'vue'; import { } from 'vue';
import MkWindow from '@/components/ui/window.vue'; import MkWindow from '@/components/ui/window.vue';
import MkEmojiPicker from '@/components/emoji-picker.vue'; import MkEmojiPicker from '@/components/emoji-picker.vue';
export default defineComponent({ withDefaults(defineProps<{
components: { src?: HTMLElement;
MkWindow, showPinned?: boolean;
MkEmojiPicker, asReactionPicker?: boolean;
}, }>(), {
showPinned: true,
props: {
src: {
required: false
},
showPinned: {
required: false,
default: true
},
asReactionPicker: {
required: false
},
},
emits: ['chosen', 'closed'],
data() {
return {
};
},
methods: {
chosen(emoji: any) {
this.$emit('chosen', emoji);
},
}
}); });
const emit = defineEmits<{
(e: 'chosen', v: any): void;
(e: 'closed'): void;
}>();
function chosen(emoji: any) {
emit('chosen', emoji);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -7,7 +7,7 @@
<button v-for="emoji in emojis" <button v-for="emoji in emojis"
:key="emoji" :key="emoji"
class="_button" class="_button"
@click="chosen(emoji, $event)" @click="emit('chosen', emoji, $event)"
> >
<MkEmoji :emoji="emoji" :normal="true"/> <MkEmoji :emoji="emoji" :normal="true"/>
</button> </button>
@ -15,35 +15,19 @@
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, markRaw } from 'vue'; import { ref } from 'vue';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
export default defineComponent({ const props = defineProps<{
props: { emojis: string[];
emojis: { initialShown?: boolean;
required: true, }>();
},
initialShown: {
required: false
}
},
emits: ['chosen'], const emit = defineEmits<{
(e: 'chosen', v: string, ev: MouseEvent): void;
}>();
data() { const shown = ref(!!props.initialShown);
return {
getStaticImageUrl,
shown: this.initialShown,
};
},
methods: {
chosen(emoji: any, ev) {
this.$parent.chosen(emoji, ev);
},
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,18 +1,18 @@
<template> <template>
<div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : null }"> <div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()"> <input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.locale.search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis"> <div ref="emojis" class="emojis">
<section class="result"> <section class="result">
<div v-if="searchResultCustom.length > 0"> <div v-if="searchResultCustom.length > 0">
<button v-for="emoji in searchResultCustom" <button v-for="emoji in searchResultCustom"
:key="emoji" :key="emoji.id"
class="_button" class="_button"
:title="emoji.name" :title="emoji.name"
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/> <!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
<img v-else :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/> <img :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button> </button>
</div> </div>
<div v-if="searchResultUnicode.length > 0"> <div v-if="searchResultUnicode.length > 0">
@ -43,9 +43,9 @@
</section> </section>
<section> <section>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ $ts.recentUsed }}</header> <header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.locale.recentUsed }}</header>
<div> <div>
<button v-for="emoji in $store.state.recentlyUsedEmojis" <button v-for="emoji in recentlyUsedEmojis"
:key="emoji" :key="emoji"
class="_button" class="_button"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
@ -56,12 +56,12 @@
</section> </section>
</div> </div>
<div> <div>
<header class="_acrylic">{{ $ts.customEmojis }}</header> <header class="_acrylic">{{ i18n.locale.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')">{{ category || $ts.other }}</XSection> <XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.locale.other }}</XSection>
</div> </div>
<div> <div>
<header class="_acrylic">{{ $ts.emoji }}</header> <header class="_acrylic">{{ i18n.locale.emoji }}</header>
<XSection v-for="category in categories" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)">{{ category }}</XSection> <XSection v-for="category in categories" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div> </div>
</div> </div>
<div class="tabs"> <div class="tabs">
@ -73,277 +73,272 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, markRaw } from 'vue'; import { ref, computed, watch, onMounted } from 'vue';
import { emojilist } from '@/scripts/emojilist'; import * as Misskey from 'misskey-js';
import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import Ripple from '@/components/ripple.vue'; import Ripple from '@/components/ripple.vue';
import * as os from '@/os'; import * as os from '@/os';
import { isTouchUsing } from '@/scripts/touch'; import { isTouchUsing } from '@/scripts/touch';
import { isMobile } from '@/scripts/is-mobile'; import { isMobile } from '@/scripts/is-mobile';
import { emojiCategories } from '@/instance'; import { emojiCategories, instance } from '@/instance';
import XSection from './emoji-picker.section.vue'; import XSection from './emoji-picker.section.vue';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { showPinned?: boolean;
XSection asReactionPicker?: boolean;
}, maxHeight?: number;
asDrawer?: boolean;
}>(), {
showPinned: true,
});
props: { const emit = defineEmits<{
showPinned: { (e: 'chosen', v: string): void;
required: false, }>();
default: true,
},
asReactionPicker: {
required: false,
},
maxHeight: {
type: Number,
required: false,
},
asDrawer: {
type: Boolean,
required: false
},
},
emits: ['chosen'], const search = ref<HTMLInputElement>();
const emojis = ref<HTMLDivElement>();
data() { const {
return { reactions: pinned,
emojilist: markRaw(emojilist), reactionPickerWidth,
getStaticImageUrl, reactionPickerHeight,
pinned: this.$store.reactiveState.reactions, disableShowingAnimatedImages,
width: this.asReactionPicker ? this.$store.state.reactionPickerWidth : 3, recentlyUsedEmojis,
height: this.asReactionPicker ? this.$store.state.reactionPickerHeight : 2, } = defaultStore.reactiveState;
big: this.asReactionPicker ? isTouchUsing : false,
customEmojiCategories: emojiCategories,
customEmojis: this.$instance.emojis,
q: null,
searchResultCustom: [],
searchResultUnicode: [],
tab: 'index',
categories: ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'],
};
},
watch: { const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
q() { const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
this.$refs.emojis.scrollTop = 0; const big = props.asReactionPicker ? isTouchUsing : false;
const customEmojiCategories = emojiCategories;
const customEmojis = instance.emojis;
const q = ref<string | null>(null);
const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
if (this.q == null || this.q === '') { watch(q, () => {
this.searchResultCustom = []; if (emojis.value) emojis.value.scrollTop = 0;
this.searchResultUnicode = [];
return;
}
const q = this.q.replace(/:/g, ''); if (q.value == null || q.value === '') {
searchResultCustom.value = [];
const searchCustom = () => { searchResultUnicode.value = [];
const max = 8; return;
const emojis = this.customEmojis;
const matches = new Set();
const exactMatch = emojis.find(e => e.name === q);
if (exactMatch) matches.add(exactMatch);
if (q.includes(' ')) { // AND
const keywords = q.split(' ');
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
} else {
for (const emoji of emojis) {
if (emoji.name.startsWith(q)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.startsWith(q))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.name.includes(q)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.includes(q))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
}
return matches;
};
const searchUnicode = () => {
const max = 8;
const emojis = this.emojilist;
const matches = new Set();
const exactMatch = emojis.find(e => e.name === q);
if (exactMatch) matches.add(exactMatch);
if (q.includes(' ')) { // AND
const keywords = q.split(' ');
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
} else {
for (const emoji of emojis) {
if (emoji.name.startsWith(q)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.startsWith(q))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.name.includes(q)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.includes(q))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
}
return matches;
};
this.searchResultCustom = Array.from(searchCustom());
this.searchResultUnicode = Array.from(searchUnicode());
}
},
mounted() {
this.focus();
},
methods: {
focus() {
if (!isMobile && !isTouchUsing) {
this.$refs.search.focus({
preventScroll: true
});
}
},
reset() {
this.$refs.emojis.scrollTop = 0;
this.q = '';
},
getKey(emoji: any) {
return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
},
chosen(emoji: any, ev) {
if (ev) {
const el = ev.currentTarget || ev.target;
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2);
os.popup(Ripple, { x, y }, {}, 'end');
}
const key = this.getKey(emoji);
this.$emit('chosen', key);
// 使
if (!this.pinned.includes(key)) {
let recents = this.$store.state.recentlyUsedEmojis;
recents = recents.filter((e: any) => e !== key);
recents.unshift(key);
this.$store.set('recentlyUsedEmojis', recents.splice(0, 32));
}
},
paste(event) {
const paste = (event.clipboardData || window.clipboardData).getData('text');
if (this.done(paste)) {
event.preventDefault();
}
},
done(query) {
if (query == null) query = this.q;
if (query == null) return;
const q = query.replace(/:/g, '');
const exactMatchCustom = this.customEmojis.find(e => e.name === q);
if (exactMatchCustom) {
this.chosen(exactMatchCustom);
return true;
}
const exactMatchUnicode = this.emojilist.find(e => e.char === q || e.name === q);
if (exactMatchUnicode) {
this.chosen(exactMatchUnicode);
return true;
}
if (this.searchResultCustom.length > 0) {
this.chosen(this.searchResultCustom[0]);
return true;
}
if (this.searchResultUnicode.length > 0) {
this.chosen(this.searchResultUnicode[0]);
return true;
}
},
} }
const newQ = q.value.replace(/:/g, '');
const searchCustom = () => {
const max = 8;
const emojis = customEmojis;
const matches = new Set<Misskey.entities.CustomEmoji>();
const exactMatch = emojis.find(e => e.name === newQ);
if (exactMatch) matches.add(exactMatch);
if (newQ.includes(' ')) { // AND
const keywords = newQ.split(' ');
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
} else {
for (const emoji of emojis) {
if (emoji.name.startsWith(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.name.includes(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.includes(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
}
return matches;
};
const searchUnicode = () => {
const max = 8;
const emojis = emojilist;
const matches = new Set<UnicodeEmojiDef>();
const exactMatch = emojis.find(e => e.name === newQ);
if (exactMatch) matches.add(exactMatch);
if (newQ.includes(' ')) { // AND
const keywords = newQ.split(' ');
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
} else {
for (const emoji of emojis) {
if (emoji.name.startsWith(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.name.includes(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
}
}
return matches;
};
searchResultCustom.value = Array.from(searchCustom());
searchResultUnicode.value = Array.from(searchUnicode());
});
function focus() {
if (!isMobile && !isTouchUsing) {
search.value?.focus({
preventScroll: true
});
}
}
function reset() {
if (emojis.value) emojis.value.scrollTop = 0;
q.value = '';
}
function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
}
function chosen(emoji: any, ev?: MouseEvent) {
const el = ev && (ev.currentTarget || ev.target) as HTMLElement | null | undefined;
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2);
os.popup(Ripple, { x, y }, {}, 'end');
}
const key = getKey(emoji);
emit('chosen', key);
// 使
if (!pinned.value.includes(key)) {
let recents = defaultStore.state.recentlyUsedEmojis;
recents = recents.filter((e: any) => e !== key);
recents.unshift(key);
defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
}
}
function paste(event: ClipboardEvent) {
const paste = (event.clipboardData || window.clipboardData).getData('text');
if (done(paste)) {
event.preventDefault();
}
}
function done(query?: any): boolean | void {
if (query == null) query = q.value;
if (query == null || typeof query !== 'string') return;
const q2 = query.replace(/:/g, '');
const exactMatchCustom = customEmojis.find(e => e.name === q2);
if (exactMatchCustom) {
chosen(exactMatchCustom);
return true;
}
const exactMatchUnicode = emojilist.find(e => e.char === q2 || e.name === q2);
if (exactMatchUnicode) {
chosen(exactMatchUnicode);
return true;
}
if (searchResultCustom.value.length > 0) {
chosen(searchResultCustom.value[0]);
return true;
}
if (searchResultUnicode.value.length > 0) {
chosen(searchResultUnicode.value[0]);
return true;
}
}
onMounted(() => {
focus();
});
defineExpose({
focus,
reset,
}); });
</script> </script>

View File

@ -2,25 +2,15 @@
<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div> <div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
components: {
},
data() { os.api('meta', { detail: true }).then(gotMeta => {
return { meta.value = gotMeta;
meta: null,
};
},
created() {
os.api('meta', { detail: true }).then(meta => {
this.meta = meta;
});
},
}); });
</script> </script>

View File

@ -6,129 +6,110 @@
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked"> <template v-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full">{{ $ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i> <span v-if="full">{{ i18n.locale.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
</template> </template>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合 --> <template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合 -->
<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i> <span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
</template> </template>
<template v-else-if="isFollowing"> <template v-else-if="isFollowing">
<span v-if="full">{{ $ts.unfollow }}</span><i class="fas fa-minus"></i> <span v-if="full">{{ i18n.locale.unfollow }}</span><i class="fas fa-minus"></i>
</template> </template>
<template v-else-if="!isFollowing && user.isLocked"> <template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ $ts.followRequest }}</span><i class="fas fa-plus"></i> <span v-if="full">{{ i18n.locale.followRequest }}</span><i class="fas fa-plus"></i>
</template> </template>
<template v-else-if="!isFollowing && !user.isLocked"> <template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ $ts.follow }}</span><i class="fas fa-plus"></i> <span v-if="full">{{ i18n.locale.follow }}</span><i class="fas fa-plus"></i>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i> <span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
</template> </template>
</button> </button>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, markRaw } from 'vue'; import { onBeforeUnmount, onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream'; import { stream } from '@/stream';
import { i18n } from '@/i18n';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { user: Misskey.entities.UserDetailed,
user: { full?: boolean,
type: Object, large?: boolean,
required: true }>(), {
}, full: false,
full: { large: false,
type: Boolean, });
required: false,
default: false,
},
large: {
type: Boolean,
required: false,
default: false,
},
},
data() { const isFollowing = ref(props.user.isFollowing);
return { const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou);
isFollowing: this.user.isFollowing, const wait = ref(false);
hasPendingFollowRequestFromYou: this.user.hasPendingFollowRequestFromYou, const connection = stream.useChannel('main');
wait: false,
connection: null,
};
},
created() { if (props.user.isFollowing == null) {
// os.api('users/show', {
if (this.user.isFollowing == null) { userId: props.user.id
os.api('users/show', { }).then(u => {
userId: this.user.id isFollowing.value = u.isFollowing;
}).then(u => { hasPendingFollowRequestFromYou.value = u.hasPendingFollowRequestFromYou;
this.isFollowing = u.isFollowing; });
this.hasPendingFollowRequestFromYou = u.hasPendingFollowRequestFromYou; }
});
}
},
mounted() { function onFollowChange(user: Misskey.entities.UserDetailed) {
this.connection = markRaw(stream.useChannel('main')); if (user.id == props.user.id) {
isFollowing.value = user.isFollowing;
this.connection.on('follow', this.onFollowChange); hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou;
this.connection.on('unfollow', this.onFollowChange);
},
beforeUnmount() {
this.connection.dispose();
},
methods: {
onFollowChange(user) {
if (user.id == this.user.id) {
this.isFollowing = user.isFollowing;
this.hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
}
},
async onClick() {
this.wait = true;
try {
if (this.isFollowing) {
const { canceled } = await os.confirm({
type: 'warning',
text: this.$t('unfollowConfirm', { name: this.user.name || this.user.username }),
});
if (canceled) return;
await os.api('following/delete', {
userId: this.user.id
});
} else {
if (this.hasPendingFollowRequestFromYou) {
await os.api('following/requests/cancel', {
userId: this.user.id
});
} else if (this.user.isLocked) {
await os.api('following/create', {
userId: this.user.id
});
this.hasPendingFollowRequestFromYou = true;
} else {
await os.api('following/create', {
userId: this.user.id
});
this.hasPendingFollowRequestFromYou = true;
}
}
} catch (e) {
console.error(e);
} finally {
this.wait = false;
}
}
} }
}
async function onClick() {
wait.value = true;
try {
if (isFollowing.value) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
});
if (canceled) return;
await os.api('following/delete', {
userId: props.user.id
});
} else {
if (hasPendingFollowRequestFromYou.value) {
await os.api('following/requests/cancel', {
userId: props.user.id
});
} else if (props.user.isLocked) {
await os.api('following/create', {
userId: props.user.id
});
hasPendingFollowRequestFromYou.value = true;
} else {
await os.api('following/create', {
userId: props.user.id
});
hasPendingFollowRequestFromYou.value = true;
}
}
} catch (e) {
console.error(e);
} finally {
wait.value = false;
}
}
onMounted(() => {
connection.on('follow', onFollowChange);
connection.on('unfollow', onFollowChange);
});
onBeforeUnmount(() => {
connection.dispose();
}); });
</script> </script>

View File

@ -2,72 +2,64 @@
<XModalWindow ref="dialog" <XModalWindow ref="dialog"
:width="370" :width="370"
:height="400" :height="400"
@close="$refs.dialog.close()" @close="dialog.close()"
@closed="$emit('closed')" @closed="emit('closed')"
> >
<template #header>{{ $ts.forgotPassword }}</template> <template #header>{{ i18n.locale.forgotPassword }}</template>
<form v-if="$instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit"> <form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
<div class="main _formRoot"> <div class="main _formRoot">
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required> <MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
<template #label>{{ $ts.username }}</template> <template #label>{{ i18n.locale.username }}</template>
<template #prefix>@</template> <template #prefix>@</template>
</MkInput> </MkInput>
<MkInput v-model="email" class="_formBlock" type="email" spellcheck="false" required> <MkInput v-model="email" class="_formBlock" type="email" spellcheck="false" required>
<template #label>{{ $ts.emailAddress }}</template> <template #label>{{ i18n.locale.emailAddress }}</template>
<template #caption>{{ $ts._forgotPassword.enterEmail }}</template> <template #caption>{{ i18n.locale._forgotPassword.enterEmail }}</template>
</MkInput> </MkInput>
<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton> <MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.locale.send }}</MkButton>
</div> </div>
<div class="sub"> <div class="sub">
<MkA to="/about" class="_link">{{ $ts._forgotPassword.ifNoEmail }}</MkA> <MkA to="/about" class="_link">{{ i18n.locale._forgotPassword.ifNoEmail }}</MkA>
</div> </div>
</form> </form>
<div v-else> <div v-else class="bafecedb">
{{ $ts._forgotPassword.contactAdmin }} {{ i18n.locale._forgotPassword.contactAdmin }}
</div> </div>
</XModalWindow> </XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XModalWindow from '@/components/ui/modal-window.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os'; import * as os from '@/os';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
export default defineComponent({ const emit = defineEmits<{
components: { (e: 'done'): void;
XModalWindow, (e: 'closed'): void;
MkButton, }>();
MkInput,
},
emits: ['done', 'closed'], let dialog: InstanceType<typeof XModalWindow> = $ref();
data() { let username = $ref('');
return { let email = $ref('');
username: '', let processing = $ref(false);
email: '',
processing: false,
};
},
methods: { async function onSubmit() {
async onSubmit() { processing = true;
this.processing = true; await os.apiWithDialog('request-reset-password', {
await os.apiWithDialog('request-reset-password', { username,
username: this.username, email,
email: this.email, });
}); emit('done');
dialog.close();
this.$emit('done'); }
this.$refs.dialog.close();
}
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -81,4 +73,8 @@ export default defineComponent({
padding: 24px; padding: 24px;
} }
} }
.bafecedb {
padding: 24px;
}
</style> </style>

View File

@ -541,7 +541,7 @@ export const uploads = ref<{
img: string; img: string;
}[]>([]); }[]>([]);
export function upload(file: File, folder?: any, name?: string) { export function upload(file: File, folder?: any, name?: string): Promise<Misskey.entities.DriveFile> {
if (folder && typeof folder == 'object') folder = folder.id; if (folder && typeof folder == 'object') folder = folder.id;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

View File

@ -1,7 +1,11 @@
// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb export const unicodeEmojiCategories = ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'] as const;
export const emojilist = require('../emojilist.json') as {
export type UnicodeEmojiDef = {
name: string; name: string;
keywords: string[]; keywords: string[];
char: string; char: string;
category: 'people' | 'animals_and_nature' | 'food_and_drink' | 'activity' | 'travel_and_places' | 'objects' | 'symbols' | 'flags'; category: typeof unicodeEmojiCategories[number];
}[]; }
// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
export const emojilist = require('../emojilist.json') as UnicodeEmojiDef[];