usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixes

This commit is contained in:
kakkokari-gtyih 2024-10-08 09:59:11 +09:00
parent 21b2ac036b
commit 771bf9a0f6
7 changed files with 90 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/MkPostFormAttaches.vue
View File

@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
role="button"
tabindex="0"
@click="showFileMenu(file, $event)"
@keydown.space.enter="showFileMenu(element, $event)"
@keydown.space.enter="showFileMenu(file, $event)"
@contextmenu.prevent="showFileMenu(file, $event)"
>
<MkDriveFileThumbnail :data-id="file.id" :class="$style.thumbnail" :file="file" fit="cover"/>

71
packages/frontend/src/components/MkWidgets.vue
View File

@ -15,11 +15,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
</header>
<div ref="dndParentEl" :class="$style.editEditing">
<div v-for="widget in widgets" :key="widget.id" :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(widget.id)"><i class="ti ti-settings"></i></button>
<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(widget)"><i class="ti ti-x"></i></button>
<div v-for="widgetId in widgetIds" :key="widgetId" :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(widgetId)"><i class="ti ti-settings"></i></button>
<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(getWidgetById(widgetId)!)"><i class="ti ti-x"></i></button>
<div class="handle">
<component :is="`widget-${widget.name}`" :ref="el => widgetRefs[widget.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
<component :is="`widget-${getWidgetById(widgetId)!.name}`" :ref="el => widgetRefs[widgetId] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="getWidgetById(widgetId)!" @updateProps="updateWidget(widgetId, $event)"/>
</div>
</div>
</div>
@ -28,22 +28,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
<script lang="ts">
export type Widget = {
name: string;
id: string;
data: Record<string, any>;
};
export type DefaultStoredWidget = {
place: string | null;
} & Widget;
</script>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { ref, shallowRef, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import { animations } from '@formkit/drag-and-drop';
import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
import MkSelect from '@/components/MkSelect.vue';
import MkButton from '@/components/MkButton.vue';
import { widgets as widgetDefs } from '@/widgets/index.js';
@ -51,21 +40,13 @@ import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { isLink } from '@@/js/is-link.js';
import type { Widget, WidgetProps } from '@/widgets/widget.js';
const props = defineProps<{
widgets: Widget[];
edit: boolean;
}>();
const [dndParentEl, widgets] = useDragAndDrop(props.widgets, {
group: 'SortableMkWidgets',
dragHandle: '.handle',
plugins: [animations()],
});
watch(widgets, () => {
emit('updateWidgets', widgets.value);
});
const emit = defineEmits<{
(ev: 'updateWidgets', widgets: Widget[]): void;
(ev: 'addWidget', widget: Widget): void;
@ -74,10 +55,40 @@ const emit = defineEmits<{
(ev: 'exit'): void;
}>();
function updateWidgetIds(to: Widget[]) {
return to.map(w => w.id);
}
function getWidgetById(id: string) {
return props.widgets.find(w => w.id === id) ?? null;
}
const widgetIds = ref(updateWidgetIds(props.widgets));
watch(() => props.widgets, (to) => {
const updated = updateWidgetIds(to);
widgetIds.value = updated;
});
const dndParentEl = shallowRef<HTMLElement>();
dragAndDrop({
parent: dndParentEl,
values: widgetIds,
plugins: [animations()],
dragHandle: '.handle',
onDragend: () => {
// Widget ids to widget object array
const widgets = widgetIds.value.map(id => props.widgets.find(w => w.id === id) ?? null).filter(w => w !== null);
emit('updateWidgets', widgets);
},
});
const widgetRefs = {};
const configWidget = (id: string) => {
widgetRefs[id].configure();
};
const widgetAdderSelected = ref<string | null>(null);
const addWidget = () => {
if (widgetAdderSelected.value == null) return;
@ -90,10 +101,12 @@ const addWidget = () => {
widgetAdderSelected.value = null;
};
const removeWidget = (widget) => {
const removeWidget = (widget: Widget) => {
emit('removeWidget', widget);
};
const updateWidget = (id, data) => {
const updateWidget = (id: string, data: Partial<WidgetProps>) => {
emit('updateWidget', { id, data });
};

43
packages/frontend/src/pages/admin/RolesEditorFormula.vue
View File

@ -103,17 +103,30 @@ const valueKv = computed(() => {
}
});
const valueIds = computed({
get: () => {
function updateValueIds(to: Misskey.entities.RoleCondFormulaValue) {
if (assertLogicFormula(to)) {
return to.values.map(v => v.id);
} else {
return [];
}
}
const valueIds = ref(updateValueIds(v.value));
watch(v, () => {
valueIds.value = updateValueIds(v.value);
}, { deep: true });
dragAndDrop({
parent: dndParentEl,
values: valueIds,
// TODO: v0.2.0時点では親子階層のドラッグアンドドロップは不安定
//group: 'roleFormula',
dragHandle: '.drag-handle',
plugins: [animations()],
onDragend: () => {
if (assertLogicFormula(v.value)) {
return v.value.values.map(v => v.id);
} else {
return [];
}
},
set: (newVal) => {
if (assertLogicFormula(v.value)) {
v.value.values = newVal.map(id => {
v.value.values = valueIds.value.map(id => {
if (assertLogicFormula(v.value)) {
return v.value.values.find(v => v.id === id) ?? null;
} else {
@ -121,15 +134,7 @@ const valueIds = computed({
}
}).filter(v => v !== null);
}
}
});
dragAndDrop({
parent: dndParentEl,
values: valueIds,
group: 'roleFormula',
dragHandle: '.drag-handle',
plugins: [animations()],
},
});
const roles = await rolesCache.fetch();

21
packages/frontend/src/pages/page-editor/page-editor.blocks.vue
View File

@ -12,10 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { watch, computed, shallowRef } from 'vue';
import * as Misskey from 'misskey-js';
import { animations } from '@formkit/drag-and-drop';
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.vue';
import XImage from './els/page-editor.el.image.vue';
@ -39,16 +38,7 @@ const emit = defineEmits<{
(ev: 'update:modelValue', value: Misskey.entities.PageBlock[]): void;
}>();
const items = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
const dndParentEl = shallowRef<HTMLElement>();
dragAndDrop({
parent: dndParentEl,
values: items,
const [dndParentEl, items] = useDragAndDrop(props.modelValue, {
dragHandle: '.drag-handle',
group: 'blocks',
plugins: [animations()],
@ -56,12 +46,11 @@ dragAndDrop({
horizontal: 0.5,
vertical: 0.5,
},
onDragend: () => {
emit('update:modelValue', items.value);
},
});
watch(items, (v) => {
emit('update:modelValue', v);
}, { deep: true });
function updateItem(v: Misskey.entities.PageBlock) {
const i = props.modelValue.findIndex(x => x.id === v.id);
const newValue = [

8
packages/frontend/src/pages/settings/profile.vue
View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_gaps_m">
<div class="_panel">
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : undefined }">
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<div :class="$style.avatarContainer">
@ -132,6 +132,10 @@ import MkTextarea from '@/components/MkTextarea.vue';
const $i = signinRequired();
function assertValidLang(value: string | null): value is keyof typeof langmap {
return value !== null && Object.keys(langmap).includes(value);
}
const reactionAcceptance = computed(defaultStore.makeGetterSetter('reactionAcceptance'));
const profile = reactive({
@ -140,7 +144,7 @@ const profile = reactive({
followedMessage: $i.followedMessage,
location: $i.location,
birthday: $i.birthday,
lang: $i.lang,
lang: assertValidLang($i.lang) ? $i.lang : null,
isBot: $i.isBot ?? false,
isCat: $i.isCat ?? false,
});

8
packages/frontend/src/store.ts
View File

@ -10,6 +10,7 @@ import lightTheme from '@@/themes/l-light.json5';
import darkTheme from '@@/themes/d-green-lime.json5';
import { miLocalStorage } from './local-storage.js';
import type { SoundType } from '@/scripts/sound.js';
import type { DefaultStoredWidget } from '@/widgets/widget.js';
import { Storage } from '@/pizzax.js';
interface PostFormAction {
@ -179,12 +180,7 @@ export const defaultStore = markRaw(new Storage('base', {
},
widgets: {
where: 'account',
default: [] as {
name: string;
id: string;
place: string | null;
data: Record<string, any>;
}[],
default: [] as DefaultStoredWidget[],
},
tl: {
where: 'deviceAccount',

13
packages/frontend/src/widgets/widget.ts
View File

@ -9,16 +9,23 @@ import { Form, GetFormResultType } from '@/scripts/form.js';
import * as os from '@/os.js';
import { deepClone } from '@/scripts/clone.js';
export type Widget<P extends Record<string, unknown>> = {
export type WidgetProps = Record<string, unknown>;
export type Widget<P extends WidgetProps = WidgetProps> = {
name: string;
id: string;
data: Partial<P>;
};
export type WidgetComponentProps<P extends Record<string, unknown>> = {
export type DefaultStoredWidget<P extends WidgetProps = WidgetProps> = {
place: 'left' | 'right' | null;
} & Widget<P>;
export type WidgetComponentProps<P extends WidgetProps = WidgetProps> = {
widget?: Widget<P>;
};
export type WidgetComponentEmits<P extends Record<string, unknown>> = {
export type WidgetComponentEmits<P extends WidgetProps = WidgetProps> = {
(ev: 'updateProps', props: P);
};