lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Unsaved changes alert footer

This commit is contained in:
Jiiks 2018-02-02 16:40:17 +02:00
parent 1647f8d8c2
commit eec595185c
3 changed files with 53 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/styles/partials/generic/modals.scss
View File

@ -42,7 +42,12 @@
display: -ms-flexbox;
display: flex;
flex-grow: 1;
border-radius: 8px;
border-radius: 4px;
max-height: 100%;
}
.bd-modal .bd-modal-body {
display: flex;
}
.bd-modal {
@ -80,5 +85,47 @@
}
.bd-modal-footer {
.bd-footer-alert {
position: absolute;
bottom: 80px;
left: 70px;
right: 70px;
display: flex;
background-color: rgba(32, 34, 37, 0.9);
box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
padding: 10px 10px 10px 16px;
overflow: hidden;
border-radius: 5px;
transform: translateY(100%);
opacity: 0;
transition: all .2s ease-in-out;
&.bd-active {
opacity: 1;
transform: none;
}
.bd-footer-alert-text {
flex: 1 1 auto;
color: #FFF;
font-weight: 700;
line-height: 34px;
}
.bd-button {
height: 30px;
border-radius: 3px;
padding: 2px 16px;
&.bd-tp {
background: transparent;
&:hover {
text-decoration: underline;
background: transparent;
}
}
}
}
}
}

1
client/src/styles/partials/sidebarview/content.scss
View File

@ -18,7 +18,6 @@
.bd-scroller-wrap {
flex-grow: 1;
height: 100%;
}
.bd-settingsWrap-header {

13
client/src/ui/components/bd/PluginSettingsModal.vue
View File

@ -35,14 +35,11 @@
<div class="bd-form-divider"></div>
</div>
<div slot="footer">
<div class="footer-alert" :class="{'bd-active': changed}">
<div class="footer-alert-text">Unsaved changes</div>
<div class="bd-reset-button">Reset</div>
<div class="bd-button bd-ok">Save Changes</div>
</div>
</div>
</div>
<div slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed}">
<div class="bd-footer-alert-text">Unsaved changes</div>
<div class="bd-button bd-reset-button bd-tp">Reset</div>
<div class="bd-button bd-ok">Save Changes</div>
</div>
</Modal>
</template>