Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

When Find has no results, turn search field bg color red #1914

Merged
merged 1 commit into from
Oct 23, 2012
Merged

When Find has no results, turn search field bg color red #1914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/search/FindReplace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ define(function (require, exports, module) {
}

function findNext(cm, rev) {
var found = true;
cm.operation(function () {
var state = getSearchState(cm);
var cursor = getSearchCursor(cm, state.query, rev ? state.posFrom : state.posTo);
Expand All @@ -99,13 +100,15 @@ define(function (require, exports, module) {
// No result found, period: clear selection & bail
if (!cursor.find(rev)) {
cm.setCursor(cm.getCursor()); // collapses selection, keeping cursor in place to avoid scrolling
found = false;
return;
}
}
cm.setSelection(cursor.from(), cursor.to());
state.posFrom = cursor.from();
state.posTo = cursor.to();
});
return found;
}

function clearSearch(cm) {
Expand Down Expand Up @@ -164,7 +167,9 @@ define(function (require, exports, module) {
}

state.posFrom = state.posTo = searchStartPos;
findNext(cm, rev);
var foundAny = findNext(cm, rev);

getDialogTextField().toggleClass("no-results", !foundAny);
});
}

Expand Down
55 changes: 29 additions & 26 deletions src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -711,40 +711,47 @@ ins.jstree-icon {
.code-font();
}

/* Styles for the search dialog--this is temporary, only for debugging */

/* Find & Replace search bars - temporary UI, to be replaced with a richer search feature later */

.CodeMirror-dialog {
position: relative;
z-index: @z-index-cm-dialog-override;
position: relative;
z-index: @z-index-cm-dialog-override;
}

.CodeMirror-dialog > div {
font-family: @fontstack-sans-serif;
position: absolute;
top: 0; left: 0; right: 0;
background: @background-color-2;
color: @content-color;
border-bottom: 1px solid @bc-gray;
.box-shadow(0 1px 3px 0 fadeout(@bc-black, 70%));
z-index: 1;
padding: .5em .8em;
overflow: hidden;
font-family: @fontstack-sans-serif;
position: absolute;
top: 0; left: 0; right: 0;
background: @background-color-2;
color: @content-color;
border-bottom: 1px solid @bc-gray;
.box-shadow(0 1px 3px 0 fadeout(@bc-black, 70%));
z-index: 1;
padding: .5em .8em;
overflow: hidden;
}

.CodeMirror-dialog input {
font-family: @fontstack-sans-serif;
border: 1px solid @content-color-weaker;
outline: none;
background: @background-color-3;
width: 20em;
margin: .3em .3em;
color: inherit;
font-family: @fontstack-sans-serif;
border: 1px solid @content-color-weaker;
outline: none;
background: @background-color-3;
width: 20em;
margin: .3em .3em;
color: inherit;
&.no-results {
background-color: mix(@background-color-3, #FF0000, 70%);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usually when I see this pattern , the text is also changed to white.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems mixed: Firefox uses white on red, but Chrome and IntelliJ keep the text black (albeit in IntelliJ at least the red is quite pale). You think it would look better if I make the background a bit paler?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just thought I'd mention it to make sure you considered it. It's ok as is and we can listen for feedback.

}
}

.CodeMirror-searching {
background-color: inherit;
background-color: inherit;
}


/* Quick Open search bar & dropdown */

.smart_autocomplete_container {

border: 1px solid #999;
Expand Down Expand Up @@ -772,8 +779,4 @@ ins.jstree-icon {

li.smart_autocomplete_highlight {
background-color: #e0f0fa;
}

.clickable-link {
cursor: pointer;
}
}
5 changes: 5 additions & 0 deletions src/styles/brackets_patterns_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,11 @@
font-weight: @font-weight-semibold;
}

/* Any Dialog text in this style is automatically turned into a link that opens in the browser. Use data-href for the link's target. */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is currently only used in a dialog, but it's not limited to dialogs.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only text used in a dialog will actually get turned into a clickable link though -- since the style implies actual functionality changes there, it seems fairly closely bound to Dialog for now.

.clickable-link {
cursor: pointer;
}

.btn {
font-size: 16px;
font-weight: @font-weight-semibold;
Expand Down