You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@daffodil.apache.org by sh...@apache.org on 2023/04/07 14:38:27 UTC
[daffodil-vscode] branch main updated: Revised Search and Replace fieldset in header
This is an automated email from the ASF dual-hosted git repository.
shanedell pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/daffodil-vscode.git
The following commit(s) were added to refs/heads/main by this push:
new 2d87401 Revised Search and Replace fieldset in header
2d87401 is described below
commit 2d8740166b46e52a8ad171a1041e84f3960dfab6
Author: Robert Strickland <st...@gmail.com>
AuthorDate: Thu Apr 6 08:56:16 2023 -0500
Revised Search and Replace fieldset in header
- If the user has viewport data selected and enters text into the
replace field, the err response is more clear.
- The input fields are now inline with the labels.
- Error text now appears as `titles` to an error symbol, instead of
text.
Closes #574
---
src/svelte/src/components/dataEditor.svelte | 111 +++++++++++++++++++---------
src/svelte/src/stores/index.ts | 4 +-
2 files changed, 79 insertions(+), 36 deletions(-)
diff --git a/src/svelte/src/components/dataEditor.svelte b/src/svelte/src/components/dataEditor.svelte
index 6362994..7713350 100644
--- a/src/svelte/src/components/dataEditor.svelte
+++ b/src/svelte/src/components/dataEditor.svelte
@@ -836,33 +836,50 @@ limitations under the License.
<fieldset class="box search-replace">
<legend>Search</legend>
<div class="flex-container col">
- <div class="col-item">
- Search:
- {#if $searchData.length > 0 && !$searchable}
- <span class="errMsg">{$searchErrMsg}</span>
- {/if}
- <input class={$UIThemeCSSClass} bind:value={$searchData} />
+ <div class="col-item flex-container row">
+ <div
+ class="row-item flex-container row search"
+ style="align-items: center"
+ >
+ <label for="search">Search:</label>
+ <input class={$UIThemeCSSClass} bind:value={$searchData} />
+ <div class="errMsg" title={$searchErrMsg}>
+ {#if $searchErrMsg.length > 0 && !$searchable}
+ ⚠
+ {/if}
+ </div>
+ </div>
+ </div>
+ <div class="col-item flex-container row">
+ <div
+ class="row-item flex-container row replace"
+ style="align-items: center"
+ >
+ <label for="replace">Replace:</label>
+ <input class={$UIThemeCSSClass} bind:value={$replaceData} />
+ <div class="errMsg" title={$replaceErrMsg}>
+ {#if $replaceErrMsg.length > 0}
+ ⚠
+ {/if}
+ </div>
+ </div>
</div>
{#if $allowCaseInsensitiveSearch}
- <div class="case col-item flex-container row center">
- <label for="search_case_insensitive" class="row-item search-case"
- >Case Insensitive:</label
- >
- <input
- type="checkbox"
- id="search_case_insensitive"
- class={$UIThemeCSSClass + ' row-item search-case'}
- bind:checked={$searchCaseInsensitive}
- />
+ <div
+ class="col-item flex-container row"
+ style="align-items: center"
+ >
+ <div class="two-row-items flex-container row search-case">
+ <label for="search_case_insensitive">Case Insensitive:</label>
+ <input
+ type="checkbox"
+ id="search_case_insensitive"
+ class={$UIThemeCSSClass}
+ bind:checked={$searchCaseInsensitive}
+ />
+ </div>
</div>
{/if}
- <div class="col-item">
- Replace:
- {#if $replaceData.length > 0 && !$replaceable}
- <span class="errMsg">{$replaceErrMsg}</span>
- {/if}
- <input class={$UIThemeCSSClass} bind:value={$replaceData} />
- </div>
<div class="col-item flex-container row center">
{#if !$searchable}
<button class={$UIThemeCSSClass} id="search_btn" disabled
@@ -1514,9 +1531,11 @@ limitations under the License.
body.light {
color: #02060b;
}
+
body.dark {
color: #e1e3e5;
}
+
div.flex-container {
display: flex;
}
@@ -1529,20 +1548,19 @@ limitations under the License.
flex-direction: row;
}
- div.flex-container.row .row-item {
- width: 100%;
+ div.flex-container.space-between {
+ justify-content: space-between;
}
- div.flex-container.row .two-row-items {
- width: 50%;
+ div.flex-container.space-evenly {
+ justify-content: space-evenly;
}
- div.flex-container.row .row-item.search-case {
- width: 50%;
+ div.flex-container.row .row-item {
+ width: 100%;
}
- div.flex-container.row .row-item.search-case input {
- width: 0;
+ div.flex-container.row .two-row-items {
width: 50%;
}
@@ -2065,6 +2083,12 @@ limitations under the License.
max-width: 95%;
}
+ .search .errMsg,
+ .replace .errMsg {
+ margin-left: 10pt;
+ font-size: 17pt;
+ }
+
.warningMsg {
color: yellow;
max-width: 95%;
@@ -2074,9 +2098,18 @@ limitations under the License.
margin-top: 5px;
}
- .search {
- min-width: 250px;
- max-width: 250px;
+ .search,
+ .replace {
+ align-items: center;
+ height: 20pt;
+ }
+ .search label,
+ .replace label {
+ width: 15%;
+ }
+ .search input,
+ .replace input {
+ width: 75%;
}
.x-hidden {
@@ -2091,7 +2124,17 @@ limitations under the License.
margin-right: 5pt;
}
+ .search-case label {
+ margin-right: 5pt;
+ }
+
+ .search-case input {
+ width: auto;
+ }
+
#address_numbering {
+ padding: 0;
+ border-width: 0;
min-width: 100%;
}
</style>
diff --git a/src/svelte/src/stores/index.ts b/src/svelte/src/stores/index.ts
index 3475bb1..c1de752 100644
--- a/src/svelte/src/stores/index.ts
+++ b/src/svelte/src/stores/index.ts
@@ -233,7 +233,7 @@ export const replaceable = derived(
$replacing,
$selectionActive,
]) => {
- if ($replaceData.length <= 0 || !$searchable || $replacing) {
+ if ($replaceData.length < 0 || !$searchable || $replacing) {
replaceErrMsg.update(() => {
return ''
})
@@ -241,7 +241,7 @@ export const replaceable = derived(
}
if ($selectionActive) {
replaceErrMsg.update(() => {
- return 'Cannot replace with selected data'
+ return 'Cannot replace while viewport data is selected'
})
return false
}