Change prompt decoration in history search mode.

vlad-shatskyi · vlad-shatskyi · commit 6dccbf859be6 · 2017-09-22T12:14:32.000+03:00
diff --git a/images/prompt-decoration.svg b/images/prompt-decoration.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" preserveAspectRatio="xMidYMid meet">
+  <path d="M 0 0 L 20 0 L 30 10 L 20 20 L 0 20 z" fill="#EEEEEE"/>
+</svg>
diff --git a/images/prompt-history-mode-decoration.svg b/images/prompt-history-mode-decoration.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 22"
+     preserveAspectRatio="xMidYMid meet">
+  <path d="M 0 22 L 120 22 L 130 11 L 120 0 L 0 0 z"
+        fill="#EEEEEE"/>
+  <text x="5" y="15" font-size="16" style="font-variant: small-caps; letter-spacing: 1.3px">
+    history search
+  </text>
+</svg>
diff --git a/src/views/PromptComponent.tsx b/src/views/PromptComponent.tsx
@@ -126,10 +126,6 @@ export class PromptComponent extends React.Component<Props, State> {
     render() {
         return (
             <div className="prompt" data-mode={this.state.mode}>
-                <div className="prompt-decoration">
-                    <div className="square"/>
-                    <div className="square rhombus"/>
-                </div>
                 <div className="prompt-content" ref="prompt-content"/>
             </div>
         );
diff --git a/src/views/index.html b/src/views/index.html
@@ -300,33 +300,26 @@
             grid-template-columns: calc(var(--prompt-font-size) * 2) auto;
         }
 
+        .session .prompt[data-mode=history-search] {
+            grid-template-columns: calc(var(--prompt-font-size) * 8) auto;
+        }
+
         .session[data-status=in-progress] .prompt {
             opacity: 0;
             pointer-events: none;
         }
 
-        .session .prompt-decoration {
-            --decoration-height: calc(var(--prompt-font-size) * 1.3);
+        .session .prompt:before {
             grid-area: prompt-decoration;
-            position: relative;
-            overflow: hidden;
-            height: var(--decoration-height);
-            z-index: 2;
+            filter: brightness(50%);
         }
 
-        .session .prompt-decoration .square {
-            position: absolute;
-            display: inline-block;
-            width: var(--decoration-height);
-            height: var(--decoration-height);
-            background-color: var(--text-color);
-            z-index: 1;
-            filter: brightness(50%);
+        .session .prompt[data-mode=normal]:before {
+            content: url("../../../images/prompt-decoration.svg");
         }
 
-        .session .prompt-decoration .rhombus {
-            left: calc(var(--decoration-height) * 0.39);
-            transform: rotate(45deg);
+        .session .prompt[data-mode=history-search]:before {
+            content: url("../../../images/prompt-history-mode-decoration.svg");
         }
 
         .session .prompt-content {
