n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-20 09:27:44 +03:00
Code Issues Projects Releases Wiki Activity

fix(editor): Fix broken element-plus loading spinner (no-changelog) (#7817)

Browse Source 
<img width="976" alt="image"
src="https://github.com/n8n-io/n8n/assets/6179477/aea8a4c8-277e-4527-b6e9-a5c3427097b6">
<img width="117" alt="image"
src="https://github.com/n8n-io/n8n/assets/6179477/14c8876c-5e26-4154-9fdf-8b1fe9e5f806">
This commit is contained in:
Alex Grozav 2023-11-27 10:50:50 +02:00 committed by GitHub
parent 1b60cfb8f1
commit 7cc7f226e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/design-system/src/css/common/var.scss
View File

@ -866,7 +866,7 @@ $datepicker-cell-hover-color: var(--color-foreground-xlight);
/* Loading /* Loading
--------------------------*/ --------------------------*/
/// height||Other|4 /// height||Other|4
$loading-spinner-size: 42px; $loading-spinner-size: 24px;
/// height||Other|4 /// height||Other|4
$loading-fullscreen-spinner-size: 50px; $loading-fullscreen-spinner-size: 50px;

6
packages/design-system/src/css/loading.scss
View File

@ -27,6 +27,7 @@
.el-loading-spinner { .el-loading-spinner {
transform: translateY(-50%); transform: translateY(-50%);
display: block;
.circular { .circular {
height: var.$loading-fullscreen-spinner-size; height: var.$loading-fullscreen-spinner-size;
@ -42,6 +43,10 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
position: absolute; position: absolute;
max-height: 100%;
display: flex;
justify-content: center;
align-items: center;
.el-loading-text { .el-loading-text {
color: var(--color-primary); color: var(--color-primary);
@ -50,6 +55,7 @@
} }
.circular { .circular {
max-height: 100%;
height: var.$loading-spinner-size; height: var.$loading-spinner-size;
width: var.$loading-spinner-size; width: var.$loading-spinner-size;
animation: loading-rotate 2s linear infinite; animation: loading-rotate 2s linear infinite;

2
packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
View File

@ -70,7 +70,7 @@ async function onUpdateConnected(value: boolean) {
</script> </script>
<template> <template>
<div class="connection-switch" v-loading="saving" element-loading-spinner="el-icon-loading"> <div class="connection-switch" v-loading="saving">
<n8n-icon <n8n-icon
v-if="provider.state === 'error'" v-if="provider.state === 'error'"
color="danger" color="danger"

1
packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
View File

@ -35,7 +35,6 @@
" "
active-color="#13ce66" active-color="#13ce66"
inactive-color="#8899AA" inactive-color="#8899AA"
element-loading-spinner="el-icon-loading"
data-test-id="workflow-activate-switch" data-test-id="workflow-activate-switch"
> >
</el-switch> </el-switch>

9
packages/editor-ui/src/components/WorkflowActivator.vue
View File

@ -15,7 +15,9 @@
</div> </div>
<n8n-tooltip :disabled="!disabled" placement="bottom"> <n8n-tooltip :disabled="!disabled" placement="bottom">
<template #content> <template #content>
<div>{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div> <div>
{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}
</div>
</template> </template>
<el-switch <el-switch
v-loading="updatingWorkflowActivation" v-loading="updatingWorkflowActivation"
@ -29,7 +31,6 @@
:disabled="disabled || updatingWorkflowActivation" :disabled="disabled || updatingWorkflowActivation"
:active-color="getActiveColor" :active-color="getActiveColor"
inactive-color="#8899AA" inactive-color="#8899AA"
element-loading-spinner="el-icon-loading"
data-test-id="workflow-activate-switch" data-test-id="workflow-activate-switch"
> >
</el-switch> </el-switch>
@ -155,10 +156,6 @@ export default defineComponent({
display: inline-flex; display: inline-flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
:deep(.el-loading-spinner) {
margin-top: -10px;
}
} }
.could-not-be-started { .could-not-be-started {

1
packages/editor-ui/src/composables/useLoadingService.ts
View File

@ -19,7 +19,6 @@ export function useLoadingService() {
loadingService.value = Loading.service({ loadingService.value = Loading.service({
lock: true, lock: true,
text: text || i18n.baseText('genericHelpers.loading'), text: text || i18n.baseText('genericHelpers.loading'),
spinner: 'el-icon-loading',
background: 'var(--color-dialog-overlay-background)', background: 'var(--color-dialog-overlay-background)',
}) as unknown as LoadingService; }) as unknown as LoadingService;
} }

2
packages/editor-ui/src/mixins/genericHelpers.ts
View File

@ -66,11 +66,9 @@ export const genericHelpers = defineComponent({
return; return;
} }
// @ts-ignore
this.loadingService = this.$loading({ this.loadingService = this.$loading({
lock: true, lock: true,
text: text || this.$locale.baseText('genericHelpers.loading'), text: text || this.$locale.baseText('genericHelpers.loading'),
spinner: 'el-icon-loading',
background: 'var(--color-dialog-overlay-background)', background: 'var(--color-dialog-overlay-background)',
}); });
}, },