refactor(chatview): Add ability to select and copy/quote multiple messages (#137)

This pull-request adds a lot of enhancement to the ChatView:

* It is now possible to select multiple messages to copy
* You can also right click when multiple messages are selected to choose between "Copy selection in clipboard", "Copy quote in clipboard" or directly "Quote selection" in the chat entry!
* Quick typo fix in the fr translation.
* Unread messages count are now displayed in badges!

Author: SkyzohKey

IMessage.vala

@@ -0,0 +1,6 @@
+/**
+* An interface.
+*/
+public interface IMessage {
+
+}

docs/user_manual_en.md

@@ -4,6 +4,7 @@
 - [Introduction]
   1. [Basic Tox concepts]
   2. [Definition table]
+  3. [Keyboard shortcuts]
 - [Create a profile]
 - [Customize your profile]
   1. [Name]
@@ -38,7 +39,7 @@
     1. [Themes system]
     2. [Choose a language]
     3. [Configure the Ricin interface]
-    
+
 ## Introduction
 **Ricin** aims to be a popular instant messaging client for the Tox network. We built it in order to offer the most intuitive and performing talk app. The point of Ricin is to provide the highest quality when chatting with your friends, contacts, employees, and other people that matters in your life.
 
@@ -64,6 +65,16 @@ This ToxID is composed of a **Public Key** (64 chars), a **nospam** (6 chars) an
 
 **TODO:** Add definitions here as I write the manual.
 
+### Keyboard shortcuts
+**Note**: The _Global_ context means that you can use the shortcut in the whole app.
+
+| Shortcut       | Context            | Comments                               |
+|:--------------:|:-------------------|:--------------------------------------:|
+| `Ctrl+UP`      | Global             | Quickly switch to the previous contact.|
+| `Ctrl+DOWN`    | Global             | Quickly switch to the next contact.    |
+| `Ctrl+Shift+Q` | Messages selection | Quote a selection of messages.         |
+| `Ctrl+C`       | Messages selection | Copy a selection of messages.          |
+
 ## Create a profile
 The first time you launch Ricin, if you never used Tox before, you'll have to create a profile. A profile is a single `.tox` file that contains your name, your status message, your friends list, etc. This file **must not** be modified by hand, only Ricin (or another Tox client) should write in it. Editing this file by hand *may* expose you to profile corruption.
 
@@ -127,6 +138,7 @@ The other way to add a friend is by only knowing it's Public Key. The difference
 [Introduction]: #introduction
 [Basic Tox concepts]: #basic-tox-concepts
 [Definition table]: #definition-table
+[Keyboard Shortcuts]: #keyboard-shortcuts
 [Create a profile]: #create-a-profile
 
 [Customize your profile]: #customize-your-profile

po/fr_FR.po

@@ -1,7 +1,7 @@
 # Ricin.
 # Copyright (C) 2016 SkyzohKey and contributors
 # This file is distributed under the same license as the Ricin package.
-# 
+#
 # Translators:
 # SkyzohKey <SkyzohKey@users.noreply.github.com>, 2016
 msgid ""
@@ -24,7 +24,7 @@ msgstr " est maintenant "
 
 #: src/Wrapper.vala:219
 msgid " is now known as "
-msgstr " s'appel désormais "
+msgstr " s'appelle désormais "
 
 #: res/ui/chat-view.ui:517
 msgid "**bold**"

res/themes/app.css

@@ -7,6 +7,17 @@
 /** GTK reset **/
 @import url("reset.css");
 
+.badge {
+	background-color: @ui_system_color;
+	color: #ffffff;
+	border-radius: 0px;
+	padding: 3px 5px;
+	font-size: 7px;
+}
+*:link {
+	color: @ui_system_color;
+}
+
 GtkEntry,
 GtkEntry:focus,
 GtkComboBox,
@@ -208,10 +219,6 @@ RicinProfileChooser .notebook .entry:hover {
   background-color: @ui_main;
 }
 
-GtkLabel.info-message {
-    color: #2a92c6;
-}
-
 .ricin-navigation {
   background-color: @ui_dark;
 }
@@ -479,6 +486,9 @@ GtkScrolledWindow {
 .message-list GtkLabel {
   color: @ui_text;
 }
+.message-list GtkLabel:link {
+	color: @ui_system_color;
+}
 
 .entry-principal {
 	background-image: none;
@@ -625,9 +635,18 @@ GtkScrolledWindow {
   color: @ui_text;
 }
 
-/** ENTRIES SELECTION COLOR **/
-GtkSearchEntry:selected,
-GtkEntry:selected {
+/** SELECTION COLOR **/
+.message-list .activatable:selected *,
+.message-list .activatable:selected,
+:selected:not(.friendlist-row),
+.entry:selected {
+  color: #ffffff;
   background-color: @selected_text_color;
-  color: @ui_text;
+  outline: none;
+}
+.message-list .activatable {
+  outline: none;
+}
+.message-list .info-message {
+	color: @ui_system_color;
 }

res/themes/clearer.css

@@ -18,6 +18,7 @@
 @define-color ui_main   #333333;
 @define-color ui_text   #FFFFFF;
 @define-color selected_text_color #5688F9;
+@define-color ui_system_color #2a92c6;
 
 /** Non standard Ricin colors names, only used for this theme. */
 @define-color quote_background #444444;

res/themes/dark.css

@@ -18,6 +18,7 @@
 @define-color ui_main   #333333;
 @define-color ui_text   #FFFFFF;
 @define-color selected_text_color #5688F9;
+@define-color ui_system_color #2a92c6;
 
 @define-color plain_color @ui_text;
 @define-color quote_color @ui_green;

res/themes/white.css

@@ -18,6 +18,7 @@
 @define-color ui_main   #FFFFFF;
 @define-color ui_text   #000000;
 @define-color selected_text_color #5688F9;
+@define-color ui_system_color #2a92c6;
 
 @define-color plain_color @ui_text;
 @define-color quote_color @ui_green;

res/ui/chat-view.ui

@@ -951,8 +951,10 @@
                         <child>
                           <object class="GtkListBox" id="messages_list">
                             <property name="visible">True</property>
-                            <property name="can_focus">False</property>
+                            <property name="can_focus">True</property>
+                            <property name="has_focus">True</property>
                             <property name="selection_mode">multiple</property>
+                            <property name="activate_on_single_click">False</property>
                             <signal name="size-allocate" handler="scroll_to_bottom" swapped="no"/>
                             <style>
                               <class name="message-list"/>

res/ui/friend-list-row.ui

@@ -93,6 +93,22 @@
                 <property name="position">1</property>
               </packing>
             </child>
+            <child>
+              <object class="GtkLabel" id="label_unread_count">
+                <property name="can_focus">False</property>
+                <property name="halign">start</property>
+                <property name="valign">center</property>
+                <property name="label" translatable="yes">10</property>
+                <style>
+                  <class name="badge"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
             <child>
               <object class="GtkImage" id="userstatus">
                 <property name="width_request">16</property>

res/ui/main-window.ui

@@ -52,6 +52,7 @@
     <property name="width_request">922</property>
     <property name="height_request">500</property>
     <property name="can_focus">False</property>
+    <property name="events">GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_ENTER_NOTIFY_MASK | GDK_LEAVE_NOTIFY_MASK | GDK_STRUCTURE_MASK</property>
     <property name="window_position">center</property>
     <property name="default_width">900</property>
     <property name="default_height">500</property>