mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-26 22:33:09 +02:00
Improve client
This commit is contained in:
parent
65f1afc4e0
commit
5f869e5d87
10 changed files with 171 additions and 59 deletions
|
@ -769,6 +769,7 @@ sent: "送信"
|
||||||
received: "受信"
|
received: "受信"
|
||||||
searchResult: "検索結果"
|
searchResult: "検索結果"
|
||||||
hashtags: "ハッシュタグ"
|
hashtags: "ハッシュタグ"
|
||||||
|
troubleshooting: "トラブルシューティング"
|
||||||
|
|
||||||
_docs:
|
_docs:
|
||||||
continueReading: "続きを読む"
|
continueReading: "続きを読む"
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
51
src/client/pages/my-antennas/create.vue
Normal file
51
src/client/pages/my-antennas/create.vue
Normal 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>
|
56
src/client/pages/my-antennas/edit.vue
Normal file
56
src/client/pages/my-antennas/edit.vue
Normal 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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -255,6 +255,7 @@ hr {
|
||||||
margin: var(--margin) 0;
|
margin: var(--margin) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: 廃止
|
||||||
._card {
|
._card {
|
||||||
@extend ._panel;
|
@extend ._panel;
|
||||||
|
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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)',
|
||||||
|
|
Loading…
Reference in a new issue