Grouped icons in header bar under single popover menu (#141)

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## []
 ### Changed
 - Updated Pipfile unifying packages and adding custom scripts
+- Grouped icons in the header bar under one single popover menu
 
 ### Added
 - Added tooltips to UI widgets

src/UI/assets/gtk/main_window_layout.glade

@@ -32,25 +32,10 @@ Author: Alberto Cardellini
   <!-- interface-name TradingMate -->
   <!-- interface-description Your best mate for your trading -->
   <!-- interface-authors Alberto Cardellini -->
-  <object class="GtkImage" id="image_button">
+  <object class="GtkImage" id="image_properties">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <property name="stock">gtk-about</property>
-  </object>
-  <object class="GtkImage" id="image_open">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="stock">gtk-open</property>
-  </object>
-  <object class="GtkImage" id="image_preferences">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="stock">gtk-preferences</property>
-  </object>
-  <object class="GtkImage" id="log_button_image">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="stock">gtk-file</property>
+    <property name="stock">gtk-properties</property>
   </object>
   <object class="GtkWindow" id="main_window">
     <property name="can_focus">False</property>
@@ -69,63 +54,17 @@ Author: Alberto Cardellini
             <property name="can_focus">False</property>
             <property name="spacing">10</property>
             <child>
-              <object class="GtkButton" id="open_button">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="tooltip_text" translatable="yes">Open a portfolio</property>
-                <property name="image">image_open</property>
-                <property name="always_show_image">True</property>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="settings_button">
+              <object class="GtkButton" id="properties_button">
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
-                <property name="tooltip_text" translatable="yes">Open the settings</property>
-                <property name="image">image_preferences</property>
+                <property name="image">image_properties</property>
                 <property name="always_show_image">True</property>
               </object>
               <packing>
                 <property name="expand">False</property>
                 <property name="fill">True</property>
-                <property name="position">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="about_button">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="tooltip_text" translatable="yes">About TradingMate</property>
-                <property name="image">image_button</property>
-                <property name="always_show_image">True</property>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="show_log_button">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="tooltip_text" translatable="yes">Open TradingMate log</property>
-                <property name="image">log_button_image</property>
-                <property name="always_show_image">True</property>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">3</property>
+                <property name="position">4</property>
               </packing>
             </child>
           </object>
@@ -180,12 +119,12 @@ Author: Alberto Cardellini
                     <property name="can_focus">False</property>
                     <property name="halign">end</property>
                     <property name="hexpand">True</property>
-                    <property name="xpad">5</property>
                     <property name="stock">gtk-connect</property>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
+                    <property name="padding">5</property>
                     <property name="position">1</property>
                   </packing>
                 </child>
@@ -203,4 +142,90 @@ Author: Alberto Cardellini
       </object>
     </child>
   </object>
+  <object class="GtkPopoverMenu" id="main_header_properties_popover">
+    <property name="can_focus">False</property>
+    <property name="relative_to">properties_button</property>
+    <property name="position">bottom</property>
+    <property name="constrain_to">none</property>
+    <child>
+      <object class="GtkBox" id="main_header_properties_popover_box">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkButton" id="main_header_open_button">
+            <property name="label" translatable="yes">Open portfolio</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="relief">none</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="main_header_settings_button">
+            <property name="label" translatable="yes">Settings</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="relief">none</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="main_header_log_button">
+            <property name="label" translatable="yes">Show log</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="relief">none</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="main_header_about_button">
+            <property name="label" translatable="yes">About</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="relief">none</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="main_header_exit_button">
+            <property name="label" translatable="yes">Exit</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="relief">none</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">4</property>
+          </packing>
+        </child>
+      </object>
+      <packing>
+        <property name="submenu">main</property>
+      </packing>
+    </child>
+  </object>
 </interface>

src/UI/gtk/UIHandler.py

@@ -27,12 +27,15 @@
 # GTK Widget IDs
 MAIN_WINDOW = "main_window"
 NOTEBOOK = "notebook"
-OPEN_BUTTON = "open_button"
-SETTINGS_BUTTON = "settings_button"
-ABOUT_BUTTON = "about_button"
+OPEN_BUTTON = "main_header_open_button"
+SETTINGS_BUTTON = "main_header_settings_button"
+ABOUT_BUTTON = "main_header_about_button"
 PORTFOLIO_PATH_LABEL = "portfolio_path_label"
-SHOW_LOG_BUTTON = "show_log_button"
+SHOW_LOG_BUTTON = "main_header_log_button"
 CONNECTION_IMAGE = "connection_image"
+PROPERTIES_BUTTON = "properties_button"
+PROPERTIES_POPOVER = "main_header_properties_popover"
+EXIT_BUTTON = "main_header_exit_button"
 
 
 class UIHandler:
@@ -56,18 +59,25 @@ def _create_UI(self):
         show_log_button = builder.get_object(SHOW_LOG_BUTTON)
         self._portfolio_path_label = builder.get_object(PORTFOLIO_PATH_LABEL)
         self._connection_status_image = builder.get_object(CONNECTION_IMAGE)
+        properties_button = builder.get_object(PROPERTIES_BUTTON)
+        self._properties_popover = builder.get_object(PROPERTIES_POPOVER)
+        exit_button = builder.get_object(EXIT_BUTTON)
+        # configure widgets
+        self._properties_popover.set_relative_to(properties_button)
         # and link their callbacks
         self._main_window.connect("delete-event", self._on_main_window_delete_event)
+        properties_button.connect("clicked", self._on_properties_button_click_event)
         open_button.connect("clicked", self._on_open_portfolio_event)
         settings_button.connect("clicked", self._on_open_settings_event)
         about_button.connect("clicked", self._on_show_about_event)
         show_log_button.connect("clicked", self._on_show_log_event)
         self._notebook.connect("switch-page", self._on_change_notebook_page)
+        exit_button.connect("clicked", self._on_main_window_delete_event)
         # Manually create required notebook pages
         for pf in self._client.get_portfolios():
             self._create_update_portfolio_tab(pf)
 
-    def _on_main_window_delete_event(self, widget, event):
+    def _on_main_window_delete_event(self, *args):
         # Check if there are unsaved changes before closing the app
         if self._client.unsaved_changes():
             ConfirmDialog(
@@ -89,13 +99,21 @@ def _close_application(self):
         self._client.stop()
         gtk.main_quit()
 
+    def _on_properties_button_click_event(self, widget):
+        self._properties_popover.show_all()
+        self._properties_popover.popup()
+
     def _on_show_about_event(self, widget):
+        # Hide the popover menu and shows the about dialog
+        self._properties_popover.hide()
         message = "Version: {}\n{}".format(
             self._client.get_app_version(), Messages.ABOUT_MESSAGE.value
         )
         MessageDialog(self._main_window, "About", message, gtk.MessageType.INFO).show()
 
     def _on_show_log_event(self, widget):
+        # Hide the popover menu and shows the log window
+        self._properties_popover.hide()
         self._log_window.show()
 
     def _on_data_worker_timeout(self, portfolios):
@@ -132,6 +150,8 @@ def _create_portfolio_tab(self, portfolio):
         self._portfolio_tabs[portfolio.get_id()] = page
 
     def _on_open_portfolio_event(self, widget):
+        # Hide the popover menu and shows the file chooser dialog
+        self._properties_popover.hide()
         try:
             dialog = gtk.FileChooserDialog(
                 "Select file",
@@ -161,6 +181,8 @@ def _on_open_portfolio_event(self, widget):
             ).show()
 
     def _on_open_settings_event(self, widget):
+        # Hide the popover menu and shows the settings window
+        self._properties_popover.hide()
         # FIXME changes are not applied immediately, it would be good to force a UI refresh
         SettingsWindow(self._main_window, self._client).show()