Commit 2357406d authored by Florian Müllner's avatar Florian Müllner

entryArea: Use popover to change nick ...

... and restyle the entry area to blend in with the chat log. This results
in an overall less heavy layout, removes the focus-rect weirdness of linked
entries, and last but not least makes Lapo happy.

https://bugzilla.gnome.org/show_bug.cgi?id=760872
parent 9edeae9e
...@@ -28,12 +28,14 @@ ...@@ -28,12 +28,14 @@
border-width: 0; border-width: 0;
} }
.polari-input-area { .polari-paste-confirmation {
background-image: none; border: 0 solid @borders;
background-color: @polari_dark_bg_color; border-top-width: 1px;
border-color: @borders; }
border-style: solid;
border-width: 1px 0 0 0; .polari-nick-button {
padding-left: 8px;
padding-right: 8px;
} }
.polari-nick-entry { .polari-nick-entry {
......
...@@ -2,75 +2,150 @@ ...@@ -2,75 +2,150 @@
<!-- Generated with glade 3.19.0 --> <!-- Generated with glade 3.19.0 -->
<interface> <interface>
<requires lib="gtk+" version="3.16"/> <requires lib="gtk+" version="3.16"/>
<template class="Gjs_EntryArea" parent="GtkStack"> <object class="GtkPopover" id="nickPopover">
<property name="visible">True</property>
<property name="can_focus">False</property> <property name="can_focus">False</property>
<property name="valign">end</property> <property name="position">top</property>
<property name="margin">6</property>
<property name="transition_type">crossfade</property>
<child> <child>
<object class="GtkBox" id="box1"> <object class="GtkBox" id="box6">
<property name="visible">True</property> <property name="visible">True</property>
<property name="can_focus">False</property> <property name="can_focus">False</property>
<property name="margin">6</property>
<property name="orientation">vertical</property>
<property name="spacing">6</property>
<child>
<object class="GtkLabel" id="label1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="hexpand">True</property>
<property name="label" translatable="yes">Change nickname:</property>
</object>
</child>
<child> <child>
<object class="GtkEntry" id="nickEntry"> <object class="GtkEntry" id="nickEntry">
<property name="visible">True</property> <property name="visible">True</property>
<property name="can_focus">True</property> <property name="can_focus">True</property>
<style> <property name="activates_default">True</property>
<class name="polari-nick-entry"/>
</style>
</object> </object>
</child> </child>
<child> <child>
<object class="Gjs_ChatEntry" id="chatEntry"> <object class="GtkButton" id="changeButton">
<property name="label" translatable="yes">_Change</property>
<property name="visible">True</property> <property name="visible">True</property>
<property name="can_focus">True</property> <property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="can_default">True</property>
<property name="halign">end</property>
<property name="hexpand">True</property> <property name="hexpand">True</property>
<property name="use_underline">True</property>
<style>
<class name="suggested-action"/>
</style>
</object> </object>
</child> </child>
<style>
<class name="linked"/>
</style>
</object> </object>
<packing>
<property name="name">default</property>
</packing>
</child> </child>
</object>
<template class="Gjs_EntryArea" parent="GtkStack">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="valign">end</property>
<property name="transition_type">crossfade</property>
<style>
<class name="view"/>
</style>
<child> <child>
<object class="GtkBox" id="multiLineBox"> <object class="GtkBox" id="box1">
<property name="visible">True</property> <property name="visible">True</property>
<property name="can_focus">False</property> <property name="can_focus">False</property>
<property name="spacing">6</property> <property name="spacing">6</property>
<property name="margin">6</property>
<property name="margin-end">14</property>
<child> <child>
<object class="GtkLabel" id="multiLineLabel"> <object class="GtkMenuButton" id="nickButton">
<property name="visible">True</property> <property name="visible">True</property>
<property name="can_focus">False</property> <property name="can_focus">True</property>
<property name="halign">start</property> <property name="receives_default">True</property>
<property name="hexpand">True</property> <property name="focus_on_click">False</property>
<property name="ellipsize">end</property> <property name="popover">nickPopover</property>
<property name="xalign">0</property> <child>
<object class="GtkLabel" id="nickLabel">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="xalign">0</property>
</object>
</child>
<child internal-child="accessible">
<object class="AtkObject" id="menubutton1-atkobject">
<property name="AtkObject::accessible-name"
translatable="yes">Change nickname</property>
</object>
</child>
<style>
<class name="flat"/>
<class name="polari-nick-button"/>
</style>
</object> </object>
</child> </child>
<child> <child>
<object class="GtkButton" id="cancelButton"> <object class="Gjs_ChatEntry" id="chatEntry">
<property name="label" translatable="yes">_Cancel</property>
<property name="visible">True</property> <property name="visible">True</property>
<property name="can_focus">True</property> <property name="can_focus">True</property>
<property name="receives_default">True</property> <property name="hexpand">True</property>
<property name="use_underline">True</property>
</object> </object>
</child> </child>
</object>
<packing>
<property name="name">default</property>
</packing>
</child>
<child>
<object class="GtkFrame" id="frame1">
<property name="visible">True</property>
<property name="shadow_type">none</property>
<style>
<class name="background"/>
<class name="polari-paste-confirmation"/>
</style>
<child> <child>
<object class="GtkButton" id="pasteButton"> <object class="GtkBox" id="multiLineBox">
<property name="label" translatable="yes">_Paste</property>
<property name="visible">True</property> <property name="visible">True</property>
<property name="can_focus">True</property> <property name="can_focus">False</property>
<property name="receives_default">True</property> <property name="spacing">6</property>
<property name="action_name">app.paste-text</property> <property name="margin">6</property>
<property name="use_underline">True</property> <property name="margin-end">14</property>
<style> <child>
<class name="suggested-action"/> <object class="GtkLabel" id="multiLineLabel">
</style> <property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="hexpand">True</property>
<property name="ellipsize">end</property>
<property name="xalign">0</property>
</object>
</child>
<child>
<object class="GtkButton" id="cancelButton">
<property name="label" translatable="yes">_Cancel</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="use_underline">True</property>
</object>
</child>
<child>
<object class="GtkButton" id="pasteButton">
<property name="label" translatable="yes">_Paste</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="action_name">app.paste-text</property>
<property name="use_underline">True</property>
<style>
<class name="suggested-action"/>
</style>
</object>
</child>
</object> </object>
</child> </child>
</object> </object>
......
...@@ -28,7 +28,10 @@ const STATUS_NOISE_MAXIMUM = 4; ...@@ -28,7 +28,10 @@ const STATUS_NOISE_MAXIMUM = 4;
const NUM_INITIAL_LOG_EVENTS = 50; // number of log events to fetch on start const NUM_INITIAL_LOG_EVENTS = 50; // number of log events to fetch on start
const NUM_LOG_EVENTS = 10; // number of log events to fetch when requesting more const NUM_LOG_EVENTS = 10; // number of log events to fetch when requesting more
const MARGIN = 6; const MARGIN = 14;
const NICK_SPACING = 14; // space after nicks, matching the following elements
// of the nick button in the entry area:
// 8px padding + 6px spacing
const NICKTAG_PREFIX = 'nick'; const NICKTAG_PREFIX = 'nick';
...@@ -497,11 +500,13 @@ const ChatView = new Lang.Class({ ...@@ -497,11 +500,13 @@ const ChatView = new Lang.Class({
metrics.get_approximate_digit_width()); metrics.get_approximate_digit_width());
let pixelWidth = Pango.units_to_double(charWidth); let pixelWidth = Pango.units_to_double(charWidth);
let totalWidth = this._maxNickChars * pixelWidth + NICK_SPACING;
let tabs = Pango.TabArray.new(1, true); let tabs = Pango.TabArray.new(1, true);
tabs.set_tab(0, Pango.TabAlign.LEFT, this._maxNickChars * pixelWidth); tabs.set_tab(0, Pango.TabAlign.LEFT, totalWidth);
this._view.tabs = tabs; this._view.tabs = tabs;
this._view.indent = -this._maxNickChars * pixelWidth; this._view.indent = -totalWidth;
this._view.left_margin = MARGIN + this._maxNickChars * pixelWidth; this._view.left_margin = MARGIN + totalWidth;
}, },
_updateActive: function() { _updateActive: function() {
......
...@@ -53,7 +53,11 @@ const EntryArea = new Lang.Class({ ...@@ -53,7 +53,11 @@ const EntryArea = new Lang.Class({
Extends: Gtk.Stack, Extends: Gtk.Stack,
Template: 'resource:///org/gnome/Polari/entry-area.ui', Template: 'resource:///org/gnome/Polari/entry-area.ui',
InternalChildren: ['chatEntry', InternalChildren: ['chatEntry',
'nickButton',
'nickLabel',
'nickPopover',
'nickEntry', 'nickEntry',
'changeButton',
'multiLineBox', 'multiLineBox',
'multiLineLabel', 'multiLineLabel',
'cancelButton', 'cancelButton',
...@@ -76,27 +80,16 @@ const EntryArea = new Lang.Class({ ...@@ -76,27 +80,16 @@ const EntryArea = new Lang.Class({
Lang.bind(this, this._onKeyPressEvent)); Lang.bind(this, this._onKeyPressEvent));
})); }));
this._nickEntry.width_chars = ChatView.MAX_NICK_CHARS this._nickLabel.set_state_flags(Gtk.StateFlags.LINK, false);
this._nickEntry.connect('activate', Lang.bind(this, this._nickLabel.width_chars = ChatView.MAX_NICK_CHARS
this._changeButton.connect('clicked', Lang.bind(this,
function() { function() {
if (this._nickEntry.text) if (this._nickEntry.text)
this._setNick(this._nickEntry.text); this._setNick(this._nickEntry.text);
this._chatEntry.grab_focus(); this._nickButton.active = false;
}));
this._nickEntry.connect('focus-out-event', Lang.bind(this,
function() {
this._nickEntry.text = '';
return Gdk.EVENT_PROPAGATE;
}));
this._nickEntry.connect_after('key-press-event', Lang.bind(this,
function(w, event) {
let [, keyval] = event.get_keyval();
if (keyval == Gdk.KEY_Escape) {
this._chatEntry.grab_focus();
return Gdk.EVENT_STOP;
}
return Gdk.EVENT_PROPAGATE;
})); }));
this._nickPopover.set_default_widget(this._changeButton);
this._chatEntry.connect('text-pasted', Lang.bind(this, this._onTextPasted)); this._chatEntry.connect('text-pasted', Lang.bind(this, this._onTextPasted));
this._chatEntry.connect('changed', Lang.bind(this, this._onEntryChanged)); this._chatEntry.connect('changed', Lang.bind(this, this._onEntryChanged));
...@@ -235,8 +228,8 @@ const EntryArea = new Lang.Class({ ...@@ -235,8 +228,8 @@ const EntryArea = new Lang.Class({
_setNick: function(nick) { _setNick: function(nick) {
this._nickEntry.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS) this._nickLabel.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS);
this._nickEntry.placeholder_text = nick; this._nickLabel.label = nick;
let account = this._room.account; let account = this._room.account;
account.set_nickname_async(nick, Lang.bind(this, account.set_nickname_async(nick, Lang.bind(this,
...@@ -271,8 +264,11 @@ const EntryArea = new Lang.Class({ ...@@ -271,8 +264,11 @@ const EntryArea = new Lang.Class({
let nick = channel ? channel.connection.self_contact.alias let nick = channel ? channel.connection.self_contact.alias
: this._room ? this._room.account.nickname : ''; : this._room ? this._room.account.nickname : '';
this._nickEntry.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS) this._nickLabel.width_chars = Math.max(nick.length, ChatView.MAX_NICK_CHARS);
this._nickEntry.placeholder_text = nick; this._nickLabel.label = nick;
if (!this._nickEntry.is_focus)
this._nickEntry.text = nick;
}, },
_onDestroy: function() { _onDestroy: function() {
......
...@@ -133,22 +133,17 @@ const RoomView = new Lang.Class({ ...@@ -133,22 +133,17 @@ const RoomView = new Lang.Class({
this._view = room ? new ChatView.ChatView(room) this._view = room ? new ChatView.ChatView(room)
: new ChatPlaceholder(); : new ChatPlaceholder();
this._entryArea = new EntryArea.EntryArea({ room: room,
sensitive: false });
this.widget = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL }); this.widget = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
this.widget.add(this._view.widget); this.widget.add(this._view.widget);
this.inputWidget = new Gtk.Frame({ shadow_type: Gtk.ShadowType.NONE }); this.inputWidget = new EntryArea.EntryArea({ room: room,
this.inputWidget.get_style_context().add_class('polari-input-area'); sensitive: false });
this.widget.add(this.inputWidget); this.widget.add(this.inputWidget);
this.inputWidget.add(this._entryArea);
this.widget.show_all(); this.widget.show_all();
}, },
set inputSensitive(sensitive) { set inputSensitive(sensitive) {
this._entryArea.sensitive = sensitive; this.inputWidget.sensitive = sensitive;
} }
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment