search: hotkey indicator (#1238)

testingisdocumenting · Oct 1, 2024 · 2d981b4 · 2d981b4
1 parent 884b130
commit 2d981b4
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 3 deletions.
diff --git a/znai-docs/znai/release-notes/1.72/add-2024-10-01-search-hotkey.md b/znai-docs/znai/release-notes/1.72/add-2024-10-01-search-hotkey.md
@@ -0,0 +1 @@
+* Add: [Search](flow/search) hotkey indicator
diff --git a/znai-docs/znai/release-notes/2024.md b/znai-docs/znai/release-notes/2024.md
@@ -2,6 +2,10 @@
 title: 2024 Releases
 ---
 
+# 1.72
+
+:include-markdowns: 1.72
+
 # 1.71
 
 :include-markdowns: 1.71

diff --git a/znai-reactjs/src/App.css b/znai-reactjs/src/App.css
@@ -91,6 +91,8 @@
     --znai-toc-panel-width: 280px;
     --znai-toc-panel-background-color: #f8fafc;
     --znai-toc-panel-border-color: #e9e9e9;
+    --znai-toc-panel-hotkey-border-color: #c5c3c3;
+
     --znai-toc-selected-text-color: var(--znai-brand-primary-color);
     --znai-toc-selected-border-color: var(--znai-brand-primary-color);
     --znai-toc-chapter-title-color: #5a6872;

diff --git a/znai-reactjs/src/layout/TocPanelSearch.css b/znai-reactjs/src/layout/TocPanelSearch.css
@@ -21,6 +21,10 @@
 }
 
 .znai-toc-panel-search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     font-size: 14px;
 
     background-color: var(--znai-search-box-background-color);
@@ -36,8 +40,23 @@
 .znai-toc-panel-search-icon-and-text {
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 .znai-toc-panel-search-icon-and-text .znai-icon {
     margin-right: 8px;
+}
+
+.znai-search-hotkey {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 2px;
+
+    border: 1px var(--znai-toc-panel-hotkey-border-color) solid;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
 }
diff --git a/znai-reactjs/src/layout/TocPanelSearch.js b/znai-reactjs/src/layout/TocPanelSearch.js
@@ -25,15 +25,17 @@ class TocPanelSearch extends Component {
     render() {
         return (
             <div className="znai-toc-panel-search-area">
-                <div className="znai-toc-panel-search" onClick={this.props.onClick} title="hotkey /">
+                <div className="znai-toc-panel-search" onClick={this.props.onClick}>
                     <div className="znai-toc-panel-search-icon-and-text">
-                        <Icon id="search"/>
+                        <Icon id="search" />
                         <div>Search...</div>
                     </div>
+
+                    <div className="znai-search-hotkey">/</div>
                 </div>
             </div>
         )
     }
 }
 
-export default TocPanelSearch
+export default TocPanelSearch;
diff --git a/znai-reactjs/src/theme/znai-dark/znai-dark.css b/znai-reactjs/src/theme/znai-dark/znai-dark.css
@@ -55,6 +55,7 @@
     --znai-toc-title-background-color: #272f33;
     --znai-toc-panel-background-color: #272f33;
     --znai-toc-panel-border-color: #3e3e3e;
+    --znai-toc-panel-hotkey-border-color: #3e3e3e;
     --znai-toc-selected-text-color: var(--znai-brand-primary-color);
     --znai-toc-selected-border-color: var(--znai-brand-primary-color);
     --znai-toc-chapter-title-color: #7f8284;