Skip to content

Commit

Permalink
small tweaks and ui improvments
Browse files Browse the repository at this point in the history
  • Loading branch information
@onmax
onmax committed Feb 3, 2022
1 parent 7ecc535 commit b5b88d3
Show file tree
Hide file tree
Showing 24 changed files with 364 additions and 156 deletions.
148 changes: 107 additions & 41 deletions src/components/Tour.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,15 @@
@click="goToPrevStep()"
style="transform: rotate(180deg)"
>
<CaretRightIcon />
<CaretRightSmallIcon />
</button>
<button
class="next"
:class="{ loading: isLoading }"
:disabled="disableNextStep"
@click="!isLoading && goToNextStep()"
>
<CaretRightIcon v-if="!isLoading" />
<CaretRightSmallIcon v-if="!isLoading" />
<CircleSpinner v-else class="circle-spinner" />
</button>
</div>
Expand All @@ -102,7 +102,7 @@
import { useAccountStore } from '@/stores/Account';
import { useNetworkStore } from '@/stores/Network';
import { useTransactionsStore } from '@/stores/Transactions';
import { CircleSpinner } from '@nimiq/vue-components';
import { CircleSpinner, CaretRightSmallIcon } from '@nimiq/vue-components';
import {
computed,
defineComponent,
Expand All @@ -120,8 +120,8 @@ import {
getTour,
MountedReturnFn, TourBroadcast, TourStep,
TourStepIndex,
WalletHTMLElements,
} from '../lib/tour';
import CaretRightIcon from './icons/CaretRightIcon.vue';
import PartyConfettiIcon from './icons/PartyConfettiIcon.vue';
import TourPreviousLeftArrowIcon from './icons/TourPreviousLeftArrowIcon.vue';
Expand Down Expand Up @@ -217,7 +217,10 @@ export default defineComponent({
isLoading.value = false;
window.addEventListener('keyup', _onKeyDown);
window.addEventListener('click', _userClicked());
setTimeout(() => {
window.addEventListener('click', _userClicked());
}, 100); // avoid click event to be triggered by the setting button
// window.addEventListener('resize', _OnResize(_OnResizeEnd)); TODO
const app = document.querySelector('#app');
Expand All @@ -236,22 +239,26 @@ export default defineComponent({
// Dont allow user to interact with the page while it is loading
// But allow to end it
watch([isLoading, disconnected], async () => {
const app = document.querySelector('#app main') as HTMLDivElement;
if (isLoading.value || disconnected.value) {
app.setAttribute('data-non-interactable', '');
} else {
app.removeAttribute('data-non-interactable');
}
// FIXME we should wait until the button is rendered and the we could
// TODO Avoid interaction with any of the elements when loading except tour elements (bar, manager and tooltip)
// const elements = Object.values(WalletHTMLElements).filter((e) => e);
// if (isLoading.value || disconnected.value) {
// elements.forEach((element) => {
// const el = document.querySelector(element);
// if (!el) return;
// el.setAttribute('data-non-interactable', 'loading');
// });
// } else {
// elements.forEach((element) => {
// const el = document.querySelector(element);
// if (!el) return;
// el.removeAttribute('data-non-interactable');
// });
// }
// FIXME we should wait until the buttons are rendered and the we could
// execute _toggleDisabledButtons but it is kind of random the amount of time
// it takes to render the button. I don't know how to fix it.
// Ensure that we disabled 'Receive Free NIM' button
await sleep(500); // TODO
// TODO Remove this code for the network, find other way
// steps = Object.values(getTour(tourStore.tour?.name, context));
// it takes to render the button. I don't know how to fix it. Waiting 500ms works.
await sleep(500);
_toggleDisabledButtons(steps[currentStep.value]?.ui.disabledButtons, true);
});
Expand All @@ -274,7 +281,6 @@ export default defineComponent({
const { path: currentPath, ui: currentUI } = steps[currentStepIndex]!;
const { path: futurePath, ui: futureUI, lifecycle: futureLifecycle } = steps[futureStepIndex]!;
isLoading.value = true;
tour!.stop();
await sleep(500);
Expand All @@ -294,6 +300,7 @@ export default defineComponent({
_toggleDisabledButtons(currentUI.disabledButtons, false);
_toggleDisabledButtons(futureUI.disabledButtons, true);
_addAttributes(futureUI, futureStepIndex);
await context.root.$nextTick();
if (futurePath !== currentPath) {
await sleep(500);
Expand All @@ -302,14 +309,14 @@ export default defineComponent({
_removeAttributes(currentStepIndex);
tour!.start(futureStepIndex.toString());
await context.root.$nextTick();
// FIXME Instead of doing tour!.end and tour!.start, we could also use .nextStep() or previsousStep()
// The problem with this solution is that some animations glitch the UI so it needs further
// investigation
// goingForward ? tour!.nextStep() : tour!.previousStep();
// mounted
isLoading.value = false;
disableNextStep.value = futureStepIndex >= nSteps.value - 1 || !!futureUI.isNextStepDisabled;
unmounted = await futureLifecycle?.mounted?.({
Expand Down Expand Up @@ -338,6 +345,17 @@ export default defineComponent({
context.root.$on('nimiq-tour-event', (data: TourBroadcast) => {
if (data.type === 'end-tour') endTour();
});
context.root.$on('nimiq-tour-event', (data: TourBroadcast) => {
if (data.type === 'clicked-outside-tour') {
const tourManager = document.querySelector('.tour-control-bar');
if (tourManager) {
tourManager.classList.add('flash');
setTimeout(() => {
tourManager.classList.remove('flash');
}, 400);
}
}
});
}
function _userClicked() {
Expand Down Expand Up @@ -382,12 +400,17 @@ export default defineComponent({
}
}
function _onScrollLockedElement(e: Event, el: Element) {
e.preventDefault();
el.scrollTop = 0;
}
function _addAttributes(
uiConfig: TourStep['ui'],
stepIndex: TourStepIndex,
) {
const fadedElements = uiConfig.fadedElements || [];
const disabledElements = uiConfig.disabledElements || [];
const scrollLockedElements = uiConfig.scrollLockedElements || [];
disabledElements.filter((e) => e).forEach((element) => {
const el = document.querySelector(element);
Expand All @@ -401,20 +424,33 @@ export default defineComponent({
el.setAttribute('data-opacified', stepIndex.toString());
el.setAttribute('data-non-interactable', stepIndex.toString());
});
scrollLockedElements.filter((e) => e).forEach((element) => {
const el = document.querySelector(element);
if (!el) return;
el.setAttribute('data-scroll-locked', stepIndex.toString());
// Avoid scrolling when tooltip is instantiated
el.addEventListener('scroll', (e) => _onScrollLockedElement(e, el));
el.scrollTop = 0;
});
}
function _removeAttributes(stepIndex: TourStepIndex) {
document
.querySelectorAll(`[data-non-interactable="${stepIndex}"]`)
document.querySelectorAll(`[data-non-interactable="${stepIndex}"]`)
.forEach((el) => {
el.removeAttribute('data-non-interactable');
});
document
.querySelectorAll(`[data-opacified="${stepIndex}"]`)
document.querySelectorAll(`[data-opacified="${stepIndex}"]`)
.forEach((el) => {
el.removeAttribute('data-opacified');
});
document.querySelectorAll(`[data-scroll-locked="${stepIndex}"]`)
.forEach((el) => {
el.removeAttribute('data-scroll-locked');
el.addEventListener('scroll', (e) => _onScrollLockedElement(e, el));
});
}
async function endTour(soft = false) {
Expand Down Expand Up @@ -495,7 +531,7 @@ export default defineComponent({
// control bar
currentStep,
nSteps,
isLoading: disconnected || isLoading,
isLoading: computed(() => disconnected.value || isLoading.value),
disableNextStep,
// actions
Expand All @@ -509,7 +545,7 @@ export default defineComponent({
};
},
components: {
CaretRightIcon,
CaretRightSmallIcon,
TourPreviousLeftArrowIcon,
PartyConfettiIcon,
CircleSpinner,
Expand All @@ -530,24 +566,43 @@ export default defineComponent({
[data-tour-active] [data-non-interactable] * {
user-select: none !important;
pointer-events: none !important;
cursor: not-allowed;
}
[data-tour-active]#app > *:not(.tour):not(.tour-manager) {
cursor: not-allowed;
[data-tour-active] [data-scroll-locked],
[data-tour-active] [data-scroll-locked] * {
overflow: hidden;
}
[data-tour-active] button.highlighted {
[data-tour-active] button.green-highlight {
background: linear-gradient(
274.28deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 27.6%, rgba(255, 255, 255, 0) 53.12%,
rgba(255, 255, 255, 0.2) 81.25%, rgba(255, 255, 255, 0) 100%
),
radial-gradient(100% 100% at 100% 100%, #41A38E 0%, #21BCA5 100%) !important;
), var(--nimiq-green-bg) !important;
background-blend-mode: hard-light, normal !important;
}
[data-tour-active] button.gray-highlight {
background: linear-gradient(
274.28deg, rgba(31, 35, 72, 0) 0%, rgba(31, 35, 72, 0.07) 27.6%, rgba(31, 35, 72, 0) 53.12%,
rgba(31, 35, 72, 0.07) 81.25%, rgba(31, 35, 72, 0) 100%) !important;
background-blend-mode: hard-light, normal !important;
}
</style>

<style lang="scss" scoped>
.tour {
position: relative;
font-family: Mulish, Muli, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
position: absolute;
width: 100vw;
height: 100vh;
pointer-events: none;
> * {
pointer-events: initial;
}
button {
width: min-content;
Expand All @@ -571,6 +626,7 @@ export default defineComponent({
border-radius: 1rem;
width: clamp(200px, 255px, calc(100vw - 2rem));
padding: 2rem;
z-index: 10;
.content {
display: flex;
Expand Down Expand Up @@ -714,9 +770,7 @@ export default defineComponent({
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
z-index: 6;
// TODO Cannot use CSS variables here
background: radial-gradient(100% 100% at 100% 100%, #265dd7 0%, #0582ca 100%);
background: var(--nimiq-light-blue-bg);
button {
padding: 1.4rem 1.6rem 1rem 1.6rem;
Expand Down Expand Up @@ -749,14 +803,15 @@ export default defineComponent({
}
&.next {
padding-left: 0.75rem;
&.loading {
padding-left: 0;
cursor: inherit;
& ::v-deep svg path:nth-child(1) {
& ::v-deep svg path {
stroke: var(--nimiq-white);
&:nth-child(2) {
opacity: 0.3;
}
}
}
}
Expand All @@ -772,6 +827,17 @@ export default defineComponent({
letter-spacing: -0.4px;
font-variant-numeric: tabular-nums;
}
}
[data-tour-active] .flash {
animation: flash 0.4s;
}
@keyframes flash {
from { background: var(--nimiq-light-blue-bg); }
50% { background: radial-gradient(100% 100% at bottom right, hsl(221, 70%, 70%), hsl(202, 95%, 61%)); }
to { background: var(--nimiq-light-blue-bg); }
}
.remove_me {
Expand Down
Loading

0 comments on commit b5b88d3

Please sign in to comment.