From 89fc34f82956f2410ee7f1d90e03945e10805dda Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Sun, 3 Jul 2022 16:39:12 +1000 Subject: Add styling, mainly for TileInfoModal and Settings --- src/App.vue | 92 +++++++++++++++++++++++++++++-------------------------------- 1 file changed, 44 insertions(+), 48 deletions(-) (limited to 'src/App.vue') diff --git a/src/App.vue b/src/App.vue index 68888ee..47bbd1e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,7 +21,7 @@ -
+
- - +
@@ -87,7 +87,7 @@ import PauseIcon from './components/icon/PauseIcon.vue'; import SettingsIcon from './components/icon/SettingsIcon.vue'; import HelpIcon from './components/icon/HelpIcon.vue'; // Other - // Note: Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain + // Note: Import paths lack a .ts or .js because .ts makes vue-tsc complain, and .js makes vite complain import {TolNode, TolMap} from './tol'; import {LayoutNode, LayoutOptions, LayoutTreeChg, initLayoutTree, initLayoutMap, tryLayout} from './layout'; @@ -97,7 +97,7 @@ import {arraySum, randWeightedChoice, timeout} from './util'; // Type representing auto-mode actions type AutoAction = 'move across' | 'move down' | 'move up' | Action; -// Function used in auto-mode to help avoid action cycles +// Function used in auto-mode to reduce action cycles function getReverseAction(action: AutoAction): AutoAction | null { const reversePairs: AutoAction[][] = [ ['move down', 'move up'], @@ -111,11 +111,10 @@ function getReverseAction(action: AutoAction): AutoAction | null { return null; } } -// For options export default defineComponent({ data(){ - // Initial tree-of-life data + // Create initial tree-of-life data let initialTolMap: TolMap = new Map(); initialTolMap.set("", new TolNode()); let layoutTree = initLayoutTree(initialTolMap, "", 0); @@ -160,7 +159,7 @@ export default defineComponent({ ancestryBarInTransition: false, tutPaneInTransition: false, // Other - justInitialised: false, // Used to skip transition for tile initially loaded from server + justInitialised: false, // Used to skip transition for the tile initially loaded from server changedSweepToParent: false, // Set during search animation for efficiency excessTolNodeThreshold: 1000, // Threshold where excess tolMap entries get removed }; @@ -187,11 +186,10 @@ export default defineComponent({ return { color: this.uiOpts.textColor, backgroundColor: this.uiOpts.altColorDark, - aspectRatio: '1/1', }; }, tutPaneContainerStyles(): Record { - if (this.uiOpts.breakpoint != 'lg'){ + if (this.uiOpts.breakpoint == 'sm'){ return { minHeight: (this.tutPaneOpen ? this.uiOpts.tutPaneSz : 0) + 'px', maxHeight: (this.tutPaneOpen ? this.uiOpts.tutPaneSz : 0) + 'px', @@ -204,7 +202,6 @@ export default defineComponent({ position: 'absolute', bottom: '0.5cm', right: '0.5cm', - zIndex: '1', visibility: this.tutPaneOpen ? 'visible' : 'hidden', transitionProperty: 'visibility', transitionDuration: this.uiOpts.transitionDuration + 'ms', @@ -212,7 +209,7 @@ export default defineComponent({ } }, tutPaneStyles(): Record { - if (this.uiOpts.breakpoint != 'lg'){ + if (this.uiOpts.breakpoint == 'sm'){ return { height: this.uiOpts.tutPaneSz + 'px', } @@ -344,7 +341,7 @@ export default defineComponent({ } this.handleActionForTutorial('collapse'); this.setLastFocused(null); - // + // Relayout let success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, { allowCollapse: false, chg: {type: 'collapse', node: layoutNode, tolMap: this.tolMap}, @@ -730,16 +727,16 @@ export default defineComponent({ this.settingsOpen = true; }, async onSettingChg(optionType: OptionType, option: string, - {save = true, relayout = false, reinit = false} = {}){ - if (save){ - if (optionType == 'LYT'){ - localStorage.setItem(`${optionType} ${option}`, - String(this.lytOpts[option as keyof LayoutOptions])); - } else if (optionType == 'UI') { - localStorage.setItem(`${optionType} ${option}`, - String(this.uiOpts[option as keyof UiOptions])); - } - } + {relayout = false, reinit = false} = {}){ + // Save setting + if (optionType == 'LYT'){ + localStorage.setItem(`${optionType} ${option}`, + String(this.lytOpts[option as keyof LayoutOptions])); + } else if (optionType == 'UI') { + localStorage.setItem(`${optionType} ${option}`, + String(this.uiOpts[option as keyof UiOptions])); + } + // Possibly relayout/reinitialise if (reinit){ this.reInit(); } else if (relayout){ @@ -776,7 +773,6 @@ export default defineComponent({ this.tutTriggerAction = triggerAction; }, onTutorialSkip(): void { - // Remember to skip in future sessions localStorage.setItem('UI tutorialSkip', String(true)); }, onStartTutorial(): void { @@ -947,6 +943,30 @@ export default defineComponent({ } return opts; }, + // For relayout + relayoutWithCollapse(secondPass = true): boolean { + let success; + if (this.overflownRoot){ + success = tryLayout(this.activeRoot, this.tileAreaDims, + {...this.lytOpts, layoutType: 'sqr-overflow'}, {allowCollapse: false, layoutMap: this.layoutMap}); + } else { + success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, + {allowCollapse: true, layoutMap: this.layoutMap}); + if (secondPass){ + // Relayout again, which can help allocate remaining tiles 'evenly' + success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, + {allowCollapse: false, layoutMap: this.layoutMap}); + } + } + return success; + }, + async updateAreaDims(){ + let mainAreaEl = this.$refs.mainArea as HTMLElement; + this.mainAreaDims = [mainAreaEl.offsetWidth, mainAreaEl.offsetHeight]; + await this.$nextTick(); // Wait until ancestor-bar is laid-out + let tileAreaEl = this.$refs.tileArea as HTMLElement; + this.tileAreaDims = [tileAreaEl.offsetWidth, tileAreaEl.offsetHeight]; + }, // For transitions relayoutDuringAncestryBarTransition(): void { let timerId = setInterval(async () => { @@ -980,30 +1000,6 @@ export default defineComponent({ } }, this.uiOpts.transitionDuration + 300); }, - // For relayout - relayoutWithCollapse(secondPass = true): boolean { - let success; - if (this.overflownRoot){ - success = tryLayout(this.activeRoot, this.tileAreaDims, - {...this.lytOpts, layoutType: 'sqr-overflow'}, {allowCollapse: false, layoutMap: this.layoutMap}); - } else { - success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, - {allowCollapse: true, layoutMap: this.layoutMap}); - if (secondPass){ - // Relayout again, which can help allocate remaining tiles 'evenly' - success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, - {allowCollapse: false, layoutMap: this.layoutMap}); - } - } - return success; - }, - async updateAreaDims(){ - let mainAreaEl = this.$refs.mainArea as HTMLElement; - this.mainAreaDims = [mainAreaEl.offsetWidth, mainAreaEl.offsetHeight]; - await this.$nextTick(); // Wait until ancestor-bar is laid-out - let tileAreaEl = this.$refs.tileArea as HTMLElement; - this.tileAreaDims = [tileAreaEl.offsetWidth, tileAreaEl.offsetHeight]; - }, // Other resetMode(): void { this.infoModalNodeName = null; -- cgit v1.2.3