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

split up main, sass imports, import new nds

Browse source
This commit is contained in:
Mutasem 2021-07-27 13:40:37 +02:00
parent 231c15801a
commit fbeb4a9eed
8 changed files with 432 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/package.json
View file

@ -25,6 +25,8 @@
"test:unit": "vue-cli-service test:unit" "test:unit": "vue-cli-service test:unit"
}, },
"dependencies": { "dependencies": {
"n8n-design-system": "file:../../../n8n-design-system",
"regenerator-runtime": "^0.13.9",
"timeago.js": "^4.0.2", "timeago.js": "^4.0.2",
"v-click-outside": "^3.1.2", "v-click-outside": "^3.1.2",
"vue-fragment": "^1.5.2" "vue-fragment": "^1.5.2"

185
packages/editor-ui/src/main.ts
View file

@ -2,16 +2,11 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'; import Vue from 'vue';
import './plugins';
import 'prismjs'; import 'prismjs';
import 'prismjs/themes/prism.css'; import 'prismjs/themes/prism.css';
import 'vue-prism-editor/dist/VuePrismEditor.css'; import 'vue-prism-editor/dist/VuePrismEditor.css';
import 'vue-json-pretty/lib/styles.css'; import 'vue-json-pretty/lib/styles.css';
import Vue2TouchEvents from 'vue2-touch-events';
import * as ElementUI from 'element-ui';
// @ts-ignore
import locale from 'element-ui/lib/locale/lang/en';
import './n8n-theme.scss'; import './n8n-theme.scss';
import App from '@/App.vue'; import App from '@/App.vue';
@ -19,186 +14,8 @@ import router from './router';
import { runExternalHook } from './components/mixins/externalHooks'; import { runExternalHook } from './components/mixins/externalHooks';
// @ts-ignore
import vClickOutside from 'v-click-outside';
import Fragment from 'vue-fragment';
import { library } from '@fortawesome/fontawesome-svg-core';
import {
faAngleDoubleLeft,
faAngleDown,
faAngleRight,
faAngleUp,
faArrowLeft,
faArrowRight,
faAt,
faBook,
faBug,
faCalendar,
faCheck,
faChevronDown,
faChevronUp,
faCode,
faCodeBranch,
faCog,
faCogs,
faClone,
faCloud,
faCloudDownloadAlt,
faCopy,
faCut,
faDotCircle,
faEdit,
faEnvelope,
faEye,
faExclamationTriangle,
faExpand,
faExternalLinkAlt,
faExchangeAlt,
faFile,
faFileArchive,
faFileCode,
faFileDownload,
faFileExport,
faFileImport,
faFilePdf,
faFolderOpen,
faGift,
faHdd,
faHome,
faHourglass,
faImage,
faInbox,
faInfo,
faInfoCircle,
faKey,
faMapSigns,
faNetworkWired,
faPause,
faPen,
faPlay,
faPlayCircle,
faPlus,
faPlusCircle,
faQuestion,
faQuestionCircle,
faRedo,
faRss,
faSave,
faSearch,
faSearchMinus,
faSearchPlus,
faServer,
faSignInAlt,
faSlidersH,
faSpinner,
faStop,
faSun,
faSync,
faSyncAlt,
faTable,
faTasks,
faTerminal,
faThLarge,
faTimes,
faTrash,
faUndo,
faUsers,
faClock,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { store } from './store'; import { store } from './store';
Vue.use(Vue2TouchEvents);
Vue.use(ElementUI, { locale });
Vue.use(vClickOutside);
library.add(faAngleDoubleLeft);
library.add(faAngleDown);
library.add(faAngleRight);
library.add(faAngleUp);
library.add(faArrowLeft);
library.add(faArrowRight);
library.add(faAt);
library.add(faBook);
library.add(faBug);
library.add(faCalendar);
library.add(faCheck);
library.add(faChevronDown);
library.add(faChevronUp);
library.add(faCode);
library.add(faCodeBranch);
library.add(faCog);
library.add(faCogs);
library.add(faClone);
library.add(faCloud);
library.add(faCloudDownloadAlt);
library.add(faCopy);
library.add(faCut);
library.add(faDotCircle);
library.add(faEdit);
library.add(faEnvelope);
library.add(faEye);
library.add(faExclamationTriangle);
library.add(faExpand);
library.add(faExternalLinkAlt);
library.add(faExchangeAlt);
library.add(faFile);
library.add(faFileArchive);
library.add(faFileCode);
library.add(faFileDownload);
library.add(faFileExport);
library.add(faFileImport);
library.add(faFilePdf);
library.add(faFolderOpen);
library.add(faGift);
library.add(faHdd);
library.add(faHome);
library.add(faHourglass);
library.add(faImage);
library.add(faInbox);
library.add(faInfo);
library.add(faInfoCircle);
library.add(faKey);
library.add(faMapSigns);
library.add(faNetworkWired);
library.add(faPause);
library.add(faPen);
library.add(faPlay);
library.add(faPlayCircle);
library.add(faPlus);
library.add(faPlusCircle);
library.add(faQuestion);
library.add(faQuestionCircle);
library.add(faRedo);
library.add(faRss);
library.add(faSave);
library.add(faSearch);
library.add(faSearchMinus);
library.add(faSearchPlus);
library.add(faServer);
library.add(faSignInAlt);
library.add(faSlidersH);
library.add(faSpinner);
library.add(faStop);
library.add(faSun);
library.add(faSync);
library.add(faSyncAlt);
library.add(faTable);
library.add(faTasks);
library.add(faTerminal);
library.add(faThLarge);
library.add(faTimes);
library.add(faTrash);
library.add(faUndo);
library.add(faUsers);
library.add(faClock);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.use(Fragment.Plugin);
Vue.config.productionTip = false; Vue.config.productionTip = false;
router.afterEach((to, from) => { router.afterEach((to, from) => {
runExternalHook('main.routeChange', store, { from, to }); runExternalHook('main.routeChange', store, { from, to });

68
packages/editor-ui/src/n8n-theme.scss
View file

@ -5,8 +5,72 @@
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/base.scss";
@import "~element-ui/lib/theme-chalk/display.css"; @import "~element-ui/packages/theme-chalk/src/pagination.scss";
@import "~element-ui/packages/theme-chalk/src/dialog.scss";
@import "~element-ui/packages/theme-chalk/src/display.scss";
@import "~element-ui/packages/theme-chalk/src/autocomplete.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown.scss";
@import "~element-ui/packages/theme-chalk/src/menu.scss";
@import "~element-ui/packages/theme-chalk/src/input.scss";
@import "~element-ui/packages/theme-chalk/src/input-number.scss";
@import "~element-ui/packages/theme-chalk/src/radio.scss";
@import "~element-ui/packages/theme-chalk/src/radio-group.scss";
@import "~element-ui/packages/theme-chalk/src/radio-button.scss";
@import "~element-ui/packages/theme-chalk/src/checkbox.scss";
@import "~element-ui/packages/theme-chalk/src/switch.scss";
@import "~element-ui/packages/theme-chalk/src/select.scss";
@import "~element-ui/packages/theme-chalk/src/button.scss";
@import "~element-ui/packages/theme-chalk/src/table.scss";
@import "~element-ui/packages/theme-chalk/src/table-column.scss";
@import "~element-ui/packages/theme-chalk/src/date-picker.scss";
@import "~element-ui/packages/theme-chalk/src/time-select.scss";
@import "~element-ui/packages/theme-chalk/src/time-picker.scss";
@import "~element-ui/packages/theme-chalk/src/popover.scss";
@import "~element-ui/packages/theme-chalk/src/tooltip.scss";
@import "~element-ui/packages/theme-chalk/src/message-box.scss";
@import "~element-ui/packages/theme-chalk/src/breadcrumb.scss";
@import "~element-ui/packages/theme-chalk/src/form.scss";
@import "~element-ui/packages/theme-chalk/src/tabs.scss";
@import "~element-ui/packages/theme-chalk/src/tag.scss";
@import "~element-ui/packages/theme-chalk/src/tree.scss";
@import "~element-ui/packages/theme-chalk/src/alert.scss";
@import "~element-ui/packages/theme-chalk/src/notification.scss";
@import "~element-ui/packages/theme-chalk/src/slider.scss";
@import "~element-ui/packages/theme-chalk/src/loading.scss";
@import "~element-ui/packages/theme-chalk/src/row.scss";
@import "~element-ui/packages/theme-chalk/src/col.scss";
@import "~element-ui/packages/theme-chalk/src/upload.scss";
@import "~element-ui/packages/theme-chalk/src/progress.scss";
@import "~element-ui/packages/theme-chalk/src/spinner.scss";
@import "~element-ui/packages/theme-chalk/src/message.scss";
@import "~element-ui/packages/theme-chalk/src/badge.scss";
@import "~element-ui/packages/theme-chalk/src/card.scss";
@import "~element-ui/packages/theme-chalk/src/rate.scss";
@import "~element-ui/packages/theme-chalk/src/steps.scss";
@import "~element-ui/packages/theme-chalk/src/step.scss";
@import "~element-ui/packages/theme-chalk/src/carousel.scss";
@import "~element-ui/packages/theme-chalk/src/scrollbar.scss";
@import "~element-ui/packages/theme-chalk/src/carousel-item.scss";
@import "~element-ui/packages/theme-chalk/src/collapse.scss";
@import "~element-ui/packages/theme-chalk/src/color-picker.scss";
@import "~element-ui/packages/theme-chalk/src/transfer.scss";
@import "~element-ui/packages/theme-chalk/src/container.scss";
@import "~element-ui/packages/theme-chalk/src/header.scss";
@import "~element-ui/packages/theme-chalk/src/aside.scss";
@import "~element-ui/packages/theme-chalk/src/main.scss";
@import "~element-ui/packages/theme-chalk/src/footer.scss";
@import "~element-ui/packages/theme-chalk/src/timeline.scss";
@import "~element-ui/packages/theme-chalk/src/timeline-item.scss";
@import "~element-ui/packages/theme-chalk/src/link.scss";
@import "~element-ui/packages/theme-chalk/src/divider.scss";
@import "~element-ui/packages/theme-chalk/src/image.scss";
@import "~element-ui/packages/theme-chalk/src/calendar.scss";
@import "~element-ui/packages/theme-chalk/src/backtop.scss";
@import "~element-ui/packages/theme-chalk/src/page-header.scss";
@import "~element-ui/packages/theme-chalk/src/drawer.scss";
@import "~element-ui/packages/theme-chalk/src/popconfirm.scss";
body { body {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;

171
packages/editor-ui/src/plugins/compontents.ts Normal file
View file

@ -0,0 +1,171 @@
import Vue from "vue";
import Fragment from 'vue-fragment';
import "regenerator-runtime/runtime";
import {
Pagination,
Autocomplete,
Drawer,
Dialog,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Popover,
Tooltip,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Slider,
Icon,
Row,
Col,
Upload,
Progress,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
CarouselItem,
Collapse,
CollapseItem,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Timeline,
TimelineItem,
Link,
Divider,
Image,
Calendar,
Backtop,
PageHeader,
Loading,
MessageBox,
Message,
Notification,
} from 'element-ui';
import { N8nButton } from 'n8n-design-system';
Vue.use(Fragment.Plugin);
// n8n design system
Vue.use(N8nButton);
// element io
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Drawer);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

8
packages/editor-ui/src/plugins/directives.ts Normal file
View file

@ -0,0 +1,8 @@
import Vue from "vue";
import Vue2TouchEvents from 'vue2-touch-events';
// @ts-ignore
import vClickOutside from 'v-click-outside';
Vue.use(Vue2TouchEvents);
Vue.use(vClickOutside);

170
packages/editor-ui/src/plugins/icons.ts Normal file
View file

@ -0,0 +1,170 @@
import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import {
faAngleDoubleLeft,
faAngleDown,
faAngleRight,
faAngleUp,
faArrowLeft,
faArrowRight,
faAt,
faBook,
faBug,
faCalendar,
faCheck,
faChevronDown,
faChevronUp,
faCode,
faCodeBranch,
faCog,
faCogs,
faClone,
faCloud,
faCloudDownloadAlt,
faCopy,
faCut,
faDotCircle,
faEdit,
faEnvelope,
faEye,
faExclamationTriangle,
faExpand,
faExternalLinkAlt,
faExchangeAlt,
faFile,
faFileArchive,
faFileCode,
faFileDownload,
faFileExport,
faFileImport,
faFilePdf,
faFolderOpen,
faGift,
faHdd,
faHome,
faHourglass,
faImage,
faInbox,
faInfo,
faInfoCircle,
faKey,
faMapSigns,
faNetworkWired,
faPause,
faPen,
faPlay,
faPlayCircle,
faPlus,
faPlusCircle,
faQuestion,
faQuestionCircle,
faRedo,
faRss,
faSave,
faSearch,
faSearchMinus,
faSearchPlus,
faServer,
faSignInAlt,
faSlidersH,
faSpinner,
faStop,
faSun,
faSync,
faSyncAlt,
faTable,
faTasks,
faTerminal,
faThLarge,
faTimes,
faTrash,
faUndo,
faUsers,
faClock,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faAngleDoubleLeft);
library.add(faAngleDown);
library.add(faAngleRight);
library.add(faAngleUp);
library.add(faArrowLeft);
library.add(faArrowRight);
library.add(faAt);
library.add(faBook);
library.add(faBug);
library.add(faCalendar);
library.add(faCheck);
library.add(faChevronDown);
library.add(faChevronUp);
library.add(faCode);
library.add(faCodeBranch);
library.add(faCog);
library.add(faCogs);
library.add(faClone);
library.add(faCloud);
library.add(faCloudDownloadAlt);
library.add(faCopy);
library.add(faCut);
library.add(faDotCircle);
library.add(faEdit);
library.add(faEnvelope);
library.add(faEye);
library.add(faExclamationTriangle);
library.add(faExpand);
library.add(faExternalLinkAlt);
library.add(faExchangeAlt);
library.add(faFile);
library.add(faFileArchive);
library.add(faFileCode);
library.add(faFileDownload);
library.add(faFileExport);
library.add(faFileImport);
library.add(faFilePdf);
library.add(faFolderOpen);
library.add(faGift);
library.add(faHdd);
library.add(faHome);
library.add(faHourglass);
library.add(faImage);
library.add(faInbox);
library.add(faInfo);
library.add(faInfoCircle);
library.add(faKey);
library.add(faMapSigns);
library.add(faNetworkWired);
library.add(faPause);
library.add(faPen);
library.add(faPlay);
library.add(faPlayCircle);
library.add(faPlus);
library.add(faPlusCircle);
library.add(faQuestion);
library.add(faQuestionCircle);
library.add(faRedo);
library.add(faRss);
library.add(faSave);
library.add(faSearch);
library.add(faSearchMinus);
library.add(faSearchPlus);
library.add(faServer);
library.add(faSignInAlt);
library.add(faSlidersH);
library.add(faSpinner);
library.add(faStop);
library.add(faSun);
library.add(faSync);
library.add(faSyncAlt);
library.add(faTable);
library.add(faTasks);
library.add(faTerminal);
library.add(faThLarge);
library.add(faTimes);
library.add(faTrash);
library.add(faUndo);
library.add(faUsers);
library.add(faClock);
Vue.component('font-awesome-icon', FontAwesomeIcon);

3
packages/editor-ui/src/plugins/index.ts Normal file
View file

@ -0,0 +1,3 @@
import './icons';
import './directives';
import './compontents';

34
packages/editor-ui/src/views/NodeView.vue
View file

@ -58,21 +58,14 @@
</button> </button>
</div> </div>
<div class="workflow-execute-wrapper" v-if="!isReadOnly"> <div class="workflow-execute-wrapper" v-if="!isReadOnly">
<el-button <n8n-button
type="text"
@click.stop="runWorkflow()" @click.stop="runWorkflow()"
class="workflow-run-button" :loading="workflowRunning"
:class="{'running': workflowRunning}" :label="runButtonText"
:disabled="workflowRunning" size="lg"
icon="play-circle"
title="Executes the Workflow from the Start or Webhook Node." title="Executes the Workflow from the Start or Webhook Node."
> />
<div class="run-icon">
<font-awesome-icon icon="spinner" spin v-if="workflowRunning"/>
<font-awesome-icon icon="play-circle" v-else/>
</div>
{{runButtonText}}
</el-button>
<el-button <el-button
v-if="workflowRunning === true && !executionWaitingForWebhook" v-if="workflowRunning === true && !executionWaitingForWebhook"
@ -169,6 +162,9 @@ import {
} from '../Interface'; } from '../Interface';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
// import N8nIcon from 'n8n-design-system/src/components/N8nIcon';
// import N8nButton from 'n8n-design-system/src/components/N8nButton/Button.vue';
const NODE_SIZE = 100; const NODE_SIZE = 100;
const DEFAULT_START_POSITION_X = 250; const DEFAULT_START_POSITION_X = 250;
const DEFAULT_START_POSITION_Y = 300; const DEFAULT_START_POSITION_Y = 300;
@ -208,6 +204,8 @@ export default mixins(
NodeCreator, NodeCreator,
NodeSettings, NodeSettings,
RunData, RunData,
// N8nButton,
// N8nIcon,
}, },
errorCaptured: (err, vm, info) => { errorCaptured: (err, vm, info) => {
console.error('errorCaptured'); // eslint-disable-line no-console console.error('errorCaptured'); // eslint-disable-line no-console
@ -2380,16 +2378,6 @@ export default mixins(
transform: scale(1.4); transform: scale(1.4);
margin-right: 0.5em; margin-right: 0.5em;
} }
.workflow-run-button {
padding: 12px;
}
.stop-execution,
.workflow-run-button.running {
color: $--color-primary;
background-color: $--color-primary-light;
}
} }
/* Makes sure that when selected with mouse it does not select text */ /* Makes sure that when selected with mouse it does not select text */