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

pageIndicators: Redesign and add position-based animation

Browse Source 
Remove setCurrentPage() function, introduce setCurrentPosition() instead,
which allows to have fractional positions.

Make inactive dots smaller, filled and partially transparent, as opposed to
larger and fully opaque active dot. Make dots smaller overall, remove
borders. Interpolate each dot between active and inactive state based on
scroll position.

Make it impossible to "uncheck" the active dot.

Thanks Florian Müllner for parts of the code.

Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/1932

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/843
This commit is contained in:
Alexander Mikhaylenko 2019-11-22 03:24:46 +05:00
parent 9790b0ee5d
commit 109f39afa5
4 changed files with 60 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
data/theme/gnome-shell-sass/_common.scss
View File

@ -1549,20 +1549,14 @@ StScrollBar {
}
.page-indicator {
padding: 15px 20px;
padding: 7px 16px;
.page-indicator-icon {
width: 12px;
height: 12px;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 12px;
background-color: white;
border-radius: 6px;
}
&:hover .page-indicator-icon { border-color: white; }
&:active .page-indicator-icon { border: none; margin: 2px; background-color: white; }
&:checked .page-indicator-icon,
&:checked:active .page-indicator-icon { background-color: white;}
}
.no-frequent-applications-label { @extend %status_text; }
@ -1762,8 +1756,8 @@ StScrollBar {
padding: 4px 4px;
.page-indicator-icon {
width: 6px;
height: 6px
width: 8px;
height: 8px;
}
}
}

9
js/ui/appDisplay.js
View File

@ -315,6 +315,9 @@ var AllView = GObject.registerClass({
this._scrollView.set_policy(St.PolicyType.NEVER,
St.PolicyType.EXTERNAL);
this._adjustment = this._scrollView.vscroll.adjustment;
this._adjustment.connect('notify::value', adj => {
this._pageIndicators.setCurrentPosition(adj.value / adj.page_size);
});
this._pageIndicators = new PageIndicators.AnimatedPageIndicators();
this._pageIndicators.connect('page-activated',
@ -561,7 +564,7 @@ var AllView = GObject.registerClass({
if (!this.mapped) {
this._adjustment.value = this._grid.getPageY(pageNumber);
this._pageIndicators.setCurrentPage(pageNumber);
this._pageIndicators.setCurrentPosition(pageNumber);
this._grid.currentPage = pageNumber;
return;
}
@ -597,8 +600,6 @@ var AllView = GObject.registerClass({
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
duration: time,
});
this._pageIndicators.setCurrentPage(pageNumber);
}
_diffToPage(pageNumber) {
@ -754,7 +755,7 @@ var AllView = GObject.registerClass({
this._adjustment.value = 0;
this._grid.currentPage = 0;
this._pageIndicators.setNPages(this._grid.nPages());
this._pageIndicators.setCurrentPage(0);
this._pageIndicators.setCurrentPosition(0);
return GLib.SOURCE_REMOVE;
});
}

13
js/ui/keyboard.js
View File

@ -920,9 +920,14 @@ var EmojiSelection = GObject.registerClass({
this.add_child(this._pageIndicator);
this._pageIndicator.setReactive(false);
this._emojiPager.connect('notify::delta', () => {
this._updateIndicatorPosition();
});
let bottomRow = this._createBottomRow();
this.add_child(bottomRow);
this._curPage = 0;
this._emojiPager.setCurrentPage(0);
}
@ -937,8 +942,9 @@ var EmojiSelection = GObject.registerClass({
}
_onPageChanged(sectionLabel, page, nPages) {
this._curPage = page;
this._pageIndicator.setNPages(nPages);
this._pageIndicator.setCurrentPage(page);
this._updateIndicatorPosition();
for (let i = 0; i < this._sections.length; i++) {
let sect = this._sections[i];
@ -946,6 +952,11 @@ var EmojiSelection = GObject.registerClass({
}
}
_updateIndicatorPosition() {
this._pageIndicator.setCurrentPosition(this._curPage -
this._emojiPager.delta / this._emojiPager.width);
}
_findSection(emoji) {
for (let i = 0; i < this._sections.length; i++) {
if (this._sections[i].first == emoji)

47
js/ui/pageIndicators.js
View File

@ -1,10 +1,15 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
/* exported PageIndicators, AnimatedPageIndicators */
const { Clutter, GLib, GObject, Meta, St } = imports.gi;
const { Clutter, GLib, Graphene, GObject, Meta, St } = imports.gi;
const { ANIMATION_TIME_OUT, ANIMATION_MAX_DELAY_OUT_FOR_ITEM, AnimationDirection } = imports.ui.iconGrid;
const INDICATOR_INACTIVE_OPACITY = 128;
const INDICATOR_INACTIVE_OPACITY_HOVER = 255;
const INDICATOR_INACTIVE_SCALE = 2 / 3;
const INDICATOR_INACTIVE_SCALE_PRESSED = 0.5;
var INDICATORS_BASE_TIME = 250;
var INDICATORS_BASE_TIME_OUT = 125;
var INDICATORS_ANIMATION_DELAY = 125;
@ -32,7 +37,7 @@ var PageIndicators = GObject.registerClass({
clip_to_allocation: true,
});
this._nPages = 0;
this._currentPage = undefined;
this._currentPosition = 0;
this._reactive = true;
this._reactive = true;
}
@ -66,13 +71,21 @@ var PageIndicators = GObject.registerClass({
button_mask: St.ButtonMask.ONE |
St.ButtonMask.TWO |
St.ButtonMask.THREE,
toggle_mode: true,
reactive: this._reactive,
checked: pageIndex == this._currentPage });
indicator.child = new St.Widget({ style_class: 'page-indicator-icon' });
reactive: this._reactive });
indicator.child = new St.Widget({
style_class: 'page-indicator-icon',
pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }),
});
indicator.connect('clicked', () => {
this.emit('page-activated', pageIndex);
});
indicator.connect('notify::hover', () => {
this._updateIndicator(indicator, pageIndex);
});
indicator.connect('notify::pressed', () => {
this._updateIndicator(indicator, pageIndex);
});
this._updateIndicator(indicator, pageIndex);
this.add_actor(indicator);
}
} else {
@ -84,12 +97,28 @@ var PageIndicators = GObject.registerClass({
this.visible = this._nPages > 1;
}
setCurrentPage(currentPage) {
this._currentPage = currentPage;
_updateIndicator(indicator, pageIndex) {
let progress =
Math.max(1 - Math.abs(this._currentPosition - pageIndex), 0);
let inactiveScale = indicator.pressed
? INDICATOR_INACTIVE_SCALE_PRESSED : INDICATOR_INACTIVE_SCALE;
let inactiveOpacity = indicator.hover
? INDICATOR_INACTIVE_OPACITY_HOVER : INDICATOR_INACTIVE_OPACITY;
let scale = inactiveScale + (1 - inactiveScale) * progress;
let opacity = inactiveOpacity + (255 - inactiveOpacity) * progress;
indicator.child.set_scale(scale, scale);
indicator.child.opacity = opacity;
}
setCurrentPosition(currentPosition) {
this._currentPosition = currentPosition;
let children = this.get_children();
for (let i = 0; i < children.length; i++)
children[i].set_checked(i == this._currentPage);
this._updateIndicator(children[i], i);
}
});