[gnome-shell/wip/exalm/dots] pageIndicators: Redesign and add position-based animation

[Alexander Mikhaylenko <alexm src gnome org>]

commit e688f28d2341a2c3141afb24e85be54c45ef741a
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Fri Nov 22 03:24:46 2019 +0500

    pageIndicators: Redesign and add position-based animation
    
    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 b600830115..ea20b1e644 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 929caa12bd..f78a2c03d1 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 c6984cc36d..4d153bbf27 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 825aafcf74..4e01a174f8 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;
 
+var INDICATOR_INACTIVE_OPACITY = 0.5;
+var INDICATOR_INACTIVE_OPACITY_HOVER = 1;
+var INDICATOR_INACTIVE_SCALE = 2 / 3;
+var 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 inactive_scale = indicator.pressed
+            ? INDICATOR_INACTIVE_SCALE_PRESSED : INDICATOR_INACTIVE_SCALE;
+        let inactive_opacity = indicator.hover
+            ? INDICATOR_INACTIVE_OPACITY_HOVER : INDICATOR_INACTIVE_OPACITY;
+
+        let scale = inactive_scale + (1 - inactive_scale) * progress;
+        let opacity = inactive_opacity + (1 - inactive_opacity) * progress;
+
+        indicator.child.set_scale(scale, scale);
+        indicator.child.opacity = opacity * 255;
+    }
+
+    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);
     }
 });