[gnome-shell/wip/carlosg/appgrid-navigation: 3/3] 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: 3/3] appDisplay: Add carousel arrows to app grid
- Date: Fri, 19 Feb 2021 11:49:45 +0000 (UTC)
commit c461537751fb22e312e2aac7c43ee4cbe3482957
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 92adb70961..0300a3bd6d 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) {
@@ -199,12 +201,39 @@ var BaseAppView = GObject.registerClass({
this._emptyPageIndicator.add_style_class_name('dnd-placeholder');
this._emptyPageIndicator._delegate = this;
+ // 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,
@@ -403,6 +432,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() {
@@ -594,7 +635,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) {
@@ -1031,6 +1074,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));
}
@@ -1052,6 +1100,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();
},
@@ -1070,6 +1119,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));
}
@@ -1090,6 +1144,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]
