diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 43 | ||||
| -rw-r--r-- | src/README.md | 1 | ||||
| -rw-r--r-- | src/components/Tile.vue | 2 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 2 | ||||
| -rw-r--r-- | 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, }; @@ -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 |