diff --git a/src/components/dropbox-file-selector/dropbox-file-selector.vue b/src/components/dropbox-file-selector/dropbox-file-selector.vue index ea33ade..14280f1 100644 --- a/src/components/dropbox-file-selector/dropbox-file-selector.vue +++ b/src/components/dropbox-file-selector/dropbox-file-selector.vue @@ -32,15 +32,17 @@
@@ -369,6 +371,7 @@ $actionsHeight: 74px; .content__folders { overflow: auto; height: calc(100% - #{$heading-height + $actionsHeight}); + padding-top: $spacing-small; } @include mobile() { @@ -397,23 +400,29 @@ $actionsHeight: 74px; } .breadcrumbs { - padding: $spacing-medium 0; - margin-bottom: $spacing-small; - background-color: #b6b6b6; + padding: $spacing-small 0 $spacing-small $spacing-small; + background-color: $color-bg; - button { + &__button { display: inline; position: relative; cursor: pointer; - margin-right: $spacing-small; border: none; background: none; - padding: 0 $spacing-small; - border-left: 1px solid $color-lines; + padding-left: $spacing-xsmall; + padding-right: 0; font-size: 100%; @include customFont(); - &:hover, &.active { + &:after { + content: " /"; + } + + &:hover { + color: $color-4; + } + + &--active { color: #FFF; } } diff --git a/src/components/file-import/dropbox-connector/dropbox-connector.vue b/src/components/file-import/dropbox-connector/dropbox-connector.vue index 2261272..0d5fa68 100644 --- a/src/components/file-import/dropbox-connector/dropbox-connector.vue +++ b/src/components/file-import/dropbox-connector/dropbox-connector.vue @@ -1,7 +1,7 @@ /** * The MIT License (MIT) * - * Igor Zinken 2020 - https://www.igorski.nl + * Igor Zinken 2020-2022 - https://www.igorski.nl * * Permission is hereby granted, free of charge, to any person obtaining a copy of * this software and associated documentation files (the "Software"), to deal in @@ -70,7 +70,14 @@ export default { }, async created() { this.loading = true; + + // note we wrap the authentication check inside a global loading state as Dropbox + // API has been observed to have high latencies + const LOADING_KEY = "dbxc"; + this.setLoading( LOADING_KEY ); this.authenticated = await isAuthenticated(); + this.unsetLoading( LOADING_KEY ); + if ( this.authenticated ) { if ( !this.dropboxConnected ) { this.showConnectionMessage(); @@ -94,6 +101,8 @@ export default { ...mapMutations([ "openDialog", "openModal", + "setLoading", + "unsetLoading", "showNotification", ]), login() {