Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-25 03:08:34 +00:00
Code Issues Projects Releases Wiki Activity

Fix header bar css in ie11 (#1700)

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

* @uppy/dashboard - added nesting visual effect for scss
This commit is contained in:
Evgenia Karunus 2019-07-04 17:01:32 +02:00 • committed by Artur Paikin
parent ae49cefd93
commit ff8eebdb9b
3 changed files with 109 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

34
packages/@uppy/dashboard/src/components/PickerPanelTopBar.js
View file

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

9
packages/@uppy/dashboard/src/components/icons.js
View file

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

155
packages/@uppy/dashboard/src/style.scss
View file

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