Add cancel button

This commit is contained in:
rijkvanzanten
2020-10-16 13:21:28 -04:00
parent 38440e229b
commit c601b790c7
8 changed files with 25 additions and 8 deletions

View File

@@ -1,10 +1,13 @@
<template>
<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent" placement="right">
<v-dialog v-model="_active" @esc="$emit('cancel')" :persistent="persistent" placement="right">
<template #activator="{ on }">
<slot name="activator" v-bind="{ on }" />
</template>
<article class="v-drawer">
<v-button class="cancel" @click="$emit('cancel')" icon rounded secondary v-tooltip.bottom="$t('cancel')">
<v-icon name="close" />
</v-button>
<!-- <header class="header">
<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
<h2 class="title">{{ title }}</h2>
@@ -96,12 +99,19 @@ body {
@import '@/styles/mixins/breakpoint';
.v-drawer {
position: relative;
display: flex;
flex-direction: column;
max-width: var(--v-drawer-max-width);
height: 100%;
background-color: var(--background-page);
.cancel {
position: absolute;
top: 32px;
left: -76px;
}
.spacer {
flex-grow: 1;
}

View File

@@ -1,5 +1,5 @@
<template>
<v-drawer active title="Activity Item" @toggle="close" @esc="close">
<v-drawer active title="Activity Item" @toggle="close" @cancel="close">
<v-progress-circular indeterminate v-if="loading" />
<template v-else-if="error">

View File

@@ -32,7 +32,7 @@
v-else
:active="true"
@toggle="cancelField"
@esc="cancelField"
@cancel="cancelField"
:title="
field === '+'
? $t('creating_new_field', { collection: collectionInfo.name })

View File

@@ -4,7 +4,7 @@
:active="true"
class="new-collection"
persistent
@esc="$router.push('/settings/data-model')"
@cancel="$router.push('/settings/data-model')"
>
<v-dialog :active="saveError !== null" @toggle="saveError = null" @esc="saveError = null">
<v-card class="selectable">

View File

@@ -1,5 +1,5 @@
<template>
<v-drawer v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
<v-drawer v-model="_active" :title="$t('select_item')" no-padding @cancel="cancel">
<component
:is="`layout-${localLayout}`"
:collection="collection"

View File

@@ -1,5 +1,5 @@
<template>
<v-drawer v-model="_active" :title="title" persistent @esc="cancel">
<v-drawer v-model="_active" :title="title" persistent @cancel="cancel">
<template v-if="junctionField">
<v-form
:loading="loading"

View File

@@ -1,5 +1,12 @@
<template>
<v-drawer v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @esc="_active = false">
<v-drawer
v-model="_active"
class="modal"
:title="$t('editing_image')"
persistent
no-padding
@cancel="_active = false"
>
<template #activator="activatorBinding">
<slot name="activator" v-bind="activatorBinding" />
</template>

View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-drawer v-model="_active" :title="$t('item_revision')" @esc="_active = false">
<v-drawer v-model="_active" :title="$t('item_revision')" @cancel="_active = false">
<template #subtitle>
<revisions-drawer-picker :revisions="revisions" :current.sync="_current" />
</template>