on xenial help sign in
desktop mode improvements, flexible margins
commit7b7f46f806367965c34be677cb588e81ff750617 authorLukáš Tinkl <lukas.tinkl@canonical.com> dateThu 17 Dec 2015, 22:13 (11 years ago) parent1356e8b
8 files changed+91−83
qml/Wizard/Page.qml+8−5 qml/Wizard/Pages/10-welcome.qml+42−47 qml/Wizard/Pages/30-wifi.qml+4−2 qml/Wizard/Pages/40-location.qml+16−14 qml/Wizard/Pages/50-timezone.qml+9−6 qml/Wizard/Pages/70-passwd-type.qml+8−5 qml/Wizard/Pages/here-terms.qml+2−2 qml/Wizard/Pages/sim.qml+2−2
qml/Wizard/Page.qml+8−5
@@ -19,6 +19,8 @@ import Ubuntu.Components 1.3
1919import Wizard 0.1
2020
2121Item {
22+ readonly property real maximumContentWidth: units.gu(50)
23+
2224 readonly property real buttonMargin: units.gu(3)
2325 readonly property real buttonWidth: (width - buttonMargin * 2) / 2 -
2426 buttonMargin / 2
@@ -27,9 +29,10 @@ Item {
2729
2830 readonly property real topMargin: units.gu(11)
2931 readonly property real bottomMargin: units.gu(3)
30− readonly property real leftMargin: units.gu(3)
31− readonly property real rightMargin: units.gu(3)
32+ readonly property real leftMargin: Math.max(units.gu(3), (width - maximumContentWidth) / 3)
33+ readonly property real rightMargin: leftMargin
3234 readonly property real customMargin: units.gu(4) // margin for the custom (w/o title image) pages
35+ readonly property real staticMargin: units.gu(3)
3336
3437 // colors
3538 readonly property color backgroundColor: "#fdfdfd"
@@ -94,7 +97,7 @@ Item {
9497 right: parent.right
9598 bottom: parent.bottom
9699 bottomMargin: bottomMargin
97− leftMargin: leftMargin + titleLabel.animatedMargin
100+ leftMargin: staticMargin + titleLabel.animatedMargin
98101 rightMargin: rightMargin
99102 topMargin: titleLabel.animatedTopMargin
100103 }
@@ -191,7 +194,7 @@ Item {
191194 anchors {
192195 left: parent.left
193196 bottom: parent.bottom
194− leftMargin: leftMargin
197+ leftMargin: staticMargin
195198 verticalCenter: parent.verticalCenter
196199 }
197200 z: 1
@@ -209,7 +212,7 @@ Item {
209212 anchors {
210213 right: parent.right
211214 bottom: parent.bottom
212− rightMargin: rightMargin
215+ rightMargin: staticMargin
213216 verticalCenter: parent.verticalCenter
214217 }
215218 z: 1
qml/Wizard/Pages/10-welcome.qml+42−47
@@ -88,62 +88,57 @@ LocalComponents.Page {
8888 onStopped: init();
8989 }
9090
91− Column {
92− id: column
93− anchors.fill: content
94−
95− ListView {
96− id: languagesListView
97− clip: true
98− snapMode: ListView.SnapToItem
99−
100− anchors {
101− left: parent.left
102− right: parent.right
103− }
91+ ListView {
92+ id: languagesListView
93+ clip: true
94+ snapMode: ListView.SnapToItem
95+
96+ anchors {
97+ fill: content
98+ leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
99+ rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
100+ topMargin: parent.width > maximumContentWidth ? parent.customMargin : 0
101+ }
104102
105− height: column.height
103+ model: plugin.languageNames
106104
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
108110
109− delegate: ListItem {
110− id: itemDelegate
111− objectName: "languageDelegate" + index
112− highlightColor: backgroundColor
113− readonly property bool isCurrent: index === ListView.view.currentIndex
111+ Label {
112+ id: langLabel
113+ text: modelData
114114
115− Label {
116− id: langLabel
117− text: modelData
115+ anchors {
116+ left: parent.left
117+ verticalCenter: parent.verticalCenter
118+ leftMargin: languagesListView.anchors.leftMargin == 0 ? staticMargin : 0
119+ }
118120
119− anchors {
120− left: parent.left
121− verticalCenter: parent.verticalCenter
122− leftMargin: leftMargin
123− }
121+ fontSize: "medium"
122+ font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
123+ color: textColor
124+ }
124125
125− fontSize: "medium"
126− font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
127− color: textColor
126+ Image {
127+ anchors {
128+ right: parent.right;
129+ verticalCenter: parent.verticalCenter;
130+ rightMargin: languagesListView.anchors.rightMargin == 0 ? staticMargin : 0
128131 }
132+ fillMode: Image.PreserveAspectFit
133+ height: units.gu(1.5)
129134
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"
140− visible: itemDelegate.isCurrent
141− }
135+ source: "data/Tick@30.png"
136+ visible: itemDelegate.isCurrent
137+ }
142138
143− onClicked: {
144− languagesListView.currentIndex = index;
145− i18n.language = plugin.languageCodes[index];
146− }
139+ onClicked: {
140+ languagesListView.currentIndex = index;
141+ i18n.language = plugin.languageCodes[index];
147142 }
148143 }
149144 }
qml/Wizard/Pages/30-wifi.qml+4−2
@@ -104,7 +104,7 @@ LocalComponents.Page {
104104 anchors {
105105 left: parent.left
106106 verticalCenter: parent.verticalCenter
107− leftMargin: leftMargin
107+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
108108 }
109109 height: units.gu(2.5)
110110 width: height
@@ -153,13 +153,15 @@ LocalComponents.Page {
153153 anchors {
154154 fill: content
155155 topMargin: customMargin
156+ leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
157+ rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
156158 }
157159
158160 Label {
159161 id: label
160162 anchors.left: parent.left
161163 anchors.right: parent.right
162− anchors.leftMargin: leftMargin
164+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
163165 font.weight: Font.Light
164166 color: "#68064d"
165167 wrapMode: Text.Wrap
qml/Wizard/Pages/40-location.qml+16−14
@@ -54,6 +54,8 @@ LocalComponents.Page {
5454 id: column
5555 anchors.fill: content
5656 anchors.topMargin: customMargin
57+ anchors.leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
58+ anchors.rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
5759
5860 Item {
5961 id: hereCheckGroup
@@ -62,7 +64,7 @@ LocalComponents.Page {
6264 right: parent.right
6365 top: parent.top
6466 }
65− height: childrenRect.height
67+ height: hereCheckLabel.height + hereTermsLabel.height
6668
6769 Label {
6870 id: hereCheckLabel
@@ -71,8 +73,8 @@ LocalComponents.Page {
7173 left: parent.left
7274 right: hereTermsCheck.left
7375 top: parent.top
74− leftMargin: leftMargin
75− rightMargin: rightMargin/2
76+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
77+ rightMargin: units.gu(2)
7678 }
7779 lineHeight: 1.2
7880 wrapMode: Text.WordWrap
@@ -90,8 +92,8 @@ LocalComponents.Page {
9092 right: hereTermsCheck.left
9193 top: hereCheckLabel.bottom
9294 topMargin: units.gu(1)
93− leftMargin: leftMargin
94− rightMargin: rightMargin/2
95+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
96+ rightMargin: units.gu(2)
9597 }
9698
9799 wrapMode: Text.WordWrap
@@ -116,7 +118,7 @@ LocalComponents.Page {
116118 opacity: hereCheckLabel.checked ? 1 : 0
117119 anchors.right: parent.right
118120 anchors.verticalCenter: hereCheckLabel.verticalCenter
119− anchors.rightMargin: rightMargin
121+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
120122 }
121123
122124 MouseArea {
@@ -151,8 +153,8 @@ LocalComponents.Page {
151153 right: parent.right
152154 top: divider.bottom
153155 topMargin: units.gu(3)
154− leftMargin: leftMargin
155− rightMargin: rightMargin/2
156+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
157+ rightMargin: units.gu(2)
156158 }
157159 text: i18n.tr("GPS only")
158160 wrapMode: Text.WordWrap
@@ -180,7 +182,7 @@ LocalComponents.Page {
180182 opacity: gpsCheckLabel.checked ? 1 : 0
181183 anchors.right: parent.right
182184 anchors.verticalCenter: gpsCheckLabel.verticalCenter
183− anchors.rightMargin: rightMargin
185+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
184186 }
185187
186188 Rectangle {
@@ -201,8 +203,8 @@ LocalComponents.Page {
201203 right: parent.right
202204 top: divider2.bottom
203205 topMargin: units.gu(3)
204− leftMargin: leftMargin
205− rightMargin: rightMargin/2
206+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
207+ rightMargin: units.gu(2)
206208 }
207209 wrapMode: Text.WordWrap
208210 color: textColor
@@ -230,7 +232,7 @@ LocalComponents.Page {
230232 opacity: nopeCheckLabel.checked ? 1 : 0
231233 anchors.right: parent.right
232234 anchors.verticalCenter: nopeCheckLabel.verticalCenter
233− anchors.rightMargin: rightMargin
235+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
234236 }
235237
236238 Rectangle {
@@ -250,8 +252,8 @@ LocalComponents.Page {
250252 right: parent.right
251253 top: divider3.bottom
252254 topMargin: units.gu(4)
253− leftMargin: leftMargin
254− rightMargin: rightMargin
255+ leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
256+ rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
255257 }
256258 wrapMode: Text.Wrap
257259 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 {
7373 Column {
7474 anchors.verticalCenter: parent.verticalCenter
7575 anchors.left: parent.left
76− anchors.leftMargin: leftMargin
76+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
7777 anchors.right: image.left
78− anchors.rightMargin: rightMargin/2
78+ anchors.rightMargin: units.gu(2)
79+
7980 Label {
8081 id: cityLabel
8182 text: displayName
@@ -99,7 +100,7 @@ LocalComponents.Page {
99100 anchors {
100101 right: parent.right
101102 verticalCenter: parent.verticalCenter
102− rightMargin: rightMargin
103+ rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
103104 }
104105 fillMode: Image.PreserveAspectFit
105106 height: units.gu(1.5)
@@ -120,6 +121,8 @@ LocalComponents.Page {
120121 anchors {
121122 fill: content
122123 topMargin: customMargin
124+ leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
125+ rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
123126 }
124127
125128 LocalComponents.WizardTextField {
@@ -127,8 +130,8 @@ LocalComponents.Page {
127130 objectName: "tzFilter"
128131 anchors.left: parent.left
129132 anchors.right: parent.right
130− anchors.leftMargin: leftMargin
131− anchors.rightMargin: rightMargin
133+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
134+ anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
132135 placeholderText: i18n.tr("Enter your city")
133136 inputMethodHints: Qt.ImhNoPredictiveText
134137 onTextChanged: {
@@ -150,7 +153,7 @@ LocalComponents.Page {
150153 }
151154
152155 ListView {
153− id: tzList;
156+ id: tzList
154157 objectName: "tzList"
155158 clip: true
156159 currentIndex: -1
qml/Wizard/Pages/70-passwd-type.qml+8−5
@@ -59,6 +59,8 @@ LocalComponents.Page {
5959 id: column
6060 anchors.fill: content
6161 anchors.topMargin: customMargin
62+ anchors.leftMargin: parent.width > maximumContentWidth ? parent.leftMargin : 0
63+ anchors.rightMargin: parent.width > maximumContentWidth ? parent.rightMargin : 0
6264
6365 ListView {
6466 id: selector
@@ -80,10 +82,9 @@ LocalComponents.Page {
8082 divider.colorFrom: dividerColor
8183 divider.colorTo: backgroundColor
8284 Label {
83− id: methodLabel
8485 anchors.verticalCenter: parent.verticalCenter;
8586 anchors.left: parent.left
86− anchors.leftMargin: leftMargin
87+ anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
8788 fontSize: "medium"
8889 color: textColor
8990 font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
@@ -99,13 +100,15 @@ LocalComponents.Page {
99100 return i18n.ctr("Label: Type of security method", "No lock code");
100101 }
101102 }
103+ width: parent.width
104+ wrapMode: Text.WordWrap
102105 }
103106
104107 Image {
105108 anchors {
106− right: parent.right;
107− verticalCenter: parent.verticalCenter;
108− rightMargin: rightMargin
109+ right: parent.right
110+ verticalCenter: parent.verticalCenter
111+ rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
109112 }
110113 fillMode: Image.PreserveAspectFit
111114 height: units.gu(1.5)
qml/Wizard/Pages/here-terms.qml+2−2
@@ -53,8 +53,8 @@ LocalComponents.Page {
5353 Column {
5454 id: column
5555 anchors.fill: content
56− anchors.leftMargin: leftMargin
57− anchors.rightMargin: rightMargin
56+ anchors.leftMargin: staticMargin
57+ anchors.rightMargin: staticMargin
5858 spacing: units.gu(3)
5959
6060 Label {
qml/Wizard/Pages/sim.qml+2−2
@@ -66,8 +66,8 @@ LocalComponents.Page {
6666 Column {
6767 anchors {
6868 fill: content
69− leftMargin: leftMargin
70− rightMargin: rightMargin
69+ leftMargin: staticMargin
70+ rightMargin: staticMargin
7171 }
7272 spacing: units.gu(3)
7373