on xenial help sign in
reorder the pages to the current workflow

tweak TZ page visuals

commit9de76cadd27521f01b548f77054a81a2a71c0cc1 authorLukáš Tinkl <lukas.tinkl@canonical.com> dateThu 25 Jun 2015, 21:44 (11 years ago) parent25811f3
11 files changed+201−187
qml/Wizard/Pages/10-language.qml+1−1 qml/Wizard/Pages/15-country.qml+1−1 qml/Wizard/Pages/20-sim.qml+1 qml/Wizard/Pages/30-passwd-type.qml−135 qml/Wizard/Pages/40-wifi.qml → qml/Wizard/Pages/30-wifi.qml+9−11 qml/Wizard/Pages/45-timezone.qml → qml/Wizard/Pages/40-timezone.qml+32−32 qml/Wizard/Pages/60-passwd-type.qml+150 qml/Wizard/Pages/60-reporting.qml → qml/Wizard/Pages/70-reporting.qml qml/Wizard/Pages/data/tick@30.png qml/Wizard/Pages/passwd-confirm.qml+3−3 qml/Wizard/Pages/passwd-set.qml+4−4
qml/Wizard/Pages/10-language.qml+1−1
@@ -131,7 +131,7 @@ LocalComponents.Page {
131131 fillMode: Image.PreserveAspectFit
132132 height: langLabel.paintedHeight
133133
134− source: "image://theme/select"
134+ source: "data/tick@30.png"
135135 visible: itemDelegate.isCurrent
136136 }
137137
qml/Wizard/Pages/15-country.qml+1−1
@@ -146,7 +146,7 @@ LocalComponents.Page {
146146 fillMode: Image.PreserveAspectFit
147147 height: countryLabel.paintedHeight
148148
149− source: "image://theme/select"
149+ source: "data/tick@30.png"
150150 visible: itemDelegate.isCurrent
151151 }
152152
qml/Wizard/Pages/20-sim.qml+1
@@ -96,6 +96,7 @@ LocalComponents.Page {
9696 anchors.left: parent.left
9797 anchors.right: parent.right
9898 wrapMode: Text.Wrap
99+ textFormat: Text.RichText
99100 text: i18n.tr("To proceed with no SIM tap <em>Skip</em>.")
100101 fontSize: "small"
101102 font.weight: Font.Light
qml/Wizard/Pages/30-passwd-type.qmldeleted−135
@@ -1,135 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−import Ubuntu.Components.ListItems 1.0
20−import Ubuntu.SystemSettings.SecurityPrivacy 1.0
21−import ".." as LocalComponents
22−
23−/**
24− * One quirk with this page: we don't actually set the password. We avoid
25− * doing it here because the user can come back to this page and change their
26− * answer. We don't run as root, so if we did set the password immediately,
27− * we'd need to prompt for their previous password when they came back and
28− * changed their answer. Which is silly UX. So instead, we just keep track
29− * of their choice and set the password at the end (see main.qml).
30− * Setting the password shouldn't fail, since Ubuntu Touch has loose password
31− * requirements, but we'll check what we can here. Ideally we'd be able to ask
32− * the system if a password is legal without actually setting that password.
33− */
34−
35−LocalComponents.Page {
36− id: passwdPage
37− objectName: "passwdPage"
38−
39− title: i18n.tr("Lock security")
40− forwardButtonSourceComponent: forwardButton
41−
42− function indexToMethod(index) {
43− if (index === 0)
44− return UbuntuSecurityPrivacyPanel.Swipe
45− else if (index === 1)
46− return UbuntuSecurityPrivacyPanel.Passcode
47− else
48− return UbuntuSecurityPrivacyPanel.Passphrase
49− }
50−
51− function methodToIndex(method) {
52− if (method === UbuntuSecurityPrivacyPanel.Swipe)
53− return 0
54− else if (method === UbuntuSecurityPrivacyPanel.Passcode)
55− return 1
56− else
57− return 2
58− }
59−
60− Connections {
61− target: root
62− onPasswordMethodChanged: selector.selectedIndex = methodToIndex(root.passwordMethod)
63− }
64−
65− Column {
66− id: column
67− anchors.fill: content
68− spacing: units.gu(4)
69−
70− Label {
71− anchors.left: parent.left
72− anchors.right: parent.right
73− wrapMode: Text.Wrap
74− text: i18n.tr("Please select how you’d like to unlock your phone.")
75− }
76−
77− ItemSelector {
78− id: selector
79− expanded: true
80− anchors.left: parent.left
81− anchors.right: parent.right
82− property color originalBackground
83−
84− model: ["", "", ""] // otherwise the delegate will show the text itself and we only want subText
85−
86− selectedIndex: methodToIndex(root.passwordMethod)
87−
88− delegate: OptionSelectorDelegate {
89− objectName: "passwdDelegate" + index
90−
91− // use subText because we want the text to be small, and we have no other way to control it
92− subText: {
93− var method = indexToMethod(index)
94− var name = ""
95− var desc = ""
96− if (method === UbuntuSecurityPrivacyPanel.Swipe) {
97− name = i18n.ctr("Label: Type of security method", "Swipe")
98− desc = i18n.ctr("Label: Description of security method", "No security")
99− } else if (method === UbuntuSecurityPrivacyPanel.Passcode) {
100− name = i18n.ctr("Label: Type of security method", "Passcode")
101− desc = i18n.ctr("Label: Description of security method", "4 digits only")
102− } else {
103− name = i18n.ctr("Label: Type of security method", "Passphrase")
104− desc = i18n.ctr("Label: Description of security method", "Numbers and letters")
105− }
106− return "<b>%1</b> (%2)".arg(name).arg(desc)
107− }
108− }
109−
110− style: Item {}
111−
112− Component.onCompleted: {
113− // A visible selected background looks bad in ListItem widgets with our theme
114− originalBackground = Theme.palette.selected.background
115− Theme.palette.selected.background = "transparent"
116− }
117−
118− Component.onDestruction: {
119− // Restore original theme background
120− Theme.palette.selected.background = originalBackground
121− }
122− }
123− }
124−
125− Component {
126− id: forwardButton
127− LocalComponents.StackButton {
128− text: i18n.tr("Continue")
129− onClicked: {
130− root.passwordMethod = indexToMethod(selector.selectedIndex)
131− pageStack.load(Qt.resolvedUrl("passwd-set.qml"))
132− }
133− }
134− }
135−}
qml/Wizard/Pages/40-wifi.qml → qml/Wizard/Pages/30-wifi.qmlrenamed+9−11
@@ -17,7 +17,7 @@
1717import QtQuick 2.0
1818import QMenuModel 0.1 as QMenuModel
1919import QtSystemInfo 5.0
20−import Ubuntu.Components 0.1
20+import Ubuntu.Components 1.2
2121import Ubuntu.Components.ListItems 0.1 as ListItem
2222import Ubuntu.Settings.Menus 0.1 as Menus
2323import ".." as LocalComponents
@@ -129,9 +129,9 @@ LocalComponents.Page {
129129 accessPoint.activate();
130130 }
131131 }
132− style: Rectangle {
133− color: "#4c000000"
134− }
132+// style: Rectangle {
133+// color: "#4c000000"
134+// }
135135
136136 Component.onCompleted: {
137137 loadAttributes();
@@ -153,18 +153,16 @@ LocalComponents.Page {
153153 Column {
154154 id: column
155155 spacing: units.gu(2)
156− anchors.top: content.top
157− anchors.bottom: content.bottom
158− anchors.left: wifiPage.left
159− anchors.right: wifiPage.right
156+ anchors.fill: content
157+ anchors.topMargin: units.gu(4)
160158
161159 Label {
162160 id: label
163161 anchors.left: parent.left
164− anchors.leftMargin: leftMargin
165162 anchors.right: parent.right
166− anchors.rightMargin: rightMargin
167163 fontSize: "small"
164+ font.weight: Font.Light
165+ color: "black"
168166 text: mainMenu.count > 0 ? i18n.tr("Available networks…")
169167 : i18n.tr("No available networks.")
170168 }
@@ -212,7 +210,7 @@ LocalComponents.Page {
212210 Component {
213211 id: forwardButton
214212 LocalComponents.StackButton {
215− text: (connected || mainMenu.count === 0) ? i18n.tr("Continue") : i18n.tr("Skip")
213+ text: (connected || mainMenu.count === 0) ? i18n.tr("Next") : i18n.tr("Skip")
216214 onClicked: pageStack.next()
217215 }
218216 }
qml/Wizard/Pages/45-timezone.qml → qml/Wizard/Pages/40-timezone.qmlrenamed+32−32
@@ -39,6 +39,10 @@ LocalComponents.Page {
3939 filter: searchField.text
4040 }
4141
42+ Component.onCompleted: {
43+ theme.palette.normal.backgroundText = UbuntuColors.lightGrey // "fix" the placeholder text in the search field
44+ }
45+
4246 Component {
4347 id: tzComponent
4448 ListItem {
@@ -52,37 +56,36 @@ LocalComponents.Page {
5256 text: !!tzData ? tzData.city : ""
5357 anchors.left: parent.left
5458 anchors.top: parent.top
55− font.bold: tz.currentTz ? true : false
59+ anchors.topMargin: units.gu(3)
60+ font.weight: tz.currentTz ? Font.Normal : Font.Light
61+ fontSize: "medium"
62+ color: "black"
5663 }
5764 Label {
5865 id: timeLabel
59− text: !!tzData ? tzData.time : ""
60− anchors.right: parent.right
61− anchors.top: parent.top
62− font.bold: tz.currentTz ? true : false
63− }
64− Label {
65− id: countryLabel
66− text: !!tzData ? tzData.country : ""
66+ text: !!tzData ? tzData.time + " " + tzData.abbreviation : ""
6767 anchors.left: parent.left
68− anchors.top: cityLabel.bottom
69− fontSize: "x-small"
68+ anchors.bottom: parent.bottom
69+ anchors.bottomMargin: units.gu(3)
70+ font.weight: tz.currentTz ? Font.Normal : Font.Light
71+ fontSize: "medium"
72+ color: "black"
7073 }
74+ Image {
75+ anchors {
76+ right: parent.right;
77+ verticalCenter: parent.verticalCenter;
78+ }
79+ fillMode: Image.PreserveAspectFit
80+ height: cityLabel.paintedHeight
7181
72− Label {
73− id: abbrevLabel
74− text: !!tzData ? tzData.abbreviation : ""
75− anchors.right: parent.right
76− anchors.top: timeLabel.bottom
77− fontSize: "x-small"
82+ source: "data/tick@30.png"
83+ visible: tz.currentTz
7884 }
7985
80− MouseArea {
81− anchors.fill: parent
82− onClicked: {
83− tzModel.selectedZoneId = tzData.id
84− print("Selected tz: " + selectedTimeZone)
85− }
86+ onClicked: {
87+ tzModel.selectedZoneId = tzData.id
88+ print("Selected tz: " + selectedTimeZone)
8689 }
8790 }
8891 }
@@ -95,25 +98,21 @@ LocalComponents.Page {
9598
9699 Column {
97100 id: column
98− spacing: units.gu(2)
99− anchors.leftMargin: leftMargin
100− anchors.rightMargin: rightMargin
101− anchors.top: content.top
102− anchors.bottom: content.bottom
103− anchors.left: tzPage.left
104− anchors.right: tzPage.right
101+ spacing: units.gu(4)
102+ anchors.fill: content
103+ anchors.topMargin: units.gu(4)
105104
106105 TextField {
107106 id: searchField
108107 anchors.left: parent.left
109108 anchors.right: parent.right
110109 placeholderText: i18n.tr("Enter your city")
110+ color: UbuntuColors.darkGrey
111111 }
112112
113113 Flickable {
114114 anchors.left: parent.left
115115 anchors.right: parent.right
116− anchors.topMargin: topMargin
117116 height: column.height - searchField.height - column.spacing - topMargin
118117 contentHeight: contentItem.childrenRect.height
119118 clip: true
@@ -132,7 +131,7 @@ LocalComponents.Page {
132131 id: loader
133132 anchors.left: !!parent ? parent.left : undefined
134133 anchors.right: !!parent ? parent.right : undefined
135− height: units.gu(6)
134+ height: units.gu(11)
136135 asynchronous: true
137136 sourceComponent: tzComponent
138137
@@ -154,6 +153,7 @@ LocalComponents.Page {
154153 LocalComponents.StackButton {
155154 text: i18n.tr("Next")
156155 enabled: selectedTimeZone != ""
156+ // TODO save the timezone to system
157157 onClicked: pageStack.next()
158158 }
159159 }
qml/Wizard/Pages/60-passwd-type.qmlnew file+150
@@ -0,0 +1,150 @@
1+/*
2+ * Copyright (C) 2014 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.3
18+import Ubuntu.Components 1.2
19+import Ubuntu.SystemSettings.SecurityPrivacy 1.0
20+import ".." as LocalComponents
21+
22+/**
23+ * One quirk with this page: we don't actually set the password. We avoid
24+ * doing it here because the user can come back to this page and change their
25+ * answer. We don't run as root, so if we did set the password immediately,
26+ * we'd need to prompt for their previous password when they came back and
27+ * changed their answer. Which is silly UX. So instead, we just keep track
28+ * of their choice and set the password at the end (see main.qml).
29+ * Setting the password shouldn't fail, since Ubuntu Touch has loose password
30+ * requirements, but we'll check what we can here. Ideally we'd be able to ask
31+ * the system if a password is legal without actually setting that password.
32+ */
33+
34+LocalComponents.Page {
35+ id: passwdPage
36+ objectName: "passwdPage"
37+
38+ title: i18n.tr("Lock security")
39+ forwardButtonSourceComponent: forwardButton
40+
41+ function indexToMethod(index) {
42+ if (index === 0)
43+ return UbuntuSecurityPrivacyPanel.Passcode
44+ else if (index === 1)
45+ return UbuntuSecurityPrivacyPanel.Passphrase
46+ else
47+ return UbuntuSecurityPrivacyPanel.Swipe
48+ }
49+
50+ function methodToIndex(method) {
51+ if (method === UbuntuSecurityPrivacyPanel.Swipe)
52+ return 2
53+ else if (method === UbuntuSecurityPrivacyPanel.Passcode)
54+ return 0
55+ else
56+ return 1
57+ }
58+
59+ Component.onCompleted: {
60+ selector.currentIndex = methodToIndex(root.passwordMethod)
61+ }
62+
63+ Column {
64+ id: column
65+ anchors.fill: content
66+ spacing: units.gu(4)
67+ anchors.topMargin: units.gu(4)
68+
69+ Label {
70+ anchors.left: parent.left
71+ anchors.right: parent.right
72+ wrapMode: Text.Wrap
73+ text: i18n.tr("Choose how to secure your device to protect your personal information.")
74+ color: "black"
75+ fontSize: "small"
76+ font.weight: Font.Light
77+ }
78+
79+ ListView {
80+ id: selector
81+ anchors.left: parent.left
82+ anchors.right: parent.right
83+
84+ boundsBehavior: Flickable.StopAtBounds;
85+ clip: true;
86+ height: column.height
87+
88+ // this is the order we want to display it; cf indexToMethod()
89+ model: [UbuntuSecurityPrivacyPanel.Passcode, UbuntuSecurityPrivacyPanel.Passphrase, UbuntuSecurityPrivacyPanel.Swipe]
90+
91+ delegate: ListItem {
92+ id: itemDelegate
93+ readonly property bool isCurrent: index === ListView.view.currentIndex
94+ Label {
95+ id: methodLabel
96+ objectName: "passwdDelegate" + index
97+ anchors.verticalCenter: parent.verticalCenter;
98+ fontSize: "medium"
99+ color: "black"
100+ font.weight: itemDelegate.isCurrent ? Font.Normal : Font.Light
101+ text: {
102+ var method = modelData
103+ var name = ""
104+ var desc = ""
105+ if (method === UbuntuSecurityPrivacyPanel.Swipe) {
106+ return i18n.ctr("Label: Type of security method", "None")
107+ } else if (method === UbuntuSecurityPrivacyPanel.Passcode) {
108+ name = i18n.ctr("Label: Type of security method", "Passcode")
109+ desc = i18n.ctr("Label: Description of security method", "4 digits only")
110+ } else {
111+ name = i18n.ctr("Label: Type of security method", "Password")
112+ desc = i18n.ctr("Label: Description of security method", "numbers and letters")
113+ }
114+ return "%1 (%2)".arg(name).arg(desc)
115+ }
116+ }
117+
118+ Image {
119+ anchors {
120+ right: parent.right;
121+ verticalCenter: parent.verticalCenter;
122+ }
123+ fillMode: Image.PreserveAspectFit
124+ height: methodLabel.paintedHeight
125+
126+ source: "data/tick@30.png"
127+ visible: itemDelegate.isCurrent
128+ }
129+
130+ onClicked: {
131+ selector.currentIndex = index
132+ print("Current method: " + indexToMethod(index))
133+ }
134+ }
135+ }
136+ }
137+
138+ Component {
139+ id: forwardButton
140+ LocalComponents.StackButton {
141+ text: i18n.tr("Next")
142+ onClicked: {
143+ print("Clicked next")
144+ root.passwordMethod = indexToMethod(selector.currentIndex)
145+ print("Current method: " + root.passwordMethod)
146+ pageStack.load(Qt.resolvedUrl("passwd-set.qml"))
147+ }
148+ }
149+ }
150+}
qml/Wizard/Pages/60-reporting.qml → qml/Wizard/Pages/70-reporting.qmlrenamed

The content is the same.

qml/Wizard/Pages/data/tick@30.pngnew file

Binary file not shown.

qml/Wizard/Pages/passwd-confirm.qml+3−3
@@ -46,12 +46,12 @@ LocalComponents.Page {
4646 }
4747
4848 infoText: root.passwordMethod === UbuntuSecurityPrivacyPanel.Passphrase ?
49− i18n.tr("Confirm passphrase") :
49+ i18n.tr("Confirm password") :
5050 i18n.tr("Confirm passcode")
5151
5252 errorText: root.passwordMethod === UbuntuSecurityPrivacyPanel.Passphrase ?
53− i18n.tr("Sorry, incorrect passphrase.") + "\n" + i18n.tr("Please try again.") :
54− i18n.tr("Sorry, incorrect passcode.") + "\n" + i18n.tr("Please try again.")
53+ i18n.tr("Incorrect password.") + "\n" + i18n.tr("Please re-enter.") :
54+ i18n.tr("Incorrect passcode.") + "\n" + i18n.tr("Please re-enter.")
5555
5656 showEmergencyCallButton: false
5757 showCancelButton: false
qml/Wizard/Pages/passwd-set.qml+4−4
@@ -15,7 +15,7 @@
1515 */
1616
1717import QtQuick 2.3
18−import Ubuntu.Components 1.1
18+import Ubuntu.Components 1.2
1919import Ubuntu.SystemSettings.SecurityPrivacy 1.0
2020import ".." as LocalComponents
2121import "../../Components" as UnityComponents
@@ -57,8 +57,8 @@ LocalComponents.Page {
5757 }
5858
5959 infoText: root.passwordMethod === UbuntuSecurityPrivacyPanel.Passphrase ?
60− i18n.tr("Enter passphrase") :
61− i18n.tr("Choose your passcode")
60+ i18n.tr("Enter password") :
61+ i18n.tr("Choose passcode")
6262
6363 // Note that the number four comes from PAM settings,
6464 // which we don't have a good way to interrogate. We
@@ -87,7 +87,7 @@ LocalComponents.Page {
8787 LocalComponents.StackButton {
8888 visible: root.passwordMethod === UbuntuSecurityPrivacyPanel.Passphrase
8989 enabled: lockscreen.passphrase.length >= 4
90− text: i18n.tr("Continue")
90+ text: i18n.tr("Next")
9191 onClicked: passwdSetPage.confirm()
9292 }
9393 }