mirror of
https://github.com/IvarK/AntimatterDimensionsSourceCode.git
synced 2024-09-20 19:11:46 +00:00
Improve confirmation modal toggle visuals (#2396)
* improve confirmation modal toggle visuals * fix confirmation toggle tooltip arrow pixel alignment
This commit is contained in:
Jane Doe
GitHub
parent
57cb260876
commit
1a23ccbbeb
|
|
@ -134,7 +134,7 @@ export const Themes = {
|
|||
Theme.create("S4", { secret: true, }),
|
||||
Theme.create("S5", { secret: true, }),
|
||||
Theme.create("S6", { dark: true, animated: true, secret: true, }),
|
||||
Theme.create("S7", { secret: true, }),
|
||||
Theme.create("S7", { metro: true, secret: true, }),
|
||||
Theme.create("S8", { metro: true, secret: true, }),
|
||||
Theme.create("S9", { secret: true, }),
|
||||
Theme.create("S10", { dark: true, metro: true, animated: true, secret: true, }),
|
||||
|
|
|
|||
|
|
@ -5247,7 +5247,6 @@ screen and (max-width: 480px) {
|
|||
font-size: 1.4rem;
|
||||
padding: 1rem;
|
||||
transition-duration: 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.c-modal__title {
|
||||
|
|
@ -5274,13 +5273,105 @@ screen and (max-width: 480px) {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.c-modal__confirmation-check {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: 1rem 0.5rem 0;
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
padding: 0;
|
||||
.c-modal__confirmation-toggle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--color-gh-purple);
|
||||
font-size: 1.9rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border: 0.3rem solid black;
|
||||
border-top-right-radius: 0.3rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition-duration: 0.2s;
|
||||
position: absolute;
|
||||
top: -0.3rem;
|
||||
right: -0.3rem;
|
||||
}
|
||||
|
||||
.c-modal__confirmation-toggle:hover {
|
||||
transform: scale(1.1) translate(-0.15rem, 0.15rem);
|
||||
}
|
||||
|
||||
.s-base--metro .c-modal__confirmation-toggle {
|
||||
border-radius: 0;
|
||||
border-width: 0.1rem;
|
||||
top: -0.1rem;
|
||||
right: -0.1rem;
|
||||
}
|
||||
|
||||
.t-s6 .c-modal__confirmation-toggle,
|
||||
.t-s10 .c-modal__confirmation-toggle {
|
||||
border: 0.1rem solid #1b5e20;
|
||||
top: -0.1rem;
|
||||
right: -0.1rem;
|
||||
}
|
||||
|
||||
.c-modal__confirmation-toggle--active {
|
||||
background: var(--color-good);
|
||||
}
|
||||
|
||||
.c-modal__confirmation-toggle__tooltip {
|
||||
opacity: 0;
|
||||
transition-duration: 0.2s;
|
||||
font-size: 1.4rem;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-base);
|
||||
border: 0.3rem solid black;
|
||||
border-radius: 0.8rem;
|
||||
min-width: 20rem;
|
||||
margin-left: 0;
|
||||
padding: 0.4rem;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.s-base--metro .c-modal__confirmation-toggle__tooltip {
|
||||
border-radius: 0;
|
||||
border-width: 0.1rem;
|
||||
}
|
||||
|
||||
.t-s6 .c-modal__confirmation-toggle__tooltip,
|
||||
.t-s10 .c-modal__confirmation-toggle__tooltip {
|
||||
border: 0.1rem solid #1b5e20;
|
||||
}
|
||||
|
||||
.c-modal__confirmation-toggle__tooltip:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -0.7rem;
|
||||
margin-bottom: 0;
|
||||
width: 0;
|
||||
border-top: 0 solid black;
|
||||
border-right: 0.7rem solid transparent;
|
||||
border-left: 0.7rem solid transparent;
|
||||
content: " ";
|
||||
transition-duration: 0.2s;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.c-modal__confirmation-toggle:hover .c-modal__confirmation-toggle__tooltip {
|
||||
opacity: 1;
|
||||
bottom: calc(100% + 0.8rem);
|
||||
}
|
||||
|
||||
.s-base--metro .c-modal__confirmation-toggle:hover .c-modal__confirmation-toggle__tooltip {
|
||||
bottom: calc(100% + 0.7rem);
|
||||
}
|
||||
|
||||
.c-modal__confirmation-toggle:hover .c-modal__confirmation-toggle__tooltip:after {
|
||||
border-top-width: 0.6rem;
|
||||
margin-bottom: -0.8rem;
|
||||
}
|
||||
|
||||
.s-base--metro .c-modal__confirmation-toggle:hover .c-modal__confirmation-toggle__tooltip:after {
|
||||
margin-bottom: -0.7rem;
|
||||
}
|
||||
|
||||
.c-modal__confirm-btn {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<script>
|
||||
import PrimaryButton from "@/components/PrimaryButton";
|
||||
|
||||
export default {
|
||||
name: "ModalConfirmationCheck",
|
||||
components: {
|
||||
PrimaryButton
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: String,
|
||||
|
|
@ -24,9 +19,15 @@ export default {
|
|||
confirmation() {
|
||||
return ConfirmationTypes[this.option];
|
||||
},
|
||||
confirmationClass() {
|
||||
return {
|
||||
"c-modal__confirmation-toggle": true,
|
||||
"c-modal__confirmation-toggle--active": this.setting
|
||||
};
|
||||
},
|
||||
tooltipText() {
|
||||
return `${this.setting ? "Disable" : "Reenable"} the ${this.confirmation.name} confirmation`;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
|
|
@ -38,13 +39,20 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<PrimaryButton
|
||||
v-tooltip="tooltipText"
|
||||
class="c-modal__confirmation-check"
|
||||
<div
|
||||
:class="confirmationClass"
|
||||
@click="toggle"
|
||||
>
|
||||
<template v-if="!setting">
|
||||
×
|
||||
</template>
|
||||
</PrimaryButton>
|
||||
<span
|
||||
v-if="setting"
|
||||
class="fas fa-check"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="fas fa-times"
|
||||
/>
|
||||
<div class="c-modal__confirmation-toggle__tooltip">
|
||||
{{ tooltipText }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<script>
|
||||
import PrimaryButton from "@/components/PrimaryButton";
|
||||
import ModalWrapper from "@/components/modals/ModalWrapper";
|
||||
import ModalConfirmationCheck from "@/components/modals/ModalConfirmationCheck";
|
||||
|
||||
export default {
|
||||
name: "ModalWrapperChoice",
|
||||
components: {
|
||||
PrimaryButton,
|
||||
ModalWrapper,
|
||||
ModalConfirmationCheck,
|
||||
},
|
||||
props: {
|
||||
|
|
@ -54,19 +52,14 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ModalWrapper class="c-modal-message l-modal-content--centered">
|
||||
<template #header>
|
||||
<div class="c-modal-message l-modal-content--centered">
|
||||
<span class="c-modal__title">
|
||||
<slot name="header" />
|
||||
</template>
|
||||
</span>
|
||||
|
||||
<slot />
|
||||
|
||||
<div class="l-modal-buttons">
|
||||
<ModalConfirmationCheck
|
||||
v-if="option"
|
||||
:option="option"
|
||||
/>
|
||||
|
||||
<PrimaryButton
|
||||
v-if="showCancel"
|
||||
:class="cancelClass"
|
||||
|
|
@ -89,5 +82,10 @@ export default {
|
|||
</slot>
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
|
||||
<ModalConfirmationCheck
|
||||
v-if="option"
|
||||
:option="option"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user