Clean up section headlines and field labels

getkirby · Mar 10, 2023 · c840949 · c840949
1 parent b49109c
commit c840949
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 142 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/panel/src/components/Forms/Field.vue b/panel/src/components/Forms/Field.vue
@@ -7,9 +7,9 @@
 		@focusout="$emit('blur', $event)"
 	>
 		<slot name="header">
-			<header class="k-field-header">
+			<header class="k-bar k-field-header">
 				<slot name="label">
-					<label :for="input" class="k-field-label">
+					<label :for="input" class="k-label k-field-label">
 						{{ labelText }}
 						<abbr v-if="required" :title="$t('field.required')">*</abbr>
 					</label>
@@ -62,22 +62,8 @@ export default {
 </script>
 
 <style>
-.k-field-label {
-	font-weight: var(--font-bold);
-	display: block;
-	flex-grow: 1;
-	line-height: 1.25rem;
-}
-.k-field-label abbr {
-	text-decoration: none;
-	color: var(--color-gray-500);
-	padding-inline-start: 0.25rem;
-}
 .k-field-header {
-	position: relative;
-	display: flex;
-	align-items: center;
-	padding-bottom: var(--spacing-2);
+	margin-bottom: var(--spacing-2);
 }
 .k-field[data-disabled="true"] {
 	cursor: not-allowed;

diff --git a/panel/src/components/Forms/Field/BlocksField.vue b/panel/src/components/Forms/Field/BlocksField.vue
@@ -126,7 +126,7 @@ export default {
 .k-blocks-field {
 	position: relative;
 }
-.k-blocks-field .k-blocks:has(+ footer) {
+.k-blocks-field > :has(+ footer) {
 	margin-bottom: var(--spacing-3);
 }
 </style>
diff --git a/panel/src/components/Sections/FieldsSection.vue b/panel/src/components/Sections/FieldsSection.vue
@@ -1,9 +1,10 @@
 <template>
-	<section v-if="!isLoading" class="k-fields-section">
-		<template v-if="issue">
-			<k-headline class="k-fields-issue-headline"> Error </k-headline>
-			<k-box :text="issue.message" :html="false" theme="negative" />
-		</template>
+	<k-section
+		v-if="!isLoading"
+		:headline="issue ? 'Error' : null"
+		class="k-fields-section"
+	>
+		<k-box v-if="issue" :text="issue.message" :html="false" theme="negative" />
 		<k-form
 			:fields="fields"
 			:validate="true"
@@ -12,7 +13,7 @@
 			@input="input"
 			@submit="onSubmit"
 		/>
-	</section>
+	</k-section>
 </template>
 
 <script>
@@ -78,9 +79,6 @@ export default {
 </script>
 
 <style>
-.k-fields-issue-headline {
-	margin-bottom: 0.5rem;
-}
 .k-fields-section input[type="submit"] {
 	display: none;
 }

diff --git a/panel/src/components/Sections/InfoSection.vue b/panel/src/components/Sections/InfoSection.vue
@@ -1,10 +1,7 @@
 <template>
-	<section class="k-info-section">
-		<k-headline class="k-info-section-label">
-			{{ label }}
-		</k-headline>
+	<k-section :headline="label" class="k-info-section">
 		<k-box :html="true" :text="text" :theme="theme" />
-	</section>
+	</k-section>
 </template>
 
 <script>
@@ -27,9 +24,3 @@ export default {
 	}
 };
 </script>
-
-<style>
-.k-info-section-label {
-	margin-bottom: 0.5rem;
-}
-</style>
diff --git a/panel/src/components/Sections/ModelsSection.vue b/panel/src/components/Sections/ModelsSection.vue
@@ -1,18 +1,13 @@
 <template>
-	<section
+	<k-section
 		v-if="isLoading === false"
+		:headline="options.headline || ' '"
+		:link="options.link"
+		:buttons="buttons"
 		:data-processing="isProcessing"
+		:required="options.min"
 		:class="`k-models-section k-${type}-section`"
 	>
-		<header class="k-section-header">
-			<k-headline :link="options.link">
-				{{ options.headline || " " }}
-				<abbr v-if="options.min" :title="$t('section.required')">*</abbr>
-			</k-headline>
-
-			<k-button-group :buttons="buttons" size="xs" variant="filled" />
-		</header>
-
 		<!-- Error -->
 		<k-box v-if="error" theme="negative">
 			<k-text size="small">
@@ -49,7 +44,7 @@
 
 			<k-upload ref="upload" @success="onUpload" @error="reload" />
 		</template>
-	</section>
+	</k-section>
 </template>
 
 <script>

diff --git a/panel/src/components/Sections/Section.vue b/panel/src/components/Sections/Section.vue
@@ -0,0 +1,57 @@
+<template>
+	<section class="k-section">
+		<header v-if="headline || buttons" class="k-bar k-section-header">
+			<k-headline :link="link" tag="h2" class="k-label">
+				{{ headline }}
+				<abbr v-if="required" :title="$t('section.required')">*</abbr>
+			</k-headline>
+			<k-button-group
+				v-if="buttons"
+				:buttons="buttons"
+				size="xs"
+				variant="filled"
+			/>
+		</header>
+
+		<slot />
+	</section>
+</template>
+
+<script>
+export default {
+	props: {
+		buttons: Array,
+		headline: String,
+		link: String,
+		required: Boolean
+	}
+};
+</script>
+
+<style>
+.k-section {
+	padding-bottom: 3rem;
+}
+.k-section-header {
+	margin-bottom: var(--spacing-2);
+}
+.k-label {
+	position: relative;
+	display: flex;
+	font-weight: var(--font-semi);
+	align-items: center;
+	height: var(--height-xs);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.k-label abbr {
+	text-decoration: none;
+	color: var(--color-gray-500);
+	padding-inline-start: 0.25rem;
+}
+[aria-disabled] .k-label {
+	opacity: var(--opacity-disabled);
+	cursor: not-allowed;
+}
+</style>
diff --git a/panel/src/components/Sections/Sections.vue b/panel/src/components/Sections/Sections.vue
@@ -76,21 +76,4 @@ export default {
 .k-sections {
 	padding-bottom: 3rem;
 }
-.k-section {
-	padding-bottom: 3rem;
-}
-.k-section-header {
-	position: relative;
-	display: flex;
-	align-items: center;
-	z-index: 1;
-	padding-bottom: var(--spacing-2);
-}
-.k-section-header .k-headline {
-	flex-grow: 1;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	padding-inline-end: var(--spacing-3);
-}
 </style>
diff --git a/panel/src/components/Sections/StatsSection.vue b/panel/src/components/Sections/StatsSection.vue
@@ -1,13 +1,12 @@
 <template>
-	<section v-if="isLoading === false" class="k-stats-section">
-		<header class="k-section-header">
-			<k-headline>
-				{{ headline }}
-			</k-headline>
-		</header>
+	<k-section
+		v-if="isLoading === false"
+		:headline="headline"
+		class="k-stats-section"
+	>
 		<k-stats v-if="reports.length > 0" :reports="reports" :size="size" />
 		<k-empty v-else icon="chart"> {{ empty || $t("stats.empty") }}</k-empty>
-	</section>
+	</k-section>
 </template>
 
 <script>

diff --git a/panel/src/components/Sections/index.js b/panel/src/components/Sections/index.js
@@ -1,3 +1,4 @@
+import Section from "../Sections/Section.vue";
 import Sections from "@/components/Sections/Sections.vue";
 
 /* Section Types */
@@ -9,6 +10,7 @@ import StatsSection from "@/components/Sections/StatsSection.vue";
 
 export default {
 	install(app) {
+		app.component("k-section", Section);
 		app.component("k-sections", Sections);
 
 		app.component("k-fields-section", FieldsSection);

diff --git a/panel/src/components/Views/LanguagesView.vue b/panel/src/components/Views/LanguagesView.vue
@@ -14,35 +14,27 @@
 			</k-button-group>
 		</k-header>
 
-		<section class="k-languages">
-			<template v-if="languages.length > 0">
-				<section class="k-languages-view-section">
-					<header class="k-languages-view-section-header">
-						<k-headline>{{ $t("languages.default") }}</k-headline>
-					</header>
-					<k-collection :items="primaryLanguage" />
-				</section>
+		<template v-if="languages.length > 0">
+			<k-section :headline="$t('languages.default')">
+				<k-collection :items="primaryLanguage" />
+			</k-section>
 
-				<section class="k-languages-view-section">
-					<header class="k-languages-view-section-header">
-						<k-headline>{{ $t("languages.secondary") }}</k-headline>
-					</header>
-					<k-collection
-						v-if="secondaryLanguages.length"
-						:items="secondaryLanguages"
-					/>
-					<k-empty v-else icon="globe" @click="$dialog('languages/create')">
-						{{ $t("languages.secondary.empty") }}
-					</k-empty>
-				</section>
-			</template>
-
-			<template v-else-if="languages.length === 0">
-				<k-empty icon="globe" @click="$dialog('languages/create')">
-					{{ $t("languages.empty") }}
+			<k-section :headline="$t('languages.secondary')">
+				<k-collection
+					v-if="secondaryLanguages.length"
+					:items="secondaryLanguages"
+				/>
+				<k-empty v-else icon="globe" @click="$dialog('languages/create')">
+					{{ $t("languages.secondary.empty") }}
 				</k-empty>
-			</template>
-		</section>
+			</k-section>
+		</template>
+
+		<template v-else-if="languages.length === 0">
+			<k-empty icon="globe" @click="$dialog('languages/create')">
+				{{ $t("languages.empty") }}
+			</k-empty>
+		</template>
 	</k-inside>
 </template>
 
@@ -98,12 +90,3 @@ export default {
 	}
 };
 </script>
-
-<style>
-.k-languages-view-section-header {
-	margin-bottom: 0.5rem;
-}
-.k-languages-view-section {
-	margin-bottom: 3rem;
-}
-</style>