소스 검색

try single-colored informer

@nqst thinks it shoudn’t be too noizy and I agree with that
Artur Paikin 6 년 전
부모
커밋
0eb7c5556e
2개의 변경된 파일32개의 추가작업 그리고 21개의 파일을 삭제
  1. 4 5
      packages/@uppy/informer/src/index.js
  2. 28 16
      packages/@uppy/informer/src/style.scss

+ 4 - 5
packages/@uppy/informer/src/index.js

@@ -45,14 +45,13 @@ module.exports = class Informer extends Plugin {
 
   render (state) {
     const { isHidden, type, message, details } = state.info
-    const style = {
-      backgroundColor: this.opts.typeColors[type].bg,
-      color: this.opts.typeColors[type].text
-    }
+    // const style = {
+    //   backgroundColor: this.opts.typeColors[type].bg,
+    //   color: this.opts.typeColors[type].text
+    // }
 
     return (
       <div class="uppy uppy-Informer"
-        style={style}
         aria-hidden={isHidden}>
         <p role="alert">
           {message}

+ 28 - 16
packages/@uppy/informer/src/style.scss

@@ -7,27 +7,26 @@
   left: 0;
   right: 0;
   text-align: center;
-  font-size: 11px;
-  font-weight: 500;
-  padding: 0 15px;
-  height: 25px;
-  line-height: 25px;
-  background-color: $color-black; /* no !important */
-  color: $color-white;
+  // padding: 0 15px;
+  // height: 25px;
+  // line-height: 25px;
+
   opacity: 1;
   transform: none;
   transition: all 250ms ease-in;
   z-index: $zIndex-5;
-  border-radius: 18px;
-  max-width: 400px;
-  margin: auto;
-  opacity: 0.85;
+  // border-radius: 18px;
+  // max-width: 100%;
+  // margin: auto;
+  
 
-  .uppy-Dashboard--wide & {
-    height: 35px;
-    line-height: 35px;
-    font-size: 12px;
-  }
+  // .uppy-Dashboard--wide & {
+  //   height: 35px;
+  //   line-height: 35px;
+  //   font-size: 12px;
+  //   // max-width: 500px;
+  //   padding: 0 15px;
+  // }
 }
 
   .uppy-Informer[aria-hidden=true] {
@@ -37,14 +36,27 @@
   }
 
 .uppy-Informer p {
+  display: inline-block;
   margin: 0;
   padding: 0;
   height: 25px;
   line-height: 25px;
+  font-size: 12px;
+  font-weight: 400;
+  padding: 0 15px;
+  background-color: rgba($color-asphalt-gray, 0.7); /* no !important */
+  color: $color-white;
+  border-radius: 18px;
+  max-width: 90%;
+  white-space: nowrap;
+  overflow-x: auto;
 
   .uppy-Dashboard--wide & {
     height: 35px;
     line-height: 35px;
+    font-size: 14px;
+    max-width: 500px;
+    padding: 0 20px;
   }
 }