Apply user custom styles

Refs: #173
orontee · Jun 2, 2024 · 8404065 · 8404065
1 parent 0d48193
commit 8404065
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 23 deletions.
diff --git a/NEWS.rst b/NEWS.rst
@@ -14,6 +14,9 @@ The format is based on `Keep a Changelog
 Added
 -----
 
+- Apply user custom styles found at ``.config/argos/style.css`` `#173
+  <https://github.com/orontee/argos/issues/173>`_
+
 - Home button in title bar to go back to library's default directory
   `#169 <https://github.com/orontee/argos/issues/169>`_
 

diff --git a/README.rst b/README.rst
@@ -24,8 +24,8 @@ Argos
 
 Light weight front-end for `Mopidy <https://mopidy.com/>`_ music server.
 
-Argos is designed (and used!) with `Gnome <https://gnome.org>`_ desktop
-and small single-board devices with small touchscreen in mind.
+Argos is designed (and used!) with `Gnome <https://gnome.org>`_
+desktop and single-board devices with small touchscreen in mind.
 
 .. figure:: docs/screenshot.png
    :alt: Application window screenshot
@@ -178,15 +178,27 @@ Style
 The application is based on `GTK <https://www.gtk.org/>`_ library
 which uses CSS for styling and layout.
 
-To adapt to devices with small touch screen one may have to tweak
-buttons appearance. Here is an example used to widen some buttons
-(to be placed in ``~/.config/gtk-3.0/gtk.css``)::
+Custom styles must be gathered in the file
+``~/.config/argos/style.css``
+(``~/.var/app/io.github.orontee.Argos/config/argos/style.css`` when
+using Flatpak). One can use [GTK
+Inspector](https://developer.gnome.org/documentation/tools/inspector.html)
+to identify the names of the CSS nodes.
+
+To adapt to devices with small touch screen, one may have to tweak
+buttons appearance; Here is an example used to widen some buttons::
 
-  #playlist-button-box buttonbox button,
   #album-details-button-box button,
+  #playlist-button-box button,
+  #title-bar button,
+  #tracklist-state-button-box button {
+      min-width:  40px;
+      min-height: 40px;
+  }
+
   #condensed-playing-box-playback-controls-box button {
-      min-width: 60px;
-      min-height: 30px;
+      min-width:  60px;
+      min-height: 40px;
   }
 
 Automation

diff --git a/argos/app.py b/argos/app.py
@@ -3,10 +3,12 @@
 import logging
 import random
 from functools import partial
+from pathlib import Path
 from threading import Thread
 from time import sleep
 from typing import Any, Dict, List, Optional, Sequence
 
+import xdg.BaseDirectory  # type: ignore
 from gi.repository import Gdk, Gio, GLib, GObject, Gtk
 
 from argos.controllers import (
@@ -145,8 +147,6 @@ def _exception_handler(
 
         self.props.start_fullscreen = self._settings.get_boolean("start-fullscreen")
 
-        self._apply_style()
-
     @GObject.Property(type=Gio.Settings, flags=GObject.ParamFlags.READABLE)
     def settings(self):
         return self._settings
@@ -195,7 +195,8 @@ def message_queue(self) -> asyncio.Queue:
     def loop(self) -> asyncio.AbstractEventLoop:
         return self._loop
 
-    def _apply_style(self):
+    def _apply_application_style(self):
+        LOGGER.debug("Applying application style")
         css_provider = Gtk.CssProvider()
         css_provider.load_from_resource("/io/github/orontee/Argos/ui/stylesheet.css")
         screen = Gdk.Screen.get_default()
@@ -204,6 +205,23 @@ def _apply_style(self):
             screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
         )
 
+    def _apply_user_style(self):
+        config_path = Path(xdg.BaseDirectory.save_config_path("argos"))
+        user_style_path = config_path / "style.css"
+        LOGGER.debug(f"Looking for user style at {user_style_path.absolute()!r}")
+        if not user_style_path.exists():
+            LOGGER.debug("No user style to apply")
+            return
+
+        css_provider = Gtk.CssProvider()
+        css_provider.load_from_path(str(user_style_path.absolute()))
+        screen = Gdk.Screen.get_default()
+        style_context = Gtk.StyleContext()
+        style_context.add_provider_for_screen(
+            screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER
+        )
+        LOGGER.debug("User style applied")
+
     def do_command_line(self, command_line: Gio.ApplicationCommandLine):
         options = command_line.get_options_dict()
         options = options.end().unpack()
@@ -227,6 +245,9 @@ def do_command_line(self, command_line: Gio.ApplicationCommandLine):
 
     def do_activate(self):
         if not self.window:
+            self._apply_application_style()
+            self._apply_user_style()
+
             LOGGER.debug("Instantiating application window")
             self.window = ArgosWindow(self)
             self.window.set_default_icon_name("media-optical")

diff --git a/argos/ui/album_details_box.ui b/argos/ui/album_details_box.ui
@@ -418,7 +418,6 @@
                 <property name="receives-default">True</property>
                 <property name="tooltip-text" translatable="yes">Information on album</property>
                 <property name="halign">end</property>
-                <property name="valign">center</property>
                 <signal name="toggled" handler="on_information_button_toggled" swapped="no"/>
                 <child>
                   <object class="GtkImage" id="information_image">

diff --git a/argos/ui/playing_box.ui b/argos/ui/playing_box.ui
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.38.2 -->
+<!-- Generated with glade 3.40.0 -->
 <interface>
   <requires lib="gtk+" version="3.24"/>
   <!-- interface-local-resource-path ../ -->
@@ -251,12 +251,12 @@
             <property name="can-focus">False</property>
             <child>
               <object class="GtkButton" id="clear_button">
+                <property name="name">tracklist-clear-button</property>
                 <property name="visible">True</property>
                 <property name="can-focus">True</property>
                 <property name="receives-default">True</property>
                 <property name="tooltip-text" translatable="yes">Clear tracklist</property>
                 <property name="halign">start</property>
-                <property name="valign">center</property>
                 <property name="image">clear_image</property>
                 <property name="always-show-image">True</property>
                 <signal name="clicked" handler="on_clear_button_clicked" swapped="no"/>

diff --git a/argos/ui/playlists_box.ui b/argos/ui/playlists_box.ui
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.38.2 -->
+<!-- Generated with glade 3.40.0 -->
 <interface>
   <requires lib="gtk+" version="3.24"/>
   <object class="GtkImage" id="add_image">
@@ -25,6 +25,7 @@
         <property name="homogeneous">True</property>
         <child>
           <object class="GtkScrolledWindow" id="playlists_window">
+            <property name="name">playlists-window</property>
             <property name="width-request">150</property>
             <property name="visible">True</property>
             <property name="can-focus">True</property>
@@ -59,6 +60,7 @@
             <property name="spacing">5</property>
             <child>
               <object class="GtkBox" id="selected_playlist_top_box">
+                <property name="name">selected-playlist-top-box</property>
                 <property name="visible">True</property>
                 <property name="can-focus">False</property>
                 <property name="spacing">5</property>
@@ -152,8 +154,7 @@
                         <property name="focus-on-click">False</property>
                         <property name="receives-default">True</property>
                         <property name="tooltip-text" translatable="yes">Edit playlist</property>
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
+                        <property name="halign">start</property>
                         <child>
                           <object class="GtkImage" id="edit_image">
                             <property name="visible">True</property>
@@ -246,6 +247,7 @@
             </child>
             <child>
               <object class="GtkScrolledWindow" id="tracks_pane">
+                <property name="name">tracks-pane</property>
                 <property name="visible">True</property>
                 <property name="can-focus">True</property>
                 <property name="vexpand">True</property>
@@ -257,6 +259,7 @@
                     <property name="can-focus">False</property>
                     <child>
                       <object class="GtkListBox" id="tracks_box">
+                        <property name="name">tracks-box</property>
                         <property name="visible">True</property>
                         <property name="can-focus">False</property>
                         <property name="selection-mode">multiple</property>

diff --git a/argos/ui/title_bar.ui b/argos/ui/title_bar.ui
@@ -18,6 +18,7 @@
     <property name="icon-name">edit-find-symbolic</property>
   </object>
   <template class="TitleBar" parent="GtkHeaderBar">
+    <property name="name">title-bar</property>
     <property name="visible">True</property>
     <property name="can-focus">False</property>
     <child type="title">

diff --git a/scripts/build_deb b/scripts/build_deb
@@ -1,13 +1,14 @@
 #!/bin/bash
 
 VERSION=$(poetry version | cut -d' ' -f 2)
+BUILDDIR=builddir
 
-[ -f builddir ] && {
-    echo "Removing existing builddir…"
-    rm -rf builddir
+[ -d ${BUILDDIR} ] && {
+    echo "Removing existing build directory…"
+    rm -rf ${BUILDDIR}
 }
 
-mkdir builddir
+mkdir ${BUILDDIR}
 
-git archive --prefix=builddir/argos-${VERSION}/ --format=tar.gz HEAD | tar xzf -
-pushd builddir/argos-${VERSION} && debuild -b -tc -us -uc && popd
+git archive --prefix=${BUILDDIR}/argos-${VERSION}/ --format=tar.gz HEAD | tar xzf -
+pushd ${BUILDDIR}/argos-${VERSION} && debuild -b -tc -us -uc && popd