diff options
Diffstat (limited to 'src/client/pages')
110 files changed, 907 insertions, 783 deletions
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue index 384c7e8ccb..d2c0ec0550 100644 --- a/src/client/pages/about-misskey.vue +++ b/src/client/pages/about-misskey.vue @@ -2,15 +2,15 @@ <div style="overflow: clip;"> <FormBase class="znqjceqz"> <div id="debug"></div> - <section class="_formItem about"> - <div class="_formPanel panel" :class="{ playing: easterEggEngine != null }" ref="about"> + <section class="_debobigegoItem about"> + <div class="_debobigegoPanel panel" :class="{ playing: easterEggEngine != null }" ref="about"> <img src="/static-assets/client/about-icon.png" alt="" class="icon" @load="iconLoaded" draggable="false" @click="gravity"/> <div class="misskey">Misskey</div> <div class="version">v{{ version }}</div> <span class="emoji" v-for="emoji in easterEggEmojis" :key="emoji.id" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span> </div> </section> - <section class="_formItem" style="text-align: center; padding: 0 16px;"> + <section class="_debobigegoItem" style="text-align: center; padding: 0 16px;"> {{ $ts._aboutMisskey.about }}<br><MkA class="_link" to="/docs/general/misskey">{{ $ts.learnMore }}</MkA> </section> <FormGroup> @@ -55,10 +55,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { version } from '@client/config'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; import MkLink from '@client/components/link.vue'; import { physics } from '@client/scripts/physics'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue index bdd4c78827..2c580c293a 100644 --- a/src/client/pages/about.vue +++ b/src/client/pages/about.vue @@ -1,7 +1,7 @@ <template> <FormBase> - <div class="_formItem"> - <div class="_formPanel fwhjspax"> + <div class="_debobigegoItem"> + <div class="_debobigegoPanel fwhjspax"> <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/> <span class="name">{{ $instance.name || host }}</span> </div> @@ -59,12 +59,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { version, instanceName } from '@client/config'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import number from '@client/filters/number'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/advanced-theme-editor.vue b/src/client/pages/advanced-theme-editor.vue index c03d88b82d..8a63d74887 100644 --- a/src/client/pages/advanced-theme-editor.vue +++ b/src/client/pages/advanced-theme-editor.vue @@ -4,7 +4,7 @@ <div class="_content"> <details> <summary>{{ $ts.import }}</summary> - <MkTextarea v-model:value="themeToImport"> + <MkTextarea v-model="themeToImport"> {{ $ts._theme.importInfo }} </MkTextarea> <MkButton :disabled="!themeToImport.trim()" @click="importTheme">{{ $ts.import }}</MkButton> @@ -14,9 +14,9 @@ <section class="_section"> <div class="_content _card _gap"> <div class="_content"> - <MkInput v-model:value="name" required><span>{{ $ts.name }}</span></MkInput> - <MkInput v-model:value="author" required><span>{{ $ts.author }}</span></MkInput> - <MkTextarea v-model:value="description"><span>{{ $ts.description }}</span></MkTextarea> + <MkInput v-model="name" required><span>{{ $ts.name }}</span></MkInput> + <MkInput v-model="author" required><span>{{ $ts.author }}</span></MkInput> + <MkTextarea v-model="description"><span>{{ $ts.description }}</span></MkTextarea> <div class="_inputs"> <div v-text="$ts._theme.base" /> <MkRadio v-model="baseTheme" value="light">{{ $ts.light }}</MkRadio> @@ -41,31 +41,31 @@ <!-- color --> <div v-else-if="typeof v === 'string'" class="color"> <input type="color" :value="v" @input="colorChanged($event.target.value, i)"/> - <MkInput class="select" :value="v" @update:value="colorChanged($event, i)"/> + <MkInput class="select" :value="v" @update:modelValue="colorChanged($event, i)"/> </div> <!-- ref const --> - <MkInput v-else-if="v.type === 'refConst'" v-model:value="v.key"> + <MkInput v-else-if="v.type === 'refConst'" v-model="v.key"> <template #prefix>$</template> <span>{{ $ts.name }}</span> </MkInput> <!-- ref props --> - <MkSelect class="select" v-else-if="v.type === 'refProp'" v-model:value="v.key"> + <MkSelect class="select" v-else-if="v.type === 'refProp'" v-model="v.key"> <option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option> </MkSelect> <!-- func --> <template v-else-if="v.type === 'func'"> - <MkSelect class="select" v-model:value="v.name"> + <MkSelect class="select" v-model="v.name"> <template #label>{{ $ts._theme.funcKind }}</template> <option v-for="n in ['alpha', 'darken', 'lighten']" :value="n" :key="n">{{ $t('_theme.' + n) }}</option> </MkSelect> - <MkInput type="number" v-model:value="v.arg"><span>{{ $ts._theme.argument }}</span></MkInput> - <MkSelect class="select" v-model:value="v.value"> + <MkInput type="number" v-model="v.arg"><span>{{ $ts._theme.argument }}</span></MkInput> + <MkSelect class="select" v-model="v.value"> <template #label>{{ $ts._theme.basedProp }}</template> <option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option> </MkSelect> </template> <!-- CSS --> - <MkInput v-else-if="v.type === 'css'" v-model:value="v.value"> + <MkInput v-else-if="v.type === 'css'" v-model="v.value"> <span>CSS</span> </MkInput> </div> @@ -95,11 +95,11 @@ import { defineComponent } from 'vue'; import * as JSON5 from 'json5'; import { toUnicode } from 'punycode/'; -import MkRadio from '@client/components/ui/radio.vue'; +import MkRadio from '@client/components/form/radio.vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkSample from '@client/components/sample.vue'; import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '@client/scripts/theme-editor'; diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue index c6d459fd6d..9aa7d4ea4d 100644 --- a/src/client/pages/api-console.vue +++ b/src/client/pages/api-console.vue @@ -1,7 +1,7 @@ <template> <div class="_root"> <div class="_block" style="padding: 24px;"> - <MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class="_inputNoTopMargin"> + <MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class=""> <template #label>Endpoint</template> </MkInput> <MkTextarea v-model="body" code> @@ -27,9 +27,9 @@ import { defineComponent } from 'vue'; import * as JSON5 from 'json5'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkSwitch from '@client/components/form/switch.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue index eeea0b70aa..67e27896ce 100644 --- a/src/client/pages/channel-editor.vue +++ b/src/client/pages/channel-editor.vue @@ -27,9 +27,9 @@ <script lang="ts"> import { computed, defineComponent } from 'vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import { selectFile } from '@client/scripts/select-file'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue index 7e3302959b..fd1408c253 100644 --- a/src/client/pages/channels.vue +++ b/src/client/pages/channels.vue @@ -1,7 +1,7 @@ <template> <div> <div class="_section" style="padding: 0;" v-if="$i"> - <MkTab class="_content" v-model:value="tab"> + <MkTab class="_content" v-model="tab"> <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._channel.featured }}</option> <option value="following"><i class="fas fa-heart"></i> {{ $ts._channel.following }}</option> <option value="owned"><i class="fas fa-edit"></i> {{ $ts._channel.owned }}</option> diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue index be4d4255db..629dc2be53 100644 --- a/src/client/pages/docs.vue +++ b/src/client/pages/docs.vue @@ -2,7 +2,7 @@ <div class="vtaihdtm"> <div class="body"> <div class="search"> - <MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search"> + <MkInput v-model="query" :debounce="true" type="search" class="" :placeholder="$ts.search"> <template #prefix><i class="fas fa-search"></i></template> </MkInput> </div> @@ -57,7 +57,7 @@ import { defineComponent } from 'vue'; import { url, lang } from '@client/config'; import * as symbols from '@client/symbols'; import MkFolder from '@client/components/ui/folder.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; export default defineComponent({ components: { diff --git a/src/client/pages/emojis.category.vue b/src/client/pages/emojis.category.vue index 7fee792854..d7737523d2 100644 --- a/src/client/pages/emojis.category.vue +++ b/src/client/pages/emojis.category.vue @@ -1,7 +1,7 @@ <template> <div class="driuhtrh"> <div class="query"> - <MkInput v-model="q" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search"> + <MkInput v-model="q" class="" :placeholder="$ts.search"> <template #prefix><i class="fas fa-search"></i></template> </MkInput> @@ -31,8 +31,8 @@ <script lang="ts"> import { defineComponent, computed } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkFolder from '@client/components/ui/folder.vue'; import MkTab from '@client/components/tab.vue'; import * as os from '@client/os'; diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue index 7054940a1a..7e0e8ea27b 100644 --- a/src/client/pages/explore.vue +++ b/src/client/pages/explore.vue @@ -75,7 +75,7 @@ import { computed, defineComponent } from 'vue'; import XUserList from '@client/components/user-list.vue'; import MkFolder from '@client/components/ui/folder.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import number from '@client/filters/number'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/federation.vue b/src/client/pages/federation.vue index 2afe70eea6..aac94e00af 100644 --- a/src/client/pages/federation.vue +++ b/src/client/pages/federation.vue @@ -1,11 +1,11 @@ <template> <div class="taeiyria"> <div class="query"> - <MkInput v-model="host" :debounce="true" class="_inputNoTopMargin"> + <MkInput v-model="host" :debounce="true" class=""> <template #prefix><i class="fas fa-search"></i></template> <template #label>{{ $ts.host }}</template> </MkInput> - <div class="_inputSplit _inputNoBottomMargin"> + <div class="_inputSplit"> <MkSelect v-model="state"> <template #label>{{ $ts.state }}</template> <option value="all">{{ $ts.all }}</option> @@ -96,8 +96,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkPagination from '@client/components/ui/pagination.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/gallery/edit.vue b/src/client/pages/gallery/edit.vue index cd6a0defdd..8e74b068ef 100644 --- a/src/client/pages/gallery/edit.vue +++ b/src/client/pages/gallery/edit.vue @@ -1,23 +1,23 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormInput v-model:value="title"> + <FormInput v-model="title"> <span>{{ $ts.title }}</span> </FormInput> - <FormTextarea v-model:value="description" :max="500"> + <FormTextarea v-model="description" :max="500"> <span>{{ $ts.description }}</span> </FormTextarea> <FormGroup> - <div v-for="file in files" :key="file.id" class="_formItem _formPanel wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }"> + <div v-for="file in files" :key="file.id" class="_debobigegoItem _debobigegoPanel wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }"> <div class="name">{{ file.name }}</div> <button class="remove _button" @click="remove(file)" v-tooltip="$ts.remove"><i class="fas fa-times"></i></button> </div> <FormButton @click="selectFile" primary><i class="fas fa-plus"></i> {{ $ts.attachFile }}</FormButton> </FormGroup> - <FormSwitch v-model:value="isSensitive">{{ $ts.markAsSensitive }}</FormSwitch> + <FormSwitch v-model="isSensitive">{{ $ts.markAsSensitive }}</FormSwitch> <FormButton v-if="postId" @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> <FormButton v-else @click="save" primary><i class="fas fa-save"></i> {{ $ts.publish }}</FormButton> @@ -29,14 +29,14 @@ <script lang="ts"> import { computed, defineComponent } from 'vue'; -import FormButton from '@client/components/form/button.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormTuple from '@client/components/form/tuple.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormTuple from '@client/components/debobigego/tuple.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import { selectFile } from '@client/scripts/select-file'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/gallery/index.vue b/src/client/pages/gallery/index.vue index 9e726e70f2..ffc599513e 100644 --- a/src/client/pages/gallery/index.vue +++ b/src/client/pages/gallery/index.vue @@ -1,6 +1,6 @@ <template> <div class="xprsixdl _root"> - <MkTab v-model:value="tab" v-if="$i"> + <MkTab v-model="tab" v-if="$i"> <option value="explore"><i class="fas fa-icons"></i> {{ $ts.gallery }}</option> <option value="liked"><i class="fas fa-heart"></i> {{ $ts._gallery.liked }}</option> <option value="my"><i class="fas fa-edit"></i> {{ $ts._gallery.my }}</option> @@ -46,7 +46,7 @@ import { computed, defineComponent } from 'vue'; import XUserList from '@client/components/user-list.vue'; import MkFolder from '@client/components/ui/folder.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import MkButton from '@client/components/ui/button.vue'; import MkTab from '@client/components/tab.vue'; import MkPagination from '@client/components/ui/pagination.vue'; diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue index 7d03c0847d..4fbf104f0c 100644 --- a/src/client/pages/instance-info.vue +++ b/src/client/pages/instance-info.vue @@ -3,8 +3,8 @@ <FormGroup v-if="instance"> <template #label>{{ instance.host }}</template> <FormGroup> - <div class="_formItem"> - <div class="_formPanel fnfelxur"> + <div class="_debobigegoItem"> + <div class="_debobigegoPanel fnfelxur"> <img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/> </div> </div> @@ -60,9 +60,9 @@ <template #value>{{ instance.openRegistrations ? $ts.yes : $ts.no }}</template> </FormKeyValueView> </FormGroup> - <div class="_formItem"> - <div class="_formLabel">{{ $ts.statistics }}</div> - <div class="_formPanel cmhjzshl"> + <div class="_debobigegoItem"> + <div class="_debobigegoLabel">{{ $ts.statistics }}</div> + <div class="_debobigegoPanel cmhjzshl"> <div class="selects"> <MkSelect v-model="chartSrc" style="margin: 0; flex: 1;"> <option value="requests">{{ $ts._instanceCharts.requests }}</option> @@ -136,15 +136,15 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; import Chart from 'chart.js'; -import FormObjectView from '@client/components/form/object-view.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import FormObjectView from '@client/components/debobigego/object-view.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; +import MkSelect from '@client/components/form/select.vue'; import * as os from '@client/os'; import number from '@client/filters/number'; import bytes from '@client/filters/bytes'; diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue index ac20ebabe5..a66847938d 100644 --- a/src/client/pages/instance/abuses.vue +++ b/src/client/pages/instance/abuses.vue @@ -24,10 +24,10 @@ </div> <!-- TODO <div class="inputs" style="display: flex; padding-top: 1.2em;"> - <MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.reports.reload()"> + <MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()"> <span>{{ $ts.username }}</span> </MkInput> - <MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.reports.reload()" :disabled="pagination.params().origin === 'local'"> + <MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()" :disabled="pagination.params().origin === 'local'"> <span>{{ $ts.host }}</span> </MkInput> </div> @@ -65,8 +65,8 @@ import { defineComponent } from 'vue'; import { parseAcct } from '@/misc/acct'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkPagination from '@client/components/ui/pagination.vue'; import { acct } from '@client/filters/user'; import * as os from '@client/os'; diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue index 50c8c29cbf..8742d0bda1 100644 --- a/src/client/pages/instance/ads.vue +++ b/src/client/pages/instance/ads.vue @@ -44,9 +44,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkRadio from '@client/components/ui/radio.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkRadio from '@client/components/form/radio.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue index d48e3737ad..35d676cf28 100644 --- a/src/client/pages/instance/announcements.vue +++ b/src/client/pages/instance/announcements.vue @@ -25,8 +25,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/instance/bot-protection.vue b/src/client/pages/instance/bot-protection.vue index 449b8a233d..731f114cc2 100644 --- a/src/client/pages/instance/bot-protection.vue +++ b/src/client/pages/instance/bot-protection.vue @@ -9,43 +9,43 @@ </FormRadios> <template v-if="provider === 'hcaptcha'"> - <div class="_formItem _formNoConcat" v-sticky-container> - <div class="_formLabel">hCaptcha</div> + <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container> + <div class="_debobigegoLabel">hCaptcha</div> <div class="main"> - <FormInput v-model:value="hcaptchaSiteKey"> + <FormInput v-model="hcaptchaSiteKey"> <template #prefix><i class="fas fa-key"></i></template> <span>{{ $ts.hcaptchaSiteKey }}</span> </FormInput> - <FormInput v-model:value="hcaptchaSecretKey"> + <FormInput v-model="hcaptchaSecretKey"> <template #prefix><i class="fas fa-key"></i></template> <span>{{ $ts.hcaptchaSecretKey }}</span> </FormInput> </div> </div> - <div class="_formItem _formNoConcat" v-sticky-container> - <div class="_formLabel">{{ $ts.preview }}</div> - <div class="_formPanel" style="padding: var(--formContentHMargin);"> + <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container> + <div class="_debobigegoLabel">{{ $ts.preview }}</div> + <div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);"> <MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/> </div> </div> </template> <template v-else-if="provider === 'recaptcha'"> - <div class="_formItem _formNoConcat" v-sticky-container> - <div class="_formLabel">reCAPTCHA</div> + <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container> + <div class="_debobigegoLabel">reCAPTCHA</div> <div class="main"> - <FormInput v-model:value="recaptchaSiteKey"> + <FormInput v-model="recaptchaSiteKey"> <template #prefix><i class="fas fa-key"></i></template> <span>{{ $ts.recaptchaSiteKey }}</span> </FormInput> - <FormInput v-model:value="recaptchaSecretKey"> + <FormInput v-model="recaptchaSecretKey"> <template #prefix><i class="fas fa-key"></i></template> <span>{{ $ts.recaptchaSecretKey }}</span> </FormInput> </div> </div> - <div v-if="recaptchaSiteKey" class="_formItem _formNoConcat" v-sticky-container> - <div class="_formLabel">{{ $ts.preview }}</div> - <div class="_formPanel" style="padding: var(--formContentHMargin);"> + <div v-if="recaptchaSiteKey" class="_debobigegoItem _debobigegoNoConcat" v-sticky-container> + <div class="_debobigegoLabel">{{ $ts.preview }}</div> + <div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);"> <MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/> </div> </div> @@ -58,13 +58,13 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import FormRadios from '@client/components/form/radios.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormRadios from '@client/components/debobigego/radios.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/database.vue b/src/client/pages/instance/database.vue index a41d61ce2b..a8a1e9a54a 100644 --- a/src/client/pages/instance/database.vue +++ b/src/client/pages/instance/database.vue @@ -18,11 +18,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSuspense from '@client/components/form/suspense.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import bytes from '@client/filters/bytes'; diff --git a/src/client/pages/instance/email-settings.vue b/src/client/pages/instance/email-settings.vue index 9965a1420f..251354a43a 100644 --- a/src/client/pages/instance/email-settings.vue +++ b/src/client/pages/instance/email-settings.vue @@ -1,30 +1,30 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormSwitch v-model:value="enableEmail">{{ $ts.enableEmail }}<template #desc>{{ $ts.emailConfigInfo }}</template></FormSwitch> + <FormSwitch v-model="enableEmail">{{ $ts.enableEmail }}<template #desc>{{ $ts.emailConfigInfo }}</template></FormSwitch> <template v-if="enableEmail"> - <FormInput v-model:value="email" type="email"> + <FormInput v-model="email" type="email"> <span>{{ $ts.emailAddress }}</span> </FormInput> - <div class="_formItem _formNoConcat" v-sticky-container> - <div class="_formLabel">{{ $ts.smtpConfig }}</div> + <div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container> + <div class="_debobigegoLabel">{{ $ts.smtpConfig }}</div> <div class="main"> - <FormInput v-model:value="smtpHost"> + <FormInput v-model="smtpHost"> <span>{{ $ts.smtpHost }}</span> </FormInput> - <FormInput v-model:value="smtpPort" type="number"> + <FormInput v-model="smtpPort" type="number"> <span>{{ $ts.smtpPort }}</span> </FormInput> - <FormInput v-model:value="smtpUser"> + <FormInput v-model="smtpUser"> <span>{{ $ts.smtpUser }}</span> </FormInput> - <FormInput v-model:value="smtpPass" type="password"> + <FormInput v-model="smtpPass" type="password"> <span>{{ $ts.smtpPass }}</span> </FormInput> <FormInfo>{{ $ts.emptyToDisableSmtpAuth }}</FormInfo> - <FormSwitch v-model:value="smtpSecure">{{ $ts.smtpSecure }}<template #desc>{{ $ts.smtpSecureInfo }}</template></FormSwitch> + <FormSwitch v-model="smtpSecure">{{ $ts.smtpSecure }}<template #desc>{{ $ts.smtpSecureInfo }}</template></FormSwitch> </div> </div> @@ -38,13 +38,13 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue index 7e9bdc80dd..bd8b2061ae 100644 --- a/src/client/pages/instance/emoji-edit-dialog.vue +++ b/src/client/pages/instance/emoji-edit-dialog.vue @@ -31,7 +31,7 @@ import { defineComponent } from 'vue'; import XModalWindow from '@client/components/ui/modal-window.vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; import { unique } from '../../../prelude/array'; diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue index 7badc9da02..6118d869e9 100644 --- a/src/client/pages/instance/emojis.vue +++ b/src/client/pages/instance/emojis.vue @@ -1,6 +1,6 @@ <template> <div class="ogwlenmc"> - <MkTab v-model:value="tab"> + <MkTab v-model="tab"> <option value="local">{{ $ts.local }}</option> <option value="remote">{{ $ts.remote }}</option> </MkTab> @@ -56,7 +56,7 @@ <script lang="ts"> import { computed, defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import MkPagination from '@client/components/ui/pagination.vue'; import MkTab from '@client/components/tab.vue'; import { selectFile } from '@client/scripts/select-file'; diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue index 8a03a11de7..02d83e5022 100644 --- a/src/client/pages/instance/file-dialog.vue +++ b/src/client/pages/instance/file-dialog.vue @@ -37,7 +37,7 @@ <script lang="ts"> import { computed, defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; +import MkSwitch from '@client/components/form/switch.vue'; import XModalWindow from '@client/components/ui/modal-window.vue'; import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue'; import Progress from '@client/scripts/loading'; diff --git a/src/client/pages/instance/files-settings.vue b/src/client/pages/instance/files-settings.vue index 614c7d4dbb..8bf4613a76 100644 --- a/src/client/pages/instance/files-settings.vue +++ b/src/client/pages/instance/files-settings.vue @@ -1,23 +1,23 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormSwitch v-model:value="cacheRemoteFiles"> + <FormSwitch v-model="cacheRemoteFiles"> {{ $ts.cacheRemoteFiles }} <template #desc>{{ $ts.cacheRemoteFilesDescription }}</template> </FormSwitch> - <FormSwitch v-model:value="proxyRemoteFiles"> + <FormSwitch v-model="proxyRemoteFiles"> {{ $ts.proxyRemoteFiles }} <template #desc>{{ $ts.proxyRemoteFilesDescription }}</template> </FormSwitch> - <FormInput v-model:value="localDriveCapacityMb" type="number"> + <FormInput v-model="localDriveCapacityMb" type="number"> <span>{{ $ts.driveCapacityPerLocalAccount }}</span> <template #suffix>MB</template> <template #desc>{{ $ts.inMb }}</template> </FormInput> - <FormInput v-model:value="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles"> + <FormInput v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles"> <span>{{ $ts.driveCapacityPerRemoteAccount }}</span> <template #suffix>MB</template> <template #desc>{{ $ts.inMb }}</template> @@ -30,12 +30,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue index b7f472b7c8..df2431ad02 100644 --- a/src/client/pages/instance/files.vue +++ b/src/client/pages/instance/files.vue @@ -63,8 +63,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkPagination from '@client/components/ui/pagination.vue'; import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue'; import bytes from '@client/filters/bytes'; diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue index 612bfa762a..657a654e51 100644 --- a/src/client/pages/instance/index.vue +++ b/src/client/pages/instance/index.vue @@ -3,8 +3,8 @@ <div class="nav" v-if="!narrow || page == null"> <FormBase> <FormGroup> - <div class="_formItem"> - <div class="_formPanel lxpfedzu"> + <div class="_debobigegoItem"> + <div class="_debobigegoPanel lxpfedzu"> <img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/> </div> </div> @@ -56,10 +56,10 @@ <script lang="ts"> import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'; import { i18n } from '@client/i18n'; -import FormLink from '@client/components/form/link.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import { scroll } from '@client/scripts/scroll'; import * as symbols from '@client/symbols'; import * as os from '@client/os'; diff --git a/src/client/pages/instance/instance-block.vue b/src/client/pages/instance/instance-block.vue index ed5740f339..a00970d85b 100644 --- a/src/client/pages/instance/instance-block.vue +++ b/src/client/pages/instance/instance-block.vue @@ -1,7 +1,7 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormTextarea v-model:value="blockedHosts"> + <FormTextarea v-model="blockedHosts"> <span>{{ $ts.blockedInstances }}</span> <template #desc>{{ $ts.blockedInstancesDescription }}</template> </FormTextarea> @@ -13,14 +13,14 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue index c39f0d1ecb..6117f090de 100644 --- a/src/client/pages/instance/instance.vue +++ b/src/client/pages/instance/instance.vue @@ -127,9 +127,9 @@ import { defineComponent, markRaw } from 'vue'; import Chart from 'chart.js'; import XModalWindow from '@client/components/ui/modal-window.vue'; import MkUsersDialog from '@client/components/users-dialog.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkButton from '@client/components/ui/button.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; +import MkSwitch from '@client/components/form/switch.vue'; import MkInfo from '@client/components/ui/info.vue'; import bytes from '@client/filters/bytes'; import number from '@client/filters/number'; diff --git a/src/client/pages/instance/integrations-discord.vue b/src/client/pages/instance/integrations-discord.vue index c7508918f8..c33b24f17f 100644 --- a/src/client/pages/instance/integrations-discord.vue +++ b/src/client/pages/instance/integrations-discord.vue @@ -1,19 +1,19 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormSwitch v-model:value="enableDiscordIntegration"> + <FormSwitch v-model="enableDiscordIntegration"> {{ $ts.enable }} </FormSwitch> <template v-if="enableDiscordIntegration"> <FormInfo>Callback URL: {{ `${url}/api/dc/cb` }}</FormInfo> - <FormInput v-model:value="discordClientId"> + <FormInput v-model="discordClientId"> <template #prefix><i class="fas fa-key"></i></template> Client ID </FormInput> - <FormInput v-model:value="discordClientSecret"> + <FormInput v-model="discordClientSecret"> <template #prefix><i class="fas fa-key"></i></template> Client Secret </FormInput> @@ -26,12 +26,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/integrations-github.vue b/src/client/pages/instance/integrations-github.vue index 16586b15b4..cdf85868ff 100644 --- a/src/client/pages/instance/integrations-github.vue +++ b/src/client/pages/instance/integrations-github.vue @@ -1,19 +1,19 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormSwitch v-model:value="enableGithubIntegration"> + <FormSwitch v-model="enableGithubIntegration"> {{ $ts.enable }} </FormSwitch> <template v-if="enableGithubIntegration"> <FormInfo>Callback URL: {{ `${url}/api/gh/cb` }}</FormInfo> - <FormInput v-model:value="githubClientId"> + <FormInput v-model="githubClientId"> <template #prefix><i class="fas fa-key"></i></template> Client ID </FormInput> - <FormInput v-model:value="githubClientSecret"> + <FormInput v-model="githubClientSecret"> <template #prefix><i class="fas fa-key"></i></template> Client Secret </FormInput> @@ -26,12 +26,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/integrations-twitter.vue b/src/client/pages/instance/integrations-twitter.vue index b08b7f40a5..ed7d097d0a 100644 --- a/src/client/pages/instance/integrations-twitter.vue +++ b/src/client/pages/instance/integrations-twitter.vue @@ -1,19 +1,19 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormSwitch v-model:value="enableTwitterIntegration"> + <FormSwitch v-model="enableTwitterIntegration"> {{ $ts.enable }} </FormSwitch> <template v-if="enableTwitterIntegration"> <FormInfo>Callback URL: {{ `${url}/api/tw/cb` }}</FormInfo> - <FormInput v-model:value="twitterConsumerKey"> + <FormInput v-model="twitterConsumerKey"> <template #prefix><i class="fas fa-key"></i></template> Consumer Key </FormInput> - <FormInput v-model:value="twitterConsumerSecret"> + <FormInput v-model="twitterConsumerSecret"> <template #prefix><i class="fas fa-key"></i></template> Consumer Secret </FormInput> @@ -26,12 +26,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/integrations.vue b/src/client/pages/instance/integrations.vue index 7debedc367..bfd9e2f349 100644 --- a/src/client/pages/instance/integrations.vue +++ b/src/client/pages/instance/integrations.vue @@ -19,14 +19,14 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormLink from '@client/components/form/link.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue index 4eee816f96..74aea0fc45 100644 --- a/src/client/pages/instance/logs.vue +++ b/src/client/pages/instance/logs.vue @@ -31,9 +31,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSelect from '@client/components/ui/select.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSelect from '@client/components/form/select.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/instance/metrics.vue b/src/client/pages/instance/metrics.vue index 283b5939f0..1606063aee 100644 --- a/src/client/pages/instance/metrics.vue +++ b/src/client/pages/instance/metrics.vue @@ -1,7 +1,7 @@ <template> -<div class="_formItem"> - <div class="_formLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div> - <div class="_formPanel xhexznfu"> +<div class="_debobigegoItem"> + <div class="_debobigegoLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div> + <div class="_debobigegoPanel xhexznfu"> <div> <canvas :ref="cpumem"></canvas> </div> @@ -16,9 +16,9 @@ </div> </div> </div> -<div class="_formItem"> - <div class="_formLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div> - <div class="_formPanel xhexznfu"> +<div class="_debobigegoItem"> + <div class="_debobigegoLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div> + <div class="_debobigegoPanel xhexznfu"> <div> <canvas :ref="disk"></canvas> </div> @@ -33,9 +33,9 @@ </div> </div> </div> -<div class="_formItem"> - <div class="_formLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div> - <div class="_formPanel xhexznfu"> +<div class="_debobigegoItem"> + <div class="_debobigegoLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div> + <div class="_debobigegoPanel xhexznfu"> <div> <canvas :ref="net"></canvas> </div> @@ -54,8 +54,8 @@ import { defineComponent, markRaw } from 'vue'; import Chart from 'chart.js'; import MkButton from '@client/components/ui/button.vue'; -import MkSelect from '@client/components/ui/select.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkSelect from '@client/components/form/select.vue'; +import MkInput from '@client/components/form/input.vue'; import MkContainer from '@client/components/ui/container.vue'; import MkFolder from '@client/components/ui/folder.vue'; import MkwFederation from '../../widgets/federation.vue'; diff --git a/src/client/pages/instance/object-storage.vue b/src/client/pages/instance/object-storage.vue index 814aeb6e48..ba6a249685 100644 --- a/src/client/pages/instance/object-storage.vue +++ b/src/client/pages/instance/object-storage.vue @@ -1,59 +1,59 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormSwitch v-model:value="useObjectStorage">{{ $ts.useObjectStorage }}</FormSwitch> + <FormSwitch v-model="useObjectStorage">{{ $ts.useObjectStorage }}</FormSwitch> <template v-if="useObjectStorage"> - <FormInput v-model:value="objectStorageBaseUrl"> + <FormInput v-model="objectStorageBaseUrl"> <span>{{ $ts.objectStorageBaseUrl }}</span> <template #desc>{{ $ts.objectStorageBaseUrlDesc }}</template> </FormInput> - <FormInput v-model:value="objectStorageBucket"> + <FormInput v-model="objectStorageBucket"> <span>{{ $ts.objectStorageBucket }}</span> <template #desc>{{ $ts.objectStorageBucketDesc }}</template> </FormInput> - <FormInput v-model:value="objectStoragePrefix"> + <FormInput v-model="objectStoragePrefix"> <span>{{ $ts.objectStoragePrefix }}</span> <template #desc>{{ $ts.objectStoragePrefixDesc }}</template> </FormInput> - <FormInput v-model:value="objectStorageEndpoint"> + <FormInput v-model="objectStorageEndpoint"> <span>{{ $ts.objectStorageEndpoint }}</span> <template #desc>{{ $ts.objectStorageEndpointDesc }}</template> </FormInput> - <FormInput v-model:value="objectStorageRegion"> + <FormInput v-model="objectStorageRegion"> <span>{{ $ts.objectStorageRegion }}</span> <template #desc>{{ $ts.objectStorageRegionDesc }}</template> </FormInput> - <FormInput v-model:value="objectStorageAccessKey"> + <FormInput v-model="objectStorageAccessKey"> <template #prefix><i class="fas fa-key"></i></template> <span>Access key</span> </FormInput> - <FormInput v-model:value="objectStorageSecretKey"> + <FormInput v-model="objectStorageSecretKey"> <template #prefix><i class="fas fa-key"></i></template> <span>Secret key</span> </FormInput> - <FormSwitch v-model:value="objectStorageUseSSL"> + <FormSwitch v-model="objectStorageUseSSL"> {{ $ts.objectStorageUseSSL }} <template #desc>{{ $ts.objectStorageUseSSLDesc }}</template> </FormSwitch> - <FormSwitch v-model:value="objectStorageUseProxy"> + <FormSwitch v-model="objectStorageUseProxy"> {{ $ts.objectStorageUseProxy }} <template #desc>{{ $ts.objectStorageUseProxyDesc }}</template> </FormSwitch> - <FormSwitch v-model:value="objectStorageSetPublicRead"> + <FormSwitch v-model="objectStorageSetPublicRead"> {{ $ts.objectStorageSetPublicRead }} </FormSwitch> - <FormSwitch v-model:value="objectStorageS3ForcePathStyle"> + <FormSwitch v-model="objectStorageS3ForcePathStyle"> s3ForcePathStyle </FormSwitch> </template> @@ -65,12 +65,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/other-settings.vue b/src/client/pages/instance/other-settings.vue index 4fa80b2b2c..b9f9ce30f7 100644 --- a/src/client/pages/instance/other-settings.vue +++ b/src/client/pages/instance/other-settings.vue @@ -2,17 +2,17 @@ <FormBase> <FormSuspense :p="init"> <FormGroup> - <FormInput v-model:value="summalyProxy"> + <FormInput v-model="summalyProxy"> <template #prefix><i class="fas fa-link"></i></template> Summaly Proxy URL </FormInput> </FormGroup> <FormGroup> - <FormInput v-model:value="deeplAuthKey"> + <FormInput v-model="deeplAuthKey"> <template #prefix><i class="fas fa-key"></i></template> DeepL Auth Key </FormInput> - <FormSwitch v-model:value="deeplIsPro"> + <FormSwitch v-model="deeplIsPro"> Pro account </FormSwitch> </FormGroup> @@ -23,12 +23,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/overview.vue b/src/client/pages/instance/overview.vue index 0d7a5d1501..28dcfc03bf 100644 --- a/src/client/pages/instance/overview.vue +++ b/src/client/pages/instance/overview.vue @@ -17,8 +17,8 @@ </FormGroup> </FormSuspense> - <div class="_formItem"> - <div class="_formPanel"> + <div class="_debobigegoItem"> + <div class="_debobigegoPanel"> <MkInstanceStats :chart-limit="300" :detailed="true"/> </div> </div> @@ -47,18 +47,18 @@ <script lang="ts"> import { computed, defineComponent, markRaw } from 'vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import MkInstanceStats from '@client/components/instance-stats.vue'; import MkButton from '@client/components/ui/button.vue'; -import MkSelect from '@client/components/ui/select.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkSelect from '@client/components/form/select.vue'; +import MkInput from '@client/components/form/input.vue'; import MkContainer from '@client/components/ui/container.vue'; import MkFolder from '@client/components/ui/folder.vue'; import { version, url } from '@client/config'; diff --git a/src/client/pages/instance/proxy-account.vue b/src/client/pages/instance/proxy-account.vue index 3e2df8dcb4..a80ecccb05 100644 --- a/src/client/pages/instance/proxy-account.vue +++ b/src/client/pages/instance/proxy-account.vue @@ -16,14 +16,14 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue index 53d790598a..887fe9a574 100644 --- a/src/client/pages/instance/queue.chart.vue +++ b/src/client/pages/instance/queue.chart.vue @@ -1,7 +1,7 @@ <template> -<div class="_formItem"> - <div class="_formLabel"><slot name="title"></slot></div> - <div class="_formPanel pumxzjhg"> +<div class="_debobigegoItem"> + <div class="_debobigegoLabel"><slot name="title"></slot></div> + <div class="_debobigegoPanel pumxzjhg"> <div class="_table status"> <div class="_row"> <div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div> diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue index e8ec0bc97d..031bda2bed 100644 --- a/src/client/pages/instance/queue.vue +++ b/src/client/pages/instance/queue.vue @@ -14,8 +14,8 @@ import { defineComponent, markRaw } from 'vue'; import MkButton from '@client/components/ui/button.vue'; import XQueue from './queue.chart.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue index a3e4e7d1da..cb9b27a625 100644 --- a/src/client/pages/instance/relays.vue +++ b/src/client/pages/instance/relays.vue @@ -2,8 +2,8 @@ <FormBase class="relaycxt"> <FormButton @click="addRelay" primary><i class="fas fa-plus"></i> {{ $ts.addRelay }}</FormButton> - <div class="_formItem" v-for="relay in relays" :key="relay.inbox"> - <div class="_formPanel" style="padding: 16px;"> + <div class="_debobigegoItem" v-for="relay in relays" :key="relay.inbox"> + <div class="_debobigegoPanel" style="padding: 16px;"> <div>{{ relay.inbox }}</div> <div>{{ $t(`_relayStatus.${relay.status}`) }}</div> <MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton> @@ -15,9 +15,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormButton from '@client/components/form/button.vue'; +import MkInput from '@client/components/form/input.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/instance/security.vue b/src/client/pages/instance/security.vue index e3397a113b..53f923643a 100644 --- a/src/client/pages/instance/security.vue +++ b/src/client/pages/instance/security.vue @@ -8,7 +8,7 @@ <template #suffix v-else>{{ $ts.none }} ({{ $ts.notRecommended }})</template> </FormLink> - <FormSwitch v-model:value="enableRegistration">{{ $ts.enableRegistration }}</FormSwitch> + <FormSwitch v-model="enableRegistration">{{ $ts.enableRegistration }}</FormSwitch> <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> </FormSuspense> @@ -17,13 +17,13 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import FormLink from '@client/components/form/link.vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/service-worker.vue b/src/client/pages/instance/service-worker.vue index a52932bb75..9fa10def07 100644 --- a/src/client/pages/instance/service-worker.vue +++ b/src/client/pages/instance/service-worker.vue @@ -1,18 +1,18 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormSwitch v-model:value="enableServiceWorker"> + <FormSwitch v-model="enableServiceWorker"> {{ $ts.enableServiceworker }} <template #desc>{{ $ts.serviceworkerInfo }}</template> </FormSwitch> <template v-if="enableServiceWorker"> - <FormInput v-model:value="swPublicKey"> + <FormInput v-model="swPublicKey"> <template #prefix><i class="fas fa-key"></i></template> Public key </FormInput> - <FormInput v-model:value="swPrivateKey"> + <FormInput v-model="swPrivateKey"> <template #prefix><i class="fas fa-key"></i></template> Private key </FormInput> @@ -25,12 +25,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue index b68d784897..2ce9361d08 100644 --- a/src/client/pages/instance/settings.vue +++ b/src/client/pages/instance/settings.vue @@ -1,50 +1,50 @@ <template> <FormBase> <FormSuspense :p="init"> - <FormInput v-model:value="name"> + <FormInput v-model="name"> <span>{{ $ts.instanceName }}</span> </FormInput> - <FormTextarea v-model:value="description"> + <FormTextarea v-model="description"> <span>{{ $ts.instanceDescription }}</span> </FormTextarea> - <FormInput v-model:value="iconUrl"> + <FormInput v-model="iconUrl"> <template #prefix><i class="fas fa-link"></i></template> <span>{{ $ts.iconUrl }}</span> </FormInput> - <FormInput v-model:value="bannerUrl"> + <FormInput v-model="bannerUrl"> <template #prefix><i class="fas fa-link"></i></template> <span>{{ $ts.bannerUrl }}</span> </FormInput> - <FormInput v-model:value="backgroundImageUrl"> + <FormInput v-model="backgroundImageUrl"> <template #prefix><i class="fas fa-link"></i></template> <span>{{ $ts.backgroundImageUrl }}</span> </FormInput> - <FormInput v-model:value="tosUrl"> + <FormInput v-model="tosUrl"> <template #prefix><i class="fas fa-link"></i></template> <span>{{ $ts.tosUrl }}</span> </FormInput> - <FormInput v-model:value="maintainerName"> + <FormInput v-model="maintainerName"> <span>{{ $ts.maintainerName }}</span> </FormInput> - <FormInput v-model:value="maintainerEmail" type="email"> + <FormInput v-model="maintainerEmail" type="email"> <template #prefix><i class="fas fa-envelope"></i></template> <span>{{ $ts.maintainerEmail }}</span> </FormInput> - <FormInput v-model:value="maxNoteTextLength" type="number"> + <FormInput v-model="maxNoteTextLength" type="number"> <template #prefix><i class="fas fa-pencil-alt"></i></template> <span>{{ $ts.maxNoteTextLength }}</span> </FormInput> - <FormSwitch v-model:value="enableLocalTimeline">{{ $ts.enableLocalTimeline }}</FormSwitch> - <FormSwitch v-model:value="enableGlobalTimeline">{{ $ts.enableGlobalTimeline }}</FormSwitch> + <FormSwitch v-model="enableLocalTimeline">{{ $ts.enableLocalTimeline }}</FormSwitch> + <FormSwitch v-model="enableGlobalTimeline">{{ $ts.enableGlobalTimeline }}</FormSwitch> <FormInfo>{{ $ts.disablingTimelinesInfo }}</FormInfo> <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> @@ -54,14 +54,14 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { fetchInstance } from '@client/instance'; diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue index 8db62683ba..7671387f01 100644 --- a/src/client/pages/instance/users.vue +++ b/src/client/pages/instance/users.vue @@ -67,8 +67,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkPagination from '@client/components/ui/pagination.vue'; import { acct } from '@client/filters/user'; import * as os from '@client/os'; diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue index 314b5e2a5f..5ff4317627 100644 --- a/src/client/pages/mfm-cheat-sheet.vue +++ b/src/client/pages/mfm-cheat-sheet.vue @@ -286,7 +286,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; import * as symbols from '@client/symbols'; export default defineComponent({ diff --git a/src/client/pages/my-antennas/editor.vue b/src/client/pages/my-antennas/editor.vue index 882d48e643..972a4e0243 100644 --- a/src/client/pages/my-antennas/editor.vue +++ b/src/client/pages/my-antennas/editor.vue @@ -1,7 +1,7 @@ <template> <div class="shaynizk"> <div class="form"> - <MkInput v-model="name" class="_inputNoTopMargin"> + <MkInput v-model="name" class=""> <template #label>{{ $ts.name }}</template> </MkInput> <MkSelect v-model="src"> @@ -47,10 +47,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkSelect from '@client/components/ui/select.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkSelect from '@client/components/form/select.vue'; +import MkSwitch from '@client/components/form/switch.vue'; import { getAcct } from '@/misc/acct'; import * as os from '@client/os'; diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue index 9f153ff9cc..34f82f8a71 100644 --- a/src/client/pages/my-groups/index.vue +++ b/src/client/pages/my-groups/index.vue @@ -1,7 +1,7 @@ <template> <div class=""> <div class="_section" style="padding: 0;"> - <MkTab v-model:value="tab"> + <MkTab v-model="tab"> <option value="owned">{{ $ts.ownedGroups }}</option> <option value="joined">{{ $ts.joinedGroups }}</option> <option value="invites"><i class="fas fa-envelope-open-text"></i> {{ $ts.invites }}</option> diff --git a/src/client/pages/page-editor/els/page-editor.el.button.vue b/src/client/pages/page-editor/els/page-editor.el.button.vue index 3a43817cf6..85e9d7e711 100644 --- a/src/client/pages/page-editor/els/page-editor.el.button.vue +++ b/src/client/pages/page-editor/els/page-editor.el.button.vue @@ -40,9 +40,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkSelect from '@client/components/ui/select.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; +import MkSelect from '@client/components/form/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSwitch from '@client/components/form/switch.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.canvas.vue b/src/client/pages/page-editor/els/page-editor.el.canvas.vue index d8d5b990ca..c40d69a7c1 100644 --- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue +++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue @@ -22,7 +22,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.counter.vue b/src/client/pages/page-editor/els/page-editor.el.counter.vue index 973de50fc2..de7994e3ba 100644 --- a/src/client/pages/page-editor/els/page-editor.el.counter.vue +++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue @@ -20,7 +20,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.if.vue b/src/client/pages/page-editor/els/page-editor.el.if.vue index 6eb0c7709f..52f4dac22e 100644 --- a/src/client/pages/page-editor/els/page-editor.el.if.vue +++ b/src/client/pages/page-editor/els/page-editor.el.if.vue @@ -19,7 +19,7 @@ </optgroup> </MkSelect> - <XBlocks class="children" v-model:value="value.children" :hpml="hpml"/> + <XBlocks class="children" v-model="value.children" :hpml="hpml"/> </section> </XContainer> </template> @@ -28,7 +28,7 @@ import { defineComponent, defineAsyncComponent } from 'vue'; import { v4 as uuid } from 'uuid'; import XContainer from '../page-editor.container.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkSelect from '@client/components/form/select.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.note.vue b/src/client/pages/page-editor/els/page-editor.el.note.vue index 5766564c1a..9feec395b7 100644 --- a/src/client/pages/page-editor/els/page-editor.el.note.vue +++ b/src/client/pages/page-editor/els/page-editor.el.note.vue @@ -18,8 +18,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSwitch from '@client/components/form/switch.vue'; import XNote from '@client/components/note.vue'; import XNoteDetailed from '@client/components/note-detailed.vue'; import * as os from '@client/os'; diff --git a/src/client/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/pages/page-editor/els/page-editor.el.number-input.vue index 892e7e1caa..57b1397824 100644 --- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue @@ -20,7 +20,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.post.vue b/src/client/pages/page-editor/els/page-editor.el.post.vue index 4215b159d3..e21ccfd345 100644 --- a/src/client/pages/page-editor/els/page-editor.el.post.vue +++ b/src/client/pages/page-editor/els/page-editor.el.post.vue @@ -13,9 +13,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSwitch from '@client/components/form/switch.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue index 88be96f35d..62fb231f79 100644 --- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue +++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue @@ -14,8 +14,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.section.vue b/src/client/pages/page-editor/els/page-editor.el.section.vue index 16ef2598f9..75bdf120c0 100644 --- a/src/client/pages/page-editor/els/page-editor.el.section.vue +++ b/src/client/pages/page-editor/els/page-editor.el.section.vue @@ -11,7 +11,7 @@ </template> <section class="ilrvjyvi"> - <XBlocks class="children" v-model:value="value.children" :hpml="hpml"/> + <XBlocks class="children" v-model="value.children" :hpml="hpml"/> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.switch.vue b/src/client/pages/page-editor/els/page-editor.el.switch.vue index ade1291410..cf15f58c82 100644 --- a/src/client/pages/page-editor/els/page-editor.el.switch.vue +++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue @@ -13,8 +13,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkSwitch from '@client/components/form/switch.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/pages/page-editor/els/page-editor.el.text-input.vue index 3c8fcc04af..210199befd 100644 --- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue @@ -13,7 +13,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue index a4fbb08ffe..14f36db2a1 100644 --- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue @@ -13,8 +13,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkInput from '@client/components/form/input.vue'; import * as os from '@client/os'; export default defineComponent({ diff --git a/src/client/pages/page-editor/page-editor.blocks.vue b/src/client/pages/page-editor/page-editor.blocks.vue index 0065b16c8c..c27162a26e 100644 --- a/src/client/pages/page-editor/page-editor.blocks.vue +++ b/src/client/pages/page-editor/page-editor.blocks.vue @@ -32,7 +32,7 @@ export default defineComponent({ }, props: { - value: { + modelValue: { type: Array, required: true }, @@ -41,15 +41,15 @@ export default defineComponent({ }, }, - emits: ['update:value'], + emits: ['update:modelValue'], computed: { blocks: { get() { - return this.value; + return this.modelValue; }, set(value) { - this.$emit('update:value', value); + this.$emit('update:modelValue', value); } } }, @@ -62,17 +62,16 @@ export default defineComponent({ v, ...this.blocks.slice(i + 1) ]; - this.$emit('update:value', newValue); + this.$emit('update:modelValue', newValue); }, removeItem(el) { - console.log(el); const i = this.blocks.findIndex(x => x.id === el.id); const newValue = [ ...this.blocks.slice(0, i), ...this.blocks.slice(i + 1) ]; - this.$emit('update:value', newValue); + this.$emit('update:modelValue', newValue); }, } }); diff --git a/src/client/pages/page-editor/page-editor.script-block.vue b/src/client/pages/page-editor/page-editor.script-block.vue index fedcd7b317..3313fc1ba9 100644 --- a/src/client/pages/page-editor/page-editor.script-block.vue +++ b/src/client/pages/page-editor/page-editor.script-block.vue @@ -7,23 +7,23 @@ </button> </template> - <section v-if="value.type === null" class="pbglfege" @click="changeType()"> + <section v-if="modelValue.type === null" class="pbglfege" @click="changeType()"> {{ $ts._pages.script.emptySlot }} </section> - <section v-else-if="value.type === 'text'" class="tbwccoaw"> - <input v-model="value.value"/> + <section v-else-if="modelValue.type === 'text'" class="tbwccoaw"> + <input v-model="modelValue.value"/> </section> - <section v-else-if="value.type === 'multiLineText'" class="tbwccoaw"> - <textarea v-model="value.value"></textarea> + <section v-else-if="modelValue.type === 'multiLineText'" class="tbwccoaw"> + <textarea v-model="modelValue.value"></textarea> </section> - <section v-else-if="value.type === 'textList'" class="tbwccoaw"> - <textarea v-model="value.value" :placeholder="$ts._pages.script.blocks._textList.info"></textarea> + <section v-else-if="modelValue.type === 'textList'" class="tbwccoaw"> + <textarea v-model="modelValue.value" :placeholder="$ts._pages.script.blocks._textList.info"></textarea> </section> - <section v-else-if="value.type === 'number'" class="tbwccoaw"> - <input v-model="value.value" type="number"/> + <section v-else-if="modelValue.type === 'number'" class="tbwccoaw"> + <input v-model="modelValue.value" type="number"/> </section> - <section v-else-if="value.type === 'ref'" class="hpdwcrvs"> - <select v-model="value.value"> + <section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs"> + <select v-model="modelValue.value"> <option v-for="v in hpml.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option> <optgroup :label="$ts._pages.script.argVariables"> <option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option> @@ -36,21 +36,21 @@ </optgroup> </select> </section> - <section v-else-if="value.type === 'aiScriptVar'" class="tbwccoaw"> - <input v-model="value.value"/> + <section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw"> + <input v-model="modelValue.value"/> </section> - <section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;"> + <section v-else-if="modelValue.type === 'fn'" class="" style="padding:0 16px 16px 16px;"> <MkTextarea v-model="slots"> <template #label>{{ $ts._pages.script.blocks._fn.slots }}</template> <template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template> </MkTextarea> - <XV v-if="value.value.expression" v-model:value="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/> + <XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/> </section> - <section v-else-if="value.type.startsWith('fn:')" class="" style="padding:16px;"> - <XV v-for="(x, i) in value.args" v-model:value="value.args[i]" :title="hpml.getVarByName(value.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name" :key="i"/> + <section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;"> + <XV v-for="(x, i) in modelValue.args" v-model="value.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name" :key="i"/> </section> <section v-else class="" style="padding:16px;"> - <XV v-for="(x, i) in value.args" v-model:value="value.args[i]" :title="$t(`_pages.script.blocks._${value.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/> + <XV v-for="(x, i) in modelValue.args" v-model="modelValue.args[i]" :title="$t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/> </section> </XContainer> </template> @@ -59,7 +59,7 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import { v4 as uuid } from 'uuid'; import XContainer from './page-editor.container.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; import { blockDefs } from '@client/scripts/hpml/index'; import * as os from '@client/os'; import { isLiteralValue } from '@client/scripts/hpml/expr'; @@ -78,7 +78,7 @@ export default defineComponent({ required: false, default: null }, - value: { + modelValue: { required: true }, title: { @@ -113,21 +113,21 @@ export default defineComponent({ computed: { icon(): any { - if (this.value.type === null) return null; - if (this.value.type.startsWith('fn:')) return 'fas fa-plug'; - return blockDefs.find(x => x.type === this.value.type).icon; + if (this.modelValue.type === null) return null; + if (this.modelValue.type.startsWith('fn:')) return 'fas fa-plug'; + return blockDefs.find(x => x.type === this.modelValue.type).icon; }, typeText(): any { - if (this.value.type === null) return null; - if (this.value.type.startsWith('fn:')) return this.value.type.split(':')[1]; - return this.$t(`_pages.script.blocks.${this.value.type}`); + if (this.modelValue.type === null) return null; + if (this.modelValue.type.startsWith('fn:')) return this.modelValue.type.split(':')[1]; + return this.$t(`_pages.script.blocks.${this.modelValue.type}`); }, }, watch: { slots: { handler() { - this.value.value.slots = this.slots.split('\n').map(x => ({ + this.modelValue.value.slots = this.slots.split('\n').map(x => ({ name: x, type: null })); @@ -137,24 +137,24 @@ export default defineComponent({ }, created() { - if (this.value.value == null) this.value.value = null; + if (this.modelValue.value == null) this.modelValue.value = null; - if (this.value.value && this.value.value.slots) this.slots = this.value.value.slots.map(x => x.name).join('\n'); + if (this.modelValue.value && this.modelValue.value.slots) this.slots = this.modelValue.value.slots.map(x => x.name).join('\n'); - this.$watch(() => this.value.type, (t) => { + this.$watch(() => this.modelValue.type, (t) => { this.warn = null; - if (this.value.type === 'fn') { + if (this.modelValue.type === 'fn') { const id = uuid(); - this.value.value = { + this.modelValue.value = { slots: [], expression: { id, type: null } }; return; } - if (this.value.type && this.value.type.startsWith('fn:')) { - const fnName = this.value.type.split(':')[1]; + if (this.modelValue.type && this.modelValue.type.startsWith('fn:')) { + const fnName = this.modelValue.type.split(':')[1]; const fn = this.hpml.getVarByName(fnName); const empties = []; @@ -162,29 +162,29 @@ export default defineComponent({ const id = uuid(); empties.push({ id, type: null }); } - this.value.args = empties; + this.modelValue.args = empties; return; } - if (isLiteralValue(this.value)) return; + if (isLiteralValue(this.modelValue)) return; const empties = []; - for (let i = 0; i < funcDefs[this.value.type].in.length; i++) { + for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) { const id = uuid(); empties.push({ id, type: null }); } - this.value.args = empties; + this.modelValue.args = empties; - for (let i = 0; i < funcDefs[this.value.type].in.length; i++) { - const inType = funcDefs[this.value.type].in[i]; + for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) { + const inType = funcDefs[this.modelValue.type].in[i]; if (typeof inType !== 'number') { - if (inType === 'number') this.value.args[i].type = 'number'; - if (inType === 'string') this.value.args[i].type = 'text'; + if (inType === 'number') this.modelValue.args[i].type = 'number'; + if (inType === 'string') this.modelValue.args[i].type = 'text'; } } }); - this.$watch(() => this.value.args, (args) => { + this.$watch(() => this.modelValue.args, (args) => { if (args == null) { this.warn = null; return; @@ -202,8 +202,8 @@ export default defineComponent({ }); this.$watch(() => this.hpml.variables, () => { - if (this.type != null && this.value) { - this.error = this.hpml.typeCheck(this.value); + if (this.type != null && this.modelValue) { + this.error = this.hpml.typeCheck(this.modelValue); } }, { deep: true @@ -221,11 +221,11 @@ export default defineComponent({ showCancelButton: true }); if (canceled) return; - this.value.type = type; + this.modelValue.type = type; }, _getExpectedType(slot: number) { - return this.hpml.getExpectedType(this.value, slot); + return this.hpml.getExpectedType(this.modelValue, slot); } } }); diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue index dc6896ba12..2d617bee75 100644 --- a/src/client/pages/page-editor/page-editor.vue +++ b/src/client/pages/page-editor/page-editor.vue @@ -47,7 +47,7 @@ <MkContainer :foldable="true" :expanded="true" class="_gap"> <template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.contents }}</template> <div style="padding: 16px;"> - <XBlocks class="content" v-model:value="content" :hpml="hpml"/> + <XBlocks class="content" v-model="content" :hpml="hpml"/> <MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton> </div> @@ -94,12 +94,12 @@ import 'vue-prism-editor/dist/prismeditor.min.css'; import { v4 as uuid } from 'uuid'; import XVariable from './page-editor.script-block.vue'; import XBlocks from './page-editor.blocks.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; import MkContainer from '@client/components/ui/container.vue'; import MkButton from '@client/components/ui/button.vue'; -import MkSelect from '@client/components/ui/select.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkSelect from '@client/components/form/select.vue'; +import MkSwitch from '@client/components/form/switch.vue'; +import MkInput from '@client/components/form/input.vue'; import { blockDefs } from '@client/scripts/hpml/index'; import { HpmlTypeChecker } from '@client/scripts/hpml/type-checker'; import { url } from '@client/config'; diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue index 52a860be13..80fc53a961 100644 --- a/src/client/pages/pages.vue +++ b/src/client/pages/pages.vue @@ -1,6 +1,6 @@ <template> <div> - <MkTab v-model:value="tab" v-if="$i"> + <MkTab v-model="tab" v-if="$i"> <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option> <option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option> <option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option> diff --git a/src/client/pages/reset-password.vue b/src/client/pages/reset-password.vue index c331382132..6dd9f24259 100644 --- a/src/client/pages/reset-password.vue +++ b/src/client/pages/reset-password.vue @@ -1,6 +1,6 @@ <template> <FormBase v-if="token"> - <FormInput v-model:value="password" type="password"> + <FormInput v-model="password" type="password"> <template #prefix><i class="fas fa-lock"></i></template> <span>{{ $ts.newPassword }}</span> </FormInput> @@ -11,11 +11,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/reversi/game.setting.vue b/src/client/pages/reversi/game.setting.vue index 1cc623b790..52757b0032 100644 --- a/src/client/pages/reversi/game.setting.vue +++ b/src/client/pages/reversi/game.setting.vue @@ -127,8 +127,8 @@ import { defineComponent } from 'vue'; import * as maps from '../../../games/reversi/maps'; import MkButton from '@client/components/ui/button.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; -import MkRadio from '@client/components/ui/radio.vue'; +import MkSwitch from '@client/components/form/switch.vue'; +import MkRadio from '@client/components/form/radio.vue'; export default defineComponent({ components: { diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue index 365ed5b803..671dca3577 100644 --- a/src/client/pages/room/room.vue +++ b/src/client/pages/room/room.vue @@ -57,7 +57,7 @@ import XPreview from './preview.vue'; const storeItems = require('@client/scripts/room/furnitures.json5'); import { query as urlQuery } from '../../../prelude/url'; import MkButton from '@client/components/ui/button.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkSelect from '@client/components/form/select.vue'; import { selectFile } from '@client/scripts/select-file'; import * as os from '@client/os'; import { ColdDeviceStorage } from '@client/store'; diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue index 48b06eaa24..386e7c635a 100644 --- a/src/client/pages/settings/2fa.vue +++ b/src/client/pages/settings/2fa.vue @@ -72,11 +72,11 @@ import { hostname } from '@client/config'; import { byteify, hexify, stringify } from '@client/scripts/2fa'; import MkButton from '@client/components/ui/button.vue'; import MkInfo from '@client/components/ui/info.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSwitch from '@client/components/form/switch.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/settings/account-info.vue b/src/client/pages/settings/account-info.vue index 4d851b7b12..16ce91b12f 100644 --- a/src/client/pages/settings/account-info.vue +++ b/src/client/pages/settings/account-info.vue @@ -134,11 +134,11 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; import * as os from '@client/os'; import number from '@client/filters/number'; import bytes from '@client/filters/bytes'; diff --git a/src/client/pages/settings/accounts.vue b/src/client/pages/settings/accounts.vue index ca6f53776a..d2966cc216 100644 --- a/src/client/pages/settings/accounts.vue +++ b/src/client/pages/settings/accounts.vue @@ -3,8 +3,8 @@ <FormSuspense :p="init"> <FormButton @click="addAccount" primary><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton> - <div class="_formItem _button" v-for="account in accounts" :key="account.id" @click="menu(account, $event)"> - <div class="_formPanel lcjjdxlm"> + <div class="_debobigegoItem _button" v-for="account in accounts" :key="account.id" @click="menu(account, $event)"> + <div class="_debobigegoPanel lcjjdxlm"> <div class="avatar"> <MkAvatar :user="account" class="avatar"/> </div> @@ -24,11 +24,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSuspense from '@client/components/form/suspense.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import { getAccounts, addAccount, login } from '@client/account'; @@ -47,6 +47,7 @@ export default defineComponent({ [symbols.PAGE_INFO]: { title: this.$ts.accounts, icon: 'fas fa-users', + bg: 'var(--bg)', }, storedAccounts: getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id)), accounts: null, diff --git a/src/client/pages/settings/api.vue b/src/client/pages/settings/api.vue index 396d4405c3..5c7496e2f9 100644 --- a/src/client/pages/settings/api.vue +++ b/src/client/pages/settings/api.vue @@ -10,10 +10,10 @@ import { defineComponent } from 'vue'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -30,7 +30,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: 'API', - icon: 'fas fa-key' + icon: 'fas fa-key', + bg: 'var(--bg)', }, isDesktop: window.innerWidth >= 1100, }; diff --git a/src/client/pages/settings/apps.vue b/src/client/pages/settings/apps.vue index c864920ce1..da4f672adf 100644 --- a/src/client/pages/settings/apps.vue +++ b/src/client/pages/settings/apps.vue @@ -8,7 +8,7 @@ </div> </template> <template #default="{items}"> - <div class="_formPanel bfomjevm" v-for="token in items" :key="token.id"> + <div class="_debobigegoPanel bfomjevm" v-for="token in items" :key="token.id"> <img class="icon" :src="token.iconUrl" alt="" v-if="token.iconUrl"/> <div class="body"> <div class="name">{{ token.name }}</div> @@ -39,12 +39,12 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormPagination from '@client/components/form/pagination.vue'; +import FormPagination from '@client/components/debobigego/pagination.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -61,6 +61,7 @@ export default defineComponent({ [symbols.PAGE_INFO]: { title: this.$ts.installedApps, icon: 'fas fa-plug', + bg: 'var(--bg)', }, pagination: { endpoint: 'i/apps', diff --git a/src/client/pages/settings/custom-css.vue b/src/client/pages/settings/custom-css.vue index 0781eeebd7..fd473a11fa 100644 --- a/src/client/pages/settings/custom-css.vue +++ b/src/client/pages/settings/custom-css.vue @@ -2,7 +2,7 @@ <FormBase> <FormInfo warn>{{ $ts.customCssWarn }}</FormInfo> - <FormTextarea v-model:value="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;"> + <FormTextarea v-model="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;"> <span>{{ $ts.local }}</span> </FormTextarea> </FormBase> @@ -13,11 +13,11 @@ import { defineComponent } from 'vue'; import FormTextarea from '@client/components/form/textarea.vue'; import FormSelect from '@client/components/form/select.vue'; import FormRadios from '@client/components/form/radios.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormInfo from '@client/components/form/info.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; import * as os from '@client/os'; import { ColdDeviceStorage } from '@client/store'; import { unisonReload } from '@client/scripts/unison-reload'; @@ -42,7 +42,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.customCss, - icon: 'fas fa-code' + icon: 'fas fa-code', + bg: 'var(--bg)', }, localCustomCss: localStorage.getItem('customCss') } diff --git a/src/client/pages/settings/deck.vue b/src/client/pages/settings/deck.vue index 05f3061ca1..2b49ef956c 100644 --- a/src/client/pages/settings/deck.vue +++ b/src/client/pages/settings/deck.vue @@ -2,10 +2,10 @@ <FormBase> <FormGroup> <template #label>{{ $ts.defaultNavigationBehaviour }}</template> - <FormSwitch v-model:value="navWindow">{{ $ts.openInWindow }}</FormSwitch> + <FormSwitch v-model="navWindow">{{ $ts.openInWindow }}</FormSwitch> </FormGroup> - <FormSwitch v-model:value="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch> + <FormSwitch v-model="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch> <FormRadios v-model="columnAlign"> <template #desc>{{ $ts._deck.columnAlign }}</template> @@ -20,7 +20,7 @@ <option :value="48">{{ $ts.wide }}</option> </FormRadios> - <FormInput v-model:value="columnMargin" type="number"> + <FormInput v-model="columnMargin" type="number"> <span>{{ $ts._deck.columnMargin }}</span> <template #suffix>px</template> </FormInput> @@ -32,11 +32,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; import FormSwitch from '@client/components/form/switch.vue'; -import FormLink from '@client/components/form/link.vue'; +import FormLink from '@client/components/debobigego/link.vue'; import FormRadios from '@client/components/form/radios.vue'; import FormInput from '@client/components/form/input.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import { deckStore } from '@client/ui/deck/deck-store'; import * as os from '@client/os'; import { unisonReload } from '@client/scripts/unison-reload'; @@ -58,7 +58,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.deck, - icon: 'fas fa-columns' + icon: 'fas fa-columns', + bg: 'var(--bg)', }, } }, diff --git a/src/client/pages/settings/delete-account.vue b/src/client/pages/settings/delete-account.vue index 3af1879857..6bac214e04 100644 --- a/src/client/pages/settings/delete-account.vue +++ b/src/client/pages/settings/delete-account.vue @@ -9,10 +9,10 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import { debug } from '@client/config'; import { signout } from '@client/account'; @@ -32,7 +32,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._accountDelete.accountDelete, - icon: 'fas fa-exclamation-triangle' + icon: 'fas fa-exclamation-triangle', + bg: 'var(--bg)', }, debug, } diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue index 83068a8335..177bf058f3 100644 --- a/src/client/pages/settings/drive.vue +++ b/src/client/pages/settings/drive.vue @@ -2,8 +2,8 @@ <FormBase class=""> <FormGroup v-if="!fetching"> <template #label>{{ $ts.usageAmount }}</template> - <div class="_formItem uawsfosz"> - <div class="_formPanel"> + <div class="_debobigegoItem uawsfosz"> + <div class="_debobigegoPanel"> <div class="meter"><div :style="meterStyle"></div></div> </div> </div> @@ -17,9 +17,9 @@ </FormKeyValueView> </FormGroup> - <div class="_formItem"> - <div class="_formLabel">{{ $ts.statistics }}</div> - <div class="_formPanel"> + <div class="_debobigegoItem"> + <div class="_debobigegoLabel">{{ $ts.statistics }}</div> + <div class="_debobigegoPanel"> <div ref="chart"></div> </div> </div> @@ -36,10 +36,10 @@ import { defineComponent } from 'vue'; import * as tinycolor from 'tinycolor2'; import ApexCharts from 'apexcharts'; -import FormButton from '@client/components/form/button.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormBase from '@client/components/form/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormBase from '@client/components/debobigego/base.vue'; import * as os from '@client/os'; import bytes from '@client/filters/bytes'; import * as symbols from '@client/symbols'; @@ -58,7 +58,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.drive, - icon: 'fas fa-cloud' + icon: 'fas fa-cloud', + bg: 'var(--bg)', }, fetching: true, usage: null, diff --git a/src/client/pages/settings/email-address.vue b/src/client/pages/settings/email-address.vue index 28eeeb6b73..f98b22ada7 100644 --- a/src/client/pages/settings/email-address.vue +++ b/src/client/pages/settings/email-address.vue @@ -1,7 +1,7 @@ <template> <FormBase> <FormGroup> - <FormInput v-model:value="emailAddress" type="email"> + <FormInput v-model="emailAddress" type="email"> {{ $ts.emailAddress }} <template #desc v-if="$i.email && !$i.emailVerified">{{ $ts.verificationEmailSent }}</template> <template #desc v-else-if="emailAddress === $i.email && $i.emailVerified">{{ $ts.emailVerified }}</template> @@ -13,10 +13,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormButton from '@client/components/form/button.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import FormInput from '@client/components/form/input.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -34,7 +34,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.emailAddress, - icon: 'fas fa-envelope' + icon: 'fas fa-envelope', + bg: 'var(--bg)', }, emailAddress: null, code: null, diff --git a/src/client/pages/settings/email-notification.vue b/src/client/pages/settings/email-notification.vue index ac3402568a..1b78621c3f 100644 --- a/src/client/pages/settings/email-notification.vue +++ b/src/client/pages/settings/email-notification.vue @@ -1,22 +1,22 @@ <template> <FormBase> <FormGroup> - <FormSwitch v-model:value="mention"> + <FormSwitch v-model="mention"> {{ $ts._notification._types.mention }} </FormSwitch> - <FormSwitch v-model:value="reply"> + <FormSwitch v-model="reply"> {{ $ts._notification._types.reply }} </FormSwitch> - <FormSwitch v-model:value="quote"> + <FormSwitch v-model="quote"> {{ $ts._notification._types.quote }} </FormSwitch> - <FormSwitch v-model:value="follow"> + <FormSwitch v-model="follow"> {{ $ts._notification._types.follow }} </FormSwitch> - <FormSwitch v-model:value="receiveFollowRequest"> + <FormSwitch v-model="receiveFollowRequest"> {{ $ts._notification._types.receiveFollowRequest }} </FormSwitch> - <FormSwitch v-model:value="groupInvited"> + <FormSwitch v-model="groupInvited"> {{ $ts._notification._types.groupInvited }} </FormSwitch> </FormGroup> @@ -25,10 +25,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormButton from '@client/components/form/button.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import FormSwitch from '@client/components/form/switch.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; import * as symbols from '@client/symbols'; @@ -47,7 +47,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.emailNotification, - icon: 'fas fa-envelope' + icon: 'fas fa-envelope', + bg: 'var(--bg)', }, mention: this.$i.emailNotificationTypes.includes('mention'), diff --git a/src/client/pages/settings/email.vue b/src/client/pages/settings/email.vue index aa20d9d94e..adc62133ac 100644 --- a/src/client/pages/settings/email.vue +++ b/src/client/pages/settings/email.vue @@ -14,7 +14,7 @@ {{ $ts.emailNotification }} </FormLink> - <FormSwitch :value="$i.receiveAnnouncementEmail" @update:value="onChangeReceiveAnnouncementEmail"> + <FormSwitch :value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail"> {{ $ts.receiveAnnouncementFromInstance }} </FormSwitch> </FormBase> @@ -22,11 +22,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormButton from '@client/components/form/button.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormSwitch from '@client/components/form/switch.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -45,7 +45,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.email, - icon: 'fas fa-envelope' + icon: 'fas fa-envelope', + bg: 'var(--bg)', }, } }, diff --git a/src/client/pages/settings/experimental-features.vue b/src/client/pages/settings/experimental-features.vue index f8d5e419e9..971c45a628 100644 --- a/src/client/pages/settings/experimental-features.vue +++ b/src/client/pages/settings/experimental-features.vue @@ -8,11 +8,11 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue index f8e8e6b24b..59dd251948 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -1,8 +1,8 @@ <template> <FormBase> - <FormSwitch v-model:value="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch> + <FormSwitch v-model="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch> - <FormSelect v-model:value="lang"> + <FormSelect v-model="lang"> <template #label>{{ $ts.uiLanguage }}</template> <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> <template #caption> @@ -16,13 +16,13 @@ <FormGroup> <template #label>{{ $ts.behavior }}</template> - <FormSwitch v-model:value="imageNewTab">{{ $ts.openImageInNewTab }}</FormSwitch> - <FormSwitch v-model:value="enableInfiniteScroll">{{ $ts.enableInfiniteScroll }}</FormSwitch> - <FormSwitch v-model:value="useReactionPickerForContextMenu">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch> - <FormSwitch v-model:value="disablePagesScript">{{ $ts.disablePagesScript }}</FormSwitch> + <FormSwitch v-model="imageNewTab">{{ $ts.openImageInNewTab }}</FormSwitch> + <FormSwitch v-model="enableInfiniteScroll">{{ $ts.enableInfiniteScroll }}</FormSwitch> + <FormSwitch v-model="useReactionPickerForContextMenu">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch> + <FormSwitch v-model="disablePagesScript">{{ $ts.disablePagesScript }}</FormSwitch> </FormGroup> - <FormSelect v-model:value="serverDisconnectedBehavior"> + <FormSelect v-model="serverDisconnectedBehavior"> <template #label>{{ $ts.whenServerDisconnected }}</template> <option value="reload">{{ $ts._serverDisconnectedBehavior.reload }}</option> <option value="dialog">{{ $ts._serverDisconnectedBehavior.dialog }}</option> @@ -31,22 +31,22 @@ <FormGroup> <template #label>{{ $ts.appearance }}</template> - <FormSwitch v-model:value="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch> - <FormSwitch v-model:value="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch> - <FormSwitch v-model:value="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch> - <FormSwitch v-model:value="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch> - <FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch> - <FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch> - <FormSwitch v-model:value="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch> - <FormSwitch v-model:value="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch> - <FormSwitch v-model:value="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch> - <FormSwitch v-model:value="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }} + <FormSwitch v-model="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch> + <FormSwitch v-model="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch> + <FormSwitch v-model="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch> + <FormSwitch v-model="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch> + <FormSwitch v-model="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch> + <FormSwitch v-model="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch> + <FormSwitch v-model="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch> + <FormSwitch v-model="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch> + <FormSwitch v-model="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch> + <FormSwitch v-model="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }} <div><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" :key="useOsNativeEmojis"/></div> </FormSwitch> </FormGroup> <FormGroup> - <FormSwitch v-model:value="aiChanMode">{{ $ts.aiChanMode }}</FormSwitch> + <FormSwitch v-model="aiChanMode">{{ $ts.aiChanMode }}</FormSwitch> </FormGroup> <FormRadios v-model="fontSize"> @@ -57,14 +57,14 @@ <option value="veryLarge"><span style="font-size: 20px;">Aa</span></option> </FormRadios> - <FormSelect v-model:value="instanceTicker"> + <FormSelect v-model="instanceTicker"> <template #label>{{ $ts.instanceTicker }}</template> <option value="none">{{ $ts._instanceTicker.none }}</option> <option value="remote">{{ $ts._instanceTicker.remote }}</option> <option value="always">{{ $ts._instanceTicker.always }}</option> </FormSelect> - <FormSelect v-model:value="nsfw"> + <FormSelect v-model="nsfw"> <template #label>{{ $ts.nsfw }}</template> <option value="respect">{{ $ts._nsfw.respect }}</option> <option value="ignore">{{ $ts._nsfw.ignore }}</option> @@ -73,10 +73,10 @@ <FormGroup> <template #label>{{ $ts.defaultNavigationBehaviour }}</template> - <FormSwitch v-model:value="defaultSideView">{{ $ts.openInSideView }}</FormSwitch> + <FormSwitch v-model="defaultSideView">{{ $ts.openInSideView }}</FormSwitch> </FormGroup> - <FormSelect v-model:value="chatOpenBehavior"> + <FormSelect v-model="chatOpenBehavior"> <template #label>{{ $ts.chatOpenBehavior }}</template> <option value="page">{{ $ts.showInPage }}</option> <option value="window">{{ $ts.openInWindow }}</option> @@ -91,13 +91,13 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormSelect from '@client/components/form/select.vue'; -import FormRadios from '@client/components/form/radios.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormSelect from '@client/components/debobigego/select.vue'; +import FormRadios from '@client/components/debobigego/radios.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import MkLink from '@client/components/link.vue'; import { langs } from '@client/config'; import { defaultStore } from '@client/store'; @@ -124,7 +124,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.general, - icon: 'fas fa-cogs' + icon: 'fas fa-cogs', + bg: 'var(--bg)' }, langs, lang: localStorage.getItem('lang'), diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue index e77efb4429..5f1ed43340 100644 --- a/src/client/pages/settings/import-export.vue +++ b/src/client/pages/settings/import-export.vue @@ -28,9 +28,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; import FormSelect from '@client/components/form/select.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import * as os from '@client/os'; import { selectFile } from '@client/scripts/select-file'; import * as symbols from '@client/symbols'; @@ -48,7 +48,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.importAndExport, - icon: 'fas fa-boxes' + icon: 'fas fa-boxes', + bg: 'var(--bg)', }, } }, diff --git a/src/client/pages/settings/index.link.vue b/src/client/pages/settings/index.link.vue new file mode 100644 index 0000000000..37d06bc22e --- /dev/null +++ b/src/client/pages/settings/index.link.vue @@ -0,0 +1,97 @@ +<template> +<div class="qmfkfnzj"> + <a class="main _button" :href="to" target="_blank" v-if="external"> + <span class="icon"><slot name="icon"></slot></span> + <span class="text"><slot></slot></span> + </a> + <MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else> + <span class="icon"><slot name="icon"></slot></span> + <span class="text"><slot></slot></span> + </MkA> +</div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; + +export default defineComponent({ + props: { + to: { + type: String, + required: true + }, + active: { + type: Boolean, + required: false + }, + external: { + type: Boolean, + required: false + }, + behavior: { + type: String, + required: false, + }, + }, + data() { + return { + }; + } +}); +</script> + +<style lang="scss" scoped> +.qmfkfnzj { + > .main { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 10px 16px 10px 14px; + border-radius: 999px; + font-size: 0.9em; + + &:hover { + text-decoration: none; + background: var(--panelHighlight); + } + + &.active { + color: var(--accent); + background: var(--accentedBg); + } + + > .icon { + width: 32px; + margin-right: 2px; + flex-shrink: 0; + text-align: center; + opacity: 0.8; + + &:empty { + display: none; + + & + .text { + padding-left: 4px; + } + } + } + + > .text { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + padding-right: 12px; + } + + > .right { + margin-left: auto; + opacity: 0.7; + + > .text:not(:empty) { + margin-right: 0.75em; + } + } + } +} +</style> diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue index 3fb5f5f1e6..f3d118e4f0 100644 --- a/src/client/pages/settings/index.vue +++ b/src/client/pages/settings/index.vue @@ -1,50 +1,48 @@ <template> <div class="vvcocwet" :class="{ wide: !narrow }" ref="el"> <div class="nav" v-if="!narrow || page == null"> - <FormBase> - <FormGroup> - <div class="_formItem"> - <div class="_formPanel lwjxoukj"> - <MkAvatar :user="$i" class="avatar"/> - </div> + <FormGroup> + <div class="_debobigegoItem"> + <div class="_debobigegoPanel lwjxoukj"> + <MkAvatar :user="$i" class="avatar"/> </div> - <FormLink :active="page === 'accounts'" replace to="/settings/accounts"><template #icon><i class="fas fa-users"></i></template>{{ $ts.accounts }}</FormLink> - </FormGroup> - <FormInfo v-if="emailNotConfigured" warn>{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></FormInfo> - <FormGroup> - <template #label>{{ $ts.basicSettings }}</template> - <FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</FormLink> - <FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</FormLink> - <FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</FormLink> - <FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</FormLink> - <FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</FormLink> - <FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</FormLink> - <FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</FormLink> - <FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</FormLink> - </FormGroup> - <FormGroup> - <template #label>{{ $ts.clientSettings }}</template> - <FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</FormLink> - <FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</FormLink> - <FormLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</FormLink> - <FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</FormLink> - <FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</FormLink> - </FormGroup> - <FormGroup> - <template #label>{{ $ts.otherSettings }}</template> - <FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</FormLink> - <FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</FormLink> - <FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</FormLink> - <FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</FormLink> - <FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</FormLink> - </FormGroup> - <FormGroup> - <FormButton @click="clear">{{ $ts.clearCache }}</FormButton> - </FormGroup> - <FormGroup> - <FormButton @click="logout" danger>{{ $ts.logout }}</FormButton> - </FormGroup> - </FormBase> + </div> + <XLink :active="page === 'accounts'" replace to="/settings/accounts"><template #icon><i class="fas fa-users"></i></template>{{ $ts.accounts }}</XLink> + </FormGroup> + <FormInfo v-if="emailNotConfigured" warn>{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></FormInfo> + <FormGroup> + <template #label>{{ $ts.basicSettings }}</template> + <XLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</XLink> + <XLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</XLink> + <XLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</XLink> + <XLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</XLink> + <XLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</XLink> + <XLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</XLink> + <XLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink> + <XLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink> + </FormGroup> + <FormGroup> + <template #label>{{ $ts.clientSettings }}</template> + <XLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</XLink> + <XLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</XLink> + <XLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</XLink> + <XLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</XLink> + <XLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</XLink> + </FormGroup> + <FormGroup> + <template #label>{{ $ts.otherSettings }}</template> + <XLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</XLink> + <XLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</XLink> + <XLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</XLink> + <XLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</XLink> + <XLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink> + </FormGroup> + <FormGroup> + <FormButton @click="clear">{{ $ts.clearCache }}</FormButton> + </FormGroup> + <FormGroup> + <FormButton @click="logout" danger>{{ $ts.logout }}</FormButton> + </FormGroup> </div> <div class="main"> <component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/> @@ -55,11 +53,11 @@ <script lang="ts"> import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'; import { i18n } from '@client/i18n'; -import FormLink from '@client/components/form/link.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormInfo from '@client/components/form/info.vue'; +import XLink from './index.link.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; import { scroll } from '@client/scripts/scroll'; import { signout } from '@client/account'; import { unisonReload } from '@client/scripts/unison-reload'; @@ -70,7 +68,7 @@ import { $i } from '@client/account'; export default defineComponent({ components: { FormBase, - FormLink, + XLink, FormGroup, FormButton, FormInfo, @@ -210,14 +208,13 @@ export default defineComponent({ .vvcocwet { &.wide { display: flex; - max-width: 1100px; + max-width: 1000px; margin: 0 auto; height: 100%; > .nav { width: 32%; box-sizing: border-box; - border-right: solid 0.5px var(--divider); overflow: auto; } diff --git a/src/client/pages/settings/integration.vue b/src/client/pages/settings/integration.vue index f1c0a88afc..7f398dde9d 100644 --- a/src/client/pages/settings/integration.vue +++ b/src/client/pages/settings/integration.vue @@ -1,26 +1,26 @@ <template> <FormBase> - <div class="_formItem" v-if="enableTwitterIntegration"> - <div class="_formLabel"><i class="fab fa-twitter"></i> Twitter</div> - <div class="_formPanel" style="padding: 16px;"> + <div class="_debobigegoItem" v-if="enableTwitterIntegration"> + <div class="_debobigegoLabel"><i class="fab fa-twitter"></i> Twitter</div> + <div class="_debobigegoPanel" style="padding: 16px;"> <p v-if="integrations.twitter">{{ $ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p> <MkButton v-if="integrations.twitter" @click="disconnectTwitter" danger>{{ $ts.disconnectService }}</MkButton> <MkButton v-else @click="connectTwitter" primary>{{ $ts.connectService }}</MkButton> </div> </div> - <div class="_formItem" v-if="enableDiscordIntegration"> - <div class="_formLabel"><i class="fab fa-discord"></i> Discord</div> - <div class="_formPanel" style="padding: 16px;"> + <div class="_debobigegoItem" v-if="enableDiscordIntegration"> + <div class="_debobigegoLabel"><i class="fab fa-discord"></i> Discord</div> + <div class="_debobigegoPanel" style="padding: 16px;"> <p v-if="integrations.discord">{{ $ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p> <MkButton v-if="integrations.discord" @click="disconnectDiscord" danger>{{ $ts.disconnectService }}</MkButton> <MkButton v-else @click="connectDiscord" primary>{{ $ts.connectService }}</MkButton> </div> </div> - <div class="_formItem" v-if="enableGithubIntegration"> - <div class="_formLabel"><i class="fab fa-github"></i> GitHub</div> - <div class="_formPanel" style="padding: 16px;"> + <div class="_debobigegoItem" v-if="enableGithubIntegration"> + <div class="_debobigegoLabel"><i class="fab fa-github"></i> GitHub</div> + <div class="_debobigegoPanel" style="padding: 16px;"> <p v-if="integrations.github">{{ $ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p> <MkButton v-if="integrations.github" @click="disconnectGithub" danger>{{ $ts.disconnectService }}</MkButton> <MkButton v-else @click="connectGithub" primary>{{ $ts.connectService }}</MkButton> @@ -32,7 +32,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { apiUrl } from '@client/config'; -import FormBase from '@client/components/form/base.vue'; +import FormBase from '@client/components/debobigego/base.vue'; import MkButton from '@client/components/ui/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -49,7 +49,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.integration, - icon: 'fas fa-share-alt' + icon: 'fas fa-share-alt', + bg: 'var(--bg)', }, apiUrl, twitterForm: null, diff --git a/src/client/pages/settings/menu.vue b/src/client/pages/settings/menu.vue index 4b315145e1..31472eb0c1 100644 --- a/src/client/pages/settings/menu.vue +++ b/src/client/pages/settings/menu.vue @@ -1,6 +1,6 @@ <template> <FormBase> - <FormTextarea v-model:value="items" tall manual-save> + <FormTextarea v-model="items" tall manual-save> <span>{{ $ts.menu }}</span> <template #desc><button class="_textButton" @click="addItem">{{ $ts.addItem }}</button></template> </FormTextarea> @@ -19,12 +19,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormRadios from '@client/components/form/radios.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormRadios from '@client/components/debobigego/radios.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import { menuDef } from '@client/menu'; import { defaultStore } from '@client/store'; @@ -45,7 +43,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.menu, - icon: 'fas fa-list-ul' + icon: 'fas fa-list-ul', + bg: 'var(--bg)', }, menuDef: menuDef, items: defaultStore.state.menu.join('\n'), diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue index dde0199e18..18b2fc0af4 100644 --- a/src/client/pages/settings/mute-block.vue +++ b/src/client/pages/settings/mute-block.vue @@ -1,6 +1,6 @@ <template> <FormBase> - <MkTab v-model:value="tab" style="margin-bottom: var(--margin);"> + <MkTab v-model="tab" style="margin-bottom: var(--margin);"> <option value="mute">{{ $ts.mutedUsers }}</option> <option value="block">{{ $ts.blockedUsers }}</option> </MkTab> @@ -35,10 +35,10 @@ import { defineComponent } from 'vue'; import MkPagination from '@client/components/ui/pagination.vue'; import MkTab from '@client/components/tab.vue'; -import FormInfo from '@client/components/form/info.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import { userPage } from '@client/filters/user'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -59,7 +59,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.muteAndBlock, - icon: 'fas fa-ban' + icon: 'fas fa-ban', + bg: 'var(--bg)', }, tab: 'mute', mutingPagination: { diff --git a/src/client/pages/settings/notifications.vue b/src/client/pages/settings/notifications.vue index ec95452ba2..1ef350335c 100644 --- a/src/client/pages/settings/notifications.vue +++ b/src/client/pages/settings/notifications.vue @@ -11,10 +11,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormButton from '@client/components/form/button.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import { notificationTypes } from '../../../types'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -33,7 +33,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.notifications, - icon: 'fas fa-bell' + icon: 'fas fa-bell', + bg: 'var(--bg)', }, } }, diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue index 21b5439041..2eb922453f 100644 --- a/src/client/pages/settings/other.vue +++ b/src/client/pages/settings/other.vue @@ -2,18 +2,18 @@ <FormBase> <FormLink to="/settings/update">Misskey Update</FormLink> - <FormSwitch :value="$i.injectFeaturedNote" @update:value="onChangeInjectFeaturedNote"> + <FormSwitch :value="$i.injectFeaturedNote" @update:modelValue="onChangeInjectFeaturedNote"> {{ $ts.showFeaturedNotesInTimeline }} </FormSwitch> - <FormSwitch v-model:value="reportError">{{ $ts.sendErrorReports }}<template #desc>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch> + <FormSwitch v-model="reportError">{{ $ts.sendErrorReports }}<template #desc>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch> <FormLink to="/settings/account-info">{{ $ts.accountInfo }}</FormLink> <FormLink to="/settings/experimental-features">{{ $ts.experimentalFeatures }}</FormLink> <FormGroup> <template #label>{{ $ts.developer }}</template> - <FormSwitch v-model:value="debug" @update:value="changeDebug"> + <FormSwitch v-model="debug" @update:modelValue="changeDebug"> DEBUG MODE </FormSwitch> <template v-if="debug"> @@ -34,10 +34,10 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import { debug } from '@client/config'; import { defaultStore } from '@client/store'; @@ -60,7 +60,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.other, - icon: 'fas fa-ellipsis-h' + icon: 'fas fa-ellipsis-h', + bg: 'var(--bg)', }, debug, } diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue index 30cbf58ad7..709ef11abb 100644 --- a/src/client/pages/settings/plugin.install.vue +++ b/src/client/pages/settings/plugin.install.vue @@ -3,7 +3,7 @@ <FormInfo warn>{{ $ts._plugin.installWarn }}</FormInfo> <FormGroup> - <FormTextarea v-model:value="code" tall> + <FormTextarea v-model="code" tall> <span>{{ $ts.code }}</span> </FormTextarea> </FormGroup> @@ -20,11 +20,11 @@ import { v4 as uuid } from 'uuid'; import FormTextarea from '@client/components/form/textarea.vue'; import FormSelect from '@client/components/form/select.vue'; import FormRadios from '@client/components/form/radios.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormInfo from '@client/components/form/info.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; import * as os from '@client/os'; import { ColdDeviceStorage } from '@client/store'; import { unisonReload } from '@client/scripts/unison-reload'; @@ -48,7 +48,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._plugin.install, - icon: 'fas fa-download' + icon: 'fas fa-download', + bg: 'var(--bg)', }, code: null, } diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue index 3df87ca084..f1c27f1e3c 100644 --- a/src/client/pages/settings/plugin.manage.vue +++ b/src/client/pages/settings/plugin.manage.vue @@ -3,9 +3,9 @@ <FormGroup v-for="plugin in plugins" :key="plugin.id"> <template #label><span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span></template> - <FormSwitch :value="plugin.active" @update:value="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch> - <div class="_formItem"> - <div class="_formPanel" style="padding: 16px;"> + <FormSwitch :value="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch> + <div class="_debobigegoItem"> + <div class="_debobigegoPanel" style="padding: 16px;"> <div class="_keyValue"> <div>{{ $ts.author }}:</div> <div>{{ plugin.author }}</div> @@ -20,8 +20,8 @@ </div> </div> </div> - <div class="_formItem"> - <div class="_formPanel" style="padding: 16px;"> + <div class="_debobigegoItem"> + <div class="_debobigegoPanel" style="padding: 16px;"> <MkButton @click="config(plugin)" inline v-if="plugin.config"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton> <MkButton @click="uninstall(plugin)" inline danger><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton> </div> @@ -33,11 +33,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkSelect from '@client/components/form/select.vue'; import FormSwitch from '@client/components/form/switch.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import * as os from '@client/os'; import { ColdDeviceStorage } from '@client/store'; import * as symbols from '@client/symbols'; @@ -58,7 +58,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._plugin.manage, - icon: 'fas fa-plug' + icon: 'fas fa-plug', + bg: 'var(--bg)', }, plugins: ColdDeviceStorage.get('plugins'), } diff --git a/src/client/pages/settings/plugin.vue b/src/client/pages/settings/plugin.vue index 13eaca07fd..23f263bbbd 100644 --- a/src/client/pages/settings/plugin.vue +++ b/src/client/pages/settings/plugin.vue @@ -7,9 +7,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormLink from '@client/components/form/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormLink from '@client/components/debobigego/link.vue'; import * as os from '@client/os'; import { ColdDeviceStorage } from '@client/store'; import * as symbols from '@client/symbols'; @@ -26,7 +26,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.plugins, - icon: 'fas fa-plug' + icon: 'fas fa-plug', + bg: 'var(--bg)', }, plugins: ColdDeviceStorage.get('plugins').length, } diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue index 46d8c17ca2..7756158578 100644 --- a/src/client/pages/settings/privacy.vue +++ b/src/client/pages/settings/privacy.vue @@ -1,43 +1,43 @@ <template> <FormBase> <FormGroup> - <FormSwitch v-model:value="isLocked" @update:value="save()">{{ $ts.makeFollowManuallyApprove }}</FormSwitch> - <FormSwitch v-model:value="autoAcceptFollowed" :disabled="!isLocked" @update:value="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch> + <FormSwitch v-model="isLocked" @update:modelValue="save()">{{ $ts.makeFollowManuallyApprove }}</FormSwitch> + <FormSwitch v-model="autoAcceptFollowed" :disabled="!isLocked" @update:modelValue="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch> <template #caption>{{ $ts.lockedAccountInfo }}</template> </FormGroup> - <FormSwitch v-model:value="hideOnlineStatus" @update:value="save()"> + <FormSwitch v-model="hideOnlineStatus" @update:modelValue="save()"> {{ $ts.hideOnlineStatus }} <template #desc>{{ $ts.hideOnlineStatusDescription }}</template> </FormSwitch> - <FormSwitch v-model:value="noCrawle" @update:value="save()"> + <FormSwitch v-model="noCrawle" @update:modelValue="save()"> {{ $ts.noCrawle }} <template #desc>{{ $ts.noCrawleDescription }}</template> </FormSwitch> - <FormSwitch v-model:value="isExplorable" @update:value="save()"> + <FormSwitch v-model="isExplorable" @update:modelValue="save()"> {{ $ts.makeExplorable }} <template #desc>{{ $ts.makeExplorableDescription }}</template> </FormSwitch> - <FormSwitch v-model:value="rememberNoteVisibility" @update:value="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch> + <FormSwitch v-model="rememberNoteVisibility" @update:modelValue="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch> <FormGroup v-if="!rememberNoteVisibility"> <template #label>{{ $ts.defaultNoteVisibility }}</template> - <FormSelect v-model:value="defaultNoteVisibility"> + <FormSelect v-model="defaultNoteVisibility"> <option value="public">{{ $ts._visibility.public }}</option> <option value="home">{{ $ts._visibility.home }}</option> <option value="followers">{{ $ts._visibility.followers }}</option> <option value="specified">{{ $ts._visibility.specified }}</option> </FormSelect> - <FormSwitch v-model:value="defaultNoteLocalOnly">{{ $ts._visibility.localOnly }}</FormSwitch> + <FormSwitch v-model="defaultNoteLocalOnly">{{ $ts._visibility.localOnly }}</FormSwitch> </FormGroup> - <FormSwitch v-model:value="keepCw" @update:value="save()">{{ $ts.keepCw }}</FormSwitch> + <FormSwitch v-model="keepCw" @update:modelValue="save()">{{ $ts.keepCw }}</FormSwitch> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormSelect from '@client/components/form/select.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormSelect from '@client/components/debobigego/select.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import * as os from '@client/os'; import { defaultStore } from '@client/store'; import * as symbols from '@client/symbols'; @@ -56,7 +56,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.privacy, - icon: 'fas fa-lock-open' + icon: 'fas fa-lock-open', + bg: 'var(--bg)', }, isLocked: false, autoAcceptFollowed: false, diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue index de7e86bd12..3c93e93480 100644 --- a/src/client/pages/settings/profile.vue +++ b/src/client/pages/settings/profile.vue @@ -1,33 +1,33 @@ <template> <FormBase> <FormGroup> - <div class="_formItem _formPanel llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> + <div class="_debobigegoItem _debobigegoPanel llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> <MkAvatar class="avatar" :user="$i"/> </div> <FormButton @click="changeAvatar" primary>{{ $ts._profile.changeAvatar }}</FormButton> <FormButton @click="changeBanner" primary>{{ $ts._profile.changeBanner }}</FormButton> </FormGroup> - <FormInput v-model:value="name" :max="30" manual-save> + <FormInput v-model="name" :max="30" manual-save> <span>{{ $ts._profile.name }}</span> </FormInput> - <FormTextarea v-model:value="description" :max="500" tall manual-save> + <FormTextarea v-model="description" :max="500" tall manual-save> <span>{{ $ts._profile.description }}</span> <template #desc>{{ $ts._profile.youCanIncludeHashtags }}</template> </FormTextarea> - <FormInput v-model:value="location" manual-save> + <FormInput v-model="location" manual-save> <span>{{ $ts.location }}</span> <template #prefix><i class="fas fa-map-marker-alt"></i></template> </FormInput> - <FormInput v-model:value="birthday" type="date" manual-save> + <FormInput v-model="birthday" type="date" manual-save> <span>{{ $ts.birthday }}</span> <template #prefix><i class="fas fa-birthday-cake"></i></template> </FormInput> - <FormSelect v-model:value="lang"> + <FormSelect v-model="lang"> <template #label>{{ $ts.language }}</template> <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> </FormSelect> @@ -37,23 +37,23 @@ <template #caption>{{ $ts._profile.metadataDescription }}</template> </FormGroup> - <FormSwitch v-model:value="isCat">{{ $ts.flagAsCat }}<template #desc>{{ $ts.flagAsCatDescription }}</template></FormSwitch> + <FormSwitch v-model="isCat">{{ $ts.flagAsCat }}<template #desc>{{ $ts.flagAsCatDescription }}</template></FormSwitch> - <FormSwitch v-model:value="isBot">{{ $ts.flagAsBot }}<template #desc>{{ $ts.flagAsBotDescription }}</template></FormSwitch> + <FormSwitch v-model="isBot">{{ $ts.flagAsBot }}<template #desc>{{ $ts.flagAsBotDescription }}</template></FormSwitch> - <FormSwitch v-model:value="alwaysMarkNsfw">{{ $ts.alwaysMarkSensitive }}</FormSwitch> + <FormSwitch v-model="alwaysMarkNsfw">{{ $ts.alwaysMarkSensitive }}</FormSwitch> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormButton from '@client/components/form/button.vue'; -import FormInput from '@client/components/form/input.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormSelect from '@client/components/form/select.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormSelect from '@client/components/debobigego/select.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import { host, langs } from '@client/config'; import { selectFile } from '@client/scripts/select-file'; import * as os from '@client/os'; @@ -76,7 +76,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.profile, - icon: 'fas fa-user' + icon: 'fas fa-user', + bg: 'var(--bg)' }, host, langs, diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue index a0024234e4..a5ff46097d 100644 --- a/src/client/pages/settings/reaction.vue +++ b/src/client/pages/settings/reaction.vue @@ -1,8 +1,8 @@ <template> <FormBase> - <div class="_formItem"> - <div class="_formLabel">{{ $ts.reactionSettingDescription }}</div> - <div class="_formPanel"> + <div class="_debobigegoItem"> + <div class="_debobigegoLabel">{{ $ts.reactionSettingDescription }}</div> + <div class="_debobigegoPanel"> <XDraggable class="zoaiodol" v-model="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)"> @@ -14,7 +14,7 @@ </template> </XDraggable> </div> - <div class="_formCaption">{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></div> + <div class="_debobigegoCaption">{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></div> </div> <FormRadios v-model="reactionPickerWidth"> @@ -37,10 +37,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XDraggable from 'vuedraggable'; -import FormInput from '@client/components/form/input.vue'; -import FormRadios from '@client/components/form/radios.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormInput from '@client/components/debobigego/input.vue'; +import FormRadios from '@client/components/debobigego/radios.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import * as os from '@client/os'; import { defaultStore } from '@client/store'; import * as symbols from '@client/symbols'; @@ -64,7 +64,8 @@ export default defineComponent({ action: { icon: 'fas fa-eye', handler: this.preview - } + }, + bg: 'var(--bg)', }, reactions: JSON.parse(JSON.stringify(this.$store.state.reactions)), } diff --git a/src/client/pages/settings/registry.keys.vue b/src/client/pages/settings/registry.keys.vue index f71589ba4f..d99002e50f 100644 --- a/src/client/pages/settings/registry.keys.vue +++ b/src/client/pages/settings/registry.keys.vue @@ -25,11 +25,11 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import * as JSON5 from 'json5'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -56,7 +56,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.registry, - icon: 'fas fa-cogs' + icon: 'fas fa-cogs', + bg: 'var(--bg)', }, keys: null, } diff --git a/src/client/pages/settings/registry.value.vue b/src/client/pages/settings/registry.value.vue index 48245ae99f..06be5737e9 100644 --- a/src/client/pages/settings/registry.value.vue +++ b/src/client/pages/settings/registry.value.vue @@ -19,7 +19,7 @@ </FormGroup> <FormGroup> - <FormTextarea tall v-model:value="valueForEditor" class="_monospace" style="tab-size: 2;"> + <FormTextarea tall v-model="valueForEditor" class="_monospace" style="tab-size: 2;"> <span>{{ $ts.value }} (JSON)</span> </FormTextarea> <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> @@ -38,14 +38,14 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; import * as JSON5 from 'json5'; -import FormInfo from '@client/components/form/info.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormTextarea from '@client/components/form/textarea.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -76,7 +76,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.registry, - icon: 'fas fa-cogs' + icon: 'fas fa-cogs', + bg: 'var(--bg)', }, value: null, valueForEditor: null, diff --git a/src/client/pages/settings/registry.vue b/src/client/pages/settings/registry.vue index 5ba1bc751b..e4fb230d5c 100644 --- a/src/client/pages/settings/registry.vue +++ b/src/client/pages/settings/registry.vue @@ -13,11 +13,11 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import * as JSON5 from 'json5'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -38,7 +38,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.registry, - icon: 'fas fa-cogs' + icon: 'fas fa-cogs', + bg: 'var(--bg)', }, scopes: null, } diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue index b70fa5a9f3..e051685a82 100644 --- a/src/client/pages/settings/security.vue +++ b/src/client/pages/settings/security.vue @@ -6,7 +6,7 @@ <FormPagination :pagination="pagination"> <template #label>{{ $ts.signinHistory }}</template> <template #default="{items}"> - <div class="_formPanel timnmucd" v-for="item in items" :key="item.id"> + <div class="_debobigegoPanel timnmucd" v-for="item in items" :key="item.id"> <header> <i v-if="item.success" class="fas fa-check icon succ"></i> <i v-else class="fas fa-times-circle icon fail"></i> @@ -25,11 +25,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormBase from '@client/components/form/base.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormPagination from '@client/components/form/pagination.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormPagination from '@client/components/debobigego/pagination.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -48,7 +48,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.security, - icon: 'fas fa-lock' + icon: 'fas fa-lock', + bg: 'var(--bg)', }, pagination: { endpoint: 'i/signin-history', diff --git a/src/client/pages/settings/sounds.vue b/src/client/pages/settings/sounds.vue index 1c51685ce8..07310619c8 100644 --- a/src/client/pages/settings/sounds.vue +++ b/src/client/pages/settings/sounds.vue @@ -1,6 +1,6 @@ <template> <FormBase> - <FormRange v-model:value="masterVolume" :min="0" :max="1" :step="0.05"> + <FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05"> <template #label><i class="fas fa-volume-icon"></i> {{ $ts.masterVolume }}</template> </FormRange> @@ -19,11 +19,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import FormRange from '@client/components/form/range.vue'; -import FormSelect from '@client/components/form/select.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormRange from '@client/components/debobigego/range.vue'; +import FormSelect from '@client/components/debobigego/select.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import * as os from '@client/os'; import { ColdDeviceStorage } from '@client/store'; import { playFile } from '@client/scripts/sound'; @@ -71,7 +71,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.sounds, - icon: 'fas fa-music' + icon: 'fas fa-music', + bg: 'var(--bg)', }, sounds: {}, } diff --git a/src/client/pages/settings/theme.install.vue b/src/client/pages/settings/theme.install.vue index d719cc801f..9fbb28929d 100644 --- a/src/client/pages/settings/theme.install.vue +++ b/src/client/pages/settings/theme.install.vue @@ -1,7 +1,7 @@ <template> <FormBase> <FormGroup> - <FormTextarea v-model:value="installThemeCode"> + <FormTextarea v-model="installThemeCode"> <span>{{ $ts._theme.code }}</span> </FormTextarea> <FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton> @@ -17,10 +17,10 @@ import * as JSON5 from 'json5'; import FormTextarea from '@client/components/form/textarea.vue'; import FormSelect from '@client/components/form/select.vue'; import FormRadios from '@client/components/form/radios.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import { applyTheme, validateTheme } from '@client/scripts/theme'; import * as os from '@client/os'; import { ColdDeviceStorage } from '@client/store'; @@ -44,7 +44,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._theme.install, - icon: 'fas fa-download' + icon: 'fas fa-download', + bg: 'var(--bg)', }, installThemeCode: null, } diff --git a/src/client/pages/settings/theme.manage.vue b/src/client/pages/settings/theme.manage.vue index 7cc7a0169a..da21a47a50 100644 --- a/src/client/pages/settings/theme.manage.vue +++ b/src/client/pages/settings/theme.manage.vue @@ -1,6 +1,6 @@ <template> <FormBase> - <FormSelect v-model:value="selectedThemeId"> + <FormSelect v-model="selectedThemeId"> <template #label>{{ $ts.theme }}</template> <optgroup :label="$ts._theme.installedThemes"> <option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option> @@ -31,10 +31,10 @@ import * as JSON5 from 'json5'; import FormTextarea from '@client/components/form/textarea.vue'; import FormSelect from '@client/components/form/select.vue'; import FormRadios from '@client/components/form/radios.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import FormInput from '@client/components/form/input.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import { Theme, builtinThemes } from '@client/scripts/theme'; import copyToClipboard from '@client/scripts/copy-to-clipboard'; import * as os from '@client/os'; @@ -59,7 +59,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._theme.manage, - icon: 'fas fa-folder-open' + icon: 'fas fa-folder-open', + bg: 'var(--bg)', }, installedThemes: getThemes(), builtinThemes, diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue index 94eddb1b6f..c6be42251c 100644 --- a/src/client/pages/settings/theme.vue +++ b/src/client/pages/settings/theme.vue @@ -1,7 +1,7 @@ <template> <FormBase> <FormGroup> - <div class="rfqxtzch _formItem _formPanel"> + <div class="rfqxtzch _debobigegoItem _debobigegoPanel"> <div class="darkMode"> <div class="toggleWrapper"> <input type="checkbox" class="dn" id="dn" v-model="darkMode"/> @@ -23,11 +23,11 @@ </div> </div> </div> - <FormSwitch v-model:value="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch> + <FormSwitch v-model="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch> </FormGroup> <template v-if="darkMode"> - <FormSelect v-model:value="darkThemeId"> + <FormSelect v-model="darkThemeId"> <template #label>{{ $ts.themeForDarkMode }}</template> <optgroup :label="$ts.darkThemes"> <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option> @@ -36,7 +36,7 @@ <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option> </optgroup> </FormSelect> - <FormSelect v-model:value="lightThemeId"> + <FormSelect v-model="lightThemeId"> <template #label>{{ $ts.themeForLightMode }}</template> <optgroup :label="$ts.lightThemes"> <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option> @@ -47,7 +47,7 @@ </FormSelect> </template> <template v-else> - <FormSelect v-model:value="lightThemeId"> + <FormSelect v-model="lightThemeId"> <template #label>{{ $ts.themeForLightMode }}</template> <optgroup :label="$ts.lightThemes"> <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option> @@ -56,7 +56,7 @@ <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option> </optgroup> </FormSelect> - <FormSelect v-model:value="darkThemeId"> + <FormSelect v-model="darkThemeId"> <template #label>{{ $ts.themeForDarkMode }}</template> <optgroup :label="$ts.darkThemes"> <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option> @@ -86,12 +86,12 @@ <script lang="ts"> import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormSelect from '@client/components/form/select.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormButton from '@client/components/form/button.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormSelect from '@client/components/debobigego/select.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormButton from '@client/components/debobigego/button.vue'; import { builtinThemes } from '@client/scripts/theme'; import { selectFile } from '@client/scripts/select-file'; import { isDeviceDarkmode } from '@client/scripts/is-device-darkmode'; @@ -116,7 +116,8 @@ export default defineComponent({ setup(props, { emit }) { const INFO = { title: i18n.locale.theme, - icon: 'fas fa-palette' + icon: 'fas fa-palette', + bg: 'var(--bg)', }; const installedThemes = ref(getThemes()); diff --git a/src/client/pages/settings/update.vue b/src/client/pages/settings/update.vue index 8000327d0c..8bc459e936 100644 --- a/src/client/pages/settings/update.vue +++ b/src/client/pages/settings/update.vue @@ -32,12 +32,12 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormInfo from '@client/components/form/info.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; import * as os from '@client/os'; import { version, instanceName } from '@client/config'; import * as symbols from '@client/symbols'; @@ -60,7 +60,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: 'Misskey Update', - icon: 'fas fa-sync-alt' + icon: 'fas fa-sync-alt', + bg: 'var(--bg)', }, version, instanceName, diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue index fe3fece844..53948b1b1e 100644 --- a/src/client/pages/settings/word-mute.vue +++ b/src/client/pages/settings/word-mute.vue @@ -1,21 +1,21 @@ <template> <div> - <MkTab v-model:value="tab"> + <MkTab v-model="tab"> <option value="soft">{{ $ts._wordMute.soft }}</option> <option value="hard">{{ $ts._wordMute.hard }}</option> </MkTab> <FormBase> - <div class="_formItem"> + <div class="_debobigegoItem"> <div v-show="tab === 'soft'"> <FormInfo>{{ $ts._wordMute.softDescription }}</FormInfo> - <FormTextarea v-model:value="softMutedWords"> + <FormTextarea v-model="softMutedWords"> <span>{{ $ts._wordMute.muteWords }}</span> <template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template> </FormTextarea> </div> <div v-show="tab === 'hard'"> <FormInfo>{{ $ts._wordMute.hardDescription }}</FormInfo> - <FormTextarea v-model:value="hardMutedWords"> + <FormTextarea v-model="hardMutedWords"> <span>{{ $ts._wordMute.muteWords }}</span> <template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template> </FormTextarea> @@ -33,10 +33,10 @@ <script lang="ts"> import { defineComponent } from 'vue'; import FormTextarea from '@client/components/form/textarea.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormInfo from '@client/components/form/info.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormInfo from '@client/components/debobigego/info.vue'; import MkTab from '@client/components/tab.vue'; import * as os from '@client/os'; import number from '@client/filters/number'; @@ -58,7 +58,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.wordMute, - icon: 'fas fa-comment-slash' + icon: 'fas fa-comment-slash', + bg: 'var(--bg)', }, tab: 'soft', softMutedWords: '', diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue index 131571e9dd..fbab0112ed 100644 --- a/src/client/pages/test.vue +++ b/src/client/pages/test.vue @@ -133,10 +133,10 @@ <script lang="ts"> import { defineComponent, defineAsyncComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkSwitch from '@client/components/ui/switch.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkRadio from '@client/components/ui/radio.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkSwitch from '@client/components/form/switch.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkRadio from '@client/components/form/radio.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue index ce8bae4ff5..3b10396ab8 100644 --- a/src/client/pages/theme-editor.vue +++ b/src/client/pages/theme-editor.vue @@ -1,8 +1,8 @@ <template> <FormBase class="cwepdizn"> - <div class="_formItem colorPicker"> - <div class="_formLabel">{{ $ts.backgroundColor }}</div> - <div class="_formPanel colors"> + <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" @click="setBgColor(color)" class="color _button" :class="{ active: theme.props.bg === color.color }"> <div class="preview" :style="{ background: color.forPreview }"></div> @@ -15,9 +15,9 @@ </div> </div> </div> - <div class="_formItem colorPicker"> - <div class="_formLabel">{{ $ts.accentColor }}</div> - <div class="_formPanel colors"> + <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" @click="setAccentColor(color)" class="color rounded _button" :class="{ active: theme.props.accent === color }"> <div class="preview" :style="{ background: color }"></div> @@ -25,9 +25,9 @@ </div> </div> </div> - <div class="_formItem colorPicker"> - <div class="_formLabel">{{ $ts.textColor }}</div> - <div class="_formPanel colors"> + <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" @click="setFgColor(color)" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }"> <div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div> @@ -37,7 +37,7 @@ </div> <FormGroup v-if="codeEnabled"> - <FormTextarea v-model:value="themeCode" tall> + <FormTextarea v-model="themeCode" tall> <span>{{ $ts._theme.code }}</span> </FormTextarea> <FormButton @click="applyThemeCode" primary>{{ $ts.apply }}</FormButton> @@ -45,7 +45,7 @@ <FormButton v-else @click="codeEnabled = true"><i class="fas fa-code"></i> {{ $ts.editCode }}</FormButton> <FormGroup v-if="descriptionEnabled"> - <FormTextarea v-model:value="description"> + <FormTextarea v-model="description"> <span>{{ $ts._theme.description }}</span> </FormTextarea> </FormGroup> @@ -65,10 +65,10 @@ import * as tinycolor from 'tinycolor2'; import { v4 as uuid} from 'uuid'; import * as JSON5 from 'json5'; -import FormBase from '@client/components/form/base.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormGroup from '@client/components/form/group.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; import { Theme, applyTheme, validateTheme, darkTheme, lightTheme } from '@client/scripts/theme'; import { host } from '@client/config'; diff --git a/src/client/pages/user-ap-info.vue b/src/client/pages/user-ap-info.vue index c08a352571..cbdff874ed 100644 --- a/src/client/pages/user-ap-info.vue +++ b/src/client/pages/user-ap-info.vue @@ -58,14 +58,14 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import FormObjectView from '@client/components/form/object-view.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormObjectView from '@client/components/debobigego/object-view.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import number from '@client/filters/number'; import bytes from '@client/filters/bytes'; diff --git a/src/client/pages/user-info.vue b/src/client/pages/user-info.vue index 503982652b..bf67fc853a 100644 --- a/src/client/pages/user-info.vue +++ b/src/client/pages/user-info.vue @@ -1,7 +1,7 @@ <template> <FormBase> <FormSuspense :p="init"> - <div class="_formItem aeakzknw"> + <div class="_debobigegoItem aeakzknw"> <MkAvatar class="avatar" :user="user" :show-indicator="true"/> </div> @@ -20,9 +20,9 @@ </FormGroup> <FormGroup v-if="iAmModerator"> - <FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" @update:value="toggleModerator" v-model:value="moderator">{{ $ts.moderator }}</FormSwitch> - <FormSwitch @update:value="toggleSilence" v-model:value="silenced">{{ $ts.silence }}</FormSwitch> - <FormSwitch @update:value="toggleSuspend" v-model:value="suspended">{{ $ts.suspend }}</FormSwitch> + <FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" @update:modelValue="toggleModerator" v-model="moderator">{{ $ts.moderator }}</FormSwitch> + <FormSwitch @update:modelValue="toggleSilence" v-model="silenced">{{ $ts.silence }}</FormSwitch> + <FormSwitch @update:modelValue="toggleSuspend" v-model="suspended">{{ $ts.suspend }}</FormSwitch> </FormGroup> <FormGroup> @@ -56,15 +56,15 @@ <script lang="ts"> import { computed, defineAsyncComponent, defineComponent } from 'vue'; -import FormObjectView from '@client/components/form/object-view.vue'; -import FormTextarea from '@client/components/form/textarea.vue'; -import FormSwitch from '@client/components/form/switch.vue'; -import FormLink from '@client/components/form/link.vue'; -import FormBase from '@client/components/form/base.vue'; -import FormGroup from '@client/components/form/group.vue'; -import FormButton from '@client/components/form/button.vue'; -import FormKeyValueView from '@client/components/form/key-value-view.vue'; -import FormSuspense from '@client/components/form/suspense.vue'; +import FormObjectView from '@client/components/debobigego/object-view.vue'; +import FormTextarea from '@client/components/debobigego/textarea.vue'; +import FormSwitch from '@client/components/debobigego/switch.vue'; +import FormLink from '@client/components/debobigego/link.vue'; +import FormBase from '@client/components/debobigego/base.vue'; +import FormGroup from '@client/components/debobigego/group.vue'; +import FormButton from '@client/components/debobigego/button.vue'; +import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; +import FormSuspense from '@client/components/debobigego/suspense.vue'; import * as os from '@client/os'; import number from '@client/filters/number'; import bytes from '@client/filters/bytes'; diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue index 287e6c8b22..8796ded469 100644 --- a/src/client/pages/user/index.timeline.vue +++ b/src/client/pages/user/index.timeline.vue @@ -1,6 +1,6 @@ <template> <div class="yrzkoczt" v-sticky-container> - <MkTab v-model:value="with_" class="_gap tab"> + <MkTab v-model="with_" class="_gap tab"> <option :value="null">{{ $ts.notes }}</option> <option value="replies">{{ $ts.notesAndReplies }}</option> <option value="files">{{ $ts.withFiles }}</option> diff --git a/src/client/pages/welcome.setup.vue b/src/client/pages/welcome.setup.vue index d0091bef67..dfefecc8fa 100644 --- a/src/client/pages/welcome.setup.vue +++ b/src/client/pages/welcome.setup.vue @@ -24,7 +24,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; +import MkInput from '@client/components/form/input.vue'; import { host } from '@client/config'; import * as os from '@client/os'; import { login } from '@client/account'; |