From fe7a248da1b64bcf6f78830a2bbf2217e9b98de0 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 6 May 2018 21:22:35 +0800
Subject: [PATCH] feat: spotlights on the settings bar!

---
 src/components/FileExplorer.js | 6 ++++--
 src/components/SideBar.js      | 4 ++--
 src/content.less               | 6 ++++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/FileExplorer.js b/src/components/FileExplorer.js
index e14f1f0..8170eb5 100644
--- a/src/components/FileExplorer.js
+++ b/src/components/FileExplorer.js
@@ -1,9 +1,9 @@
 import preact from 'preact'
 /** @jsx preact.h */
-
 import SearchBar from './SearchBar'
 import Node from './Node'
 
+import cx from '../utils/cx'
 import DOMHelper from '../utils/DOMHelper'
 import treeParser from '../utils/treeParser'
 import URLHelper from '../utils/URLHelper'
@@ -18,6 +18,7 @@ export default class List extends preact.Component {
   props = {
     treeData: null,
     metaData: null,
+    freeze: false,
   }
 
   tasksAfterRender = []
@@ -176,8 +177,9 @@ export default class List extends preact.Component {
 
   render() {
     const { visibleNodes: { nodes, depths, focusedNode, expandedNodes } } = this.state
+    const { freeze } = this.props
     return (
-      <div className={`file-explorer`} tabIndex={-1} onKeyDown={this.handleKeyDown}>
+      <div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={this.handleKeyDown}>
         <SearchBar onSearchKeyChange={this.handleSearchKeyChange} />
         {nodes.length === 0 ? (
           <label className={'no-results'}>No results found.</label>
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index bcd7df7..7f0a375 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -122,12 +122,12 @@ export default class SideBar extends preact.Component {
   }
 
   renderContent() {
-    const { errorDueToPrivateRepo, metaData, treeData } = this.state
+    const { errorDueToPrivateRepo, metaData, treeData, showSettings } = this.state
     return (
       <div className={'gitako-side-bar-content'}>
         {metaData && <MetaBar metaData={metaData} />}
         {errorDueToPrivateRepo && this.renderPrivateRepoError()}
-        {metaData && treeData && <FileExplorer metaData={metaData} treeData={treeData} />}
+        {metaData && treeData && <FileExplorer metaData={metaData} treeData={treeData} freeze={showSettings} />}
       </div>
     )
   }
diff --git a/src/content.less b/src/content.less
index 4f230a4..bebbbed 100644
--- a/src/content.less
+++ b/src/content.less
@@ -101,6 +101,7 @@
     z-index: 2;
     background: #fafbfc;
     border-right: 1px solid #e1e4e8;
+    overflow: hidden;
 
     @media screen and (min-width: @content-width) {
       border-left: 1px solid #e1e4e8;
@@ -165,6 +166,10 @@
         display: flex;
         flex-direction: column;
         flex-wrap: nowrap;
+        &.freeze {
+          filter: blur(1.5px) opacity(0.6) grayscale(0.9);
+          pointer-events: none;
+        }
 
         /* search input */
         .search-input-wrapper {
@@ -224,6 +229,7 @@
 
     .@{name}-settings-bar {
       border-top: 1px solid #eaecef;
+      box-shadow: 0px -2px 16px #666666dd;
       &-content {
         padding: 0 10px;
         &-section {