瀏覽代碼

Moved poweredByUppy inside the Dashboard always

//cc @nqst
Artur Paikin 6 年之前
父節點
當前提交
a5f23c7fd5
共有 3 個文件被更改,包括 47 次插入50 次删除
  1. 0 9
      src/plugins/Dashboard/Dashboard.js
  2. 7 0
      src/plugins/Dashboard/FileList.js
  3. 40 41
      src/scss/_dashboard.scss

+ 0 - 9
src/plugins/Dashboard/Dashboard.js

@@ -22,12 +22,6 @@ const PanelContent = (props) => {
   </div>
 }
 
-const poweredByUppy = (props) => {
-  return <a tabindex="-1" href="https://uppy.io" rel="noreferrer noopener" target="_blank" class="uppy-Dashboard-poweredBy">Powered by <svg aria-hidden="true" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z" fill-rule="evenodd" />
-  </svg><span class="uppy-Dashboard-poweredByUppy">Uppy</span></a>
-}
-
 module.exports = function Dashboard (props) {
   const dashboardClassName = classNames(
     { 'uppy-Root': props.isTargetDOMEl },
@@ -84,9 +78,6 @@ module.exports = function Dashboard (props) {
             })}
           </div>
         </div>
-
-        { props.proudlyDisplayPoweredByUppy && poweredByUppy(props) }
-
       </div>
     </div>
   )

+ 7 - 0
src/plugins/Dashboard/FileList.js

@@ -4,6 +4,12 @@ const ActionBrowseTagline = require('./ActionBrowseTagline')
 const classNames = require('classnames')
 const { h } = require('preact')
 
+const poweredByUppy = (props) => {
+  return <a tabindex="-1" href="https://uppy.io" rel="noreferrer noopener" target="_blank" class="uppy-Dashboard-poweredBy">Powered by <svg aria-hidden="true" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z" fill-rule="evenodd" />
+  </svg><span class="uppy-Dashboard-poweredByUppy">Uppy</span></a>
+}
+
 module.exports = (props) => {
   const noFiles = props.totalFileCount === 0
   const dashboardFilesClass = classNames(
@@ -25,6 +31,7 @@ module.exports = (props) => {
           />
         </div>
         { props.note && <div class="uppy-Dashboard-note">{props.note}</div> }
+        { props.proudlyDisplayPoweredByUppy && poweredByUppy(props) }
       </div>
     }
     {Object.keys(props.files).map((fileID) => (

+ 40 - 41
src/scss/_dashboard.scss

@@ -85,43 +85,6 @@
   }
 }
 
-.uppy-Dashboard-poweredBy {
-  display: block;
-  font-size: 11px;
-  color: rgba($color-gray, 0.8);
-  text-align: right;
-  text-decoration: none;
-  padding-top: 8px;
-  padding-right: 2px;
-}
-
-  .uppy-Dashboard--modal .uppy-Dashboard-poweredBy {
-    color: rgba($color-white, 0.7);
-  }
-
-.uppy-Dashboard-poweredByUppy {
-  color: $color-gray;
-}
-
-  .uppy-Dashboard--modal .uppy-Dashboard-poweredByUppy {
-    color: $color-white;
-  }
-
-.uppy-Dashboard-poweredByIcon {
-  stroke: $color-gray;
-  fill: none;
-  margin-left: 1px;
-  margin-right: 1px;
-  position: relative;
-  top: 1px;
-  opacity: 0.9;
-}
-
-  .uppy-Dashboard--modal .uppy-Dashboard-poweredByIcon {
-    stroke: transparent;
-    fill: $color-uppy-pink;
-  }
-
 .uppy-Dashboard-innerWrap {
   display: flex;
   flex-direction: column;
@@ -476,18 +439,54 @@
   font-size: 13px;
   line-height: 1.2;
   text-align: center;
-  // margin-top: 20px;
-  color: rgba($color-asphalt-gray, 0.7);
+  color: rgba($color-asphalt-gray, 0.8);
   position: absolute;
-  bottom: 20px;
+  bottom: 45px;
   left: 0;
   width: 100%;
 
   .uppy-Dashboard--wide & {
-    font-size: 14px;
+    font-size: 16px;
   }
 }
 
+.uppy-Dashboard-poweredBy {
+  position: absolute;
+  bottom: 23px;
+  font-size: 11px;
+  color: $color-gray;
+  text-decoration: none;
+  padding-top: 8px;
+  padding-right: 2px;
+}
+
+  // .uppy-Dashboard--modal .uppy-Dashboard-poweredBy {
+  //   color: rgba($color-white, 0.7);
+  // }
+
+.uppy-Dashboard-poweredByUppy {
+  color: $color-gray;
+}
+
+  // .uppy-Dashboard--modal .uppy-Dashboard-poweredByUppy {
+  //   color: $color-white;
+  // }
+
+.uppy-Dashboard-poweredByIcon {
+  stroke: $color-gray;
+  fill: none;
+  margin-left: 1px;
+  margin-right: 1px;
+  position: relative;
+  top: 1px;
+  opacity: 0.9;
+}
+
+  // .uppy-Dashboard--modal .uppy-Dashboard-poweredByIcon {
+  //   stroke: transparent;
+  //   fill: $color-uppy-pink;
+  // }
+
 .uppy-DashboardItem {
   list-style: none;
   margin: 10px 0;