mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-26 13:14:07 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): change horizontal scrollbar rendering in various places (#4282)

Browse source 
* fix(editor-ui): workflow templates carousel scroll

* fix(design-system): prevent visible scrollbar on Tags

* fix(editor): add types to component prop

* fix(editor): add types to component prop
This commit is contained in:
Csaba Tuncsik 2022-10-10 17:23:22 +02:00 committed by GitHub
parent b6e4f68bb0
commit fdbc11a288
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/design-system/src/components/N8nTags/Tags.vue
View file

@ -25,6 +25,17 @@ export default Vue.extend({
.tags { .tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow-x: scroll;
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
* { * {
margin: 0 var(--spacing-4xs) var(--spacing-4xs) 0; margin: 0 var(--spacing-4xs) var(--spacing-4xs) 0;

15
packages/editor-ui/src/components/CollectionsCarousel.vue
View file

@ -19,6 +19,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { PropType } from "vue";
import { ITemplatesCollection } from "@/Interface";
import Card from '@/components/WorkflowCard.vue'; import Card from '@/components/WorkflowCard.vue';
import CollectionCard from '@/components/CollectionCard.vue'; import CollectionCard from '@/components/CollectionCard.vue';
import VueAgile from 'vue-agile'; import VueAgile from 'vue-agile';
@ -30,7 +32,7 @@ export default mixins(genericHelpers).extend({
name: 'CollectionsCarousel', name: 'CollectionsCarousel',
props: { props: {
collections: { collections: {
type: Array, type: Array as PropType<ITemplatesCollection[]>,
}, },
loading: { loading: {
type: Boolean, type: Boolean,
@ -165,17 +167,8 @@ export default mixins(genericHelpers).extend({
&__list { &__list {
width: 100%; width: 100%;
padding-bottom: var(--spacing-2xs); padding-bottom: var(--spacing-2xs);
overflow-x: scroll; overflow-x: auto;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: var(--color-foreground-dark);
}
} }
&__track { &__track {

6
packages/editor-ui/src/components/TemplateDetails.vue
View file

@ -47,11 +47,11 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue, { PropType } from 'vue';
import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue'; import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
import NodeIcon from '@/components/NodeIcon.vue'; import NodeIcon from '@/components/NodeIcon.vue';
import { abbreviateNumber, filterTemplateNodes } from '@/components/helpers'; import { abbreviateNumber, filterTemplateNodes } from '@/components/helpers';
import { ITemplatesNode } from '@/Interface'; import { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
export default Vue.extend({ export default Vue.extend({
name: 'TemplateDetails', name: 'TemplateDetails',
props: { props: {
@ -62,7 +62,7 @@ export default Vue.extend({
type: Boolean, type: Boolean,
}, },
template: { template: {
type: Object, type: Object as PropType<ITemplatesWorkflow | ITemplatesWorkflowFull>,
}, },
}, },
components: { components: {