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 {