[gnome-shell/wip/carlosg/appgrid-navigation: 64/64] appDisplay: Add carousel arrows to app grid




commit 33b112b66128c10b8006af29f24f946910a466ff
Author: Carlos Garnacho <carlosg gnome org>
Date:   Sat Feb 13 19:54:14 2021 +0100

    appDisplay: Add carousel arrows to app grid
    
    These only show during navigation (not DnD), along with the
    previewed page.

 data/gnome-shell-theme.gresource.xml               |  2 +
 data/theme/carousel-arrow-back-24-symbolic.svg     | 36 ++++++++++++++
 data/theme/carousel-arrow-next-24-symbolic.svg     | 36 ++++++++++++++
 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  7 +++
 js/ui/appDisplay.js                                | 57 +++++++++++++++++++++-
 5 files changed, 137 insertions(+), 1 deletion(-)
---
diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 038c87cf07..4eb185c537 100644
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -2,6 +2,8 @@
 <gresources>
   <gresource prefix="/org/gnome/shell/theme">
     <file>calendar-today.svg</file>
+    <file 
alias="icons/scalable/status/carousel-arrow-next-24-symbolic.svg">carousel-arrow-next-24-symbolic.svg</file>
+    <file 
alias="icons/scalable/status/carousel-arrow-back-24-symbolic.svg">carousel-arrow-back-24-symbolic.svg</file>
     <file>checkbox-focused.svg</file>
     <file>checkbox-off-focused.svg</file>
     <file>checkbox-off.svg</file>
diff --git a/data/theme/carousel-arrow-back-24-symbolic.svg b/data/theme/carousel-arrow-back-24-symbolic.svg
new file mode 100644
index 0000000000..9848930922
--- /dev/null
+++ b/data/theme/carousel-arrow-back-24-symbolic.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   width="24"
+   height="24"
+   viewBox="0 0 24 24.000001"
+   version="1.1"
+   id="svg19258">
+  <defs
+     id="defs19252" />
+  <metadata
+     id="metadata19255">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g834"
+     transform="rotate(-90,-246.75894,471.75774)"
+     style="fill:#241f31">
+    <path
+       
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#241f31;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;
 
stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 213.0007,724.40348 -10.3711,7.3945 v 0 a 1.5,1.5 0 0 0 -0.6308,1.2187 v 1.5 h 1.5 a 1.5,1.5 0 0 
0 0.8711,-0.2793 l 8.6289,-6.1523 8.6289,6.1523 a 1.5,1.5 0 0 0 0.8711,0.2793 h 1.5 v -1.5 a 1.5,1.5 0 0 0 
-0.6309,-1.2187 v 0 z"
+       id="path832" />
+  </g>
+</svg>
diff --git a/data/theme/carousel-arrow-next-24-symbolic.svg b/data/theme/carousel-arrow-next-24-symbolic.svg
new file mode 100644
index 0000000000..7d6356f239
--- /dev/null
+++ b/data/theme/carousel-arrow-next-24-symbolic.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   width="24"
+   height="24"
+   viewBox="0 0 24 24.000001"
+   version="1.1"
+   id="svg19258">
+  <defs
+     id="defs19252" />
+  <metadata
+     id="metadata19255">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g872"
+     transform="matrix(0,-1,-1,0,742.51668,224.9988)"
+     style="fill:#241f31">
+    <path
+       
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#241f31;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;
 
stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 213.0007,724.40348 -10.3711,7.3945 v 0 a 1.5,1.5 0 0 0 -0.6308,1.2187 v 1.5 h 1.5 a 1.5,1.5 0 0 
0 0.8711,-0.2793 l 8.6289,-6.1523 8.6289,6.1523 a 1.5,1.5 0 0 0 0.8711,0.2793 h 1.5 v -1.5 a 1.5,1.5 0 0 0 
-0.6309,-1.2187 v 0 z"
+       id="path870" />
+  </g>
+</svg>
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 0cf8f70395..7a2c3aefb9 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -147,3 +147,10 @@ $app_grid_fg_color: #fff;
   &:ltr { border-radius: 15px 0px 0px 15px; }
   &:rtl { border-radius: 0px 15px 15px 0px; }
 }
+
+.next-page-indicator,
+.prev-page-indicator {
+  margin: 72px;
+  width: 24px;
+  height: 24px;
+}
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 5bbacfbe1a..f7f5f9f4d2 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -40,6 +40,7 @@ const FOLDER_DIALOG_ANIMATION_TIME = 200;
 
 const PAGE_PREVIEW_ANIMATION_TIME = 150;
 const PAGE_PREVIEW_FADE_EFFECT_OFFSET = 160;
+const PAGE_INDICATOR_FADE_TIME = 200;
 
 const OVERSHOOT_THRESHOLD = 20;
 const OVERSHOOT_TIMEOUT = 1000;
@@ -56,6 +57,7 @@ var SidePages = {
     PREVIOUS: 1 << 0,
     NEXT: 1 << 1,
     EMPTY_PLACEHOLDER: 1 << 2,
+    DND: 1 << 3,
 };
 
 function _getCategories(info) {
@@ -198,12 +200,39 @@ var BaseAppView = GObject.registerClass({
         });
         this._emptyPageIndicator.add_style_class_name('dnd-placeholder');
 
+        // Next/prev page arrows
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
+        this._nextPageIndicator = new St.Icon({
+            icon_name: rtl
+                ? 'carousel-arrow-back-24-symbolic'
+                : 'carousel-arrow-next-24-symbolic',
+            opacity: 0,
+            reactive: false,
+            visible: false,
+            x_expand: true,
+            x_align: Clutter.ActorAlign.END,
+        });
+        this._nextPageIndicator.add_style_class_name('next-page-indicator');
+        this._prevPageIndicator = new St.Icon({
+            icon_name: rtl
+                ? 'carousel-arrow-next-24-symbolic'
+                : 'carousel-arrow-back-24-symbolic',
+            opacity: 0,
+            reactive: false,
+            visible: false,
+            x_expand: true,
+            x_align: Clutter.ActorAlign.START,
+        });
+        this._prevPageIndicator.add_style_class_name('prev-page-indicator');
+
         let scrollContainer = new St.Widget({
             layout_manager: new Clutter.BinLayout(),
             clip_to_allocation: true,
         });
         scrollContainer.add_child(this._scrollView);
         scrollContainer.add_child(this._emptyPageIndicator);
+        scrollContainer.add_child(this._nextPageIndicator);
+        scrollContainer.add_child(this._prevPageIndicator);
 
         this._box = new St.BoxLayout({
             vertical: true,
@@ -402,6 +431,18 @@ var BaseAppView = GObject.registerClass({
             this._grid.currentPage++;
         else if (page === SidePages.PREVIOUS && this._grid.currentPage > 0)
             this._grid.currentPage--;
+
+        if (this._grid.currentPage === 0) {
+            this._prevPageIndicator.ease({
+                duration: PAGE_INDICATOR_FADE_TIME,
+                opacity: 0,
+            });
+        } else if (this._grid.currentPage === this._grid.nPages - 1) {
+            this._nextPageIndicator.ease({
+                duration: PAGE_INDICATOR_FADE_TIME,
+                opacity: 0,
+            });
+        }
     }
 
     _onLeave() {
@@ -593,7 +634,9 @@ var BaseAppView = GObject.registerClass({
             dragMotion: this._onDragMotion.bind(this),
         };
         DND.addDragMonitor(this._dragMonitor);
-        this._slideSidePages(SidePages.PREVIOUS | SidePages.NEXT | SidePages.EMPTY_PLACEHOLDER);
+        this._slideSidePages(
+            SidePages.PREVIOUS | SidePages.NEXT |
+            SidePages.EMPTY_PLACEHOLDER | SidePages.DND);
     }
 
     _onDragMotion(dragEvent) {
@@ -1028,6 +1071,11 @@ var BaseAppView = GObject.registerClass({
                         this._emptyPageIndicator.translation_x = translationX;
                         this._emptyPageIndicator.opacity = this._nextPageAdjustment.value * 255;
                     } else if (this._grid.currentPage < this._grid.nPages - 1) {
+                        if ((pages & SidePages.DND) === 0) {
+                            this._nextPageIndicator.translation_x = translationX;
+                            this._nextPageIndicator.opacity = this._nextPageAdjustment.value * 255;
+                            this._nextPageIndicator.visible = true;
+                        }
                         const items = this._grid.layout_manager.getItemsAtPage(this._grid.currentPage + 1);
                         items.forEach(item => (item.translation_x = translationX));
                     }
@@ -1049,6 +1097,7 @@ var BaseAppView = GObject.registerClass({
                     this._nextPageAdjustment.disconnect(this._nextPageAdjustmentId);
                     delete this._nextPageAdjustment;
                     this._emptyPageIndicator.visible = false;
+                    this._nextPageIndicator.visible = false;
                     this._syncClip();
                     this._updateFadeForNavigation();
                 },
@@ -1067,6 +1116,11 @@ var BaseAppView = GObject.registerClass({
                     let translationX = (1 - this._prevPageAdjustment.value) * -100;
                     translationX = rtl ? -translationX : translationX;
                     if (this._grid.currentPage > 0) {
+                        if ((pages & SidePages.DND) === 0) {
+                            this._prevPageIndicator.translation_x = translationX;
+                            this._prevPageIndicator.opacity = this._prevPageAdjustment.value * 255;
+                            this._prevPageIndicator.visible = true;
+                        }
                         const items = this._grid.layout_manager.getItemsAtPage(this._grid.currentPage - 1);
                         items.forEach(item => (item.translation_x = translationX));
                     }
@@ -1087,6 +1141,7 @@ var BaseAppView = GObject.registerClass({
                     this._prevPageAdjustment.value = 1;
                     this._prevPageAdjustment.disconnect(this._prevPageAdjustmentId);
                     delete this._prevPageAdjustment;
+                    this._prevPageIndicator.visible = false;
                     this._syncClip();
                     this._updateFadeForNavigation();
                 },


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]