Added notification hover effect and now a fixed size of 500px

2021-07-28 19:12:25 +02:00
parent 205749363b
commit 4da4c19a76
6 changed files with 97 additions and 56 deletions
--- a/src/controlCenter/controlCenter.ui
+++ b/src/controlCenter/controlCenter.ui
@@ -12,10 +12,12 @@
    <property name="skip-pager-hint">True</property>
    <property name="urgency-hint">True</property>
    <property name="decorated">False</property>
+    <property name="deletable">False</property>
    <property name="gravity">north-east</property>
    <property name="show-menubar">False</property>
    <child>
      <object class="GtkScrolledWindow">
+        <property name="width-request">500</property>
        <property name="visible">True</property>
        <property name="can-focus">True</property>
        <child>
--- a/src/main.vala
+++ b/src/main.vala
@@ -186,7 +186,7 @@ namespace SwayNotificatonCenter {
             add_provider_for_screen (
                Gdk.Screen.get_default (),
                css_provider,
-                Gtk.STYLE_PROVIDER_PRIORITY_USER);
+                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
        } catch (Error e) {
            print ("Error: %s\n", e.message);
        }
--- a/src/notiWindow/notiWindow.ui
+++ b/src/notiWindow/notiWindow.ui
@@ -3,10 +3,30 @@
 <interface>
  <requires lib="gtk+" version="3.24"/>
  <template class="SwayNotificatonCenterNotiWindow" parent="GtkApplicationWindow">
+    <property name="width-request">500</property>
    <property name="can-focus">False</property>
+    <property name="vexpand">True</property>
    <property name="resizable">False</property>
+    <property name="default-width">500</property>
+    <property name="type-hint">notification</property>
+    <property name="skip-taskbar-hint">True</property>
+    <property name="skip-pager-hint">True</property>
+    <property name="urgency-hint">True</property>
    <property name="decorated">False</property>
    <property name="deletable">False</property>
+    <property name="gravity">north-east</property>
+    <property name="show-menubar">False</property>
+    <child>
+      <object class="GtkScrolledWindow">
+        <property name="width-request">500</property>
+        <property name="visible">True</property>
+        <property name="can-focus">True</property>
+        <property name="propagate-natural-height">True</property>
+        <child>
+          <object class="GtkViewport">
+            <property name="visible">True</property>
+            <property name="can-focus">False</property>
+            <property name="shadow-type">none</property>
            <child>
              <object class="GtkBox" id="box">
                <property name="visible">True</property>
@@ -18,6 +38,13 @@
                <child>
                  <placeholder/>
                </child>
+                <child>
+                  <placeholder/>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
      </object>
    </child>
    <style>
--- a/src/notification/notification.ui
+++ b/src/notification/notification.ui
@@ -7,19 +7,20 @@
    <property name="can-focus">False</property>
    <property name="orientation">vertical</property>
    <child>
-      <object class="GtkOverlay">
+      <object class="GtkEventBox" id="event_box">
+        <property name="visible">True</property>
+        <property name="can-focus">False</property>
+        <property name="visible-window">False</property>
+        <child>
+          <object class="GtkOverlay" id="overlay">
            <property name="width-request">400</property>
            <property name="visible">True</property>
            <property name="can-focus">False</property>
            <child>
-          <object class="GtkBox">
+              <object class="GtkButton" id="noti_button">
                <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="orientation">vertical</property>
-            <child>
-              <object class="GtkEventBox" id="eventBox">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
+                <property name="can-focus">True</property>
+                <property name="receives-default">True</property>
                <child>
                  <object class="GtkBox">
                    <property name="visible">True</property>
@@ -28,6 +29,8 @@
                      <object class="GtkImage" id="img">
                        <property name="visible">True</property>
                        <property name="can-focus">False</property>
+                        <property name="margin-left">6</property>
+                        <property name="margin-right">12</property>
                        <property name="margin-start">6</property>
                        <property name="margin-end">12</property>
                        <property name="margin-top">6</property>
@@ -55,8 +58,10 @@
                                <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>
                              </object>
@@ -70,6 +75,7 @@
                              <object class="GtkLabel" id="time">
                                <property name="visible">True</property>
                                <property name="can-focus">False</property>
+                                <property name="margin-start">6</property>
                              </object>
                              <packing>
                                <property name="expand">False</property>
@@ -90,13 +96,13 @@
                            <property name="visible">True</property>
                            <property name="can-focus">False</property>
                            <property name="wrap">True</property>
+                            <property name="max-width-chars">0</property>
                            <property name="xalign">0</property>
                            <property name="yalign">0</property>
                          </object>
                          <packing>
                            <property name="expand">True</property>
                            <property name="fill">True</property>
-                            <property name="pack-type">end</property>
                            <property name="position">1</property>
                          </packing>
                        </child>
@@ -112,15 +118,8 @@
                    </style>
                  </object>
                </child>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
                <style>
-              <class name="notification-box"/>
+                  <class name="notification-button-box"/>
                </style>
              </object>
              <packing>
@@ -128,7 +127,7 @@
              </packing>
            </child>
            <child type="overlay">
-          <object class="GtkBox">
+              <object class="GtkBox" id="close_button_parent">
                <property name="visible">True</property>
                <property name="can-focus">False</property>
                <property name="halign">end</property>
@@ -160,6 +159,8 @@
              </object>
            </child>
          </object>
+        </child>
+      </object>
      <packing>
        <property name="expand">False</property>
        <property name="fill">True</property>
--- a/src/notification/notification.vala
+++ b/src/notification/notification.vala
@@ -1,9 +1,8 @@
 namespace SwayNotificatonCenter {
    [GtkTemplate (ui = "/org/erikreider/sway-notification-center/notification/notification.ui")]
    private class Notification : Gtk.Box {
-
        [GtkChild]
-        unowned Gtk.EventBox eventBox;
+        unowned Gtk.Button noti_button;

        [GtkChild]
        unowned Gtk.EventBox close_button;
@@ -30,9 +29,8 @@ namespace SwayNotificatonCenter {
            this.summary.set_text (param.summary);
            this.body.set_text (param.body);

-            eventBox.button_press_event.connect ((widget, event_button) => {
-                print (widget.get_name ());
-                return false;
+            noti_button.clicked.connect(() => {
+                print ("CLICK\n");
            });

            close_button.button_press_event.connect ((widget, event_button) => {
@@ -41,12 +39,12 @@ namespace SwayNotificatonCenter {
                } catch (Error e) {
                    print ("Error: %s\n", e.message);
                }
-                return false;
+                return true;
            });

            set_icon ();

-            if (show) this.show_all ();
+            if (show) this.show ();
        }

        public void set_time () {
--- a/src/style.css
+++ b/src/style.css
@@ -6,15 +6,28 @@
 }

 .notification {
-  background: rgb(58, 58, 58);
+  background-color: transparent;
  padding: 6px;
  border-radius: 10px;
 }

-.notification-box {
+.noti-top-button {
+  background-color: transparent;
+}
+.noti-top-button:hover {
+  background-color: transparent;
+}
+
+.notification-button-box {
+  background: rgb(58, 58, 58);
  border-radius: 10px;
  margin: 6px 12px;
  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.5);
+  padding: 0;
+}
+
+.notification-button-box:hover {
+  background-color: rgb(68, 68, 68);
 }

 .notification-close-button {