Skip to content

Commit

Permalink
Bugfixes and improvements
Browse files Browse the repository at this point in the history 
Signed-off-by: jbicker <jan.bicker@typefox.io>
  • Loading branch information
@jbicker
jbicker committed May 9, 2018
1 parent a7f460a commit 60fa482
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 37 deletions.
7 changes: 7 additions & 0 deletions packages/core/src/browser/style/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/browser/style/tree.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
line-height: var(--theia-private-horizontal-tab-height);
display: flex;
align-items: baseline;
margin-right: 10px;
}

.theia-TreeNode:hover {
Expand Down
15 changes: 2 additions & 13 deletions packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
}
Expand Down
56 changes: 42 additions & 14 deletions packages/search-in-workspace/src/browser/search-in-workspace-widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand All @@ -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) {
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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();
Expand All @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down
23 changes: 13 additions & 10 deletions packages/search-in-workspace/src/browser/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -29,16 +28,17 @@
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);
}

.t-siw-search-container input[type="text"]:focus {
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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -297,6 +299,7 @@
width: 15px;
justify-content: center;
margin-right: 2px;
box-sizing: border-box;
}

.replace-toggle:hover {
Expand Down

0 comments on commit 60fa482

Please sign in to comment.