Skip to content

Commit 32c4770

Browse files
SundeepChandSundeepChand
committed
Updated find & replace popup layout
1 parent dbfb2e6 commit 32c4770

File tree

2 files changed

+184
-89
lines changed

2 files changed

+184
-89
lines changed

‎client/styles/components/_editor.scss

+59-12
Original file line numberDiff line numberDiff line change
@@ -87,16 +87,14 @@ pre.CodeMirror-line {
8787
position: fixed;
8888
top: 0;
8989
left: 50%;
90-
margin-left: - #{365/2/$base-font-size}rem;
90+
margin-left: - #{552/2/$base-font-size}rem;
9191

9292
z-index: 10;
9393

94-
width: 100%;
95-
max-width: #{365 / $base-font-size}rem;
96-
94+
width: 552px;
9795
font-family: Montserrat, sans-serif;
9896

99-
padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{14 / $base-font-size}rem #{18 / $base-font-size}rem;
97+
padding: #{7 / $base-font-size}rem #{10 / $base-font-size}rem #{7 / $base-font-size}rem #{9 / $base-font-size}rem;
10098

10199
border-radius: 2px;
102100

@@ -107,6 +105,59 @@ pre.CodeMirror-line {
107105
}
108106
}
109107

108+
.CodeMirror-find-popup-container {
109+
display: flex;
110+
flex-wrap: wrap;
111+
justify-content: space-between;
112+
}
113+
.Toggle-replace-btn-div {
114+
height: 40px;
115+
margin-right: 10px;
116+
padding: 0;
117+
}
118+
.Toggle-replace-btn-div > button {
119+
width: 100%;
120+
height: 100%;
121+
}
122+
.CodeMirror-find-div {
123+
padding: 0px;
124+
display: flex;
125+
justify-content: flex-start;
126+
align-items: center;
127+
flex-wrap: nowrap;
128+
}
129+
.CodeMirror-search-modifiers {
130+
margin-left: 10px;
131+
}
132+
.CodeMirror-search-results {
133+
margin: 0px 20px;
134+
width: 75px;
135+
}
136+
.CodeMirror-find-controls {
137+
display: flex;
138+
}
139+
140+
.CodeMirror-replace-div {
141+
display: flex;
142+
width: 293px;
143+
justify-content: center;
144+
align-items: center;
145+
}
146+
.CodeMirror-replace-controls {
147+
display: flex;
148+
}
149+
150+
.CodeMirror-replace-options {
151+
width: 552px;
152+
height: 65px;
153+
display: flex;
154+
justify-content: center;
155+
align-items: center;
156+
}
157+
.CodeMirror-replace-options button {
158+
width: 200px;
159+
}
160+
110161
.CodeMirror-search-title {
111162
display: block;
112163
margin-bottom: #{12 / $base-font-size}rem;
@@ -158,11 +209,11 @@ pre.CodeMirror-line {
158209
}
159210

160211
}
161-
width: #{35 / $base-font-size}rem;
162-
height: #{35 / $base-font-size}rem;
212+
width: #{25 / $base-font-size}rem;
213+
height: #{25 / $base-font-size}rem;
163214

164215
& + & {
165-
margin-left: #{10 / $base-font-size}rem;
216+
margin-left: #{3 / $base-font-size}rem;
166217
}
167218

168219
word-break: keep-all;
@@ -223,10 +274,6 @@ pre.CodeMirror-line {
223274
Close button
224275
*/
225276
.CodeMirror-close-button {
226-
position: absolute;
227-
top: #{14 / $base-font-size}rem;
228-
right: #{18 / $base-font-size}rem;
229-
230277
display: flex;
231278
flex-direction: row;
232279
}

‎client/utils/codemirror-search.js

+125-77
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export default function(CodeMirror) {
7878
else if (e.keyCode !== 13 && searchField.value.length > 1) { // not enter and more than 1 character to search
7979
startSearch(cm, getSearchState(cm), searchField.value);
8080
} else if (searchField.value.length <= 1) {
81-
cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText = '';
81+
cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText = 'No results';
8282
}
8383
});
8484

@@ -147,15 +147,25 @@ export default function(CodeMirror) {
147147
}
148148

149149
var showReplaceButton = dialog.getElementsByClassName("CodeMirror-replace-button")[0];
150-
var replaceDiv = dialog.getElementsByClassName("Replace-div")[0];
150+
var toggleReplaceBtnDiv = dialog.getElementsByClassName("Toggle-replace-btn-div")[0];
151+
var replaceDiv = dialog.getElementsByClassName("CodeMirror-replace-div")[0];
151152
if (replaceOpened) {
152-
replaceDiv.style.height = "138px";
153+
replaceDiv.style.height = "50px";
154+
toggleReplaceBtnDiv.style.height = "90px";
155+
showReplaceButton.style.height = "90px";
156+
showReplaceButton.innerHTML = "▼";
153157
}
154158
CodeMirror.on(showReplaceButton, "click", function () {
155159
if (replaceDiv.style.height === "0px") {
156-
replaceDiv.style.height = "138px";
160+
replaceDiv.style.height = "50px";
161+
toggleReplaceBtnDiv.style.height = "90px";
162+
showReplaceButton.style.height = "90px";
163+
showReplaceButton.innerHTML = "▼";
157164
} else {
158165
replaceDiv.style.height = "0px";
166+
toggleReplaceBtnDiv.style.height = "40px";
167+
showReplaceButton.style.height = "40px";
168+
showReplaceButton.innerHTML = "▶";
159169
}
160170
});
161171

@@ -346,7 +356,7 @@ export default function(CodeMirror) {
346356
if (!cursor.find(rev)) {
347357
cursor = getSearchCursor(cm, state.query, rev ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(cm.firstLine(), 0));
348358
if (!cursor.find(rev)) {
349-
cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText = '';
359+
cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText = 'No results';
350360
return;
351361
}
352362
}
@@ -419,90 +429,128 @@ export default function(CodeMirror) {
419429
}
420430
}
421431

422-
var doReplaceConfirm = "<button>Replace</button> <button>Skip</button> <button>Replace All</button> <button>Stop</button>";
432+
var doReplaceConfirm = `
433+
<div class="CodeMirror-replace-options">
434+
<button
435+
title="Replace"
436+
aria-label="Replace"
437+
>
438+
Replace
439+
</button>
440+
<button
441+
title="Skip"
442+
aria-label="Skip"
443+
>
444+
Skip
445+
</button>
446+
<button
447+
title="Replace All"
448+
aria-label="Replace All"
449+
>
450+
Replace All
451+
</button>
452+
<button
453+
title="Stop"
454+
aria-label="Stop"
455+
>
456+
Stop
457+
</button>
458+
</div>
459+
`;
423460

424461
var queryDialog = `
425-
<h3 class="CodeMirror-search-title">Find</h3>
426-
<input id="Find-input-field" type="text" class="search-input CodeMirror-search-field" placeholder="Find in files" />
427-
<div class="CodeMirror-search-actions">
428-
<div class="CodeMirror-search-modifiers button-wrap">
429-
<button
430-
title="Regular expression"
431-
aria-label="Regular expression"
432-
role="checkbox"
433-
class="CodeMirror-search-modifier-button CodeMirror-regexp-button"
434-
>
435-
<span aria-hidden="true" class="button">.*</span>
436-
</button>
437-
<button
438-
title="Case sensitive"
439-
aria-label="Case sensitive"
440-
role="checkbox"
441-
class="CodeMirror-search-modifier-button CodeMirror-case-button"
442-
>
443-
<span aria-hidden="true" class="button">Aa</span>
444-
</button>
445-
<button
446-
title="Whole words"
447-
aria-label="Whole words"
448-
role="checkbox"
449-
class="CodeMirror-search-modifier-button CodeMirror-word-button"
450-
>
451-
<span aria-hidden="true" class="button">" "</span>
452-
</button>
462+
<div class="CodeMirror-find-popup-container">
463+
<div class="Toggle-replace-btn-div">
453464
<button
454465
title="Replace"
455466
aria-label="Replace"
456467
role="button"
457468
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
458469
>
459-
<span aria-hidden="true" class="button">Replace</span>
470+
<span aria-hidden="true" class="button">▶</span>
460471
</button>
461472
</div>
462-
<div class="CodeMirror-search-nav">
463-
<button class="CodeMirror-search-results"></button>
464-
<button
465-
title="Previous"
466-
aria-label="Previous"
467-
class="CodeMirror-search-button icon up-arrow prev"
468-
>
469-
</button>
470-
<button
471-
title="Next"
472-
aria-label="Next"
473-
class="CodeMirror-search-button icon down-arrow next"
474-
>
475-
</button>
473+
<div class="CodeMirror-find-input-fields">
474+
<div class="CodeMirror-find-div">
475+
<div class="CodeMirror-find-input">
476+
<input id="Find-input-field" type="text" class="search-input CodeMirror-search-field" placeholder="Find in files" />
477+
</div>
478+
<div class="CodeMirror-find-controls">
479+
<div class="CodeMirror-search-modifiers button-wrap">
480+
<button
481+
title="Regular expression"
482+
aria-label="Regular expression"
483+
role="checkbox"
484+
class="CodeMirror-search-modifier-button CodeMirror-regexp-button"
485+
>
486+
<span aria-hidden="true" class="button">.*</span>
487+
</button>
488+
<button
489+
title="Case sensitive"
490+
aria-label="Case sensitive"
491+
role="checkbox"
492+
class="CodeMirror-search-modifier-button CodeMirror-case-button"
493+
>
494+
<span aria-hidden="true" class="button">Aa</span>
495+
</button>
496+
<button
497+
title="Whole words"
498+
aria-label="Whole words"
499+
role="checkbox"
500+
class="CodeMirror-search-modifier-button CodeMirror-word-button"
501+
>
502+
<span aria-hidden="true" class="button">" "</span>
503+
</button>
504+
</div>
505+
<div class="CodeMirror-search-nav">
506+
<button class="CodeMirror-search-results">No results</button>
507+
<button
508+
title="Previous"
509+
aria-label="Previous"
510+
class="CodeMirror-search-button icon up-arrow prev"
511+
>
512+
</button>
513+
<button
514+
title="Next"
515+
aria-label="Next"
516+
class="CodeMirror-search-button icon down-arrow next"
517+
>
518+
</button>
519+
</div>
520+
<div>
521+
<button
522+
title="Close"
523+
aria-label="Close"
524+
class="CodeMirror-close-button close icon">
525+
</button>
526+
</div>
527+
</div>
528+
</div>
529+
<div style="height: 0px; overflow: hidden;" class="CodeMirror-replace-div">
530+
<input id="Replace-input-field" type="text" placeholder="Text to replace" class="search-input CodeMirror-search-field"/><div class="close icon"></div>
531+
<div class="CodeMirror-replace-controls">
532+
<button
533+
title="Replace"
534+
aria-label="Replace"
535+
role="button"
536+
id="Btn-replace"
537+
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
538+
>
539+
<span aria-hidden="true" class="button">Replace</span>
540+
</button>
541+
<button
542+
title="Replace All"
543+
aria-label="Replace All"
544+
role="button"
545+
id="Btn-replace-all"
546+
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
547+
>
548+
<span aria-hidden="true" class="button">Replace All</span>
549+
</button>
550+
</div>
551+
</div>
476552
</div>
477553
</div>
478-
<button
479-
title="Close"
480-
aria-label="Close"
481-
class="CodeMirror-close-button close icon">
482-
</button>
483-
<div style="height: 0px; transition: 0.4s; overflow: hidden;" class="Replace-div">
484-
<hr/>
485-
<h3 class="CodeMirror-search-title">Replace</h3>
486-
<input id="Replace-input-field" type="text" placeholder="Text to replace" class="search-input CodeMirror-search-field"/><div class="close icon"></div>
487-
<button
488-
title="Replace"
489-
aria-label="Replace"
490-
role="button"
491-
id="Btn-replace"
492-
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
493-
>
494-
<span aria-hidden="true" class="button">Replace</span>
495-
</button>
496-
<button
497-
title="Replace All"
498-
aria-label="Replace All"
499-
role="button"
500-
id="Btn-replace-all"
501-
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
502-
>
503-
<span aria-hidden="true" class="button">Replace All</span>
504-
</button>
505-
</div>
506554
`;
507555

508556
CodeMirror.commands.findPersistent = function(cm) {doFindAndReplace(cm, false, true, false, true, false);};

0 commit comments

Comments
 (0)