mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: style fixes

Browse source
This commit is contained in:
saintsebastian 2021-11-30 10:54:56 +01:00
parent 682b82e734
commit 1fef8e764c
3 changed files with 28 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/editor-ui/src/components/ActivationModal.vue
View file

@ -6,14 +6,14 @@
title="Workflow activated"
>
<template v-slot:content>
<p>{{triggerContent}}</p>
<p class="spaced-p"><span class="emphasised">These executions will not show up immediately in the editor</span>, but you can see them in the <a @click="showExecutionsList">execution list</a>.</p>
<p :class="$style.p">{{triggerContent}}</p>
<p :class="[$style.p, $style.spaced]"><span :class="$style.emphasised">These executions will not show up immediately in the editor</span>, but you can see them in the <a @click="showExecutionsList">execution list</a>.</p>
</template>
<template v-slot:footer="{ close }">
<div class="right-aligned-footer">
<el-checkbox v-model="checked" @change="handleCheckboxChange">Don't show again</el-checkbox>
<div :class="$style.footer">
<el-checkbox :value="checked" @change="handleCheckboxChange">Don't show again</el-checkbox>
<n8n-button @click="close" label="Got it"/>
</div>
</template>
@ -24,7 +24,7 @@
import Vue from 'vue';
import Modal from '@/components/Modal.vue';
import { WORKFLOW_ACTIVE_MODAL_KEY, EXECUTIONS_MODAL_KEY } from '../constants';
import { WORKFLOW_ACTIVE_MODAL_KEY, EXECUTIONS_MODAL_KEY, LOCAL_STORAGE_ACTIVATION_FLAG } from '../constants';
import { INodeUi } from '../Interface';
import { INodeTypeDescription } from 'n8n-workflow';
@ -47,7 +47,8 @@ export default Vue.extend({
this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
},
handleCheckboxChange (checkboxValue: boolean) {
window.localStorage.setItem('hideActivationAlert', checkboxValue.toString());
this.checked = checkboxValue;
window.localStorage.setItem(LOCAL_STORAGE_ACTIVATION_FLAG, checkboxValue.toString());
},
},
computed: {
@ -80,28 +81,29 @@ export default Vue.extend({
});
</script>
<style scoped lang="scss">
<style lang="scss" module>
.emphasised {
font-weight: 600;
font-weight: var(--font-weight-bold);
}
p {
font-size: 14px;
.p {
font-size: var(--font-size-s);
line-height: 19px;
}
.spaced-p {
margin-top: 10px;
.spaced {
margin-top: var(--spacing-2xs);
}
.right-aligned-footer {
.footer {
text-align: right;
}
button {
margin-left: 10px;
line-height: 14px;
button {
margin-left: var(--spacing-s);
line-height: 14px;
}
}
</style>

29
packages/editor-ui/src/components/WorkflowActivator.vue
View file

@ -1,25 +1,14 @@
<template>
<div class="workflow-activator">
<el-switch
v-if="!disabled"
v-loading="loading"
element-loading-spinner="el-icon-loading"
:value="workflowActive"
@change="activeChanged"
:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
:disabled="disabled || loading"
:active-color="getActiveColor"
inactive-color="#8899AA">
</el-switch>
<n8n-tooltip v-else placement="bottom">
<n8n-tooltip :disabled="!disabled" placement="bottom">
<div slot="content">This workflow has no trigger nodes that require activation</div>
<el-switch
v-loading="loading"
element-loading-spinner="el-icon-loading"
:value="workflowActive"
@change="activeChanged"
:title="workflowActive?'Deactivate Workflow':'Activate Workflow'"
:disabled="true"
:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
:disabled="disabled"
:active-color="getActiveColor"
inactive-color="#8899AA">
</el-switch>
@ -55,6 +44,7 @@ import {
import {
EXECUTIONS_MODAL_KEY,
WORKFLOW_ACTIVE_MODAL_KEY,
LOCAL_STORAGE_ACTIVATION_FLAG,
} from '@/constants';
@ -75,7 +65,6 @@ export default mixins(
data () {
return {
loading: false,
alertTriggerContent: '',
nodes: [] as INodeUi[],
};
},
@ -108,7 +97,7 @@ export default mixins(
return '#13ce66';
},
disabled(): boolean {
return this.workflowActive && this.isWorkflowActive ? false : !this.containsTrigger;
return this.workflowActive ? !this.containsTrigger : false;
},
containsTrigger(): boolean {
let nodes: INodeUi[];
@ -197,7 +186,7 @@ export default mixins(
this.$store.commit('setWorkflowActive', this.workflowId);
// Show activation dialog only for current workflow and if user hasn't deactivated it
if (this.nodes.length === 0 && !window.localStorage.getItem('hideActivationAlert')) {
if (this.nodes.length === 0 && !window.localStorage.getItem(LOCAL_STORAGE_ACTIVATION_FLAG)) {
this.$store.dispatch('ui/openModal', WORKFLOW_ACTIVE_MODAL_KEY);
}
} else {
@ -235,15 +224,13 @@ export default mixins(
duration: 0,
});
},
async showExecutionsList () {
this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
},
},
},
);
</script>
<style scoped>
<style lang="scss" scoped>
.workflow-activator {
display: inline-block;
}

1
packages/editor-ui/src/constants.ts
View file

@ -137,4 +137,5 @@ export const OTHER_WORK_AREA_KEY = 'otherWorkArea';
export const OTHER_COMPANY_INDUSTRY_KEY = 'otherCompanyIndustry';
export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';