ui: convert AccountRow to use Gtk.Template

data/com.github.bilelmoussaoui.Authenticator.gresource.xml

@@ -14,6 +14,7 @@
     <file compressed="true" preprocess="xml-stripblanks" alias="account_config.ui">ui/account_config.ui</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="account_add.ui">ui/account_add.ui</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="account_edit.ui">ui/account_edit.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks" alias="account_row.ui">ui/account_row.ui</file>
 
     <!-- Default pre-shipped icons -->
     <file alias="amazon.svg">icons/hicolor/48x48/apps/amazon.svg</file>

data/style.css

@@ -1,10 +1,3 @@
-.accounts-widget{
-  margin-top: 0px;
-}
-
-.accounts-list{
-  background-color: @theme_bg_color;
-}
 .account-row,
  .settings-box{
 	padding: 6px;
@@ -16,16 +9,24 @@
   color: mix(@theme_base_color,@theme_fg_color,0.3);
 }
 
-.account-row-checkbtn{
+/* AccountsList */
-  padding-left: 6px;
+.accounts-list{
+  background-color: @theme_bg_color;
 }
 
-.provider-lbl,
+/* AccountRow */
-.gpg-key-lbl{
+.account-row {
-  font-size: 18px;
+  padding:0;
-  font-weight: bold;
+}
+.account-row .account-name-label{
+  font-size: 13px;
   padding: 3px 6px;
 }
+.account-row .pin-label{
+  font-size: 12px;
+}
+
+
 .application-name {
   font-size: 14px;
   color: @theme_fg_color;
@@ -37,9 +38,6 @@
   font-size: 16px;
 }
 
-.token-label{
-  font-size: 14px;
-}
 .settings-box-main-label{
     font-size: 14px;
     padding: 3px 6px;

data/ui/account_row.ui

@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+  <requires lib="gtk+" version="3.22"/>
+  <object class="GtkImage" id="copy_img">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="icon_name">edit-copy-symbolic</property>
+  </object>
+  <object class="GtkImage" id="edit_img">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="icon_name">document-edit-symbolic</property>
+  </object>
+  <template class="AccountRow" parent="GtkListBoxRow">
+    <property name="width_request">100</property>
+    <property name="height_request">80</property>
+    <property name="visible">True</property>
+    <property name="can_focus">True</property>
+    <property name="valign">start</property>
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <child>
+          <object class="GtkButton" id="edit_btn">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="tooltip_text" translatable="yes">Edit the account name and provider</property>
+            <property name="valign">center</property>
+            <property name="image">edit_img</property>
+            <signal name="clicked" handler="edit_btn_clicked" swapped="no"/>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="padding">3</property>
+            <property name="pack_type">end</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="copy_btn">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="tooltip_text" translatable="yes">Copy PIN to clipboard</property>
+            <property name="valign">center</property>
+            <property name="image">copy_img</property>
+            <signal name="activate" handler="copy_btn_clicked" swapped="no"/>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="padding">3</property>
+            <property name="pack_type">end</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="pin_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">start</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="pin-label"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="padding">3</property>
+            <property name="pack_type">end</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="account_name_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">start</property>
+            <property name="valign">center</property>
+            <property name="ellipsize">end</property>
+            <style>
+              <class name="account-name-label"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="padding">3</property>
+            <property name="position">3</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <style>
+      <class name="account-row"/>
+    </style>
+  </template>
+</interface>

src/Authenticator/widgets/accounts/row.py

@@ -21,148 +21,65 @@ from gettext import gettext as _
 from gi import require_version
 
 require_version("Gtk", "3.0")
-from gi.repository import Gio, Gtk, GObject, Pango
+from gi.repository import Gtk, GObject
 
 from .edit import EditAccountWindow
 
-
+@Gtk.Template(resource_path='/com/github/bilelmoussaoui/Authenticator/account_row.ui')
-class ActionButton(Gtk.Button):
-
-    def __init__(self, icon_name, tooltip):
-        Gtk.Button.__init__(self)
-        self._build_widget(icon_name, tooltip)
-
-    def _build_widget(self, icon_name, tooltip):
-        icon = Gio.ThemedIcon(name=icon_name)
-        image = Gtk.Image.new_from_gicon(icon,
-                                         Gtk.IconSize.BUTTON)
-        self.set_tooltip_text(tooltip)
-        self.set_image(image)
-
-    def hide(self):
-        self.set_visible(False)
-        self.set_no_show_all(True)
-
-    def show(self):
-        self.set_visible(True)
-        self.set_no_show_all(False)
-
-
-class ActionsBox(Gtk.Box):
-    """
-        AccountRow's Actions Box
-    """
-
-    def __init__(self):
-        Gtk.Box.__init__(self, orientation=Gtk.Orientation.HORIZONTAL,
-                         spacing=6)
-        self.copy_btn = ActionButton("edit-copy-symbolic", _("Copy"))
-        self.edit_btn = ActionButton("document-edit-symbolic", _("Edit"))
-        self._build_widget()
-
-    def _build_widget(self):
-        """Build ActionsBox widgets."""
-        self.pack_start(self.copy_btn, False, False, 0)
-        self.pack_start(self.edit_btn, False, False, 0)
-
-
 class AccountRow(Gtk.ListBoxRow, GObject.GObject):
     """
-        AccountRow widget.
+        AccountRow Widget.
-    """
 
+        It's a subclass of Gtk.ListBoxRow
+        Added as a child to a AccountsList
+
+        @signals: None
+        @properties: account
+    """
     __gsignals__ = {
         'on_selected': (GObject.SignalFlags.RUN_LAST, None, ()),
     }
 
+    __gtype_name__ = 'AccountRow'
+
+    account_name_label = Gtk.Template.Child()
+    pin_label = Gtk.Template.Child()
+
     def __init__(self, account):
         """
         :param account: Account
         """
-        Gtk.ListBoxRow.__init__(self)
+        super(AccountRow, self).__init__()
-        self.get_style_context().add_class("account-row")
+        self.init_template('AccountRow')
         self._account = account
-        self.check_btn = Gtk.CheckButton()
 
         self._account.connect("otp_updated", self._on_pin_updated)
-        self._build_widget()
+        self.__init_widgets()
-        self.show_all()
 
     @property
     def account(self):
         """
-            The account related to the AccountRow
+            The Account model assigned to this AccountRow
 
             :return: Account Object
         """
         return self._account
 
-    @property
-    def checked(self):
-        """
-            Whether the CheckButton is active or not.
-            :return: bool
-        """
-        return self.check_btn.get_active()
 
-    def _build_widget(self):
+    def __init_widgets(self):
-        """Build the Account Row widget."""
+        # Set up account name text label
-        container = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL,
+        self.account_name_label.set_text(self.account.username)
-                            spacing=6)
+        self.account_name_label.set_tooltip_text(self.account.username)
 
-        container.pack_start(self.check_btn, False, False, 3)
+        # Set up account pin text label
-        self.check_btn.set_visible(False)
-        self.check_btn.get_style_context().add_class("account-row-checkbtn")
-        self.check_btn.connect("toggled", self._check_btn_toggled)
-        self.check_btn.set_no_show_all(True)
-
-        # Account Name & Two factor code:
-        info_container = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
-
-        # Account Name
-        self.username_lbl = Gtk.Label(label=self.account.username)
-        self.username_lbl.set_tooltip_text(self.account.username)
-        self.username_lbl.set_ellipsize(Pango.EllipsizeMode.END)
-        self.username_lbl.set_halign(Gtk.Align.START)
-        self.username_lbl.get_style_context().add_class("username")
-
-        info_container.pack_start(self.username_lbl, False, False, 0)
-        info_container.set_valign(Gtk.Align.CENTER)
-        container.pack_start(info_container, True, True, 6)
-
-        # Actions container
-        actions = ActionsBox()
-        actions.copy_btn.connect("clicked", self._on_copy)
-        actions.edit_btn.connect("clicked", self._on_edit)
-        actions.set_valign(Gtk.Align.CENTER)
-        container.pack_end(actions, False, False, 0)
-
-        # Secret code
-        otp_container = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
         pin = self.account.otp.pin
-        self.pin_label = Gtk.Label()
-        self.pin_label.set_halign(Gtk.Align.START)
         if pin:
             self.pin_label.set_text(pin)
         else:
             self.pin_label.set_text("??????")
-            self.pin_label.set_tooltip_text(
+            self.pin_label.set_tooltip_text(_("Couldn't generate the secret code"))
-                _("Couldn't generate the secret code"))
-        self.pin_label.get_style_context().add_class("token-label")
-
-        otp_container.pack_start(self.pin_label, False, False, 6)
-        otp_container.set_valign(Gtk.Align.CENTER)
-        otp_container.set_halign(Gtk.Align.START)
-        container.pack_end(otp_container, False, False, 6)
-
-        self.add(container)
-
-    def _check_btn_toggled(self, *_):
-        """
-            CheckButton signal Handler.
-        """
-        self.emit("on_selected")
 
+    @Gtk.Template.Callback('copy_btn_clicked')
     def _on_copy(self, *_):
         """
             Copy button clicked signal handler.
@@ -170,6 +87,7 @@ class AccountRow(Gtk.ListBoxRow, GObject.GObject):
         """
         self._account.copy_pin()
 
+    @Gtk.Template.Callback('edit_btn_clicked')
     def _on_edit(self, *_):
         """
             Edit Button clicked signal handler.