brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

appDisplay: Add carousel arrows to app grid

Browse Source 
These only show during navigation (not DnD), along with the
previewed page.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>
This commit is contained in:
Carlos Garnacho 2021-02-13 19:54:14 +01:00 committed by Marge Bot
parent c15dce242e
commit ffe11e0560
5 changed files with 137 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/gnome-shell-theme.gresource.xml
View File

@ -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>

36
data/theme/carousel-arrow-back-24-symbolic.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

36
data/theme/carousel-arrow-next-24-symbolic.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

6
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -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;
}

57
js/ui/appDisplay.js
View File

@ -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();
},