fix(uploadings_panel): normalize styles and clean up

public/static/css/default.css

@@ -441,7 +441,7 @@
 .title-l {
   font-size: 1.8rem;
   font-weight: bold;
-  line-height: 2.5rem;
+  line-height: 3.2rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -451,7 +451,7 @@
 
 .desc-l {
   font-size: 1.2rem;
-  line-height: 2rem;
+  line-height: 3.2rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -461,7 +461,7 @@
 
 .title-m {
   font-size: 1.4rem;
-  line-height: 2rem;
+  line-height: 3.2rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -471,7 +471,7 @@
 
 .title-m-wrap {
   font-size: 1.4rem;
-  line-height: 2rem;
+  line-height: 3.2rem;
   overflow: hidden;
   overflow-wrap: break-word;
   display: block;
@@ -479,7 +479,7 @@
 
 .desc-m {
   font-size: 1.2rem;
-  line-height: 2rem;
+  line-height: 3.2rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

public/static/css/reset.css

@@ -22,9 +22,6 @@ html {
     "Arial", sans-serif;
   font-size: 62.5%;
 }
-body {
-  line-height: 200%;
-}
 *:focus {
   outline: none;
 }
@@ -68,16 +65,12 @@ table {
 }
 
 input {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   line-height: 1.4rem;
   height: 1.4rem;
-  font-weight: bold;
-  border: none;
   padding: 0.8rem 1rem;
-  width: 10rem;
-
+  border: solid 1px #95a5a6;
   border-radius: 0.5rem;
-
   transition: opacity 300ms, box-shadow 300ms;
 }
 
@@ -87,13 +80,14 @@ input:focus {
 
 button {
   cursor: pointer;
+
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+  padding: 1rem 1rem;
+  font-weight: bold;
   border: none;
   border-radius: 0.5rem;
   outline: none;
-  padding: 0.8rem 1rem;
-
-  font-weight: bold;
-  border-radius: 0.5rem;
 
   transition: opacity 300ms;
 }

public/static/css/white.css

@@ -180,11 +180,7 @@ input:focus {
   height: 4rem;
 }
 
-.theme-default #space-used {
-  text-align: right;
-  line-height: 3rem;
-  font-size: 1.4rem;
-}
+
 
 .container {
   width: 100%;
@@ -203,10 +199,7 @@ input:focus {
   margin-right: 0;
 } */
 
-.theme-default .select-btn {
-  width: 8rem;
-  display: inline-block;
-}
+
 
 .theme-default #op-bar {
 }
@@ -340,40 +333,6 @@ input:focus {
   padding: 0 1rem;
 }
 
-.theme-default #upload-list .info {
-  display: inline-block;
-  width: 70%;
-}
-
-.theme-default #upload-list .op {
-  display: inline-block;
-  width: 30%;
-  text-align: right;
-}
-
-.theme-default #upload-list .title {
-  font-size: 1.4rem;
-  line-height: 4rem;
-  overflow-wrap: break-word;
-}
-
-.theme-default #upload-list .desc {
-  font-size: 1.2rem;
-  line-height: 4rem;
-  overflow-wrap: break-word;
-}
-
-.theme-default #upload-list .progress-grey {
-  background-color: #ecf0f6;
-  width: 100%;
-  height: 0.3rem;
-}
-
-.theme-default #upload-list .progress-green {
-  background-color: #1abc9c;
-  height: 100%;
-}
-
 .theme-default .upload-item {
   padding: 1rem 0 1rem 0;
 }
@@ -566,7 +525,6 @@ input:focus {
   color: #34495e;
   background-color: #ecf0f6;
   border: solid 1px #95a5a6;
-  /* margin: 0.5rem 0 1rem 0; */
 }
 
 .theme-default .h1,
@@ -610,10 +568,6 @@ input:focus {
   line-height: 3rem;
 }
 
-.theme-default button {
-  font-size: 1.2rem;
-}
-
 .theme-default .button-default {
   color: #697384;
   background-color: #ecf0f6;
@@ -627,10 +581,3 @@ input:focus {
   width: 48rem;
 }
 
-.theme-default .badge {
-  border: none;
-  border-radius: 0.5rem;
-  font-weight: bold;
-  font-size: 1.2rem;
-  padding: 0.8rem 1rem;
-}

public/static/css/white_compact.css

@@ -66,3 +66,48 @@
   line-height: 3rem;
   font-size: 1.4rem;
 }
+
+.theme-default .badge {
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: bold;
+  font-size: 1.2rem;
+  padding: 1rem 1rem;
+  line-height: 1.2rem;
+  display: inline-block;
+}
+
+.theme-default #upload-list .progress-grey {
+  background-color: #ecf0f6;
+  width: 100%;
+  height: 0.3rem;
+}
+
+.theme-default #upload-list .progress-green {
+  background-color: #1abc9c;
+  height: 100%;
+  transition: width 300ms;
+}
+
+.theme-default #upload-list .info {
+  display: inline-block;
+  width: 70%;
+}
+
+.theme-default #upload-list .op {
+  display: inline-block;
+  width: 30%;
+  text-align: right;
+}
+
+.theme-default #upload-list .title {
+  font-size: 1.4rem;
+  line-height: 3.2rem;
+  overflow-wrap: break-word;
+}
+
+.theme-default #upload-list .desc {
+  font-size: 1.2rem;
+  line-height: 3.2rem;
+  overflow-wrap: break-word;
+}

src/client/web/src/components/control/btn_list.tsx

@@ -25,7 +25,7 @@ export const BtnList = (props: Props) => {
   const btns = props.btnNames.map((btnName: string, i: number) => {
     const cb = props.btnCallbacks.get(i);
     return (
-      <button key={`rows-${i}`} className="float" onClick={cb}>
+      <button key={`rows-${i}`} className="float button-default" onClick={cb}>
         {btnName}
       </button>
     );

src/client/web/src/components/panel_uploadings.tsx

@@ -15,6 +15,7 @@ import { UploadEntry, UploadState } from "../worker/interface";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
 import { Rows } from "./layout/rows";
+import { NotFoundBanner } from "./visual/notfound";
 import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
 import { HotkeyHandler } from "../common/hotkeys";
 
@@ -66,9 +67,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         throw deleteStatus;
       }
 
-      const statuses = await Promise.all([
-        updater().self(),
-      ]);
+      const statuses = await Promise.all([updater().self()]);
       if (statuses.join("") !== "") {
         throw statuses.join(";");
       }
@@ -96,60 +95,52 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
           ? 100
           : Math.floor((uploading.uploaded / uploading.size) * 100);
 
-      let rightCell = (
-        <div className="item-op">
-          <button
-            onClick={() => this.stopUploading(uploading.filePath)}
-            className="float-input"
-          >
-            {this.props.msg.pkg.get("browser.stop")}
-          </button>
-          <button
-            onClick={() => this.deleteUpload(uploading.filePath)}
-            className="float-input"
-          >
-            {this.props.msg.pkg.get("browser.delete")}
-          </button>
-        </div>
-      );
-
+      let uploadState = <span></span>;
       switch (uploading.state) {
         case UploadState.Error:
-          rightCell = (
-            <div className="item-op">
-              <span className="badge white-font red0-bg margin-r-m">
-                {this.props.msg.pkg.get("state.error")}
-              </span>
-              <button
-                onClick={() => this.deleteUpload(uploading.filePath)}
-                className="float-input"
-              >
-                {this.props.msg.pkg.get("browser.delete")}
-              </button>
-            </div>
+          uploadState = (
+            <span className="badge white-font red0-bg margin-r-m">
+              {this.props.msg.pkg.get("state.error")}
+            </span>
           );
           break;
         case UploadState.Stopped:
-          rightCell = (
-            <div className="item-op">
-              <span className="badge yellow0-font black-bg margin-r-m">
-                {this.props.msg.pkg.get("state.stopped")}
-              </span>
-              <button
-                onClick={() => this.deleteUpload(uploading.filePath)}
-                className="float-input"
-              >
-                {this.props.msg.pkg.get("browser.delete")}
-              </button>
-            </div>
+          uploadState = (
+            <span className="badge yellow0-font black-bg margin-r-m">
+              {this.props.msg.pkg.get("state.stopped")}
+            </span>
           );
           break;
         default:
         // no op
       }
 
+      const stopButton =
+        uploading.state !== UploadState.Error &&
+        uploading.state !== UploadState.Stopped ? (
+          <button
+            onClick={() => this.stopUploading(uploading.filePath)}
+            className="inline-block margin-r-m margin-b-m"
+          >
+            {this.props.msg.pkg.get("browser.stop")}
+          </button>
+        ) : null;
+
+      const operations = (
+        <div>
+          {uploadState}
+          {stopButton}
+          <button
+            onClick={() => this.deleteUpload(uploading.filePath)}
+            className="inline-block"
+          >
+            {this.props.msg.pkg.get("browser.delete")}
+          </button>
+        </div>
+      );
+
       const progressBar = (
-        <div className="progress-grey">
+        <div className="progress-grey margin-t-s">
           <div
             className="progress-green"
             style={{ width: `${progress}%` }}
@@ -177,7 +168,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
             </span>
           </div>
 
-          <div className="op">{rightCell}</div>
+          <div className="op">{operations}</div>
 
           {progressBar}
           {errorInfo}
@@ -201,6 +192,27 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
   };
 
   render() {
+    const title = (
+      <Flexbox
+        children={List([
+          <Flexbox
+            children={List([
+              <RiUploadCloudFill
+                size="3.2rem"
+                className="margin-r-m black-font"
+              />,
+
+              <span className="title-m bold">
+                {this.props.msg.pkg.get("browser.upload.title")}
+              </span>,
+            ])}
+          />,
+
+          <span></span>,
+        ])}
+      />
+    );
+
     const orderByCallbacks = List([
       () => {
         this.orderBy(this.props.msg.pkg.get("item.path"));
@@ -217,66 +229,24 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
     const uploadingRows = this.makeRowsInputs(
       this.props.uploadingsInfo.uploadings
     );
-    const view = <Rows rows={uploadingRows} />;
-
-    const noUploadingView = (
-      <Container>
-        <Flexbox
-          children={List([
-            <RiCloudOffFill size="4rem" className="margin-r-m red0-font" />,
-            <span>
-              <h3 className="title-l">
-                {this.props.msg.pkg.get("upload.404.title")}
-              </h3>
-              <span className="desc-l grey0-font">
-                {this.props.msg.pkg.get("upload.404.desc")}
-              </span>
-            </span>,
-          ])}
-          childrenStyles={List([
-            { flex: "auto", justifyContent: "flex-end" },
-            { flex: "auto" },
-          ])}
-        />
-      </Container>
-    );
-
-    const list =
-      this.props.uploadingsInfo.uploadings.size === 0 ? (
-        noUploadingView
-      ) : (
-        <Container>
-          <Flexbox
-            children={List([
-              <span className="margin-b-l">
-                <Flexbox
-                  children={List([
-                    <RiUploadCloudFill
-                      size="3rem"
-                      className="margin-r-m black-font"
-                    />,
-
-                    <span>
-                      <span className="title-m bold">
-                        {this.props.msg.pkg.get("browser.upload.title")}
-                      </span>
-                      <span className="desc-m grey0-font">
-                        {this.props.msg.pkg.get("browser.upload.desc")}
-                      </span>
-                    </span>,
-                  ])}
-                />
-              </span>,
-
-              <span></span>,
-            ])}
-          />
-
+    const view =
+      this.props.uploadingsInfo.uploadings.size > 0 ? (
+        <div>
           {orderByButtons}
-          {view}
-        </Container>
+          <Rows rows={uploadingRows} />
+        </div>
+      ) : (
+        <NotFoundBanner title={this.props.msg.pkg.get("upload.404.title")} />
       );
 
-    return <div id="upload-list">{list}</div>;
+    return (
+      <div id="upload-list">
+        <Container>
+          {title}
+          <div className="hr"></div>
+          {view}
+        </Container>
+      </div>
+    );
   }
 }