Skip to content

Commit 376f8f7

Browse files
catarakcatarak
committed
[#1519] Updating icons for search with theming
1 parent fca364f commit 376f8f7

File tree

7 files changed

+101
-72
lines changed

7 files changed

+101
-72
lines changed

‎client/styles/abstracts/_placeholders.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,9 +173,15 @@
173173
text-decoration: none;
174174
color: getThemifyVariable('inactive-text-color');
175175
cursor: pointer;
176+
& g, & path {
177+
fill: getThemifyVariable('inactive-text-color');
178+
}
176179
&:hover {
177180
text-decoration: none;
178181
color: getThemifyVariable('heavy-text-color');
182+
& g, & path {
183+
fill: getThemifyVariable('heavy-text-color');
184+
}
179185
}
180186
}
181187
}

‎client/styles/components/_editor.scss

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,9 @@ pre.CodeMirror-line {
181181
color: getThemifyVariable('input-text-color');
182182
background-color: getThemifyVariable('input-secondary-background-color');
183183
border: solid 0.5px getThemifyVariable('button-border-color');
184+
&::placeholder {
185+
color: getThemifyVariable('inactive-text-color');
186+
}
184187
}
185188
}
186189

@@ -256,29 +259,6 @@ pre.CodeMirror-line {
256259
margin-right: #{10 / $base-font-size}rem;
257260
}
258261

259-
.CodeMirror-search-button::after {
260-
display: block;
261-
content: ' ';
262-
263-
width: 14px;
264-
height: 14px;
265-
266-
@include icon();
267-
268-
background-repeat: no-repeat;
269-
background-position: center;
270-
}
271-
272-
// Previous button
273-
.CodeMirror-search-button.prev::after {
274-
background-image: url(../images/up-arrow.svg?byUrl)
275-
}
276-
277-
// Next button
278-
.CodeMirror-search-button.next::after {
279-
background-image: url(../images/down-arrow.svg?byUrl)
280-
}
281-
282262
.CodeMirror-search-match {
283263
background: gold;
284264
border-top: 1px solid orange;
@@ -295,25 +275,6 @@ pre.CodeMirror-line {
295275
align-items: center;
296276
}
297277

298-
// Visually hide button text
299-
.CodeMirror-close-button .label {
300-
@extend %hidden-element;
301-
}
302-
303-
.CodeMirror-close-button:after {
304-
display: block;
305-
content: ' ';
306-
307-
width: 16px;
308-
height: 16px;
309-
310-
margin-left: #{8 / $base-font-size}rem;
311-
312-
@include icon();
313-
314-
background: transparent url(../images/exit.svg?byUrl) no-repeat;
315-
}
316-
317278
// foldgutter
318279
.CodeMirror-foldmarker {
319280
text-shadow: -1px 0 #ed225d, 0 1px #ed225d, 1px 0 #ed225d, 0 -1px #ed225d;

‎client/utils/codemirror-search.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
// Ctrl-G.
1212
import i18n from '../i18n';
1313
import CodeMirror from 'codemirror';
14+
import triangleArrowRight from '../images/triangle-arrow-right.svg?byContent';
15+
import triangleArrowDown from '../images/triangle-arrow-down.svg?byContent';
16+
import downArrow from '../images/down-arrow.svg?byContent';
17+
import upArrow from '../images/up-arrow.svg?byContent';
18+
import exitIcon from '../images/exit.svg?byContent';
1419

1520
function searchOverlay(query, caseInsensitive) {
1621
if (typeof query == 'string') query = new RegExp(query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'), caseInsensitive ? 'gi' : 'g');
@@ -156,12 +161,12 @@ function persistentDialog(cm, text, deflt, onEnter, replaceOpened, onKeyDown) {
156161
replaceDiv.style.height = replaceDivHeightOpened;
157162
toggleReplaceBtnDiv.style.height = toggleButtonHeightOpened;
158163
showReplaceButton.style.height = toggleButtonHeightOpened;
159-
showReplaceButton.innerHTML = "▼";
164+
showReplaceButton.innerHTML = triangleArrowDown;
160165
} else {
161166
replaceDiv.style.height = replaceDivHeightClosed;
162167
toggleReplaceBtnDiv.style.height = toggleButtonHeightClosed;
163168
showReplaceButton.style.height = toggleButtonHeightClosed;
164-
showReplaceButton.innerHTML = "►";
169+
showReplaceButton.innerHTML = triangleArrowRight;
165170
}
166171
}
167172

@@ -493,7 +498,9 @@ var getQueryDialog = function() {
493498
role="button"
494499
class="CodeMirror-search-modifier-button CodeMirror-replace-toggle-button"
495500
>
496-
<span aria-hidden="true" class="button">▶</span>
501+
<span aria-hidden="true" class="button">
502+
${triangleArrowRight}
503+
</span>
497504
</button>
498505
</div>
499506
<div class="CodeMirror-find-input-fields">
@@ -535,19 +542,29 @@ var getQueryDialog = function() {
535542
aria-label="${i18n.t('CodemirrorFindAndReplace.Previous')}"
536543
class="CodeMirror-search-button icon up-arrow prev"
537544
>
545+
<span aria-hidden="true">
546+
${upArrow}
547+
</span>
538548
</button>
539549
<button
540550
title="${i18n.t('CodemirrorFindAndReplace.Next')}"
541551
aria-label="${i18n.t('CodemirrorFindAndReplace.Next')}"
542552
class="CodeMirror-search-button icon down-arrow next"
543553
>
554+
<span aria-hidden="true">
555+
${downArrow}
556+
</span>
544557
</button>
545558
</div>
546559
<div class="CodeMirror-close-button-container">
547560
<button
548561
title="${i18n.t('CodemirrorFindAndReplace.Close')}"
549562
aria-label="${i18n.t('CodemirrorFindAndReplace.Close')}"
550-
class="CodeMirror-close-button close icon">
563+
class="CodeMirror-close-button close icon"
564+
>
565+
<span aria-hidden="true">
566+
${exitIcon}
567+
</span>
551568
</button>
552569
</div>
553570
</div>

‎package-lock.json

Lines changed: 62 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,7 @@
196196
"prop-types": "^15.6.2",
197197
"q": "^1.4.1",
198198
"query-string": "^6.13.2",
199+
"raw-loader": "^4.0.2",
199200
"react": "^16.12.0",
200201
"react-dom": "^16.12.0",
201202
"react-helmet": "^5.1.3",

‎webpack/config.dev.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,10 @@ module.exports = {
9696
{
9797
test: /\.svg$/,
9898
oneOf: [
99+
{
100+
resourceQuery: /byContent/,
101+
use: 'raw-loader'
102+
},
99103
{
100104
resourceQuery: /byUrl/,
101105
use: 'file-loader'

‎webpack/config.prod.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@ module.exports = [{
102102
{
103103
test: /\.svg$/,
104104
oneOf: [
105+
{
106+
resourceQuery: /byContent/,
107+
use: 'raw-loader'
108+
},
105109
{
106110
resourceQuery: /byUrl/,
107111
use: 'file-loader'

0 commit comments

Comments
 (0)