worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Tweak UI

Browse source
This commit is contained in:
syuilo 2021-04-16 12:17:22 +09:00
parent 481b46ac9e
commit 503f23ad3b
8 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/client/components/ui/container.vue
View file

@ -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;
},

2
src/client/pages/explore.vue
View file

@ -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">

8
src/client/pages/instance/index.metrics.vue
View file

@ -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">

4
src/client/pages/instance/index.vue
View file

@ -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
src/client/pages/page-editor/page-editor.vue
View file

@ -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"/>

2
src/client/pages/scratchpad.vue
View file

@ -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>

2
src/client/pages/user/index.photos.vue
View file

@ -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"/>

4
src/client/widgets/federation.vue
View file

@ -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