mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
3db53a1934
* refactor(editor): N8N-4540 Main navigation layout rework (#4060) * ✨ Implemented new editor layout using css grid * ✨ Reworking main navigation layout, migrating some styling to css modules * ✨ Reworking main sidebar layout and responsiveness * 💄 Minor type update * ✨ Updated editor grid layout so empty cells are collapsed (`fit-content`), fixed updates menu items styling * ✨ Implemented new user area look & feel in main sidebar * 💄 Adjusting sidebar bottom padding when user area is not shown * 💄 CSS cleanup/refactor + minor vue refactoring * ✨ Fixing overscoll issue in chrome and scrolling behaviour of the content view * 👌 Addressing review feedback * ✨ Added collapsed and expanded versions of n8n logo * ✨ Updating infinite scrolling in templates view to work with the new layout * 💄 Updating main sidebar expanded width and templates view left margin * 💄 Updating main content height * 💄 Adding global styles for scrollable views with centered content, minor updates to user area * ✨ Updating zoomToFit logic, lasso select box position and new nodes positioning * ✨ Fixing new node drop position now that mouse detection has been adjusted * 👌 Updating templates view scroll to top logic and responsive padding, aligning menu items titles * 💄 Moving template layout style from global css class to component level * ✨ Moved 'Workflows' menu to node view header. Added new dropdown component for user area and the new WF menu * 💄 Updating disabled states in new WF menu * 💄 Initial stab at new sidebar styling * ✨ Finished main navigation restyling * ✨ Updating `zoomToFit` and centering logic * ✨ Adding updates menu item to settings sidebar * 💄 Adding updates item to the settings sidebar and final touches on main sidebar style * 💄 Removing old code & refactoring * 💄 Minor CSS tweaks * 💄 Opening credentials modal on sidebar menu item click. Minor CSS updates * 💄 Updating sidebar expand/collapse animation * 💄 Few more refinements of sidebar animation * 👌 Addressing code review comments * ✨ Moved ActionDropdown component to design system * 👌 Fixing bugs reported during code review and testing * 👌 Addressing design review comments for the new sidebar * ✔️ Updating `N8nActionDropdown` component tests * ✨ Remembering scroll position when going back to templates list * ✨ Updating zoomToFit logic to account for footer content * 👌 Addressing latest sidebar review comments * 👌 Addressing main sidebar product review comments * 💄 Updating css variable names after vite merge * ✔️ Fixing linting errors in the design system * ✔️ Fixing `element-ui` type import * 👌 Addressing the code review comments. * ✨ Adding link to new credentials view, removed old modal * 💄 Updating credentials view responsiveness and route highlight handling * 💄 Adding highlight to workflows submenu when on new workflow page * 💄 Updated active submenu text color
93 lines
4.2 KiB
TypeScript
93 lines
4.2 KiB
TypeScript
import Vue from 'vue';
|
|
import N8nActionBox from '../components/N8nActionBox';
|
|
import N8nActionDropdown from '../components/N8nActionDropdown';
|
|
import N8nActionToggle from '../components/N8nActionToggle';
|
|
import N8nAvatar from '../components/N8nAvatar';
|
|
import N8nBadge from "../components/N8nBadge";
|
|
import N8nButton from '../components/N8nButton';
|
|
import { N8nElButton } from '../components/N8nButton/overrides';
|
|
import N8nCallout from '../components/N8nCallout';
|
|
import N8nCard from '../components/N8nCard';
|
|
import N8nFormBox from '../components/N8nFormBox';
|
|
import N8nFormInputs from '../components/N8nFormInputs';
|
|
import N8nHeading from '../components/N8nHeading';
|
|
import N8nIcon from '../components/N8nIcon';
|
|
import N8nIconButton from '../components/N8nIconButton';
|
|
import N8nInfoAccordion from '../components/N8nInfoAccordion';
|
|
import N8nInfoTip from '../components/N8nInfoTip';
|
|
import { default as N8nInput } from '../components/N8nInput';
|
|
import N8nInputLabel from '../components/N8nInputLabel';
|
|
import N8nInputNumber from '../components/N8nInputNumber';
|
|
import N8nLink from '../components/N8nLink';
|
|
import N8nLoading from '../components/N8nLoading';
|
|
import N8nMarkdown from '../components/N8nMarkdown';
|
|
import N8nMenu from '../components/N8nMenu';
|
|
import N8nMenuItem from '../components/N8nMenuItem';
|
|
import N8nNodeIcon from '../components/N8nNodeIcon';
|
|
import N8nNotice from '../components/N8nNotice';
|
|
import N8nOption from '../components/N8nOption';
|
|
import N8nPopover from '../components/N8nPopover';
|
|
import N8nPulse from '../components/N8nPulse';
|
|
import N8nRadioButtons from '../components/N8nRadioButtons';
|
|
import N8nSelect from '../components/N8nSelect';
|
|
import N8nSpinner from '../components/N8nSpinner';
|
|
import N8nSticky from '../components/N8nSticky';
|
|
import N8nTabs from '../components/N8nTabs';
|
|
import N8nTag from '../components/N8nTag';
|
|
import N8nTags from '../components/N8nTags';
|
|
import N8nText from '../components/N8nText';
|
|
import N8nTooltip from '../components/N8nTooltip';
|
|
import N8nTree from '../components/N8nTree';
|
|
import N8nUserInfo from '../components/N8nUserInfo';
|
|
import N8nUserSelect from '../components/N8nUserSelect';
|
|
import N8nUsersList from '../components/N8nUsersList';
|
|
import N8nResizeWrapper from '../components/N8nResizeWrapper';
|
|
|
|
export default {
|
|
install: (app: typeof Vue, options?: {}) => {
|
|
app.component('n8n-info-accordion', N8nInfoAccordion);
|
|
app.component('n8n-action-box', N8nActionBox);
|
|
app.component('n8n-action-dropdown', N8nActionDropdown);
|
|
app.component('n8n-action-toggle', N8nActionToggle);
|
|
app.component('n8n-avatar', N8nAvatar);
|
|
app.component('n8n-badge', N8nBadge);
|
|
app.component('n8n-button', N8nButton);
|
|
app.component('el-button', N8nElButton);
|
|
app.component('n8n-callout', N8nCallout);
|
|
app.component('n8n-card', N8nCard);
|
|
app.component('n8n-form-box', N8nFormBox);
|
|
app.component('n8n-form-inputs', N8nFormInputs);
|
|
app.component('n8n-icon', N8nIcon);
|
|
app.component('n8n-icon-button', N8nIconButton);
|
|
app.component('n8n-info-tip', N8nInfoTip);
|
|
app.component('n8n-input', N8nInput);
|
|
app.component('n8n-input-label', N8nInputLabel);
|
|
app.component('n8n-input-number', N8nInputNumber);
|
|
app.component('n8n-loading', N8nLoading);
|
|
app.component('n8n-heading', N8nHeading);
|
|
app.component('n8n-link', N8nLink);
|
|
app.component('n8n-markdown', N8nMarkdown);
|
|
app.component('n8n-menu', N8nMenu);
|
|
app.component('n8n-menu-item', N8nMenuItem);
|
|
app.component('n8n-node-icon', N8nNodeIcon);
|
|
app.component('n8n-notice', N8nNotice);
|
|
app.component('n8n-option', N8nOption);
|
|
app.component('n8n-popover', N8nPopover);
|
|
app.component('n8n-pulse', N8nPulse);
|
|
app.component('n8n-select', N8nSelect);
|
|
app.component('n8n-spinner', N8nSpinner);
|
|
app.component('n8n-sticky', N8nSticky);
|
|
app.component('n8n-radio-buttons', N8nRadioButtons);
|
|
app.component('n8n-tags', N8nTags);
|
|
app.component('n8n-tabs', N8nTabs);
|
|
app.component('n8n-tag', N8nTag);
|
|
app.component('n8n-text', N8nText);
|
|
app.component('n8n-tooltip', N8nTooltip);
|
|
app.component('n8n-user-info', N8nUserInfo);
|
|
app.component('n8n-tree', N8nTree);
|
|
app.component('n8n-users-list', N8nUsersList);
|
|
app.component('n8n-user-select', N8nUserSelect);
|
|
app.component('n8n-resize-wrapper', N8nResizeWrapper);
|
|
},
|
|
};
|