From e9231ab83d0430652db2e20156a3c94e29081ab1 Mon Sep 17 00:00:00 2001
From: Erik Reider <ereider20010103@gmail.com>
Date: Thu, 16 Sep 2021 13:09:18 +0200
Subject: [PATCH] Noti close button won't show until mouse hover

---
 src/notification/notification.ui   | 273 +++++++++++++++--------------
 src/notification/notification.vala |  19 +-
 2 files changed, 160 insertions(+), 132 deletions(-)

diff --git a/src/notification/notification.ui b/src/notification/notification.ui
index 081eeec..3438e57 100644
--- a/src/notification/notification.ui
+++ b/src/notification/notification.ui
@@ -6,101 +6,48 @@
     <property name="visible">True</property>
     <property name="can-focus">True</property>
     <child>
-      <object class="GtkBox">
+      <object class="GtkEventBox" id="event_box">
         <property name="visible">True</property>
         <property name="can-focus">False</property>
-        <property name="orientation">vertical</property>
         <child>
-          <object class="GtkOverlay" id="overlay">
-            <property name="width-request">400</property>
+          <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can-focus">False</property>
+            <property name="orientation">vertical</property>
             <child>
-              <object class="GtkBox" id="base_box">
+              <object class="GtkOverlay" id="overlay">
+                <property name="width-request">400</property>
                 <property name="visible">True</property>
                 <property name="can-focus">False</property>
-                <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkButton" id="default_button">
+                  <object class="GtkBox" id="base_box">
                     <property name="visible">True</property>
                     <property name="can-focus">False</property>
-                    <property name="receives-default">False</property>
+                    <property name="orientation">vertical</property>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkButton" id="default_button">
                         <property name="visible">True</property>
-                        <property name="can-focus">False</property>
-                        <property name="orientation">vertical</property>
+                        <property name="can-focus">True</property>
+                        <property name="receives-default">False</property>
                         <child>
                           <object class="GtkBox">
                             <property name="visible">True</property>
                             <property name="can-focus">False</property>
-                            <child>
-                              <object class="GtkImage" id="img">
-                                <property name="visible">True</property>
-                                <property name="can-focus">False</property>
-                                <property name="valign">start</property>
-                                <property name="margin-end">12</property>
-                                <property name="icon_size">6</property>
-                                <style>
-                                  <class name="image"/>
-                                </style>
-                              </object>
-                              <packing>
-                                <property name="expand">False</property>
-                                <property name="fill">True</property>
-                                <property name="position">0</property>
-                              </packing>
-                            </child>
+                            <property name="orientation">vertical</property>
                             <child>
                               <object class="GtkBox">
                                 <property name="visible">True</property>
                                 <property name="can-focus">False</property>
-                                <property name="margin-end">14</property>
-                                <property name="hexpand">True</property>
-                                <property name="vexpand">True</property>
-                                <property name="orientation">vertical</property>
                                 <child>
-                                  <object class="GtkBox">
+                                  <object class="GtkImage" id="img">
                                     <property name="visible">True</property>
                                     <property name="can-focus">False</property>
-                                    <child>
-                                      <object class="GtkLabel" id="summary">
-                                        <property name="visible">True</property>
-                                        <property name="can-focus">False</property>
-                                        <property name="ellipsize">end</property>
-                                        <property name="max-width-chars">0</property>
-                                        <property name="xalign">0</property>
-                                        <attributes>
-                                          <attribute name="weight" value="bold"/>
-                                          <attribute name="size" value="12288"/>
-                                        </attributes>
-                                        <style>
-                                          <class name="summary"/>
-                                        </style>
-                                      </object>
-                                      <packing>
-                                        <property name="expand">True</property>
-                                        <property name="fill">True</property>
-                                        <property name="position">0</property>
-                                      </packing>
-                                    </child>
-                                    <child>
-                                      <object class="GtkLabel" id="time">
-                                        <property name="visible">True</property>
-                                        <property name="can-focus">False</property>
-                                        <property name="margin-start">6</property>
-                                        <property name="track-visited-links">False</property>
-                                        <style>
-                                          <class name="time"/>
-                                        </style>
-                                      </object>
-                                      <packing>
-                                        <property name="expand">False</property>
-                                        <property name="fill">True</property>
-                                        <property name="pack-type">end</property>
-                                        <property name="position">1</property>
-                                      </packing>
-                                    </child>
+                                    <property name="valign">start</property>
+                                    <property name="margin-end">12</property>
+                                    <property name="icon_size">6</property>
+                                    <style>
+                                      <class name="image"/>
+                                    </style>
                                   </object>
                                   <packing>
                                     <property name="expand">False</property>
@@ -109,19 +56,83 @@
                                   </packing>
                                 </child>
                                 <child>
-                                  <object class="GtkLabel" id="body">
+                                  <object class="GtkBox">
                                     <property name="visible">True</property>
                                     <property name="can-focus">False</property>
+                                    <property name="margin-end">14</property>
                                     <property name="hexpand">True</property>
                                     <property name="vexpand">True</property>
-                                    <property name="wrap">True</property>
-                                    <property name="ellipsize">end</property>
-                                    <property name="lines">1</property>
-                                    <property name="xalign">0</property>
-                                    <property name="yalign">0</property>
-                                    <style>
-                                      <class name="body"/>
-                                    </style>
+                                    <property name="orientation">vertical</property>
+                                    <child>
+                                      <object class="GtkBox">
+                                        <property name="visible">True</property>
+                                        <property name="can-focus">False</property>
+                                        <child>
+                                          <object class="GtkLabel" id="summary">
+                                            <property name="visible">True</property>
+                                            <property name="can-focus">False</property>
+                                            <property name="ellipsize">end</property>
+                                            <property name="max-width-chars">0</property>
+                                            <property name="xalign">0</property>
+                                            <attributes>
+                                              <attribute name="weight" value="bold"/>
+                                              <attribute name="size" value="12288"/>
+                                            </attributes>
+                                            <style>
+                                              <class name="summary"/>
+                                            </style>
+                                          </object>
+                                          <packing>
+                                            <property name="expand">True</property>
+                                            <property name="fill">True</property>
+                                            <property name="position">0</property>
+                                          </packing>
+                                        </child>
+                                        <child>
+                                          <object class="GtkLabel" id="time">
+                                            <property name="visible">True</property>
+                                            <property name="can-focus">False</property>
+                                            <property name="margin-start">6</property>
+                                            <property name="track-visited-links">False</property>
+                                            <style>
+                                              <class name="time"/>
+                                            </style>
+                                          </object>
+                                          <packing>
+                                            <property name="expand">False</property>
+                                            <property name="fill">True</property>
+                                            <property name="pack-type">end</property>
+                                            <property name="position">1</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="GtkLabel" id="body">
+                                        <property name="visible">True</property>
+                                        <property name="can-focus">False</property>
+                                        <property name="hexpand">True</property>
+                                        <property name="vexpand">True</property>
+                                        <property name="wrap">True</property>
+                                        <property name="ellipsize">end</property>
+                                        <property name="lines">1</property>
+                                        <property name="xalign">0</property>
+                                        <property name="yalign">0</property>
+                                        <style>
+                                          <class name="body"/>
+                                        </style>
+                                      </object>
+                                      <packing>
+                                        <property name="expand">True</property>
+                                        <property name="fill">True</property>
+                                        <property name="position">1</property>
+                                      </packing>
+                                    </child>
                                   </object>
                                   <packing>
                                     <property name="expand">True</property>
@@ -131,80 +142,82 @@
                                 </child>
                               </object>
                               <packing>
-                                <property name="expand">True</property>
+                                <property name="expand">False</property>
                                 <property name="fill">True</property>
+                                <property name="position">0</property>
+                              </packing>
+                            </child>
+                            <child>
+                              <object class="GtkImage" id="body_image">
+                                <property name="can-focus">False</property>
+                                <property name="halign">center</property>
+                                <style>
+                                  <class name="body-image"/>
+                                </style>
+                              </object>
+                              <packing>
+                                <property name="expand">False</property>
+                                <property name="fill">False</property>
                                 <property name="position">1</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="GtkImage" id="body_image">
-                            <property name="can-focus">False</property>
-                            <property name="halign">center</property>
                             <style>
-                              <class name="body-image"/>
+                              <class name="notification-content"/>
                             </style>
                           </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">False</property>
-                            <property name="position">1</property>
-                          </packing>
                         </child>
                         <style>
-                          <class name="notification-content"/>
+                          <class name="notification-default-action"/>
                         </style>
                       </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">0</property>
+                      </packing>
                     </child>
                     <style>
-                      <class name="notification-default-action"/>
+                      <class name="notification"/>
                     </style>
                   </object>
                   <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">True</property>
-                    <property name="position">0</property>
+                    <property name="index">-1</property>
                   </packing>
                 </child>
-                <style>
-                  <class name="notification"/>
-                </style>
+                <child type="overlay">
+                  <object class="GtkRevealer" id="close_revealer">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="transition-type">crossfade</property>
+                    <child>
+                      <object class="GtkButton" id="close_button">
+                        <property name="label">×</property>
+                        <property name="visible">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="receives-default">True</property>
+                        <property name="halign">end</property>
+                        <property name="valign">start</property>
+                        <property name="relief">none</property>
+                        <property name="always-show-image">True</property>
+                        <style>
+                          <class name="close-button"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
               </object>
               <packing>
-                <property name="index">-1</property>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
               </packing>
             </child>
-            <child type="overlay">
-              <object class="GtkButton" id="close_button">
-                <property name="label">×</property>
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="receives-default">True</property>
-                <property name="halign">end</property>
-                <property name="valign">start</property>
-                <property name="relief">none</property>
-                <property name="always-show-image">True</property>
-                <style>
-                  <class name="close-button"/>
-                </style>
-              </object>
-            </child>
+            <style>
+              <class name="notification-background"/>
+            </style>
           </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
         </child>
-        <style>
-          <class name="notification-background"/>
-        </style>
       </object>
     </child>
     <style>
diff --git a/src/notification/notification.vala b/src/notification/notification.vala
index b8e6b36..dd28880 100644
--- a/src/notification/notification.vala
+++ b/src/notification/notification.vala
@@ -1,9 +1,14 @@
 namespace SwayNotificatonCenter {
     [GtkTemplate (ui = "/org/erikreider/sway-notification-center/notification/notification.ui")]
     private class Notification : Gtk.ListBoxRow {
+        [GtkChild]
+        unowned Gtk.EventBox event_box;
+
         [GtkChild]
         unowned Gtk.Button default_button;
 
+        [GtkChild]
+        unowned Gtk.Revealer close_revealer;
         [GtkChild]
         unowned Gtk.Button close_button;
 
@@ -31,7 +36,7 @@ namespace SwayNotificatonCenter {
 
         public Notification (NotifyParams param,
                              NotiDaemon notiDaemon,
-                             bool show = false) {
+                             bool is_cc_noti = false) {
             this.notiDaemon = notiDaemon;
             this.param = param;
 
@@ -41,11 +46,21 @@ namespace SwayNotificatonCenter {
 
             close_button.clicked.connect (close_notification);
 
+            this.event_box.enter_notify_event.connect (()=> {
+                close_revealer.set_reveal_child (true);
+                return false;
+            });
+
+            this.event_box.leave_notify_event.connect (()=> {
+                close_revealer.set_reveal_child (false);
+                return false;
+            });
+
             set_body ();
             set_icon ();
             set_actions ();
 
-            if (show) {
+            if (is_cc_noti) {
                 this.body.set_lines (10);
                 this.show ();
             }