enhance(client): add timeline flash preset

This commit is contained in:
syuilo 2023-01-16 10:31:30 +09:00
parent 956375e2e8
commit 60d9bb0218
3 changed files with 93 additions and 25 deletions

View file

@ -6,7 +6,7 @@
</template>
</div>
<span v-else-if="c.type === 'text'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }">{{ c.text }}</span>
<Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, color: c.color ?? null }" :text="c.text"/>
<Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }" :text="c.text"/>
<MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" @click="c.onClick">{{ c.text }}</MkButton>
<div v-else-if="c.type === 'buttons'" class="_buttons">
<MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton>

View file

@ -33,24 +33,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
import MkInput from '@/components/MkInput.vue';
import { useRouter } from '@/router';
const router = useRouter();
const props = defineProps<{
id?: string;
}>();
let flash = $ref(null);
if (props.id) {
flash = await os.api('flash/show', {
flashId: props.id,
});
}
let title = $ref(flash?.title ?? 'New Play');
let summary = $ref(flash?.summary ?? '');
let permissions = $ref(flash?.permissions ?? []);
let script = $ref(flash?.script ?? `/// @ 0.12.2
const PRESET_DEFAULT = `/// @ 0.12.2
var name = ""
@ -66,13 +49,9 @@ Ui:render([
}
})
])
`);
`;
function selectPreset(ev: MouseEvent) {
os.popupMenu([{
text: 'Omikuji',
action: () => {
script = `/// @ 0.12.2
const PRESET_OMIKUJI = `/// @ 0.12.2
//
//
@ -114,6 +93,91 @@ Ui:render([
})
])
`;
const PRESET_TIMELINE = `/// @ 0.12.2
// API
@fetch() {
Ui:render([
Ui:C:container({
align: 'center'
children: [
Ui:C:text({ text: "読み込み中..." })
]
})
])
//
let notes = Mk:api("notes/local-timeline" {})
// UI
let noteEls = []
each (let note, notes) {
let el = Ui:C:container({
bgColor: "#444"
fgColor: "#fff"
padding: 10
rounded: true
children: [
Ui:C:mfm({
text: note.user.name
bold: true
})
Ui:C:mfm({
text: note.text
})
]
})
noteEls.push(el)
}
// UI
Ui:render([
Ui:C:text({ text: "ローカル タイムライン" })
Ui:C:button({
text: "更新"
onClick: @() {
fetch()
}
})
Ui:C:container({
children: noteEls
})
])
}
fetch()
`;
const router = useRouter();
const props = defineProps<{
id?: string;
}>();
let flash = $ref(null);
if (props.id) {
flash = await os.api('flash/show', {
flashId: props.id,
});
}
let title = $ref(flash?.title ?? 'New Play');
let summary = $ref(flash?.summary ?? '');
let permissions = $ref(flash?.permissions ?? []);
let script = $ref(flash?.script ?? PRESET_DEFAULT);
function selectPreset(ev: MouseEvent) {
os.popupMenu([{
text: 'Omikuji',
action: () => {
script = PRESET_OMIKUJI;
},
}, {
text: 'Timeline viewer',
action: () => {
script = PRESET_TIMELINE;
},
}], ev.currentTarget ?? ev.target);
}

View file

@ -39,6 +39,7 @@ export type AsUiMfm = AsUiComponentBase & {
type: 'mfm';
text?: string;
size?: number;
bold?: boolean;
color?: string;
font?: 'serif' | 'sans-serif' | 'monospace';
};
@ -208,6 +209,8 @@ function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'typ
if (text) utils.assertString(text);
const size = def.value.get('size');
if (size) utils.assertNumber(size);
const bold = def.value.get('bold');
if (bold) utils.assertBoolean(bold);
const color = def.value.get('color');
if (color) utils.assertString(color);
const font = def.value.get('font');
@ -216,6 +219,7 @@ function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'typ
return {
text: text?.value,
size: size?.value,
bold: bold?.value,
color: color?.value,
font: font?.value,
};