heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Improve usability

Browse source
This commit is contained in:
syuilo 2019-05-03 08:27:46 +09:00
parent 026265cb1e
commit 5553c3fb17
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/client/app/common/views/components/page-editor/page-editor.container.vue
View file

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