Merge pull request #1279 from transloadit/dashboard/ui-fixes

Dashboard ui fixes

.gitignore

@@ -3,6 +3,7 @@ Thumbs.db
 npm-debug.log
 env.sh
 node_modules
+.cache
 
 dist/
 lib/

packages/@uppy/core/src/_common.scss

@@ -19,8 +19,8 @@
 // }
 
 .uppy-Root *:focus {
-  outline: $size-focus-outline solid $color-cornflower-blue;
-  outline-offset: $size-focus-offset;
+  outline: $size-focus-outline solid $color-cornflower-blue; /* no !important */
+  outline-offset: $size-focus-offset; /* no !important */
 }
 
 // https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
@@ -72,7 +72,7 @@
   display: inline;
   empty-cells: show;
   float: none;
-  font-family: serif;
+  font-family: inherit;
   font-size: medium;
   font-style: normal;
   font-variant: normal;

packages/@uppy/core/src/index.js

@@ -46,7 +46,9 @@ class Uppy {
           1: 'Select %{smart_count} files'
         },
         cancel: 'Cancel',
-        logOut: 'Log out'
+        logOut: 'Log out',
+        filter: 'Filter',
+        resetFilter: 'Reset filter'
       }
     }
 

packages/@uppy/dashboard/src/style.scss

@@ -316,15 +316,13 @@
     }
   }
 
-  .uppy-DashboardTab-btn svg,
-  .uppy-DashboardTab-btn svg * {
+  .uppy-DashboardTab-btn svg {
     max-width: 100%;
     max-height: 100%;
     display: inline-block;
     vertical-align: text-top;
     overflow: hidden;
-    transition: transform 0.2s;
-    will-change: transform;
+    transition: transform ease-in-out 0.2s;
   }
 
   .uppy-DashboardTab-btn:hover svg {
@@ -573,16 +571,16 @@
 
 .uppy-Dashboard-note {
   font-size: 13px;
-  line-height: 1.2;
+  line-height: 1.25;
   text-align: center;
   color: rgba($color-asphalt-gray, 0.8);
-  // position: absolute;
-  // bottom: 45px;
-  // left: 0;
-  width: 100%;
+  max-width: 80%;
+  margin: auto;
 
   .uppy-size--md & {
     font-size: 16px;
+    line-height: 1.3;
+    max-width: 90%;
   }
 }
 
@@ -607,6 +605,7 @@
   position: relative;
   top: 1px;
   opacity: 0.9;
+  vertical-align: text-top;
 }
 
 .uppy-DashboardItem {

packages/@uppy/provider-views/src/Breadcrumbs.js

@@ -2,18 +2,26 @@ const { h } = require('preact')
 
 const Breadcrumb = (props) => {
   return (
-    <button type="button" onclick={props.getFolder}>{props.title}</button>
+    <span>
+      <button
+        type="button"
+        class="uppy-u-reset"
+        onclick={props.getFolder}>{props.title}</button>
+      {!props.isLast ? ' / ' : ''}
+    </span>
   )
 }
 
 module.exports = (props) => {
   return (
     <div class="uppy-Provider-breadcrumbs">
+      <div class="uppy-Provider-breadcrumbsIcon">{props.breadcrumbsIcon}</div>
       {
         props.directories.map((directory, i) => {
           return Breadcrumb({
             getFolder: () => props.getFolder(directory.id),
-            title: i === 0 ? props.title : directory.title
+            title: i === 0 ? props.title : directory.title,
+            isLast: i + 1 === props.directories.length
           })
         })
       }

packages/@uppy/provider-views/src/Browser.js

@@ -20,14 +20,12 @@ const Browser = (props) => {
     <div class={classNames('uppy-ProviderBrowser', `uppy-ProviderBrowser-viewType--${props.viewType}`)}>
       <div class="uppy-ProviderBrowser-header">
         <div class={classNames('uppy-ProviderBrowser-headerBar', !props.showBreadcrumbs && 'uppy-ProviderBrowser-headerBar--simple')}>
-          <div class="uppy-Provider-breadcrumbsWrap">
-            <div class="uppy-Provider-breadcrumbsIcon">{props.pluginIcon && props.pluginIcon()}</div>
-            {props.showBreadcrumbs && Breadcrumbs({
-              getFolder: props.getFolder,
-              directories: props.directories,
-              title: props.title
-            })}
-          </div>
+          {props.showBreadcrumbs && Breadcrumbs({
+            getFolder: props.getFolder,
+            directories: props.directories,
+            breadcrumbsIcon: props.pluginIcon && props.pluginIcon(),
+            title: props.title
+          })}
           <span class="uppy-ProviderBrowser-user">{props.username}</span>
           <button type="button" onclick={props.logout} class="uppy-ProviderBrowser-userLogout">
             {props.i18n('logOut')}

packages/@uppy/provider-views/src/Filter.js

@@ -3,52 +3,41 @@ const { h, Component } = require('preact')
 module.exports = class Filter extends Component {
   constructor (props) {
     super(props)
-    this.isEmpty = true
     this.handleKeyPress = this.handleKeyPress.bind(this)
-    this.handleClear = this.handleClear.bind(this)
   }
 
-  // componentDidMount () {
-  //   this.isEmpty = true
-  //   // this.input.focus()
-  // }
-
   handleKeyPress (ev) {
     if (ev.keyCode === 13) {
       ev.stopPropagation()
       ev.preventDefault()
       return
     }
-    this.isEmpty = !this.input.value.length > 0
     this.props.filterQuery(ev)
   }
 
-  handleClear (ev) {
-    this.input.value = ''
-    this.props.filterQuery()
-  }
-
   render () {
-    return <div class="uppy-u-reset uppy-ProviderBrowser-search">
-      <svg class="UppyIcon uppy-ProviderBrowser-searchIcon" viewBox="0 0 100 100">
+    return <div class="uppy-ProviderBrowser-search">
+      <svg aria-hidden="true" class="UppyIcon uppy-ProviderBrowser-searchIcon" viewBox="0 0 100 100">
         <path d="M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z" />
       </svg>
       <input
         class="uppy-u-reset uppy-ProviderBrowser-searchInput"
         type="text"
-        placeholder="Filter"
-        aria-label="Filter"
+        placeholder={this.props.i18n('filter')}
+        aria-label={this.props.i18n('filter')}
         onkeyup={this.handleKeyPress}
         onkeydown={this.handleKeyPress}
         onkeypress={this.handleKeyPress}
         value={this.props.filterInput}
         ref={(input) => { this.input = input }} />
-      { !this.isEmpty &&
+      { this.props.filterInput &&
         <button
           class="uppy-u-reset uppy-ProviderBrowser-searchClose"
           type="button"
-          onclick={this.handleClear}>
-          <svg class="UppyIcon" viewBox="0 0 19 19">
+          aria-label={this.props.i18n('resetFilter')}
+          title={this.props.i18n('resetFilter')}
+          onclick={this.props.filterQuery}>
+          <svg aria-hidden="true" class="UppyIcon" viewBox="0 0 19 19">
             <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
           </svg>
         </button>

packages/@uppy/provider-views/src/style.scss

@@ -39,12 +39,9 @@
   }
 }
 
-.uppy-Provider-breadcrumbsWrap {
-  flex: 1;
-}
-
 .uppy-Provider-breadcrumbs {
   display: inline-block;
+  flex: 1;
   color: darken($color-gray, 25%);
   font-size: 12px;
   line-height: 1;
@@ -58,7 +55,7 @@
 .uppy-Provider-breadcrumbsIcon {
   display: inline;
   color: darken($color-gray, 25%);
-  vertical-align: middle;
+  vertical-align: text-bottom;
   margin-right: 8px;
   line-height: 1;
 }
@@ -70,23 +67,13 @@
   }
 
 .uppy-Provider-breadcrumbs button {
-  @include reset-button;
   display: inline-block;
-  cursor: pointer;
   font-size: 14px;
 }
 
 .uppy-Provider-breadcrumbs button:hover {
   text-decoration: underline;
-}
-
-// .uppy-Provider-breadcrumbs button:focus {
-//   outline: 1px dotted rgb(145, 145, 145);
-// }
-
-.uppy-Provider-breadcrumbs button ~ button:before {
-  content: '/';
-  padding: 0 7px;
+  cursor: pointer;
 }
 
 .uppy-ProviderBrowser {
@@ -125,9 +112,9 @@
   .uppy-size--md & {
     display: flex;
     align-items: center;
-    height: 40px;
-    line-height: 40px;
-    padding: 0 15px;
+    // height: 40px;
+    // line-height: 40px;
+    padding: 12px 15px;
   }
 }
 
@@ -150,6 +137,17 @@
   height: 30px;
   margin-top: 5px;
   margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.uppy-ProviderBrowser-searchIcon {
+  width: 16px;
+  height: 16px;
+  z-index: $zIndex-3;
+  color: rgba($color-gray, 0.6);
+  margin-left: 16px;
+  margin-right: 7px;
 }
 
 .uppy-ProviderBrowser-searchInput {
@@ -157,42 +155,37 @@
   height: 30px;
   background-color: transparent;
   outline: 0;
-  font-family: sans-serif;
-  font-size: 14px;
+  font-family: $font-family-base;
+  font-size: 13px;
   line-height: 30px;
   border: 0;
-  padding: 0 16px 0 43px;
+  padding: 0 16px 0 0;
   z-index: $zIndex-2;
 }
 
-.uppy-ProviderBrowser-searchInput::-webkit-input-placeholder,
-.uppy-ProviderBrowser-searchInput::-moz-placeholder,
-.uppy-ProviderBrowser-searchInput::-ms-input-placeholder {
-  color: rgba($color-gray, 0.75);
-  letter-spacing: 1px;
-}
-
-.uppy-ProviderBrowser-searchIcon {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  left: 16px;
-  top: 7px;
-  z-index: $zIndex-3;
-  color: rgba($color-gray, 0.6);
-}
-
 .uppy-ProviderBrowser-searchClose {
   width: 12px;
   height: 12px;
   position: absolute;
   right: 16px;
-  top: 7px;
+  top: 8px;
   z-index: $zIndex-3;
-  color: rgba($color-gray, 0.6);
+  color: $color-gray;
   cursor: pointer;
 }
 
+  .uppy-ProviderBrowser-searchClose svg {
+    vertical-align: text-top;
+  }
+
+.uppy-ProviderBrowser-searchInput::placeholder,
+.uppy-ProviderBrowser-searchInput::-webkit-input-placeholder,
+.uppy-ProviderBrowser-searchInput::-moz-placeholder,
+.uppy-ProviderBrowser-searchInput::-ms-input-placeholder {
+  color: rgba($color-gray, 0.85);
+  letter-spacing: 1px;
+}
+
 .uppy-ProviderBrowser-userLogout {
   @include reset-button();
   cursor: pointer;