n8n/packages/editor-ui/src/components/TriggerIcon.vue
Ben Hesseldieck 0470740737
Change the UI of the Nodes Panel (#1855)
* Add codex search properties to node types

* implement basic styles

* update header designs

* update node list designs

* add trigger icon

* refactor node creator list

* implement categories and subcategories

* fix up spacing

* add arrows

* implement navigatable list

* implement more of feature

* implement navigation

* add transitions

* fix lint issues

* fix overlay

*  Get and add codex categories

* fix up design

* update borders

* implement no-matches view

* fix preview bug

* add color to search

* clean up borders

* add comma

* Revert "Merge branch 'add-codex-data' of github.com:n8n-io/n8n into PROD-819-nodes-panel-redesign"

38b7d7ead1

* use new impl

* remove empty categories

* update scrolling, hide start node

* make scrollable

* remove text while subcategory panel is open

* fix up spacing

* fix lint issues

* update descriptions

* update path

* update images

* fix tags manager

* give min height to image

* gst

* update clear color

* update font size

* fix firefox spacing

* close on click outside

* add external link icon

* update iterator key

* add client side caching for images

* update caching header

* ️ Add properties to codex for nodes panel (#1854)

*  Get and add codex categories

*  Add parens to evaluation + destructuring

* 🔥 Remove non-existing class reference

*  Add alias to codex property

* move constants

* 🔨 Rename CodexCategories to CodexData

* ✏️ Update getCodex documentation

* refactor and move

* refactor no results view

* more refactoring

* refactor subcategory panel

* more refactoring

* update text

* update no results view

* add miscellaneous to end of list

* address design feedback

* reimplement node search

* fix up clear

* update placeholder color

* impl transition

* focus on tab

* update spacing

* fix transition bug on start

* fix up x

* fix position

* build

* safari fix

* remove input changes

* css bleed issue with image

* update css value

* clean up

* simplify impl

* rename again

* rename again

* rename all

* fix hover bug

* remove keep alive

* delete icon

* update interface type

* refactor components

* update scss to module

* clean up impl

* clean up colors as vars

* fix indentation

* clean up scss

* clean up scss

* clean up scss

* clean up scss

* Clean up files

* update logic to be more efficient

* fix search bug

* update type

* remove unused

* clean up js

* update scrollable, border impl, transition

* fix simicolon

* build

* update search

* address max's comments

* change icon border radius

* change margin

* update icon size

* update icon size

* update slide transition out

* add comma

* remove full

* update trigger icon size

* fix image size

* address design feedback

* update external link icons

* address codacy issues

* support custom nodes without codex file

* address jan's feedback

* address Ben's comments

* add subcategory index

* open/close categories with arrow keys

* add lint comment

* Address latest comments

*  Minor changes

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
2021-06-18 07:58:26 +02:00

43 lines
1.4 KiB
Vue

<template functional>
<span :class="$style.trigger">
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Trigger node</title>
<g id="/integrations-(V1-feature)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Individual-node-view" transform="translate(-304.000000, -137.000000)" fill-rule="nonzero">
<g id="left-column" transform="translate(120.000000, 131.000000)">
<g id="trigger-badge" transform="translate(178.000000, 0.000000)">
<g id="trigger-icon" transform="translate(6.857143, 6.857143)">
<g id="Icon" transform="translate(8.571429, 0.000000)" fill="#FF6150">
<polygon id="Icon-Path" points="7.14285714 21.4285714 0 21.4285714 10 1.42857143 10 12.8571429 17.1428571 12.8571429 7.14285714 32.8571429"></polygon>
</g>
<rect id="ViewBox" x="0" y="0" width="34.2857143" height="34.2857143"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
</template>
<script lang="ts">
export default {
name: 'TriggerIcon',
};
</script>
<style lang="scss" module>
.trigger {
background-color: $--trigger-icon-background-color;
border: 1px solid $--trigger-icon-border-color;
border-radius: 4px;
display: inline-flex;
> svg {
width: 100%;
height: 100%;
}
}
</style>