Theme Selector

- Add theme picker to admin templates - Add default edit forms to Themes - CSS for vertical tabs - Tabs: stop storing tab state in URL hash
EmissarySocial · Mar 30, 2024 · ec37ef6 · ec37ef6
1 parent 684548a
commit ec37ef6
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 21 deletions.
diff --git a/_embed/templates/admin-domain/index.html b/_embed/templates/admin-domain/index.html
@@ -1,3 +1,5 @@
+{{- $theme := .Theme .ThemeID -}}
+
 <div class="page" hx-get="/admin/domain/index" hx-trigger="refreshPage from:window">
 
 	<script src="/.themes/global/resources/sortable-1.15.0/Sortable.min.js"></script>
@@ -9,6 +11,8 @@
 		{{- end -}}
 	</div>
 
-	{{.View "form"}}
 
-</div>
+	<div class="margin-bottom">
+		<span class="bold">Theme: {{$theme.Label}}</span> 
+		<span class="button text-xs" hx-get="/admin/domain/themes">Select a Theme</span>
+	</div>
diff --git a/_embed/templates/admin-domain/template.hjson b/_embed/templates/admin-domain/template.hjson
@@ -15,23 +15,25 @@
 		}}
 	}}
 	actions: {
-		index: {do: "view-html"}
-		form: {
+		index: {
 			steps: [
-				{do:"edit"
-					form: {
-						type:"layout-vertical", children:[
-							{type:"select", path:"themeId", label:"Theme", options: {provider:"themes"}}
-							{type:"text", path:"label", label:"Label"}
-							{type:"textarea", path:"description", label:"Description"}
-						]
-					}
-					options: ["inlineSaveButton:true", "cancelButton:hide", "endpoint:/admin/domain/form"]
-				}
+				{do:"view-html"}
+				{do:"edit", options: ["cancel-button:hide"]}
 				{do: "save"}
 				{do: "inline-save-button"}
 			]
 		}
+		themes: {
+			steps: [{
+				do: as-modal
+				steps: [
+					{do: "view-html"}
+					{do: "set-data", from-form:["themeId"]}
+					{do: "save"}
+					{do: "reload-page"}
+				]
+			}]
+		}
 		signup: {
 			steps: [{
 				do: "as-modal", 

diff --git a/_embed/templates/admin-domain/themes.html b/_embed/templates/admin-domain/themes.html
@@ -0,0 +1,30 @@
+{{- $themeID := .ThemeID -}}
+{{- $themes := .Themes -}}
+
+<h1>Select a Theme</h1>
+
+<div class="flex-row" script="install TabContainer">
+	<div role="tablist" class="vertical width-1-5">
+		{{- range $themes -}}
+			{{- if eq .ThemeID $themeID -}}
+				<div role="tab" aria-controls="theme-{{.ThemeID}}" aria-selected="true">{{.Label}}</div>
+			{{- else -}}
+				<div role="tab" aria-controls="theme-{{.ThemeID}}">{{.Label}}</div>
+			{{- end -}}
+		{{- end -}}
+	</div>
+	<div class="width-4-5">
+		{{- range $themes -}}
+			<div id="theme-{{.ThemeID}}" role="tabpanel">
+				<div class="text-lg bold margin-none">{{.Label}}</div>
+				<div class="text-gray margin-bottom">{{.Description}}</div>
+				<img src="/.themes/{{.ThemeID}}/resources/startup/splash.png" class="width-100-percent margin-bottom">
+
+				<div>
+					<button class="primary" hx-post="/admin/domain/themes" hx-vals='{"themeId":"{{.ThemeID}}"}'>Select Theme</button>
+					<button script="on click trigger closeModal">Cancel</button> 
+				</div>
+			</div>
+		{{- end -}}
+	</div>
+</div>
diff --git a/_embed/templates/theme-codex/theme.hjson b/_embed/templates/theme-codex/theme.hjson
@@ -6,6 +6,22 @@
 	label: "Codex"
 	description: "Side-Nav designed for your Magnum Opus"
 	rank: 10
+	schema: {
+		type: "object", 
+		properties: {
+			label: {type:"string", maxLength:100, required: true}
+			description: {type:"string", maxLength:100}
+			themeId: {type:"string", maxLength: 100}
+		}
+	}
+	form: {
+		type: layout-vertical
+		children: [
+			{type: "text", label: "Label", path: "label", description: "Title of this website and domain."}
+			{type: "textarea", label: "Description", path: "description"}
+		]
+	}
+
 	bundles: {
 		stylesheet: {
 			content-type:"text/css"

diff --git a/_embed/templates/theme-default/theme.hjson b/_embed/templates/theme-default/theme.hjson
@@ -6,6 +6,21 @@
 	label: "Minimus"
 	description: "Clean, top nav theme for general purpose websites."
 	rank: 0
+	schema: {
+		type: "object", 
+		properties: {
+			label: {type:"string", maxLength:100, required: true}
+			description: {type:"string", maxLength:100}
+			themeId: {type:"string", maxLength: 100}
+		}
+	}
+	form: {
+		type: layout-vertical
+		children: [
+			{type: "text", label: "Label", path: "label", description: "Title of this website and domain."}
+			{type: "textarea", label: "Description", path: "description"}
+		]
+	}
 	bundles: {
 		stylesheet: {
 			content-type:"text/css"

diff --git a/_embed/templates/theme-global/hyperscript/tabs._hs b/_embed/templates/theme-global/hyperscript/tabs._hs
@@ -4,10 +4,8 @@ behavior TabContainer
 	-- (and points to one of our tabs) then select it first.  Otherwise,
 	-- select the first tab in the list
 	init
-		if window.location.hash is not "" then
-			set target to the first <[aria-controls="${window.location.hash.slice(1)}"]/>
-		end
-
+		set target to the first <[aria-selected="true"]/> in me
+
 		if target is null then 
 			set target to first <[role=tab]/> in me
 		end
@@ -45,7 +43,6 @@ behavior TabContainer
 		for tab in <[role=tab] /> in me
 			if tab == target
 				add [@aria-selected="true"] to tab
-				call window.history.replaceState(undefined, tab.innerHTML, "#" + target[@aria-controls])
 			else
 				remove [@aria-selected] from tab
 			end

diff --git a/_embed/templates/theme-global/stylesheet/1_colors.css b/_embed/templates/theme-global/stylesheet/1_colors.css
@@ -69,7 +69,7 @@
 	--button-primary-background:var(--blue60);
 	--button-primary-background-hover:var(--blue50);
 	--heading-color:var(--black);
-	--text-color:var(--gray70);
+	--text-color:var(--gray80);
 	--link-color:var(--blue60);
 	--link-color-hover:var(--blue50);
 

diff --git a/_embed/templates/theme-global/stylesheet/forms.css b/_embed/templates/theme-global/stylesheet/forms.css
@@ -1,6 +1,6 @@
 /* Input Elements */
 
-input:not([type=submit], [type=checkbox], [type=radio]), textarea, select, .input, [role=input] {
+input:not([type=submit], [type=checkbox], [type=radio], [type=color]), textarea, select, .input, [role=input] {
 	border: solid 1px var(--input-border);
 	background-color: var(--input-background);
 	color: var(--input-color);

diff --git a/_embed/templates/theme-global/stylesheet/geometry.css b/_embed/templates/theme-global/stylesheet/geometry.css
@@ -192,18 +192,28 @@
     flex-shrink: 0;
 }
 
+.flex-shrink,
 .flex-shrink-1 {
     flex-shrink: 1;
 }
 
+.flex-shrink-2 {
+    flex-shrink: 2;
+}
+
 .flex-grow-0 {
     flex-grow:0;
 }
 
+.flex-grow,
 .flex-grow-1 {
     flex-grow: 1;
 }
 
+.flex-grow-2 {
+    flex-grow:2;
+}
+
 /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-wrap */
 .flex-wrap {
     flex-wrap:wrap;

diff --git a/_embed/templates/theme-global/stylesheet/tabs.css b/_embed/templates/theme-global/stylesheet/tabs.css
@@ -155,3 +155,66 @@
     color:var(--white);
     font-weight:500;
 }
+
+
+/******************************************
+ * Vertical Tabs
+ ******************************************/
+
+
+[role="tablist"].vertical {
+    border:none;
+    border-right:solid 1px var(--gray40);
+    margin-bottom:none;
+    margin-right:calc( var(--rhythm) * 2);
+    line-height:normal;
+}
+
+[role="tablist"].vertical > [role="tab"] {
+    cursor:pointer;
+    display:block;
+    padding-top:var(--rhythm);
+    padding-bottom:var(--rhythm);
+    padding-left:0px;
+    padding-right:calc( var(--rhythm) * 2);
+    margin:0px;
+    margin-right:var(--rhythm);
+    background-color:transparent;
+    border:none;
+    border-radius:0px;
+    border-bottom: solid 1px var(--gray20);
+    color:var(--link-color);
+    font-family:inherit;
+    font-size:0.9rem;
+    text-decoration:none;
+}
+
+[role="tablist"].vertical > [role="tab"]:first-child,
+[role="tablist"].vertical > [role="tab"]:hover:not([disabled]):first-child,
+[role="tablist"].vertical > [role="tab"]:focus:not([disabled]):first-child {
+    border-top: solid 1px var(--gray20);
+}
+
+[role="tablist"].vertical > [role="tab"]:hover:not([disabled]),
+[role="tablist"].vertical > [role="tab"]:focus:not([disabled]) {
+    background-color:transparent;
+    border:none;
+    border-bottom: solid 1px var(--gray20);
+    color:var(--link-color);
+}
+
+[role="tablist"].vertical > [role="tab"][disabled] {
+    background-color:transparent;
+    opacity:0.5;
+    cursor:not-allowed;
+}
+
+[role="tablist"].vertical > [role="tab"][aria-selected="true"]:not([disabled]),
+[role="tablist"].vertical > [role="tab"][aria-selected="true"]:not([disabled]):hover,
+[role="tablist"].vertical > [role="tab"].selected:not([disabled]), 
+[role="tablist"].vertical > [role="tab"].selected:not([disabled]):hover {
+    border-bottom: solid 1px var(--gray20);
+    background-color:transparent;
+    color:var(--textColor);
+    font-weight:bold;
+}