mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-23 20:53:08 +02:00
デッキ周り改修など
This commit is contained in:
parent
ea6aa40b09
commit
1da3777bfb
10 changed files with 56 additions and 87 deletions
|
@ -1,20 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="">
|
<div class="iltifgqe">
|
||||||
<div class="_panel iltifgqe">
|
<div class="editor _panel _vMargin">
|
||||||
<PrismEditor class="_code code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
|
<PrismEditor class="_code code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
|
||||||
<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton>
|
<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<MkContainer :body-togglable="true">
|
<MkContainer :body-togglable="true" class="_vMargin">
|
||||||
<template #header><Fa fixed-width/>{{ $ts.output }}</template>
|
<template #header><Fa fixed-width/>{{ $ts.output }}</template>
|
||||||
<div class="bepmlvbi">
|
<div class="bepmlvbi">
|
||||||
<div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
|
<div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
|
||||||
</div>
|
</div>
|
||||||
</MkContainer>
|
</MkContainer>
|
||||||
|
|
||||||
<section class="_section" style="margin-top: var(--margin);">
|
<div class="_vMargin">
|
||||||
<div class="_content">{{ $ts.scratchpadDescription }}</div>
|
{{ $ts.scratchpadDescription }}
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -130,9 +130,10 @@ export default defineComponent({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.iltifgqe {
|
.iltifgqe {
|
||||||
position: relative;
|
padding: 16px;
|
||||||
|
|
||||||
> .code {
|
> .editor {
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
|
<XColumn :func="{ handler: setAntenna, title: $ts.selectAntenna }" :column="column" :is-stacked="isStacked">
|
||||||
<template #header>
|
<template #header>
|
||||||
<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
|
<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
@ -45,14 +45,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
|
||||||
this.menu = [{
|
|
||||||
icon: faCog,
|
|
||||||
text: this.$ts.selectAntenna,
|
|
||||||
action: this.setAntenna
|
|
||||||
}];
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.column.antennaId == null) {
|
if (this.column.antennaId == null) {
|
||||||
this.setAntenna();
|
this.setAntenna();
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
<slot name="action"></slot>
|
<slot name="action"></slot>
|
||||||
</div>
|
</div>
|
||||||
<span class="header"><slot name="header"></slot></span>
|
<span class="header"><slot name="header"></slot></span>
|
||||||
<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
|
<button v-if="func" class="menu _button" ref="menu" @click.stop="func.handler"><Fa :icon="func.icon || faCog"/></button>
|
||||||
</header>
|
</header>
|
||||||
<div ref="body" v-show="active">
|
<div ref="body" v-show="active">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
|
import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt, faCog } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
|
import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
|
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
|
||||||
|
@ -50,8 +50,8 @@ export default defineComponent({
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
menu: {
|
func: {
|
||||||
type: Array,
|
type: Object,
|
||||||
required: false,
|
required: false,
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
|
@ -74,7 +74,7 @@ export default defineComponent({
|
||||||
dragging: false,
|
dragging: false,
|
||||||
draghover: false,
|
draghover: false,
|
||||||
dropready: false,
|
dropready: false,
|
||||||
faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
|
faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faCog,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -196,12 +196,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
|
|
||||||
if (this.menu) {
|
|
||||||
for (const i of this.menu.reverse()) {
|
|
||||||
items.unshift(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return items;
|
return items;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -209,10 +203,6 @@ export default defineComponent({
|
||||||
os.contextMenu(this.getMenu(), e);
|
os.contextMenu(this.getMenu(), e);
|
||||||
},
|
},
|
||||||
|
|
||||||
showMenu() {
|
|
||||||
os.modalMenu(this.getMenu(), this.$refs.menu);
|
|
||||||
},
|
|
||||||
|
|
||||||
goTop() {
|
goTop() {
|
||||||
this.$refs.body.scrollTo({
|
this.$refs.body.scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<XColumn :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
|
<XColumn :column="column" :is-stacked="isStacked">
|
||||||
<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
|
<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
|
||||||
|
|
||||||
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
|
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
|
||||||
|
@ -33,7 +33,6 @@ export default defineComponent({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menu: null,
|
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'notes/mentions',
|
endpoint: 'notes/mentions',
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
|
<XColumn :func="{ handler: setList, title: $ts.selectList }" :column="column" :is-stacked="isStacked">
|
||||||
<template #header>
|
<template #header>
|
||||||
<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
|
<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
@ -45,14 +45,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
|
||||||
this.menu = [{
|
|
||||||
icon: faCog,
|
|
||||||
text: this.$ts.selectList,
|
|
||||||
action: this.setList
|
|
||||||
}];
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.column.listId == null) {
|
if (this.column.listId == null) {
|
||||||
this.setList();
|
this.setList();
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
|
<XColumn :column="column" :is-stacked="isStacked">
|
||||||
<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
|
<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
|
||||||
|
|
||||||
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
|
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
|
||||||
|
@ -33,7 +33,6 @@ export default defineComponent({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menu: null,
|
|
||||||
pagination: {
|
pagination: {
|
||||||
endpoint: 'notes/mentions',
|
endpoint: 'notes/mentions',
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
|
<XColumn :column="column" :is-stacked="isStacked" :func="{ handler: func, title: $ts.notificationSetting }">
|
||||||
<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
|
<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
|
||||||
|
|
||||||
<XNotifications :include-types="column.includingTypes"/>
|
<XNotifications :include-types="column.includingTypes"/>
|
||||||
|
@ -34,16 +34,12 @@ export default defineComponent({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menu: null,
|
|
||||||
faBell
|
faBell
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
methods: {
|
||||||
this.menu = [{
|
func() {
|
||||||
icon: faCog,
|
|
||||||
text: this.$ts.notificationSetting,
|
|
||||||
action: () => {
|
|
||||||
os.popup(import('@/components/notification-setting-window.vue'), {
|
os.popup(import('@/components/notification-setting-window.vue'), {
|
||||||
includingTypes: this.column.includingTypes,
|
includingTypes: this.column.includingTypes,
|
||||||
}, {
|
}, {
|
||||||
|
@ -55,7 +51,6 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
}, 'closed');
|
}, 'closed');
|
||||||
}
|
}
|
||||||
}];
|
}
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
|
<XColumn :func="{ handler: setType, title: $ts.timeline }" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
|
||||||
<template #header>
|
<template #header>
|
||||||
<Fa v-if="column.tl === 'home'" :icon="faHome"/>
|
<Fa v-if="column.tl === 'home'" :icon="faHome"/>
|
||||||
<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
|
<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
|
||||||
|
@ -46,7 +46,6 @@ export default defineComponent({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menu: null,
|
|
||||||
disabled: false,
|
disabled: false,
|
||||||
indicated: false,
|
indicated: false,
|
||||||
columnActive: true,
|
columnActive: true,
|
||||||
|
@ -60,14 +59,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
|
||||||
this.menu = [{
|
|
||||||
icon: faCog,
|
|
||||||
text: this.$ts.timeline,
|
|
||||||
action: this.setType
|
|
||||||
}];
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.column.tl == null) {
|
if (this.column.tl == null) {
|
||||||
this.setType();
|
this.setType();
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
|
<XColumn :func="{ handler: func, title: $ts.editWidgets }" :naked="true" :column="column" :is-stacked="isStacked">
|
||||||
<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
|
<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
|
||||||
|
|
||||||
<div class="wtdtxvec">
|
<div class="wtdtxvec">
|
||||||
|
@ -62,7 +62,6 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
edit: false,
|
edit: false,
|
||||||
menu: null,
|
|
||||||
widgetAdderSelected: null,
|
widgetAdderSelected: null,
|
||||||
widgets,
|
widgets,
|
||||||
settings: {},
|
settings: {},
|
||||||
|
@ -81,16 +80,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
|
||||||
this.menu = [{
|
|
||||||
icon: faCog,
|
|
||||||
text: this.$ts.edit,
|
|
||||||
action: () => {
|
|
||||||
this.edit = !this.edit;
|
|
||||||
}
|
|
||||||
}];
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
widgetFunc(id) {
|
widgetFunc(id) {
|
||||||
this.settings[id]();
|
this.settings[id]();
|
||||||
|
@ -114,6 +103,10 @@ export default defineComponent({
|
||||||
|
|
||||||
saveWidget(id, data) {
|
saveWidget(id, data) {
|
||||||
updateColumnWidget(this.column.id, id, data);
|
updateColumnWidget(this.column.id, id, data);
|
||||||
|
},
|
||||||
|
|
||||||
|
func() {
|
||||||
|
this.edit = !this.edit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
17
src/docs/ja-JP/deck.md
Normal file
17
src/docs/ja-JP/deck.md
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
# デッキ
|
||||||
|
|
||||||
|
デッキは利用可能なUIのひとつです。「カラム」と呼ばれるビューを複数並べて表示させることで、カスタマイズ性が高く、情報量の多いUIが構築できることが特徴です。
|
||||||
|
|
||||||
|
## カラムの追加
|
||||||
|
デッキの背景を右クリックし、「カラムを追加」して任意のカラムを追加できます。
|
||||||
|
|
||||||
|
## カラムの移動
|
||||||
|
カラムは、ドラッグアンドドロップで他のカラムと位置を入れ替えることが出来るほか、カラムメニュー(カラムのヘッダー右クリック)から位置を移動させることもできます。
|
||||||
|
|
||||||
|
## カラムの水平分割
|
||||||
|
カラムは左右だけでなく、上下に並べることもできます。
|
||||||
|
カラムメニューを開き、「左に重ねる」を選択すると、左のカラムの下に現在のカラムが移動します。
|
||||||
|
上下分割を解除するには、カラムメニューの「右に出す」を選択します。
|
||||||
|
|
||||||
|
## カラムの設定
|
||||||
|
カラムメニューの「編集」を選択するとカラムの設定を編集できます。カラムの名前を変えたり、幅を変えたりできます。
|
Loading…
Reference in a new issue