From a1c5e2017ef80d360cc0d08ae73437ce32766c6e Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 25 Jun 2022 00:33:32 +1000
Subject: Convert UI options towards using bg/alt-color set

---
 src/App.vue                     | 43 +++++++++++++++++++++++++----------------
 src/README.md                   |  1 +
 src/components/Tile.vue         |  2 +-
 src/components/TutorialPane.vue |  2 +-
 src/lib.ts                      | 15 ++++++++------
 5 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 877ad2c..063f5ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,34 +57,37 @@ function getDefaultLytOpts(): LayoutOptions {
 }
 function getDefaultUiOpts(){
 	let screenSz = getBreakpoint();
-	let bgColor = '#292524', bgLight1 = '#44403c', bgLight2 = '#57534e', bgDark1 = '#1c1917', bgDark2 = '#0e0c0b';
+	let bgColorLight = '#44403c', altColor = '#a3e623';
 	return {
 		// Shared styling
+		textColor: '#fafaf9',
+		bgColor: '#292524',
+		bgColorLight,
+		bgColorDark: '#1c1917',
+		bgColorLight2: '#57534e',
+		bgColorDark2: '#0e0c0b',
+		altColor,
+		altColorDark: '#65a30d',
 		borderRadius: 5, // px
 		shadowNormal: '0 0 2px black',
-		shadowHovered: '0 0 1px 2px greenyellow',
+		shadowHovered: '0 0 1px 2px' + altColor,
 		shadowFocused: '0 0 1px 2px orange',
 		// Styling for App
-		appBgColor: bgColor,
-		titleBarBgColor: bgDark2,
 		mainTileMargin: screenSz == 'sm' ? 6 : 10, // px
 		// Styling for tiles
-		textColor: '#fafaf9',
-		childQtyColors: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
+		childQtyColors: [[1, altColor], [10, 'orange'], [100, 'red']],
 		infoIconSz: 18, // px
 		infoIconMargin: 2, // px
 		leafPadding: 4, // px
 		leafHeaderFontSz: 15, // px
-		nonleafBgColors: [bgLight1, bgLight2],
+		nonleafBgColors: ['#44403c', '#57534e'],
 		nonleafHeaderFontSz: 15, // px
-		nonleafHeaderBgColor: bgDark1,
 		// Styling for other components
 		infoModalImgSz: 200, // px
-		ancestryBarBgColor: 'transparent',
+		ancestryBarBgColor: bgColorLight,
 		ancestryBarImgSz: 100, // px
 		ancestryTileGap: 5, // px
 		tutPaneSz: 200, // px
-		tutPaneBgColor: bgDark1,
 		// Timing related
 		clickHoldDuration: 400, // ms
 		transitionDuration: 300, // ms
@@ -160,6 +163,12 @@ export default defineComponent({
 			}
 			return ancestors.reverse();
 		},
+		iconButtonStyles(): Record<string,string> {
+			return {
+				color: this.uiOpts.textColor,
+				backgroundColor: this.uiOpts.altColorDark,
+			};
+		},
 		tutPaneContainerStyles(): Record<string,string> {
 			return {
 				minHeight: (this.tutorialOpen ? this.uiOpts.tutPaneSz : 0) + 'px',
@@ -918,24 +927,24 @@ export default defineComponent({
 
 <template>
 <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col"
-	:style="{backgroundColor: uiOpts.appBgColor}">
-	<div class="flex shadow" :style="{backgroundColor: uiOpts.titleBarBgColor}">
-		<h1 class="text-lime-500 px-4 my-auto text-2xl">Tree of Life</h1>
+	:style="{backgroundColor: uiOpts.bgColor}">
+	<div class="flex shadow" :style="{backgroundColor: uiOpts.bgColorDark2}">
+		<h1 class="px-4 my-auto text-2xl" :style="{color: uiOpts.altColor}">Tree of Life</h1>
 		<!-- Icons -->
 		<icon-button v-if="!uiOpts.disabledActions.has('search')"
-			class="ml-auto mr-2 my-2 bg-lime-600 text-lime-100" @click="onSearchIconClick">
+			class="ml-auto mr-2 my-2" :style="iconButtonStyles" @click="onSearchIconClick">
 			<search-icon/>
 		</icon-button>
 		<icon-button v-if="!uiOpts.disabledActions.has('autoMode')"
-			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onPlayIconClick">
+			class="mr-2 my-2" :style="iconButtonStyles" @click="onPlayIconClick">
 			<play-icon/>
 		</icon-button>
 		<icon-button v-if="!uiOpts.disabledActions.has('settings')"
-			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onSettingsIconClick">
+			class="mr-2 my-2" :style="iconButtonStyles" @click="onSettingsIconClick">
 			<settings-icon/>
 		</icon-button>
 		<icon-button v-if="!uiOpts.disabledActions.has('help')"
-			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onHelpIconClick">
+			class="mr-2 my-2" :style="iconButtonStyles" @click="onHelpIconClick">
 			<help-icon/>
 		</icon-button>
 	</div>
diff --git a/src/README.md b/src/README.md
index 4c6f70b..5d22035 100644
--- a/src/README.md
+++ b/src/README.md
@@ -10,6 +10,7 @@
     -   AncestryBar.vue:   Displays ancestors of the top-level Tile.
     -   TutorialPane.vue:  Displays tutorial content.
     -   RButton.vue:       Basic button component.
+    -   IconButton.vue:    Basic button component containing SVG icon.
     -   icon:              Contains components that display SVG icons.
 -   layout.ts: Contains code for laying out Tiles.
 -   lib.ts:    Contains classes/types and utility functions.
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 5e4bccf..df281f5 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -220,7 +220,7 @@ export default defineComponent({
 				height: this.lytOpts.headerSz + 'px',
 				borderTopLeftRadius: 'inherit',
 				borderTopRightRadius: 'inherit',
-				backgroundColor: this.uiOpts.nonleafHeaderBgColor,
+				backgroundColor: this.uiOpts.bgColorDark,
 			};
 			if (this.isOverflownRoot){
 				styles = {
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index e32fedd..fdebc8b 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -20,7 +20,7 @@ export default defineComponent({
 	computed: {
 		 styles(): Record<string,string> {
 			return {
-				backgroundColor: this.uiOpts.tutPaneBgColor,
+				backgroundColor: this.uiOpts.bgColorDark,
 				color: this.uiOpts.textColor,
 				height: this.height,
 			};
diff --git a/src/lib.ts b/src/lib.ts
index 56b6c8d..6a1a5a1 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -46,16 +46,21 @@ export type Action =
 //
 export type UiOptions = {
 	// Shared styling
+	textColor: string, // CSS color
+	bgColor: string,
+	bgColorLight: string,
+	bgColorDark: string,
+	bgColorLight2: string,
+	bgColorDark2: string,
+	altColor: string,
+	altColorDark: string,
 	borderRadius: number, // CSS border-radius value, in px
 	shadowNormal: string, // CSS box-shadow value
 	shadowHovered: string,
 	shadowFocused: string,
 	// Styling for App
-	appBgColor: string, // CSS color
-	titleBarBgColor: string, // CSS color
 	mainTileMargin: number, // px
 	// Styling for tiles
-	textColor: string, // CSS color
 	childQtyColors: [number, string][],
 		// Specifies, for an increasing sequence of minimum-child-quantity values, CSS colors to use
 		//eg: [[1, 'green'], [10, 'orange'], [100, 'red']]
@@ -67,18 +72,16 @@ export type UiOptions = {
 		// Specifies CSS colors to use at various tree depths
 		// With N strings, tiles at depth M use the color at index M % N
 	nonleafHeaderFontSz: number, // px
-	nonleafHeaderBgColor: string, // CSS color
 	// Styling for other components
 	infoModalImgSz: number, // px
 	ancestryBarBgColor: string, // CSS color
 	ancestryBarImgSz: number, // px
 	ancestryTileGap: number, // Gap between ancestor tiles, in px
 	tutPaneSz: number, // px
-	tutPaneBgColor: string, // CSS color
 	// Timing related
 	clickHoldDuration: number, // Time after mousedown when a click-and-hold is recognised, in ms
 	transitionDuration: number, // ms
-	autoActionDelay: number, // Time between auto-mode actions, in ms
+	autoActionDelay: number, // Time between auto-mode actions (incl transitions), in ms
 	// Other
 	useReducedTree: boolean,
 	searchSuggLimit: number, // Max number of search suggestions
-- 
cgit v1.2.3