UI update: make the trust management interface more user friendly

2 files changed, 277 insertions, 128 deletions

diff --git a/plugins/omemo/data/contact_details_dialog.ui b/plugins/omemo/data/contact_details_dialog.ui
index 4dadbb6a..856c7af4 100644
--- a/plugins/omemo/data/contact_details_dialog.ui
+++ b/plugins/omemo/data/contact_details_dialog.ui
@@ -2,47 +2,75 @@
 <interface>
     <template class="DinoPluginsOmemoContactDetailsDialog">
         <property name="modal">True</property>
-        <property name="title" translatable="yes">OMEMO Keys</property>
+        <property name="title">OMEMO Key Management</property>
         <property name="resizable">False</property>
         <child internal-child="vbox">
             <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="margin-left">40</property>
-                <property name="margin-right">40</property>
+                <property name="margin">12</property>
+                <property name="spacing">12</property>
                 <child>
-                    <object class="GtkBox" id="own_fingerprint_label">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">False</property>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="visible">True</property>
-                                <property name="label" translatable="yes">Own fingerprint</property>
-                                <property name="xalign">0</property>
-                                <property name="yalign">1</property>
-                                <property name="hexpand">True</property>
-                                <property name="margin-bottom">2</property>
-                                <attributes>
-                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
-                                </attributes>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkFrame" id="own_fingerprint_container">
-                        <property name="visible">False</property>
-                        <property name="margin-bottom">18</property>
+                    <object class="GtkFrame">
+                        <property name="visible">True</property>
                         <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
+                            <object class="GtkListBox">
                                 <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
+                                <property name="selection-mode">none</property>
                                 <child>
-                                    <object class="GtkGrid" id="own_fingerprint">
+                                    <object class="GtkListBoxRow">
                                         <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
+                                        <property name="activatable">False</property>
+                                        <child>
+                                            <object class="GtkBox">
+                                                <property name="visible">True</property>
+                                                <property name="orientation">horizontal</property>
+                                                <property name="margin-start">20</property>
+                                                <property name="margin-end">20</property>
+                                                <property name="margin-top">14</property>
+                                                <property name="margin-bottom">14</property>
+                                                <property name="spacing">40</property>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="visible">True</property>
+                                                        <property name="orientation">vertical</property>
+                                                        <property name="hexpand">True</property>
+                                                        <child>
+                                                            <object class="GtkLabel">
+                                                                <property name="visible">True</property>
+                                                                <property name="halign">start</property>
+                                                                <property name="label" translatable="yes">Automatically accept new keys</property>
+                                                                <attributes>
+                                                                    <attribute name="scale" value="1.1"/>
+                                                                </attributes>
+                                                            </object>
+                                                        </child>
+                                                        <child>
+                                                            <object class="GtkLabel">
+                                                                <property name="visible">True</property>
+                                                                <property name="max_width_chars">1</property>
+                                                                <property name="expand">True</property>
+                                                                <property name="xalign">0</property>
+                                                                <property name="wrap">True</property>
+                                                                <property name="label" translatable="yes">When this contact adds new encryption keys to their account, automatically accept them.</property>
+                                                                <attributes>
+                                                                    <attribute name="scale" value="0.8"/>
+                                                                </attributes>
+                                                                <style>
+                                                                    <class name="dim-label"/>
+                                                                </style>
+                                                            </object>
+                                                        </child>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkSwitch" id="auto_accept">
+                                                        <property name="visible">True</property>
+                                                        <property name="halign">end</property>
+                                                        <property name="valign">center</property>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </child>
                                     </object>
                                 </child>
                             </object>
@@ -50,60 +78,66 @@
                     </object>
                 </child>
                 <child>
-                    <object class="GtkBox">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="visible">True</property>
-                                <property name="halign">start</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">Enable Key Management</property>
-                            </object>
-                        </child>
-                        <child>
-                            <object class="GtkSwitch" id="key_mgmnt">
-                                <property name="visible">True</property>
-                                <property name="halign">end</property>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkBox" id="fingerprints_prompt_label">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
+                    <object class="GtkBox" id="own_fingerprint_container">
                         <property name="visible">False</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">2</property>
                         <child>
                             <object class="GtkLabel">
                                 <property name="visible">True</property>
                                 <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">New Devices</property>
-                                <property name="margin-bottom">2</property>
+                                <property name="label" translatable="yes">Own key</property>
                                 <attributes>
                                     <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
                                 </attributes>
                             </object>
                         </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkFrame" id="fingerprints_prompt_container">
-                        <property name="visible">False</property>
-                        <property name="margin-bottom">18</property>
                         <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
+                            <object class="GtkFrame">
                                 <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
                                 <child>
-                                    <object class="GtkGrid" id="fingerprints_prompt">
+                                    <object class="GtkListBox">
                                         <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
+                                        <property name="selection-mode">none</property>
+                                        <child>
+                                            <object class="GtkListBoxRow">
+                                                <property name="visible">True</property>
+                                                <property name="activatable">False</property>
+                                                <property name="hexpand">True</property>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="visible">True</property>
+                                                        <property name="margin-start">20</property>
+                                                        <property name="margin-end">20</property>
+                                                        <property name="margin-top">14</property>
+                                                        <property name="margin-bottom">14</property>
+                                                        <property name="orientation">horizontal</property>
+                                                        <property name="hexpand">True</property>
+                                                        <child>
+                                                            <object class="GtkLabel" id="own_fingerprint">
+                                                                <property name="visible">True</property>
+                                                                <property name="halign">start</property>
+                                                                <property name="justify">right</property>
+                                                                <property name="hexpand">True</property>
+                                                            </object>
+                                                        </child>
+                                                        <child>
+                                                            <object class="GtkButton" id="copy">
+                                                                <property name="visible">True</property>
+                                                                <property name="halign">end</property>
+                                                                <child>
+                                                                    <object class="GtkImage">
+                                                                        <property name="visible">True</property>
+                                                                        <property name="icon-size">1</property>
+                                                                        <property name="icon-name">edit-copy-symbolic</property>
+                                                                    </object>
+                                                                </child>
+                                                            </object>
+                                                        </child>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </child>
                                     </object>
                                 </child>
                             </object>
@@ -111,39 +145,27 @@
                     </object>
                 </child>
                 <child>
-                    <object class="GtkBox" id="fingerprints_verified_label">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
+                    <object class="GtkBox" id="new_keys_container">
                         <property name="visible">False</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">2</property>
                         <child>
                             <object class="GtkLabel">
                                 <property name="visible">True</property>
                                 <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">Verified Devices</property>
-                                <property name="margin-bottom">2</property>
+                                <property name="label" translatable="yes">New keys</property>
                                 <attributes>
                                     <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
                                 </attributes>
                             </object>
                         </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkFrame" id="fingerprints_verified_container">
-                        <property name="visible">False</property>
-                        <property name="margin-bottom">18</property>
                         <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
+                            <object class="GtkFrame">
                                 <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
                                 <child>
-                                    <object class="GtkGrid" id="fingerprints_verified">
+                                    <object class="GtkListBox" id="new_keys">
                                         <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
+                                        <property name="selection-mode">none</property>
                                     </object>
                                 </child>
                             </object>
@@ -151,56 +173,27 @@
                     </object>
                 </child>
                 <child>
-                    <object class="GtkBox">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">True</property>
+                    <object class="GtkBox" id="keys_container">
+                        <property name="visible">False</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">2</property>
                         <child>
                             <object class="GtkLabel">
                                 <property name="visible">True</property>
                                 <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">Devices</property>
-                                <property name="margin-bottom">2</property>
+                                <property name="label" translatable="yes">Associated keys</property>
                                 <attributes>
                                     <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
                                 </attributes>
                             </object>
                         </child>
-                        <!-- TODO: implement QR code verification !-->
-                        <!--<child>
-                            <object class="GtkButton" id="scan_button">
-                                <property name="visible">True</property>
-                                <property name="can-focus">False</property>
-                                <style>
-                                    <class name="flat"/>
-                                </style>
-                                <child>
-                                    <object class="GtkImage">
-                                        <property name="icon-name">camera-photo-symbolic</property>
-                                        <property name="icon-size">1</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>!-->
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkFrame">
-                        <property name="visible">True</property>
-                        <property name="margin-bottom">18</property>
                         <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
+                            <object class="GtkFrame">
                                 <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
                                 <child>
-                                    <object class="GtkGrid" id="fingerprints">
+                                    <object class="GtkListBox" id="keys">
                                         <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
+                                        <property name="selection-mode">none</property>
                                     </object>
                                 </child>
                             </object>
diff --git a/plugins/omemo/data/manage_key_dialog.ui b/plugins/omemo/data/manage_key_dialog.ui
new file mode 100644
index 00000000..cd14e16c
--- /dev/null
+++ b/plugins/omemo/data/manage_key_dialog.ui
@@ -0,0 +1,156 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+    <template class="DinoPluginsOmemoManageKeyDialog">
+        <property name="modal">True</property>
+        <property name="resizable">False</property>
+        <child type="titlebar">
+            <object class="GtkHeaderBar" id="header_bar">
+                <property name="visible">True</property>
+                <property name="title">Manage Key</property>
+                <property name="show_close_button">False</property>
+                <child>
+                    <object class="GtkButton" id="cancel_button">
+                        <property name="label" translatable="yes">Cancel</property>
+                        <property name="sensitive">True</property>
+                        <property name="visible">True</property>
+                    </object>
+                    <packing>
+                        <property name="pack_type">start</property>
+                    </packing>
+                </child>
+                <child>
+                    <object class="GtkButton" id="ok_button">
+                        <property name="has_default">True</property>
+                        <property name="can_default">True</property>
+                        <property name="label" translatable="yes">Confirm</property>
+                        <property name="sensitive">False</property>
+                        <property name="visible">True</property>
+                        <style>
+                            <class name="suggested-action"/>
+                        </style>
+                    </object>
+                    <packing>
+                        <property name="pack_type">end</property>
+                    </packing>
+                </child>
+            </object>
+        </child>
+        <child internal-child="vbox">
+            <object class="GtkBox">
+                <property name="visible">True</property>
+                <child>
+                    <object class="GtkBox" id="main_screen">
+                        <property name="visible">True</property>
+                        <property name="margin">12</property>
+                        <property name="spacing">12</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                            <object class="GtkLabel" id="main_desc">
+                                <property name="visible">True</property>
+                                <property name="wrap">True</property>
+                                <property name="xalign">0</property>
+                                <property name="max-width-chars">1</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkFrame">
+                                <property name="visible">True</property>
+                                <child>
+                                    <object class="GtkListBox" id="main_action_list">
+                                        <property name="visible">True</property>
+                                        <property name="selection-mode">none</property>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox" id="confirm_screen">
+                        <property name="visible">False</property>
+                        <property name="margin">12</property>
+                        <property name="spacing">12</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                            <object class="GtkImage" id="confirm_image">
+                                <property name="visible">True</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkLabel" id="confirm_title">
+                                <property name="visible">True</property>
+                                <attributes>
+                                    <attribute name="scale" value="1.1"/>
+                                </attributes>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkLabel" id="confirm_desc">
+                                <property name="visible">True</property>
+                                <property name="justify">center</property>
+                                <property name="wrap">True</property>
+                                <property name="max-width-chars">40</property>
+                                <attributes>
+                                    <attribute name="scale" value="0.8"/>
+                                </attributes>
+                                <style>
+                                    <class name="dim-label"/>
+                                </style>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox" id="verify_screen">
+                        <property name="visible">False</property>
+                        <property name="margin">12</property>
+                        <property name="spacing">12</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                            <object class="GtkLabel">
+                                <property name="visible">True</property>
+                                <property name="label">Compare the fingerprint, character by character, with the one shown on your contacts device.</property>
+                                <property name="wrap">True</property>
+                                <property name="xalign">0</property>
+                                <property name="max-width-chars">45</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="orientation">vertical</property>
+                                <property name="margin-left">12</property>
+                                <property name="margin-right">12</property>
+                                <property name="spacing">12</property>
+                                <property name="hexpand">False</property>
+                                <property name="halign">center</property>
+                                <child>
+                                    <object class="GtkLabel" id="verify_label">
+                                        <property name="visible">True</property>
+                                        <property name="margin-top">12</property>
+                                        <property name="margin-bottom">12</property>
+                                        <property name="justify">right</property>
+                                    </object>
+                                </child>
+                                <child>
+                                    <object class="GtkButton" id="verify_no">
+                                        <property name="visible">True</property>
+                                        <property name="hexpand">True</property>
+                                        <property name="label">Not Matching</property>
+                                    </object>
+                                </child>
+                                <child>
+                                    <object class="GtkButton" id="verify_yes">
+                                        <property name="visible">True</property>
+                                        <property name="hexpand">True</property>
+                                        <property name="label">Matching</property>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+            </object>
+        </child>
+    </template>
+</interface>