github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-25 18:18:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

Rename modal to drawer

Browse Source
This commit is contained in:
rijkvanzanten
2020-10-16 12:14:31 -04:00
parent e8bee549a2
commit 6d76cf6737
49 changed files with 185 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/register.ts
View File

@@ -22,8 +22,8 @@ import VInput from './v-input/';
import VItemGroup, { VItem } from './v-item-group';
import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
import VMenu from './v-menu/';
import VModal from './v-modal/';
import VModalHeading from './v-modal/v-modal-heading.vue';
import VDrawer from './v-drawer/';
import VDrawerHeading from './v-drawer/v-drawer-heading.vue';
import VNotice from './v-notice/';
import VOverlay from './v-overlay/';
import VPagination from './v-pagination/';
@@ -73,8 +73,8 @@ Vue.component('v-list-item-text', VListItemText);
Vue.component('v-list-item', VListItem);
Vue.component('v-list', VList);
Vue.component('v-menu', VMenu);
Vue.component('v-modal', VModal);
Vue.component('v-modal-heading', VModalHeading);
Vue.component('v-drawer', VDrawer);
Vue.component('v-drawer-heading', VDrawerHeading);
Vue.component('v-notice', VNotice);
Vue.component('v-overlay', VOverlay);
Vue.component('v-pagination', VPagination);

34
app/src/components/transition/dialog/transition-dialog.vue
View File

@@ -5,24 +5,24 @@
</template>
<style lang="scss">
/** @NOTE this is not scoped on purpose. The children are outsisde of the tree (portal) */
.dialog-enter-active,
.dialog-leave-active {
transition: opacity var(--slow) var(--transition);
/** @NOTE this is not scoped on purpose. The children are outside of the tree (portal) */
// .dialog-enter-active,
// .dialog-leave-active {
// transition: opacity var(--slow) var(--transition);
& > *:not(.v-overlay) {
transform: translateY(0px);
transition: transform var(--slow) var(--transition-in);
}
}
// & > *:not(.v-overlay) {
// transform: translateY(0px);
// transition: transform var(--slow) var(--transition-in);
// }
// }
.dialog-enter,
.dialog-leave-to {
opacity: 0;
// .dialog-enter,
// .dialog-leave-to {
// opacity: 0;
& > *:not(.v-overlay) {
transform: translateY(50px);
transition: transform var(--slow) var(--transition-out);
}
}
// & > *:not(.v-overlay) {
// transform: translateY(50px);
// transition: transform var(--slow) var(--transition-out);
// }
// }
</style>

19
app/src/components/v-dialog/v-dialog.vue
View File

@@ -3,7 +3,7 @@
<slot name="activator" v-bind="{ on: () => (_active = true) }" />
<portal to="dialog-outlet">
<div v-if="_active" class="container" :class="[className]" :key="id">
<div v-if="_active" class="container" :class="[className, placement]" :key="id">
<v-overlay active absolute @click="emitToggle" />
<slot />
</div>
@@ -30,6 +30,11 @@ export default defineComponent({
type: Boolean,
default: false,
},
placement: {
type: String,
default: 'center',
validator: (val: string) => ['center', 'right'].includes(val),
},
},
setup(props, { emit }) {
const dialog = ref<HTMLElement | null>(null);
@@ -92,12 +97,20 @@ export default defineComponent({
left: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: opacity var(--medium) var(--transition);
&.center {
align-items: center;
justify-content: center;
}
&.right {
align-items: center;
justify-content: flex-end;
}
::v-deep .v-card {
--v-card-min-width: 540px;
--v-card-padding: 20px;

4
app/src/components/v-drawer/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import VDrawer from './v-drawer.vue';
export { VDrawer };
export default VDrawer;

4
app/src/components/v-modal/v-modal-heading.vue → app/src/components/v-drawer/v-drawer-heading.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="v-modal-heading">
<div class="v-drawer-heading">
<div class="type-title">{{ heading }}</div>
<div v-if="subheading" class="subheading">{{ subheading }}</div>
</div>
@@ -23,7 +23,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.v-modal-heading {
.v-drawer-heading {
margin-bottom: 48px;
.subheading {

102
app/src/components/v-modal/v-modal.vue → app/src/components/v-drawer/v-drawer.vue
View File

@@ -1,11 +1,11 @@
<template>
<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent">
<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent" placement="right">
<template #activator="{ on }">
<slot name="activator" v-bind="{ on }" />
</template>
<article class="v-modal" :class="{ 'form-width': formWidth }">
<header class="header">
<article class="v-drawer">
<!-- <header class="header">
<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
<h2 class="title">{{ title }}</h2>
<slot name="subtitle">
@@ -13,7 +13,8 @@
</slot>
<div class="spacer" />
<slot name="header:append" />
</header>
</header> -->
<div class="content" :class="{ 'no-padding': noPadding }">
<v-overlay v-if="$slots.sidebar" absolute :active="sidebarActive" @click="sidebarActive = false" />
<nav
@@ -28,9 +29,6 @@
<slot />
</main>
</div>
<footer class="footer" v-if="$slots.footer || $scopedSlots.footer">
<slot name="footer" v-bind="{ close: () => (_active = false) }" />
</footer>
</article>
</v-dialog>
</template>
@@ -64,12 +62,6 @@ export default defineComponent({
type: Boolean,
default: false,
},
formWidth: {
// If the modal is used to just render a form, it needs to be a little smaller to
// allow the form to be rendered in it's correct full size
type: Boolean,
default: false,
},
},
setup(props, { emit }) {
const sidebarActive = ref(false);
@@ -96,57 +88,54 @@ export default defineComponent({
<style>
body {
--v-modal-max-width: 916px;
--v-drawer-max-width: 856px;
}
</style>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
.v-modal {
.v-drawer {
display: flex;
flex-direction: column;
width: calc(100% - 16px);
max-width: var(--v-modal-max-width);
height: calc(100% - 16px);
max-height: 800px;
max-width: var(--v-drawer-max-width);
height: 100%;
background-color: var(--background-page);
border-radius: 4px;
.spacer {
flex-grow: 1;
}
.header {
display: flex;
flex-shrink: 0;
align-items: center;
height: 60px;
padding: 0 16px;
border-bottom: 2px solid var(--background-normal);
// .header {
// display: flex;
// flex-shrink: 0;
// align-items: center;
// height: 60px;
// padding: 0 16px;
// border-bottom: 2px solid var(--background-normal);
.title {
margin-right: 12px;
font-size: 16px;
}
// .title {
// margin-right: 12px;
// font-size: 16px;
// }
.subtitle {
color: var(--foreground-subdued);
font-size: 16px;
}
// .subtitle {
// color: var(--foreground-subdued);
// font-size: 16px;
// }
.menu-toggle {
margin-right: 8px;
// .menu-toggle {
// margin-right: 8px;
@include breakpoint(medium) {
display: none;
}
}
// @include breakpoint(medium) {
// display: none;
// }
// }
@include breakpoint(medium) {
padding: 0 24px;
}
}
// @include breakpoint(medium) {
// padding: 0 24px;
// }
// }
.content {
position: relative;
@@ -204,31 +193,8 @@ body {
}
}
.footer {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
height: 60px;
padding: 0 16px;
border-top: 2px solid var(--background-normal);
::v-deep > *:not(:last-child) {
margin-right: 8px;
}
@include breakpoint(medium) {
padding: 0 24px;
}
}
@include breakpoint(medium) {
width: calc(100% - 64px);
height: calc(100% - 64px);
}
}
.form-width {
--v-modal-max-width: 856px;
}
</style>

4
app/src/components/v-modal/index.ts
View File

@@ -1,4 +0,0 @@
import VModal from './v-modal.vue';
export { VModal };
export default VModal;

73
app/src/components/v-modal/readme.md
View File

@@ -1,73 +0,0 @@
# Modal
A modal is basically an elaborate pre-configured dialog. It supports an optional left sidebar that allows for easier tab usage.
## Usage
```html
<v-modal title="My Modal" v-modal="active">
Hello, world!
</v-modal>
```
```html
<v-modal title="My Modal">
<template #activator="{ on }">
<v-button @click="on">Open modal</v-button>
</template>
Hello, world!
</v-modal>
```
```html
<v-modal title="My Modal" v-model="active">
<template #activator="{ on }">
<v-button @click="on">Open modal</v-button>
</template>
<template #sidebar>
<v-tabs vertical>
<v-tab>Hello</v-tab>
<v-tab>Page 2</v-tab>
<v-tab>Page 3</v-tab>
</v-tabs>
</template>
<v-tabs-items>
<v-tab-item>Hello, world!</v-tab-item>
<v-tab-item>I'm page 2!</v-tab-item>
<v-tab-item>I'm page 3!</v-tab-item>
</v-tabs-items>
<template #footer="{ close }">
<v-button @click="close">Close modal</v-button>
</template>
</v-modal>
```
## Props
| Prop | Description | Default |
|--------------|-----------------------------------------------------------------|---------|
| `title`* | Title for the modal | |
| `subtitle` | Optional subtitle for the modal | |
| `active` | If the modal is active. Used in `v-model` | `false` |
| `persistent` | Prevent the user from exiting the modal by clicking the overlay | `false` |
## Events
| Event | Description | Value |
|----------|--------------------------|-----------|
| `toggle` | Sync the `v-model` value | `boolean` |
## Slots
| Slot | Description | Data |
|-------------|--------------------------------------------------------|-------------------------|
| _default_ | Modal content | |
| `activator` | Element to enable the modal | `{ on: () => void }` |
| `sidebar` | Sidebar content for the modal. Often used for `v-tabs` | |
| `footer` | Footer content. Often used for action buttons | `{ close: () => void }` |
## CSS Variables
n/a

84
app/src/components/v-modal/v-modal.story.ts
View File

@@ -1,84 +0,0 @@
import withPadding from '../../../.storybook/decorators/with-padding';
import readme from './readme.md';
import { defineComponent, ref } from '@vue/composition-api';
export default {
title: 'Components / Modal',
parameters: {
notes: readme,
},
decorators: [withPadding],
};
export const basic = () =>
defineComponent({
setup() {
const active = ref(false);
return { active };
},
template: `
<div>
<v-modal
v-model="active"
title="Creating New Collection"
subtitle="called Customers"
>
<template #activator="{ on }">
<v-button @click="on">Enable modal</v-button>
</template>
<p>Hello world!</p>
<template #footer="{ close }">
<v-button @click="close">Close modal</v-button>
</template>
</v-modal>
<portal-target name="outlet" />
</div>
`,
});
export const withNav = () =>
defineComponent({
setup() {
const active = ref(false);
const current = ref(['hello']);
return { active, current };
},
template: `
<div>
<v-modal
v-model="active"
title="Creating New Collection"
subtitle="called Customers"
>
<template #activator="{ on }">
<v-button @click="on">Enable modal</v-button>
</template>
<template #sidebar>
<v-tabs v-model="current" vertical>
<v-tab value="hello">Hello</v-tab>
<v-tab value="introduce">Modal</v-tab>
</v-tabs>
</template>
<v-tabs-items v-model="current">
<v-tab-item value="hello">
<p>Hello world!</p>
</v-tab-item>
<v-tab-item value="introduce">
<p>I'm a modal with tabs</p>
</v-tab-item>
</v-tabs-items>
<template #footer="{ close }">
<v-button @click="close">Close modal</v-button>
</template>
</v-modal>
<portal-target name="outlet" />
</div>
`,
});

24
app/src/components/v-modal/v-modal.test.ts
View File

@@ -1,24 +0,0 @@
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI from '@vue/composition-api';
import VModal from './v-modal.vue';
import VDialog from '@/components/v-dialog/';
import VIcon from '@/components/v-icon/';
const localVue = createLocalVue();
localVue.use(VueCompositionAPI);
localVue.component('v-dialog', VDialog);
localVue.component('v-icon', VIcon);
describe('Components / Modal', () => {
it('Renders', () => {
const component = shallowMount(VModal, {
localVue,
propsData: {
title: 'My Modal',
},
});
expect(component.isVueInstance()).toBe(true);
});
});

6
app/src/components/v-upload/v-upload.vue
View File

@@ -52,7 +52,7 @@
</v-list>
</v-menu>
<modal-collection
<drawer-collection
collection="directus_files"
:active="activeDialog === 'choose'"
@update:active="activeDialog = null"
@@ -88,12 +88,12 @@
<script lang="ts">
import { defineComponent, ref, computed, watch } from '@vue/composition-api';
import uploadFiles from '@/utils/upload-files';
import ModalCollection from '@/views/private/components/modal-collection';
import DrawerCollection from '@/views/private/components/drawer-collection';
import api from '@/api';
import useItem from '@/composables/use-item';
export default defineComponent({
components: { ModalCollection },
components: { DrawerCollection },
props: {
multiple: {
type: Boolean,

6
app/src/interfaces/file/file.vue
View File

@@ -79,7 +79,7 @@
</v-card>
</v-dialog>
<modal-collection
<drawer-collection
collection="directus_files"
:active="activeDialog === 'choose'"
@update:active="activeDialog = null"
@@ -112,7 +112,7 @@
<script lang="ts">
import { defineComponent, ref, watch, computed } from '@vue/composition-api';
import ModalCollection from '@/views/private/components/modal-collection';
import DrawerCollection from '@/views/private/components/drawer-collection';
import api from '@/api';
import readableMimeType from '@/utils/readable-mime-type';
import getRootPath from '@/utils/get-root-path';
@@ -124,7 +124,7 @@ type FileInfo = {
};
export default defineComponent({
components: { ModalCollection },
components: { DrawerCollection },
props: {
value: {
type: String,

10
app/src/interfaces/files/files.vue
View File

@@ -34,7 +34,7 @@
</v-button>
</div>
<modal-item
<drawer-item
v-if="!disabled"
:active="editModalActive"
:collection="relationInfo.junctionCollection"
@@ -46,7 +46,7 @@
@update:active="cancelEdit"
/>
<modal-collection
<drawer-collection
v-if="!disabled"
:active.sync="selectModalActive"
:collection="relationInfo.relationCollection"
@@ -71,8 +71,8 @@
<script lang="ts">
import { defineComponent, ref, computed, toRefs, PropType } from '@vue/composition-api';
import { Header as TableHeader } from '@/components/v-table/types';
import ModalCollection from '@/views/private/components/modal-collection';
import ModalItem from '@/views/private/components/modal-item';
import DrawerCollection from '@/views/private/components/drawer-collection';
import DrawerItem from '@/views/private/components/drawer-item';
import { get } from 'lodash';
import i18n from '@/lang';
@@ -83,7 +83,7 @@ import usePreview from '@/interfaces/many-to-many/use-preview';
import useEdit from '@/interfaces/many-to-many/use-edit';
export default defineComponent({
components: { ModalCollection, ModalItem },
components: { DrawerCollection, DrawerItem },
props: {
primaryKey: {
type: [Number, String],

10
app/src/interfaces/many-to-many/many-to-many.vue
View File

@@ -38,7 +38,7 @@
</v-button>
</div>
<modal-item
<drawer-item
v-if="!disabled"
:active="editModalActive"
:collection="relationInfo.junctionCollection"
@@ -50,7 +50,7 @@
@update:active="cancelEdit"
/>
<modal-collection
<drawer-collection
v-if="!disabled"
:active.sync="selectModalActive"
:collection="relationCollection.collection"
@@ -64,8 +64,8 @@
<script lang="ts">
import { defineComponent, ref, computed, watch, PropType, toRefs } from '@vue/composition-api';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
import DrawerItem from '@/views/private/components/drawer-item';
import DrawerCollection from '@/views/private/components/drawer-collection';
import { get } from 'lodash';
import useActions from './use-actions';
@@ -75,7 +75,7 @@ import useEdit from './use-edit';
import useSelection from './use-selection';
export default defineComponent({
components: { ModalItem, ModalCollection },
components: { DrawerItem, DrawerCollection },
props: {
value: {
type: Array as PropType<(number | string | Record<string, any>)[] | null>,

10
app/src/interfaces/many-to-one/many-to-one.vue
View File

@@ -82,7 +82,7 @@
</v-list>
</v-menu>
<modal-item
<drawer-item
v-if="!disabled"
:active.sync="editModalActive"
:collection="relatedCollection.collection"
@@ -91,7 +91,7 @@
@input="stageEdits"
/>
<modal-collection
<drawer-collection
v-if="!disabled"
:active.sync="selectModalActive"
:collection="relatedCollection.collection"
@@ -107,8 +107,8 @@ import { useCollectionsStore, useRelationsStore } from '@/stores/';
import useCollection from '@/composables/use-collection';
import getFieldsFromTemplate from '@/utils/get-fields-from-template';
import api from '@/api';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
import DrawerItem from '@/views/private/components/drawer-item';
import DrawerCollection from '@/views/private/components/drawer-collection';
/**
* @NOTE
@@ -119,7 +119,7 @@ import ModalCollection from '@/views/private/components/modal-collection';
*/
export default defineComponent({
components: { ModalItem, ModalCollection },
components: { DrawerItem, DrawerCollection },
props: {
value: {
type: [Number, String, Object],

10
app/src/interfaces/one-to-many/one-to-many.vue
View File

@@ -38,7 +38,7 @@
</v-button>
</div>
<modal-item
<drawer-item
v-if="!disabled"
:active="currentlyEditing !== null"
:collection="relatedCollection.collection"
@@ -48,7 +48,7 @@
@update:active="cancelEdit"
/>
<modal-collection
<drawer-collection
v-if="!disabled"
:active.sync="selectModalActive"
:collection="relatedCollection.collection"
@@ -65,14 +65,14 @@ import { defineComponent, ref, computed, watch, PropType } from '@vue/compositio
import api from '@/api';
import useCollection from '@/composables/use-collection';
import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
import DrawerItem from '@/views/private/components/drawer-item';
import DrawerCollection from '@/views/private/components/drawer-collection';
import { Filter, Field } from '@/types';
import { Header } from '@/components/v-table/types';
import { isEqual } from 'lodash';
export default defineComponent({
components: { ModalItem, ModalCollection },
components: { DrawerItem, DrawerCollection },
props: {
value: {
type: Array as PropType<(number | string | Record<string, any>)[] | null>,

10
app/src/interfaces/user/user.vue
View File

@@ -72,7 +72,7 @@
</v-list>
</v-menu>
<modal-item
<drawer-item
:active.sync="editModalActive"
collection="directus_users"
:primary-key="currentPrimaryKey"
@@ -81,7 +81,7 @@
v-if="!disabled"
/>
<modal-collection
<drawer-collection
:active.sync="selectModalActive"
collection="directus_users"
:selection="selection"
@@ -95,11 +95,11 @@
import { defineComponent, computed, ref, watch, PropType } from '@vue/composition-api';
import useCollection from '@/composables/use-collection';
import api from '@/api';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
import DrawerItem from '@/views/private/components/drawer-item';
import DrawerCollection from '@/views/private/components/drawer-collection';
export default defineComponent({
components: { ModalItem, ModalCollection },
components: { DrawerItem, DrawerCollection },
props: {
value: {
type: String,

4
app/src/modules/activity/routes/item.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-modal active title="Activity Item" @toggle="close" @esc="close">
<v-drawer active title="Activity Item" @toggle="close" @esc="close">
<v-progress-circular indeterminate v-if="loading" />
<template v-else-if="error">
@@ -42,7 +42,7 @@
<v-button to="/activity">{{ $t('done') }}</v-button>
</template>
</v-modal>
</v-drawer>
</template>
<script lang="ts">

14
app/src/modules/collections/routes/item.vue
View File

@@ -180,7 +180,7 @@
<sidebar-detail icon="info_outline" :title="$t('information')" close>
<div class="page-description" v-html="marked($t('page_help_collections_item'))" />
</sidebar-detail>
<revisions-sidebar-detail
<revisions-drawer-detail
v-if="
collectionInfo.meta &&
collectionInfo.meta.singleton === false &&
@@ -189,7 +189,7 @@
"
:collection="collection"
:primary-key="primaryKey"
ref="revisionsSidebarDetail"
ref="revisionsDrawerDetail"
@revert="refresh"
/>
<comments-sidebar-detail
@@ -214,7 +214,7 @@ import CollectionsNavigation from '../components/navigation.vue';
import router from '@/router';
import CollectionsNotFound from './not-found.vue';
import useCollection from '@/composables/use-collection';
import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
@@ -235,7 +235,7 @@ export default defineComponent({
components: {
CollectionsNavigation,
CollectionsNotFound,
RevisionsSidebarDetail,
RevisionsDrawerDetail,
CommentsSidebarDetail,
SaveOptions,
},
@@ -260,7 +260,7 @@ export default defineComponent({
const { collection, primaryKey } = toRefs(props);
const { breadcrumb } = useBreadcrumb();
const revisionsSidebarDetail = ref<Vue | null>(null);
const revisionsDrawerDetail = ref<Vue | null>(null);
const { info: collectionInfo, primaryKeyField } = useCollection(collection);
@@ -355,7 +355,7 @@ export default defineComponent({
archiveTooltip,
breadcrumb,
title,
revisionsSidebarDetail,
revisionsDrawerDetail,
marked,
refresh,
confirmLeave,
@@ -395,7 +395,7 @@ export default defineComponent({
const savedItem: Record<string, any> = await save();
revisionsSidebarDetail.value?.$data?.refresh?.();
revisionsDrawerDetail.value?.$data?.refresh?.();
if (props.primaryKey === '+') {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion

14
app/src/modules/files/routes/item.vue
View File

@@ -157,11 +157,11 @@
<template #sidebar>
<file-info-sidebar-detail :file="item" @move-folder="moveToDialogActive = true" />
<revisions-sidebar-detail
<revisions-drawer-detail
v-if="isBatch === false && isNew === false"
collection="directus_files"
:primary-key="primaryKey"
ref="revisionsSidebarDetail"
ref="revisionsDrawerDetail"
/>
<comments-sidebar-detail
v-if="isBatch === false && isNew === false"
@@ -177,7 +177,7 @@ import { defineComponent, computed, toRefs, ref, watch } from '@vue/composition-
import FilesNavigation from '../components/navigation.vue';
import { i18n } from '@/lang';
import router from '@/router';
import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
@@ -215,7 +215,7 @@ export default defineComponent({
},
components: {
FilesNavigation,
RevisionsSidebarDetail,
RevisionsDrawerDetail,
CommentsSidebarDetail,
SaveOptions,
FilePreview,
@@ -237,7 +237,7 @@ export default defineComponent({
const { breadcrumb } = useBreadcrumb();
const fieldsStore = useFieldsStore();
const revisionsSidebarDetail = ref<Vue | null>(null);
const revisionsDrawerDetail = ref<Vue | null>(null);
const {
isNew,
@@ -322,7 +322,7 @@ export default defineComponent({
cacheBuster,
editActive,
previewActive,
revisionsSidebarDetail,
revisionsDrawerDetail,
formFields,
confirmLeave,
leaveTo,
@@ -375,7 +375,7 @@ export default defineComponent({
async function saveAndStay() {
await save();
revisionsSidebarDetail.value?.$data?.refresh?.();
revisionsDrawerDetail.value?.$data?.refresh?.();
}
async function saveAsCopyAndNavigate() {

4
app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
View File

@@ -28,7 +28,7 @@
</v-card>
</v-dialog>
<v-modal
<v-drawer
v-else
:active="true"
@toggle="cancelField"
@@ -98,7 +98,7 @@
@cancel="cancelField"
/>
</template>
</v-modal>
</v-drawer>
</template>
<script lang="ts">

4
app/src/modules/settings/routes/data-model/new-collection.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-modal
<v-drawer
:title="$t('creating_new_collection')"
:active="true"
class="new-collection"
@@ -122,7 +122,7 @@
{{ $t('finish_setup') }}
</v-button>
</template>
</v-modal>
</v-drawer>
</template>
<script lang="ts">

6
app/src/modules/settings/routes/roles/item/item.vue
View File

@@ -73,7 +73,7 @@
<template #sidebar>
<role-info-sidebar-detail :role="item" />
<revisions-sidebar-detail collection="directus_roles" :primary-key="primaryKey" />
<revisions-drawer-detail collection="directus_roles" :primary-key="primaryKey" />
</template>
</private-view>
</template>
@@ -83,7 +83,7 @@ import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
import SettingsNavigation from '../../../components/navigation.vue';
import router from '@/router';
import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import useItem from '@/composables/use-item';
import { useUserStore } from '@/stores/';
import RoleInfoSidebarDetail from './components/role-info-sidebar-detail.vue';
@@ -95,7 +95,7 @@ type Values = {
export default defineComponent({
name: 'roles-item',
components: { SettingsNavigation, RevisionsSidebarDetail, RoleInfoSidebarDetail, PermissionsOverview },
components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoSidebarDetail, PermissionsOverview },
props: {
primaryKey: {
type: String,

2
app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-modal-heading
<v-drawer-heading
:heading="
$t('fields_for_role', {
role: role ? role.name : $t('public'),

2
app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-modal-heading
<v-drawer-heading
:heading="
$t('permissions_for_role', {
action: $t(permission.action).toLowerCase(),

2
app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-modal-heading
<v-drawer-heading
:heading="
$t('presets_for_role', {
action: $t(permission.action).toLowerCase(),

2
app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-modal-heading
<v-drawer-heading
:heading="
$t('validation_for_role', {
action: $t(permission.action).toLowerCase(),

4
app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-modal :title="modalTitle" :active="true" class="new-collection" persistent>
<v-drawer :title="modalTitle" :active="true" class="new-collection" persistent>
<template #sidebar v-if="!loading">
<tabs :current-tab.sync="currentTab" :tabs="tabs" />
</template>
@@ -14,7 +14,7 @@
<template #footer v-if="!loading">
<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
</template>
</v-modal>
</v-drawer>
</template>
<script lang="ts">

6
app/src/modules/settings/routes/webhooks/item.vue
View File

@@ -62,7 +62,7 @@
<sidebar-detail icon="info_outline" :title="$t('information')" close>
<div class="page-description" v-html="marked($t('page_help_settings_webhooks_item'))" />
</sidebar-detail>
<revisions-sidebar-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
<revisions-drawer-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
</template>
</private-view>
</template>
@@ -72,7 +72,7 @@ import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
import SettingsNavigation from '../../components/navigation.vue';
import router from '@/router';
import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import marked from 'marked';
@@ -84,7 +84,7 @@ type Values = {
export default defineComponent({
name: 'webhooks-item',
components: { SettingsNavigation, RevisionsSidebarDetail, SaveOptions },
components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions },
props: {
primaryKey: {
type: String,

14
app/src/modules/users/routes/item.vue
View File

@@ -145,11 +145,11 @@
<template #sidebar>
<user-info-sidebar-detail :is-new="isNew" :user="item" />
<revisions-sidebar-detail
<revisions-drawer-detail
v-if="isBatch === false && isNew === false"
collection="directus_users"
:primary-key="primaryKey"
ref="revisionsSidebarDetail"
ref="revisionsDrawerDetail"
/>
<comments-sidebar-detail
v-if="isBatch === false && isNew === false"
@@ -166,7 +166,7 @@ import { defineComponent, computed, toRefs, ref, watch } from '@vue/composition-
import UsersNavigation from '../components/navigation.vue';
import { i18n } from '@/lang';
import router from '@/router';
import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
@@ -198,7 +198,7 @@ export default defineComponent({
return next();
},
components: { UsersNavigation, RevisionsSidebarDetail, SaveOptions, CommentsSidebarDetail, UserInfoSidebarDetail },
components: { UsersNavigation, RevisionsDrawerDetail, SaveOptions, CommentsSidebarDetail, UserInfoSidebarDetail },
props: {
primaryKey: {
type: String,
@@ -219,7 +219,7 @@ export default defineComponent({
const { info: collectionInfo } = useCollection(ref('directus_users'));
const revisionsSidebarDetail = ref<Vue | null>(null);
const revisionsDrawerDetail = ref<Vue | null>(null);
const {
isNew,
@@ -315,7 +315,7 @@ export default defineComponent({
saveAndAddNew,
saveAsCopyAndNavigate,
isBatch,
revisionsSidebarDetail,
revisionsDrawerDetail,
previewLoading,
avatarSrc,
roleName,
@@ -356,7 +356,7 @@ export default defineComponent({
async function saveAndStay() {
const savedItem: Record<string, any> = await save();
revisionsSidebarDetail.value?.$data?.refresh?.();
revisionsDrawerDetail.value?.$data?.refresh?.();
if (props.primaryKey === '+') {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion

4
app/src/views/private/components/modal-collection/modal-collection.vue → app/src/views/private/components/drawer-collection/drawer-collection.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-modal v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
<v-drawer v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
<component
:is="`layout-${localLayout}`"
:collection="collection"
@@ -24,7 +24,7 @@
<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
<v-button @click="save">{{ $t('save') }}</v-button>
</template>
</v-modal>
</v-drawer>
</template>
<script lang="ts">

4
app/src/views/private/components/drawer-collection/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import DrawerCollection from './drawer-collection.vue';
export { DrawerCollection };
export default DrawerCollection;

4
app/src/views/private/components/modal-item/modal-item.vue → app/src/views/private/components/drawer-item/drawer-item.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-modal v-model="_active" :title="title" persistent form-width @esc="cancel">
<v-drawer v-model="_active" :title="title" persistent @esc="cancel">
<template v-if="junctionField">
<v-form
:loading="loading"
@@ -25,7 +25,7 @@
<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
<v-button @click="save">{{ $t('save') }}</v-button>
</template>
</v-modal>
</v-drawer>
</template>
<script lang="ts">

4
app/src/views/private/components/drawer-item/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import DrawerItem from './drawer-item.vue';
export { DrawerItem };
export default DrawerItem;

8
app/src/views/private/components/image-editor/image-editor.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-modal 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 @esc="_active = false">
<template #activator="activatorBinding">
<slot name="activator" v-bind="activatorBinding" />
</template>
@@ -110,7 +110,7 @@
<v-button @click="close" secondary>{{ $t('cancel') }}</v-button>
<v-button @click="save" :loading="saving">{{ $t('save') }}</v-button>
</template>
</v-modal>
</v-drawer>
</template>
<script lang="ts">
@@ -425,8 +425,8 @@ export default defineComponent({
<style lang="scss" scoped>
.modal {
--v-modal-content-padding-small: 0px;
--v-modal-content-padding: 0px;
--v-drawer-content-padding-small: 0px;
--v-drawer-content-padding: 0px;
}
.editor-container {

4
app/src/views/private/components/modal-collection/index.ts
View File

@@ -1,4 +0,0 @@
import ModalCollection from './modal-collection.vue';
export { ModalCollection };
export default ModalCollection;

4
app/src/views/private/components/modal-item/index.ts
View File

@@ -1,4 +0,0 @@
import ModalItem from './modal-item.vue';
export { ModalItem };
export default ModalItem;

4
app/src/views/private/components/revisions-drawer-detail/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import RevisionsDrawerDetail from './revisions-drawer-detail.vue';
export { RevisionsDrawerDetail };
export default RevisionsDrawerDetail;

0
app/src/views/private/components/revisions-sidebar-detail/readme.md → app/src/views/private/components/revisions-drawer-detail/readme.md
View File

0
app/src/views/private/components/revisions-sidebar-detail/revision-item.vue → app/src/views/private/components/revisions-drawer-detail/revision-item.vue
View File

6
app/src/views/private/components/revisions-sidebar-detail/revisions-sidebar-detail.vue → app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
View File

@@ -26,7 +26,7 @@
</div>
</template>
<revisions-modal
<revisions-drawer
v-if="revisions"
:revisions="revisions"
:current.sync="modalCurrentRevision"
@@ -47,10 +47,10 @@ import { TranslateResult } from 'vue-i18n';
import i18n from '@/lang';
import formatLocalized from '@/utils/localized-format';
import RevisionItem from './revision-item.vue';
import RevisionsModal from './revisions-modal.vue';
import RevisionsDrawer from './revisions-drawer.vue';
export default defineComponent({
components: { RevisionItem, RevisionsModal },
components: { RevisionItem, RevisionsDrawer },
props: {
collection: {
type: String,

0
app/src/views/private/components/revisions-sidebar-detail/revisions-modal-picker.vue → app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
View File

2
app/src/views/private/components/revisions-sidebar-detail/revisions-modal-preview.vue → app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-modal-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
<v-drawer-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
<v-form
disabled
:collection="revision.collection"

0
app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates-change.vue → app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
View File

10
app/src/views/private/components/revisions-sidebar-detail/revisions-modal-updates.vue → app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="updates">
<v-modal-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
<v-drawer-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
<div class="change" v-for="change in changes" :key="change.name">
<div class="type-label">{{ change.name }}</div>
<revisions-modal-updates-change deleted :changes="change.changes" />
<revisions-modal-updates-change added :changes="change.changes" />
<revisions-drawer-updates-change deleted :changes="change.changes" />
<revisions-drawer-updates-change added :changes="change.changes" />
</div>
</div>
</template>
@@ -15,10 +15,10 @@ import { defineComponent, PropType, computed } from '@vue/composition-api';
import { Revision } from './types';
import { useFieldsStore } from '@/stores';
import { diffWordsWithSpace, diffJson, diffArrays } from 'diff';
import RevisionsModalUpdatesChange from './revisions-modal-updates-change.vue';
import RevisionsDrawerUpdatesChange from './revisions-drawer-updates-change.vue';
export default defineComponent({
components: { RevisionsModalUpdatesChange },
components: { RevisionsDrawerUpdatesChange },
props: {
revision: {
type: Object as PropType<Revision>,

18
app/src/views/private/components/revisions-sidebar-detail/revisions-modal.vue → app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
View File

@@ -1,8 +1,8 @@
<template>
<div>
<v-modal v-model="_active" :title="$t('item_revision')" @esc="_active = false">
<v-drawer v-model="_active" :title="$t('item_revision')" @esc="_active = false">
<template #subtitle>
<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
<revisions-drawer-picker :revisions="revisions" :current.sync="_current" />
</template>
<template #sidebar>
@@ -14,8 +14,8 @@
</template>
<div class="content">
<revisions-modal-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
<revisions-modal-updates
<revisions-drawer-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
<revisions-drawer-updates
v-if="currentTab[0] === 'updates'"
:revision="currentRevision"
:revisions="revisions"
@@ -28,7 +28,7 @@
</v-button>
<v-button @click="close">{{ $t('done') }}</v-button>
</template>
</v-modal>
</v-drawer>
<v-dialog v-model="confirmRevert" :persistent="reverting" @esc="confirmRevert = false">
<v-card>
@@ -52,13 +52,13 @@ import { defineComponent, PropType, computed, ref } from '@vue/composition-api';
import useSync from '@/composables/use-sync';
import { Revision } from './types';
import i18n from '@/lang';
import RevisionsModalPicker from './revisions-modal-picker.vue';
import RevisionsModalPreview from './revisions-modal-preview.vue';
import RevisionsModalUpdates from './revisions-modal-updates.vue';
import RevisionsDrawerPicker from './revisions-drawer-picker.vue';
import RevisionsDrawerPreview from './revisions-drawer-preview.vue';
import RevisionsDrawerUpdates from './revisions-drawer-updates.vue';
import api from '@/api';
export default defineComponent({
components: { RevisionsModalPicker, RevisionsModalPreview, RevisionsModalUpdates },
components: { RevisionsDrawerPicker, RevisionsDrawerPreview, RevisionsDrawerUpdates },
props: {
revisions: {
type: Array as PropType<Revision[]>,

0
app/src/views/private/components/revisions-sidebar-detail/types.ts → app/src/views/private/components/revisions-drawer-detail/types.ts
View File

4
app/src/views/private/components/revisions-sidebar-detail/index.ts
View File

@@ -1,4 +0,0 @@
import RevisionsSidebarDetail from './revisions-sidebar-detail.vue';
export { RevisionsSidebarDetail };
export default RevisionsSidebarDetail;

0
app/src/views/private/components/revisions-sidebar-detail/revisions-modal-current.vue
View File