From 5553c3fb179b32550fb5e202b009c58fbb4ad8ac Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 3 May 2019 08:27:46 +0900
Subject: [PATCH] Improve usability

---
 .../page-editor/page-editor.container.vue         | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/client/app/common/views/components/page-editor/page-editor.container.vue b/src/client/app/common/views/components/page-editor/page-editor.container.vue
index 4127cd39e0..a3a501afb4 100644
--- a/src/client/app/common/views/components/page-editor/page-editor.container.vue
+++ b/src/client/app/common/views/components/page-editor/page-editor.container.vue
@@ -1,12 +1,15 @@
 <template>
-<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null, draggable }">
-	<header class="drag-handle">
+<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
+	<header>
 		<div class="title"><slot name="header"></slot></div>
 		<div class="buttons">
 			<slot name="func"></slot>
 			<button v-if="removable" @click="remove()">
 				<fa :icon="faTrashAlt"/>
 			</button>
+			<button v-if="draggable" class="drag-handle">
+				<fa :icon="faBars"/>
+			</button>
 			<button @click="toggleContent(!showBody)">
 				<template v-if="showBody"><fa icon="angle-up"/></template>
 				<template v-else><fa icon="angle-down"/></template>
@@ -23,6 +26,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import i18n from '../../../../i18n';
 
@@ -54,7 +58,7 @@ export default Vue.extend({
 	data() {
 		return {
 			showBody: this.expanded,
-			faTrashAlt
+			faTrashAlt, faBars
 		};
 	},
 	methods: {
@@ -124,9 +128,8 @@ export default Vue.extend({
 				&:active
 					color var(--faceTextButtonActive)
 
-	&.draggable
-		> header
-			cursor move
+			.drag-handle
+				cursor move
 
 	> .warn
 		color #b19e49