brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

keyboard: Change page switching animation in emoji picker

Browse Source 
Use a carousel animation to switch pages, and set up the emoji
picker to have the system text direction so that coordinate
flipping is mostly done for us in RTL.

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5616
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2278>
This commit is contained in:
Carlos Garnacho 2022-06-29 20:26:27 +02:00 committed by Florian Müllner
parent c6c6eb5310
commit 9bd91ca4d8
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
js/ui/keyboard.js
View File

@ -19,6 +19,7 @@ var KEY_LONG_PRESS_TIME = 250;
const A11Y_APPLICATIONS_SCHEMA = 'org.gnome.desktop.a11y.applications'; const A11Y_APPLICATIONS_SCHEMA = 'org.gnome.desktop.a11y.applications';
const SHOW_KEYBOARD = 'screen-keyboard-enabled'; const SHOW_KEYBOARD = 'screen-keyboard-enabled';
const EMOJI_PAGE_SEPARATION = 32;
/* KeyContainer puts keys in a grid where a 1:1 key takes this size */ /* KeyContainer puts keys in a grid where a 1:1 key takes this size */
const KEY_SIZE = 2; const KEY_SIZE = 2;
@ -691,18 +692,12 @@ var EmojiPager = GObject.registerClass({
} }
set delta(value) { set delta(value) {
if (value > this._width)
value = this._width;
else if (value < -this._width)
value = -this._width;
if (this._delta == value) if (this._delta == value)
return; return;
this._delta = value; this._delta = value;
this.notify('delta'); this.notify('delta');
let relValue = Math.abs(value / this._width);
let followingPage = this.getFollowingPage(); let followingPage = this.getFollowingPage();
if (this._followingPage != followingPage) { if (this._followingPage != followingPage) {
@ -713,21 +708,23 @@ var EmojiPager = GObject.registerClass({
if (followingPage != null) { if (followingPage != null) {
this._followingPanel = this._generatePanel(followingPage); this._followingPanel = this._generatePanel(followingPage);
this._followingPanel.set_pivot_point(0.5, 0.5);
this.add_child(this._followingPanel); this.add_child(this._followingPanel);
this.set_child_below_sibling(this._followingPanel, this._panel);
} }
this._followingPage = followingPage; this._followingPage = followingPage;
} }
this._panel.translation_x = value; const multiplier = this.text_direction === Clutter.TextDirection.RTL
this._panel.opacity = 255 * (1 - Math.pow(relValue, 3)); ? -1 : 1;
this._panel.translation_x = value * multiplier;
if (this._followingPanel) { if (this._followingPanel) {
this._followingPanel.scale_x = 0.8 + (0.2 * relValue); const translation = value < 0
this._followingPanel.scale_y = 0.8 + (0.2 * relValue); ? this._width + EMOJI_PAGE_SEPARATION
this._followingPanel.opacity = 255 * relValue; : -this._width - EMOJI_PAGE_SEPARATION;
this._followingPanel.translation_x =
(value * multiplier) + (translation * multiplier);
} }
} }
@ -743,8 +740,7 @@ var EmojiPager = GObject.registerClass({
if (this.delta == 0) if (this.delta == 0)
return null; return null;
if ((this.delta < 0 && global.stage.text_direction == Clutter.TextDirection.LTR) || if (this.delta < 0)
(this.delta > 0 && global.stage.text_direction == Clutter.TextDirection.RTL))
return this._nextPage(this._curPage); return this._nextPage(this._curPage);
else else
return this._prevPage(this._curPage); return this._prevPage(this._curPage);
@ -772,7 +768,9 @@ var EmojiPager = GObject.registerClass({
if (endProgress === 0) { if (endProgress === 0) {
this.ease_property('delta', 0, {duration}); this.ease_property('delta', 0, {duration});
} else { } else {
const value = endProgress < 0 ? this._width : -this._width; const value = endProgress < 0
? this._width + EMOJI_PAGE_SEPARATION
: -this._width - EMOJI_PAGE_SEPARATION;
this.ease_property('delta', value, { this.ease_property('delta', value, {
duration, duration,
onComplete: () => { onComplete: () => {
@ -935,6 +933,7 @@ var EmojiSelection = GObject.registerClass({
style_class: 'emoji-panel', style_class: 'emoji-panel',
x_expand: true, x_expand: true,
y_expand: true, y_expand: true,
text_direction: global.stage.text_direction,
}); });
this._sections = [ this._sections = [