HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Merge branch 'misskey-dev:develop' into feat/client-dev-mode

Browse source
This commit is contained in:
yupix 2023-05-14 10:38:52 +09:00 committed by GitHub
commit 30ff4592cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 155 additions and 870 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/components/MkAbuseReportWindow.vue
View file

@ -9,7 +9,7 @@
</I18n>
</template>
<MkSpacer :margin-min="20" :margin-max="28">
<div class="dpvffvvy _gaps_m">
<div class="_gaps_m" :class="$style.root">
<div class="">
<MkTextarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template>
@ -60,8 +60,8 @@ function send() {
}
</script>
<style lang="scss" scoped>
.dpvffvvy {
<style lang="scss" module>
.root {
--root-margin: 16px;
}
</style>

3
packages/frontend/src/components/MkAnimBg.vue
View file

@ -1,5 +1,5 @@
<template>
<canvas ref="canvasEl" style="width: 100%; height: 100%;"></canvas>
<canvas ref="canvasEl" style="width: 100%; height: 100%; pointer-events: none;"></canvas>
</template>
<script lang="ts" setup>
@ -191,7 +191,6 @@ onMounted(() => {
const u_focus = gl.getUniformLocation(shaderProgram, 'u_focus');
const u_itensity = gl.getUniformLocation(shaderProgram, 'u_itensity');
gl.uniform2fv(u_resolution, [canvas.width, canvas.height]);
gl.uniform1f(u_time, 1.0);
gl.uniform1f(u_spread, 1.0);
gl.uniform1f(u_speed, 1.0);
gl.uniform1f(u_warp, 1.0);

3
packages/frontend/src/components/MkChannelList.vue
View file

@ -26,6 +26,3 @@ const props = withDefaults(defineProps<{
extractor: (item) => item,
});
</script>
<style lang="scss" scoped>
</style>

2
packages/frontend/src/components/MkFolder.vue
View file

@ -6,7 +6,7 @@
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
<div :class="$style.headerText">
<div :class="$style.headerTextMain">
<slot name="label"></slot>
<MkCondensedLine :min-scale="2 / 3"><slot name="label"></slot></MkCondensedLine>
</div>
<div :class="$style.headerTextSub">
<slot name="caption"></slot>

8
packages/frontend/src/components/MkObjectView.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="zhyxdalp">
<div>
<XValue :value="value" :collapsed="false"/>
</div>
</template>
@ -12,9 +12,3 @@ const props = defineProps<{
value: Record<string, unknown>;
}>();
</script>
<style lang="scss" scoped>
.zhyxdalp {
}
</style>

4
packages/frontend/src/components/MkRetentionLineChart.vue
View file

@ -124,7 +124,3 @@ onMounted(async () => {
});
});
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/components/MkRippleEffect.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" cx="64" cy="64">
<circle fill="none" cx="64" cy="64" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.5s"
@ -22,7 +22,7 @@
/>
</circle>
<g fill="none" fill-rule="evenodd">
<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.8s"
@ -100,17 +100,11 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.vswabwbm {
<style lang="scss" module>
.root {
pointer-events: none;
position: fixed;
width: 128px;
height: 128px;
> svg {
> circle {
stroke: var(--accent);
}
}
}
</style>

28
packages/frontend/src/components/MkSignin.vue
View file

@ -1,7 +1,7 @@
<template>
<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="auth _gaps_m">
<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
<form :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="_gaps_m">
<div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
<MkInfo v-if="message">
{{ message }}
</MkInfo>
@ -236,18 +236,14 @@ function resetPassword() {
}
</script>
<style lang="scss" scoped>
.eppvobhk {
> .auth {
> .avatar {
margin: 0 auto 0 auto;
width: 64px;
height: 64px;
background: #ddd;
background-position: center;
background-size: cover;
border-radius: 100%;
}
}
<style lang="scss" module>
.avatar {
margin: 0 auto 0 auto;
width: 64px;
height: 64px;
background: #ddd;
background-position: center;
background-size: cover;
border-radius: 100%;
}
</style>

6
packages/frontend/src/components/MkUrlPreviewPopup.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
<div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @after-leave="emit('closed')">
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
</Transition>
@ -36,8 +36,8 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.fgmtyycl {
<style lang="scss" module>
.root {
position: absolute;
width: 500px;
max-width: calc(90vw - 12px);

4
packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
View file

@ -4,6 +4,7 @@
<MkFolder>
<template #label>{{ i18n.ts.makeFollowManuallyApprove }}</template>
<template #icon><i class="ti ti-lock"></i></template>
<template #suffix>{{ isLocked ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="isLocked">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></MkSwitch>
@ -11,6 +12,7 @@
<MkFolder>
<template #label>{{ i18n.ts.hideOnlineStatus }}</template>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #suffix>{{ hideOnlineStatus ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="hideOnlineStatus">{{ i18n.ts.hideOnlineStatus }}<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template></MkSwitch>
@ -18,6 +20,7 @@
<MkFolder>
<template #label>{{ i18n.ts.noCrawle }}</template>
<template #icon><i class="ti ti-world-x"></i></template>
<template #suffix>{{ noCrawle ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="noCrawle">{{ i18n.ts.noCrawle }}<template #caption>{{ i18n.ts.noCrawleDescription }}</template></MkSwitch>
@ -25,6 +28,7 @@
<MkFolder>
<template #label>{{ i18n.ts.preventAiLearning }}</template>
<template #icon><i class="ti ti-photo-shield"></i></template>
<template #suffix>{{ preventAiLearning ? i18n.ts.on : i18n.ts.off }}</template>
<MkSwitch v-model="preventAiLearning">{{ i18n.ts.preventAiLearning }}<template #caption>{{ i18n.ts.preventAiLearningDescription }}</template></MkSwitch>

4
packages/frontend/src/components/MkUserSetupDialog.Profile.vue
View file

@ -37,8 +37,8 @@ import { chooseFileFromPc } from '@/scripts/select-file';
import * as os from '@/os';
import { $i } from '@/account';
const name = ref('');
const description = ref('');
const name = ref($i.name ?? '');
const description = ref($i.description ?? '');
watch(name, () => {
os.apiWithDialog('i/update', {

16
packages/frontend/src/components/MkUserSetupDialog.vue
View file

@ -7,10 +7,10 @@
@close="close(true)"
@closed="emit('closed')"
>
<template v-if="page === 1" #header>{{ i18n.ts._initialAccountSetting.profileSetting }}</template>
<template v-else-if="page === 2" #header>{{ i18n.ts._initialAccountSetting.privacySetting }}</template>
<template v-else-if="page === 3" #header>{{ i18n.ts.follow }}</template>
<template v-else-if="page === 4" #header>{{ i18n.ts.pushNotification }}</template>
<template v-if="page === 1" #header><i class="ti ti-user-edit"></i> {{ i18n.ts._initialAccountSetting.profileSetting }}</template>
<template v-else-if="page === 2" #header><i class="ti ti-lock"></i> {{ i18n.ts._initialAccountSetting.privacySetting }}</template>
<template v-else-if="page === 3" #header><i class="ti ti-user-plus"></i> {{ i18n.ts.follow }}</template>
<template v-else-if="page === 4" #header><i class="ti ti-bell-plus"></i> {{ i18n.ts.pushNotification }}</template>
<template v-else-if="page === 5" #header>{{ i18n.ts.done }}</template>
<template v-else #header>{{ i18n.ts.initialAccountSetting }}</template>
@ -42,7 +42,9 @@
<div style="height: 100cqh; overflow: auto;">
<MkSpacer :margin-min="20" :margin-max="28">
<XProfile/>
<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
<div class="_buttonsCenter" style="margin-top: 16px;">
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div>
</MkSpacer>
</div>
</template>
@ -50,7 +52,9 @@
<div style="height: 100cqh; overflow: auto;">
<MkSpacer :margin-min="20" :margin-max="28">
<XPrivacy/>
<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
<div class="_buttonsCenter" style="margin-top: 16px;">
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div>
</MkSpacer>
</div>
</template>

13
packages/frontend/src/components/page/page.block.vue
View file

@ -7,24 +7,13 @@ import { defineComponent, PropType } from 'vue';
import XText from './page.text.vue';
import XSection from './page.section.vue';
import XImage from './page.image.vue';
import XButton from './page.button.vue';
import XNumberInput from './page.number-input.vue';
import XTextInput from './page.text-input.vue';
import XTextareaInput from './page.textarea-input.vue';
import XSwitch from './page.switch.vue';
import XIf from './page.if.vue';
import XTextarea from './page.textarea.vue';
import XPost from './page.post.vue';
import XCounter from './page.counter.vue';
import XRadioButton from './page.radio-button.vue';
import XCanvas from './page.canvas.vue';
import XNote from './page.note.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { Block } from '@/scripts/hpml/block';
export default defineComponent({
components: {
XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote,
XText, XSection, XImage, XNote,
},
props: {
block: {

66
packages/frontend/src/components/page/page.button.vue
View file

@ -1,66 +0,0 @@
<template>
<div>
<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, unref } from 'vue';
import MkButton from '../MkButton.vue';
import * as os from '@/os';
import { ButtonBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';
export default defineComponent({
components: {
MkButton,
},
props: {
block: {
type: Object as PropType<ButtonBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
methods: {
click() {
if (this.block.action === 'dialog') {
this.hpml.eval();
os.alert({
text: this.hpml.interpolate(this.block.content),
});
} else if (this.block.action === 'resetRandom') {
this.hpml.updateRandomSeed(Math.random());
this.hpml.eval();
} else if (this.block.action === 'pushEvent') {
os.api('page-push', {
pageId: this.hpml.page.id,
event: this.block.event,
...(this.block.var ? {
var: unref(this.hpml.vars)[this.block.var],
} : {}),
});
os.alert({
type: 'success',
text: this.hpml.interpolate(this.block.message),
});
} else if (this.block.action === 'callAiScript') {
this.hpml.callAiScript(this.block.fn);
}
},
},
});
</script>
<style lang="scss" scoped>
.kudkigyw {
display: inline-block;
min-width: 200px;
max-width: 450px;
margin: 8px 0;
}
</style>

48
packages/frontend/src/components/page/page.canvas.vue
View file

@ -1,48 +0,0 @@
<template>
<div class="ysrxegms">
<canvas ref="canvas" :width="block.width" :height="block.height"/>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
import { CanvasBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';
export default defineComponent({
props: {
block: {
type: Object as PropType<CanvasBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
setup(props, ctx) {
const canvas: Ref<any> = ref(null);
onMounted(() => {
props.hpml.registerCanvas(props.block.name, canvas.value);
});
return {
canvas,
};
},
});
</script>
<style lang="scss" scoped>
.ysrxegms {
display: inline-block;
vertical-align: bottom;
overflow: auto;
max-width: 100%;
> canvas {
display: block;
}
}
</style>

51
packages/frontend/src/components/page/page.counter.vue
View file

@ -1,51 +0,0 @@
<template>
<div>
<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkButton from '../MkButton.vue';
import { CounterVarBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';
export default defineComponent({
components: {
MkButton,
},
props: {
block: {
type: Object as PropType<CounterVarBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
setup(props, ctx) {
const value = computed(() => {
return props.hpml.vars.value[props.block.name];
});
function click() {
props.hpml.updatePageVar(props.block.name, value.value + (props.block.inc || 1));
props.hpml.eval();
}
return {
click,
};
},
});
</script>
<style lang="scss" scoped>
.llumlmnx {
display: inline-block;
min-width: 300px;
max-width: 450px;
margin: 8px 0;
}
</style>

31
packages/frontend/src/components/page/page.if.vue
View file

@ -1,31 +0,0 @@
<template>
<div v-show="hpml.vars.value[block.var]">
<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
</div>
</template>
<script lang="ts">
import { IfBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';
import { defineComponent, defineAsyncComponent, PropType } from 'vue';
export default defineComponent({
components: {
XBlock: defineAsyncComponent(() => import('./page.block.vue')),
},
props: {
block: {
type: Object as PropType<IfBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
h: {
type: Number,
required: true,
},
},
});
</script>

14
packages/frontend/src/components/page/page.note.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="voxdxuby">
<div style="margin: 1em 0;">
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
</div>
@ -28,9 +28,9 @@ export default defineComponent({
onMounted(() => {
os.api('notes/show', { noteId: props.block.note })
.then(result => {
note.value = result;
});
.then(result => {
note.value = result;
});
});
return {
@ -39,9 +39,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
.voxdxuby {
margin: 1em 0;
}
</style>

54
packages/frontend/src/components/page/page.number-input.vue
View file

@ -1,54 +0,0 @@
<template>
<div>
<MkInput class="kudkigyw" :model-value="value" type="number" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkInput from '../MkInput.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { NumberInputVarBlock } from '@/scripts/hpml/block';
export default defineComponent({
components: {
MkInput,
},
props: {
block: {
type: Object as PropType<NumberInputVarBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
setup(props, ctx) {
const value = computed(() => {
return props.hpml.vars.value[props.block.name];
});
function updateValue(newValue) {
props.hpml.updatePageVar(props.block.name, newValue);
props.hpml.eval();
}
return {
value,
updateValue,
};
},
});
</script>
<style lang="scss" scoped>
.kudkigyw {
display: inline-block;
min-width: 300px;
max-width: 450px;
margin: 8px 0;
}
</style>

111
packages/frontend/src/components/page/page.post.vue
View file

@ -1,111 +0,0 @@
<template>
<div class="ngbfujlo">
<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
<MkButton class="button" primary :disabled="posting || posted" @click="post()">
<i v-if="posted" class="ti ti-check"></i>
<i v-else class="ti ti-send"></i>
</MkButton>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import MkTextarea from '../MkTextarea.vue';
import MkButton from '../MkButton.vue';
import { apiUrl } from '@/config';
import * as os from '@/os';
import { PostBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';
import { defaultStore } from '@/store';
import { $i } from '@/account';
export default defineComponent({
components: {
MkTextarea,
MkButton,
},
props: {
block: {
type: Object as PropType<PostBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
data() {
return {
text: this.hpml.interpolate(this.block.text),
posted: false,
posting: false,
};
},
watch: {
'hpml.vars': {
handler() {
this.text = this.hpml.interpolate(this.block.text);
},
deep: true,
},
},
methods: {
upload() {
const promise = new Promise((ok) => {
const canvas = this.hpml.canvases[this.block.canvasId];
canvas.toBlob(blob => {
const formData = new FormData();
formData.append('file', blob);
formData.append('i', $i.token);
if (defaultStore.state.uploadFolder) {
formData.append('folderId', defaultStore.state.uploadFolder);
}
window.fetch(apiUrl + '/drive/files/create', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(f => {
ok(f);
});
});
});
os.promiseDialog(promise);
return promise;
},
async post() {
this.posting = true;
const file = this.block.attachCanvasImage ? await this.upload() : null;
os.apiWithDialog('notes/create', {
text: this.text === '' ? null : this.text,
fileIds: file ? [file.id] : undefined,
}).then(() => {
this.posted = true;
});
},
},
});
</script>
<style lang="scss" scoped>
.ngbfujlo {
position: relative;
padding: 32px;
border-radius: 6px;
box-shadow: 0 2px 8px var(--shadow);
z-index: 1;
> .button {
margin-top: 32px;
}
@media (max-width: 600px) {
padding: 16px;
> .button {
margin-top: 16px;
}
}
}
</style>

44
packages/frontend/src/components/page/page.radio-button.vue
View file

@ -1,44 +0,0 @@
<template>
<div>
<div>{{ hpml.interpolate(block.title) }}</div>
<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:model-value="updateValue($event)">{{ item }}</MkRadio>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkRadio from '../MkRadio.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { RadioButtonVarBlock } from '@/scripts/hpml/block';
export default defineComponent({
components: {
MkRadio,
},
props: {
block: {
type: Object as PropType<RadioButtonVarBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
setup(props, ctx) {
const value = computed(() => {
return props.hpml.vars.value[props.block.name];
});
function updateValue(newValue: string) {
props.hpml.updatePageVar(props.block.name, newValue);
props.hpml.eval();
}
return {
value,
updateValue,
};
},
});
</script>

54
packages/frontend/src/components/page/page.switch.vue
View file

@ -1,54 +0,0 @@
<template>
<div class="hkcxmtwj">
<MkSwitch :model-value="value" @update:model-value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkSwitch from '../MkSwitch.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { SwitchVarBlock } from '@/scripts/hpml/block';
export default defineComponent({
components: {
MkSwitch,
},
props: {
block: {
type: Object as PropType<SwitchVarBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
setup(props, ctx) {
const value = computed(() => {
return props.hpml.vars.value[props.block.name];
});
function updateValue(newValue: boolean) {
props.hpml.updatePageVar(props.block.name, newValue);
props.hpml.eval();
}
return {
value,
updateValue,
};
},
});
</script>
<style lang="scss" scoped>
.hkcxmtwj {
display: inline-block;
margin: 16px auto;
& + .hkcxmtwj {
margin-left: 16px;
}
}
</style>

54
packages/frontend/src/components/page/page.text-input.vue
View file

@ -1,54 +0,0 @@
<template>
<div>
<MkInput class="kudkigyw" :model-value="value" type="text" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkInput from '../MkInput.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { TextInputVarBlock } from '@/scripts/hpml/block';
export default defineComponent({
components: {
MkInput,
},
props: {
block: {
type: Object as PropType<TextInputVarBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
setup(props, ctx) {
const value = computed(() => {
return props.hpml.vars.value[props.block.name];
});
function updateValue(newValue) {
props.hpml.updatePageVar(props.block.name, newValue);
props.hpml.eval();
}
return {
value,
updateValue,
};
},
});
</script>
<style lang="scss" scoped>
.kudkigyw {
display: inline-block;
min-width: 300px;
max-width: 450px;
margin: 8px 0;
}
</style>

45
packages/frontend/src/components/page/page.textarea-input.vue
View file

@ -1,45 +0,0 @@
<template>
<div>
<MkTextarea :model-value="value" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkTextarea>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkTextarea from '../MkTextarea.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { TextInputVarBlock } from '@/scripts/hpml/block';
export default defineComponent({
components: {
MkTextarea,
},
props: {
block: {
type: Object as PropType<TextInputVarBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
setup(props, ctx) {
const value = computed(() => {
return props.hpml.vars.value[props.block.name];
});
function updateValue(newValue) {
props.hpml.updatePageVar(props.block.name, newValue);
props.hpml.eval();
}
return {
value,
updateValue,
};
},
});
</script>

39
packages/frontend/src/components/page/page.textarea.vue
View file

@ -1,39 +0,0 @@
<template>
<MkTextarea :model-value="text" readonly></MkTextarea>
</template>
<script lang="ts">
import { TextBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';
import { defineComponent, PropType } from 'vue';
import MkTextarea from '../MkTextarea.vue';
export default defineComponent({
components: {
MkTextarea,
},
props: {
block: {
type: Object as PropType<TextBlock>,
required: true,
},
hpml: {
type: Object as PropType<Hpml>,
required: true,
},
},
data() {
return {
text: this.hpml.interpolate(this.block.text),
};
},
watch: {
'hpml.vars': {
handler() {
this.text = this.hpml.interpolate(this.block.text);
},
deep: true,
},
},
});
</script>

8
packages/frontend/src/pages/admin/abuses.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
<div class="lcixvhis">
<div>
<div class="reports">
<div class="">
<div class="inputs" style="display: flex;">
@ -87,9 +87,3 @@ definePageMetadata({
icon: 'ti ti-exclamation-circle',
});
</script>
<style lang="scss" scoped>
.lcixvhis {
margin: var(--margin);
}
</style>

8
packages/frontend/src/pages/admin/announcements.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
<div class="ztgjmzrw _gaps_m">
<div class="_gaps_m">
<section v-for="announcement in announcements" class="">
<div class="_panel _gaps_m" style="padding: 24px;">
<MkInput v-model="announcement.title">
@ -113,9 +113,3 @@ definePageMetadata({
icon: 'ti ti-speakerphone',
});
</script>
<style lang="scss" scoped>
.ztgjmzrw {
margin: var(--margin);
}
</style>

8
packages/frontend/src/pages/admin/files.vue
View file

@ -3,7 +3,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :content-max="900">
<div class="xrmjdkdw">
<div>
<div>
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
@ -109,9 +109,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-cloud',
})));
</script>
<style lang="scss" scoped>
.xrmjdkdw {
margin: var(--margin);
}
</style>

4
packages/frontend/src/pages/admin/overview.pie.vue
View file

@ -67,7 +67,3 @@ onMounted(() => {
});
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/admin/overview.queue.chart.vue
View file

@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
<style lang="scss" scoped>
</style>

6
packages/frontend/src/pages/admin/overview.vue
View file

@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="1000">
<div ref="rootEl" class="edbbcaef">
<div ref="rootEl" :class="$style.root">
<MkFoldableSection class="item">
<template #header>Stats</template>
<XStats/>
@ -176,8 +176,8 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.edbbcaef {
<style lang="scss" module>
.root {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 16px;

4
packages/frontend/src/pages/admin/queue.chart.chart.vue
View file

@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/pages/emoji-edit-dialog.vue
View file

@ -10,8 +10,8 @@
<template #header>:{{ emoji.name }}:</template>
<MkSpacer :margin-min="20" :margin-max="28">
<div class="yigymqpb _gaps_m">
<img :src="`/emoji/${emoji.name}.webp`" class="img"/>
<div class="_gaps_m">
<img :src="`/emoji/${emoji.name}.webp`" :class="$style.img"/>
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
</MkInput>
@ -99,12 +99,10 @@ async function del() {
}
</script>
<style lang="scss" scoped>
.yigymqpb {
> .img {
display: block;
height: 64px;
margin: 0 auto;
}
<style lang="scss" module>
.img {
display: block;
height: 64px;
margin: 0 auto;
}
</style>

4
packages/frontend/src/pages/flash/flash-edit.vue
View file

@ -442,7 +442,3 @@ definePageMetadata(computed(() => flash ? {
title: i18n.ts._play.new,
}));
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/pages/gallery/index.vue
View file

@ -7,7 +7,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@ -15,7 +15,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-comet"></i>{{ i18n.ts.popularPosts }}</template>
<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@ -23,7 +23,7 @@
</div>
<div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div>
</MkPagination>
@ -31,7 +31,7 @@
<div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
<MkPagination v-slot="{items}" :pagination="myPostsPagination">
<div class="vfpdbgtk">
<div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@ -119,15 +119,11 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.vfpdbgtk {
<style lang="scss" module>
.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
margin: 0 var(--margin);
> .post {
}
}
</style>

4
packages/frontend/src/pages/my-antennas/create.vue
View file

@ -38,7 +38,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/my-antennas/edit.vue
View file

@ -36,7 +36,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
<style lang="scss" scoped>
</style>

16
packages/frontend/src/pages/my-antennas/editor.vue
View file

@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="700">
<div class="shaynizk">
<div>
<div class="_gaps_m">
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
@ -33,7 +33,7 @@
<MkSwitch v-model="withFile">{{ i18n.ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ i18n.ts.notifyAntenna }}</MkSwitch>
</div>
<div class="actions">
<div :class="$style.actions">
<MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
@ -128,12 +128,10 @@ function addUser() {
}
</script>
<style lang="scss" scoped>
.shaynizk {
> .actions {
margin-top: 16px;
padding: 24px 0;
border-top: solid 0.5px var(--divider);
}
<style lang="scss" module>
.actions {
margin-top: 16px;
padding: 24px 0;
border-top: solid 0.5px var(--divider);
}
</style>

12
packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
View file

@ -8,8 +8,8 @@
</button>
</template>
<section class="oyyftmcf">
<MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
<section>
<MkDriveFileThumbnail v-if="file" style="height: 150px;" :file="file" fit="contain" @click="choose()"/>
</section>
</XContainer>
</template>
@ -54,11 +54,3 @@ onMounted(async () => {
}
});
</script>
<style lang="scss" scoped>
.oyyftmcf {
> .preview {
height: 150px;
}
}
</style>

38
packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
View file

@ -3,8 +3,8 @@
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
<section class="vckmsadr">
<textarea v-model="text"></textarea>
<section>
<textarea v-model="text" :class="$style.textarea"></textarea>
</section>
</XContainer>
</template>
@ -33,23 +33,21 @@ watch($$(text), () => {
});
</script>
<style lang="scss" scoped>
.vckmsadr {
> textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-width: 100%;
min-height: 150px;
border: none;
box-shadow: none;
padding: 16px;
background: transparent;
color: var(--fg);
font-size: 14px;
box-sizing: border-box;
}
<style lang="scss" module>
.textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-width: 100%;
min-height: 150px;
border: none;
box-shadow: none;
padding: 16px;
background: transparent;
color: var(--fg);
font-size: 14px;
box-sizing: border-box;
}
</style>

8
packages/frontend/src/pages/preview.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="graojtoi">
<div>
<MkSample/>
</div>
</template>
@ -19,9 +19,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-eye',
})));
</script>
<style lang="scss" scoped>
.graojtoi {
padding: var(--margin);
}
</style>

3
packages/frontend/src/pages/registry.keys.vue
View file

@ -93,6 +93,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
<style lang="scss" scoped>
</style>

3
packages/frontend/src/pages/registry.value.vue
View file

@ -118,6 +118,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
<style lang="scss" scoped>
</style>

3
packages/frontend/src/pages/registry.vue
View file

@ -68,6 +68,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/reset-password.vue
View file

@ -53,7 +53,3 @@ definePageMetadata({
icon: 'ti ti-lock',
});
</script>
<style lang="scss" scoped>
</style>

4
packages/frontend/src/pages/settings/plugin.vue
View file

@ -94,7 +94,3 @@ definePageMetadata({
icon: 'ti ti-plug',
});
</script>
<style lang="scss" scoped>
</style>

59
packages/frontend/src/pages/settings/profile.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="_gaps_m">
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div class="avatar">
<MkAvatar class="avatar" :user="$i" @click="changeAvatar"/>
<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
<div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div :class="$style.avatarContainer">
<MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
<MkButton primary rounded :class="$style.avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
</div>
<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<MkInput v-model="profile.name" :max="30" manual-save>
@ -248,36 +248,39 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.llvierxe {
<style lang="scss" module>
.avatarAndBanner {
position: relative;
background-size: cover;
background-position: center;
border: solid 1px var(--divider);
border-radius: 10px;
overflow: clip;
> .avatar {
display: inline-block;
text-align: center;
padding: 16px;
> .avatar {
display: inline-block;
width: 72px;
height: 72px;
margin: 0 auto 16px auto;
}
}
> .bannerEdit {
position: absolute;
top: 16px;
right: 16px;
}
}
</style>
<style lang="scss" module>
.avatarContainer {
display: inline-block;
text-align: center;
padding: 16px;
}
.avatar {
display: inline-block;
width: 72px;
height: 72px;
margin: 0 auto 16px auto;
}
.avatarEdit {
}
.bannerEdit {
position: absolute;
top: 16px;
right: 16px;
}
.metadataRoot {
container-type: inline-size;
}

28
packages/frontend/src/pages/settings/reaction.vue
View file

@ -3,15 +3,15 @@
<FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<Sortable v-model="reactions" :class="$style.reactions" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<template #item="{element}">
<button class="_button item" @click="remove(element, $event)">
<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
<button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template>
</Sortable>
</div>
@ -135,20 +135,20 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.zoaiodol {
<style lang="scss" module>
.reactions {
padding: 12px;
font-size: 1.1em;
}
> .item {
display: inline-block;
padding: 8px;
cursor: move;
}
.reactionsItem {
display: inline-block;
padding: 8px;
cursor: move;
}
> .add {
display: inline-block;
padding: 8px;
}
.reactionsAdd {
display: inline-block;
padding: 8px;
}
</style>

4
packages/frontend/src/pages/share.vue
View file

@ -16,7 +16,7 @@
class="_panel"
@posted="state = 'posted'"
/>
<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
<MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton>
</MkSpacer>
</MkStickyContainer>
</template>
@ -162,7 +162,7 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
<style lang="scss" module>
.close {
margin: 16px auto;
}

4
packages/frontend/src/pages/signup-complete.vue
View file

@ -35,7 +35,3 @@ definePageMetadata({
icon: 'ti ti-user',
});
</script>
<style lang="scss" scoped>
</style>

18
packages/frontend/src/widgets/WidgetActivity.chart.vue
View file

@ -1,26 +1,30 @@
<template>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" :class="$style.root" @mousedown.prevent="onMousedown">
<polyline
:points="pointsNote"
fill="none"
stroke-width="1"
stroke="#41ddde"/>
stroke="#41ddde"
/>
<polyline
:points="pointsReply"
fill="none"
stroke-width="1"
stroke="#f7796c"/>
stroke="#f7796c"
/>
<polyline
:points="pointsRenote"
fill="none"
stroke-width="1"
stroke="#a1de41"/>
stroke="#a1de41"
/>
<polyline
:points="pointsTotal"
fill="none"
stroke-width="1"
stroke="#555"
stroke-dasharray="2 2"/>
stroke-dasharray="2 2"
/>
</svg>
</template>
@ -81,8 +85,8 @@ function render() {
}
</script>
<style lang="scss" scoped>
svg {
<style lang="scss" module>
.root {
display: block;
padding: 16px;
width: 100%;

6
packages/frontend/src/widgets/WidgetAichan.vue
View file

@ -1,6 +1,6 @@
<template>
<MkContainer :naked="widgetProps.transparent" :show-header="false" data-cy-mkw-aichan class="mkw-aichan">
<iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
<iframe ref="live2d" :class="$style.root" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
</MkContainer>
</template>
@ -64,8 +64,8 @@ defineExpose<WidgetComponentExpose>({
});
</script>
<style lang="scss" scoped>
.dedjhjmo {
<style lang="scss" module>
.root {
width: 100%;
height: 350px;
border: none;

5
packages/frontend/src/widgets/WidgetButton.vue
View file

@ -101,8 +101,3 @@ defineExpose<WidgetComponentExpose>({
id: props.widget ? props.widget.id : null,
});
</script>
<style lang="scss" scoped>
.mkw-button {
}
</style>