Cleanup image editor

app/src/components/v-drawer/v-drawer.vue

@@ -20,7 +20,7 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
-					<header-bar :title="title">
+					<header-bar ref="headerBarEl" :title="title">
 						<template #headline>
 							<slot name="subtitle">
 								<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
@@ -33,6 +33,7 @@
 							</v-button>
 						</template>
 
+						<template #actions:prepend><slot name="actions:prepend" /></template>
 						<template #actions><slot name="actions" /></template>
 
 						<template #title:append><slot name="header:append" /></template>
@@ -50,6 +51,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, provide } from '@vue/composition-api';
 import HeaderBar from '@/views/private/components/header-bar/header-bar.vue';
+import useElementSize from '@/composables/use-element-size';
 
 export default defineComponent({
 	components: {
@@ -89,6 +91,7 @@ export default defineComponent({
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 
+		const headerBarEl = ref<Vue>();
 		const mainEl = ref<Element>();
 
 		provide('main-element', mainEl);
@@ -103,7 +106,9 @@ export default defineComponent({
 			},
 		});
 
-		return { sidebarActive, _active, mainEl };
+		const { height } = useElementSize(mainEl);
+
+		return { sidebarActive, _active, mainEl, headerBarEl, headerHeight: height };
 	},
 });
 </script>
@@ -189,10 +194,17 @@ body {
 		}
 
 		.padding-box {
+			--content-padding: 16px;
+			--content-padding-bottom: 32px;
+
+			height: 1px; // allow height: 100% children
+			min-height: calc(100% - (65px + 24px + 24px)); // header height + 2x margin
 			padding: 16px 16px 32px;
 			padding-top: 0;
 
 			@include breakpoint(medium) {
+				--content-padding: 32px;
+
 				padding: 32px;
 				padding-top: 0;
 			}

app/src/composables/use-element-size/use-element-size.ts

@@ -1,6 +1,7 @@
 import { Ref, ref, isRef, onMounted, onUnmounted } from '@vue/composition-api';
 import { notEmpty } from '@/utils/is-empty';
 import { ResizeObserver as ResizeObserverPolyfill } from 'resize-observer';
+import Vue from 'vue';
 
 declare global {
 	interface Window {
@@ -8,7 +9,7 @@ declare global {
 	}
 }
 
-export default function useElementSize<T extends Element>(target: T | Ref<T> | Ref<null>) {
+export default function useElementSize<T extends Element>(target: T | Ref<undefined | null | T | Vue>) {
 	const width = ref(0);
 	const height = ref(0);
 
@@ -24,10 +25,19 @@ export default function useElementSize<T extends Element>(target: T | Ref<T> | R
 	});
 
 	onMounted(() => {
-		const t = isRef(target) ? target.value : target;
+		const deref = isRef(target) ? target.value : target;
+		console.log(deref);
 
-		if (notEmpty(t)) {
-			resizeObserver.observe(t);
+		let targetElement: Element;
+
+		if (deref instanceof Vue) {
+			targetElement = (deref as Vue).$el;
+		} else {
+			targetElement = deref as Element;
+		}
+
+		if (notEmpty(targetElement)) {
+			resizeObserver.observe(targetElement);
 		}
 	});
 

app/src/views/private/components/image-editor/image-editor.vue

@@ -11,7 +11,7 @@
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
 
-		<template #header:append>
+		<template #subtitle>
 			<span class="warning">{{ $t('changes_are_immediate_and_permanent') }}</span>
 		</template>
 
@@ -103,19 +103,20 @@
 			</div>
 		</div>
 
-		<template #footer="{ close }">
+		<template #actions:prepend>
 			<div class="dimensions" v-if="imageData">
-				<v-icon name="info_outline" />
 				{{ $n(imageData.width) }}x{{ $n(imageData.height) }}
 				<template v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height">
 					->
 					{{ $n(newDimensions.width) }}x{{ $n(newDimensions.height) }}
 				</template>
 			</div>
+		</template>
 
-			<div class="spacer" />
-			<v-button @click="close" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save" :loading="saving">{{ $t('save') }}</v-button>
+		<template #actions>
+			<v-button @click="save" :loading="saving" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
 	</v-drawer>
 </template>
@@ -482,6 +483,7 @@ export default defineComponent({
 }
 
 .dimensions {
+	margin-right: 12px;
 	color: var(--foreground-subdued);
 	font-feature-settings: 'tnum';
 }