From 1acded23ae2bf09646465791d2026cdf316efdfc Mon Sep 17 00:00:00 2001 From: Peter Flynn Date: Mon, 22 Oct 2012 15:05:16 -0700 Subject: [PATCH] When Find has no results, turn search field bg color red. Less ambiguous than old behavior where selection disappears w/ no other feedback. Also fix indentation in search bar LESS code, and move one misplaced Dialog style to the right LESS file (with better docs). --- src/search/FindReplace.js | 7 ++- src/styles/brackets.less | 55 ++++++++++++---------- src/styles/brackets_patterns_override.less | 5 ++ 3 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/search/FindReplace.js b/src/search/FindReplace.js index 19fc1a3704f..d03b97cc7ec 100644 --- a/src/search/FindReplace.js +++ b/src/search/FindReplace.js @@ -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); @@ -99,6 +100,7 @@ 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; } } @@ -106,6 +108,7 @@ define(function (require, exports, module) { state.posFrom = cursor.from(); state.posTo = cursor.to(); }); + return found; } function clearSearch(cm) { @@ -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); }); } diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 4227d253ec4..12c3ad913f7 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -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%); + } } .CodeMirror-searching { - background-color: inherit; + background-color: inherit; } + +/* Quick Open search bar & dropdown */ + .smart_autocomplete_container { border: 1px solid #999; @@ -772,8 +779,4 @@ ins.jstree-icon { li.smart_autocomplete_highlight { background-color: #e0f0fa; -} - -.clickable-link { - cursor: pointer; -} +} \ No newline at end of file diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index ce4aa00c7e0..e317b9b3732 100644 --- a/src/styles/brackets_patterns_override.less +++ b/src/styles/brackets_patterns_override.less @@ -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. */ +.clickable-link { + cursor: pointer; +} + .btn { font-size: 16px; font-weight: @font-weight-semibold;