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); } });