generated from itdominator/Python-With-Gtk-Template
Creating Search/Replace UI
This commit is contained in:
parent
99e9e9d3ef
commit
8b555991e4
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
@ -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();
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
}, {
|
||||
|
||||
@ -296,4 +296,12 @@ const zoomOut = () => {
|
||||
const toggleLineHighlight = () => {
|
||||
highlightLine = !highlightLine;
|
||||
editor.setHighlightActiveLine(highlightLine);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
const hideSearchReplace = () => {
|
||||
$('#bottom-gutter').popover('hide')
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user