forked from mirror/misskey
Tweak UI
This commit is contained in:
parent
481b46ac9e
commit
503f23ad3b
@ -4,7 +4,7 @@
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="sub">
|
||||
<slot name="func"></slot>
|
||||
<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
|
||||
<button class="_button" v-if="foldable" @click="() => showBody = !showBody">
|
||||
<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
|
||||
<template v-else><Fa :icon="faAngleDown"/></template>
|
||||
</button>
|
||||
@ -42,7 +42,7 @@ export default defineComponent({
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
bodyTogglable: {
|
||||
foldable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
@ -99,7 +99,7 @@ export default defineComponent({
|
||||
},
|
||||
methods: {
|
||||
toggleContent(show: boolean) {
|
||||
if (!this.bodyTogglable) return;
|
||||
if (!this.foldable) return;
|
||||
this.showBody = show;
|
||||
},
|
||||
|
||||
|
@ -36,7 +36,7 @@
|
||||
<header><span>{{ $ts.exploreFediverse }}</span></header>
|
||||
</div>
|
||||
|
||||
<MkFolder :body-togglable="true" :expanded="false" ref="tags" class="_gap">
|
||||
<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
|
||||
<template #header><Fa :icon="faHashtag" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularTags }}</template>
|
||||
|
||||
<div class="vxjfqztj">
|
||||
|
@ -4,7 +4,7 @@
|
||||
<template #header><Fa :icon="faHeartbeat"/> {{ $ts.metrics }}</template>
|
||||
<div class="_section" style="padding: 0 var(--margin);">
|
||||
<div class="_content">
|
||||
<MkContainer :body-togglable="false" class="_gap">
|
||||
<MkContainer :foldable="false" class="_gap">
|
||||
<template #header><Fa :icon="faMicrochip"/>{{ $ts.cpuAndMemory }}</template>
|
||||
<!--
|
||||
<template #func>
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="false" class="_gap">
|
||||
<MkContainer :foldable="false" class="_gap">
|
||||
<template #header><Fa :icon="faHdd"/> {{ $ts.disk }}</template>
|
||||
<!--
|
||||
<template #func>
|
||||
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="false" class="_gap">
|
||||
<MkContainer :foldable="false" class="_gap">
|
||||
<template #header><Fa :icon="faExchangeAlt"/> {{ $ts.network }}</template>
|
||||
<!--
|
||||
<template #func>
|
||||
@ -78,7 +78,7 @@
|
||||
<template #header><Fa :icon="faClipboardList"/> {{ $ts.jobQueue }}</template>
|
||||
|
||||
<div class="vkyrmkwb" :style="{ gridTemplateRows: queueHeight }">
|
||||
<MkContainer :body-togglable="false" :scrollable="true" :resize-base-el="() => $el">
|
||||
<MkContainer :foldable="false" :scrollable="true" :resize-base-el="() => $el">
|
||||
<template #header><Fa :icon="faExclamationTriangle"/> {{ $ts.delayed }}</template>
|
||||
|
||||
<div class="_content">
|
||||
|
@ -6,7 +6,7 @@
|
||||
<div class="sboqnrfi" :style="{ gridTemplateRows: overviewHeight }">
|
||||
<MkInstanceStats :chart-limit="300" :detailed="true" class="_gap" ref="stats"/>
|
||||
|
||||
<MkContainer :body-togglable="true" class="_gap">
|
||||
<MkContainer :foldable="true" class="_gap">
|
||||
<template #header><Fa :icon="faInfoCircle"/>{{ $ts.instanceInfo }}</template>
|
||||
|
||||
<div class="_content">
|
||||
@ -19,7 +19,7 @@
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="true" :scrollable="true" class="_gap" style="height: 300px;">
|
||||
<MkContainer :foldable="true" :scrollable="true" class="_gap" style="height: 300px;">
|
||||
<template #header><Fa :icon="faDatabase"/>{{ $ts.database }}</template>
|
||||
|
||||
<div class="_content" v-if="dbInfo">
|
||||
|
@ -8,7 +8,7 @@
|
||||
<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
|
||||
</div>
|
||||
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_gap">
|
||||
<MkContainer :foldable="true" :expanded="true" class="_gap">
|
||||
<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
|
||||
<div style="padding: 16px;">
|
||||
<MkInput v-model:value="title">
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_gap">
|
||||
<MkContainer :foldable="true" :expanded="true" class="_gap">
|
||||
<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
|
||||
<div style="padding: 16px;">
|
||||
<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
|
||||
@ -53,7 +53,7 @@
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="true" class="_gap">
|
||||
<MkContainer :foldable="true" class="_gap">
|
||||
<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
|
||||
<div class="qmuvgica">
|
||||
<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
|
||||
@ -74,7 +74,7 @@
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_gap">
|
||||
<MkContainer :foldable="true" :expanded="true" class="_gap">
|
||||
<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
|
||||
<div>
|
||||
<MkTextarea class="_code" v-model:value="script"/>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton>
|
||||
</div>
|
||||
|
||||
<MkContainer :body-togglable="true" class="_gap">
|
||||
<MkContainer :foldable="true" class="_gap">
|
||||
<template #header><Fa fixed-width/>{{ $ts.output }}</template>
|
||||
<div class="bepmlvbi">
|
||||
<div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkContainer :max-height="300">
|
||||
<MkContainer :max-height="300" :foldable="true">
|
||||
<template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $ts.images }}</template>
|
||||
<div class="ujigsodd">
|
||||
<MkLoading v-if="fetching"/>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkContainer :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable">
|
||||
<MkContainer :show-header="props.showHeader" :foldable="foldable" :scrollable="scrollable">
|
||||
<template #header><Fa :icon="faGlobe"/>{{ $ts._widgets.federation }}</template>
|
||||
|
||||
<div class="wbrkwalb">
|
||||
@ -42,7 +42,7 @@ export default defineComponent({
|
||||
MkContainer, MkMiniChart
|
||||
},
|
||||
props: {
|
||||
bodyTogglable: {
|
||||
foldable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
|
Loading…
Reference in New Issue
Block a user