update more buttons

This commit is contained in:
Mutasem 2021-07-29 12:15:46 +02:00
parent 75addd4fb7
commit 05ae9aa1b8
6 changed files with 23 additions and 28 deletions

View file

@ -41,15 +41,11 @@
</el-col>
<el-col :span="18">
<span v-if="requiredPropertiesFilled === false">
<el-button title="Connect OAuth Credentials" circle :disabled="true">
<font-awesome-icon icon="redo" />
</el-button>
<n8n-icon-button title="Connect OAuth Credentials" icon="redo" :disabled="true" size="lg" />
Enter all required properties
</span>
<span v-else-if="isOAuthConnected === true">
<el-button title="Reconnect OAuth Credentials" @click.stop="oAuthCredentialAuthorize()" circle>
<font-awesome-icon icon="redo" />
</el-button>
<n8n-icon-button title="Reconnect OAuth Credentials" @click.stop="oAuthCredentialAuthorize()" icon="redo" size="lg" />
Connected
</span>
<span v-else>
@ -57,9 +53,7 @@
<img :src="basePath + 'google-signin.png'" class="google-icon clickable" alt="Sign in with Google" @click.stop="oAuthCredentialAuthorize()" />
</span>
<span v-else>
<el-button title="Connect OAuth Credentials" @click.stop="oAuthCredentialAuthorize()" circle>
<font-awesome-icon icon="sign-in-alt" />
</el-button>
<n8n-icon-button title="Connect OAuth Credentials" @click.stop="oAuthCredentialAuthorize()" icon="sign-in-alt" size="lg" />
Not connected
</span>
</span>

View file

@ -29,8 +29,10 @@
</el-row>
</template>
<template v-slot:footer="{ close }">
<n8n-button @click="save" :loading="isSaving" label="Save" />
<n8n-button @click="close" :disabled="isSaving" label="Cancel" />
<div :class="$style.footer">
<n8n-button @click="save" :loading="isSaving" label="Save" float="right" />
<n8n-button type="outline" @click="close" :disabled="isSaving" label="Cancel" float="right" />
</div>
</template>
</Modal>
</template>
@ -122,4 +124,12 @@ export default mixins(showMessage, workflowHelpers).extend({
},
},
});
</script>
</script>
<style lang="scss" module>
.footer {
> * {
margin-left: var(--spacing-3xs);
}
}
</style>

View file

@ -146,9 +146,4 @@ export default Vue.extend({
.modal-content > .el-row {
margin-bottom: 15px;
}
.modal-footer > .el-button {
float: right;
margin-left: 5px;
}
</style>

View file

@ -24,7 +24,7 @@
</el-row>
</template>
<template v-slot:footer="{ close }">
<n8n-button size="sm" label="Done" @click="close" />
<n8n-button size="sm" label="Done" @click="close" float="right" />
</template>
</Modal>
</template>

View file

@ -181,8 +181,9 @@ export default Vue.extend({
align-items: center;
display: flex;
flex-wrap: nowrap;
float: right;
> .el-button {
> * {
margin: 2px;
}
}
@ -197,9 +198,8 @@ export default Vue.extend({
opacity: 0;
}
.ops.main > .el-button {
.ops.main {
display: none;
float: right;
margin-left: 2px;
}
@ -207,8 +207,8 @@ export default Vue.extend({
pointer-events: none;
}
/deep/ tr:hover .ops:not(.disabled) .el-button {
display: block;
tr:hover .ops:not(.disabled) {
display: flex;
}
/deep/ .el-input.is-disabled > input {

View file

@ -13,7 +13,7 @@
</el-input>
</el-col>
<el-col :span="14">
<n8n-button @click="onAddNew" :disabled="disabled" icon="plus" label="Add new" size="lg" />
<n8n-button @click="onAddNew" :disabled="disabled" icon="plus" label="Add new" size="lg" float="right" />
</el-col>
</el-row>
</template>
@ -50,8 +50,4 @@ export default Vue.extend({
.tags-header {
margin-bottom: 15px;
}
.el-button {
float: right;
}
</style>