simplified duplication in tour manager when modal is open

nimiq · Mar 5, 2022 · 6131568 · 6131568
1 parent f041efe
commit 6131568
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 75 deletions.
diff --git a/src/components/NimiqSelector.vue b/src/components/NimiqSelector.vue
@@ -318,7 +318,3 @@ export default defineComponent({
     }
 }
 </style>
-
-function scrollIntoView() {
-  throw new Error('Function not implemented.');
-}
diff --git a/src/components/Tour.vue b/src/components/Tour.vue
@@ -658,17 +658,12 @@ export default defineComponent({
 // updated as data attributes allow to use a value like [data-opaified="1"] to select ceratain elements
 // as well as [data-opacified] to all elements with this attribute. @see _removeUIFromOldStep
 
-#app[data-tour-active] [data-opacified],
-#app[data-tour-active] ~ div [data-opacified] {
+#app[data-tour-active] [data-opacified] {
   filter: opacity(0.3);
 }
 
 #app[data-tour-active] [data-non-interactable],
-#app[data-tour-active] [data-non-interactable] *,
-// Select also modals which are not children of #app but siblings
-#app[data-tour-active] ~ div [data-non-interactable],
-#app[data-tour-active] ~ div [data-non-interactable] *
-{
+#app[data-tour-active] [data-non-interactable] *{
     user-select: none !important;
     pointer-events: none !important;
     cursor: not-allowed;

diff --git a/src/components/TourLargeScreenManager.vue b/src/components/TourLargeScreenManager.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script lang="ts">
-import { ITourBroadcast, ITourBroadcastStepChanged, TourStepIndex, IWalletHTMLElements } from '@/lib/tour';
-import { defineComponent, onMounted, onUnmounted, Ref, ref } from '@vue/composition-api';
+import { ITourBroadcast, ITourBroadcastStepChanged, TourStepIndex } from '@/lib/tour';
+import { defineComponent, onMounted, Ref, ref } from '@vue/composition-api';
 
 export default defineComponent({
     name: 'tour-large-screen-manager',
@@ -36,72 +36,15 @@ export default defineComponent({
 
         onMounted(async () => {
             show.value = true;
-            setTimeout(() => _checkIfModalIsOpen(), 2000);
         });
 
-        onUnmounted(() => _removeClonedManager());
-
         async function _stepChanged(
             { nSteps: newNSteps, currentStep: newCurrentStep }: ITourBroadcastStepChanged['payload']) {
             nSteps.value = newNSteps;
             currentStep.value = newCurrentStep;
-
-            await context.root.$nextTick();
-
-            _checkIfModalIsOpen();
-        }
-
-        function _checkIfModalIsOpen() {
-            const modalIsOpen = document.querySelector(IWalletHTMLElements.MODAL_CONTAINER) !== null;
-            if (modalIsOpen) {
-                _duplicateManager();
-            } else {
-                _removeClonedManager();
-            }
-        }
-
-        // remove the cloned manager if it exists due to a modal not being open anymore
-        // see _duplicateManager()
-        function _removeClonedManager() {
-            const tourManager = document.querySelector('body > .tour-manager');
-            if (tourManager) {
-                tourManager.remove();
-            }
-            const original = $originalManager.value!;
-            if (!original) return;
-            original.style.visibility = 'initial';
-        }
-
-        // at some steps, a modal will be openened in the tour and we still need to show the tour
-        // manager to the user, therefore, we need to duplicate the manager and set it to the body
-        // positionated over the modal
-        function _duplicateManager() {
-            _removeClonedManager();
-            const original = $originalManager.value!;
-            if (!original) return;
-
-            original.style.visibility = 'hidden';
-
-            const manager = original.cloneNode(true) as HTMLDivElement;
-
-            if (!manager) {
-                return;
-            }
-
-            manager.style.position = 'absolute';
-            manager.style.top = `${original.offsetTop}px`;
-            manager.style.left = `${original.offsetLeft}px`;
-            manager.style.width = `${original.offsetWidth}px`;
-            manager.style.height = `${original.offsetHeight}px`;
-            manager.style.visibility = 'inherit';
-            manager.style.zIndex = '10';
-            document.body.appendChild(manager);
-
-            manager.querySelector('button')!.addEventListener('click', () => endTour());
         }
 
         function endTour(emit = true) {
-            _removeClonedManager();
             show.value = false;
             if (emit) {
                 // Notify tour component through root instance event bus
@@ -134,6 +77,7 @@ export default defineComponent({
 .tour-manager {
     width: 100%;
     overflow: hidden;
+    z-index: 10;
 
     margin-bottom: 2rem;
 

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, Ref, ref, watch } from '@vue/composition-api';
-import { SmallPage, CloseButton } from '@nimiq/vue-components';
 import { useKeys } from '@/composables/useKeys';
-import { useWindowSize } from '../../composables/useWindowSize';
+import { CloseButton, SmallPage } from '@nimiq/vue-components';
+import { computed, defineComponent, onMounted, Ref, ref, watch } from '@vue/composition-api';
 import { useSwipes } from '../../composables/useSwipes';
-import { useSettingsStore } from '../../stores/Settings';
+import { useWindowSize } from '../../composables/useWindowSize';
 import { pointerdown } from '../../directives/PointerEvents';
+import { useSettingsStore } from '../../stores/Settings';
 
 export function enableModalTransition() {
     document.body.classList.remove('modal-transition-disabled');

diff --git a/src/components/modals/WelcomeModal.vue b/src/components/modals/WelcomeModal.vue
@@ -2,7 +2,7 @@
     <Modal class="welcome-modal" :showCloseButton="false">
         <!-- Nimiq SVG logo cropped in the top left corner -->
         <svg class="nimiq-logo-background" width="128" height="114" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path opacity=".05"
+            <path opacity=".04"
             d="m125.33 1.34-48.5-83.68A19.42 19.42 0 0 0 60-92h-97.02c-6.79 0-13.26 3.54-16.81 9.66l-48.51 83.68a18.81
             18.81 0 0 0 0 19.32l48.5 83.68A19.43 19.43 0 0 0-37 114h97.02c6.79 0 13.26-3.54 16.81-9.66l48.51-83.68a18.81
             18.81 0 0 0 0-19.32Z"