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/components/AncestryBar.vue | 9 ++++++--- src/components/IconButton.vue | 6 ++++-- src/components/SearchModal.vue | 10 +++++----- src/components/SettingsModal.vue | 2 +- src/components/Tile.vue | 26 ++++++++++++++------------ src/components/TileInfoModal.vue | 6 +++--- 6 files changed, 33 insertions(+), 26 deletions(-) (limited to 'src/components') diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue index a5bb1c0..0f95d00 100644 --- a/src/components/AncestryBar.vue +++ b/src/components/AncestryBar.vue @@ -15,10 +15,13 @@ export default defineComponent({ uiOpts: {type: Object as PropType, required: true}, }, computed: { + imgSz(){ + return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing*2 - this.uiOpts.scrollGap; + }, usedNodes(){ // Childless versions of 'nodes' used to parameterise return this.nodes.map(n => { let newNode = new LayoutNode(n.name, []); - newNode.dims = [this.uiOpts.ancestryBarImgSz, this.uiOpts.ancestryBarImgSz]; + newNode.dims = [this.imgSz, this.imgSz]; return newNode; }); }, @@ -29,8 +32,8 @@ export default defineComponent({ // For child layout display: 'flex', flexDirection: this.vert ? 'column' : 'row', - gap: this.uiOpts.ancestryTileGap + 'px', - padding: this.uiOpts.ancestryTileGap + 'px', + gap: this.lytOpts.tileSpacing + 'px', + padding: this.lytOpts.tileSpacing + 'px', // Other backgroundColor: this.uiOpts.ancestryBarBgColor, boxShadow: this.uiOpts.shadowNormal, diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue index 7ce5da4..71dddc3 100644 --- a/src/components/IconButton.vue +++ b/src/components/IconButton.vue @@ -3,14 +3,16 @@ import {defineComponent, PropType} from 'vue'; export default defineComponent({ props: { + size: {type: Number, default: 36}, disabled: {type: Boolean, default: false}, }, }); diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index 1a3ef27..a3fbd14 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -24,13 +24,13 @@ export default defineComponent({ }, computed: { infoIconStyles(): Record { - let size = this.uiOpts.infoIconSz + 'px'; + let size = '18px'; return { width: size, height: size, minWidth: size, minHeight: size, - margin: this.uiOpts.infoIconMargin + 'px', + margin: '2px', }; }, suggDisplayStrings(): [string, string, string][] { @@ -71,8 +71,8 @@ export default defineComponent({ } }, onSearchModeChg(){ - this.uiOpts.jumpToSearchedNode = !this.uiOpts.jumpToSearchedNode; - this.$emit('settings-chg', [], ['jumpToSearchedNode']); + this.uiOpts.searchJumpMode = !this.uiOpts.searchJumpMode; + this.$emit('settings-chg', [], ['searchJumpMode']); }, resolveSearch(tolNodeName: string){ if (tolNodeName == ''){ @@ -223,7 +223,7 @@ export default defineComponent({
+ :class="uiOpts.searchJumpMode ? 'text-stone-500' : 'text-stone-300'"/>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index 92f4dce..8cebf7c 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -151,7 +151,7 @@ export default defineComponent({
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index df281f5..1559f06 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -102,6 +102,9 @@ export default defineComponent({ return this.uiOpts.shadowNormal; } }, + fontSz(): number { + return 0.7 * this.lytOpts.headerSz; + }, styles(): Record { let layoutStyles = { position: 'absolute', @@ -151,7 +154,7 @@ export default defineComponent({ return { // Image (and scrims) backgroundImage: this.tolNode.imgName != null ? - 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + + 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' + 'url(\'/img/' + (this.tolNode.imgName as string).replaceAll('\'', '\\\'') + '\')' : 'none', backgroundColor: '#1c1917', @@ -183,10 +186,10 @@ export default defineComponent({ } } return { - height: (this.uiOpts.leafHeaderFontSz + this.uiOpts.leafPadding * 2) + 'px', - padding: this.uiOpts.leafPadding + 'px', - lineHeight: this.uiOpts.leafHeaderFontSz + 'px', - fontSize: this.uiOpts.leafHeaderFontSz + 'px', + height: (this.fontSz * 1.3) + 'px', + padding: this.fontSz * 0.3 + 'px', + lineHeight: this.fontSz + 'px', + fontSize: this.fontSz + 'px', color: textColor, // For ellipsis overflow: 'hidden', @@ -220,7 +223,7 @@ export default defineComponent({ height: this.lytOpts.headerSz + 'px', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', - backgroundColor: this.uiOpts.bgColorDark, + backgroundColor: this.uiOpts.nonleafHeaderColor, }; if (this.isOverflownRoot){ styles = { @@ -238,7 +241,7 @@ export default defineComponent({ nonleafHeaderTextStyles(): Record { return { lineHeight: this.lytOpts.headerSz + 'px', - fontSize: this.uiOpts.nonleafHeaderFontSz + 'px', + fontSize: this.fontSz + 'px', textAlign: 'center', color: this.uiOpts.textColor, paddingLeft: '5px', @@ -249,15 +252,14 @@ export default defineComponent({ }; }, infoIconStyles(): Record { - let size = this.uiOpts.infoIconSz + 'px'; + let size = (this.lytOpts.headerSz * 0.8) + 'px'; + let marginSz = (this.lytOpts.headerSz * 0.2) + 'px'; return { width: size, height: size, minWidth: size, minHeight: size, - margin: this.uiOpts.infoIconMargin + 'px', - marginTop: 'auto', - marginLeft: 'auto', + margin: this.isLeaf ? `auto ${marginSz} ${marginSz} auto` : `auto ${marginSz}`, }; }, sepSweptAreaStyles(): Record { @@ -446,7 +448,7 @@ export default defineComponent({ height: '100%', // Image (and scrims) backgroundImage: (this.tolNode.imgName![idx]! != null) ? - 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + + 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' + 'url(\'/img/' + this.tolNode.imgName![idx]!.replaceAll('\'', '\\\'') + '\')' : 'none', backgroundColor: '#1c1917', diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 423a2f5..90ad9a7 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -50,7 +50,7 @@ export default defineComponent({ }, dummyNode(): LayoutNode { let newNode = new LayoutNode(this.nodeName, []); - newNode.dims = [this.uiOpts.infoModalImgSz, this.uiOpts.infoModalImgSz]; + newNode.dims = [this.lytOpts.maxTileSz, this.lytOpts.maxTileSz]; return newNode; }, }, @@ -69,8 +69,8 @@ export default defineComponent({ 'none', backgroundColor: '#1c1917', backgroundSize: 'cover', - width: this.uiOpts.infoModalImgSz + 'px', - height: this.uiOpts.infoModalImgSz + 'px', + width: this.lytOpts.maxTileSz + 'px', + height: this.lytOpts.maxTileSz + 'px', }; }, licenseToUrl(license: string){ -- cgit v1.2.3