on xenial help sign in
Visual updates for indicator panel highlight and opening opacity.

Approved by PS Jenkins bot, Daniel d'Andrada.

commit04de85dc15488ffb4e0036770cde5e734af03208 authorNick Dedekind <nicholas.dedekind@gmail.com> dateTue 7 Jan 2014, 14:29 (13 years ago) parent098aeaba185a18
7 files changed+83−49
qml/Panel/IndicatorItem.qml−13 qml/Panel/IndicatorRow.qml+39−8 qml/Panel/Indicators.qml+22−11 qml/Panel/MenuContent.qml+3−1 qml/Panel/Panel.qml+1−1 tests/qmltests/Panel/tst_IndicatorItem.qml−11 tests/qmltests/Panel/tst_IndicatorRow.qml+18−4
qml/Panel/IndicatorItem.qml−13
@@ -23,7 +23,6 @@ Item {
2323 id: indicatorItem
2424
2525 property alias widgetSource: loader.source
26− property bool highlighted: false
2726 property bool dimmed: false
2827 property var indicatorProperties: undefined
2928 property bool indicatorVisible: loader.item ? loader.item.enabled : false
@@ -46,16 +45,4 @@ Item {
4645 }
4746 }
4847 }
49−
50− Rectangle {
51− color: Theme.palette.selected.foreground
52− objectName: "highlight"
53− height: units.dp(2)
54− width: parent.width
55− anchors.top: parent.bottom
56− visible: highlighted
57−
58− opacity: highlighted ? 1 : 0
59− Behavior on opacity { StandardAnimation {} }
60− }
6148}
qml/Panel/IndicatorRow.qml+39−8
@@ -29,6 +29,8 @@ Item {
2929 property var visibleIndicators: defined
3030 property int overFlowWidth: width
3131 property bool showAll: false
32+ property real currentItemOffset: 0.0
33+ property real unitProgress: 0.0
3234
3335 width: units.gu(40)
3436 height: units.gu(3)
@@ -79,23 +81,23 @@ Item {
7981 height: indicatorRow.height
8082 width: indicatorItem.width
8183 visible: indicatorItem.indicatorVisible
82− opacity: 1.0
84+ opacity: 1.0 * opacityMultiplier
8385 y: 0
8486 state: "standard"
8587
8688 property int ownIndex: index
87− property alias highlighted: indicatorItem.highlighted
88− property alias dimmed: indicatorItem.dimmed
89+ property bool highlighted: indicatorRow.state != "initial" ? ownIndex == indicatorRow.currentItemIndex : false
90+ property bool dimmed: indicatorRow.state != "initial" ? ownIndex != indicatorRow.currentItemIndex : false
8991
90− property bool hidden: !showAll && !indicatorItem.highlighted && (indicatorRow.state == "locked" || indicatorRow.state == "commit")
92+ property bool hidden: !showAll && !highlighted && (indicatorRow.state == "locked" || indicatorRow.state == "commit")
9193 property bool overflow: row.width - itemWrapper.x > overFlowWidth
94+ property real opacityMultiplier: highlighted ? 1 : (1 - indicatorRow.unitProgress)
9295
9396 IndicatorItem {
9497 id: indicatorItem
9598 height: parent.height
9699
97− highlighted: indicatorRow.state != "initial" ? itemWrapper.ownIndex == indicatorRow.currentItemIndex : false
98− dimmed: indicatorRow.state != "initial" ? itemWrapper.ownIndex != indicatorRow.currentItemIndex : false
100+ dimmed: itemWrapper.dimmed
99101
100102 widgetSource: model.widgetSource
101103 indicatorProperties : model.indicatorProperties
@@ -135,14 +137,43 @@ Item {
135137
136138 transitions: [
137139 Transition {
138− StandardAnimation {
140+ UbuntuNumberAnimation {
139141 target: itemWrapper
140142 property: "opacity"
141− duration: 300
143+ duration: UbuntuAnimation.BriskDuration
142144 }
143145 }
144146 ]
145147 }
146148 }
147149 }
150+
151+ Rectangle {
152+ id: highlight
153+ color: Theme.palette.selected.foreground
154+ objectName: "highlight"
155+ height: units.dp(2)
156+ anchors.top: row.bottom
157+ visible: indicatorRow.currentItem != null
158+ x: row.x + (indicatorRow.currentItem != null ? indicatorRow.currentItem.x + centerOffset : 0)
159+ width: indicatorRow.currentItem != null ? indicatorRow.currentItem.width : 0
160+
161+ property real centerOffset: {
162+ if (indicatorRow.currentItemOffset > 0.1) {
163+ return (indicatorRow.currentItemOffset - 0.1) * units.gu(0.4);
164+ } else if (indicatorRow.currentItemOffset < -0.1) {
165+ return (indicatorRow.currentItemOffset + 0.1) * units.gu(0.4);
166+ }
167+ return 0.0;
168+ }
169+
170+ Behavior on width {
171+ enabled: unitProgress > 0;
172+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
173+ }
174+ Behavior on x {
175+ enabled: unitProgress > 0;
176+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
177+ }
178+ }
148179}
qml/Panel/Indicators.qml+22−11
@@ -39,6 +39,7 @@ Showable {
3939 property bool contentEnabled: true
4040 property bool initalizeItem: true
4141 readonly property alias content: menuContent
42+ property real unitProgress: 0.0
4243
4344 // TODO: Perhaps we need a animation standard for showing/hiding? Each showable seems to
4445 // use its own values. Need to ask design about this.
@@ -128,23 +129,31 @@ Showable {
128129 rowCoordinates = indicatorRow.mapToItem(indicatorRow.row, xValue, 0);
129130 // get the current delegate
130131 currentItem = indicatorRow.row.childAt(rowCoordinates.x, 0);
131− if (currentItem && currentItem != indicatorRow.currentItem ) {
132+ if (currentItem) {
132133 itemCoordinates = indicatorRow.row.mapToItem(currentItem, rowCoordinates.x, 0);
133134 distanceFromRightEdge = (currentItem.width - itemCoordinates.x) / (currentItem.width);
134− if (Math.abs(currentItem.ownIndex - indicatorRow.currentItemIndex) > 1) {
135− bufferExceeded = true;
136− } else {
137− if (indicatorRow.currentItemIndex < currentItem.ownIndex && distanceFromRightEdge < (1 - effectiveBufferThreshold)) {
138− bufferExceeded = true;
139− } else if (indicatorRow.currentItemIndex > currentItem.ownIndex && distanceFromRightEdge > effectiveBufferThreshold) {
135+ if (currentItem != indicatorRow.currentItem) {
136+ if (Math.abs(currentItem.ownIndex - indicatorRow.currentItemIndex) > 1) {
140137 bufferExceeded = true;
138+ } else {
139+ if (indicatorRow.currentItemIndex < currentItem.ownIndex && distanceFromRightEdge < (1 - effectiveBufferThreshold)) {
140+ bufferExceeded = true;
141+ } else if (indicatorRow.currentItemIndex > currentItem.ownIndex && distanceFromRightEdge > effectiveBufferThreshold) {
142+ bufferExceeded = true;
143+ }
141144 }
145+ if ((!useBuffer || (useBuffer && bufferExceeded)) || indicatorRow.currentItemIndex < 0 || indicatorRow.currentItem == null) {
146+ indicatorRow.currentItem = currentItem;
147+ }
148+
149+ // need to re-init the distanceFromRightEdge for offset calculation
150+ itemCoordinates = indicatorRow.row.mapToItem(indicatorRow.currentItem, rowCoordinates.x, 0);
151+ distanceFromRightEdge = (indicatorRow.currentItem.width - itemCoordinates.x) / (indicatorRow.currentItem.width);
142152 }
143− if ((!useBuffer || (useBuffer && bufferExceeded)) || indicatorRow.currentItem < 0 || indicatorRow.currentItem == null) {
144− indicatorRow.currentItem = currentItem;
145− }
146− } else if (!currentItem) {
153+ indicatorRow.currentItemOffset = 1 - (distanceFromRightEdge * 2);
154+ } else {
147155 indicatorRow.setDefaultItem();
156+ indicatorRow.currentItemOffset = 0;
148157 }
149158 initalizeItem = indicatorRow.currentItem == null;
150159 }
@@ -268,6 +277,7 @@ Showable {
268277 height: indicators.panelHeight
269278 indicatorsModel: indicatorsModel
270279 state: indicators.state
280+ unitProgress: indicators.unitProgress
271281
272282 Connections {
273283 property bool enableIndexChangeSignal: true
@@ -326,6 +336,7 @@ Showable {
326336 if (hideAnimation.running) {
327337 indicators.state = "initial";
328338 initalizeItem = true;
339+ menuContent.animateNextMenuChange = false;
329340 }
330341 }
331342 }
qml/Panel/MenuContent.qml+3−1
@@ -33,6 +33,7 @@ MainView {
3333 property int contentReleaseInterval: 20000
3434 property bool activeHeader: false
3535 property alias visibleIndicators: visibleIndicatorsModel.visible
36+ property bool animateNextMenuChange: false
3637
3738 width: units.gu(40)
3839 height: units.gu(42)
@@ -41,11 +42,12 @@ MainView {
4142 var filteredIndex = filteredIndicators.mapFromSource(index)
4243
4344 if (tabs.selectedTabIndex !== filteredIndex) {
44− if (tabs.selectedTabIndex == -1) {
45+ if (tabs.selectedTabIndex == -1 || !animateNextMenuChange) {
4546 tabs.tabBar.animate = false;
4647 }
4748 tabs.selectedTabIndex = filteredIndex;
4849 tabs.tabBar.animate = true;
50+ animateNextMenuChange = true;
4951 }
5052 }
5153
qml/Panel/Panel.qml+1−1
@@ -107,7 +107,7 @@ Item {
107107 pinnedMode: !fullscreenMode
108108 overFlowWidth: search.state=="hidden" ? parent.width : parent.width - search.width
109109
110− property real unitProgress: (height - panelHeight) / (openedHeight - panelHeight)
110+ unitProgress: (height - panelHeight) / (openedHeight - panelHeight)
111111 }
112112
113113 PanelSeparatorLine {
tests/qmltests/Panel/tst_IndicatorItem.qml−11
@@ -41,17 +41,6 @@ Rectangle {
4141 tryCompareFunction(function(){return indicatorItem.opacity < 1.0}, true);
4242 }
4343
44− function test_highlight() {
45− var itemHighlight = findChild(indicatorItem, "highlight");
46− verify(itemHighlight != undefined);
47−
48− indicatorItem.highlighted = true;
49− compare(itemHighlight.visible, true, "Indicator should be highlighted");
50−
51− indicatorItem.highlighted = false;
52− compare(itemHighlight.visible, false, "Indicator should not be highlighted");
53− }
54−
5544 function test_empty() {
5645 compare(indicatorItem.indicatorVisible, false, "IndicatorItem should not be visible.");
5746 indicatorItem.widgetSource = "qrc:/tests/indciators/qml/fake_menu_widget1.qml";
tests/qmltests/Panel/tst_IndicatorRow.qml+18−4
@@ -34,6 +34,7 @@ Item {
3434 {
3535 indicatorRow.state = "initial";
3636 indicatorRow.currentItem = null;
37+ indicatorRow.unitProgress = 0.0;
3738 }
3839
3940 PanelBackground {
@@ -83,14 +84,13 @@ Item {
8384 function test_current_item_commit() {
8485 init_test();
8586
86− indicatorRow.setCurrentItem(1);
87+ indicatorRow.setCurrentItem(2);
8788 indicatorRow.state = "commit";
8889 tryCompare(get_indicator_item_at(0), "opacity", 0.0);
89− tryCompare(get_indicator_item_at(1), "opacity", 1.0);
90− tryCompare(get_indicator_item_at(2), "opacity", 0.0);
90+ tryCompare(get_indicator_item_at(1), "opacity", 0.0);
91+ tryCompare(get_indicator_item_at(2), "opacity", 1.0);
9192 tryCompare(get_indicator_item_at(3), "opacity", 0.0);
9293 tryCompare(get_indicator_item_at(4), "opacity", 0.0);
93−
9494 }
9595 }
9696
@@ -166,6 +166,20 @@ Item {
166166 compare(get_indicator_item_at(3).highlighted, false, "Other indicators should not highlight when in locked state");
167167 compare(get_indicator_item_at(4).highlighted, false, "Other indicators should not highlight when in locked state");
168168 }
169+
170+ function test_opacity() {
171+ init_test();
172+
173+ indicatorRow.state = "reveal";
174+ indicatorRow.unitProgress = 0.5;
175+ indicatorRow.setCurrentItem(2);
176+
177+ compare(get_indicator_item_at(0).opacity, 0.5, "Other indicator opacity should change in response to panel progress");
178+ compare(get_indicator_item_at(1).opacity, 0.5, "Other indicator opacity should change in response to panel progress");
179+ compare(get_indicator_item_at(2).opacity, 1.0, "Current indicator should not change in response to panel progress");
180+ compare(get_indicator_item_at(3).opacity, 0.5, "Other indicator opacity should change in response to panel progress");
181+ compare(get_indicator_item_at(4).opacity, 0.5, "Other indicator opacity should change in response to panel progress");
182+ }
169183 }
170184
171185 UT.UnityTestCase {