Move find options up
MODIFY
lib/find-view.coffee
lib/find-view.coffee
@@ -28,6 +28,15 @@ class FindView 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', =>
+ @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-regex" /></svg>'
+ @button outlet: 'caseOptionButton', class: 'btn', =>
+ @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-case" /></svg>'
+ @button outlet: 'selectionOptionButton', class: 'btn option-selection', =>
+ @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-selection" /></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 find-container', =>
@div class: 'input-block-item input-block-item--flex editor-container', =>
@@ -37,16 +46,9 @@ class FindView extends View
@div class: 'input-block-item', =>
@div class: 'btn-group btn-group-find', =>
- @button outlet: 'nextButton', class: 'btn', 'Find'
+ @button outlet: 'nextButton', class: 'btn btn-next', 'Find'
@div class: 'btn-group btn-group-find-all', =>
- @button outlet: 'findAllButton', class: 'btn', 'Find All'
-
- @div class: 'input-block-item option-block', =>
- @div class: 'btn-group btn-toggle btn-group-options', =>
- @button outlet: 'regexOptionButton', class: 'btn', =>
- @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-regex" /></svg>'
- @button outlet: 'caseOptionButton', class: 'btn', =>
- @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-case" /></svg>'
+ @button outlet: 'findAllButton', class: 'btn btn-all', 'Find All'
@section class: 'input-block replace-container', =>
@div class: 'input-block-item input-block-item--flex editor-container', =>
@@ -58,13 +60,6 @@ class FindView extends View
@div class: 'btn-group btn-group-replace-all', =>
@button outlet: 'replaceAllButton', class: 'btn btn-all', 'Replace All'
- @div class: 'input-block-item option-block', =>
- @div class: 'btn-group btn-toggle btn-group-options', =>
- @button outlet: 'selectionOptionButton', class: 'btn option-selection', =>
- @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-selection" /></svg>'
- @button outlet: 'wholeWordOptionButton', class: 'btn option-whole-word', =>
- @raw '<svg class="icon"><use xlink:href="#find-and-replace-icon-word" /></svg>'
-
@raw '<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="find-and-replace-icon-regex" viewBox="0 0 20 16" stroke="none" fill-rule="evenodd">
<rect x="3" y="10" width="3" height="3" rx="1"></rect>

MODIFY
styles/find-and-replace.less
styles/find-and-replace.less
@@ -74,9 +74,9 @@ atom-workspace.find-visible {
}
.btn-group-options {
- .btn {
- line-height: 1;
- }
+ display: inline-flex;
+ width: 140px;
+ margin-left: .5em;
}
.btn > .icon {
@@ -118,34 +118,21 @@ atom-workspace.find-visible {
// Buffer find and replace
.find-and-replace {
- @button-width: 120px; // Find + Replace + Find All + Replace All buttons
- @option-button-width: 100px; // option buttons
- @item-width: 260px; // wrap block width
- .input-block-item {
- flex: 1 1 @item-width;
- }
- .input-block-item--flex {
- flex: 100 1 @item-width;
- }
-
- .input-block-item.option-block {
- flex-basis: @option-button-width;
+ .btn-group-find,
+ .btn-group-replace {
+ flex: 1;
}
- .btn-group-find,
- .btn-group-replace,
.btn-group-find-all,
- .btn-group-replace-all, {
- flex: 1 1 @button-width;
+ .btn-group-replace-all {
+ flex: 2;
}
.btn-group-options {
- flex: 1 1 @option-button-width;
.btn {
- flex: 1 1 25%;
- padding: 0;
- text-align: center;
+ margin-top: -.1em;
+ line-height: 1.75;
}
}

Move find options up