Combine layout options (#563)

* icon width

* updated pagination style

* file preview zoom

WIP — shouldn’t show up on MODAL preview

* overlay/modal close button styling

* duplicate key

* bookmark styling

* card fade

also adds an rgb value for the page background variable

* style per page dropdown

* cards per page dropdown color

* inset non-dense notifications within sidebar

* reduce border radius for xs avatars

* hide non-expanded prepend/append

* reduce sidebar padding

this gives content a bit more room

* WIP: split and update comments and revisions

work in progress

* fix collections module name

* fix file library title

* consistent border on disabled

* fix title/breadcrumb positioning

* breadcrumb fixes

* add “open” button to image interface

WIP — this needs the actual logic, and we might want to remove a button

* hide presets delete until selection

* image shadow and subtext color

* Remove breadcrumb calculation

* increase contrast for image subtitle

* fix textarea hover style

* Update src/modules/collections/index.ts

* Fix typing of translateresult to format

* Add undefined check to collection name

* Put v-if on dialog instead of button

* Remove breadcrumb logic

* Remove breadcrumb calculation

* Rename shadow to collapsed in header bar

* fix rating star display going over table header

* show collection breadcrumb for bookmarks

WIP — needs the formatted collection title

* shorter error to avoid wrapping

* remove periods

* new grid layout icon

* better inline divier text styling

* add v-detail and update layouts to use it

* Finish readme of detail

* Use translations for default value in title

* Add layout options translation

* Don't have margin on base component

* Add margin to v-detail

* Remove duplicated style

* Update src/layouts/cards/cards.vue

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

src/components/register.ts

@@ -7,6 +7,7 @@ import VBreadcrumb from './v-breadcrumb';
 import VCard, { VCardActions, VCardTitle, VCardSubtitle, VCardText } from './v-card';
 import VCheckbox from './v-checkbox/';
 import VChip from './v-chip/';
+import VDetail from './v-detail';
 import VDialog from './v-dialog';
 import VDivider from './v-divider';
 import VFancySelect from './v-fancy-select';
@@ -54,6 +55,7 @@ Vue.component('v-card-text', VCardText);
 Vue.component('v-card-actions', VCardActions);
 Vue.component('v-checkbox', VCheckbox);
 Vue.component('v-chip', VChip);
+Vue.component('v-detail', VDetail);
 Vue.component('v-dialog', VDialog);
 Vue.component('v-divider', VDivider);
 Vue.component('v-fancy-select', VFancySelect);

src/components/v-detail/index.ts

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

src/components/v-detail/readme.md

@@ -0,0 +1,30 @@
+# Detail
+
+Allows for collapsable content
+
+## Usage
+
+```html
+<v-detail />
+```
+
+## Props
+
+| Prop     | Description         | Default |
+|----------|---------------------|---------|
+| `active` | Used with `v-model` | `false` |
+
+## Events
+| Event    | Description                 | Value     |
+|----------|-----------------------------|-----------|
+| `toggle` | New active value of divider | `boolean` |
+
+## Slots
+
+| Slot      | Description                   | Data                  |
+|-----------|-------------------------------|-----------------------|
+| _default_ | Content of the detail section |                       |
+| `title`   | Content to render in divider  | `{ active: boolean }` |
+
+## CSS Variables
+n/a

src/components/v-detail/v-detail.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="v-detail" :class="{ _active }">
+		<v-divider @click.native="_active = !_active">
+			<slot name="title">{{ $t('toggle') }}</slot>
+			<v-icon name="unfold_more" small />
+		</v-divider>
+		<transition-expand>
+			<div v-if="_active">
+				<slot />
+			</div>
+		</transition-expand>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref } from '@vue/composition-api';
+
+export default defineComponent({
+	model: {
+		prop: 'active',
+		event: 'toggle',
+	},
+
+	props: {
+		active: {
+			type: Boolean,
+			default: undefined,
+		},
+	},
+
+	setup(props, { emit }) {
+		const localActive = ref(false);
+		const _active = computed({
+			get() {
+				if (props.active !== undefined) {
+					return props.active;
+				}
+				return localActive.value;
+			},
+			set(newActive: boolean) {
+				localActive.value = newActive;
+				emit('toggle', newActive);
+			},
+		});
+
+		return { _active };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-divider {
+	margin-bottom: 12px;
+	cursor: pointer;
+
+	&:hover {
+		--v-divider-label-color: var(--foreground-normal);
+	}
+}
+
+.v-icon {
+	margin-left: 4px;
+}
+</style>

src/components/v-divider/v-divider.vue

@@ -73,6 +73,9 @@ body {
 
 		span.wrapper {
 			order: 0;
+			margin-right: 8px;
+			font-weight: 600;
+			font-size: 14px;
 		}
 
 		hr {

src/lang/en-US/index.json

@@ -108,10 +108,9 @@
 
 	"date-fns_datetime": "PPP h:mma",
 	"date-fns_date": "PPP",
+	"date-fns_time": "h:mma",
 	"date-fns_date_short": "MMM d, u",
 	"date-fns_date_short_no_year": "MMM d",
-	"date-fns_time": "h:mma",
-
 	"month": "Month",
 	"date": "Date",
 	"year": "Year",
@@ -371,7 +370,8 @@
 	"upload_pending": "Upload Pending",
 	"drag_file_here": "Drag & Drop a File Here",
 	"click_to_browse": "Click to Browse",
-	"layout_type": "Layout Type",
+	"layout_type": "{layout} Layout",
+	"layout_options": "Layout Options",
 	"setup": "Setup",
 
 	"none": "None",
@@ -518,6 +518,7 @@
 
 	"editing_preset": "Editing Preset",
 	"layout_preview": "Layout Preview",
+	"layout_setup": "Layout Setup",
 
   "about_directus": "About Directus",
   "activity_log": "Activity Log",

src/layouts/cards/cards.vue

@@ -1,22 +1,32 @@
 <template>
 	<div class="layout-cards" :style="{ '--size': size * 40 + 'px' }" ref="layoutElement">
-		<portal to="drawer">
-			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+		<portal to="layout-options">
+			<div class="layout-option">
+				<div class="option-label">{{ $t('layouts.cards.image_source') }}</div>
+				<v-select
+					v-model="imageSource"
+					allow-null
+					item-value="field"
+					item-text="name"
+					:items="fileFields"
+				/>
+			</div>
 
-			<drawer-detail icon="settings" :title="$t('setup')">
-				<div class="setting">
-					<div class="label type-text">{{ $t('layouts.cards.image_source') }}</div>
-					<v-select
-						v-model="imageSource"
-						allow-null
-						item-value="field"
-						item-text="name"
-						:items="fileFields"
-					/>
-				</div>
+			<div class="layout-option">
+				<div class="option-label">{{ $t('layouts.cards.title') }}</div>
+				<v-input v-model="title" />
+			</div>
 
-				<div class="setting">
-					<div class="label type-text">{{ $t('layouts.cards.image_fit') }}</div>
+			<div class="layout-option">
+				<div class="option-label">{{ $t('layouts.cards.subtitle') }}</div>
+				<v-input v-model="subtitle" />
+			</div>
+
+			<v-detail>
+				<template #title>{{ $t('layout_setup') }}</template>
+
+				<div class="layout-option">
+					<div class="option-label">{{ $t('layouts.cards.image_fit') }}</div>
 					<v-select
 						v-model="imageFit"
 						:disabled="imageSource === null"
@@ -33,21 +43,15 @@
 					/>
 				</div>
 
-				<div class="setting">
-					<div class="label type-text">{{ $t('layouts.cards.title') }}</div>
-					<v-input v-model="title" />
-				</div>
-
-				<div class="setting">
-					<div class="label type-text">{{ $t('layouts.cards.subtitle') }}</div>
-					<v-input v-model="subtitle" />
-				</div>
-
-				<div class="setting">
-					<div class="label type-text">{{ $t('layouts.cards.fallback_icon') }}</div>
+				<div class="layout-option">
+					<div class="option-label">{{ $t('layouts.cards.fallback_icon') }}</div>
 					<v-input v-model="icon" />
 				</div>
-			</drawer-detail>
+			</v-detail>
+		</portal>
+
+		<portal to="drawer">
+			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
 		</portal>
 
 		<portal to="actions:prepend">
@@ -438,14 +442,6 @@ export default defineComponent({
 	margin: 20vh 0;
 }
 
-.label {
-	margin-bottom: 4px;
-}
-
-.setting {
-	margin-bottom: 12px;
-}
-
 .footer {
 	display: flex;
 	align-items: center;

src/layouts/cards/index.ts

@@ -4,6 +4,6 @@ import CardsLayout from './cards.vue';
 export default defineLayout(({ i18n }) => ({
 	id: 'cards',
 	name: i18n.t('layouts.cards.cards'),
-	icon: 'view_module',
+	icon: 'grid_4',
 	component: CardsLayout,
 }));

src/layouts/tabular/tabular.vue

@@ -1,9 +1,29 @@
 <template>
 	<div class="layout-tabular">
-		<portal to="drawer">
-			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+		<portal to="layout-options">
+			<div class="layout-option">
+				<div class="option-label">{{ $t('layouts.tabular.spacing') }}</div>
+				<v-select
+					v-model="tableSpacing"
+					:items="[
+						{
+							text: $t('layouts.tabular.compact'),
+							value: 'compact',
+						},
+						{
+							text: $t('layouts.tabular.cozy'),
+							value: 'cozy',
+						},
+						{
+							text: $t('layouts.tabular.comfortable'),
+							value: 'comfortable',
+						},
+					]"
+				/>
+			</div>
 
-			<drawer-detail icon="menu_open" :title="$t('layouts.tabular.fields')">
+			<div class="layout-option">
+				<div class="option-label">{{ $t('layouts.tabular.fields') }}</div>
 				<draggable v-model="activeFields" handle=".drag-handle">
 					<v-checkbox
 						v-for="field in activeFields"
@@ -28,27 +48,11 @@
 					:value="field.field"
 					:label="field.name"
 				/>
-			</drawer-detail>
+			</div>
+		</portal>
 
-			<drawer-detail icon="format_line_spacing" :title="$t('layouts.tabular.spacing')">
-				<v-select
-					v-model="tableSpacing"
-					:items="[
-						{
-							text: $t('layouts.tabular.compact'),
-							value: 'compact',
-						},
-						{
-							text: $t('layouts.tabular.cozy'),
-							value: 'cozy',
-						},
-						{
-							text: $t('layouts.tabular.comfortable'),
-							value: 'comfortable',
-						},
-					]"
-				/>
-			</drawer-detail>
+		<portal to="drawer">
+			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
 		</portal>
 
 		<portal to="actions:prepend">

src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue

@@ -1,6 +1,8 @@
 <template>
-	<drawer-detail :icon="currentLayout.icon" :title="$t('layout_type')">
+	<drawer-detail icon="layers" :title="$t('layout_options')">
+		<div class="option-label">{{ $t('layout') }}</div>
 		<v-select :items="layouts" item-text="name" item-value="id" v-model="viewType" />
+		<portal-target name="layout-options" class="layout-options" />
 	</drawer-detail>
 </template>
 
@@ -39,3 +41,30 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss">
+.layout-options {
+	.layout-option {
+		margin-top: 24px;
+
+		&:last-of-type {
+			margin-bottom: 12px;
+		}
+	}
+
+	> .layout-option:first-of-type {
+		padding-top: 20px;
+		border-top: 2px solid var(--border-normal);
+	}
+}
+
+.option-label {
+	margin-bottom: 4px;
+	font-weight: 600;
+}
+
+.v-detail {
+	margin-top: 24px;
+	margin-bottom: 12px;
+}
+</style>