UI updates

README.md

@@ -47,8 +47,8 @@ sudo apt-get install dialect
 
 - Python 3 `python`
 - PyGObject `python-gobject`
-- GTK4 `gtk4`
-- libadwaita (>= 1.4.0) `libadwaita`
+- GTK4 (>= 4.16.0) `gtk4`
+- libadwaita (>= 1.6.0) `libadwaita`
 - libsoup (>= 3.0) `libsoup`
 - libsecret
 - GStreamer 1.0 `gstreamer`

dialect/dialect.gresource.xml

@@ -10,12 +10,14 @@
     <file compressed="true" preprocess="xml-stripblanks">widgets/lang_row.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">widgets/lang_selector.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">widgets/provider_preferences.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">widgets/speech_button.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">widgets/theme_switcher.ui</file>
 
     <file compressed="true" preprocess="xml-stripblanks" alias="appdata.xml">@appstream-path@</file>
   </gresource>
 
   <gresource prefix="/app/drey/Dialect/icons/scalable/emblems/">
     <file preprocess="xml-stripblanks" alias="dialect-settings-symbolic.svg">icons/settings-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="dialect-speakers-broken-symbolic.svg">icons/speakers-broken-symbolic.svg</file>
   </gresource>
 </gresources>

dialect/meson.build

@@ -10,6 +10,7 @@ blueprints = custom_target('blueprints',
     'widgets/lang_selector.blp',
     'widgets/lang_row.blp',
     'widgets/provider_preferences.blp',
+    'widgets/speech_button.blp',
     'widgets/theme_switcher.blp',
   ),
   output: '.',

dialect/style.css

@@ -29,7 +29,7 @@
   padding-left: 12px;
   padding-top: 9px;
   padding-bottom: 9px;
-  background-color: mix(@accent_bg_color, @window_bg_color, 0.7);
+  background-color: color-mix(in srgb, var(--accent-bg-color), var(--window-bg-color) 70%);
 }
 
 .pronunciation {
@@ -38,8 +38,8 @@
 
 /* Lang Selector */
 .search_box {
-  background: @popover_bg_color;
-  border-bottom: 1px solid @borders;
+  background: var(--popover-bg-color);
+  border-bottom: 1px solid var(--border-color);
   padding: 6px;
 }
 
@@ -75,12 +75,12 @@ actionbar.flat > revealer > box {
   padding: 1px;
   background-clip: content-box;
   border-radius: 9999px;
-  box-shadow: inset 0 0 0 1px @borders;
+  box-shadow: inset 0 0 0 1px var(--border-color);
 }
 .themeswitcher checkbutton.system:checked,
 .themeswitcher checkbutton.light:checked,
 .themeswitcher checkbutton.dark:checked {
-  box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
+  box-shadow: inset 0 0 0 2px var(--accent-bg-color);
 }
 .themeswitcher checkbutton.system {
   background-image: linear-gradient(to bottom right, #fff 49.99%, #202020 50.01%);
@@ -103,29 +103,17 @@ actionbar.flat > revealer > box {
 }
 .themeswitcher checkbutton.theme-selector radio:checked {
   -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
-  background-color: @theme_selected_bg_color;
-  color: @theme_selected_fg_color;
+  background-color: var(--accent-bg-color);
+  color: var(--accent-fg-color);
 }
 
-/* Provider settings */
-.provider-feature {
-  padding: 3px 9px;
-  border-radius: 12px;
-  font-weight: bold;
-}
-.provider-feature:disabled {
-  opacity: 1;
-  filter: none;
-}
-.provider-feature-tts {
-	color: @green_5;
-  background-color: alpha(@green_3, .25);
-}
-.provider-feature-trans {
-  color: @blue_4;
-  background-color: alpha(@blue_3, .25);
-}
-.provider-feature-dic {
-  color: #ae7b03;
-  background: alpha(@yellow_5, .25);
+/* Speech Button */
+.speech-button {
+  padding: 0;
+}
+.speech-button image {
+  padding: 5px 9px;
+}
+.speech-button progressbar trough {
+  min-width: 34px;
 }

dialect/widgets/__init__.py

@@ -4,5 +4,6 @@
 
 from dialect.widgets.lang_selector import LangSelector  # noqa
 from dialect.widgets.provider_preferences import ProviderPreferences  # noqa
+from dialect.widgets.speech_button import SpeechButton  # noqa
 from dialect.widgets.textview import TextView  # noqa
 from dialect.widgets.theme_switcher import ThemeSwitcher  # noqa

dialect/widgets/provider_preferences.blp

@@ -41,7 +41,7 @@ template $ProviderPreferences : Adw.NavigationPage {
 
             StackPage {
               name: "spinner";
-              child: Spinner instance_spinner {
+              child: Adw.Spinner {
                 valign: center;
               };
             }
@@ -71,7 +71,7 @@ template $ProviderPreferences : Adw.NavigationPage {
 
             StackPage {
               name: "spinner";
-              child: Spinner api_key_spinner {
+              child: Adw.Spinner {
                 valign: center;
               };
             }

dialect/widgets/provider_preferences.py

@@ -31,11 +31,9 @@ class ProviderPreferences(Adw.NavigationPage):
     instance_entry: Adw.EntryRow = Gtk.Template.Child()  # type: ignore
     instance_stack: Gtk.Stack = Gtk.Template.Child()  # type: ignore
     instance_reset: Gtk.Button = Gtk.Template.Child()  # type: ignore
-    instance_spinner: Gtk.Spinner = Gtk.Template.Child()  # type: ignore
     api_key_entry: Adw.PasswordEntryRow = Gtk.Template.Child()  # type: ignore
     api_key_stack: Gtk.Stack = Gtk.Template.Child()  # type: ignore
     api_key_reset: Gtk.Button = Gtk.Template.Child()  # type: ignore
-    api_key_spinner: Gtk.Spinner = Gtk.Template.Child()  # type: ignore
     api_usage_group: Adw.PreferencesGroup = Gtk.Template.Child()  # type: ignore
     api_usage: Gtk.LevelBar = Gtk.Template.Child()  # type: ignore
     api_usage_label: Gtk.Label = Gtk.Template.Child()  # type: ignore
@@ -109,7 +107,6 @@ def on_done(valid):
             self.instance_entry.props.sensitive = True
             self.api_key_entry.props.sensitive = True
             self.instance_stack.props.visible_child_name = "reset"
-            self.instance_spinner.stop()
 
         if not self.provider:
             return
@@ -126,7 +123,6 @@ def on_done(valid):
             self.instance_entry.props.sensitive = False
             self.api_key_entry.props.sensitive = False
             self.instance_stack.props.visible_child_name = "spinner"
-            self.instance_spinner.start()
 
             # TODO: Use on_fail to notify network error
             self.provider.validate_instance(self.new_instance_url, on_done, lambda _: on_done(False))
@@ -177,7 +173,6 @@ def on_done(valid):
             self.instance_entry.props.sensitive = True
             self.api_key_entry.props.sensitive = True
             self.api_key_stack.props.visible_child_name = "reset"
-            self.api_key_spinner.stop()
 
         if not self.provider:
             return
@@ -191,7 +186,6 @@ def on_done(valid):
             self.instance_entry.props.sensitive = False
             self.api_key_entry.props.sensitive = False
             self.api_key_stack.props.visible_child_name = "spinner"
-            self.api_key_spinner.start()
 
             # TODO: Use on_fail to notify network error
             self.provider.validate_api_key(self.new_api_key, on_done, lambda _: on_done(False))

dialect/widgets/speech_button.blp

@@ -0,0 +1,46 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $SpeechButton : Button {
+  tooltip-text: _("Listen");
+
+  styles ["speech-button"]
+
+  child: Overlay {
+    [overlay]
+    ProgressBar progress_bar {
+      visible: false;
+      valign: end;
+
+      styles ["osd"]
+    }
+
+    child: Stack stack {
+      StackPage {
+        name: "ready";
+        child: Image {
+          icon-name: "audio-speakers-symbolic";
+        };
+      }
+
+      StackPage {
+        name: "progress";
+        child: Image {
+          icon-name: "media-playback-stop-symbolic";
+        };
+      }
+
+      StackPage {
+        name: "error";
+        child: Image {
+          icon-name: "dialect-speakers-broken-symbolic";
+        };
+      }
+
+      StackPage {
+        name: "loading";
+        child: Adw.Spinner {};
+      }
+    };
+  };
+}

dialect/widgets/speech_button.py

@@ -0,0 +1,41 @@
+# Copyright 2024 Mufeed Ali
+# Copyright 2024 Rafael Mardojai CM
+# SPDX-License-Identifier: GPL-3.0-or-later
+
+from gi.repository import Gtk
+
+from dialect.define import RES_PATH
+
+
+@Gtk.Template(resource_path=f"{RES_PATH}/widgets/speech_button.ui")
+class SpeechButton(Gtk.Button):
+    __gtype_name__ = "SpeechButton"
+
+    stack: Gtk.Stack = Gtk.Template.Child()  # type: ignore
+    progress_bar: Gtk.ProgressBar = Gtk.Template.Child()  # type: ignore
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+    def ready(self):
+        self.stack.props.visible_child_name = "ready"
+        self.props.tooltip_text = _("Listen")
+        self.progress_bar.props.visible = False
+
+    def progress(self, fraction: float):
+        if self.stack.props.visible_child_name != "progress":
+            self.stack.props.visible_child_name = "progress"
+            self.props.tooltip_text = _("Cancel Audio")
+            self.progress_bar.props.visible = True
+
+        self.progress_bar.props.fraction = fraction
+
+    def error(self, message: str):
+        self.stack.props.visible_child_name = "error"
+        self.props.tooltip_text = message
+        self.progress_bar.props.visible = False
+
+    def loading(self):
+        self.stack.props.visible_child_name = "loading"
+        self.props.tooltip_text = _("Loading…")
+        self.progress_bar.props.visible = False

dialect/window.blp

@@ -59,29 +59,13 @@ template $DialectWindow : Adw.ApplicationWindow {
     StackPage {
       name: "loading";
       child: WindowHandle {
-        Box {
-          orientation: vertical;
-          spacing: 12;
-          margin-top: 12;
-          margin-bottom: 12;
-          margin-start: 12;
-          margin-end: 12;
-          halign: center;
-          valign: center;
-
-          Spinner {
-            spinning: true;
-            width-request: 32;
-            height-request: 32;
-          }
+        Adw.StatusPage loading_page {
+          paintable: Adw.SpinnerPaintable {
+            widget: loading_page;
+          };
 
-          Label {
-            wrap: true;
+          accessibility {
             label: _("Loading…");
-
-            styles [
-              "title-1",
-            ]
           }
         }
       };
@@ -408,7 +392,7 @@ template $DialectWindow : Adw.ApplicationWindow {
                     icon-name: "edit-paste-symbolic";
                   }
 
-                  Button src_voice_btn {
+                  $SpeechButton src_speech_btn {
                     action-name: "win.listen-src";
                     tooltip-text: _("Listen");
 
@@ -501,7 +485,7 @@ template $DialectWindow : Adw.ApplicationWindow {
                   StackPage {
                     name: "default";
                     child: Box {
-                      Spinner trans_spinner {
+                      Adw.Spinner trans_spinner {
                         tooltip-text: _("Translating…");
                         margin-start: 8;
                       }
@@ -526,7 +510,7 @@ template $DialectWindow : Adw.ApplicationWindow {
                         icon-name: "document-edit-symbolic";
                       }
 
-                      Button dest_voice_btn {
+                      $SpeechButton dest_speech_btn {
                         action-name: "win.listen-dest";
                         tooltip-text: _("Listen");