[gnome-builder/wip/mwleeds/replace: 181/185] editor-frame: Add search-and-replace to the search UI



commit 0c7f9dee2e76f626a79756b58d6ffc9912af5f70
Author: Matthew Leeds <mleeds redhat com>
Date:   Fri Jul 1 11:22:41 2016 -0400

    editor-frame: Add search-and-replace to the search UI
    
    This commit implements Allan's designs for the search-and-replace UI,
    which add a replace text entry field, Replace and Replace All buttons,
    and search option check boxes to the existing search UI. Project-wide
    replace has not been implemented yet, and the "Search selection" option
    was not included because the current selection is the default search text.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=765635

 data/gtk/menus.ui                 |   12 --
 data/theme/shared.css             |   30 ++++
 libide/editor/ide-editor-frame.ui |  289 +++++++++++++++++++++++++++++++++----
 3 files changed, 290 insertions(+), 41 deletions(-)
---
diff --git a/data/gtk/menus.ui b/data/gtk/menus.ui
index 0e4b30f..31bbe77 100644
--- a/data/gtk/menus.ui
+++ b/data/gtk/menus.ui
@@ -222,18 +222,6 @@
   <menu id="ide-editor-frame-search-menu">
     <section id="ide-editor-frame-search-menu-settings-section">
       <item>
-        <attribute name="label" translatable="yes">_Match Case</attribute>
-        <attribute name="action">search-entry.change-case-sensitive</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">Match _Entire Word Only</attribute>
-        <attribute name="action">search-entry.change-word-boundaries</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">Match as _Regular Expression</attribute>
-        <attribute name="action">search-entry.change-regex-enabled</attribute>
-      </item>
-      <item>
         <attribute name="label" translatable="yes">_Wrap Around</attribute>
         <attribute name="action">search-entry.change-wrap-around</attribute>
       </item>
diff --git a/data/theme/shared.css b/data/theme/shared.css
index 3c05b5f..705dcb7 100644
--- a/data/theme/shared.css
+++ b/data/theme/shared.css
@@ -13,11 +13,41 @@ frame.gb-search-frame {
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 frame.gb-search-frame border {
   border: none;
 }
 
+/* styling for the search frame close button */
+frame.gb-search-frame > box > grid:first-child > button.close:disabled,
+frame.gb-search-frame > box > grid:first-child > button.close {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+frame.gb-search-frame > box > grid:first-child > button.close image {
+  color: @theme_fg_color;
+  opacity: 0.3;
+  margin: 2px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+frame.gb-search-frame > box > grid:first-child > button.close:hover image {
+  opacity: .75;
+  transition-duration: 250ms;
+  border: 1px solid @borders;
+}
+frame.gb-search-frame > box > grid:first-child > button.close:active image {
+  opacity: .8;
+  background-image: linear-gradient(shade(@theme_bg_color, 0.9), @theme_bg_color);
+}
+frame.gb-search-frame > box > grid:first-child > button.close:backdrop image {
+  opacity: .1;
+}
+
 /* styling for NautilusFloatingBar */
 .floating-bar {
   padding: 2px;
diff --git a/libide/editor/ide-editor-frame.ui b/libide/editor/ide-editor-frame.ui
index dd30de3..fc2fa87 100644
--- a/libide/editor/ide-editor-frame.ui
+++ b/libide/editor/ide-editor-frame.ui
@@ -51,7 +51,7 @@
                     <property name="visible">true</property>
                     <property name="width-request">300</property>
                     <child>
-                      <object class="GtkFrame">
+                      <object class="GtkFrame" id="search_frame">
                         <property name="visible">true</property>
                         <property name="margin-end">12</property>
                         <style>
@@ -59,48 +59,279 @@
                         </style>
                         <child>
                           <object class="GtkBox">
-                            <property name="orientation">horizontal</property>
                             <property name="visible">true</property>
-                            <style>
-                              <class name="linked"/>
-                            </style>
+                            <property name="orientation">vertical</property>
+                            <property name="spacing">7</property>
                             <child>
-                              <object class="GdTaggedEntry" id="search_entry">
-                                <property name="visible">true</property>
-                                <property name="tag-close-visible">false</property>
-                                <property name="can-focus">true</property>
-                                <property name="width-request">260</property>
-                                <property name="primary-icon-activatable">true</property>
-                                <property name="primary-icon-sensitive">true</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton">
-                                <property name="action-name">frame.previous-search-result</property>
-                                <property name="can-focus">false</property>
+                              <object class="GtkGrid">
                                 <property name="visible">true</property>
+                                <property name="can_focus">false</property>
+                                <property name="row_spacing">8</property>
+                                <property name="column_spacing">8</property>
                                 <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">go-up-symbolic</property>
-                                    <property name="icon-size">1</property>
+                                  <object class="GdTaggedEntry" id="search_entry">
                                     <property name="visible">true</property>
+                                    <property name="tag-close-visible">false</property>
+                                    <property name="can_focus">true</property>
+                                    <property name="width-request">340</property>
+                                    <property name="primary_icon_name">edit-find-symbolic</property>
+                                    <property name="primary_icon_activatable">false</property>
+                                    <property name="primary_icon_sensitive">false</property>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">0</property>
+                                    <property name="top_attach">0</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkSearchEntry" id="replace_entry">
+                                    <property name="visible">false</property>
+                                    <property name="can_focus">true</property>
+                                    <property name="width-request">340</property>
+                                    <property name="primary_icon_name">edit-find-replace-symbolic</property>
+                                    <property name="primary_icon_activatable">false</property>
+                                    <property name="primary_icon_sensitive">false</property>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">0</property>
+                                    <property name="top_attach">1</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="visible">true</property>
+                                    <property name="can_focus">false</property>
+                                    <property name="valign">center</property>
+                                    <property name="width_request">124</property>
+                                    <child>
+                                      <object class="GtkButton">
+                                        <property name="action-name">frame.previous-search-result</property>
+                                        <property name="width_request">62</property>
+                                        <property name="visible">true</property>
+                                        <property name="can_focus">false</property>
+                                        <property name="receives_default">true</property>
+                                        <property name="valign">center</property>
+                                        <child>
+                                          <object class="GtkImage">
+                                            <property name="visible">true</property>
+                                            <property name="can_focus">false</property>
+                                            <property name="icon_name">go-up-symbolic</property>
+                                            <property name="icon_size">1</property>
+                                          </object>
+                                        </child>
+                                      </object>
+                                      <packing>
+                                        <property name="expand">false</property>
+                                        <property name="fill">true</property>
+                                        <property name="position">0</property>
+                                      </packing>
+                                    </child>
+                                    <child>
+                                      <object class="GtkButton">
+                                        <property name="width_request">62</property>
+                                        <property name="action-name">frame.next-search-result</property>
+                                        <property name="visible">true</property>
+                                        <property name="can_focus">false</property>
+                                        <property name="receives_default">true</property>
+                                        <property name="valign">center</property>
+                                        <child>
+                                          <object class="GtkImage">
+                                            <property name="visible">true</property>
+                                            <property name="can_focus">false</property>
+                                            <property name="icon_name">go-down-symbolic</property>
+                                            <property name="icon_size">1</property>
+                                          </object>
+                                        </child>
+                                      </object>
+                                      <packing>
+                                        <property name="expand">false</property>
+                                        <property name="fill">true</property>
+                                        <property name="position">1</property>
+                                      </packing>
+                                    </child>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">1</property>
+                                    <property name="top_attach">0</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkButton" id="replace_button">
+                                    <property name="label" translatable="yes">Replace</property>
+                                    <property name="width_request">124</property>
+                                    <property name="action-name">search-entry.replace</property>
+                                    <property name="visible">false</property>
+                                    <property name="can_focus">true</property>
+                                    <property name="receives_default">true</property>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">1</property>
+                                    <property name="top_attach">1</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkButton" id="replace_all_button">
+                                    <property name="label" translatable="yes">Replace All</property>
+                                    <property name="width_request">124</property>
+                                    <property name="action-name">search-entry.replace-all</property>
+                                    <property name="visible">false</property>
+                                    <property name="can_focus">true</property>
+                                    <property name="receives_default">true</property>
                                   </object>
+                                  <packing>
+                                    <property name="left_attach">2</property>
+                                    <property name="top_attach">1</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="width_request">124</property>
+                                    <property name="visible">true</property>
+                                    <property name="can_focus">false</property>
+                                    <property name="valign">center</property>
+                                    <child>
+                                      <object class="GtkToggleButton">
+                                        <property 
name="action-name">search-entry.toggle-search-replace</property>
+                                        <property name="action-target">true</property>
+                                        <property name="tooltip-text" translatable="yes">Switch between 
Search and Search-and-Replace</property>
+                                        <property name="width_request">60</property>
+                                        <property name="visible">true</property>
+                                        <property name="can_focus">true</property>
+                                        <property name="receives_default">true</property>
+                                        <property name="halign">center</property>
+                                        <property name="valign">center</property>
+                                        <property name="margin_right">4</property>
+                                        <property name="image_position">right</property>
+                                        <child>
+                                          <object class="GtkImage">
+                                            <property name="visible">true</property>
+                                            <property name="can_focus">false</property>
+                                            <property name="icon_name">edit-find-replace-symbolic</property>
+                                          </object>
+                                        </child>
+                                      </object>
+                                      <packing>
+                                        <property name="expand">false</property>
+                                        <property name="fill">true</property>
+                                        <property name="position">0</property>
+                                      </packing>
+                                    </child>
+                                    <child>
+                                      <object class="GtkToggleButton">
+                                        <property 
name="action-name">search-entry.toggle-search-options</property>
+                                        <property name="action-target">true</property>
+                                        <property name="tooltip-text" translatable="yes">Show or hide search 
options such as case sensitivity</property>
+                                        <property name="width_request">60</property>
+                                        <property name="visible">true</property>
+                                        <property name="can_focus">true</property>
+                                        <property name="receives_default">true</property>
+                                        <property name="halign">center</property>
+                                        <property name="valign">center</property>
+                                        <child>
+                                          <object class="GtkImage">
+                                            <property name="visible">true</property>
+                                            <property name="can_focus">false</property>
+                                            <property name="icon_name">emblem-system-symbolic</property>
+                                          </object>
+                                        </child>
+                                      </object>
+                                      <packing>
+                                        <property name="expand">false</property>
+                                        <property name="fill">true</property>
+                                        <property name="position">1</property>
+                                      </packing>
+                                    </child>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">2</property>
+                                    <property name="top_attach">0</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkButton" id="close_button">
+                                    <property name="visible">true</property>
+                                    <property name="action-name">search-entry.exit-search</property>
+                                    <property name="halign">center</property>
+                                    <property name="valign">center</property>
+                                    <property name="focus_on_click">false</property>
+                                    <style>
+                                      <class name="close"/>
+                                    </style>
+                                    <child>
+                                      <object class="GtkImage">
+                                        <property name="visible">true</property>
+                                        <property name="icon_name">window-close-symbolic</property>
+                                      </object>
+                                    </child>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">4</property>
+                                    <property name="top_attach">0</property>
+                                  </packing>
                                 </child>
                               </object>
+                              <packing>
+                                <property name="expand">false</property>
+                                <property name="fill">true</property>
+                                <property name="position">0</property>
+                              </packing>
                             </child>
                             <child>
-                              <object class="GtkButton">
-                                <property name="action-name">frame.next-search-result</property>
-                                <property name="can-focus">false</property>
-                                <property name="visible">true</property>
+                              <object class="GtkGrid" id="search_options">
+                                <property name="visible">false</property>
+                                <property name="can_focus">false</property>
+                                <property name="column_spacing">8</property>
                                 <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">go-down-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                    <property name="visible">true</property>
+                                  <object class="GtkCheckButton" id="use_regex">
+                                    <property name="action-name">search-entry.change-regex-enabled</property>
+                                    <property name="label" translatable="yes">Regular expressions</property>
+                                    <property name="visible">false</property>
+                                    <property name="can_focus">false</property>
+                                    <property name="receives_default">false</property>
+                                    <property name="xalign">0</property>
+                                    <property name="draw_indicator">true</property>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">0</property>
+                                    <property name="top_attach">0</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkCheckButton" id="case_sensitive">
+                                    <property 
name="action-name">search-entry.change-case-sensitive</property>
+                                    <property name="label" translatable="yes">Case sensitive</property>
+                                    <property name="visible">false</property>
+                                    <property name="can_focus">false</property>
+                                    <property name="receives_default">false</property>
+                                    <property name="xalign">0</property>
+                                    <property name="draw_indicator">true</property>
+                                  </object>
+                                  <packing>
+                                    <property name="left_attach">1</property>
+                                    <property name="top_attach">0</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkCheckButton" id="whole_word">
+                                    <property 
name="action-name">search-entry.change-word-boundaries</property>
+                                    <property name="label" translatable="yes">Match whole word 
only</property>
+                                    <property name="visible">false</property>
+                                    <property name="can_focus">false</property>
+                                    <property name="receives_default">false</property>
+                                    <property name="xalign">0</property>
+                                    <property name="draw_indicator">true</property>
                                   </object>
+                                  <packing>
+                                    <property name="left_attach">2</property>
+                                    <property name="top_attach">0</property>
+                                  </packing>
                                 </child>
                               </object>
+                              <packing>
+                                <property name="expand">false</property>
+                                <property name="fill">true</property>
+                                <property name="position">1</property>
+                              </packing>
                             </child>
                           </object>
                         </child>


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]