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

From: Carlos Garnacho <carlosg src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/carlosg/appgrid-navigation: 11/14] appDisplay: Add carousel arrows to app grid
Date: Thu, 25 Feb 2021 17:39:36 +0000 (UTC)

commit 4dfa09ba5dcc6cd2841b0466bdf0075c04807575
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 |  6 +++
 js/ui/appDisplay.js                                | 46 ++++++++++++++++++++++
 5 files changed, 126 insertions(+)
---
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 5886c9f8ce..70969bba66 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -157,3 +157,9 @@ $app_grid_fg_color: #fff;
     &:rtl { border-radius: 15px 0px 0px 15px; }
   }
 }
+
+.page-navigation-arrow {
+  margin: 6px;
+  width: 24px;
+  height: 24px;
+}
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c878cb478b..a3223ab1ee 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -212,6 +212,31 @@ var BaseAppView = GObject.registerClass({
         this._prevPageIndicator.add_style_class_name('page-navigation-hint');
         this._prevPageIndicator.add_style_class_name('previous');
 
+        // Next/prev page arrows
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
+        this._nextPageArrow = 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._nextPageArrow.add_style_class_name('page-navigation-arrow');
+        this._prevPageArrow = 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._prevPageArrow.add_style_class_name('page-navigation-arrow');
+
         const scrollContainer = new St.Widget({
             layout_manager: new Clutter.BinLayout(),
             clip_to_allocation: true,
@@ -220,6 +245,8 @@ var BaseAppView = GObject.registerClass({
         scrollContainer.add_child(this._prevPageIndicator);
         scrollContainer.add_child(this._nextPageIndicator);
         scrollContainer.add_child(this._scrollView);
+        scrollContainer.add_child(this._nextPageArrow);
+        scrollContainer.add_child(this._prevPageArrow);
 
         this._box = new St.BoxLayout({
             vertical: true,
@@ -1000,6 +1027,10 @@ var BaseAppView = GObject.registerClass({
                 duration: PAGE_INDICATOR_FADE_TIME,
                 opacity: pageNumber === 0 ? 0 : 255,
             });
+            this._prevPageArrow.ease({
+                duration: PAGE_INDICATOR_FADE_TIME,
+                opacity: pageNumber === 0 ? 0 : 255,
+            });
         }
 
         if (animate && (this._pagesShown & SidePages.NEXT) !== 0) {
@@ -1007,6 +1038,10 @@ var BaseAppView = GObject.registerClass({
                 duration: PAGE_INDICATOR_FADE_TIME,
                 opacity: pageNumber === this._grid.nPages - 1 ? 0 : 255,
             });
+            this._nextPageArrow.ease({
+                duration: PAGE_INDICATOR_FADE_TIME,
+                opacity: pageNumber === this._grid.nPages - 1 ? 0 : 255,
+            });
         }
 
         this._grid.goToPage(pageNumber, animate);
@@ -1063,6 +1098,15 @@ var BaseAppView = GObject.registerClass({
             if (hasFollowingPage) {
                 const items = this._grid.layout_manager.getItemsAtPage(nextPage);
                 items.forEach(item => (item.translation_x = translationX));
+
+                if ((state & SidePages.DND) === 0) {
+                    const pageArrow = page > 0
+                        ? this._nextPageArrow
+                        : this._prevPageArrow;
+                    pageArrow.translation_x = translationX;
+                    pageArrow.opacity = adjustment.value * 255;
+                    pageArrow.visible = true;
+                }
             }
             if (hasFollowingPage ||
                 (page > 0 &&
@@ -1131,6 +1175,7 @@ var BaseAppView = GObject.registerClass({
                     onComplete: () => {
                         this._teardownPagePreview(1);
                         this._syncClip();
+                        this._nextPageArrow.visible = false;
                         this._nextPageIndicator.visible = false;
                         this._updateFadeForNavigation();
                     },
@@ -1157,6 +1202,7 @@ var BaseAppView = GObject.registerClass({
                     onComplete: () => {
                         this._teardownPagePreview(-1);
                         this._syncClip();
+                        this._prevPageArrow.visible = false;
                         this._prevPageIndicator.visible = false;
                         this._updateFadeForNavigation();
                     },
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]