Explore basic styling.

main.py

@@ -13,6 +13,8 @@ STYLE_FILE_PATH = os.path.join(
     os.path.dirname(os.path.abspath(__file__)),
     "style.css")
 
+MIN_TITLE_WIDTH_CHARS = 10
+
 import gi
 
 gi.require_version("Gtk", "4.0")
@@ -23,40 +25,84 @@ from gi.repository import Gtk, Polkit, GObject, Gio, Adw, Gdk
 
 
 class MainWindow(Gtk.Window):
-    def __init__(self, *, title, application, task_manager):
+
+    ## Setup
+    def __init__(self, *, title, application, task_manager, with_titlebar=True):
         super().__init__(title=title, application=application)
         self.application = application
         self.task_manager = task_manager
+        self.loading = 0
+
+        if with_titlebar:
+            self.header_bar = Gtk.HeaderBar()
+            # self.header_bar.set_show_close_button(True)
+            # self.header_bar.props.title = APP_TITLE
+            self.set_titlebar(self.header_bar)
+
+            self.progress_spinner = Gtk.Spinner()
+            self.progress_spinner.start()
+            self.header_bar.pack_end(self.progress_spinner)
+        else:
+            self.header_bar = None
+            self.progress_spinner = None
+
+        self.main_box = Gtk.Box(name='main-box')
+        self.task_list = Gtk.ListBox(name='task-list')
+
+        self.main_box.props.valign = Gtk.Align.CENTER
+        self.main_box.props.halign = Gtk.Align.CENTER
+        self.main_box.append(self.task_list)
+        self.set_child(self.main_box)
+
+        self.loading += 1
         self.task_manager.get_task_list(self.on_task_list_ready)
 
-        self.task_list = Gtk.ListBox()
-        self.set_child(self.task_list)
-
-
-    def on_button_clicked(self, button):
-        print('{} was clicked'.format(button))
-
+    ## Rendering
     def build_agenda_task_row(self, task):
         row = Gtk.ListBoxRow()
-        hbox = Gtk.Box(spacing=6)
+        hbox = Gtk.Box()
 
         state_button = Gtk.Button.new_with_label(task.state or '')
-        state_button.connect("clicked", self.on_button_clicked)
+        state_button.props.css_classes = ('state-button',)
+        state_button.connect("clicked", self.on_status_button_clicked)
         hbox.append(state_button)
 
-        task_name_label = Gtk.Entry(text=task.title)
+        clock_button = Gtk.Button.new_with_label('C')
+        clock_button.props.css_classes = ('clock-button',)
+        clock_button.connect("clicked", self.on_clock_button_clicked)
+        hbox.append(clock_button)
+
+        task_name_label = Gtk.Entry(text=task.title, width_chars=max(MIN_TITLE_WIDTH_CHARS, len(task.title)))
+        task_name_label.props.css_classes = ('task-name',)
         hbox.append(task_name_label)
 
 
         row.set_child(hbox)
         return row
 
+    def on_ready(self):
+        self.loading -= 1
+        if self.loading < 0:
+            self.loading = 0
+        elif self.loading == 0:
+            if self.progress_spinner is not None:
+                self.progress_spinner.stop()
+
+    ## Callbacks
     def on_task_list_ready(self, agenda):
         for item in agenda.with_hour:
             self.task_list.append(self.build_agenda_task_row(item))
 
         for item in agenda.no_hour:
             self.task_list.append(self.build_agenda_task_row(item))
+        self.on_ready()
+
+    ## Reactions
+    def on_status_button_clicked(self, button):
+        print('Status button clicked: {}'.format(button))
+
+    def on_clock_button_clicked(self, button):
+        print('Clock button clicked: {}'.format(button))
 
 
 class Application(Gtk.Application):

style.css

@@ -1,10 +1,20 @@
-label {
-    padding-top: 20px;
-    background-color: red;
-    /* font: Vera 20px; */
+#task-list {
+	border: 1px solid #cdc7c2;
+	padding: 1ex;
+	margin: 1ex;
 }
 
-entry {
-    color: #0f0;
+#task-list .state-button,
+#task-list .clock-button {
+	margin-right: 1ex;
 }
 
+window {
+	background-color: #d6d5d4;
+}
+
+#task-list .task-name {
+	border: none;
+	border-bottom: 1px solid #ccc;
+	border-radius: 0;
+}