Merge pull request #741 from marhkb/gnome-circle-2

GNOME Circle 2

data/com.github.marhkb.Pods.metainfo.xml.in.in

@@ -52,6 +52,7 @@
           <li>Port <em>GtkTreeView</em> to <em>GtkColumnView</em>. (#746)</li>
           <li>Enable searching for container and pod processes. (#747)</li>
           <li>feat(top-page): Enable killing container processes. (#748)</li>
+          <li>Various style improvements have landed. (#741)</li>
         </ul>
       </description>
     </release>

data/resources/style.css

@@ -83,63 +83,62 @@ actionsbutton.failed .action-count-badge {
   color: @error_fg_color;
 }
 
-connectionswitcher row #selection-indicator #background,
+connectionrow #selection-indicator #background,
 actionssidebar #type {
   background-color: @shade_color;
   border-radius: 9999px;
 }
 
-connectionchooserpage connectionswitcher row #color {
+connectionchooserpage connectionrow #color {
   border-radius: 9999px;
   margin: 0 9px 0 0;
   padding: 9px;
 }
 
-connectionssidebar connectionswitcher row #color {
+connectionssidebar connectionrow #color {
   border-radius: 9999px;
   margin: 0 6px 0 0;
   padding: 7px;
 }
 
-connectionssidebar connectionswitcher row #selection-indicator #background,
-connectionssidebar connectionswitcher row #delete-button,
+connectionssidebar connectionrow #selection-indicator #background,
+connectionssidebar connectionrow #delete-button,
 actionssidebar #action,
 actionssidebar #type {
   min-height: 34px;
   min-width: 34px;
 }
 
-connectionchooserpage connectionswitcher row #selection-indicator #background,
-connectionchooserpage connectionswitcher row #delete-button {
-  min-height: 44px;
-  min-width: 44px;
+connectionchooserpage connectionrow #selection-indicator #background,
+connectionchooserpage connectionrow #delete-button {
+  min-height: 38px;
+  min-width: 38px;
 }
 
-connectionswitcher row #selection-indicator #checkmark {
+connectionrow #selection-indicator #checkmark {
   color: @light_1;
   border-radius: 9999px;
   border: solid @accent_bg_color 2px;
   background-color: @accent_bg_color;
 }
 
-connectionswitcher row #selection-indicator .selected-connection {
+connectionrow #selection-indicator .selected-connection {
   border: 2px solid @accent_bg_color;
 }
 
-connectionswitcher row #selection-indicator .unselected-connection,
+connectionrow #selection-indicator .unselected-connection,
 actionssidebar #type {
   padding: 1px;
   border: 1px solid @borders;
 }
 
-connectionssidebar connectionswitcher row,
-actionssidebar row {
-  border-radius: 9px;
-  padding: 6px;
+connectionssidebar connectionrow,
+actionssidebar actionrow {
+  padding: 6px 0;
 }
 
-connectionchooserpage connectionswitcher row {
-  padding: 9px 12px;
+connectionchooserpage connectionrow {
+  padding: 6px;
 }
 
 .status-badge {

src/main.rs

@@ -157,7 +157,6 @@ fn init() {
     view::ConnectionChooserPage::static_type();
     view::ConnectionCustomInfoDialog::static_type();
     view::ConnectionRow::static_type();
-    view::ConnectionSwitcher::static_type();
     view::ConnectionsSidebar::static_type();
     view::ContainerCommitPage::static_type();
     view::ContainerFilesGetPage::static_type();

src/resources.gresource.xml

@@ -11,7 +11,6 @@
     <file compressed="true" preprocess="xml-stripblanks">view/connection_creation_page.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/connection_custom_info_dialog.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/connection_row.ui</file>
-    <file compressed="true" preprocess="xml-stripblanks">view/connection_switcher.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/connections_sidebar.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/container_commit_page.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/container_creation_page.ui</file>

src/view/action_row.rs

@@ -45,6 +45,7 @@ mod imp {
 
         fn class_init(klass: &mut Self::Class) {
             klass.bind_template();
+            klass.set_css_name("actionrow");
         }
 
         fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {

src/view/connection_chooser_page.rs

@@ -1,11 +1,14 @@
 use adw::prelude::*;
 use adw::subclass::prelude::*;
+use gettextrs::gettext;
+use glib::clone;
 use glib::Properties;
 use gtk::glib;
 use gtk::CompositeTemplate;
 
 use crate::model;
 use crate::utils;
+use crate::view;
 
 mod imp {
     use super::*;
@@ -16,6 +19,8 @@ mod imp {
     pub(crate) struct ConnectionChooserPage {
         #[property(get, set, nullable)]
         pub(crate) connection_manager: glib::WeakRef<model::ConnectionManager>,
+        #[template_child]
+        pub(super) connection_list_box: TemplateChild<gtk::ListBox>,
     }
 
     #[glib::object_subclass]
@@ -26,6 +31,7 @@ mod imp {
 
         fn class_init(klass: &mut Self::Class) {
             klass.bind_template();
+            klass.bind_template_callbacks();
             klass.set_css_name("connectionchooserpage");
         }
 
@@ -53,6 +59,58 @@ mod imp {
     }
 
     impl WidgetImpl for ConnectionChooserPage {}
+
+    #[gtk::template_callbacks]
+    impl ConnectionChooserPage {
+        #[template_callback]
+        fn on_notify_connection_manager(&self) {
+            let obj = self.obj();
+            self.connection_list_box
+                .bind_model(obj.connection_manager().as_ref(), |item| {
+                    gtk::ListBoxRow::builder()
+                        .selectable(false)
+                        .child(&view::ConnectionRow::from(item.downcast_ref().unwrap()))
+                        .build()
+                        .upcast()
+                });
+        }
+
+        #[template_callback]
+        fn on_connection_list_box_activated(&self, row: &gtk::ListBoxRow) {
+            let obj = &*self.obj();
+
+            if let Some(connection_manager) = obj.connection_manager() {
+                let position = (0..connection_manager.n_items())
+                    .find(|position| {
+                        self.connection_list_box
+                            .row_at_index(*position as i32)
+                            .as_ref()
+                            == Some(row)
+                    })
+                    .unwrap();
+
+                let connection = connection_manager
+                    .item(position)
+                    .and_downcast::<model::Connection>()
+                    .unwrap();
+
+                if connection.is_active() {
+                    return;
+                }
+
+                connection_manager.set_client_from(
+                    &connection.uuid(),
+                    clone!(@weak obj => move |result| if let Err(e) = result {
+                       utils::show_error_toast(
+                           obj.upcast_ref(),
+                           &gettext("Error on establishing connection"),
+                           &e.to_string(),
+                       );
+                    }),
+                );
+            }
+        }
+    }
 }
 
 glib::wrapper! {

src/view/connection_chooser_page.ui

@@ -5,6 +5,8 @@
       <object class="GtkBinLayout"/>
     </property>
 
+    <signal name="notify::connection-manager" handler="on_notify_connection_manager"/>
+
     <child>
       <object class="AdwToolbarView">
 
@@ -20,57 +22,38 @@
         </child>
 
         <child>
-          <object class="AdwStatusPage" id="status_page">
+          <object class="AdwStatusPage">
             <property name="title" translatable="yes">Connect to Podman</property>
             <property name="description" translatable="yes">Choose an existing connection or create a new one</property>
 
             <child>
               <object class="AdwClamp">
+                <property name="maximum-size">570</property>
+
                 <child>
                   <object class="GtkBox">
-                    <property name="spacing">18</property>
                     <property name="orientation">vertical</property>
+                    <property name="spacing">12</property>
 
                     <child>
-                      <object class="AdwBin">
+                      <object class="GtkListBox" id="connection_list_box">
                         <style>
-                          <class name="card"/>
+                          <class name="boxed-list"/>
                         </style>
-                        <property name="overflow">hidden</property>
-
-                        <child>
-                          <object class="GtkScrolledWindow" id="scrolled_window">
-                            <style>
-                              <class name="flat-headerbar-normal-scrollbar"/>
-                            </style>
-                            <property name="height-request">350</property>
-                            <property name="hexpand">True</property>
-                            <property name="vexpand">True</property>
-                            <property name="hscrollbar-policy">never</property>
-
-                            <child>
-                              <object class="PdsConnectionSwitcher">
-                                <binding name="connection-manager">
-                                  <lookup name="connection-manager">PdsConnectionChooserPage</lookup>
-                                </binding>
-                              </object>
-                            </child>
-
-                          </object>
-                        </child>
-
+                        <property name="selection-mode">none</property>
+                        <signal name="row-activated" handler="on_connection_list_box_activated" swapped="true"/>
                       </object>
                     </child>
 
                     <child>
-                      <object class="GtkButton" id="button">
+                      <object class="GtkButton">
                         <style>
                           <class name="pill"/>
                         </style>
                         <property name="action-name">win.create-connection</property>
+                        <property name="label">New Connection</property>
                         <property name="halign">center</property>
-                        <property name="label" translatable="yes">_New Connection</property>
-                        <property name="use-underline">True</property>
+                        <property name="valign">center</property>
                       </object>
                     </child>
 

src/view/connection_row.rs

@@ -176,3 +176,11 @@ glib::wrapper! {
         @extends gtk::Widget,
         @implements gtk::Accessible, gtk::Buildable, gtk::ConstraintTarget;
 }
+
+impl From<&model::Connection> for ConnectionRow {
+    fn from(connection: &model::Connection) -> Self {
+        glib::Object::builder()
+            .property("connection", connection)
+            .build()
+    }
+}