Skip to content

Commit 72ae76f

Browse files
SundeepChandSundeepChand
committed
Modified find popup design
1 parent eed8763 commit 72ae76f

File tree

4 files changed

+79
-21
lines changed

4 files changed

+79
-21
lines changed

‎client/images/replace-all.svg

Lines changed: 23 additions & 0 deletions
Loading

‎client/images/replace.svg

Lines changed: 16 additions & 0 deletions
Loading

‎client/styles/components/_editor.scss

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,10 @@ pre.CodeMirror-line {
9191

9292
z-index: 10;
9393

94-
width: 552px;
94+
width: 580px;
9595
font-family: Montserrat, sans-serif;
9696

97-
padding: #{7 / $base-font-size}rem #{10 / $base-font-size}rem #{7 / $base-font-size}rem #{9 / $base-font-size}rem;
97+
padding: #{8 / $base-font-size}rem #{10 / $base-font-size}rem #{5 / $base-font-size}rem #{9 / $base-font-size}rem;
9898

9999
border-radius: 2px;
100100

@@ -112,7 +112,6 @@ pre.CodeMirror-line {
112112
}
113113
.Toggle-replace-btn-div {
114114
height: 40px;
115-
margin-right: 10px;
116115
padding: 0;
117116
}
118117
.Toggle-replace-btn-div > button {
@@ -169,7 +168,7 @@ pre.CodeMirror-line {
169168
.CodeMirror-search-field {
170169
display: block;
171170
width: 100%;
172-
margin-bottom: #{12 / $base-font-size}rem;
171+
margin-bottom: #{4 / $base-font-size}rem;
173172
@include themify() {
174173
color: getThemifyVariable('input-text-color');
175174
background-color: getThemifyVariable('input-secondary-background-color');
@@ -209,8 +208,8 @@ pre.CodeMirror-line {
209208
}
210209

211210
}
212-
width: #{25 / $base-font-size}rem;
213-
height: #{25 / $base-font-size}rem;
211+
width: #{35 / $base-font-size}rem;
212+
height: #{35 / $base-font-size}rem;
214213

215214
& + & {
216215
margin-left: #{3 / $base-font-size}rem;
@@ -270,6 +269,26 @@ pre.CodeMirror-line {
270269
background-image: url(../images/down-arrow.svg?byUrl)
271270
}
272271

272+
// Replace button
273+
.CodeMirror-replace-button::after {
274+
display: block;
275+
content: ' ';
276+
277+
width: 20px;
278+
height: 20px;
279+
280+
@include icon();
281+
282+
background-repeat: no-repeat;
283+
background-position: center;
284+
}
285+
.CodeMirror-replace-button.replace::after {
286+
background-image: url(../images/replace.svg?byUrl);
287+
}
288+
.CodeMirror-replace-button.replace-all::after {
289+
background-image: url(../images/replace-all.svg?byUrl);
290+
}
291+
273292
/*
274293
Close button
275294
*/

‎client/utils/codemirror-search.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -146,25 +146,27 @@ export default function(CodeMirror) {
146146
return nextState;
147147
}
148148

149-
var showReplaceButton = dialog.getElementsByClassName("CodeMirror-replace-button")[0];
149+
var showReplaceButton = dialog.getElementsByClassName("CodeMirror-replace-toggle-button")[0];
150150
var toggleReplaceBtnDiv = dialog.getElementsByClassName("Toggle-replace-btn-div")[0];
151151
var replaceDiv = dialog.getElementsByClassName("CodeMirror-replace-div")[0];
152+
var replaceDivHeightOpened = "45px", replaceDivHeightClosed = "0px";
153+
var toggleButtonHeightOpened = "80px", toggleButtonHeightClosed = "40px";
152154
if (replaceOpened) {
153-
replaceDiv.style.height = "50px";
154-
toggleReplaceBtnDiv.style.height = "90px";
155-
showReplaceButton.style.height = "90px";
155+
replaceDiv.style.height = replaceDivHeightOpened;
156+
toggleReplaceBtnDiv.style.height = toggleButtonHeightOpened;
157+
showReplaceButton.style.height = toggleButtonHeightOpened;
156158
showReplaceButton.innerHTML = "▼";
157159
}
158160
CodeMirror.on(showReplaceButton, "click", function () {
159161
if (replaceDiv.style.height === "0px") {
160-
replaceDiv.style.height = "50px";
161-
toggleReplaceBtnDiv.style.height = "90px";
162-
showReplaceButton.style.height = "90px";
162+
replaceDiv.style.height = replaceDivHeightOpened;
163+
toggleReplaceBtnDiv.style.height = toggleButtonHeightOpened;
164+
showReplaceButton.style.height = toggleButtonHeightOpened;
163165
showReplaceButton.innerHTML = "▼";
164166
} else {
165-
replaceDiv.style.height = "0px";
166-
toggleReplaceBtnDiv.style.height = "40px";
167-
showReplaceButton.style.height = "40px";
167+
replaceDiv.style.height = replaceDivHeightClosed;
168+
toggleReplaceBtnDiv.style.height = toggleButtonHeightClosed;
169+
showReplaceButton.style.height = toggleButtonHeightClosed;
168170
showReplaceButton.innerHTML = "▶";
169171
}
170172
});
@@ -465,7 +467,7 @@ export default function(CodeMirror) {
465467
title="Replace"
466468
aria-label="Replace"
467469
role="button"
468-
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
470+
class="CodeMirror-search-modifier-button CodeMirror-replace-toggle-button"
469471
>
470472
<span aria-hidden="true" class="button">▶</span>
471473
</button>
@@ -534,18 +536,16 @@ export default function(CodeMirror) {
534536
aria-label="Replace"
535537
role="button"
536538
id="Btn-replace"
537-
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
539+
class="CodeMirror-search-modifier-button CodeMirror-replace-button icon replace"
538540
>
539-
<span aria-hidden="true" class="button">Replace</span>
540541
</button>
541542
<button
542543
title="Replace All"
543544
aria-label="Replace All"
544545
role="button"
545546
id="Btn-replace-all"
546-
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
547+
class="CodeMirror-search-modifier-button CodeMirror-replace-button icon replace-all"
547548
>
548-
<span aria-hidden="true" class="button">Replace All</span>
549549
</button>
550550
</div>
551551
</div>

0 commit comments

Comments
 (0)