sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tweak ui

Browse Source
This commit is contained in:
syuilo
2022-01-04 22:42:04 +09:00
parent 76b2561893
commit 69d7cfc5ce
24 changed files with 170 additions and 1841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/pages/admin/database.vue
View File

@ -1,5 +1,5 @@
<template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
<FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
<MkKeyValue v-for="table in database" :key="table[0]" oneline style="margin: 1em 0;">
<template #key>{{ table[0] }}</template>

23
packages/client/src/pages/gallery/edit.vue
View File

@ -1,12 +1,12 @@
<template>
<FormBase>
<div>
<FormSuspense :p="init">
<FormInput v-model="title">
<span>{{ $ts.title }}</span>
<template #label>{{ $ts.title }}</template>
</FormInput>
<FormTextarea v-model="description" :max="500">
<span>{{ $ts.description }}</span>
<template #label>{{ $ts.description }}</template>
</FormTextarea>
<FormGroup>
@ -24,19 +24,17 @@
<FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</FormButton>
</FormSuspense>
</FormBase>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import FormButton from '@/components/debobigego/button.vue';
import FormInput from '@/components/debobigego/input.vue';
import FormTextarea from '@/components/debobigego/textarea.vue';
import FormSwitch from '@/components/debobigego/switch.vue';
import FormTuple from '@/components/debobigego/tuple.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormSuspense from '@/components/debobigego/suspense.vue';
import FormButton from '@/components/ui/button.vue';
import FormInput from '@/components/form/input.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormSwitch from '@/components/form/switch.vue';
import FormGroup from '@/components/form/group.vue';
import FormSuspense from '@/components/form/suspense.vue';
import { selectFiles } from '@/scripts/select-file';
import * as os from '@/os';
import * as symbols from '@/symbols';
@ -47,7 +45,6 @@ export default defineComponent({
FormInput,
FormTextarea,
FormSwitch,
FormBase,
FormGroup,
FormSuspense,
},

9
packages/client/src/pages/instance-info.vue
View File

@ -89,9 +89,8 @@
</div>
</FormSection>
<FormObjectView tall :value="instance">
<span>Raw</span>
</FormObjectView>
<MkObjectView tall :value="instance">
</MkObjectView>
<FormSection>
<template #label>Well-known resources</template>
@ -108,7 +107,7 @@
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
import MkChart from '@/components/chart.vue';
import FormObjectView from '@/components/debobigego/object-view.vue';
import MkObjectView from '@/components/object-view.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormLink from '@/components/form/link.vue';
import MkLink from '@/components/link.vue';
@ -125,7 +124,7 @@ import * as symbols from '@/symbols';
export default defineComponent({
components: {
FormTextarea,
FormObjectView,
MkObjectView,
FormButton,
FormLink,
FormSection,

220
packages/client/src/pages/theme-editor.vue
View File

@ -1,61 +1,67 @@
<template>
<FormBase class="cwepdizn">
<div class="_debobigegoItem colorPicker">
<div class="_debobigegoLabel">{{ $ts.backgroundColor }}</div>
<div class="_debobigegoPanel colors">
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
<div class="cwepdizn _formRoot">
<FormFolder :default-open="true" class="_formBlock">
<template #label>{{ $ts.backgroundColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
</div>
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
</div>
</div>
<div class="_debobigegoItem colorPicker">
<div class="_debobigegoLabel">{{ $ts.accentColor }}</div>
<div class="_debobigegoPanel colors">
<div class="row">
<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
<div class="preview" :style="{ background: color }"></div>
</button>
</div>
</div>
</div>
<div class="_debobigegoItem colorPicker">
<div class="_debobigegoLabel">{{ $ts.textColor }}</div>
<div class="_debobigegoPanel colors">
<div class="row">
<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
<div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
</button>
</div>
</div>
</div>
</FormFolder>
<FormGroup v-if="codeEnabled">
<FormTextarea v-model="themeCode" tall>
<span>{{ $ts._theme.code }}</span>
</FormTextarea>
<FormButton primary @click="applyThemeCode">{{ $ts.apply }}</FormButton>
</FormGroup>
<FormButton v-else @click="codeEnabled = true"><i class="fas fa-code"></i> {{ $ts.editCode }}</FormButton>
<FormFolder :default-open="true" class="_formBlock">
<template #label>{{ $ts.accentColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
<div class="preview" :style="{ background: color }"></div>
</button>
</div>
</div>
</FormFolder>
<FormGroup v-if="descriptionEnabled">
<FormTextarea v-model="description">
<span>{{ $ts._theme.description }}</span>
</FormTextarea>
</FormGroup>
<FormButton v-else @click="descriptionEnabled = true">{{ $ts.addDescription }}</FormButton>
<FormFolder :default-open="true" class="_formBlock">
<template #label>{{ $ts.textColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
<div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
</button>
</div>
</div>
</FormFolder>
<FormGroup>
<FormButton @click="showPreview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
<FormButton primary @click="saveAs"><i class="fas fa-save"></i> {{ $ts.saveAs }}</FormButton>
</FormGroup>
</FormBase>
<FormFolder :default-open="false" class="_formBlock">
<template #icon><i class="fas fa-code"></i></template>
<template #label>{{ $ts.editCode }}</template>
<div class="_formRoot">
<FormTextarea v-model="themeCode" tall class="_formBlock">
<template #label>{{ $ts._theme.code }}</template>
</FormTextarea>
<FormButton primary class="_formBlock" @click="applyThemeCode">{{ $ts.apply }}</FormButton>
</div>
</FormFolder>
<FormFolder :default-open="false" class="_formBlock">
<template #label>{{ $ts.addDescription }}</template>
<div class="_formRoot">
<FormTextarea v-model="description">
<template #label>{{ $ts._theme.description }}</template>
</FormTextarea>
</div>
</FormFolder>
</div>
</MkSpacer>
</template>
<script lang="ts">
@ -65,12 +71,11 @@ import * as tinycolor from 'tinycolor2';
import { v4 as uuid} from 'uuid';
import * as JSON5 from 'json5';
import FormBase from '@/components/debobigego/base.vue';
import FormButton from '@/components/debobigego/button.vue';
import FormTextarea from '@/components/debobigego/textarea.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormButton from '@/components/ui/button.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormFolder from '@/components/form/folder.vue';
import { Theme, applyTheme, validateTheme, darkTheme, lightTheme } from '@/scripts/theme';
import { Theme, applyTheme, darkTheme, lightTheme } from '@/scripts/theme';
import { host } from '@/config';
import * as os from '@/os';
import { ColdDeviceStorage } from '@/store';
@ -79,10 +84,9 @@ import * as symbols from '@/symbols';
export default defineComponent({
components: {
FormBase,
FormButton,
FormTextarea,
FormGroup,
FormFolder,
},
async beforeRouteLeave(to, from) {
@ -96,13 +100,23 @@ export default defineComponent({
[symbols.PAGE_INFO]: {
title: this.$ts.themeEditor,
icon: 'fas fa-palette',
bg: 'var(--bg)',
actions: [{
asFullButton: true,
icon: 'fas fa-eye',
text: this.$ts.preview,
handler: this.showPreview,
}, {
asFullButton: true,
icon: 'fas fa-check',
text: this.$ts.saveAs,
handler: this.saveAs,
}],
},
theme: {
base: 'light',
props: lightTheme.props
} as Theme,
codeEnabled: false,
descriptionEnabled: false,
description: null,
themeCode: null,
bgColors: [
@ -244,57 +258,51 @@ export default defineComponent({
<style lang="scss" scoped>
.cwepdizn {
max-width: 800px;
margin: 0 auto;
::v-deep(.cwepdizn-colors) {
text-align: center;
> .colorPicker {
> .colors {
padding: 32px;
text-align: center;
> .row {
> .color {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
border-radius: 8px;
> .row {
> .color {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
border-radius: 8px;
> .preview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 42px;
height: 42px;
border-radius: 4px;
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
transition: transform 0.15s ease;
}
&:hover {
> .preview {
transform: scale(1.1);
}
}
&.active {
box-shadow: 0 0 0 2px var(--divider) inset;
}
&.rounded {
border-radius: 999px;
> .preview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 42px;
height: 42px;
border-radius: 4px;
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
transition: transform 0.15s ease;
}
&:hover {
> .preview {
transform: scale(1.1);
}
}
&.active {
box-shadow: 0 0 0 2px var(--divider) inset;
}
&.rounded {
border-radius: 999px;
> .preview {
border-radius: 999px;
}
}
}
&.char {
line-height: 42px;
}
&.char {
line-height: 42px;
}
}
}

9
packages/client/src/pages/user-info.vue
View File

@ -53,9 +53,8 @@
<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ $ts.updateRemoteUser }}</FormButton>
</FormSection>
<FormObjectView tall :value="user">
<span>Raw</span>
</FormObjectView>
<MkObjectView tall :value="user">
</MkObjectView>
</div>
</FormSuspense>
</MkSpacer>
@ -63,7 +62,7 @@
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent } from 'vue';
import FormObjectView from '@/components/debobigego/object-view.vue';
import MkObjectView from '@/components/object-view.vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormSwitch from '@/components/form/switch.vue';
import FormLink from '@/components/form/link.vue';
@ -83,7 +82,7 @@ export default defineComponent({
FormSection,
FormTextarea,
FormSwitch,
FormObjectView,
MkObjectView,
FormButton,
FormLink,
MkKeyValue,