Creating Search/Replace UI

user_config/usr/share/newton/context_path/index.html

@@ -23,8 +23,21 @@
     </div>
 
 
+    <p id="top-gutter"
+        class="fixed-top"
+        data-toggle="popover"
+        data-placement="bottom">
+    </p>
+
     <pre id="editor"></pre>
 
+    <p id="bottom-gutter"
+        class="fixed-bottom"
+        data-toggle="popover"
+        data-placement="top">
+    </p>
+
+
     <!-- Buffers modal -->
     <div class="modal" id="buffers-modal" tabindex="-1" role="dialog"
         data-bs-theme="dark" data-bs-keyboard="false" data-bs-backdrop="static">
@@ -85,6 +98,85 @@
 
 
     <!-- Template Tags... -->
+    <template id="search-replace-template">
+        <!-- Bootstrap CSS -->
+        <link rel="stylesheet" href="resources/css/libs/bootstrap5/bootstrap.min.css">
+        <link rel="stylesheet" href="resources/css/libs/bootstrap-icons/bootstrap-icons.css">
+
+        <!-- Site CSS -->
+        <!--  <link rel="stylesheet" href="resources/css/newton/context-menu.css">  -->
+        <link rel="stylesheet" href="resources/css/newton/main.css">
+        <link rel="stylesheet" href="resources/css/newton/overrides.css">
+
+        <style>
+        </style>
+        <section>
+            <div id="search-replace" class="row">
+                <div class="col">
+                    <div class="row">
+                        <div class="col col-3">
+                            <label id="find-status-lbl">Find in Current Buffer</label>
+                        </div>
+
+                        <div class="col col-4">
+                            <label id="find-options-lbl">Finding with Options: Case Insensitive</label>
+                        </div>
+
+                        <div class="col col-5 line-height-32px">
+                            <button title="Close Panel" class="float-end" onclick="hideSearchReplace()">X</button>
+                            <button title="Whole Word" class="float-end">
+                                <img src="resources/imgs/whole-word.png" />
+                            </button>
+                            <button title="Only In Selection" class="float-end">
+                                <img src="resources/imgs/only-in-selection.png" />
+                            </button>
+                            <button title="Match Case" class="float-end">Aa</button>
+
+
+                            <button title="Use Regex" class="float-end">.*</button>
+                        </div>
+                    </div>
+
+                    <div class="margin-tb-1em"></div>
+
+                    <div class="row">
+                        <div class="col">
+
+                            <div class="row">
+                                <div class="col">
+                                    <input id="find-entry" class="sr-input-expand" type="search"
+                                        title="Find in current buffer"
+                                        placeholder="Find in current buffer"
+                                    />
+                                </div>
+                                <div class="col col-auto">
+                                    <button class="float-end width-8em">Find All</button>
+                                    <button class="float-end width-8em">Find</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="margin-tb-1em"></div>
+
+                    <div class="row">
+                        <div class="col">
+                            <input id="replace-entry" class="sr-input-expand" type="search"
+                                title="Replace in current buffer"
+                                placeholder="Replace in current buffer"
+                            />
+                        </div>
+                        <div class="col col-auto">
+                            <button class="float-end width-8em">Replace All</button>
+                            <button class="float-end width-8em">Replace</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+
+
     <template id="lsp-config-template">
         <style>
         </style>

user_config/usr/share/newton/context_path/resources/css/newton/main.css

@@ -45,8 +45,42 @@
     overflow-y: auto;
 }
 
+#bottom-gutter {
+    /*position: fixed;*/
+    bottom: 0px;
+}
+
 
 /* CLASSES */
+.popover * {
+    background: rgba(0, 0, 0, 0.0);
+    color: rgba(255, 255, 255, 1);
+}
+
+.popover {
+    background: rgba(39, 43, 52, 0.64);
+    max-width: 80%;
+    width: 80%;
+    transform: translate(0px, 0px) !important;
+    margin: auto 12% !important;
+}
+
+.sr-input-expand {
+    width: 100%;
+}
+
+.line-height-32px {
+    line-height: 32px;
+}
+
+.margin-tb-1em {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.width-8em {
+    width: 8em;
+}
 
 .max-height-800 {
     max-height: 800px;

user_config/usr/share/newton/context_path/resources/js/newton/components.js

@@ -175,6 +175,29 @@ class InputCheckboxContainer extends HTMLElement {
     }
 }
 
+class SearchReplaceContainer extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    loadShaddowRoot(tag = "search-replace-template") {
+        let template = document.getElementById(tag);
+        let templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({ mode: "open" });
+        shadowRoot.appendChild( templateContent.cloneNode(true) );
+    }
+
+    loadSignals() {
+        let elm = this.shadowRoot.getElementById("find-entry");
+
+        elm.addEventListener("keyup", (eve) => {
+            findEntry(eve.value);
+        });
+    }
+
+}
+
 
 
 
@@ -211,4 +234,13 @@ class InputCheckbox extends InputCheckboxContainer {
         super();
         this.loadShaddowRoot();
     }
+}
+
+class SearchReplace extends SearchReplaceContainer {
+    constructor() {
+        super();
+
+        this.loadShaddowRoot();
+        this.loadSignals();
+    }
 }

user_config/usr/share/newton/context_path/resources/js/newton/events.js

@@ -9,6 +9,7 @@ window.onload = (eve) => {
 
     console.log("Loading editor...");
     loadEditor();
+    loadSearchFind();
     loadPreviewEditor();
     loadInitialSession();
     loadStartingFiles();
@@ -21,6 +22,7 @@ const defineCustomElements = () => {
     customElements.define("input-list", InputList, { extends: 'ul' });
     customElements.define("input-list-item", InputListItem, { extends: 'li' });
     customElements.define("input-checkbox", InputCheckbox, { extends: 'input' });
+    customElements.define("search-replace", SearchReplace, { extends: 'div' });
 }
 
 const loadLSPClientJSFiles = () => {
@@ -34,6 +36,12 @@ const loadLSPClientJSFiles = () => {
     // sendMessage(topic = "load_javascript", ftype = "", fhash = "", fpath = `${BASE_LINK}/python-service.js`, content = "");
 }
 
+const loadSearchFind = () => {
+    let elm = document.createElement("search-replace");
+    let options = {container: "html", content: elm, html: true};
+    $('#bottom-gutter').popover(options);
+}
+
 window.onerror = function(msg, url, line, col, error) {
     // Note that col & error are new to the HTML 5 spec and may not be supported in every browser.
     const suppressErrorAlert = false;

user_config/usr/share/newton/context_path/resources/js/newton/keybinding-newton.js

@@ -29,7 +29,9 @@ const editorCommands = [
         name: "search",
         bindKey: {win: "ctrl-f", mac: "ctrl-f"},
         exec: function(editor) {
-            sendMessage("tggl_search_replace", "", "", "", "");
+            // let selectedStr = session.doc.getTextRange(editor.getSelectionRange());
+            $('#bottom-gutter').popover('toggle')
+            // sendMessage("tggl_search_replace", "", "", "", selectedStr);
         },
         readOnly: true
     }, {

user_config/usr/share/newton/context_path/resources/js/newton/ui-logic.js

@@ -296,4 +296,12 @@ const zoomOut = () => {
 const toggleLineHighlight = () => {
     highlightLine = !highlightLine;
     editor.setHighlightActiveLine(highlightLine);
+}
+
+
+
+
+//
+const hideSearchReplace = () => {
+    $('#bottom-gutter').popover('hide')
 }