open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix search highlight conflict (#587)

Browse Source 
* Fix search highlight conflict 

Regular highlight styling and search highlight styling shouldn't both be applied at the same time. Search highlight styling should also be removed when search is closed. This PR resolves those conflicts.

* Remove unnecessary dummy animation

Not sure what the point of it ever was, but I'm pretty sure it should go.
This commit is contained in:
narcolepticinsomniac 2018-11-27 23:48:45 -05:00 committed by Rob Garrison
parent 237d5c0c06
commit eb0b9f58f5
4 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
edit/codemirror-default.css
View File

@ -37,14 +37,6 @@
.cm-uso-variable { .cm-uso-variable {
font-weight: bold; font-weight: bold;
} }
.cm-searching.cm-matchhighlight {
/* tokens found by manual search should not animate by cm-matchhighlight */
animation-name: search-and-match-highlighter !important;
}
@keyframes search-and-match-highlighter {
from { background-color: rgba(255, 255, 0, .4); } /* search color */
to { background-color: rgba(100, 255, 100, .4); } /* sarch + highlight */
}
.CodeMirror-activeline .applies-to:before { .CodeMirror-activeline .applies-to:before {
background-color: hsla(214, 100%, 90%, 0.15); background-color: hsla(214, 100%, 90%, 0.15);

8
edit/edit.css
View File

@ -364,13 +364,13 @@ input:invalid {
.resize-grip-enabled .CodeMirror-scrollbar-filler { .resize-grip-enabled .CodeMirror-scrollbar-filler {
bottom: 7px; /* make space for resize-grip */ bottom: 7px; /* make space for resize-grip */
} }
.cm-matchhighlight, body:not(.find-open) .cm-matchhighlight,
.CodeMirror-selection-highlight-scrollbar { body:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98); animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
animation-fill-mode: both; animation-fill-mode: both;
} }
[data-match-highlight-count="1"] .cm-matchhighlight, body:not(.find-open) [data-match-highlight-count="1"] .cm-matchhighlight,
[data-match-highlight-count="1"] .CodeMirror-selection-highlight-scrollbar { body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-highlight-scrollbar {
animation: none; animation: none;
} }
@-webkit-keyframes highlight { @-webkit-keyframes highlight {

26
edit/global-search.css
View File

@ -181,17 +181,33 @@
opacity: 1; opacity: 1;
} }
/*********** CodeMirror ****************/ /*********** CM search highlight restyling, which shouldn't need color variables ****************/
body.find-open .search-target-editor {
.search-target-editor { outline-color: darkorange !important;
outline: 1px solid darkorange;
} }
#stylus .search-target-match { body.find-open .cm-searching {
background-color: rgba(255, 255, 0, .4);
}
body.find-open .cm-searching.search-target-match {
background-color: darkorange; background-color: darkorange;
color: black; color: black;
} }
body.find-open .CodeMirror-search-match {
background: gold;
border-top: 1px solid orange;
border-bottom: 1px solid orange;
}
/* hide default CM search highlight styling */
body .cm-searching,
body .CodeMirror-search-match {
background-color: transparent;
border-color: transparent;
}
@media (max-width: 500px) { @media (max-width: 500px) {
#search-replace-dialog { #search-replace-dialog {
left: 0; left: 0;

10
edit/global-search.js
View File

@ -752,8 +752,14 @@ onDOMready().then(() => {
function makeTargetVisible(element) { function makeTargetVisible(element) {
const old = $('.' + TARGET_CLASS); const old = $('.' + TARGET_CLASS);
if (old !== element) { if (old !== element) {
if (old) old.classList.remove(TARGET_CLASS); if (old) {
if (element) element.classList.add(TARGET_CLASS); old.classList.remove(TARGET_CLASS);
document.body.classList.remove('find-open');
}
if (element) {
element.classList.add(TARGET_CLASS);
document.body.classList.add('find-open');
}
} }
} }