diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/HelpModal.vue | 8 | ||||
| -rw-r--r-- | src/components/Tile.vue | 6 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 7 |
3 files changed, 11 insertions, 10 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 6cdd521..4f35564 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -53,7 +53,7 @@ <template #content> <div :class="contentClasses"> <p> - Tilo attempts to display the Tree of Life by representing nodes with tiles, + Tilo displays the Tree of Life by representing nodes with tiles, and placing tiles within other tiles to show structure. </p> <img src="/treeWithTiles.jpg" alt="Tree and tile-layout comparison" @@ -62,7 +62,7 @@ Within a tile's header: <ul class="list-disc pl-4"> <li> - The color denotes the number of children. + The color denotes the number of child tiles. White means zero, <span style="color: limegreen">green</span> means 1+, <span style="color: darkorange">orange</span> means 10+, @@ -407,8 +407,8 @@ </template> </s-collapsible> </div> - <s-button v-if="!tutOpen" class="mx-auto mb-2" - :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial"> + <s-button class="mx-auto mb-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" + :disabled="tutOpen" @click.stop="onStartTutorial"> Start Tutorial </s-button> </div> diff --git a/src/components/Tile.vue b/src/components/Tile.vue index ab1538f..9c9fdfa 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -33,7 +33,7 @@ @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> </div> <transition name="fadein"> - <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70 z-20"></div> + <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70 z-20"/> </transition> </div> <tile v-for="child in visibleChildren" :key="child.name" @@ -43,7 +43,7 @@ @info-click="onInnerInfoIconClick"/> </div> <transition name="fadein"> - <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70"></div> + <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70"/> </transition> </div> </template> @@ -355,7 +355,7 @@ export default defineComponent({ }; }, infoIconClasses(): string { - return 'text-white/20 hover:text-white hover:cursor-pointer'; + return 'text-white/30 hover:text-white hover:cursor-pointer'; }, // For watching layoutNode data pos(){ diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 7667f60..3593a79 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -38,7 +38,7 @@ </span> </div> <div v-else-if="stage == 7" :style="contentStyles"> - {{touchDevice ? 'Tap' : 'Click'}} the play icon to start Auto Mode + {{touchDevice ? 'Tap' : 'Click'}} the play icon to traverse the tree automatically </div> <div v-else-if="stage == 8" :style="contentStyles"> {{touchDevice ? 'Tap' : 'Click'}} the settings icon @@ -75,9 +75,10 @@ import {Action, UiOptions} from '../lib'; export default defineComponent({ props: { - skipWelcome: {type: Boolean, default: false}, + actionsDone: {type: Object as PropType<Set<Action>>, required: true}, // Used to avoid disabling actions already seen triggerFlag: {type: Boolean, required: true}, // Used to indicate that a tutorial-requested 'trigger' action has been done + skipWelcome: {type: Boolean, default: false}, uiOpts: {type: Object as PropType<UiOptions>, required: true}, }, data(){ @@ -122,7 +123,7 @@ export default defineComponent({ // If starting tutorial, disable 'all' actions if (newVal == 1 && !this.disabledOnce){ for (let action of this.stageActions){ - if (action != null){ + if (action != null && !this.actionsDone.has(action)){ this.uiOpts.disabledActions.add(action); } } |