on xenial help sign in
[indicators] Fix positioning on panel resize.
d92457bGerry Boland
qml/Panel/IndicatorsBar.qml+29−20
@@ -46,13 +46,14 @@ Item {
46
46
47 function addScrollOffset(scrollAmmout) {
47 function addScrollOffset(scrollAmmout) {
48 if (scrollAmmout < 0) { // left scroll
48 if (scrollAmmout < 0) { // left scroll
49− if (flickable.contentX < 0) return; // already off the left.
50− if (flickable.contentX + scrollAmmout < 0) scrollAmmout = -flickable.contentX; // going to be off the left
51− } else { // right scroll
52− if (flickable.contentX + flickable.width > row.width) return; // already off the right.
49+ if (flickable.contentX + flickable.width > row.width) return; // already off the left.
50+
53− if (flickable.contentX + flickable.width + scrollAmmout > row.width) { // going to be off the right
51+ if (flickable.contentX + flickable.width - scrollAmmout > row.width) { // going to be off the right
54− scrollAmmout = row.width - (flickable.contentX + flickable.width);
52+ scrollAmmout = (flickable.contentX + flickable.width) - row.width;
55 }
53 }
54+ } else { // right scroll
55+ if (flickable.contentX < 0) return; // already off the right.
56+ if (flickable.contentX - scrollAmmout < 0) scrollAmmout = flickable.contentX; // going to be off the right
56 }
57 }
57 d.scrollOffset = d.scrollOffset + scrollAmmout;
58 d.scrollOffset = d.scrollOffset + scrollAmmout;
58 }
59 }
@@ -91,24 +92,26 @@ Item {
91 flickable.resetContentXComponents();
92 flickable.resetContentXComponents();
92
93
93 if (expanded && !flickable.moving) {
94 if (expanded && !flickable.moving) {
94−
95 // gap between left and row?
95 // gap between left and row?
96− if (flickable.contentX < 0) {
96+ if (flickable.contentX + flickable.width > row.width) {
97− d.alignmentAdjustment += flickable.contentX;
98− // gap between right and row?
99− } else if (flickable.contentX + flickable.width > row.width) {
100 // row width is less than flickable
97 // row width is less than flickable
101 if (row.width < flickable.width) {
98 if (row.width < flickable.width) {
102− d.alignmentAdjustment += flickable.contentX;
99+ d.alignmentAdjustment -= flickable.contentX;
103 } else {
100 } else {
104− d.alignmentAdjustment += ((flickable.contentX + flickable.width) - row.width);
101+ d.alignmentAdjustment -= ((flickable.contentX + flickable.width) - row.width);
105 }
102 }
103+
104+ // gap between right and row?
105+ } else if (flickable.contentX < 0) {
106+ d.alignmentAdjustment -= flickable.contentX;
107+
106 // current item overlap on left
108 // current item overlap on left
107− } else if (row.currentItem && row.currentItem.x < flickable.contentX) {
109+ } else if (row.currentItem && (flickable.contentX + flickable.width) < (row.width - row.currentItem.x)) {
108− d.alignmentAdjustment -= (row.currentItem.x - flickable.contentX);
110+ d.alignmentAdjustment += ((row.width - row.currentItem.x) - (flickable.contentX + flickable.width));
111+
109 // current item overlap on right
112 // current item overlap on right
110− } else if (row.currentItem && row.currentItem.x + row.currentItem.width > flickable.contentX + flickable.width) {
113+ } else if (row.currentItem && flickable.contentX > (row.width - row.currentItem.x - row.currentItem.width)) {
111− d.alignmentAdjustment -= ((row.currentItem.x + row.currentItem.width) - (flickable.contentX + flickable.width));
114+ d.alignmentAdjustment -= flickable.contentX - (row.width - row.currentItem.x - row.currentItem.width);
112 }
115 }
113 }
116 }
114 }
117 }
@@ -134,16 +137,19 @@ Item {
134 id: flickable
137 id: flickable
135 objectName: "flickable"
138 objectName: "flickable"
136
139
140+ // we rotate it because we want the Flickable to align its content item
141+ // on the right instead of on the left
142+ rotation: 180
143+
137 anchors.fill: parent
144 anchors.fill: parent
138 contentWidth: row.width
145 contentWidth: row.width
146+ contentX: d.combinedOffset
139 interactive: false
147 interactive: false
140− // align right + offset from row selection + scrolling
141− contentX: row.width - flickable.width - d.combinedOffset
142
148
143 // contentX can change by user interaction as well as user offset changes
149 // contentX can change by user interaction as well as user offset changes
144 // This function re-aligns the offsets so that the offsets match the contentX
150 // This function re-aligns the offsets so that the offsets match the contentX
145 function resetContentXComponents() {
151 function resetContentXComponents() {
146− d.scrollOffset += (flickable.contentX - (row.width - flickable.width - d.combinedOffset));
152+ d.scrollOffset += d.combinedOffset - flickable.contentX;
147 }
153 }
148
154
149 rebound: Transition {
155 rebound: Transition {
@@ -162,6 +168,9 @@ Item {
162 bottom: parent.bottom
168 bottom: parent.bottom
163 }
169 }
164
170
171+ // Compensate for the Flickable rotation (ie, counter-rotate)
172+ rotation: 180
173+
165 lateralPosition: {
174 lateralPosition: {
166 if (root.lateralPosition == -1) return -1;
175 if (root.lateralPosition == -1) return -1;
167
176
tests/qmltests/Panel/tst_IndicatorsBar.qml+26−1
@@ -46,7 +46,7 @@ IndicatorTest {
46 IndicatorsBar {
46 IndicatorsBar {
47 id: indicatorsBar
47 id: indicatorsBar
48 height: expanded ? units.gu(7) : units.gu(3)
48 height: expanded ? units.gu(7) : units.gu(3)
49− width: units.gu(30)
49+ width: units.gu(widthSlider.value)
50 anchors.centerIn: parent
50 anchors.centerIn: parent
51 indicatorsModel: root.indicatorsModel
51 indicatorsModel: root.indicatorsModel
52 interactive: expanded && height === units.gu(7)
52 interactive: expanded && height === units.gu(7)
@@ -79,6 +79,14 @@ IndicatorTest {
79 onClicked: indicatorsBar.expanded = !indicatorsBar.expanded
79 onClicked: indicatorsBar.expanded = !indicatorsBar.expanded
80 }
80 }
81
81
82+ Slider {
83+ id: widthSlider
84+ Layout.fillWidth: true
85+ minimumValue: 10
86+ maximumValue: 60
87+ value: 30
88+ }
89+
82 Rectangle {
90 Rectangle {
83 Layout.preferredHeight: units.dp(1);
91 Layout.preferredHeight: units.dp(1);
84 Layout.fillWidth: true;
92 Layout.fillWidth: true;
@@ -114,6 +122,7 @@ IndicatorTest {
114 when: windowShown
122 when: windowShown
115
123
116 function init() {
124 function init() {
125+ widthSlider.value = 30;
117 indicatorsBar.expanded = false;
126 indicatorsBar.expanded = false;
118 wait_for_expansion_to_settle();
127 wait_for_expansion_to_settle();
119 }
128 }
@@ -220,5 +229,21 @@ IndicatorTest {
220 tryCompareFunction(function() { return dataItem.width > 0.0; }, true);
229 tryCompareFunction(function() { return dataItem.width > 0.0; }, true);
221 }
230 }
222 }
231 }
232+
233+ // Rough test that resizing the IndicatorsBar has the items reposition correctly
234+ function test_widthChangeRepositionsItems() {
235+ var lastItemIndex = root.originalModelData.length-1;
236+ var dataItem = findChild(indicatorsBar, root.originalModelData[lastItemIndex]["identifier"] + "-panelItem");
237+ verify(dataItem !== null);
238+
239+ var mappedPosition = indicatorsBar.mapFromItem(dataItem, dataItem.width/2, dataItem.height/2);
240+ var oldDistanceFromRightEdge = indicatorsBar.width - mappedPosition.x;
241+
242+ widthSlider.value = 50;
243+ mappedPosition = indicatorsBar.mapFromItem(dataItem, dataItem.width/2, dataItem.height/2);
244+ var newDistanceFromRightEdge = indicatorsBar.width - mappedPosition.x;
245+
246+ compare(newDistanceFromRightEdge, oldDistanceFromRightEdge);
247+ }
223 }
248 }
224}
249}