Ie11 filecard preview fix (#1718)

* @uppy/dashboard - factored out and visually nested FileCard scss

(Without changing any actual styles)

* @uppy/dashboard - positioned image previews well in FileCard.js for IE11

And updated CSS to depend on predictable flexbox logic.

* @uppy/dashboard - FileCard.js, ensured Firefox respects flexbox, and fixed border-radius in Safari

* @uppy/dashboard - FileCard.js, fixed imports, moved local classes to local css file

* @uppy/dashboard - FileCard.js, changed classNames as per the new convention

* @uppy/dashboard - FileCard.js, removed unneeded binds

* eslint - added the eslint warning for no unused vars

* eslint - commented out unused-variables rule

It's handy to have nearby, but we don't want to discriminate against all unused variables, sometimes they are expressive.

.eslintrc.json

@@ -15,6 +15,8 @@
     "jsx-quotes": ["error", "prefer-double"],
     "compat/compat": ["error"],
 
+    // "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
+
     "jsdoc/check-alignment": ["warn"],
     "jsdoc/check-examples": ["warn"],
     "jsdoc/check-indentation": ["warn"],

packages/@uppy/dashboard/src/components/FileCard.js → packages/@uppy/dashboard/src/components/FileCard/index.js

@@ -1,18 +1,12 @@
-const getFileTypeIcon = require('../utils/getFileTypeIcon')
-const FilePreview = require('./FilePreview')
-const ignoreEvent = require('../utils/ignoreEvent.js')
 const { h, Component } = require('preact')
+const getFileTypeIcon = require('../../utils/getFileTypeIcon')
+const ignoreEvent = require('../../utils/ignoreEvent.js')
+const FilePreview = require('../FilePreview')
 
 class FileCard extends Component {
   constructor (props) {
     super(props)
 
-    this.tempStoreMeta = this.tempStoreMeta.bind(this)
-    this.saveOnEnter = this.saveOnEnter.bind(this)
-    this.renderMetaFields = this.renderMetaFields.bind(this)
-    this.handleSave = this.handleSave.bind(this)
-    this.handleCancel = this.handleCancel.bind(this)
-
     const file = this.props.files[this.props.fileCardFor]
     const metaFields = this.props.metaFields || []
 
@@ -26,16 +20,16 @@ class FileCard extends Component {
     }
   }
 
-  saveOnEnter (ev) {
+  saveOnEnter = (ev) => {
     if (ev.keyCode === 13) {
-      const file = this.props.files[this.props.fileCardFor]
       ev.stopPropagation()
       ev.preventDefault()
+      const file = this.props.files[this.props.fileCardFor]
       this.props.saveFileCard(this.state.formState, file.id)
     }
   }
 
-  tempStoreMeta (ev, name) {
+  tempStoreMeta = (ev, name) => {
     this.setState({
       formState: {
         ...this.state.formState,
@@ -44,23 +38,23 @@ class FileCard extends Component {
     })
   }
 
-  handleSave (ev) {
+  handleSave = () => {
     const fileID = this.props.fileCardFor
     this.props.saveFileCard(this.state.formState, fileID)
   }
 
-  handleCancel (ev) {
+  handleCancel = () => {
     this.props.toggleFileCard()
   }
 
-  renderMetaFields (file) {
+  renderMetaFields = () => {
     const metaFields = this.props.metaFields || []
 
-    return metaFields.map((field, i) => {
-      const id = `uppy-DashboardFileCard-input-${field.id}`
-      return <fieldset class="uppy-DashboardFileCard-fieldset">
-        <label class="uppy-DashboardFileCard-label" for={id}>{field.name}</label>
-        <input class="uppy-u-reset uppy-c-textInput uppy-DashboardFileCard-input"
+    return metaFields.map((field) => {
+      const id = `uppy-Dashboard-FileCard-input-${field.id}`
+      return <fieldset class="uppy-Dashboard-FileCard-fieldset">
+        <label class="uppy-Dashboard-FileCard-label" for={id}>{field.name}</label>
+        <input class="uppy-u-reset uppy-c-textInput uppy-Dashboard-FileCard-input"
           id={id}
           type="text"
           value={this.state.formState[field.id]}
@@ -78,7 +72,7 @@ class FileCard extends Component {
     const file = this.props.files[this.props.fileCardFor]
 
     return (
-      <div class="uppy-DashboardFileCard"
+      <div class="uppy-Dashboard-FileCard"
         data-uppy-panelType="FileCard"
         onDragOver={ignoreEvent}
         onDragLeave={ignoreEvent}
@@ -94,20 +88,20 @@ class FileCard extends Component {
             onclick={this.handleSave}>{this.props.i18n('done')}</button>
         </div>
 
-        <div class="uppy-DashboardFileCard-inner">
-          <div class="uppy-DashboardFileCard-preview" style={{ backgroundColor: getFileTypeIcon(file.type).color }}>
+        <div class="uppy-Dashboard-FileCard-inner">
+          <div class="uppy-Dashboard-FileCard-preview" style={{ backgroundColor: getFileTypeIcon(file.type).color }}>
             <FilePreview file={file} />
           </div>
 
-          <div class="uppy-DashboardFileCard-info">
-            {this.renderMetaFields(file)}
+          <div class="uppy-Dashboard-FileCard-info">
+            {this.renderMetaFields()}
           </div>
 
-          <div class="uppy-Dashboard-actions">
-            <button class="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-actionsBtn"
+          <div class="uppy-Dashboard-FileCard-actions">
+            <button class="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-FileCard-actionsBtn"
               type="button"
               onclick={this.handleSave}>{this.props.i18n('saveChanges')}</button>
-            <button class="uppy-u-reset uppy-c-btn uppy-c-btn-link uppy-Dashboard-actionsBtn"
+            <button class="uppy-u-reset uppy-c-btn uppy-c-btn-link uppy-Dashboard-FileCard-actionsBtn"
               type="button"
               onclick={this.handleCancel}>{this.props.i18n('cancel')}</button>
           </div>

packages/@uppy/dashboard/src/components/FileCard/index.scss

@@ -0,0 +1,120 @@
+.uppy-Dashboard-FileCard {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $zIndex-5;
+  box-shadow: 0px 0px 10px 4px rgba($black, 0.1);
+  background-color: $white;
+  // For Safari, otherwise there is no border-radius in FileCard.
+  border-radius: 5px;
+  .uppy-DashboardContent-bar {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  .uppy-Dashboard-FileCard-actions {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+
+  display: flex;
+  flex-direction: column;
+}
+
+  .uppy-Dashboard-FileCard-inner {
+    height: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    // For Firefox in order for flex-shrink: 1 to work properly! (https://github.com/philipwalton/flexbugs/issues/41#issuecomment-111590394)
+    min-height: 0;
+
+    display: flex;
+    flex-direction: column;
+  }
+    .uppy-Dashboard-FileCard-preview {
+      height: 60%;
+      flex-grow: 0;
+      flex-shrink: 1;
+      // For Firefox in order for flex-shrink: 1 to work properly!
+      min-height: 0;
+
+      border-bottom: 1px solid $gray-200;
+
+      // center the nested image/preview
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+      .uppy-Dashboard-FileCard-preview img.uppy-DashboardItem-previewImg {
+        max-width: 90%;
+        max-height: 90%;
+        object-fit: cover;
+        // For IE11, otherwise image aspect ration will get screwed.
+        flex: 0 0 auto;
+
+        border-radius: 3px;
+        box-shadow: 0px 3px 20px rgba($black, 0.15);
+      }
+    // ...uppy-Dashboard-FileCard-preview|
+
+    .uppy-Dashboard-FileCard-info {
+      height: 40%;
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      padding: 30px 20px 20px 20px;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+      .uppy-Dashboard-FileCard-fieldset {
+        font-size: 0;
+        border: 0;
+        padding: 0;
+        max-width: 640px;
+        margin: auto;
+        margin-bottom: 12px;
+      }
+        .uppy-Dashboard-FileCard-label {
+          display: inline-block;
+          vertical-align: middle;
+          width: 22%;
+          font-size: 12px;
+          color: $gray-700;
+
+          .uppy-size--md & {
+            font-size: 14px;
+          }
+        }
+        .uppy-Dashboard-FileCard-input {
+          display: inline-block;
+          vertical-align: middle;
+          width: 78%;
+        }
+      // ...uppy-Dashboard-FileCard-fieldset|
+    // ...uppy-Dashboard-FileCard-info|
+
+    .uppy-Dashboard-FileCard-actions {
+      height: 55px;
+      flex-shrink: 0;
+      flex-grow: 0;
+
+      border-top: 1px solid $gray-200;
+      padding: 0 15px;
+      background-color: $gray-50;
+
+      display: flex;
+      align-items: center;
+      .uppy-size--md & {
+        height: 65px;
+      }
+    }
+      .uppy-Dashboard-FileCard-actionsBtn {
+        margin-right: 10px;
+      }
+    // ...uppy-Dashboard-FileCard-actions|
+
+  // ...uppy-Dashboard-FileCard-inner|
+// ...uppy-Dashboard-FileCard|

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

@@ -6,6 +6,7 @@
 
 // Component-specific css imports
 @import './components/FileItem/index.scss';
+@import './components/FileCard/index.scss';
 
 // transitions //
 
@@ -720,22 +721,6 @@ a.uppy-Dashboard-poweredBy {
   filter: drop-shadow(rgba($black, 0.1) 0px 1px 1px);
 }
 
-.uppy-Dashboard-actions {
-  height: 55px;
-  border-top: 1px solid $gray-200;
-  display: flex;
-  align-items: center;
-  padding: 0 15px;
-  background-color: $gray-50;
-  .uppy-size--md & {
-    height: 65px;
-  }
-}
-
-.uppy-Dashboard-actionsBtn {
-  margin-right: 10px;
-}
-
 .uppy-Dashboard-upload {
   position: relative;
   width: 50px;
@@ -772,89 +757,3 @@ a.uppy-Dashboard-poweredBy {
     font-size: 9px;
   }
 }
-
-//
-// File Card
-//
-
-.uppy-DashboardFileCard {
-  // transform: translate3d(0, 0, 0);
-  // transition: transform 0.2s ease-in-out;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: $zIndex-5;
-  box-shadow: 0px 0px 10px 4px rgba($black, 0.1);
-  background-color: $white;
-  display: flex;
-  flex-direction: column;
-}
-
-  // .uppy-DashboardFileCard[aria-hidden=true] {
-  //   transform: translate3d(0, -105%, 0);
-  // }
-
-.uppy-DashboardFileCard-inner {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex: 1;
-}
-
-.uppy-DashboardFileCard-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  border-bottom: 1px solid $gray-200;
-  background-color: $gray-50; /* no !important */
-  position: relative;
-}
-
-.uppy-DashboardFileCard-preview img.uppy-DashboardItem-previewImg {
-  box-shadow: 0px 3px 20px rgba($black, 0.15);
-  max-width: 90%;
-  max-height: 90%;
-  object-fit: cover;
-  border-radius: 3px;
-  position: absolute;
-}
-
-.uppy-DashboardFileCard-info {
-  padding: 30px 20px 20px 20px;
-  max-height: 40%;
-  flex-grow: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.uppy-DashboardFileCard-fieldset {
-  font-size: 0;
-  border: 0;
-  padding: 0;
-  max-width: 640px;
-  margin: auto;
-  margin-bottom: 12px;
-}
-
-.uppy-DashboardFileCard-label {
-  display: inline-block;
-  vertical-align: middle;
-  width: 22%;
-  font-size: 12px;
-  color: $gray-700;
-
-  .uppy-size--md & {
-    font-size: 14px;
-  }
-}
-
-.uppy-DashboardFileCard-input {
-  display: inline-block;
-  vertical-align: middle;
-  width: 78%;
-}