Fix header bar css in ie11 (#1700)

* @uppy/dashboard - css fix for title not being visible in IE11

* @uppy/dashboard - added nesting visual effect for scss

packages/@uppy/dashboard/src/components/PickerPanelTopBar.js

@@ -1,4 +1,5 @@
 const { h } = require('preact')
+const { iconPlus } = require('./icons')
 
 const uploadStates = {
   'STATE_ERROR': 'error',
@@ -77,26 +78,31 @@ function PanelTopBar (props) {
 
   return (
     <div class="uppy-DashboardContent-bar">
-      <div>
-        {!props.isAllComplete
-          ? <button class="uppy-DashboardContent-back"
-            type="button"
-            onclick={props.cancelAll}>{props.i18n('cancel')}</button>
-          : null
-        }
-      </div>
+      {
+        !props.isAllComplete &&
+        <button
+          class="uppy-DashboardContent-back"
+          type="button"
+          onclick={props.cancelAll}
+        >
+          {props.i18n('cancel')}
+        </button>
+      }
+
       <div class="uppy-DashboardContent-title" role="heading" aria-level="h1">
         <UploadStatus {...props} />
       </div>
-      { allowNewUpload &&
-        <button class="uppy-DashboardContent-addMore"
+
+      {
+        allowNewUpload &&
+        <button
+          class="uppy-DashboardContent-addMore"
           type="button"
           aria-label={props.i18n('addMoreFiles')}
           title={props.i18n('addMoreFiles')}
-          onclick={() => props.toggleAddFilesPanel(true)}>
-          <svg aria-hidden="true" focusable="false" class="UppyIcon" width="15" height="15" viewBox="0 0 15 15">
-            <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
-          </svg>
+          onclick={() => props.toggleAddFilesPanel(true)}
+        >
+          {iconPlus()}
           <span class="uppy-DashboardContent-addMoreCaption">{props.i18n('addMore')}</span>
         </button>
       }

packages/@uppy/dashboard/src/components/icons.js

@@ -104,6 +104,12 @@ function iconCross () {
   </svg>
 }
 
+function iconPlus () {
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="15" height="15" viewBox="0 0 15 15">
+    <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
+  </svg>
+}
+
 module.exports = {
   defaultPickerIcon,
   iconCopy,
@@ -119,5 +125,6 @@ module.exports = {
   iconText,
   iconCopyLink,
   iconPencil,
-  iconCross
+  iconCross,
+  iconPlus
 }

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

@@ -391,16 +391,21 @@
 }
 
 .uppy-DashboardContent-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   flex-shrink: 0;
   height: 40px;
   width: 100%;
-  border-bottom: 1px solid $gray-200;
+  padding: 0 10px;
   z-index: $zIndex-4;
+  // For when both 'Cancel' and '+ Add more' buttons are present
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  // For .uppy-DashboardContent-title's position: absolute
+  position: relative;
+
+  border-bottom: 1px solid $gray-200;
   background-color: $gray-50;
-  padding: 0 10px;
 
   .uppy-size--md & {
     height: 50px;
@@ -408,83 +413,85 @@
   }
 }
 
-.uppy-DashboardContent-title {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  text-align: center;
-  font-size: 12px;
-  line-height: 40px;
-  font-weight: 500;
-  max-width: 170px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow-x: hidden;
-  margin: auto;
+  .uppy-DashboardContent-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    font-size: 12px;
+    line-height: 40px;
+    font-weight: 500;
+    // MUST be present for title to be visible in IE11
+    width: 100%;
+    max-width: 170px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+    margin: auto;
 
-  .uppy-size--md & {
-    font-size: 14px;
-    line-height: 50px;
-    max-width: 300px;
+    .uppy-size--md & {
+      font-size: 14px;
+      line-height: 50px;
+      max-width: 300px;
+    }
   }
-}
 
-.uppy-DashboardContent-back {
-  @include reset-button;
-  @include highlight-focus;
-  border-radius: 3px;
-  display: inline-block;
-  font-size: 12px;
-  font-weight: 400;
-  cursor: pointer;
-  color: $blue;
-  padding: 7px 6px;
-  margin-left: -6px;
+  .uppy-DashboardContent-back {
+    @include reset-button;
+    @include highlight-focus;
+    border-radius: 3px;
+    font-size: 12px;
+    font-weight: 400;
+    cursor: pointer;
+    color: $blue;
+    padding: 7px 6px;
+    margin-left: -6px;
 
-  .uppy-size--md & {
-    font-size: 14px;
+    .uppy-size--md & {
+      font-size: 14px;
+    }
   }
-}
 
-.uppy-DashboardContent-addMore {
-  @include reset-button;
-  @include highlight-focus;
-  border-radius: 3px;
-  display: inline-block;
-  font-weight: 500;
-  cursor: pointer;
-  color: $blue;
-  width: 29px;
-  height: 29px;
-  padding: 7px 8px;
-  margin-right: -5px;
+  .uppy-DashboardContent-addMore {
+    @include reset-button;
+    @include highlight-focus;
+    border-radius: 3px;
+    font-weight: 500;
+    cursor: pointer;
+    color: $blue;
+    width: 29px;
+    height: 29px;
+    padding: 7px 8px;
+    margin-right: -5px;
 
-  .uppy-size--md & {
-    font-size: 14px;
-    width: auto;
-    height: auto;
-    margin-right: -8px;
+    .uppy-size--md & {
+      font-size: 14px;
+      width: auto;
+      height: auto;
+      margin-right: -8px;
+    }
   }
-}
 
-  .uppy-DashboardContent-addMore svg {
-    vertical-align: baseline;
-    margin-right: 4px;
+    .uppy-DashboardContent-addMore svg {
+      vertical-align: baseline;
+      margin-right: 4px;
 
-    .uppy-size--md & {
-      width: 11px;
-      height: 11px;
+      .uppy-size--md & {
+        width: 11px;
+        height: 11px;
+      }
     }
-  }
 
-  .uppy-DashboardContent-addMoreCaption {
-    display: none;
+    .uppy-DashboardContent-addMoreCaption {
+      display: none;
 
-    .uppy-size--md & {
-      display: inline;
+      .uppy-size--md & {
+        display: inline;
+      }
     }
-  }
+  // ...uppy-DashboardContent-addMore|
+// ...uppy-DashboardContent-bar|
 
 .uppy-DashboardContent-panel {
   position: absolute;