From b8287a287f6008b449b353fbfacf0ef1551557a0 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 12 Jun 2018 23:43:31 +0800
Subject: [PATCH] refactor(settings-bar): make position of toggle icons static

---
 src/components/SettingsBar.js | 29 +++++++++++++++++------------
 src/content.less              | 30 ++++++++++++++++++++++++++----
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/SettingsBar.js b/src/components/SettingsBar.js
index 01986aa..97b4737 100644
--- a/src/components/SettingsBar.js
+++ b/src/components/SettingsBar.js
@@ -108,20 +108,14 @@ export default class SettingsBar extends preact.Component {
     const { toggleShowSettings, activated } = this.props
     return (
       <div className={'gitako-settings-bar'}>
-        <div className={'placeholder-row'}>
-          <h3>{activated ? 'Settings' : ''}</h3>
-          {activated ? (
-            <Icon
-              type={'chevron-down'}
-              className={'hide-settings-icon'}
-              onClick={toggleShowSettings}
-            />
-          ) : (
-            <Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
-          )}
-        </div>
+        {activated && (
+          <h3 className={'gitako-settings-bar-title'}>
+            Settings
+          </h3>
+        )}
         {activated && (
           <div className={'gitako-settings-bar-content'}>
+            <div className={'shadow-shelter'} />
             <div className={'gitako-settings-bar-content-section access-token'}>
               <h4>Access Token</h4>
               <span>With access token provided, Gitako can access more repositories.</span>
@@ -200,6 +194,17 @@ export default class SettingsBar extends preact.Component {
             </div>
           </div>
         )}
+        <div className={'placeholder-row'}>
+          {activated ? (
+            <Icon
+              type={'chevron-down'}
+              className={'hide-settings-icon'}
+              onClick={toggleShowSettings}
+            />
+          ) : (
+            <Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
+          )}
+        </div>
       </div>
     )
   }
diff --git a/src/content.less b/src/content.less
index a01577a..6c88504 100644
--- a/src/content.less
+++ b/src/content.less
@@ -284,9 +284,30 @@
       }
 
       .@{name}-settings-bar {
-        border-top: 1px solid #eaecef;
+        z-index: 2;
+        background: #fafbfc;
+        display: flex;
+        flex-direction: column;
+        &-title {
+          border-top: 1px solid #eaecef;
+          padding: 6px 10px;
+          box-shadow: 0 1px 8px 0 rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12);
+          z-index: 1;
+        }
         &-content {
           padding: 0 10px;
+          flex: 1;
+          overflow: auto;
+          position: relative;
+          
+          .shadow-shelter {
+            position: absolute;
+            width: 100%;
+            height: 6px;
+            left: 0;
+            background: #fafbfc;
+            z-index: 1;
+          }
           &-section {
             padding-bottom: 10px;
           }
@@ -324,9 +345,10 @@
         }
         .placeholder-row {
           display: flex;
-          justify-content: space-between;
+          justify-content: flex-end;
           align-items: center;
           padding: 6px 10px;
+          border-top: 1px solid #eaecef;
 
           .show-settings-icon {
             width: 20px;
@@ -334,8 +356,8 @@
             cursor: pointer;
           }
           .hide-settings-icon {
-            width: 15px;
-            height: 24px;
+            width: 20px;
+            height: 20px;
             cursor: pointer;
           }
         }