Kezdőlap Felfedezés Súgó
Bejelentkezés
biheng
/
uppy
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

Dashboard tablist IE10 flex fix and refactor (#2192)

* Refactor Dashboard provider list flexbox styles to work in IE10

* Refactor and cleanup

* tweak title width
Artur Paikin 5 éve
szülő
7bf390abda
commit
d85185559d
3 módosított fájl, 32 hozzáadás és 138 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 0 13
      examples/transloadit-textarea/index.html
  2. 13 33
      packages/@uppy/dashboard/src/components/AddFiles.js
  3. 19 92
      packages/@uppy/dashboard/src/style.scss

+ 0 - 13
examples/transloadit-textarea/index.html
Fájl Megtekintése 

@@ -97,19 +97,6 @@
 
       .snippet {
 
         margin-top: 25px;
 
       }
 
-
 
-      /* temp uppy fix, there was a typo in class name */
 
-      /* remove after uppy@>0.30.3 */
 
-      .uppy-DashboardAddFiles {
 
-        display: flex;
 
-        justify-content: center;
 
-        align-items: center;
 
-        flex-direction: column;
 
-        height: 100%;
 
-        position: relative;
 
-        text-align: center;
 
-        flex: 1;
 
-      }
 
     </style>
 
   </head>
 
   <body>

+ 13 - 33
packages/@uppy/dashboard/src/components/AddFiles.js
Fájl Megtekintése 

@@ -102,35 +102,17 @@ class AddFiles extends Component {
 
         {this.props.i18n('browse')}
 
       </button>
 
 
-    const renderDropFilesSubtitle = (numberOfAcquirers) => {
 
-      if (numberOfAcquirers > 0) {
 
-        return this.props.i18nArray('dropPasteImport', { browse })
 
-      }
 
-      return this.props.i18nArray('dropPaste', { browse })
 
-    }
 
-
 
     return (
 
-      <div class="uppy-Dashboard-dropFilesTitleGroup">
 
-        <div class="uppy-Dashboard-dropFilesTitle">
 
-          {renderDropFilesSubtitle(numberOfAcquirers)}
 
-        </div>
 
+      <div class="uppy-Dashboard-AddFiles-title">
 
+        {
 
+          numberOfAcquirers > 0
 
+            ? this.props.i18nArray('dropPasteImport', { browse })
 
+            : this.props.i18nArray('dropPaste', { browse })
 
+        }
 
       </div>
 
     )
 
   }
 
 
-  renderBrowseButton = () => {
 
-    return (
 
-      <button
 
-        type="button"
 
-        class="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-browseBtn"
 
-        onclick={this.triggerFileInputClick}
 
-        data-uppy-super-focusable
 
-      >
 
-        Browse My Device
 
-      </button>
 
-    )
 
-  }
 
-
 
   renderAcquirer = (acquirer) => {
 
     return (
 
       <div class="uppy-DashboardTab" role="presentation">
 
@@ -158,7 +140,7 @@ class AddFiles extends Component {
 
     const lastTwoAcquirers = acquirersWithoutLastTwo.splice(acquirers.length - 2, acquirers.length)
 
 
     return (
 
-      <div class="uppy-DashboardTabs-list" role="tablist">
 
+      <div class="uppy-Dashboard-AddFiles-list" role="tablist">
 
         {this.renderMyDeviceAcquirer()}
 
         {acquirersWithoutLastTwo.map((acquirer) => this.renderAcquirer(acquirer))}
 
         <span role="presentation" style="white-space: nowrap;">
 
@@ -170,15 +152,13 @@ class AddFiles extends Component {
 
 
   render () {
 
     return (
 
-      <div class="uppy-DashboardAddFiles">
 
+      <div class="uppy-Dashboard-AddFiles">
 
         {this.renderHiddenFileInput()}
 
-        <div class="uppy-DashboardTabs">
 
-          {this.renderDropPasteBrowseTagline()}
 
-          {this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers)}
 
-          <div class="uppy-DashboardAddFiles-info">
 
-            {this.props.note && <div class="uppy-Dashboard-note">{this.props.note}</div>}
 
-            {this.props.proudlyDisplayPoweredByUppy && this.renderPoweredByUppy(this.props)}
 
-          </div>
 
+        {this.renderDropPasteBrowseTagline()}
 
+        {this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers)}
 
+        <div class="uppy-Dashboard-AddFiles-info">
 
+          {this.props.note && <div class="uppy-Dashboard-note">{this.props.note}</div>}
 
+          {this.props.proudlyDisplayPoweredByUppy && this.renderPoweredByUppy(this.props)}
 
         </div>
 
       </div>
 
     )

+ 19 - 92
packages/@uppy/dashboard/src/style.scss
Fájl Megtekintése 

@@ -193,7 +193,7 @@
 
   }
 
 }
 
 
-.uppy-DashboardAddFiles {
 
+.uppy-Dashboard-AddFiles {
 
   display: flex;
 
   justify-content: center;
 
   align-items: center;
 
@@ -219,30 +219,10 @@
 
   }
 
 }
 
 
-.uppy-DashboardTabs {
 
-  display: flex;
 
-  flex-direction: column;
 
-  // justify-content: center;
 
-  width: 100%;
 
-  height: 100%;
 
-
 
-  .uppy-size--md & {
 
-    align-items: center;
 
-    height: auto;
 
-  }
 
-
 
-  [data-uppy-num-acquirers="0"] & {
 
-    height: auto;
 
-  }
 
-}
 
-
 
-.uppy-DashboardAddFiles-info {
 
+.uppy-Dashboard-AddFiles-info {
 
   padding-top: 15px;
 
   padding-bottom: 15px;
 
-  // flex: 1;
 
-  // flex-grow: 0;
 
-  // flex-shrink: 1;
 
-  // flex-basis: 0%;
 
+  margin-top: auto;
 
   
   // hide on short note and “powered by” on short screens
 
   // such as CodePen, or inline dashboard with height < 400px
 
@@ -260,6 +240,10 @@
 
     padding-top: 30px;
 
     padding-bottom: 0;
 
   }
 
+
 
+  [data-uppy-num-acquirers="0"] & {
 
+    margin-top: 0;
 
+  }
 
 }
 
 
 .uppy-Dashboard-browse {
 
@@ -299,27 +283,25 @@
 
   }
 
 }
 
 
-.uppy-DashboardTabs-list {
 
-  // display: flex;
 
-  // flex-direction: column;
 
-  // flex-grow: 2;
 
-  // flex-shrink: 1;
 
-  // flex-basis: 0%;
 
-  flex: 2;
 
+.uppy-Dashboard-AddFiles-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  flex: 1;
 
   overflow-y: auto;
 
   -webkit-overflow-scrolling: touch;
 
   margin-top: 2px;
 
   padding: 2px 0;
 
-  // max-height: 350px;
 
+  width: 100%;
 
 
   .uppy-size--md & {
 
     flex-direction: row;
 
     flex-wrap: wrap;
 
     justify-content: center;
 
     max-width: 600px;
 
-    overflow-y: initial;
 
+    overflow-y: visible;
 
     margin-top: 15px;
 
     padding-top: 0;
 
+    flex: none;
 
   }
 
 }
 
 
@@ -669,7 +651,7 @@
 
   .uppy-Dashboard-progressindicators {
 
     opacity: 0.15;
 
   }
 
-  .uppy-DashboardAddFiles {
 
+  .uppy-Dashboard-AddFiles {
 
     opacity: 0.03;
 
   }
 
 }
 
@@ -683,31 +665,7 @@
 
   }
 
 }
 
 
-.uppy-Dashboard-dropFilesTitleGroup {
 
-  padding: 0 15px;
 
-  // display: flex;
 
-  // flex-grow: 0;
 
-  // flex-shrink: 0;
 
-  // max-width: 270px;
 
-  // margin: auto;
 
-  flex: 0;
 
-
 
-  .uppy-size--md & {
 
-    display: flex;
 
-    align-items: center;
 
-    flex-direction: column;
 
-    flex-grow: 1;
 
-    flex-shrink: 1;
 
-    flex-basis: 0%;
 
-    // wider, to accomodate for different translations
 
-    max-width: 450px;
 
-    font-size: 27px;
 
-    text-align: center;
 
-    margin: auto;
 
-  }
 
-}
 
-
 
-.uppy-Dashboard-dropFilesTitle {
 
+.uppy-Dashboard-AddFiles-title {
 
   font-size: 17px;
 
   line-height: 1.35;
 
   font-weight: 500;
 
@@ -715,13 +673,15 @@
 
   margin-top: 15px;
 
   margin-bottom: 5px;
 
   text-align: left;
 
+  padding: 0 15px;
 
+  width: 100%;
 
 
   .uppy-size--md & {
 
-    display: block;
 
     font-size: 25px;
 
     margin-top: 5px;
 
     font-weight: 400;
 
     text-align: center;
 
+    max-width: 480px;
 
   }
 
 
   [data-uppy-num-acquirers="0"] & {
 
@@ -741,39 +701,6 @@
 
   }
 
 }
 
 
-.uppy-Dashboard-dropFilesMobileTitle {
 
-  font-size: 11px;
 
-  text-transform: uppercase;
 
-  font-weight: 500;
 
-  color: $gray-600;
 
-  text-align: left;
 
-  padding: 0 15px;
 
-  margin-top: 10px;
 
-
 
-  .uppy-size--md & {
 
-    display: none;
 
-  }
 
-}
 
-
 
-// .uppy-Dashboard-dropFilesSingleInlineProvider {
 
-//   @include clear-focus;
 
-//   // font-size: 16px;
 
-//   cursor: pointer;
 
-//   color: rgba($blue, 0.9);
 
-
 
-//   svg {
 
-//     display: inline-block;
 
-//     vertical-align: middle;
 
-//     width: 20px;
 
-//     height: 20px;
 
-//     margin-left: 4px;
 
-//   }
 
-
 
-//   span:hover, &:focus span {
 
-//     border-bottom: 1px solid $blue;
 
-//   }
 
-// }
 
-
 
 .uppy-Dashboard-note {
 
   font-size: 14px;
 
   line-height: 1.25;