Improve usability

This commit is contained in:
syuilo 2019-04-29 14:46:35 +09:00
parent c0673884c5
commit cef26853df
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 13 additions and 2 deletions

View file

@ -1847,6 +1847,7 @@ pages:
are-you-sure-delete: "このページを削除しますか?" are-you-sure-delete: "このページを削除しますか?"
page-deleted: "ページを削除しました" page-deleted: "ページを削除しました"
edit-this-page: "このページを編集" edit-this-page: "このページを編集"
view-page: "ページを見る"
variables: "変数" variables: "変数"
variables-info: "変数を使うことで動的なページを作成できます。テキスト内で <b>{ 変数名 }</b> と書くとそこに変数の値を埋め込めます。例えば <b>Hello { thing } world!</b> というテキストで、変数(thing)の値が <b>ai</b> だった場合、テキストは <b>Hello ai world!</b> になります。" variables-info: "変数を使うことで動的なページを作成できます。テキスト内で <b>{ 変数名 }</b> と書くとそこに変数の値を埋め込めます。例えば <b>Hello { thing } world!</b> というテキストで、変数(thing)の値が <b>ai</b> だった場合、テキストは <b>Hello ai world!</b> になります。"
variables-info2: "変数の評価(値を算出すること)は上から下に行われるので、ある変数の中で自分より下の変数を参照することはできません。例えば上から <b>A、B、C</b> と3つの変数を定義したとき、<b>C</b>の中で<b>A</b>や<b>B</b>を参照することはできますが、<b>A</b>の中で<b>B</b>や<b>C</b>を参照することはできません。" variables-info2: "変数の評価(値を算出すること)は上から下に行われるので、ある変数の中で自分より下の変数を参照することはできません。例えば上から <b>A、B、C</b> と3つの変数を定義したとき、<b>C</b>の中で<b>A</b>や<b>B</b>を参照することはできますが、<b>A</b>の中で<b>B</b>や<b>C</b>を参照することはできません。"

View file

@ -11,6 +11,8 @@
</header> </header>
<section> <section>
<a class="view" v-if="pageId" :href="`/@${ $store.state.i.username }/pages/${ currentName }`" target="_blank"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
<ui-input v-model="title"> <ui-input v-model="title">
<span>{{ $t('title') }}</span> <span>{{ $t('title') }}</span>
</ui-input> </ui-input>
@ -84,7 +86,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../../i18n'; import i18n from '../../../../i18n';
import { faICursor, faPlus, faSquareRootAlt, faCog } from '@fortawesome/free-solid-svg-icons'; import { faICursor, faPlus, faSquareRootAlt, faCog, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons'; import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
import XVariable from './page-editor.script-block.vue'; import XVariable from './page-editor.script-block.vue';
import XBlock from './page-editor.block.vue'; import XBlock from './page-editor.block.vue';
@ -110,6 +112,7 @@ export default Vue.extend({
data() { data() {
return { return {
pageId: null, pageId: null,
currentName: null,
title: '', title: '',
summary: null, summary: null,
name: Date.now().toString(), name: Date.now().toString(),
@ -123,7 +126,7 @@ export default Vue.extend({
showOptions: false, showOptions: false,
moreDetails: false, moreDetails: false,
url, url,
faPlus, faICursor, faSave, faStickyNote, faSquareRootAlt, faCog, faTrashAlt faPlus, faICursor, faSave, faStickyNote, faSquareRootAlt, faCog, faTrashAlt, faExternalLinkSquareAlt
}; };
}, },
@ -157,6 +160,7 @@ export default Vue.extend({
this.pageId = page.id; this.pageId = page.id;
this.title = page.title; this.title = page.title;
this.name = page.name; this.name = page.name;
this.currentName = page.name;
this.summary = page.summary; this.summary = page.summary;
this.font = page.font; this.font = page.font;
this.alignCenter = page.alignCenter; this.alignCenter = page.alignCenter;
@ -194,6 +198,7 @@ export default Vue.extend({
variables: this.variables, variables: this.variables,
eyeCatchingImageId: this.eyeCatchingImageId, eyeCatchingImageId: this.eyeCatchingImageId,
}).then(page => { }).then(page => {
this.currentName = this.name.trim();
this.$root.dialog({ this.$root.dialog({
type: 'success', type: 'success',
text: this.$t('page-updated') text: this.$t('page-updated')
@ -211,6 +216,7 @@ export default Vue.extend({
eyeCatchingImageId: this.eyeCatchingImageId, eyeCatchingImageId: this.eyeCatchingImageId,
}).then(page => { }).then(page => {
this.pageId = page.id; this.pageId = page.id;
this.currentName = this.name.trim();
this.$root.dialog({ this.$root.dialog({
type: 'success', type: 'success',
text: this.$t('page-created') text: this.$t('page-created')
@ -427,6 +433,10 @@ export default Vue.extend({
@media (max-width 500px) @media (max-width 500px)
padding 0 16px 16px 16px padding 0 16px 16px 16px
> .view
display inline-block
margin 16px 0 0 0
> .content > .content
margin-bottom 16px margin-bottom 16px