Improve usability

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

View file

@ -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