Merge pull request #6793 from getkirby/v5/changes/languages-dropdown

Languages dropdown with changes/lock indicator
getkirby · Nov 14, 2024 · 8f1db29 · 8f1db29
2 parents 9d2041e + 65716d4
commit 8f1db29
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 15 deletions.
diff --git a/panel/src/components/Dropdowns/DropdownContent.vue b/panel/src/components/Dropdowns/DropdownContent.vue
@@ -15,17 +15,22 @@
 	>
 		<k-navigate ref="navigate" :disabled="navigate === false" axis="y">
 			<!-- @slot Content of the dropdown which overrides passed `options` prop -->
-			<slot>
+			<slot v-bind="{ items }">
 				<template v-for="(option, index) in items">
 					<hr v-if="option === '-'" :key="'separator-' + index" />
-					<k-dropdown-item
+					<slot
 						v-else-if="option.when ?? true"
-						:key="'item-' + index"
-						v-bind="option"
-						@click="onOptionClick(option)"
+						name="item"
+						v-bind="{ item: option, index }"
 					>
-						{{ option.label ?? option.text }}
-					</k-dropdown-item>
+						<k-dropdown-item
+							:key="'item-' + index"
+							v-bind="option"
+							@click="onOptionClick(option)"
+						>
+							{{ option.label ?? option.text }}
+						</k-dropdown-item>
+					</slot>
 				</template>
 			</slot>
 		</k-navigate>

diff --git a/panel/src/components/Misc/Progress.vue b/panel/src/components/Misc/Progress.vue
@@ -36,6 +36,7 @@ progress {
 	height: var(--progress-height);
 	border-radius: var(--progress-height);
 	overflow: hidden;
+	background: var(--progress-color-back);
 	border: 0;
 }
 
@@ -51,6 +52,7 @@ progress::-webkit-progress-value {
 
 progress::-moz-progress-bar {
 	background: var(--progress-color-value);
+	border-radius: var(--progress-height);
 }
 
 /**	Indeterminate **/

diff --git a/panel/src/components/View/Buttons/LanguagesDropdown.vue b/panel/src/components/View/Buttons/LanguagesDropdown.vue
@@ -1,5 +1,43 @@
 <template>
-	<k-view-button v-bind="$props" :badge="changesBadge" />
+	<div class="k-view-button k-languages-dropdown">
+		<k-button
+			v-bind="$props"
+			:badge="changesBadge"
+			:dropdown="true"
+			@click="$refs.dropdown.toggle()"
+		/>
+		<k-dropdown-content
+			ref="dropdown"
+			:options="$dropdown(options)"
+			align-x="end"
+			@action="$emit('action', $event)"
+		>
+			<template #item="{ item: language, index }">
+				<k-button
+					:key="'item-' + index"
+					v-bind="language"
+					class="k-dropdown-item k-languages-dropdown-item"
+				>
+					{{ language.text }}
+
+					<span
+						:data-lock="language.lock"
+						class="k-languages-dropdown-item-info"
+					>
+						<k-icon
+							v-if="language.changes"
+							:alt="$t('lock.unsaved')"
+							:type="language.lock ? 'lock' : 'edit-line'"
+							class="k-languages-dropdown-item-icon"
+						/>
+						<span class="k-languages-dropdown-item-code">
+							{{ language.code.toUpperCase() }}
+						</span>
+					</span>
+				</k-button>
+			</template>
+		</k-dropdown-content>
+	</div>
 </template>
 
 <script>
@@ -23,9 +61,13 @@ export default {
 	},
 	computed: {
 		changesBadge() {
+			// `hasChanges` provides the state for all other than the current
+			// translation from the backend; for the current translation we need to
+			// check `content.hasChanges` as this state can change dynamically without
+			// any other backend request that would update `hasChanges`
 			if (this.hasChanges || this.$panel.content.hasChanges) {
 				return {
-					theme: "notice"
+					theme: this.$panel.content.lock.isLocked ? "red" : "orange"
 				};
 			}
 
@@ -34,3 +76,37 @@ export default {
 	}
 };
 </script>
+
+<style>
+.k-languages-dropdown-item::after {
+	content: "✓";
+	padding-inline-start: var(--spacing-1);
+}
+.k-languages-dropdown-item:not([aria-current])::after {
+	visibility: hidden;
+}
+.k-languages-dropdown-item .k-button-text {
+	display: flex;
+	flex-grow: 1;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--spacing-6);
+	min-width: 8rem;
+}
+.k-languages-dropdown-item-info {
+	display: flex;
+	gap: var(--spacing-2);
+	align-items: center;
+}
+.k-languages-dropdown-item-icon {
+	--icon-color: var(--color-orange-500);
+	--icon-size: 1rem;
+}
+.k-languages-dropdown-item-info[data-lock] .k-languages-dropdown-item-icon {
+	--icon-color: var(--color-red-500);
+}
+.k-languages-dropdown-item-code {
+	font-size: var(--text-xs);
+	color: var(--color-gray-500);
+}
+</style>
diff --git a/panel/src/panel/content.js b/panel/src/panel/content.js
@@ -73,6 +73,13 @@ export default (panel) => {
 		 */
 		isSaved: true,
 
+		/**
+		 * Get the lock info for the model view
+		 */
+		get lock() {
+			return panel.view.props.lock;
+		},
+
 		/**
 		 * The last published state
 		 *

diff --git a/src/Panel/Ui/Buttons/LanguagesDropdown.php b/src/Panel/Ui/Buttons/LanguagesDropdown.php
@@ -43,8 +43,8 @@ class: 'k-languages-dropdown',
 
 	/**
 	 * Returns if any translation other than the current one has unsaved changes
-	 * (the current will be considered dynamically in `<k-languages-dropdown>`
-	 * based on its state)
+	 * (the current language has to be handled in `k-languages-dropdown` as its
+	 * state can change dynamically without another backend request)
 	 */
 	public function hasChanges(): bool
 	{
@@ -61,11 +61,16 @@ public function hasChanges(): bool
 
 	public function option(Language $language): array
 	{
+		$changes = $this->model->version('changes');
+
 		return [
 			'text'    => $language->name(),
 			'code'    => $language->code(),
+			'link'    => $this->model->panel()->url(true) . '?language=' . $language->code(),
 			'current' => $language->code() === $this->kirby->language()?->code(),
-			'link'    => $this->model->panel()->url(true) . '?language=' . $language->code()
+			'default' => $language->isDefault(),
+			'changes' => $changes->exists($language),
+			'lock'    => $changes->isLocked('*')
 		];
 	}
 

diff --git a/tests/Panel/Ui/Buttons/LanguagesDropdownTest.php b/tests/Panel/Ui/Buttons/LanguagesDropdownTest.php
@@ -48,8 +48,11 @@ public function testOption()
 		$this->assertSame([
 			'text'    => 'Deutsch',
 			'code'    => 'de',
+			'link'    => '/pages/test?language=de',
 			'current' => false,
-			'link'    => '/pages/test?language=de'
+			'default' => false,
+			'changes' => false,
+			'lock'    => false
 		], $button->option($language));
 	}
 
@@ -78,15 +81,21 @@ public function testOptionsMultiLang()
 			[
 				'text'    => 'English',
 				'code'    => 'en',
+				'link'    => '/pages/test?language=en',
 				'current' => true,
-				'link'    => '/pages/test?language=en'
+				'default' => true,
+				'changes' => false,
+				'lock'    => false
 			],
 			'-',
 			[
 				'text'    => 'Deutsch',
 				'code'    => 'de',
+				'link'    => '/pages/test?language=de',
 				'current' => false,
-				'link'    => '/pages/test?language=de'
+				'default' => false,
+				'changes' => false,
+				'lock'    => false
 			]
 		], $button->options());
 	}