Move project find options up
MODIFY
lib/project-find-view.coffee
lib/project-find-view.coffee
@@ -41,6 +41,13 @@ class ProjectFindView extends View
@span class: 'header-item options-label pull-right', =>
@span 'Finding with Options: '
@span outlet: 'optionsLabel', class: 'options'
+ @span class: 'btn-group btn-toggle btn-group-options', =>
+ @button outlet: 'regexOptionButton', class: 'btn option-regex', =>
+ @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-regex" /></svg>'
+ @button outlet: 'caseOptionButton', class: 'btn option-case-sensitive', =>
+ @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-case" /></svg>'
+ @button outlet: 'wholeWordOptionButton', class: 'btn option-whole-word', =>
+ @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-word" /></svg>'
@section outlet: 'replacmentInfoBlock', class: 'input-block', =>
@progress outlet: 'replacementProgress', class: 'inline-block'
@@ -52,13 +59,6 @@ class ProjectFindView extends View
@div class: 'input-block-item', =>
@div class: 'btn-group btn-group-find', =>
@button outlet: 'findAllButton', class: 'btn', 'Find'
- @div class: 'btn-group btn-toggle btn-group-options', =>
- @button outlet: 'regexOptionButton', class: 'btn option-regex', =>
- @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-regex" /></svg>'
- @button outlet: 'caseOptionButton', class: 'btn option-case-sensitive', =>
- @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-case" /></svg>'
- @button outlet: 'wholeWordOptionButton', class: 'btn option-whole-word', =>
- @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-word" /></svg>'
@section class: 'input-block replace-container', =>
@div class: 'input-block-item input-block-item--flex editor-container', =>

MODIFY
styles/find-and-replace.less
styles/find-and-replace.less
@@ -45,6 +45,7 @@ atom-workspace.find-visible {
.header {
padding: @component-padding/4 @component-padding/2;
min-width: @min-width;
+ line-height: 1.75;
}
.header-item {
margin: @component-padding/4 0;
@@ -73,12 +74,6 @@ atom-workspace.find-visible {
}
}
- .btn-group-options {
- display: inline-flex;
- width: 140px;
- margin-left: .5em;
- }
-
.btn > .icon {
width: 20px;
height: 16px;
@@ -103,10 +98,22 @@ atom-workspace.find-visible {
color: @text-color-subtle;
position: relative;
.options {
+ margin-right: .5em;
color: @text-color;
}
}
+ .btn-group-options {
+ display: inline-flex;
+ margin-top: -.1em;
+
+ .btn {
+ width: 36px;
+ padding: 0;
+ line-height: 1.75;
+ }
+ }
+
.editor-container {
position: relative;
atom-text-editor {
@@ -118,6 +125,15 @@ atom-workspace.find-visible {
// Buffer find and replace
.find-and-replace {
+ @input-width: 260px;
+ @block-width: 260px;
+
+ .input-block-item {
+ flex: 1 1 @block-width;
+ }
+ .input-block-item--flex {
+ flex: 100 1 @input-width;
+ }
.btn-group-find,
.btn-group-replace {
@@ -129,13 +145,6 @@ atom-workspace.find-visible {
flex: 2;
}
- .btn-group-options {
- .btn {
- margin-top: -.1em;
- line-height: 1.75;
- }
- }
-
.find-container atom-text-editor {
padding-right: 64px; // leave some room for the results count
}
@@ -190,7 +199,7 @@ atom-workspace.find-visible {
// Project find and replace
.project-find {
@project-input-width: 260px;
- @project-block-width: 220px;
+ @project-block-width: 160px;
.input-block-item {
flex: 1 1 @project-block-width;
@@ -199,10 +208,6 @@ atom-workspace.find-visible {
flex: 100 1 @project-input-width;
}
- .btn-group-find {
- flex: .6;
- }
-
.loading,
.preview-block,
.error-messages,

Move project find options up