[polari/wip/bastianilso/room-options] roomOptions: Add room name, topic entry and leave room button

[Bastian Ilsø Hougaard <bastianilso src gnome org>]

commit 17d7db457d4619ba9dd9956f69492219665acddc
Author: Bastian Ilsø <bastianilso src gnome org>
Date:   Sat Jun 20 21:04:33 2015 +0200

    roomOptions: Add room name, topic entry and leave room button
    
    Adds a GtkLabel showing the display name of the current channel.
    If the channel is a group channel, a separate box for group-chat
    only options becomes visible. Currently the box only contains
    an scrollable window with an editable textview with the group
    chat topic. The current room can be left using the "Leave Room"
    button in the bottom.

 data/org.gnome.Polari.data.gresource.xml |    1 +
 data/resources/application.css           |    4 +
 data/resources/main-window.ui            |    2 +-
 data/resources/room-options.ui           |   92 ++++++++++++++++++++++++++++++
 src/mainWindow.js                        |   12 ++--
 src/roomOptions.js                       |   89 ++++++++++++++++++++---------
 6 files changed, 166 insertions(+), 34 deletions(-)
---
diff --git a/data/org.gnome.Polari.data.gresource.xml b/data/org.gnome.Polari.data.gresource.xml
index 91c4de2..b438163 100644
--- a/data/org.gnome.Polari.data.gresource.xml
+++ b/data/org.gnome.Polari.data.gresource.xml
@@ -8,6 +8,7 @@
     <file alias="main-window.ui" preprocess="xml-stripblanks">resources/main-window.ui</file>
     <file alias="message-user-dialog.ui" preprocess="xml-stripblanks">resources/message-user-dialog.ui</file>
     <file alias="user-list-details.ui" preprocess="xml-stripblanks">resources/user-list-details.ui</file>
+    <file alias="room-options.ui" preprocess="xml-stripblanks">resources/room-options.ui</file>
     <file alias="application.css">resources/application.css</file>
   </gresource>
 </gresources>
diff --git a/data/resources/application.css b/data/resources/application.css
index a34a6de..773590f 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -119,3 +119,7 @@
 .polari-user-list-button {
     padding: 0px 4px;
 }
+
+.topic-text-view:not(:selected) {
+    background-color: transparent;
+}
diff --git a/data/resources/main-window.ui b/data/resources/main-window.ui
index 537c36b..f1a64fe 100644
--- a/data/resources/main-window.ui
+++ b/data/resources/main-window.ui
@@ -169,7 +169,7 @@
                   <object class="GtkImage" id="image2">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="icon_name">room-options-symbolic</property>
+                    <property name="icon_name">open-menu-symbolic</property>
                     <property name="icon_size">1</property>
                   </object>
                 </child>
diff --git a/data/resources/room-options.ui b/data/resources/room-options.ui
new file mode 100644
index 0000000..e53f60b
--- /dev/null
+++ b/data/resources/room-options.ui
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="Gjs_RoomOptions" parent="GtkPopover">
+    <property name="modal">True</property>
+    <property name="position">top</property>
+    <property name="border_width">12</property>
+    <child>
+      <object class="GtkBox" id="box">
+        <property name="orientation">vertical</property>
+        <property name="spacing">6</property>
+        <child>
+          <object class="GtkRevealer" id="revealer">
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox" id="roomLabelBox">
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <child>
+              <object class="GtkImage" id="userIcon">
+                <property name="icon_name">polari-symbolic</property>
+                <property name="icon_size">1</property>
+                <property name="valign">baseline</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="roomLabel">
+                <property name="use_markup">True</property>
+                <property name="hexpand">True</property>
+                <property name="halign">start</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox" id="groupOptionsBox">
+            <property name="visible">True</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkLabel" id="topicLabel">
+                <property name="label">Topic:</property>
+                <property name="hexpand">True</property>
+                <property name="halign">start</property>
+                <property name="margin_bottom">6</property>
+                <property name="margin_top">12</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox" id="topicBox">
+              <property name="spacing">0</property>
+              <property name="margin">0</property>
+              <style>
+                <class name="entry"/>
+              </style>
+              <child>
+                <object class="GtkScrolledWindow" id="scrolledWindow">
+                  <property name="height_request">70</property>
+                  <property name="hexpand">True</property>
+                  <property name="hscrollbar_policy">never</property>
+                  <style>
+                    <class name="topic-scrolled-window"/>
+                  </style>
+                  <child>
+                    <object class="GtkTextView" id="textView">
+                      <property name="editable">True</property>
+                      <property name="cursor_visible">True</property>
+                      <property name="visible">True</property>
+                      <property name="left_margin">8</property>
+                      <property name="right_margin">8</property>
+                      <property name="pixels_above_lines">3</property>
+                      <style>
+                        <class name="topic-text-view"/>
+                      </style>
+                    </object>
+                  </child>
+                </object>
+              </child>
+            </object>
+          </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="leaveButton">
+            <property name="label">Leave Room</property>
+            <property name="margin_top">12</property>
+            <property name="halign">end</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 879e89f..905eb91 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -84,11 +84,11 @@ const MainWindow = new Lang.Class({
         this._roomOptionsAction = app.lookup_action('room-options');
         app.connect('action-state-changed::room-options', Lang.bind(this,
             function(group, actionName, value) {
-                this._roomOptionsPopover.widget.visible = value.get_boolean();
+                this._roomOptionsPopover.visible = value.get_boolean();
             }));
-        this._roomOptionsPopover.widget.connect('notify::visible', Lang.bind(this,
+        this._roomOptionsPopover.connect('notify::visible', Lang.bind(this,
             function() {
-                if (!this._roomOptionsPopover.widget.visible)
+                if (!this._roomOptionsPopover.visible)
                     this._roomOptionsAction.change_state(GLib.Variant.new('b', false));
             }));
 
@@ -241,9 +241,9 @@ const MainWindow = new Lang.Class({
         this._userListPopover.widget.relative_to = this._showUserListButton;
         this._userListPopover.widget.position = Gtk.PositionType.BOTTOM;
 
-        this._roomOptionsPopover = new RoomOptions.RoomOptionsPopover();
-        this._roomOptionsPopover.widget.relative_to = this._showRoomOptionsButton;
-        this._roomOptionsPopover.widget.position = Gtk.PositionType.BOTTOM;
+        this._roomOptionsPopover = new RoomOptions.RoomOptions();
+        this._roomOptionsPopover.relative_to = this._showRoomOptionsButton;
+        this._roomOptionsPopover.position = Gtk.PositionType.BOTTOM;
     },
 
     showJoinRoomDialog: function() {
diff --git a/src/roomOptions.js b/src/roomOptions.js
index a5ad7f3..d4215db 100644
--- a/src/roomOptions.js
+++ b/src/roomOptions.js
@@ -1,3 +1,4 @@
+const Gio = imports.gi.Gio;
 const Gdk = imports.gi.Gdk;
 const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
@@ -8,47 +9,81 @@ const ChatroomManager = imports.chatroomManager;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 
-const RoomOptionsPopover = new Lang.Class({
-    Name: 'RoomOptionsPopover',
+const RoomOptions = new Lang.Class({
+    Name: 'RoomOptions',
+    Extends: Gtk.Popover,
+    Template: 'resource:///org/gnome/Polari/room-options.ui',
+    InternalChildren: ['revealer',
+                       'box',
+                       'roomLabelBox',
+                       'userIcon',
+                       'roomLabel',
+                       'groupOptionsBox',
+                       'topicLabel',
+                       'scrolledWindow',
+                       'textView',
+                       'leaveButton'],
 
-    _init: function() {
-        this._createWidget();
+    _init: function(params) {
+        this.parent(params);
+        this.set_size_request(320, -1);
+        this._textView.wrap_mode = Gtk.WrapMode.WORD_CHAR;
+        this._textView.connect('key-press-event', Lang.bind(this, function(w, event) {
+            let [, keyval] = event.get_keyval();
+            if (keyval == Gdk.KEY_ISO_Enter || keyval == Gdk.KEY_Return)
+                this.hide();
+            return Gdk.EVENT_PROPAGATE;
+        }));
+
+        this._leaveButton.connect('clicked', Lang.bind(this, function() {
+            let app = Gio.Application.get_default();
+            let LeaveAction = app.lookup_action('leave-room');
+            LeaveAction.activate(GLib.Variant.new('(ss)', [this._room.id, '']));
+            this.hide();
+        }));
 
-        this.widget.connect('map', Lang.bind(this, function() {
+
+        this._box.show_all();
+
+        this.connect('map', Lang.bind(this, function() {
             this._revealer.transition_duration = 0;
-            this._ensureRoomOptions();
+            this._evaluateRoomType();
         }));
         this._revealer.connect('notify::child-revealed', Lang.bind(this, function() {
             this._revealer.transition_duration = 250;
         }));
 
-        this._roomManager = new ChatroomManager.getDefault();
-    },
-
-    _createWidget: function() {
-        this.widget = new Gtk.Popover({ modal: true,
-                                        position: Gtk.PositionType.TOP });
-
-        this.widget.set_border_width(6);
-        this.widget.set_size_request(250, -1);
-
-        this.widget.get_style_context().add_class('polari-user-list');
-
-        this._box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
-                                  spacing: 6 });
-        this.widget.add(this._box);
+        this.connect('closed', Lang.bind(this, function() {
+            let buffer = this._textView.buffer;
+            let start = buffer.get_start_iter();
+            let end = buffer.get_end_iter();
+            let text = buffer.get_text(start,end,false);
+            if (this._room && this._room.topic != text) {
+                this._room.set_topic(text);
+            }
+        }));
 
-        this._revealer = new Gtk.Revealer();
-        this._box.add(this._revealer);
-        this._box.show_all();
+        this._roomManager = new ChatroomManager.getDefault();
     },
 
-    _ensureRoomOptions: function() {
+    _evaluateRoomType: function() {
         if (this._userList)
             return;
 
-        let room = this._roomManager.getActiveRoom();
-        if (!room)
+        this._room = this._roomManager.getActiveRoom();
+
+        if (!this._room)
             return;
+
+        this._roomLabel.label = '<b>' + this._room.display_name + '</b>';
+        if (this._room.type == Tp.HandleType.ROOM) {
+            this._userIcon.icon_name = 'polari-symbolic';
+            this._groupOptionsBox.visible = true;
+            let topic = this._room.topic ? this._room.topic : '';
+            this._textView.buffer.set_text(topic, topic.length);
+        } else {
+            this._userIcon.icon_name = 'avatar-default-symbolic';
+            this._groupOptionsBox.visible = false;
+        }
     }
 });