From 833bc4378dc28d11560fc3b129d71b282cc73b01 Mon Sep 17 00:00:00 2001
From: Angelo Verlain <geoangercola@gmail.com>
Date: Thu, 30 Mar 2023 01:06:34 +0200
Subject: [PATCH] fix #48

---
 data/stylus/style.styl |  18 ++++-
 data/ui/window.ui      | 171 ++++++++++++++++++++++-------------------
 2 files changed, 105 insertions(+), 84 deletions(-)

diff --git a/data/stylus/style.styl b/data/stylus/style.styl
index 52d19fc..0087765 100644
--- a/data/stylus/style.styl
+++ b/data/stylus/style.styl
@@ -1,5 +1,6 @@
 @import 'colors.styl';
 @import 'notes.styl';
+@import 'util.styl';
 
 .container {
   transition: 0.35s background-color ease-out, 0.35s color ease-out;
@@ -14,25 +15,34 @@
   color: inherit;
 }
 
-.header-bar, .toolbar, .separator {
+.header-bar, .toolbar-container {
   transition: none;
 }
 
 .container:not(:focus-within) {
-  .header-bar, .toolbar, .separator {
+  .header-bar, .toolbar-container {
     transition: 0.25s opacity ease-out;
     opacity: 0;
+
+    &:hover {
+      opacity: 1;
+      transition: 0;
+    }
+  }
+
+  .header-bar:backdrop > * {
+    opacity: 1;
   }
 }
 
 for name, info in colors {
   .container.style-{name} {
-    &, & popover > arrow, & popover > contents, ~/ {
+    &, & popover > arrow, & popover > contents, .toolbar-container, ~/ {
       background-color: info.bg;
       color: info.fg;
     }
   }
-  
+
   .container.style-{name} .header-bar {
     background-color: info.header;
   }
diff --git a/data/ui/window.ui b/data/ui/window.ui
index ceacb20..7a76962 100644
--- a/data/ui/window.ui
+++ b/data/ui/window.ui
@@ -12,99 +12,110 @@
           <class name="style-specifity"/>
         </style>
         <child>
-          <object class="AdwHeaderBar">
+          <object class="GtkOverlay">
             <property name="hexpand">true</property>
-            <child type="start">
-              <object class="GtkButton">
-                <property name="icon-name">list-add-symbolic</property>
-                <property name="action-name">app.new-note</property>
-                <property name="tooltip-text" translatable="yes">New Note</property>
-              </object>
-            </child>
-            <child type="end">
-              <object class="GtkMenuButton" id="menu_button">
-                <property name="icon-name">open-menu-symbolic</property>
-                <property name="menu-model">app_menu</property>
-                <property name="tooltip-text" translatable="yes">Main Menu</property>
-                <property name="primary">true</property>
-              </object>
-            </child>
-            <property name="title-widget">
-              <object class="GtkBox"></object>
-            </property>
-            <style>
-              <class name="flat"/>
-              <class name="header-bar"/>
-            </style>
-          </object>
-        </child>
-        <child>
-          <object class="GtkScrolledWindow">
             <property name="vexpand">true</property>
-            <child>
-              <object class="GtkTextView" id="text">
-                <property name="editable">true</property>
-                <property name="wrap-mode">word-char</property>
-                <property name="top-margin">12</property>
-                <property name="bottom-margin">12</property>
-                <property name="left-margin">12</property>
-                <property name="right-margin">12</property>
+            <child type="overlay">
+              <object class="AdwHeaderBar" id="headerbar">
+                <property name="hexpand">true</property>
+                <property name="valign">start</property>
+                <child type="start">
+                  <object class="GtkButton">
+                    <property name="icon-name">list-add-symbolic</property>
+                    <property name="action-name">app.new-note</property>
+                    <property name="tooltip-text" translatable="true">New Note</property>
+                  </object>
+                </child>
+                <child type="end">
+                  <object class="GtkMenuButton" id="menu_button">
+                    <property name="icon-name">open-menu-symbolic</property>
+                    <property name="menu-model">app_menu</property>
+                    <property name="tooltip-text" translatable="true">Main Menu</property>
+                    <property name="primary">true</property>
+                  </object>
+                </child>
+                <property name="title-widget">
+                  <object class="GtkBox"></object>
+                </property>
                 <style>
-                  <class name="text-view"/>
+                  <class name="flat"/>
+                  <class name="header-bar"/>
                 </style>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkBox">
-            <property name="orientation">vertical</property>
-            <property name="valign">end</property>
             <child>
-              <object class="GtkSeparator">
-                <property name="valign">end</property>
-                <style>
-                  <class name="separator"/>
-                </style>
+              <object class="GtkScrolledWindow" id="scrolled">
+                <property name="vexpand">true</property>
+                <property name="hexpand">true</property>
+                <child>
+                  <object class="GtkTextView" id="text">
+                    <property name="editable">true</property>
+                    <property name="wrap-mode">word-char</property>
+                    <property name="top-margin">60</property>
+                    <property name="bottom-margin">60</property>
+                    <property name="left-margin">12</property>
+                    <property name="right-margin">12</property>
+                    <style>
+                      <class name="text-view"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
-            <child>
-              <object class="GtkBox">
+            <child type="overlay">
+              <object class="GtkBox" id="toolbar">
+                <property name="orientation">vertical</property>
                 <property name="valign">end</property>
                 <style>
-                  <class name="toolbar"/>
-                  <class name="flat"/>
+                  <class name="toolbar-container"/>
                 </style>
                 <child>
-                  <object class="GtkToggleButton" id="bold_button">
-                    <property name="icon-name">format-text-bold-symbolic</property>
-                    <property name="action-name">win.bold</property>
-                    <property name="focus-on-click">false</property>
-                    <property name="tooltip-text" translatable="yes">Bold</property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkToggleButton" id="italic_button">
-                    <property name="icon-name">format-text-italic-symbolic</property>
-                    <property name="action-name">win.italic</property>
-                    <property name="focus-on-click">false</property>
-                    <property name="tooltip-text" translatable="yes">Italic</property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkToggleButton" id="underline_button">
-                    <property name="icon-name">format-text-underline-symbolic</property>
-                    <property name="action-name">win.underline</property>
-                    <property name="focus-on-click">false</property>
-                    <property name="tooltip-text" translatable="yes">Underline</property>
+                  <object class="GtkSeparator">
+                    <property name="valign">end</property>
+                    <style>
+                      <class name="separator"/>
+                    </style>
                   </object>
                 </child>
                 <child>
-                  <object class="GtkToggleButton" id="strikethrough_button">
-                    <property name="icon-name">format-text-strikethrough-symbolic</property>
-                    <property name="action-name">win.strikethrough</property>
-                    <property name="focus-on-click">false</property>
-                    <property name="tooltip-text" translatable="yes">Strikethrough</property>
+                  <object class="GtkBox">
+                    <property name="valign">end</property>
+                    <style>
+                      <class name="toolbar"/>
+                      <class name="flat"/>
+                    </style>
+                    <child>
+                      <object class="GtkToggleButton" id="bold_button">
+                        <property name="icon-name">format-text-bold-symbolic</property>
+                        <property name="action-name">win.bold</property>
+                        <property name="focus-on-click">false</property>
+                        <property name="tooltip-text" translatable="true">Bold</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkToggleButton" id="italic_button">
+                        <property name="icon-name">format-text-italic-symbolic</property>
+                        <property name="action-name">win.italic</property>
+                        <property name="focus-on-click">false</property>
+                        <property name="tooltip-text" translatable="true">Italic</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkToggleButton" id="underline_button">
+                        <property name="icon-name">format-text-underline-symbolic</property>
+                        <property name="action-name">win.underline</property>
+                        <property name="focus-on-click">false</property>
+                        <property name="tooltip-text" translatable="true">Underline</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkToggleButton" id="strikethrough_button">
+                        <property name="icon-name">format-text-strikethrough-symbolic</property>
+                        <property name="action-name">win.strikethrough</property>
+                        <property name="focus-on-click">false</property>
+                        <property name="tooltip-text" translatable="true">Strikethrough</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
@@ -122,13 +133,13 @@
     </section>
     <section>
       <item>
-        <attribute name="label" translatable="yes">All Notes</attribute>
+        <attribute name="label" translatable="true">All Notes</attribute>
         <attribute name="action">app.all-notes</attribute>
       </item>
       <item>
-        <attribute name="label" translatable="yes">Delete Note</attribute>
+        <attribute name="label" translatable="true">Delete Note</attribute>
         <attribute name="action">win.delete</attribute>
       </item>
     </section>
   </menu>
-</interface>
+</interface>
\ No newline at end of file