-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(editor): Refactor Output Panel + fix i18n issues (#3097)
* update main panel * finish up tabs * fix docs link * add icon * update node settings * clean up settings * add rename modal * fix component styles * fix spacing * truncate name * remove mixin * fix spacing * fix spacing * hide docs url * fix bug * fix renaming * refactor tabs out * refactor execute button * refactor header * add more views * fix error view * fix workflow rename bug * rename component * fix small screen bug * move items, fix positions * add hover state * show selector on empty state * add empty run state * fix binary view * 1 item * add vjs styles * show empty row for every item * refactor tabs * add branch names * fix spacing * fix up spacing * add run selector * fix positioning * clean up * increase width of selector * fix up spacing * fix copy button * fix branch naming; type issues * fix docs in custom nodes * add type * hide items when run selector is shown * increase selector size * add select prepend * clean up a bit * Add pagination * add stale icon * enable stale data in execution run * Revert "enable stale data in execution run" 8edb68d * move metadata to its own state * fix smaller size * add scroll buttons * update tabs on resize * update stale data on rename * remove metadata on delete * hide x * change title colors * binary data classes * remove duplicate css * add colors * delete unused keys * use event bus * update styles of pagination * fix ts issues * fix ts issues * use chevron icons * fix design with download button * add back to canvas button * add trigger warning disabled * show trigger warning tooltip * update button labels for triggers * update node output message * fix add-option bug * add page selector * fix pagination selector bug * fix executions bug * remove hint * add json colors * add colors for json * add color json keys * fix select options bug * update keys * address comments * update name limit * align pencil * update icon size * update radio buttons height * address comments * fix pencil bug * change buttons alignment * fully center * change order of buttons * add no output message in branch * scroll to top * change active state * fix page size * all items * update expression background * update naming * align pencil * update modal background * add schedule group * update schedule nodes messages * use ellpises for last chars * fix spacing * fix tabs issue * fix too far data bug * fix executions bug * fix table wrapping * fix rename bug * add padding * handle unkown errors * add sticky header * ignore empty input, trim node name * nudge lightness of color * center buttons * update pagination * set colors of title * increase table font, fix alignment * fix pencil bug * fix spacing * use date now * address pagination issues * delete unused keys * update keys sort * fix prepend * fix radio button position * Revert "fix radio button position" ae42781
- Loading branch information
Showing
39 changed files
with
1,739 additions
and
777 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <label role="radio" tabindex="-1" :class="$style.container" aria-checked="true"> | ||
| <input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value"> | ||
| <div :class="{[$style.button]: true, [$style.active]: active}" @click="$emit('click')">{{ label }}</div> | ||
| </label> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| name: 'n8n-radio-button', | ||
| props: { | ||
| label: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| value: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| active: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .container { | ||
| display: inline-block; | ||
| outline: 0; | ||
| position: relative; | ||
| &:hover { | ||
| .button:not(.active) { | ||
| color: var(--color-primary); | ||
| } | ||
| } | ||
| } | ||
| .input { | ||
| opacity: 0; | ||
| outline: 0; | ||
| z-index: -1; | ||
| position: absolute; | ||
| } | ||
| .button { | ||
| border-radius: 0; | ||
| padding: 0 var(--spacing-s); | ||
| display: flex; | ||
| align-items: center; | ||
| height: 26px; | ||
| font-size: var(--font-size-2xs); | ||
| border-radius: var(--border-radius-base); | ||
| font-weight: var(--font-weight-bold); | ||
| color: var(--color-text-base); | ||
| cursor: pointer; | ||
| transition: background-color 0.2s ease; | ||
| } | ||
| .active { | ||
| background-color: var(--color-foreground-xlight); | ||
| color: var(--color-text-dark); | ||
| } | ||
| </style> |
51 changes: 51 additions & 0 deletions
51
packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import N8nRadioButtons from './RadioButtons.vue'; | ||
|
|
||
| import { action } from '@storybook/addon-actions'; | ||
|
|
||
| export default { | ||
| title: 'Atoms/RadioButtons', | ||
| component: N8nRadioButtons, | ||
| argTypes: { | ||
| }, | ||
| parameters: { | ||
| backgrounds: { default: '--color-background-xlight' }, | ||
| }, | ||
| }; | ||
|
|
||
| const methods = { | ||
| onInput: action('input'), | ||
| }; | ||
|
|
||
| const Template = (args, { argTypes }) => ({ | ||
| props: Object.keys(argTypes), | ||
| components: { | ||
| N8nRadioButtons, | ||
| }, | ||
| template: | ||
| `<n8n-radio-buttons v-model="val" v-bind="$props" @input="onInput"> | ||
| </n8n-radio-buttons>`, | ||
| methods, | ||
| data() { | ||
| return { | ||
| val: '', | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| export const Example = Template.bind({}); | ||
| Example.args = { | ||
| options: [ | ||
| { | ||
| label: 'Test', | ||
| value: 'test', | ||
| }, | ||
| { | ||
| label: 'World', | ||
| value: 'world', | ||
| }, | ||
| { | ||
| label: 'Hello', | ||
| value: 'hello', | ||
| }, | ||
| ], | ||
| }; |
49 changes: 49 additions & 0 deletions
49
packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <template> | ||
| <div role="radiogroup" :class="$style.radioGroup"> | ||
| <RadioButton | ||
| v-for="option in options" | ||
| :key="option.value" | ||
| v-bind="option" | ||
| :active="value === option.value" | ||
| @click="(e) => onClick(option.value, e)" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import RadioButton from './RadioButton'; | ||
| export default { | ||
| name: 'n8n-radio-buttons', | ||
| props: { | ||
| value: { | ||
| type: String, | ||
| }, | ||
| options: { | ||
| }, | ||
| }, | ||
| components: { | ||
| RadioButton, | ||
| }, | ||
| methods: { | ||
| onClick(value) { | ||
| this.$emit('input', value); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .radioGroup { | ||
| display: inline-flex; | ||
| line-height: 1; | ||
| vertical-align: middle; | ||
| font-size: 0; | ||
| background-color: var(--color-foreground-base); | ||
| padding: var(--spacing-5xs); | ||
| border-radius: var(--border-radius-base); | ||
| } | ||
| </style> | ||
|
|
3 changes: 3 additions & 0 deletions
3
packages/design-system/src/components/N8nRadioButtons/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import N8nRadioButtons from './RadioButtons.vue'; | ||
|
|
||
| export default N8nRadioButtons; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.