mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 12:44:07 -08:00
Code Issues Actions 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 {
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;

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

@ -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 {

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

@ -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: {