on xenial help sign in
desktop mode improvements, flexible margins
7b7f46fLukáš Tinkl
qml/Wizard/Page.qml+8−5
@@ -19,6 +19,8 @@ import Ubuntu.Components 1.3
19import Wizard 0.1
19import Wizard 0.1
20
20
21Item {
21Item {
22+ readonly property real maximumContentWidth: units.gu(50)
23+
22 readonly property real buttonMargin: units.gu(3)
24 readonly property real buttonMargin: units.gu(3)
23 readonly property real buttonWidth: (width - buttonMargin * 2) / 2 -
25 readonly property real buttonWidth: (width - buttonMargin * 2) / 2 -
24 buttonMargin / 2
26 buttonMargin / 2
@@ -27,9 +29,10 @@ Item {
27
29
28 readonly property real topMargin: units.gu(11)
30 readonly property real topMargin: units.gu(11)
29 readonly property real bottomMargin: units.gu(3)
31 readonly property real bottomMargin: units.gu(3)
30− readonly property real leftMargin: units.gu(3)
32+ readonly property real leftMargin: Math.max(units.gu(3), (width - maximumContentWidth) / 3)
31− readonly property real rightMargin: units.gu(3)
33+ readonly property real rightMargin: leftMargin
32 readonly property real customMargin: units.gu(4) // margin for the custom (w/o title image) pages
34 readonly property real customMargin: units.gu(4) // margin for the custom (w/o title image) pages
35+ readonly property real staticMargin: units.gu(3)
33
36
34 // colors
37 // colors
35 readonly property color backgroundColor: "#fdfdfd"
38 readonly property color backgroundColor: "#fdfdfd"
@@ -94,7 +97,7 @@ Item {
94 right: parent.right
97 right: parent.right
95 bottom: parent.bottom
98 bottom: parent.bottom
96 bottomMargin: bottomMargin
99 bottomMargin: bottomMargin
97− leftMargin: leftMargin + titleLabel.animatedMargin
100+ leftMargin: staticMargin + titleLabel.animatedMargin
98 rightMargin: rightMargin
101 rightMargin: rightMargin
99 topMargin: titleLabel.animatedTopMargin
102 topMargin: titleLabel.animatedTopMargin
100 }
103 }
@@ -191,7 +194,7 @@ Item {
191 anchors {
194 anchors {
192 left: parent.left
195 left: parent.left
193 bottom: parent.bottom
196 bottom: parent.bottom
194− leftMargin: leftMargin
197+ leftMargin: staticMargin
195 verticalCenter: parent.verticalCenter
198 verticalCenter: parent.verticalCenter
196 }
199 }
197 z: 1
200 z: 1
@@ -209,7 +212,7 @@ Item {
209 anchors {
212 anchors {
210 right: parent.right
213 right: parent.right
211 bottom: parent.bottom
214 bottom: parent.bottom
212− rightMargin: rightMargin
215+ rightMargin: staticMargin
213 verticalCenter: parent.verticalCenter
216 verticalCenter: parent.verticalCenter
214 }
217 }
215 z: 1
218 z: 1
qml/Wizard/Pages/10-welcome.qml+42−47
@@ -88,62 +88,57 @@ LocalComponents.Page {
88 onStopped: init();
88 onStopped: init();
89 }
89 }
90
90
91− Column {
91+ ListView {
92− id: column
93− anchors.fill: content
94−
95− ListView {
96− id: languagesListView
92+ id: languagesListView
97− clip: true
93+ clip: true
98− snapMode: ListView.SnapToItem
94+ snapMode: ListView.SnapToItem
99−
95+
100− anchors {
96+ anchors {
101− left: parent.left
97+ fill: content
102− right: parent.right
98+ leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
99+ rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
100+ topMargin: parent.width > maximumContentWidth ? parent.customMargin : 0
103− }
101+ }
104
102
105− height: column.height
103+ model: plugin.languageNames
106
104
107− model: plugin.languageNames
105+ delegate: ListItem {
106+ id: itemDelegate
107+ objectName: "languageDelegate" + index
108+ highlightColor: backgroundColor
109+ readonly property bool isCurrent: index === ListView.view.currentIndex
108
110
109− delegate: ListItem {
111+ Label {
110− id: itemDelegate
112+ id: langLabel
111− objectName: "languageDelegate" + index
113+ text: modelData
112− highlightColor: backgroundColor
113− readonly property bool isCurrent: index === ListView.view.currentIndex
114
114
115− Label {
115+ anchors {
116− id: langLabel
116+ left: parent.left
117− text: modelData
117+ verticalCenter: parent.verticalCenter
118+ leftMargin: languagesListView.anchors.leftMargin == 0 ? staticMargin : 0
119+ }
118
120
119− anchors {
121+ fontSize: "medium"
120− left: parent.left
122+ font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
121− verticalCenter: parent.verticalCenter
123+ color: textColor
122− leftMargin: leftMargin
123− }
124+ }
124
125
125− fontSize: "medium"
126+ Image {
126− font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
127+ anchors {
127− color: textColor
128+ right: parent.right;
129+ verticalCenter: parent.verticalCenter;
130+ rightMargin: languagesListView.anchors.rightMargin == 0 ? staticMargin : 0
128 }
131 }
132+ fillMode: Image.PreserveAspectFit
133+ height: units.gu(1.5)
129
134
130− Image {
131− anchors {
132− right: parent.right;
133− verticalCenter: parent.verticalCenter;
134− rightMargin: rightMargin
135− }
136− fillMode: Image.PreserveAspectFit
137− height: units.gu(1.5)
138−
139− source: "data/Tick@30.png"
135+ source: "data/Tick@30.png"
140− visible: itemDelegate.isCurrent
136+ visible: itemDelegate.isCurrent
141− }
137+ }
142
138
143− onClicked: {
139+ onClicked: {
144− languagesListView.currentIndex = index;
140+ languagesListView.currentIndex = index;
145− i18n.language = plugin.languageCodes[index];
141+ i18n.language = plugin.languageCodes[index];
146− }
147 }
142 }
148 }
143 }
149 }
144 }
qml/Wizard/Pages/30-wifi.qml+4−2
@@ -104,7 +104,7 @@ LocalComponents.Page {
104 anchors {
104 anchors {
105 left: parent.left
105 left: parent.left
106 verticalCenter: parent.verticalCenter
106 verticalCenter: parent.verticalCenter
107− leftMargin: leftMargin
107+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
108 }
108 }
109 height: units.gu(2.5)
109 height: units.gu(2.5)
110 width: height
110 width: height
@@ -153,13 +153,15 @@ LocalComponents.Page {
153 anchors {
153 anchors {
154 fill: content
154 fill: content
155 topMargin: customMargin
155 topMargin: customMargin
156+ leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
157+ rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
156 }
158 }
157
159
158 Label {
160 Label {
159 id: label
161 id: label
160 anchors.left: parent.left
162 anchors.left: parent.left
161 anchors.right: parent.right
163 anchors.right: parent.right
162− anchors.leftMargin: leftMargin
164+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
163 font.weight: Font.Light
165 font.weight: Font.Light
164 color: "#68064d"
166 color: "#68064d"
165 wrapMode: Text.Wrap
167 wrapMode: Text.Wrap
qml/Wizard/Pages/40-location.qml+16−14
@@ -54,6 +54,8 @@ LocalComponents.Page {
54 id: column
54 id: column
55 anchors.fill: content
55 anchors.fill: content
56 anchors.topMargin: customMargin
56 anchors.topMargin: customMargin
57+ anchors.leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
58+ anchors.rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
57
59
58 Item {
60 Item {
59 id: hereCheckGroup
61 id: hereCheckGroup
@@ -62,7 +64,7 @@ LocalComponents.Page {
62 right: parent.right
64 right: parent.right
63 top: parent.top
65 top: parent.top
64 }
66 }
65− height: childrenRect.height
67+ height: hereCheckLabel.height + hereTermsLabel.height
66
68
67 Label {
69 Label {
68 id: hereCheckLabel
70 id: hereCheckLabel
@@ -71,8 +73,8 @@ LocalComponents.Page {
71 left: parent.left
73 left: parent.left
72 right: hereTermsCheck.left
74 right: hereTermsCheck.left
73 top: parent.top
75 top: parent.top
74− leftMargin: leftMargin
76+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
75− rightMargin: rightMargin/2
77+ rightMargin: units.gu(2)
76 }
78 }
77 lineHeight: 1.2
79 lineHeight: 1.2
78 wrapMode: Text.WordWrap
80 wrapMode: Text.WordWrap
@@ -90,8 +92,8 @@ LocalComponents.Page {
90 right: hereTermsCheck.left
92 right: hereTermsCheck.left
91 top: hereCheckLabel.bottom
93 top: hereCheckLabel.bottom
92 topMargin: units.gu(1)
94 topMargin: units.gu(1)
93− leftMargin: leftMargin
95+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
94− rightMargin: rightMargin/2
96+ rightMargin: units.gu(2)
95 }
97 }
96
98
97 wrapMode: Text.WordWrap
99 wrapMode: Text.WordWrap
@@ -116,7 +118,7 @@ LocalComponents.Page {
116 opacity: hereCheckLabel.checked ? 1 : 0
118 opacity: hereCheckLabel.checked ? 1 : 0
117 anchors.right: parent.right
119 anchors.right: parent.right
118 anchors.verticalCenter: hereCheckLabel.verticalCenter
120 anchors.verticalCenter: hereCheckLabel.verticalCenter
119− anchors.rightMargin: rightMargin
121+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
120 }
122 }
121
123
122 MouseArea {
124 MouseArea {
@@ -151,8 +153,8 @@ LocalComponents.Page {
151 right: parent.right
153 right: parent.right
152 top: divider.bottom
154 top: divider.bottom
153 topMargin: units.gu(3)
155 topMargin: units.gu(3)
154− leftMargin: leftMargin
156+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
155− rightMargin: rightMargin/2
157+ rightMargin: units.gu(2)
156 }
158 }
157 text: i18n.tr("GPS only")
159 text: i18n.tr("GPS only")
158 wrapMode: Text.WordWrap
160 wrapMode: Text.WordWrap
@@ -180,7 +182,7 @@ LocalComponents.Page {
180 opacity: gpsCheckLabel.checked ? 1 : 0
182 opacity: gpsCheckLabel.checked ? 1 : 0
181 anchors.right: parent.right
183 anchors.right: parent.right
182 anchors.verticalCenter: gpsCheckLabel.verticalCenter
184 anchors.verticalCenter: gpsCheckLabel.verticalCenter
183− anchors.rightMargin: rightMargin
185+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
184 }
186 }
185
187
186 Rectangle {
188 Rectangle {
@@ -201,8 +203,8 @@ LocalComponents.Page {
201 right: parent.right
203 right: parent.right
202 top: divider2.bottom
204 top: divider2.bottom
203 topMargin: units.gu(3)
205 topMargin: units.gu(3)
204− leftMargin: leftMargin
206+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
205− rightMargin: rightMargin/2
207+ rightMargin: units.gu(2)
206 }
208 }
207 wrapMode: Text.WordWrap
209 wrapMode: Text.WordWrap
208 color: textColor
210 color: textColor
@@ -230,7 +232,7 @@ LocalComponents.Page {
230 opacity: nopeCheckLabel.checked ? 1 : 0
232 opacity: nopeCheckLabel.checked ? 1 : 0
231 anchors.right: parent.right
233 anchors.right: parent.right
232 anchors.verticalCenter: nopeCheckLabel.verticalCenter
234 anchors.verticalCenter: nopeCheckLabel.verticalCenter
233− anchors.rightMargin: rightMargin
235+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
234 }
236 }
235
237
236 Rectangle {
238 Rectangle {
@@ -250,8 +252,8 @@ LocalComponents.Page {
250 right: parent.right
252 right: parent.right
251 top: divider3.bottom
253 top: divider3.bottom
252 topMargin: units.gu(4)
254 topMargin: units.gu(4)
253− leftMargin: leftMargin
255+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
254− rightMargin: rightMargin
256+ rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
255 }
257 }
256 wrapMode: Text.Wrap
258 wrapMode: Text.Wrap
257 text: i18n.tr("You can change it later in System Settings.")
259 text: i18n.tr("You can change it later in System Settings.")
qml/Wizard/Pages/50-timezone.qml+9−6
@@ -73,9 +73,10 @@ LocalComponents.Page {
73 Column {
73 Column {
74 anchors.verticalCenter: parent.verticalCenter
74 anchors.verticalCenter: parent.verticalCenter
75 anchors.left: parent.left
75 anchors.left: parent.left
76− anchors.leftMargin: leftMargin
76+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
77 anchors.right: image.left
77 anchors.right: image.left
78− anchors.rightMargin: rightMargin/2
78+ anchors.rightMargin: units.gu(2)
79+
79 Label {
80 Label {
80 id: cityLabel
81 id: cityLabel
81 text: displayName
82 text: displayName
@@ -99,7 +100,7 @@ LocalComponents.Page {
99 anchors {
100 anchors {
100 right: parent.right
101 right: parent.right
101 verticalCenter: parent.verticalCenter
102 verticalCenter: parent.verticalCenter
102− rightMargin: rightMargin
103+ rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
103 }
104 }
104 fillMode: Image.PreserveAspectFit
105 fillMode: Image.PreserveAspectFit
105 height: units.gu(1.5)
106 height: units.gu(1.5)
@@ -120,6 +121,8 @@ LocalComponents.Page {
120 anchors {
121 anchors {
121 fill: content
122 fill: content
122 topMargin: customMargin
123 topMargin: customMargin
124+ leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
125+ rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
123 }
126 }
124
127
125 LocalComponents.WizardTextField {
128 LocalComponents.WizardTextField {
@@ -127,8 +130,8 @@ LocalComponents.Page {
127 objectName: "tzFilter"
130 objectName: "tzFilter"
128 anchors.left: parent.left
131 anchors.left: parent.left
129 anchors.right: parent.right
132 anchors.right: parent.right
130− anchors.leftMargin: leftMargin
133+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
131− anchors.rightMargin: rightMargin
134+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
132 placeholderText: i18n.tr("Enter your city")
135 placeholderText: i18n.tr("Enter your city")
133 inputMethodHints: Qt.ImhNoPredictiveText
136 inputMethodHints: Qt.ImhNoPredictiveText
134 onTextChanged: {
137 onTextChanged: {
@@ -150,7 +153,7 @@ LocalComponents.Page {
150 }
153 }
151
154
152 ListView {
155 ListView {
153− id: tzList;
156+ id: tzList
154 objectName: "tzList"
157 objectName: "tzList"
155 clip: true
158 clip: true
156 currentIndex: -1
159 currentIndex: -1
qml/Wizard/Pages/70-passwd-type.qml+8−5
@@ -59,6 +59,8 @@ LocalComponents.Page {
59 id: column
59 id: column
60 anchors.fill: content
60 anchors.fill: content
61 anchors.topMargin: customMargin
61 anchors.topMargin: customMargin
62+ anchors.leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
63+ anchors.rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
62
64
63 ListView {
65 ListView {
64 id: selector
66 id: selector
@@ -80,10 +82,9 @@ LocalComponents.Page {
80 divider.colorFrom: dividerColor
82 divider.colorFrom: dividerColor
81 divider.colorTo: backgroundColor
83 divider.colorTo: backgroundColor
82 Label {
84 Label {
83− id: methodLabel
84 anchors.verticalCenter: parent.verticalCenter;
85 anchors.verticalCenter: parent.verticalCenter;
85 anchors.left: parent.left
86 anchors.left: parent.left
86− anchors.leftMargin: leftMargin
87+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
87 fontSize: "medium"
88 fontSize: "medium"
88 color: textColor
89 color: textColor
89 font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
90 font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
@@ -99,13 +100,15 @@ LocalComponents.Page {
99 return i18n.ctr("Label: Type of security method", "No lock code");
100 return i18n.ctr("Label: Type of security method", "No lock code");
100 }
101 }
101 }
102 }
103+ width: parent.width
104+ wrapMode: Text.WordWrap
102 }
105 }
103
106
104 Image {
107 Image {
105 anchors {
108 anchors {
106− right: parent.right;
109+ right: parent.right
107− verticalCenter: parent.verticalCenter;
110+ verticalCenter: parent.verticalCenter
108− rightMargin: rightMargin
111+ rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
109 }
112 }
110 fillMode: Image.PreserveAspectFit
113 fillMode: Image.PreserveAspectFit
111 height: units.gu(1.5)
114 height: units.gu(1.5)
qml/Wizard/Pages/here-terms.qml+2−2
@@ -53,8 +53,8 @@ LocalComponents.Page {
53 Column {
53 Column {
54 id: column
54 id: column
55 anchors.fill: content
55 anchors.fill: content
56− anchors.leftMargin: leftMargin
56+ anchors.leftMargin: staticMargin
57− anchors.rightMargin: rightMargin
57+ anchors.rightMargin: staticMargin
58 spacing: units.gu(3)
58 spacing: units.gu(3)
59
59
60 Label {
60 Label {
qml/Wizard/Pages/sim.qml+2−2
@@ -66,8 +66,8 @@ LocalComponents.Page {
66 Column {
66 Column {
67 anchors {
67 anchors {
68 fill: content
68 fill: content
69− leftMargin: leftMargin
69+ leftMargin: staticMargin
70− rightMargin: rightMargin
70+ rightMargin: staticMargin
71 }
71 }
72 spacing: units.gu(3)
72 spacing: units.gu(3)
73
73