aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/AncestryBar.vue4
-rw-r--r--src/components/SettingsModal.vue2
-rw-r--r--src/components/Tile.vue28
-rw-r--r--src/components/TutorialPane.vue4
4 files changed, 19 insertions, 19 deletions
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index c973195..a5bb1c0 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -29,8 +29,8 @@ export default defineComponent({
// For child layout
display: 'flex',
flexDirection: this.vert ? 'column' : 'row',
- gap: this.uiOpts.ancestryTileMargin + 'px',
- padding: this.uiOpts.ancestryTileMargin + 'px',
+ gap: this.uiOpts.ancestryTileGap + 'px',
+ padding: this.uiOpts.ancestryTileGap + 'px',
// Other
backgroundColor: this.uiOpts.ancestryBarBgColor,
boxShadow: this.uiOpts.shadowNormal,
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 5be06b7..92f4dce 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -146,7 +146,7 @@ export default defineComponent({
<hr class="border-stone-400"/>
<div>
<label>Animation Duration <input type="range" min="0" max="3000" class="mx-2 w-[3cm]"
- v-model.number="uiOpts.tileChgDuration" @change="onUiOptChg('tileChgDuration')"/></label>
+ v-model.number="uiOpts.transitionDuration" @change="onUiOptChg('transitionDuration')"/></label>
</div>
<hr class="border-stone-400"/>
<div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index e03f13e..5e4bccf 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -95,7 +95,7 @@ export default defineComponent({
},
boxShadow(): string {
if (this.highlight){
- return this.uiOpts.shadowHighlight;
+ return this.uiOpts.shadowHovered;
} else if (this.layoutNode.hasFocus && !this.inTransition){
return this.uiOpts.shadowFocused;
} else {
@@ -113,7 +113,7 @@ export default defineComponent({
boxShadow: this.boxShadow,
borderRadius: this.uiOpts.borderRadius + 'px',
// Transition related
- transitionDuration: (this.skipTransition ? 0 : this.uiOpts.tileChgDuration) + 'ms',
+ transitionDuration: (this.skipTransition ? 0 : this.uiOpts.transitionDuration) + 'ms',
transitionProperty: 'left, top, width, height, visibility',
transitionTimingFunction: 'ease-out',
zIndex: this.inTransition && this.wasClicked ? '1' : '0',
@@ -174,20 +174,20 @@ export default defineComponent({
},
leafHeaderStyles(): Record<string,string> {
let numChildren = this.tolNode.children.length;
- let headerColor = this.uiOpts.headerColor;
- for (let [threshold, color] of this.uiOpts.childThresholds){
+ let textColor = this.uiOpts.textColor;
+ for (let [threshold, color] of this.uiOpts.childQtyColors){
if (numChildren >= threshold){
- headerColor = color;
+ textColor = color;
} else {
break;
}
}
return {
- height: (this.uiOpts.leafHeaderFontSz + this.uiOpts.leafTilePadding * 2) + 'px',
- padding: this.uiOpts.leafTilePadding + 'px',
+ height: (this.uiOpts.leafHeaderFontSz + this.uiOpts.leafPadding * 2) + 'px',
+ padding: this.uiOpts.leafPadding + 'px',
lineHeight: this.uiOpts.leafHeaderFontSz + 'px',
fontSize: this.uiOpts.leafHeaderFontSz + 'px',
- color: headerColor,
+ color: textColor,
// For ellipsis
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -240,7 +240,7 @@ export default defineComponent({
lineHeight: this.lytOpts.headerSz + 'px',
fontSize: this.uiOpts.nonleafHeaderFontSz + 'px',
textAlign: 'center',
- color: this.uiOpts.nonleafHeaderColor,
+ color: this.uiOpts.textColor,
paddingLeft: '5px',
// For ellipsis
overflow: 'hidden',
@@ -266,7 +266,7 @@ export default defineComponent({
position: 'absolute',
backgroundColor: this.nonleafBgColor,
boxShadow: this.boxShadow,
- transitionDuration: this.uiOpts.tileChgDuration + 'ms',
+ transitionDuration: this.uiOpts.transitionDuration + 'ms',
transitionProperty: 'left, top, width, height, visibility',
transitionTimingFunction: 'ease-out',
};
@@ -326,7 +326,7 @@ export default defineComponent({
pos: {
handler(newVal, oldVal){
let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
- if (valChanged && this.uiOpts.tileChgDuration > 100 && !this.inTransition){
+ if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
this.inTransition = true;
}
},
@@ -335,7 +335,7 @@ export default defineComponent({
dims: {
handler(newVal, oldVal){
let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
- if (valChanged && this.uiOpts.tileChgDuration > 100 && !this.inTransition){
+ if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
this.inTransition = true;
}
},
@@ -358,13 +358,13 @@ export default defineComponent({
hidden(newVal, oldVal){
if (oldVal && !newVal){
this.justUnhidden = true;
- setTimeout(() => {this.justUnhidden = false;}, this.uiOpts.tileChgDuration);
+ setTimeout(() => {this.justUnhidden = false;}, this.uiOpts.transitionDuration);
}
},
hasFocus(newVal, oldVal){
if (newVal != oldVal && newVal){
this.inFlash = true;
- setTimeout(() => {this.inFlash = false;}, this.uiOpts.tileChgDuration);
+ setTimeout(() => {this.inFlash = false;}, this.uiOpts.transitionDuration);
}
},
},
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 6fa7bac..e32fedd 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -20,8 +20,8 @@ export default defineComponent({
computed: {
styles(): Record<string,string> {
return {
- backgroundColor: this.uiOpts.tutorialPaneBgColor,
- color: this.uiOpts.tutorialPaneTextColor,
+ backgroundColor: this.uiOpts.tutPaneBgColor,
+ color: this.uiOpts.textColor,
height: this.height,
};
},
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 15:52:12 +0000