From ffe11e056095479a277bcd5442b113a09c942c6e Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Sat, 13 Feb 2021 19:54:14 +0100 Subject: [PATCH] appDisplay: Add carousel arrows to app grid These only show during navigation (not DnD), along with the previewed page. Part-of: --- data/gnome-shell-theme.gresource.xml | 2 + .../theme/carousel-arrow-back-24-symbolic.svg | 36 ++++++++++++ .../theme/carousel-arrow-next-24-symbolic.svg | 36 ++++++++++++ .../gnome-shell-sass/widgets/_app-grid.scss | 6 ++ js/ui/appDisplay.js | 57 +++++++++++++++++++ 5 files changed, 137 insertions(+) create mode 100644 data/theme/carousel-arrow-back-24-symbolic.svg create mode 100644 data/theme/carousel-arrow-next-24-symbolic.svg diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 038c87cf0..4eb185c53 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -2,6 +2,8 @@ calendar-today.svg + carousel-arrow-next-24-symbolic.svg + carousel-arrow-back-24-symbolic.svg checkbox-focused.svg checkbox-off-focused.svg checkbox-off.svg 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 000000000..984893092 --- /dev/null +++ b/data/theme/carousel-arrow-back-24-symbolic.svg @@ -0,0 +1,36 @@ + + + + + + + image/svg+xml + + + + + + + + + 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 000000000..7d6356f23 --- /dev/null +++ b/data/theme/carousel-arrow-next-24-symbolic.svg @@ -0,0 +1,36 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index f19c126b7..f58dad06a 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -156,3 +156,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 8195427ad..b0cc5d0d8 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -211,6 +211,31 @@ var BaseAppView = GObject.registerClass({ y_align: Clutter.ActorAlign.FILL, }); + // Next/prev page arrows + const rtl = this.get_text_direction() === Clutter.TextDirection.RTL; + this._nextPageArrow = new St.Icon({ + style_class: 'page-navigation-arrow', + 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._prevPageArrow = new St.Icon({ + style_class: 'page-navigation-arrow', + 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, + }); + const scrollContainer = new St.Widget({ layout_manager: new Clutter.BinLayout(), clip_to_allocation: true, @@ -219,6 +244,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, @@ -990,6 +1017,7 @@ var BaseAppView = GObject.registerClass({ _syncPageHints(pageNumber, animate = true) { const showingNextPage = this._pagesShown & SidePages.NEXT; const showingPrevPage = this._pagesShown & SidePages.PREVIOUS; + const dnd = this._pagesShown & SidePages.DND; const duration = animate ? PAGE_INDICATOR_FADE_TIME : 0; if (showingPrevPage) { @@ -999,6 +1027,14 @@ var BaseAppView = GObject.registerClass({ opacity, duration, }); + + if (!dnd) { + this._prevPageArrow.visible = true; + this._prevPageArrow.ease({ + opacity, + duration, + }); + } } if (showingNextPage) { @@ -1008,6 +1044,14 @@ var BaseAppView = GObject.registerClass({ opacity, duration, }); + + if (!dnd) { + this._nextPageArrow.visible = true; + this._nextPageArrow.ease({ + opacity, + duration, + }); + } } } @@ -1076,6 +1120,17 @@ var BaseAppView = GObject.registerClass({ if (hasFollowingPage) { const items = this._grid.getItemsAtPage(nextPage); items.forEach(item => (item.translation_x = translationX)); + + if (!(state & SidePages.DND)) { + const pageArrow = page > 0 + ? this._nextPageArrow + : this._prevPageArrow; + pageArrow.set({ + visible: true, + opacity: adjustment.value * 255, + translationX, + }); + } } if (hasFollowingPage || (page > 0 && @@ -1141,6 +1196,7 @@ var BaseAppView = GObject.registerClass({ onComplete: () => { this._teardownPagePreview(1); this._syncClip(); + this._nextPageArrow.visible = false; this._nextPageIndicator.visible = false; this._updateFadeForNavigation(); }, @@ -1163,6 +1219,7 @@ var BaseAppView = GObject.registerClass({ onComplete: () => { this._teardownPagePreview(-1); this._syncClip(); + this._prevPageArrow.visible = false; this._prevPageIndicator.visible = false; this._updateFadeForNavigation(); },