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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 652c6f2231a242de6b16de59084ac21cfe538fc8
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.
    
    Draw dots via Cairo, introduce css properties for controlling dot size and
    color in active and inactive state, interpolate between states depending on
    the position.
    
    Make inactive dots smaller, filled and slightly transparent, as opposed to
    larger and fully opaque active dot. Make dots smaller overall, remove
    borders.
    
    Make it impossible to "uncheck" the active dot.
    
    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 | 28 +++++++++++++--------
 js/ui/appDisplay.js                      |  9 ++++---
 js/ui/keyboard.js                        | 13 +++++++++-
 js/ui/pageIndicators.js                  | 42 ++++++++++++++++++++++++++------
 4 files changed, 69 insertions(+), 23 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index b600830115..49bd3c0b20 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1549,20 +1549,24 @@ 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;
+      -page-indicator-inactive-radius: 4px;
+      -page-indicator-active-radius: 6px;
+      -page-indicator-inactive-color: rgba(255, 255, 255, 0.5);
+      -page-indicator-active-color: white;
+    }
+
+    &:hover .page-indicator-icon {
+      -page-indicator-inactive-color: white;
     }
 
-    &: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;}
+    &:active .page-indicator-icon {
+      -page-indicator-inactive-radius: 3px;
+    }
   }
 
   .no-frequent-applications-label { @extend %status_text; }
@@ -1762,8 +1766,12 @@ StScrollBar {
         padding: 4px 4px;
 
         .page-indicator-icon {
-            width: 6px;
-            height: 6px
+            width: 8px;
+            height: 8px;
+            -page-indicator-inactive-radius: 3px;
+            -page-indicator-active-radius: 4px;
+            -page-indicator-inactive-color: rgba(255, 255, 255, 0.5);
+            -page-indicator-active-color: white;
         }
     }
 }
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..e8dc4885b1 100644
--- a/js/ui/pageIndicators.js
+++ b/js/ui/pageIndicators.js
@@ -2,6 +2,7 @@
 /* exported PageIndicators, AnimatedPageIndicators */
 
 const { Clutter, GLib, GObject, Meta, St } = imports.gi;
+const Cairo = imports.cairo;
 
 const { ANIMATION_TIME_OUT, ANIMATION_MAX_DELAY_OUT_FOR_ITEM, AnimationDirection } = imports.ui.iconGrid;
 
@@ -32,7 +33,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,10 +67,11 @@ 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.DrawingArea({ style_class: 'page-indicator-icon' });
+                indicator.child.connect('repaint', () => {
+                    this.drawIndicatorIcon(indicator.child, pageIndex);
+                });
                 indicator.connect('clicked', () => {
                     this.emit('page-activated', pageIndex);
                 });
@@ -84,12 +86,36 @@ var PageIndicators = GObject.registerClass({
         this.visible = this._nPages > 1;
     }
 
-    setCurrentPage(currentPage) {
-        this._currentPage = currentPage;
+    drawIndicatorIcon(widget, index) {
+        let node = widget.get_theme_node();
+
+        let inactiveRadius = node.get_length('-page-indicator-inactive-radius');
+        let activeRadius = node.get_length('-page-indicator-active-radius');
+
+        let activeColor = node.get_color('-page-indicator-active-color');
+        let inactiveColor = node.get_color('-page-indicator-inactive-color');
+
+        let progress = Math.max(1 - Math.abs(this._currentPosition - index), 0);
+        let radius = inactiveRadius + (activeRadius - inactiveRadius) * progress;
+        let color = inactiveColor.interpolate(activeColor, progress);
+
+        let cr = widget.get_context();
+        cr.setOperator(Cairo.Operator.SOURCE);
+
+        cr.arc(widget.width / 2, widget.height / 2, radius, 0, Math.PI * 2);
+
+        Clutter.cairo_set_source_color(cr, color);
+        cr.fill();
+
+        cr.$dispose();
+    }
+
+    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);
+            children[i].child.queue_repaint();
     }
 });