fix(editor): change horizontal scrollbar rendering in various places (n…

…8n-io#4282) * 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
valya · Oct 10, 2022 · cdced01 · cdced01
1 parent 6bbd66c
commit cdced01
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/packages/design-system/src/components/N8nTags/Tags.vue b/packages/design-system/src/components/N8nTags/Tags.vue
@@ -25,6 +25,17 @@ export default Vue.extend({
 .tags {
 	display: flex;
 	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;

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

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