Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-09-20 11:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Limit glyph visual option modal height

Browse Source
This commit is contained in:
SpectralFlame 2023-07-23 21:23:06 -05:00 committed by cyip92
parent 66bc87bd71
commit 1f2f0a4fdd
1 changed files with 64 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/modals/options/glyph-appearance/GlyphDisplayOptionsModal.vue
View File

@ -103,66 +103,78 @@ export default {
</script>
<template>
<ModalWrapperOptions class="c-modal-options__large">
<ModalWrapperOptions class="c-modal-options__glyph">
<template #header>
Glyph Display Options
</template>
<div class="c-modal-options__button-container">
<ModalOptionsToggleButton
v-model="newGlyphs"
text="New Glyph identifier:"
/>
<ModalOptionsToggleButton
v-model="showUnequippedGlyphIcon"
text="Unequipped Glyph identifier:"
/>
<ModalOptionsToggleButton
v-model="glyphEffectDots"
text="Always show Glyph effect dots:"
/>
<ModalOptionsToggleButton
v-model="glyphBorders"
text="Fancy Glyph borders:"
/>
<button
class="o-primary-btn o-primary-btn--modal-option"
@click="cycleBG()"
>
Glyph BG color: {{ glyphBGStr }}
</button>
<ModalOptionsToggleButton
v-model="showGlyphInfoByDefault"
:style="noEffectStyle()"
text="Always show Glyph Info:"
/>
<ModalOptionsToggleButton
v-model="highContrastRarity"
text="High-contrast rarity colors:"
/>
<ModalOptionsToggleButton
v-model="swapGlyphColors"
text="Swap border and symbol colors:"
/>
<ExpandingControlBox
class="o-primary-btn c-dropdown-btn"
>
<template #header>
<div class="c-dropdown-header">
▼ Additional Glyph Info: ▼
<br>
{{ infoLabel }}
</div>
</template>
<template #dropdown>
<SelectGlyphInfoDropdown />
</template>
</ExpandingControlBox>
<div class="c-glyph-visual-options c-modal--short">
<div class="c-modal-options__button-container">
<ModalOptionsToggleButton
v-model="newGlyphs"
text="New Glyph identifier:"
/>
<ModalOptionsToggleButton
v-model="showUnequippedGlyphIcon"
text="Unequipped Glyph identifier:"
/>
<ModalOptionsToggleButton
v-model="glyphEffectDots"
text="Always show Glyph effect dots:"
/>
<ModalOptionsToggleButton
v-model="glyphBorders"
text="Fancy Glyph borders:"
/>
<button
class="o-primary-btn o-primary-btn--modal-option"
@click="cycleBG()"
>
Glyph BG color: {{ glyphBGStr }}
</button>
<ModalOptionsToggleButton
v-model="showGlyphInfoByDefault"
:style="noEffectStyle()"
text="Always show Glyph Info:"
/>
<ModalOptionsToggleButton
v-model="highContrastRarity"
text="High-contrast rarity colors:"
/>
<ModalOptionsToggleButton
v-model="swapGlyphColors"
text="Swap border and symbol colors:"
/>
<ExpandingControlBox
class="o-primary-btn c-dropdown-btn"
>
<template #header>
<div class="c-dropdown-header">
▼ Additional Glyph Info: ▼
<br>
{{ infoLabel }}
</div>
</template>
<template #dropdown>
<SelectGlyphInfoDropdown />
</template>
</ExpandingControlBox>
</div>
<GlyphCustomization />
</div>
<GlyphCustomization />
</ModalWrapperOptions>
</template>
<style scoped>
.c-modal-options__glyph {
width: 55rem;
}
.c-glyph-visual-options {
width: 55rem;
overflow-x: hidden;
padding-right: 1rem;
}
.c-dropdown-btn {
width: 24rem;
margin: 0.3rem;