Improved search-replace component logic by disabing buttons when no query; displaying found/not found status; displaying too long query; adding ctrl-up and down key bindig on query field to god prev-next instance found
This commit is contained in:
@@ -1,7 +1,20 @@
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col col-3">
|
||||
<label id="find-status-lbl">Find in Current File</label>
|
||||
@if (isQueryLong) {
|
||||
<label id="find-status-lbl">
|
||||
<b class="error">Query exceeds 80 characters...</b>
|
||||
</label>
|
||||
} @else if (isQueryNotFound) {
|
||||
<label id="find-status-lbl">
|
||||
<b class="warning">Query not found...</b>
|
||||
<p class="warning" style="white-space: pre;">{{query}}</p>
|
||||
</label>
|
||||
} @else if (!isQueryLong && !isQueryNotFound) {
|
||||
<label id="find-status-lbl">Find in Current File:
|
||||
<p class="success">{{query}}</p>
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="col col-4">
|
||||
@@ -45,15 +58,27 @@
|
||||
id="find-entry"
|
||||
class="form-control"
|
||||
type="search"
|
||||
(keyup)="searchForString()"
|
||||
(focus)="searchForString()"
|
||||
(keyup)="findEntryKeyUpHandler($event)"
|
||||
(input)="searchForString()"
|
||||
placeholder="Find in current file..."
|
||||
aria-label="Find in current file..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-auto">
|
||||
<button id="find-btn" class="width-8em btn btn-sm btn-dark" (click)="findNextEntry()">Find</button>
|
||||
<button id="find-all-btn" class="width-8em btn btn-sm btn-dark" (click)="findAllEntries()">Find All</button>
|
||||
<button
|
||||
[disabled]="!query || isQueryLong || isQueryNotFound"
|
||||
id="find-btn"
|
||||
class="width-8em btn btn-sm btn-dark"
|
||||
(click)="findNextEntry()">Find
|
||||
</button>
|
||||
<button
|
||||
[disabled]="!query || isQueryLong || isQueryNotFound"
|
||||
id="find-all-btn"
|
||||
class="width-8em btn btn-sm btn-dark"
|
||||
(click)="findAllEntries()">Find All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,15 +93,25 @@
|
||||
id="replace-entry"
|
||||
class="form-control"
|
||||
type="search"
|
||||
(keyup)="replaceEntry($event)"
|
||||
(keyup.enter)="replaceEntry($event)"
|
||||
title="Replace in current file..."
|
||||
placeholder="Replace in current file..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-auto">
|
||||
<button id="replace-btn" class="width-8em btn btn-sm btn-dark" (click)="replaceEntry($event)">Replace</button>
|
||||
<button id="replace-all-btn" class="width-8em btn btn-sm btn-dark" (click)="replaceAll()">Replace All</button>
|
||||
<button
|
||||
[disabled]="!query || isQueryLong || isQueryNotFound"
|
||||
id="replace-btn"
|
||||
class="width-8em btn btn-sm btn-dark"
|
||||
(click)="replaceEntry($event)">Replace
|
||||
</button>
|
||||
<button
|
||||
[disabled]="!query || isQueryLong || isQueryNotFound"
|
||||
id="replace-all-btn"
|
||||
class="width-8em btn btn-sm btn-dark"
|
||||
(click)="replaceAll()">Replace All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user