siw: add placeholder for glob inputs (#12389)

The commit adds a placeholder (visible on focus) for the search-in-workspace (siw) glob input fields, namely `include` and `exclude`. The behavior is consistent with VS Code. Signed-off-by: FernandoAscencio <[email protected]>
eclipse-theia · Apr 10, 2023 · 8f0755d · 8f0755d
1 parent ceb48a5
commit 8f0755d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -619,6 +619,10 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
                 defaultValue={value}
                 autoComplete='off'
                 id={kind + '-glob-field'}
+                placeholder={kind === 'include'
+                    ? nls.localizeByDefault('e.g. *.ts, src/**/include')
+                    : nls.localizeByDefault('e.g. *.ts, src/**/exclude')
+                }
                 onKeyUp={e => {
                     if (e.target) {
                         const targetValue = (e.target as HTMLInputElement).value || '';

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
@@ -189,6 +189,10 @@
     font-size: var(--theia-ui-font-size0);
 }
 
+.t-siw-search-container .searchHeader .glob-field-container .glob-field .theia-input:not(:focus)::placeholder {
+    color: transparent;
+}
+
 .t-siw-search-container .resultContainer {
     height: 100%;
     margin-left: 13px;