From 109f39afa592aeaa757b805ce6452f98a11de5bd Mon Sep 17 00:00:00 2001 From: Alexander Mikhaylenko Date: Fri, 22 Nov 2019 03:24:46 +0500 Subject: [PATCH] pageIndicators: Redesign and add position-based animation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove setCurrentPage() function, introduce setCurrentPosition() instead, which allows to have fractional positions. Make inactive dots smaller, filled and partially transparent, as opposed to larger and fully opaque active dot. Make dots smaller overall, remove borders. Interpolate each dot between active and inactive state based on scroll position. Make it impossible to "uncheck" the active dot. Thanks Florian Müllner for parts of the code. Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/1932 https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/843 --- data/theme/gnome-shell-sass/_common.scss | 16 +++----- js/ui/appDisplay.js | 9 +++-- js/ui/keyboard.js | 13 ++++++- js/ui/pageIndicators.js | 47 +++++++++++++++++++----- 4 files changed, 60 insertions(+), 25 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index b60083011..ea20b1e64 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -1549,20 +1549,14 @@ StScrollBar { } .page-indicator { - padding: 15px 20px; + padding: 7px 16px; .page-indicator-icon { width: 12px; height: 12px; - background-color: transparent; - border: 2px solid rgba(255, 255, 255, 0.4); - border-radius: 12px; + background-color: white; + border-radius: 6px; } - - &:hover .page-indicator-icon { border-color: white; } - &:active .page-indicator-icon { border: none; margin: 2px; background-color: white; } - &:checked .page-indicator-icon, - &:checked:active .page-indicator-icon { background-color: white;} } .no-frequent-applications-label { @extend %status_text; } @@ -1762,8 +1756,8 @@ StScrollBar { padding: 4px 4px; .page-indicator-icon { - width: 6px; - height: 6px + width: 8px; + height: 8px; } } } diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 929caa12b..f78a2c03d 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -315,6 +315,9 @@ var AllView = GObject.registerClass({ this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.EXTERNAL); this._adjustment = this._scrollView.vscroll.adjustment; + this._adjustment.connect('notify::value', adj => { + this._pageIndicators.setCurrentPosition(adj.value / adj.page_size); + }); this._pageIndicators = new PageIndicators.AnimatedPageIndicators(); this._pageIndicators.connect('page-activated', @@ -561,7 +564,7 @@ var AllView = GObject.registerClass({ if (!this.mapped) { this._adjustment.value = this._grid.getPageY(pageNumber); - this._pageIndicators.setCurrentPage(pageNumber); + this._pageIndicators.setCurrentPosition(pageNumber); this._grid.currentPage = pageNumber; return; } @@ -597,8 +600,6 @@ var AllView = GObject.registerClass({ mode: Clutter.AnimationMode.EASE_OUT_QUAD, duration: time, }); - - this._pageIndicators.setCurrentPage(pageNumber); } _diffToPage(pageNumber) { @@ -754,7 +755,7 @@ var AllView = GObject.registerClass({ this._adjustment.value = 0; this._grid.currentPage = 0; this._pageIndicators.setNPages(this._grid.nPages()); - this._pageIndicators.setCurrentPage(0); + this._pageIndicators.setCurrentPosition(0); return GLib.SOURCE_REMOVE; }); } diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js index c6984cc36..4d153bbf2 100644 --- a/js/ui/keyboard.js +++ b/js/ui/keyboard.js @@ -920,9 +920,14 @@ var EmojiSelection = GObject.registerClass({ this.add_child(this._pageIndicator); this._pageIndicator.setReactive(false); + this._emojiPager.connect('notify::delta', () => { + this._updateIndicatorPosition(); + }); + let bottomRow = this._createBottomRow(); this.add_child(bottomRow); + this._curPage = 0; this._emojiPager.setCurrentPage(0); } @@ -937,8 +942,9 @@ var EmojiSelection = GObject.registerClass({ } _onPageChanged(sectionLabel, page, nPages) { + this._curPage = page; this._pageIndicator.setNPages(nPages); - this._pageIndicator.setCurrentPage(page); + this._updateIndicatorPosition(); for (let i = 0; i < this._sections.length; i++) { let sect = this._sections[i]; @@ -946,6 +952,11 @@ var EmojiSelection = GObject.registerClass({ } } + _updateIndicatorPosition() { + this._pageIndicator.setCurrentPosition(this._curPage - + this._emojiPager.delta / this._emojiPager.width); + } + _findSection(emoji) { for (let i = 0; i < this._sections.length; i++) { if (this._sections[i].first == emoji) diff --git a/js/ui/pageIndicators.js b/js/ui/pageIndicators.js index 825aafcf7..09186ed2c 100644 --- a/js/ui/pageIndicators.js +++ b/js/ui/pageIndicators.js @@ -1,10 +1,15 @@ // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- /* exported PageIndicators, AnimatedPageIndicators */ -const { Clutter, GLib, GObject, Meta, St } = imports.gi; +const { Clutter, GLib, Graphene, GObject, Meta, St } = imports.gi; const { ANIMATION_TIME_OUT, ANIMATION_MAX_DELAY_OUT_FOR_ITEM, AnimationDirection } = imports.ui.iconGrid; +const INDICATOR_INACTIVE_OPACITY = 128; +const INDICATOR_INACTIVE_OPACITY_HOVER = 255; +const INDICATOR_INACTIVE_SCALE = 2 / 3; +const INDICATOR_INACTIVE_SCALE_PRESSED = 0.5; + var INDICATORS_BASE_TIME = 250; var INDICATORS_BASE_TIME_OUT = 125; var INDICATORS_ANIMATION_DELAY = 125; @@ -32,7 +37,7 @@ var PageIndicators = GObject.registerClass({ clip_to_allocation: true, }); this._nPages = 0; - this._currentPage = undefined; + this._currentPosition = 0; this._reactive = true; this._reactive = true; } @@ -66,13 +71,21 @@ var PageIndicators = GObject.registerClass({ button_mask: St.ButtonMask.ONE | St.ButtonMask.TWO | St.ButtonMask.THREE, - toggle_mode: true, - reactive: this._reactive, - checked: pageIndex == this._currentPage }); - indicator.child = new St.Widget({ style_class: 'page-indicator-icon' }); + reactive: this._reactive }); + indicator.child = new St.Widget({ + style_class: 'page-indicator-icon', + pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }), + }); indicator.connect('clicked', () => { this.emit('page-activated', pageIndex); }); + indicator.connect('notify::hover', () => { + this._updateIndicator(indicator, pageIndex); + }); + indicator.connect('notify::pressed', () => { + this._updateIndicator(indicator, pageIndex); + }); + this._updateIndicator(indicator, pageIndex); this.add_actor(indicator); } } else { @@ -84,12 +97,28 @@ var PageIndicators = GObject.registerClass({ this.visible = this._nPages > 1; } - setCurrentPage(currentPage) { - this._currentPage = currentPage; + _updateIndicator(indicator, pageIndex) { + let progress = + Math.max(1 - Math.abs(this._currentPosition - pageIndex), 0); + + let inactiveScale = indicator.pressed + ? INDICATOR_INACTIVE_SCALE_PRESSED : INDICATOR_INACTIVE_SCALE; + let inactiveOpacity = indicator.hover + ? INDICATOR_INACTIVE_OPACITY_HOVER : INDICATOR_INACTIVE_OPACITY; + + let scale = inactiveScale + (1 - inactiveScale) * progress; + let opacity = inactiveOpacity + (255 - inactiveOpacity) * progress; + + indicator.child.set_scale(scale, scale); + indicator.child.opacity = opacity; + } + + setCurrentPosition(currentPosition) { + this._currentPosition = currentPosition; let children = this.get_children(); for (let i = 0; i < children.length; i++) - children[i].set_checked(i == this._currentPage); + this._updateIndicator(children[i], i); } });