From 2a0c04245f8ab5017ca96449cca8aeb36336edf3 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Sat, 25 Jun 2022 12:10:58 +1000 Subject: Reduce degrees-of-variance in options set Also add size prop to IconButton --- src/App.vue | 93 ++++++++++++++++++++++++++++++------------------------------- 1 file changed, 45 insertions(+), 48 deletions(-) (limited to 'src/App.vue') diff --git a/src/App.vue b/src/App.vue index 063f5ab..9abd5ac 100644 --- a/src/App.vue +++ b/src/App.vue @@ -55,39 +55,39 @@ function getDefaultLytOpts(): LayoutOptions { sweepToParent: 'prefer', // 'none' | 'prefer' | 'fallback' }; } -function getDefaultUiOpts(){ +function getDefaultUiOpts(lytOpts: LayoutOptions){ let screenSz = getBreakpoint(); - let bgColorLight = '#44403c', altColor = '#a3e623'; + // Reused option values + let textColor = '#fafaf9'; + let bgColor = '#292524', bgColorLight = '#44403c', bgColorDark = '#1c1917', + bgColorLight2 = '#57534e', bgColorDark2 = '#0e0c0b'; + let altColor = '#a3e623', altColorDark = '#65a30d'; + let accentColor = '#f59e0b'; + let scrollGap = getScrollBarWidth(); + // return { - // Shared styling - textColor: '#fafaf9', - bgColor: '#292524', + // Shared coloring/sizing + textColor, + bgColor, bgColorLight, - bgColorDark: '#1c1917', - bgColorLight2: '#57534e', - bgColorDark2: '#0e0c0b', + bgColorDark, + bgColorLight2, + bgColorDark2, altColor, - altColorDark: '#65a30d', + altColorDark, borderRadius: 5, // px shadowNormal: '0 0 2px black', - shadowHovered: '0 0 1px 2px' + altColor, - shadowFocused: '0 0 1px 2px orange', - // Styling for App - mainTileMargin: screenSz == 'sm' ? 6 : 10, // px - // Styling for tiles - childQtyColors: [[1, altColor], [10, 'orange'], [100, 'red']], - infoIconSz: 18, // px - infoIconMargin: 2, // px - leafPadding: 4, // px - leafHeaderFontSz: 15, // px - nonleafBgColors: ['#44403c', '#57534e'], - nonleafHeaderFontSz: 15, // px - // Styling for other components - infoModalImgSz: 200, // px + shadowHovered: '0 0 1px 2px ' + altColor, + shadowFocused: '0 0 1px 2px ' + accentColor, + // Component coloring + childQtyColors: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']], + nonleafBgColors: [bgColorLight, bgColorLight2], + nonleafHeaderColor: bgColorDark, ancestryBarBgColor: bgColorLight, - ancestryBarImgSz: 100, // px - ancestryTileGap: 5, // px + // Component sizing + ancestryBarBreadth: lytOpts.maxTileSz / 2 + lytOpts.tileSpacing*2 + scrollGap, // px tutPaneSz: 200, // px + scrollGap, // Timing related clickHoldDuration: 400, // ms transitionDuration: 300, // ms @@ -95,10 +95,9 @@ function getDefaultUiOpts(){ // Other useReducedTree: false, searchSuggLimit: 5, - jumpToSearchedNode: false, + searchJumpMode: false, tutorialSkip: false, disabledActions: new Set() as Set, - scrollGap: getScrollBarWidth(), }; } @@ -163,7 +162,7 @@ export default defineComponent({ } return ancestors.reverse(); }, - iconButtonStyles(): Record { + buttonStyles(): Record { return { color: this.uiOpts.textColor, backgroundColor: this.uiOpts.altColorDark, @@ -179,8 +178,7 @@ export default defineComponent({ }; }, ancestryBarContainerStyles(): Record { - let ancestryBarBreadth = this.detachedAncestors == null ? 0 : - this.uiOpts.ancestryBarImgSz + this.uiOpts.ancestryTileGap*2 + this.uiOpts.scrollGap; + let ancestryBarBreadth = this.detachedAncestors == null ? 0 : this.uiOpts.ancestryBarBreadth; let styles = { minWidth: 'auto', maxWidth: 'none', @@ -441,7 +439,7 @@ export default defineComponent({ while (!this.detachedAncestors!.includes(nodeInAncestryBar)){ nodeInAncestryBar = nodeInAncestryBar.parent!; } - if (!this.uiOpts.jumpToSearchedNode){ + if (!this.uiOpts.searchJumpMode){ this.onDetachedAncestorClick(nodeInAncestryBar!); setTimeout(() => this.expandToNode(name), this.uiOpts.transitionDuration); } else{ @@ -451,7 +449,7 @@ export default defineComponent({ return; } // Attempt tile-expand - if (this.uiOpts.jumpToSearchedNode){ + if (this.uiOpts.searchJumpMode){ // Extend layout tree let tolNode = this.tolMap.get(name)!; let nodesToAdd = [name] as string[]; @@ -639,7 +637,7 @@ export default defineComponent({ onResetSettings(){ localStorage.clear(); let defaultLytOpts = getDefaultLytOpts(); - let defaultUiOpts = getDefaultUiOpts(); + let defaultUiOpts = getDefaultUiOpts(defaultLytOpts); if (this.uiOpts.useReducedTree != defaultUiOpts.useReducedTree){ this.onTreeChange(); } @@ -699,7 +697,7 @@ export default defineComponent({ let handleResize = () => { // Update unmodified layout/ui options with defaults let lytOpts = getDefaultLytOpts(); - let uiOpts = getDefaultUiOpts(); + let uiOpts = getDefaultUiOpts(lytOpts); let changedTree = false; for (let prop of Object.getOwnPropertyNames(lytOpts)){ let item = localStorage.getItem('lyt ' + prop); @@ -710,6 +708,7 @@ export default defineComponent({ for (let prop of Object.getOwnPropertyNames(uiOpts)){ let item = localStorage.getItem('lyt ' + prop); if (item == null && this.uiOpts[prop] != uiOpts[prop as keyof typeof uiOpts]){ + console.log("Loaded UI prop " + prop) this.uiOpts[prop] = uiOpts[prop as keyof typeof uiOpts]; if (prop == 'useReducedTree'){ changedTree = true; @@ -757,8 +756,8 @@ export default defineComponent({ } else if (evt.key == 'F' && evt.ctrlKey){ // If search bar is open, swap search mode if (this.searchOpen){ - this.uiOpts.jumpToSearchedNode = !this.uiOpts.jumpToSearchedNode; - this.onSettingsChg([], ['jumpToSearchedNode']); + this.uiOpts.searchJumpMode = !this.uiOpts.searchJumpMode; + this.onSettingsChg([], ['searchJumpMode']); } } }, @@ -813,7 +812,8 @@ export default defineComponent({ return opts; }, getUiOpts(){ - let opts: {[x: string]: boolean|number|string|string[]|(string|number)[][]|Set} = getDefaultUiOpts(); + let opts: {[x: string]: boolean|number|string|string[]|(string|number)[][]|Set} = + getDefaultUiOpts(getDefaultLytOpts()); for (let prop of Object.getOwnPropertyNames(opts)){ let item = localStorage.getItem('ui ' + prop); if (item != null){ @@ -928,23 +928,20 @@ export default defineComponent({