diff --git a/packages/@uppy/dashboard/src/components/PickerPanelTopBar.js b/packages/@uppy/dashboard/src/components/PickerPanelTopBar.js
index 1952f77e7..b1b481fd0 100644
--- a/packages/@uppy/dashboard/src/components/PickerPanelTopBar.js
+++ b/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 (
-
- {!props.isAllComplete
- ?
- : null
- }
-
+ {
+ !props.isAllComplete &&
+
+ }
+
- { allowNewUpload &&
-
}
diff --git a/packages/@uppy/dashboard/src/components/icons.js b/packages/@uppy/dashboard/src/components/icons.js
index 9c598cd7d..453416ef2 100644
--- a/packages/@uppy/dashboard/src/components/icons.js
+++ b/packages/@uppy/dashboard/src/components/icons.js
@@ -104,6 +104,12 @@ function iconCross () {
}
+function iconPlus () {
+ return
+}
+
module.exports = {
defaultPickerIcon,
iconCopy,
@@ -119,5 +125,6 @@ module.exports = {
iconText,
iconCopyLink,
iconPencil,
- iconCross
+ iconCross,
+ iconPlus
}
diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss
index 9d531df83..b7f7705ad 100644
--- a/packages/@uppy/dashboard/src/style.scss
+++ b/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;
- z-index: $zIndex-4;
- background-color: $gray-50;
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;
.uppy-size--md & {
height: 50px;
@@ -408,84 +413,86 @@
}
}
-.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-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-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-size--md & {
- font-size: 14px;
- width: auto;
- height: auto;
- margin-right: -8px;
- }
-}
-
- .uppy-DashboardContent-addMore svg {
- vertical-align: baseline;
- margin-right: 4px;
+ .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 & {
- width: 11px;
- height: 11px;
+ font-size: 14px;
+ line-height: 50px;
+ max-width: 300px;
}
}
- .uppy-DashboardContent-addMoreCaption {
- display: none;
+ .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 & {
- display: inline;
+ font-size: 14px;
}
}
+ .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-DashboardContent-addMore svg {
+ vertical-align: baseline;
+ margin-right: 4px;
+
+ .uppy-size--md & {
+ width: 11px;
+ height: 11px;
+ }
+ }
+
+ .uppy-DashboardContent-addMoreCaption {
+ display: none;
+
+ .uppy-size--md & {
+ display: inline;
+ }
+ }
+ // ...uppy-DashboardContent-addMore|
+// ...uppy-DashboardContent-bar|
+
.uppy-DashboardContent-panel {
position: absolute;
top: 0;