Merge pull request #6430 from getkirby/fix/6378-blocks-img-pattern

Image blocks: add pattern background
getkirby · Jul 25, 2024 · d3d8a70 · d3d8a70
2 parents 4147b7e + 7658f55
commit d3d8a70
Show file tree

Hide file tree

Showing 12 changed files with 252 additions and 34 deletions.
diff --git a/i18n/translations/en.json b/i18n/translations/en.json
@@ -294,6 +294,9 @@
 	"field.blocks.heading.name": "Heading",
 	"field.blocks.heading.text": "Text",
 	"field.blocks.heading.placeholder": "Heading …",
+	"field.blocks.figure.back.plain": "White",
+	"field.blocks.figure.back.pattern.light": "Pattern (light)",
+	"field.blocks.figure.back.pattern.dark": "Pattern (dark)",
 	"field.blocks.image.alt": "Alternative text",
 	"field.blocks.image.caption": "Caption",
 	"field.blocks.image.crop": "Crop",

diff --git a/panel/lab/components/block/3_figure/index.vue b/panel/lab/components/block/3_figure/index.vue
@@ -33,6 +33,17 @@
 				/>
 			</k-block-figure>
 		</k-lab-example>
+		<k-lab-example label="Back">
+			<k-block-figure
+				caption="This is a nice caption"
+				back="var(--pattern-light)"
+			>
+				<k-image-frame
+					ratio="16/9"
+					src="https://fakeimg.pl/1200x600/ff0000,0/333333,255/?text=Pattern"
+				/>
+			</k-block-figure>
+		</k-lab-example>
 		<k-lab-example label="Video">
 			<k-block-figure caption="This is a nice caption">
 				<k-frame :cover="true" ratio="16/9">

diff --git a/panel/lab/components/frames/4_color/index.vue b/panel/lab/components/frames/4_color/index.vue
@@ -25,6 +25,16 @@
 				/>
 			</k-grid>
 		</k-lab-example>
+		<k-lab-example label="Pattern">
+			<k-grid style="--columns: 3; gap: var(--spacing-6)">
+				<k-color-frame
+					v-for="ratio in ratios"
+					:key="ratio"
+					:ratio="ratio"
+					color="var(--pattern)"
+				/>
+			</k-grid>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
 
@@ -33,7 +43,7 @@ export default {
 	computed: {
 		ratios() {
 			return ["1/1", "4/3", "16/9"];
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/panel/src/components/Forms/Blocks/Block.vue b/panel/src/components/Forms/Blocks/Block.vue
@@ -356,7 +356,7 @@ export default {
 <style>
 .k-block-container {
 	position: relative;
-	padding: 0.75rem;
+	padding: var(--spacing-3);
 	background: var(--color-white);
 	border-radius: var(--rounded);
 }
@@ -384,7 +384,7 @@ export default {
 	display: none;
 	position: absolute;
 	top: 0;
-	inset-inline-end: 0.75rem;
+	inset-inline-end: var(--spacing-3);
 	margin-top: calc(-1.75rem + 2px);
 }
 .k-block-container[data-last-selected="true"] > .k-block-options {

diff --git a/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue b/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="k-block-background-dropdown">
+		<k-button
+			:dropdown="true"
+			size="xs"
+			variant="filled"
+			@click="$refs.dropdown.toggle()"
+		>
+			<k-color-frame :color="value" ratio="1/1" />
+		</k-button>
+		<k-dropdown-content
+			ref="dropdown"
+			align-x="end"
+			:options="[
+				{
+					text: $t('field.blocks.figure.back.plain'),
+					click: 'var(--color-white)'
+				},
+				{
+					text: $t('field.blocks.figure.back.pattern.light'),
+					click: 'var(--pattern-light)'
+				},
+				{
+					text: $t('field.blocks.figure.back.pattern.dark'),
+					click: 'var(--pattern)'
+				}
+			]"
+			@action="$emit('input', $event)"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		value: String
+	}
+};
+</script>
+
+<style>
+.k-block-background-dropdown > .k-button {
+	--color-frame-rounded: 0;
+	--color-frame-size: 1.5rem;
+	--button-height: 1.5rem;
+	--button-padding: 0 0.125rem;
+	--button-color-back: var(--color-white);
+	gap: 0.25rem;
+	box-shadow: var(--shadow-toolbar);
+	border: 1px solid var(--color-white);
+}
+.k-block-background-dropdown .k-color-frame {
+	border-right: 1px solid var(--color-gray-300);
+}
+.k-block-background-dropdown .k-color-frame::after {
+	box-shadow: none;
+}
+.k-block .k-block-background-dropdown {
+	position: absolute;
+	inset-inline-end: var(--spacing-3);
+	bottom: var(--spacing-3);
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+}
+.k-block:hover .k-block-background-dropdown {
+	opacity: 1;
+}
+</style>
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
@@ -1,5 +1,9 @@
 <template>
-	<figure class="k-block-figure">
+	<figure
+		:data-empty="isEmpty"
+		:style="{ '--block-figure-back': back }"
+		class="k-block-figure"
+	>
 		<k-button
 			v-if="isEmpty"
 			:disabled="disabled"
@@ -16,22 +20,22 @@
 		>
 			<slot />
 		</span>
-		<figcaption v-if="caption">
-			<k-writer
-				:disabled="disabled"
-				:inline="true"
-				:marks="captionMarks"
-				:value="caption"
-				@input="$emit('update', { caption: $event })"
-			/>
-		</figcaption>
+
+		<k-block-figure-caption
+			v-if="caption"
+			:disabled="disabled"
+			:marks="captionMarks"
+			:value="caption"
+			@input="$emit('update', { caption: $event })"
+		/>
 	</figure>
 </template>
 
 <script>
 export default {
 	inheritAttrs: false,
 	props: {
+		back: String,
 		caption: String,
 		captionMarks: {
 			default: true,
@@ -47,6 +51,10 @@ export default {
 </script>
 
 <style>
+.k-block-figure:not([data-empty="true"]) {
+	--block-figure-back: var(--color-white);
+	background: var(--block-figure-back);
+}
 .k-block-figure-container:not([data-disabled="true"]) {
 	cursor: pointer;
 }

diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigureCaption.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigureCaption.vue
@@ -0,0 +1,40 @@
+<template>
+	<figcaption class="k-block-figure-caption">
+		<k-writer
+			:disabled="disabled"
+			:inline="true"
+			:marks="marks"
+			:spellcheck="false"
+			:value="value"
+			@input="$emit('input', $event)"
+		/>
+	</figcaption>
+</template>
+
+<script>
+export default {
+	props: {
+		disabled: Boolean,
+		marks: [Array, Boolean],
+		value: String
+	}
+};
+</script>
+
+<style>
+.k-block-figure-caption {
+	display: flex;
+	justify-content: center;
+	padding-top: var(--spacing-3);
+}
+.k-block-figure-caption .k-writer {
+	width: max-content;
+	text-align: center;
+}
+
+.k-block-figure-caption .k-writer .k-text {
+	color: var(--color-gray-600);
+	font-size: var(--text-sm);
+	mix-blend-mode: exclusion;
+}
+</style>
diff --git a/panel/src/components/Forms/Blocks/Types/Fields.vue b/panel/src/components/Forms/Blocks/Types/Fields.vue
@@ -40,7 +40,6 @@ import Block from "./Default.vue";
 export default {
 	extends: Block,
 	props: {
-		endpoints: Object,
 		tabs: Object
 	},
 	data() {

diff --git a/panel/src/components/Forms/Blocks/Types/Gallery.vue b/panel/src/components/Forms/Blocks/Types/Gallery.vue
@@ -1,7 +1,7 @@
 <template>
-	<figure>
+	<figure :data-empty="isEmpty" :style="{ '--block-back': back }">
 		<ul @dblclick="open">
-			<template v-if="!content.images?.length">
+			<template v-if="isEmpty">
 				<li
 					v-for="index in 3"
 					:key="index"
@@ -20,17 +20,17 @@
 						:alt="image.alt"
 					/>
 				</li>
+
+				<k-block-background-dropdown :value="back" @input="onBack" />
 			</template>
 		</ul>
-		<figcaption v-if="content.caption">
-			<k-writer
-				:disabled="disabled"
-				:inline="true"
-				:marks="captionMarks"
-				:value="content.caption"
-				@input="$emit('update', { caption: $event })"
-			/>
-		</figcaption>
+		<k-block-figure-caption
+			v-if="content.caption"
+			:disabled="disabled"
+			:marks="captionMarks"
+			:value="content.caption"
+			@input="$emit('update', { caption: $event })"
+		/>
 	</figure>
 </template>
 
@@ -42,21 +42,52 @@ import Block from "./Default.vue";
  */
 export default {
 	extends: Block,
+	data() {
+		return {
+			back: this.onBack() ?? "white"
+		};
+	},
 	computed: {
 		captionMarks() {
 			return this.field("caption", { marks: true }).marks;
 		},
 		crop() {
 			return this.content.crop;
 		},
+		isEmpty() {
+			return !this.content.images?.length;
+		},
 		ratio() {
 			return this.content.ratio;
 		}
+	},
+	methods: {
+		onBack(value) {
+			const id = `kirby.galleryBlock.${this.endpoints.field}.${this.id}`;
+
+			if (value !== undefined) {
+				this.back = value;
+				sessionStorage.setItem(id, value);
+			} else {
+				return sessionStorage.getItem(id);
+			}
+		}
 	}
 };
 </script>
 
 <style>
+.k-block-container.k-block-container-type-gallery {
+	padding: 0;
+}
+.k-block-type-gallery > figure {
+	padding: var(--spacing-3);
+	border-radius: var(--rounded);
+}
+.k-block-type-gallery > figure:not([data-empty="true"]) {
+	background: var(--block-back);
+}
+
 .k-block-type-gallery ul {
 	display: grid;
 	grid-gap: 0.75rem;
@@ -68,16 +99,14 @@ export default {
 .k-block-type-gallery:not([data-disabled="true"]) ul {
 	cursor: pointer;
 }
+.k-block-type-gallery ul .k-image-frame {
+	border-radius: var(--rounded-sm);
+}
+
 .k-block-type-gallery[data-disabled="true"] .k-block-type-gallery-placeholder {
 	background: var(--color-gray-250);
 }
 .k-block-type-gallery-placeholder {
 	background: var(--color-background);
 }
-.k-block-type-gallery figcaption {
-	padding-top: 0.5rem;
-	color: var(--color-gray-600);
-	font-size: var(--text-sm);
-	text-align: center;
-}
 </style>