Skip to content

Commit 737bce6

Browse files
SundeepChandSundeepChand
committed
Changed the popup layout
1 parent 85c8441 commit 737bce6

File tree

2 files changed

+87
-80
lines changed

2 files changed

+87
-80
lines changed

‎client/styles/components/_editor.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ pre.CodeMirror-line {
121121
height: 100%;
122122
}
123123

124-
.CodeMirror-find-div {
124+
.CodMirror-search-inputs {
125125
padding: 0;
126126
display: flex;
127127
justify-content: flex-start;
@@ -148,6 +148,13 @@ pre.CodeMirror-line {
148148
justify-content: flex-start;
149149
align-items: center;
150150
}
151+
.CodeMirror-search-controls {
152+
width: 60%;
153+
display: flex;
154+
flex-wrap: wrap-reverse;
155+
justify-content: flex-start;
156+
align-items: center;
157+
}
151158
.CodeMirror-replace-controls {
152159
display: flex;
153160
margin-left: #{10 / $base-font-size}rem;

‎client/utils/codemirror-search.js‎

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -503,92 +503,92 @@ var getQueryDialog = function() {
503503
</span>
504504
</button>
505505
</div>
506-
<div class="CodeMirror-find-input-fields">
507-
<div class="CodeMirror-find-div">
508-
<div class="CodeMirror-find-input">
509-
<input id="Find-input-field" type="text" class="search-input CodeMirror-search-field" placeholder="${i18n.t('CodemirrorFindAndReplace.FindPlaceholder')}" />
510-
</div>
511-
<div class="CodeMirror-find-controls">
512-
<div class="CodeMirror-search-modifiers button-wrap">
513-
<button
514-
title="${i18n.t('CodemirrorFindAndReplace.Regex')}"
515-
aria-label="${i18n.t('CodemirrorFindAndReplace.Regex')}"
516-
role="checkbox"
517-
class="CodeMirror-search-modifier-button CodeMirror-regexp-button"
518-
>
519-
<span aria-hidden="true" class="button">.*</span>
520-
</button>
521-
<button
522-
title="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
523-
aria-label="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
524-
role="checkbox"
525-
class="CodeMirror-search-modifier-button CodeMirror-case-button"
526-
>
527-
<span aria-hidden="true" class="button">Aa</span>
528-
</button>
529-
<button
530-
title="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
531-
aria-label="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
532-
role="checkbox"
533-
class="CodeMirror-search-modifier-button CodeMirror-word-button"
534-
>
535-
<span aria-hidden="true" class="button">" "</span>
536-
</button>
537-
</div>
538-
<div class="CodeMirror-search-nav">
539-
<p class="CodeMirror-search-results">${i18n.t('CodemirrorFindAndReplace.NoResults')}</p>
540-
<button
541-
title="${i18n.t('CodemirrorFindAndReplace.Previous')}"
542-
aria-label="${i18n.t('CodemirrorFindAndReplace.Previous')}"
543-
class="CodeMirror-search-button icon up-arrow prev"
544-
>
545-
<span aria-hidden="true">
546-
${upArrow}
547-
</span>
548-
</button>
549-
<button
550-
title="${i18n.t('CodemirrorFindAndReplace.Next')}"
551-
aria-label="${i18n.t('CodemirrorFindAndReplace.Next')}"
552-
class="CodeMirror-search-button icon down-arrow next"
553-
>
554-
<span aria-hidden="true">
555-
${downArrow}
556-
</span>
557-
</button>
558-
</div>
559-
<div class="CodeMirror-close-button-container">
560-
<button
561-
title="${i18n.t('CodemirrorFindAndReplace.Close')}"
562-
aria-label="${i18n.t('CodemirrorFindAndReplace.Close')}"
563-
class="CodeMirror-close-button close icon"
564-
>
565-
<span aria-hidden="true">
566-
${exitIcon}
567-
</span>
568-
</button>
569-
</div>
570-
</div>
506+
<div class="CodeMirror-search-inputs">
507+
<div class="CodeMirror-find-input">
508+
<input id="Find-input-field" type="text" class="search-input CodeMirror-search-field" placeholder="${i18n.t('CodemirrorFindAndReplace.FindPlaceholder')}" />
571509
</div>
572-
<div style="height: 0px; overflow: hidden;" class="CodeMirror-replace-div">
510+
<div class="CodeMirror-replace-input">
573511
<input id="Replace-input-field" type="text" placeholder="${i18n.t('CodemirrorFindAndReplace.ReplacePlaceholder')}" class="search-input CodeMirror-search-field"/>
574-
<div class="CodeMirror-replace-controls">
512+
</div>
513+
</div>
514+
<div class="CodeMirror-search-controls">
515+
<div class="CodeMirror-replace-controls">
516+
<button
517+
title="${i18n.t('CodemirrorFindAndReplace.Replace')}"
518+
aria-label="${i18n.t('CodemirrorFindAndReplace.Replace')}"
519+
role="button"
520+
id="Btn-replace"
521+
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
522+
>
523+
${i18n.t('CodemirrorFindAndReplace.Replace')}
524+
</button>
525+
<button
526+
title="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
527+
aria-label="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
528+
role="button"
529+
id="Btn-replace-all"
530+
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
531+
>
532+
${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}
533+
</button>
534+
</div>
535+
<div class="CodeMirror-find-controls">
536+
<div class="CodeMirror-search-modifiers button-wrap">
575537
<button
576-
title="${i18n.t('CodemirrorFindAndReplace.Replace')}"
577-
aria-label="${i18n.t('CodemirrorFindAndReplace.Replace')}"
578-
role="button"
579-
id="Btn-replace"
580-
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
538+
title="${i18n.t('CodemirrorFindAndReplace.Regex')}"
539+
aria-label="${i18n.t('CodemirrorFindAndReplace.Regex')}"
540+
role="checkbox"
541+
class="CodeMirror-search-modifier-button CodeMirror-regexp-button"
581542
>
582-
${i18n.t('CodemirrorFindAndReplace.Replace')}
543+
<span aria-hidden="true" class="button">.*</span>
583544
</button>
584545
<button
585-
title="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
586-
aria-label="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
587-
role="button"
588-
id="Btn-replace-all"
589-
class="CodeMirror-search-modifier-button CodeMirror-replace-button"
546+
title="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
547+
aria-label="${i18n.t('CodemirrorFindAndReplace.CaseSensitive')}"
548+
role="checkbox"
549+
class="CodeMirror-search-modifier-button CodeMirror-case-button"
550+
>
551+
<span aria-hidden="true" class="button">Aa</span>
552+
</button>
553+
<button
554+
title="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
555+
aria-label="${i18n.t('CodemirrorFindAndReplace.WholeWords')}"
556+
role="checkbox"
557+
class="CodeMirror-search-modifier-button CodeMirror-word-button"
558+
>
559+
<span aria-hidden="true" class="button">" "</span>
560+
</button>
561+
</div>
562+
<div class="CodeMirror-search-nav">
563+
<p class="CodeMirror-search-results">${i18n.t('CodemirrorFindAndReplace.NoResults')}</p>
564+
<button
565+
title="${i18n.t('CodemirrorFindAndReplace.Previous')}"
566+
aria-label="${i18n.t('CodemirrorFindAndReplace.Previous')}"
567+
class="CodeMirror-search-button icon up-arrow prev"
568+
>
569+
<span aria-hidden="true">
570+
${upArrow}
571+
</span>
572+
</button>
573+
<button
574+
title="${i18n.t('CodemirrorFindAndReplace.Next')}"
575+
aria-label="${i18n.t('CodemirrorFindAndReplace.Next')}"
576+
class="CodeMirror-search-button icon down-arrow next"
577+
>
578+
<span aria-hidden="true">
579+
${downArrow}
580+
</span>
581+
</button>
582+
</div>
583+
<div class="CodeMirror-close-button-container">
584+
<button
585+
title="${i18n.t('CodemirrorFindAndReplace.Close')}"
586+
aria-label="${i18n.t('CodemirrorFindAndReplace.Close')}"
587+
class="CodeMirror-close-button close icon"
590588
>
591-
${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}
589+
<span aria-hidden="true">
590+
${exitIcon}
591+
</span>
592592
</button>
593593
</div>
594594
</div>

0 commit comments

Comments
 (0)