appDisplay: Add carousel arrows to app grid
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:
parent
c15dce242e
commit
ffe11e0560
data
gnome-shell-theme.gresource.xml
theme
js/ui
@ -2,6 +2,8 @@
|
|||||||
<gresources>
|
<gresources>
|
||||||
<gresource prefix="/org/gnome/shell/theme">
|
<gresource prefix="/org/gnome/shell/theme">
|
||||||
<file>calendar-today.svg</file>
|
<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-focused.svg</file>
|
||||||
<file>checkbox-off-focused.svg</file>
|
<file>checkbox-off-focused.svg</file>
|
||||||
<file>checkbox-off.svg</file>
|
<file>checkbox-off.svg</file>
|
||||||
|
36
data/theme/carousel-arrow-back-24-symbolic.svg
Normal file
36
data/theme/carousel-arrow-back-24-symbolic.svg
Normal 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>
|
After (image error) Size: 2.3 KiB |
36
data/theme/carousel-arrow-next-24-symbolic.svg
Normal file
36
data/theme/carousel-arrow-next-24-symbolic.svg
Normal 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>
|
After (image error) Size: 2.3 KiB |
@ -156,3 +156,9 @@ $app_grid_fg_color: #fff;
|
|||||||
&:rtl { border-radius: 15px 0px 0px 15px; }
|
&:rtl { border-radius: 15px 0px 0px 15px; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-navigation-arrow {
|
||||||
|
margin: 6px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
@ -211,6 +211,31 @@ var BaseAppView = GObject.registerClass({
|
|||||||
y_align: Clutter.ActorAlign.FILL,
|
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({
|
const scrollContainer = new St.Widget({
|
||||||
layout_manager: new Clutter.BinLayout(),
|
layout_manager: new Clutter.BinLayout(),
|
||||||
clip_to_allocation: true,
|
clip_to_allocation: true,
|
||||||
@ -219,6 +244,8 @@ var BaseAppView = GObject.registerClass({
|
|||||||
scrollContainer.add_child(this._prevPageIndicator);
|
scrollContainer.add_child(this._prevPageIndicator);
|
||||||
scrollContainer.add_child(this._nextPageIndicator);
|
scrollContainer.add_child(this._nextPageIndicator);
|
||||||
scrollContainer.add_child(this._scrollView);
|
scrollContainer.add_child(this._scrollView);
|
||||||
|
scrollContainer.add_child(this._nextPageArrow);
|
||||||
|
scrollContainer.add_child(this._prevPageArrow);
|
||||||
|
|
||||||
this._box = new St.BoxLayout({
|
this._box = new St.BoxLayout({
|
||||||
vertical: true,
|
vertical: true,
|
||||||
@ -990,6 +1017,7 @@ var BaseAppView = GObject.registerClass({
|
|||||||
_syncPageHints(pageNumber, animate = true) {
|
_syncPageHints(pageNumber, animate = true) {
|
||||||
const showingNextPage = this._pagesShown & SidePages.NEXT;
|
const showingNextPage = this._pagesShown & SidePages.NEXT;
|
||||||
const showingPrevPage = this._pagesShown & SidePages.PREVIOUS;
|
const showingPrevPage = this._pagesShown & SidePages.PREVIOUS;
|
||||||
|
const dnd = this._pagesShown & SidePages.DND;
|
||||||
const duration = animate ? PAGE_INDICATOR_FADE_TIME : 0;
|
const duration = animate ? PAGE_INDICATOR_FADE_TIME : 0;
|
||||||
|
|
||||||
if (showingPrevPage) {
|
if (showingPrevPage) {
|
||||||
@ -999,6 +1027,14 @@ var BaseAppView = GObject.registerClass({
|
|||||||
opacity,
|
opacity,
|
||||||
duration,
|
duration,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (!dnd) {
|
||||||
|
this._prevPageArrow.visible = true;
|
||||||
|
this._prevPageArrow.ease({
|
||||||
|
opacity,
|
||||||
|
duration,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (showingNextPage) {
|
if (showingNextPage) {
|
||||||
@ -1008,6 +1044,14 @@ var BaseAppView = GObject.registerClass({
|
|||||||
opacity,
|
opacity,
|
||||||
duration,
|
duration,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (!dnd) {
|
||||||
|
this._nextPageArrow.visible = true;
|
||||||
|
this._nextPageArrow.ease({
|
||||||
|
opacity,
|
||||||
|
duration,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1076,6 +1120,17 @@ var BaseAppView = GObject.registerClass({
|
|||||||
if (hasFollowingPage) {
|
if (hasFollowingPage) {
|
||||||
const items = this._grid.getItemsAtPage(nextPage);
|
const items = this._grid.getItemsAtPage(nextPage);
|
||||||
items.forEach(item => (item.translation_x = translationX));
|
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 ||
|
if (hasFollowingPage ||
|
||||||
(page > 0 &&
|
(page > 0 &&
|
||||||
@ -1141,6 +1196,7 @@ var BaseAppView = GObject.registerClass({
|
|||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
this._teardownPagePreview(1);
|
this._teardownPagePreview(1);
|
||||||
this._syncClip();
|
this._syncClip();
|
||||||
|
this._nextPageArrow.visible = false;
|
||||||
this._nextPageIndicator.visible = false;
|
this._nextPageIndicator.visible = false;
|
||||||
this._updateFadeForNavigation();
|
this._updateFadeForNavigation();
|
||||||
},
|
},
|
||||||
@ -1163,6 +1219,7 @@ var BaseAppView = GObject.registerClass({
|
|||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
this._teardownPagePreview(-1);
|
this._teardownPagePreview(-1);
|
||||||
this._syncClip();
|
this._syncClip();
|
||||||
|
this._prevPageArrow.visible = false;
|
||||||
this._prevPageIndicator.visible = false;
|
this._prevPageIndicator.visible = false;
|
||||||
this._updateFadeForNavigation();
|
this._updateFadeForNavigation();
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user