[gnome-builder] command-bar: add shell-like close button

[Christian Hergert <chergert src gnome org>]

commit a2621770605329b395c9bdeae6600b751aea062e
Author: Christian Hergert <chergert redhat com>
Date:   Fri Dec 13 08:59:03 2019 -0800

    command-bar: add shell-like close button
    
    This adds a close button to the command bar that matches
    somewhat with what the shell close buttons look like for
    "floating windows".

 src/plugins/command-bar/gbp-command-bar.ui | 28 ++++++++++++++++++++++++++--
 src/plugins/command-bar/themes/shared.css  | 12 ++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)
---
diff --git a/src/plugins/command-bar/gbp-command-bar.ui b/src/plugins/command-bar/gbp-command-bar.ui
index 49791b93f..9dc333919 100644
--- a/src/plugins/command-bar/gbp-command-bar.ui
+++ b/src/plugins/command-bar/gbp-command-bar.ui
@@ -7,9 +7,33 @@
         <property name="transition-type">crossfade</property>
         <property name="visible">true</property>
         <child>
-          <object class="DzlSuggestionEntry" id="entry">
-            <property name="width-chars">45</property>
+          <object class="GtkOverlay">
             <property name="visible">true</property>
+            <child>
+              <object class="DzlSuggestionEntry" id="entry">
+                <property name="margin">8</property>
+                <property name="width-chars">45</property>
+                <property name="visible">true</property>
+              </object>
+            </child>
+            <child type="overlay">
+              <object class="GtkButton">
+                <property name="margin">8</property>
+                <property name="visible">true</property>
+                <property name="halign">end</property>
+                <property name="valign">start</property>
+                <style>
+                  <class name="circular"/>
+                </style>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">window-close-symbolic</property>
+                    <property name="pixel-size">20</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
+              </object>
+            </child>
           </object>
         </child>
       </object>
diff --git a/src/plugins/command-bar/themes/shared.css b/src/plugins/command-bar/themes/shared.css
index 4e66a47de..8c2ed57cd 100644
--- a/src/plugins/command-bar/themes/shared.css
+++ b/src/plugins/command-bar/themes/shared.css
@@ -3,3 +3,15 @@ commandbar entry {
   border-width: 3px;
   box-shadow: 0 0 5px @wm_shadow;
 }
+commandbar button.circular {
+  background: @theme_selected_bg_color;
+  color: @theme_selected_fg_color;
+  box-shadow: 0 5px 5px @wm_shadow;
+  padding: 0px;
+  margin: 0px;
+  min-width: 26px;
+  min-height: 26px;
+}
+commandbar button.circular:hover {
+  background: mix(@theme_selected_bg_color, @theme_selected_fg_color, 0.1);
+}