0
0

Improve client

This commit is contained in:
syuilo 2021-08-07 17:55:16 +09:00
parent 65f1afc4e0
commit 5f869e5d87
10 changed files with 171 additions and 59 deletions

View File

@ -769,6 +769,7 @@ sent: "送信"
received: "受信" received: "受信"
searchResult: "検索結果" searchResult: "検索結果"
hashtags: "ハッシュタグ" hashtags: "ハッシュタグ"
troubleshooting: "トラブルシューティング"
_docs: _docs:
continueReading: "続きを読む" continueReading: "続きを読む"

View File

@ -1,6 +1,6 @@
<template> <template>
<component class="bghgjjyj _button" <component class="bghgjjyj _button"
:is="link ? 'a' : 'button'" :is="link ? 'MkA' : 'button'"
:class="{ inline, primary, danger, full }" :class="{ inline, primary, danger, full }"
:type="type" :type="type"
@click="$emit('click', $event)" @click="$emit('click', $event)"
@ -115,6 +115,7 @@ export default defineComponent({
z-index: 1; // box-shadow z-index: 1; // box-shadow
display: block; display: block;
min-width: 100px; min-width: 100px;
width: min-content;
padding: 8px 14px; padding: 8px 14px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
@ -125,6 +126,7 @@ export default defineComponent({
background: var(--buttonBg); background: var(--buttonBg);
border-radius: 999px; border-radius: 999px;
overflow: hidden; overflow: hidden;
box-sizing: border-box;
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--buttonHoverBg); background: var(--buttonHoverBg);

View File

@ -1,11 +1,11 @@
<template> <template>
<transition :name="$store.state.animation ? 'zoom' : ''" appear> <transition :name="$store.state.animation ? 'zoom' : ''" appear>
<div class="_section"> <div class="mjndxjch">
<div class="mjndxjch _content"> <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> <p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p> <p>{{ $ts.pageLoadErrorDescription }}</p>
<p>{{ $ts.pageLoadErrorDescription }}</p> <p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
</div> <p v-if="error" class="error">ERROR: {{ error }}</p>
</div> </div>
</transition> </transition>
</template> </template>
@ -19,6 +19,11 @@ export default defineComponent({
components: { components: {
MkButton, MkButton,
}, },
props: {
error: {
required: false,
}
},
data() { data() {
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
@ -32,10 +37,11 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.mjndxjch { .mjndxjch {
padding: 32px;
text-align: center; text-align: center;
> p { > p {
margin: 0 0 8px 0; margin: 0 0 12px 0;
} }
> .button { > .button {
@ -45,8 +51,12 @@ export default defineComponent({
> img { > img {
vertical-align: bottom; vertical-align: bottom;
height: 128px; height: 128px;
margin-bottom: 16px; margin-bottom: 24px;
border-radius: 16px; border-radius: 16px;
} }
> .error {
opacity: 0.7;
}
} }
</style> </style>

View File

@ -0,0 +1,51 @@
<template>
<div class="geegznzt">
<XAntenna :antenna="draft" @created="onAntennaCreated"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@client/components/ui/button.vue';
import XAntenna from './editor.vue';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
MkButton,
XAntenna,
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.manageAntennas,
icon: 'fas fa-satellite',
},
draft: {
name: '',
src: 'all',
userListId: null,
userGroupId: null,
users: [],
keywords: [],
excludeKeywords: [],
withReplies: false,
caseSensitive: false,
withFile: false,
notify: false
},
};
},
methods: {
onAntennaCreated() {
this.$router.push('/my/antennas');
},
}
});
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,56 @@
<template>
<div class="">
<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@client/components/ui/button.vue';
import XAntenna from './editor.vue';
import * as symbols from '@client/symbols';
import * as os from '@client/os';
export default defineComponent({
components: {
MkButton,
XAntenna,
},
props: {
antennaId: {
type: String,
required: true,
}
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.manageAntennas,
icon: 'fas fa-satellite',
},
antenna: null,
};
},
watch: {
antennaId: {
async handler() {
this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
},
immediate: true,
}
},
methods: {
onAntennaUpdated() {
this.$router.push('/my/antennas');
},
}
});
</script>
<style lang="scss" scoped>
</style>

View File

@ -1,8 +1,7 @@
<template> <template>
<div class="shaynizk _card"> <div class="shaynizk">
<div class="_title" v-if="antenna.name">{{ antenna.name }}</div> <div class="form">
<div class="_content body"> <MkInput v-model="name" class="_inputNoTopMargin">
<MkInput v-model="name">
<template #label>{{ $ts.name }}</template> <template #label>{{ $ts.name }}</template>
</MkInput> </MkInput>
<MkSelect v-model="src"> <MkSelect v-model="src">
@ -38,9 +37,9 @@
<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch> <MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch> <MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
</div> </div>
<div class="_footer"> <div class="actions">
<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> <MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton> <MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -117,7 +116,7 @@ export default defineComponent({
methods: { methods: {
async saveAntenna() { async saveAntenna() {
if (this.antenna.id == null) { if (this.antenna.id == null) {
await os.api('antennas/create', { await os.apiWithDialog('antennas/create', {
name: this.name, name: this.name,
src: this.src, src: this.src,
userListId: this.userListId, userListId: this.userListId,
@ -132,7 +131,7 @@ export default defineComponent({
}); });
this.$emit('created'); this.$emit('created');
} else { } else {
await os.api('antennas/update', { await os.apiWithDialog('antennas/update', {
antennaId: this.antenna.id, antennaId: this.antenna.id,
name: this.name, name: this.name,
src: this.src, src: this.src,
@ -146,9 +145,8 @@ export default defineComponent({
keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')), keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')), excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
}); });
this.$emit('updated');
} }
os.success();
}, },
async deleteAntenna() { async deleteAntenna() {
@ -180,9 +178,13 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.shaynizk { .shaynizk {
> .body { > .form {
max-height: 250px; padding: 32px;
overflow: auto; }
> .actions {
padding: 24px 32px;
border-top: solid 0.5px var(--divider);
} }
} }
</style> </style>

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="ieepwinx _section"> <div class="ieepwinx _section">
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> <MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<div class="_content"> <div class="_content">
<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/> <MkPagination :pagination="pagination" #default="{items}" ref="list">
<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list"> <div class="name">{{ antenna.name }}</div>
<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/> </MkA>
</MkPagination> </MkPagination>
</div> </div>
</div> </div>
@ -16,14 +16,12 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import MkPagination from '@client/components/ui/pagination.vue'; import MkPagination from '@client/components/ui/pagination.vue';
import MkButton from '@client/components/ui/button.vue'; import MkButton from '@client/components/ui/button.vue';
import XAntenna from './index.antenna.vue';
import * as symbols from '@client/symbols'; import * as symbols from '@client/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
MkPagination, MkPagination,
MkButton, MkButton,
XAntenna,
}, },
data() { data() {
@ -40,43 +38,34 @@ export default defineComponent({
endpoint: 'antennas/list', endpoint: 'antennas/list',
limit: 10, limit: 10,
}, },
draft: null,
}; };
}, },
methods: {
create() {
this.draft = {
name: '',
src: 'all',
userListId: null,
userGroupId: null,
users: [],
keywords: [],
excludeKeywords: [],
withReplies: false,
caseSensitive: false,
withFile: false,
notify: false
};
},
onAntennaCreated() {
this.$refs.list.reload();
this.draft = null;
},
onAntennaDeleted() {
this.$refs.list.reload();
},
}
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ieepwinx { .ieepwinx {
padding: 16px;
> .add { > .add {
margin: 0 auto 16px auto; margin: 0 auto 16px auto;
} }
.ljoevbzj {
display: block;
padding: 16px;
margin-bottom: 8px;
border: solid 1px var(--divider);
border-radius: 6px;
&:hover {
border: solid 1px var(--accent);
text-decoration: none;
}
> .name {
font-weight: bold;
}
}
} }
</style> </style>

View File

@ -255,6 +255,7 @@ hr {
margin: var(--margin) 0; margin: var(--margin) 0;
} }
// TODO: 廃止
._card { ._card {
@extend ._panel; @extend ._panel;

View File

@ -47,7 +47,7 @@
infoBg: '#e5f5ff', infoBg: '#e5f5ff',
infoFg: '#72818a', infoFg: '#72818a',
infoWarnBg: '#fff0db', infoWarnBg: '#fff0db',
infoWarnFg: '#573c08', infoWarnFg: '#8f6e31',
cwBg: '#b1b9c1', cwBg: '#b1b9c1',
cwFg: '#fff', cwFg: '#fff',
cwHoverBg: '#bbc4ce', cwHoverBg: '#bbc4ce',

View File

@ -38,7 +38,7 @@
messageBg: '@bg', messageBg: '@bg',
navActive: '@accent', navActive: '@accent',
infoWarnBg: '#fff0db', infoWarnBg: '#fff0db',
infoWarnFg: '#573c08', infoWarnFg: '#8f6e31',
navHoverFg: ':darken<17<@fg', navHoverFg: ':darken<17<@fg',
dateLabelFg: '@fg', dateLabelFg: '@fg',
inputBorder: 'rgba(0, 0, 0, 0.1)', inputBorder: 'rgba(0, 0, 0, 0.1)',