From a82455632405d28c15d21dd5cb237674dc6de1c6 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 23 May 2022 08:57:47 +1000
Subject: Make settings icon fit-in with search/help/etc

---
 src/App.vue | 40 +++++++++++++---------------------------
 1 file changed, 13 insertions(+), 27 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index e26de01..4a5efe8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,8 @@ import Tile from './components/Tile.vue';
 import AncestryBar from './components/AncestryBar.vue';
 import TileInfoModal from './components/TileInfoModal.vue';
 import HelpModal from './components/HelpModal.vue';
+import SettingsModal from './components/SettingsModal.vue';
 import SearchModal from './components/SearchModal.vue';
-import SettingsPane from './components/SettingsPane.vue';
 // Icons
 import HelpIcon from './components/icon/HelpIcon.vue';
 import SearchIcon from './components/icon/SearchIcon.vue';
@@ -104,6 +104,7 @@ export default defineComponent({
 			helpOpen: false,
 			searchOpen: false,
 			settingsOpen: false,
+			tutorialOpen: true,
 			// For search and auto-mode
 			modeRunning: false,
 			lastFocused: null as LayoutNode | null,
@@ -604,8 +605,8 @@ export default defineComponent({
 	},
 	components: {
 		Tile, AncestryBar,
-		HelpIcon, SearchIcon, PlayIcon, SettingsIcon,
-		TileInfoModal, HelpModal, SearchModal, SettingsPane,
+		HelpIcon, SettingsIcon, SearchIcon, PlayIcon,
+		TileInfoModal, HelpModal, SearchModal, SettingsModal,
 	},
 });
 </script>
@@ -624,13 +625,16 @@ export default defineComponent({
 		@detached-ancestor-click="onDetachedAncestorClick" @info-icon-click="onInfoIconClick"/>
 	<!-- Icons -->
 	<help-icon @click="onHelpIconClick"
-		class="absolute bottom-[6px] left-[6px] w-[18px] h-[18px]
+		class="absolute bottom-[6px] right-[6px] w-[18px] h-[18px]
+			text-white/40 hover:text-white hover:cursor-pointer"/>
+	<settings-icon @click="onSettingsIconClick"
+		class="absolute bottom-[6px] right-[30px] w-[18px] h-[18px]
 			text-white/40 hover:text-white hover:cursor-pointer"/>
 	<search-icon @click="onSearchIconClick"
-		class="absolute bottom-[6px] left-[30px] w-[18px] h-[18px]
+		class="absolute bottom-[6px] right-[54px] w-[18px] h-[18px]
 			text-white/40 hover:text-white hover:cursor-pointer"/>
 	<play-icon @click="onPlayIconClick"
-		class="absolute bottom-[6px] left-[54px] w-[18px] h-[18px]
+		class="absolute bottom-[6px] right-[78px] w-[18px] h-[18px]
 			text-white/40 hover:text-white hover:cursor-pointer"/>
 	<!-- Modals -->
 	<transition name="fade">
@@ -646,18 +650,9 @@ export default defineComponent({
 		<help-modal v-if="helpOpen" :uiOpts="uiOpts" @help-modal-close="helpOpen = false"/>
 	</transition>
 	<!-- Settings -->
-	<transition name="slide-bottom-right">
-		<settings-pane v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts"
-			@settings-close="settingsOpen = false"
-			@layout-option-change="onLayoutOptionChange" @tree-change="onTreeChange"/>
-		<div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px] invisible">
-			<!-- Note: Above enclosing div prevents transition interference with inner rotate -->
-			<div class="absolute bottom-[-50px] right-[-50px] w-[100px] h-[100px] visible -rotate-45
-				bg-black text-white hover:cursor-pointer" @click="onSettingsIconClick">
-				<settings-icon class="w-6 h-6 mx-auto mt-2"/>
-			</div>
-		</div>
-	</transition>
+	<settings-modal v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts"
+		@settings-close="settingsOpen = false"
+		@layout-option-change="onLayoutOptionChange" @tree-change="onTreeChange"/>
 	<!-- Overlay used to prevent interaction and capture clicks -->
 	<div :style="{visibility: modeRunning ? 'visible' : 'hidden'}"
 		class="absolute left-0 top-0 w-full h-full" @click="modeRunning = false"></div>
@@ -673,13 +668,4 @@ export default defineComponent({
 	transition-duration: 300ms;
 	transition-timing-function: ease-out;
 }
-.slide-bottom-right-enter-from, .slide-bottom-right-leave-to {
-	transform: translate(100%, 100%);
-	opacity: 0;
-}
-.slide-bottom-right-enter-active, .slide-bottom-right-leave-active {
-	transition-property: transform, opacity;
-	transition-duration: 300ms;
-	transition-timing-function: ease-in-out;
-}
 </style>
-- 
cgit v1.2.3

