1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00

refactor(UI): improved new connection panels appearence

This commit is contained in:
2021-07-08 18:43:31 +02:00
parent 56fcc2650b
commit 27a153ef43
4 changed files with 18 additions and 9 deletions

View File

@ -495,14 +495,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.connection-panel { .connection-panel {
display: flex;
margin-top: 15vh; margin-top: 15vh;
justify-content: space-between;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.panel { .panel {
width: 450px; width: 450px;
border-radius: $border-radius;
.panel-body { .panel-body {
flex: initial; flex: initial;

View File

@ -311,7 +311,7 @@
</button> </button>
<button <button
class="btn btn-primary mr-2" class="btn btn-primary mr-2"
:disabled="isBusy" :disabled="isBusy || !hasChanges"
@click="saveConnection" @click="saveConnection"
> >
{{ $t('word.save') }} {{ $t('word.save') }}
@ -365,15 +365,14 @@ export default {
}, },
isBusy () { isBusy () {
return this.isConnecting || this.isTesting; return this.isConnecting || this.isTesting;
},
hasChanges () {
return JSON.stringify(this.connection) !== JSON.stringify(this.localConnection);
} }
}, },
created () { created () {
this.localConnection = JSON.parse(JSON.stringify(this.connection)); this.localConnection = JSON.parse(JSON.stringify(this.connection));
window.addEventListener('keydown', this.onKey); window.addEventListener('keydown', this.onKey);
// setTimeout(() => {
// this.$refs.firstInput.focus();
// }, 20);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('keydown', this.onKey); window.removeEventListener('keydown', this.onKey);
@ -469,14 +468,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.connection-panel { .connection-panel {
display: flex;
margin-top: 15vh; margin-top: 15vh;
justify-content: space-between;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.panel { .panel {
width: 450px; width: 450px;
border-radius: $border-radius;
.panel-body { .panel-body {
flex: initial; flex: initial;

View File

@ -214,6 +214,12 @@
} }
} }
.connection-panel {
.panel {
background: rgba($bg-color-light-dark, 50%);
}
}
.bg-checkered { .bg-checkered {
background-image: background-image:
linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),

View File

@ -205,6 +205,12 @@
} }
} }
.connection-panel {
.panel {
background: rgba($bg-color-light-gray, 100%);
}
}
.context { .context {
color: $body-font-color-dark; color: $body-font-color-dark;