mirror/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey synced 2024-11-24 23:26:35 +09:00
Code

Improve client

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/ja-JP.yml
View File

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

4
src/client/components/ui/button.vue
View File

@ -1,6 +1,6 @@
<template>
<component class="bghgjjyj _button"
:is="link ? 'a' : 'button'"
:is="link ? 'MkA' : 'button'"
:class="{ inline, primary, danger, full }"
:type="type"
@click="$emit('click', $event)"
@ -115,6 +115,7 @@ export default defineComponent({
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
display: block;
min-width: 100px;
width: min-content;
padding: 8px 14px;
text-align: center;
font-weight: normal;
@ -125,6 +126,7 @@ export default defineComponent({
background: var(--buttonBg);
border-radius: 999px;
overflow: hidden;
box-sizing: border-box;
&:not(:disabled):hover {
background: var(--buttonHoverBg);

26
src/client/pages/_error_.vue
View File

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

51
src/client/pages/my-antennas/create.vue Normal file
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>

56
src/client/pages/my-antennas/edit.vue Normal file
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>

28
src/client/pages/my-antennas/index.antenna.vue → src/client/pages/my-antennas/editor.vue
View File

@ -1,8 +1,7 @@
<template>
<div class="shaynizk _card">
<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
<div class="_content body">
<MkInput v-model="name">
<div class="shaynizk">
<div class="form">
<MkInput v-model="name" class="_inputNoTopMargin">
<template #label>{{ $ts.name }}</template>
</MkInput>
<MkSelect v-model="src">
@ -38,9 +37,9 @@
<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
</div>
<div class="_footer">
<div class="actions">
<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>
</template>
@ -117,7 +116,7 @@ export default defineComponent({
methods: {
async saveAntenna() {
if (this.antenna.id == null) {
await os.api('antennas/create', {
await os.apiWithDialog('antennas/create', {
name: this.name,
src: this.src,
userListId: this.userListId,
@ -132,7 +131,7 @@ export default defineComponent({
});
this.$emit('created');
} else {
await os.api('antennas/update', {
await os.apiWithDialog('antennas/update', {
antennaId: this.antenna.id,
name: this.name,
src: this.src,
@ -146,9 +145,8 @@ export default defineComponent({
keywords: this.keywords.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() {
@ -180,9 +178,13 @@ export default defineComponent({
<style lang="scss" scoped>
.shaynizk {
> .body {
max-height: 250px;
overflow: auto;
> .form {
padding: 32px;
}
> .actions {
padding: 24px 32px;
border-top: solid 0.5px var(--divider);
}
}
</style>

59
src/client/pages/my-antennas/index.vue
View File

@ -1,12 +1,12 @@
<template>
<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">
<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/>
<MkPagination :pagination="pagination" #default="{items}" ref="list">
<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
<div class="name">{{ antenna.name }}</div>
</MkA>
</MkPagination>
</div>
</div>
@ -16,14 +16,12 @@
import { defineComponent } from 'vue';
import MkPagination from '@client/components/ui/pagination.vue';
import MkButton from '@client/components/ui/button.vue';
import XAntenna from './index.antenna.vue';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
MkPagination,
MkButton,
XAntenna,
},
data() {
@ -40,43 +38,34 @@ export default defineComponent({
endpoint: 'antennas/list',
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>
<style lang="scss" scoped>
.ieepwinx {
padding: 16px;
> .add {
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>

1
src/client/style.scss
View File

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

2
src/client/themes/_light.json5
View File

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

2
src/client/themes/l-vivid.json5
View File

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