diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css index 414cadfb1fccf..4e33fb9da100d 100644 --- a/packages/core/src/browser/style/index.css +++ b/packages/core/src/browser/style/index.css @@ -87,6 +87,13 @@ body { :focus { outline: none; + border-style: solid; + border-width: 1px; + border-color: var(--theia-accent-color3); +} + +.p-Widget:focus { + border: none; } button, .theia-button { diff --git a/packages/core/src/browser/style/tree.css b/packages/core/src/browser/style/tree.css index b26f4450bb758..549d95e2c1383 100644 --- a/packages/core/src/browser/style/tree.css +++ b/packages/core/src/browser/style/tree.css @@ -23,6 +23,7 @@ line-height: var(--theia-private-horizontal-tab-height); display: flex; align-items: baseline; + margin-right: 10px; } .theia-TreeNode:hover { diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.ts b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.ts index 2d45a3c6e9570..9a2864d79638c 100644 --- a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.ts +++ b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.ts @@ -247,7 +247,8 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget { protected renderReplaceButton(node: TreeNode): h.Child { return h.span({ - className: "replace-result", onclick: async e => { + className: "replace-result", + onclick: async e => { this.replaceResult(node); this.removeNode(node); e.stopPropagation(); @@ -322,18 +323,6 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget { const index = result.children.findIndex(n => n.file === node.file && n.line === node.line && n.character === node.character); if (index > -1) { result.children.splice(index, 1); - if (result.children.length === index) { - const keyArr = Array.from(this.resultTree.keys()); - const currentResultIndex = keyArr.findIndex(k => result.file === k); - if (currentResultIndex + 1 <= keyArr.length) { - const newNode = this.resultTree.get(keyArr[currentResultIndex + 1]); - if (newNode) { - this.model.selectNode(newNode); - } - } - } else { - this.model.selectNode(result.children[index]); - } if (result.children.length === 0) { this.resultTree.delete(result.file); } diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.ts b/packages/search-in-workspace/src/browser/search-in-workspace-widget.ts index 02264945dfbc9..0790a0760c18d 100644 --- a/packages/search-in-workspace/src/browser/search-in-workspace-widget.ts +++ b/packages/search-in-workspace/src/browser/search-in-workspace-widget.ts @@ -116,6 +116,8 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge this.searchTerm = oldState.searchTerm; this.replaceTerm = oldState.replaceTerm; this.showReplaceField = oldState.showReplaceField; + this.resultTreeWidget.replaceTerm = this.replaceTerm; + this.resultTreeWidget.showReplaceButtons = this.showReplaceField; this.refresh(); } @@ -128,12 +130,6 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge onUpdateRequest(msg: Message) { super.onUpdateRequest(msg); VirtualRenderer.render(this.renderSearchHeader(), this.searchFormContainer); - // we have to be sure that the value attribute is set programmatically. At least for clearing the search field. - // Since setAttribute doesn't work for the value (as phosphor renderer does) we have to do it directly in DOM. - const f = document.getElementById("search-input-field"); - if (f) { - (f as HTMLInputElement).value = this.searchTerm; - } } onAfterShow(msg: Message) { @@ -162,6 +158,23 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge protected clear = () => { this.searchTerm = ""; + this.replaceTerm = ""; + this.searchInWorkspaceOptions.include = ""; + this.searchInWorkspaceOptions.exclude = ""; + this.includeIgnoredState.enabled = false; + this.matchCaseState.enabled = false; + this.wholeWordState.enabled = false; + this.regExpState.enabled = false; + const search = document.getElementById("search-input-field"); + const replace = document.getElementById("replace-input-field"); + const include = document.getElementById("include-glob-field"); + const exclude = document.getElementById("exclude-glob-field"); + if (search && replace && include && exclude) { + (search as HTMLInputElement).value = ""; + (replace as HTMLInputElement).value = ""; + (include as HTMLInputElement).value = ""; + (exclude as HTMLInputElement).value = ""; + } this.resultTreeWidget.search(this.searchTerm, this.searchInWorkspaceOptions); this.update(); } @@ -189,7 +202,12 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge const toggle = h.span({ className: `fa fa-caret-${this.showReplaceField ? "down" : "right"}` }); return h.div({ className: "replace-toggle", - onclick: () => { + tabindex: "0", + onclick: e => { + const elArr = document.getElementsByClassName("replace-toggle"); + if (elArr && elArr.length > 0) { + (elArr[0] as HTMLElement).focus(); + } this.showReplaceField = !this.showReplaceField; this.resultTreeWidget.showReplaceButtons = this.showReplaceField; this.update(); @@ -203,19 +221,28 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge type: "text", placeholder: "Search", value: this.searchTerm, + onfocus: e => { + const elArr = document.getElementsByClassName("search-field-container"); + if (elArr && elArr.length > 0) { + (elArr[0] as HTMLElement).className = "search-field-container focussed"; + } + }, + onblur: e => { + const elArr = document.getElementsByClassName("search-field-container"); + if (elArr && elArr.length > 0) { + (elArr[0] as HTMLElement).className = "search-field-container"; + } + }, onkeyup: e => { if (e.target) { - if (Key.ENTER.keyCode === e.keyCode) { - this.resultTreeWidget.search((e.target as HTMLInputElement).value, (this.searchInWorkspaceOptions || {})); - this.update(); - } else { - this.searchTerm = (e.target as HTMLInputElement).value; - } + this.searchTerm = (e.target as HTMLInputElement).value; + this.resultTreeWidget.search(this.searchTerm, (this.searchInWorkspaceOptions || {})); + this.update(); } } }); const optionContainer = this.renderOptionContainer(); - return h.div({ className: "search-field" }, input, optionContainer); + return h.div({ className: "search-field-container" }, h.div({ className: "search-field" }, input, optionContainer)); } protected renderReplaceField(): h.Child { @@ -309,6 +336,7 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge const input = h.input({ type: "text", value: this.searchInWorkspaceOptions[kind], + id: kind + "-glob-field", onkeyup: e => { if (e.target) { if (Key.ENTER.keyCode === e.keyCode) { diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css index d46483cec57bf..695d4715ff208 100644 --- a/packages/search-in-workspace/src/browser/styles/index.css +++ b/packages/search-in-workspace/src/browser/styles/index.css @@ -6,7 +6,6 @@ */ :root { - --theia-search-match-color0: rgba(234, 92, 0, 0.33); --theia-search-match-color1: rgba(234, 92, 0, 0.5); --theia-match-replace-color: rgba(155, 185, 85, 0.2); @@ -29,9 +28,6 @@ line-height: var(--theia-content-line-height); font-size: var(--theia-ui-font-size1); padding-left: 8px; - border-width: 1px; - border-style: solid; - border-color: var(--theia-border-color1); color: var(--theia-ui-font-color1); } @@ -39,6 +35,10 @@ outline: none; } +.t-siw-search-container #search-input-field:focus { + border-color: var(--theia-layout-color2); +} + .t-siw-search-container .searchHeader { width: 100%; margin-bottom: 10px; @@ -61,6 +61,13 @@ background: var(--theia-icon-clear); } +.t-siw-search-container .searchHeader .search-field-container.focussed { + border-style: solid; + border-width: var(--theia-border-width); + border-color: var(--theia-accent-color3); + margin: -1px; +} + .t-siw-search-container .searchHeader .search-field { display: flex; align-items: center; @@ -98,11 +105,6 @@ background-color: var(--theia-layout-color2); } -.t-siw-search-container .searchHeader .search-field:focus { - outline: none; - border: var(--theia-border-width) var(--theia-accent-color3) solid; -} - .t-siw-search-container .searchHeader .button-container { text-align: right; padding-right: 5px; @@ -266,7 +268,7 @@ padding: 0 5px; text-align: center; font-size: calc(var(--theia-ui-font-size0) * 0.8); - color: var(--theia-ui-icon-font-color); + color: var(--theia-inverse-ui-font-color0); font-weight: 400; min-width: 7px; height: 16px; @@ -297,6 +299,7 @@ width: 15px; justify-content: center; margin-right: 2px; + box-sizing: border-box; } .replace-toggle:hover {