From 969cdc80322437ad803feb1b7afee48064e01854 Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Sun, 29 Aug 2021 16:53:47 +0800
Subject: [PATCH] fix(ui/browser): move buttons to item list

---
 public/static/css/reset.css               |  3 +-
 src/client/web/src/components/browser.tsx | 82 ++++++++++++-----------
 2 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/public/static/css/reset.css b/public/static/css/reset.css
index 9bd5121..1cc5e51 100644
--- a/public/static/css/reset.css
+++ b/public/static/css/reset.css
@@ -92,7 +92,8 @@ input {
 }
 
 input:focus {
-  background-color: rgba(0, 0, 0, 0.2);
+  opacity: 0.8;
+  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
 }
 
 button {
diff --git a/src/client/web/src/components/browser.tsx b/src/client/web/src/components/browser.tsx
index 3622534..800bc7c 100644
--- a/src/client/web/src/components/browser.tsx
+++ b/src/client/web/src/components/browser.tsx
@@ -360,44 +360,6 @@ export class Browser extends React.Component<Props, State, {}> {
             />
           </span>
         </div>
-
-        <div className="hr white0-bg margin-t-m margin-b-m"></div>
-
-        <div>
-          <button
-            type="button"
-            onClick={() => this.delete()}
-            className="red0-bg white-font margin-t-m margin-b-m margin-r-m"
-          >
-            {this.props.msg.pkg.get("browser.delete")}
-          </button>
-          <button
-            type="button"
-            onClick={() => this.moveHere()}
-            className="margin-t-m margin-b-m margin-r-m"
-          >
-            {this.props.msg.pkg.get("browser.paste")}
-          </button>
-          {this.props.browser.isSharing ? (
-            <button
-              type="button"
-              onClick={() => {
-                this.deleteSharing(this.props.browser.dirPath.join("/"));
-              }}
-              className="red0-bg white-font margin-t-m margin-b-m"
-            >
-              {this.props.msg.pkg.get("browser.share.del")}
-            </button>
-          ) : (
-            <button
-              type="button"
-              onClick={this.addSharing}
-              className="green0-bg white-font margin-t-m margin-b-m"
-            >
-              {this.props.msg.pkg.get("browser.share.add")}
-            </button>
-          )}
-        </div>
       </div>
     );
 
@@ -512,6 +474,50 @@ export class Browser extends React.Component<Props, State, {}> {
           </div>
 
           <div className="container">
+            <div className="padding-m">
+              {this.props.browser.isSharing ? (
+                <button
+                  type="button"
+                  onClick={() => {
+                    this.deleteSharing(this.props.browser.dirPath.join("/"));
+                  }}
+                  className="red0-bg white-font margin-r-m"
+                >
+                  {this.props.msg.pkg.get("browser.share.del")}
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={this.addSharing}
+                  className="green0-bg white-font margin-r-m"
+                >
+                  {this.props.msg.pkg.get("browser.share.add")}
+                </button>
+              )}
+
+              {this.state.selectedItems.size > 0 ? (
+                <span>
+                  <button
+                    type="button"
+                    onClick={() => this.delete()}
+                    className="red0-bg white-font margin-r-m"
+                  >
+                    {this.props.msg.pkg.get("browser.delete")}
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => this.moveHere()}
+                    className="margin-r-m"
+                  >
+                    {this.props.msg.pkg.get("browser.paste")}
+                  </button>
+                </span>
+              ) : null}
+
+              <div className="hr white0-bg margin-t-m"></div>
+            </div>
+
             <Flexbox
               children={List([
                 <span className="padding-m">