Improve usability

locales/ja-JP.yml

@@ -1847,6 +1847,7 @@ pages:
   are-you-sure-delete: "このページを削除しますか？"
   page-deleted: "ページを削除しました"
   edit-this-page: "このページを編集"
+  view-page: "ページを見る"
   variables: "変数"
   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>を参照することはできません。"

src/client/app/common/views/components/page-editor/page-editor.vue

@@ -11,6 +11,8 @@
 		</header>
 
 		<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">
 				<span>{{ $t('title') }}</span>
 			</ui-input>
@@ -84,7 +86,7 @@
 <script lang="ts">
 import Vue from 'vue';
 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 XVariable from './page-editor.script-block.vue';
 import XBlock from './page-editor.block.vue';
@@ -110,6 +112,7 @@ export default Vue.extend({
 	data() {
 		return {
 			pageId: null,
+			currentName: null,
 			title: '',
 			summary: null,
 			name: Date.now().toString(),
@@ -123,7 +126,7 @@ export default Vue.extend({
 			showOptions: false,
 			moreDetails: false,
 			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.title = page.title;
 				this.name = page.name;
+				this.currentName = page.name;
 				this.summary = page.summary;
 				this.font = page.font;
 				this.alignCenter = page.alignCenter;
@@ -194,6 +198,7 @@ export default Vue.extend({
 					variables: this.variables,
 					eyeCatchingImageId: this.eyeCatchingImageId,
 				}).then(page => {
+					this.currentName = this.name.trim();
 					this.$root.dialog({
 						type: 'success',
 						text: this.$t('page-updated')
@@ -211,6 +216,7 @@ export default Vue.extend({
 					eyeCatchingImageId: this.eyeCatchingImageId,
 				}).then(page => {
 					this.pageId = page.id;
+					this.currentName = this.name.trim();
 					this.$root.dialog({
 						type: 'success',
 						text: this.$t('page-created')
@@ -427,6 +433,10 @@ export default Vue.extend({
 		@media (max-width 500px)
 			padding 0 16px 16px 16px
 
+		> .view
+			display inline-block
+			margin 16px 0 0 0
+
 		> .content
 			margin-bottom 16px