Merge lp:~nik90/telegram-app/settings-listitemlayouts into lp:telegram-app

[Nekhelesh Ramananthan]

- migrated settings listitem to listitemlayouts
- updated framework to ubuntu-sdk-15.04.3 (available since OTA-9)
- fixed chroot dependency typo in README.md
- Refactored SubtitledListItem

This MP,
- migrates settings listitem to listitemlayouts
- updated framework to ubuntu-sdk-15.04.3 (available since OTA-9)
- fixed chroot dependency typo in README.md
- Refactored SubtitledListItem

[Jin (jindallo)]

Hello buddy,

Please kindly feedback us what you think about the comment we left,
and feel free to contact us when you are available.

Now this merge request is on hold.

review: Needs Information

[Nekhelesh Ramananthan (nik90)]

Hmm I don't get email notifications when you just add diff comments without actually adding a comment in the MP. Strange.

Anyway, I updated the framework to keep up with the OTA version after all telegram is one of the core apps shipped on the phone. I would expect it to be up to date when it comes to framework versions.

[Tim Peeters (tpeeters)]

IF this goes in first: https://code.launchpad.net/~tpeeters/telegram-app/new-header/+merge/297787 (it is urgent because we don't want to show the red outline to warn for using the deprecated header to the users), then there will be a merge conflict in this branch. Should not be too hard to solve, but if there are issues (or you want more information), feel free to ask me :)

Unmerged revisions

160. By Nekhelesh Ramananthan on 2016-03-05

Refactored SubtitledListItem and reverted back to ListItem.Header

159. By Nekhelesh Ramananthan on 2016-03-05

Updated framework to ubuntu-sdk-15.04.3

158. By Nekhelesh Ramananthan on 2016-03-05

Converted settings page listitems to ListItemLayout

157. By Nekhelesh Ramananthan on 2016-03-04

Fixed dependency typo in README.md

=== modified file 'README.md'
--- README.md	2015-10-12 14:07:59 +0000
+++ README.md	2016-03-05 12:47:04 +0000
@@ -11,7 +11,7 @@
 #### Get and build dependencies.
 
 In the above click chroot, install:
-    libthumbnailer-qt-dev libthumbnailer-qt1.0:armhf thumbnailer-service:armhf
+    libthumbnailer-qt-dev:armhf libthumbnailer-qt1.0:armhf thumbnailer-service:armhf
 
 This app requires:
 - libqtelegram-aseman-edition library and
 
=== modified file 'telegram/app/qml/AccountSettings.qml'
--- telegram/app/qml/AccountSettings.qml	2015-11-16 11:26:36 +0000
+++ telegram/app/qml/AccountSettings.qml	2016-03-05 12:47:04 +0000
@@ -1,9 +1,8 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 0.1 as ListItem
-import Ubuntu.Components.Popups 1.0 as Popup
+import Ubuntu.Components.Popups 1.3 as Popup
 import Ubuntu.Content 1.0
-
+import Ubuntu.Components.ListItems 1.3 as ListItems
 import TelegramQML 1.0
 
 import "components"
@@ -33,8 +32,10 @@
     ]
 
     objectName: "settingsPage"
-    title: i18n.tr("Settings")
-    head.actions: actions
+    header: PageHeader {
+        title: i18n.tr("Settings")
+        trailingActionBar.actions: actions
+    }
 
     function changeFullName() {
         var properties = { "telegram": telegram, "firstName": user.firstName, "lastName": user.lastName };
@@ -89,119 +90,142 @@
     VisualItemModel {
         id: model
 
-        ListItem.Header {
+        ListItems.Header {
             // TRANSLATORS: Settings section header, visible above phone and username fields.
             text: i18n.tr("Info")
         }
 
-        ListItem.Subtitled {
-            text: telegram.phoneNumber
-            // TRANSLATORS: Visible right under phone number in settings page.
-            subText: i18n.tr("Phone")
-            showDivider: false
-            highlightWhenPressed: false
+        ListItem {
+            divider.visible: false
+            height: units.gu(6)
+            ListItemLayout {
+                id: phoneNumberLayout
+                title.text: telegram.phoneNumber
+                // TRANSLATORS: Visible right under phone number in settings page.
+                subtitle.text: i18n.tr("Phone")
+                padding.bottom: units.gu(1)
+                padding.top: units.gu(1)
+            }
         }
 
-        ListItem.Subtitled {
-            text: user.username
-            // TRANSLATORS: Visible right under username in settings page.
-            subText: i18n.tr("Username")
-            showDivider: false
+        ListItem {
+            divider.visible: false
+            height: units.gu(6)
+            ListItemLayout {
+                id: usernameLayout
+                title.text: user.username
+                // TRANSLATORS: Visible right under username in settings page.
+                subtitle.text: i18n.tr("Username")
+                padding.bottom: units.gu(1)
+                padding.top: units.gu(1)
+            }
             onClicked: changeUsername()
         }
 
-        ListItem.Header {
+        ListItems.Header {
             // TRANSLATORS: Settings section header.
             text: i18n.tr("Messages")
         }
 
-        ListItem.Standard {
-            // TRANSLATORS: Text of notifications switch in settings.
-            text: i18n.tr("Notifications")
-            height: visible ? implicitHeight : 0
-            visible: (Cutegram.pushNumber == telegram.phoneNumber)
-            showDivider: false
-
-            Switch {
-                checked: Cutegram.pushNotifications
-                anchors {
-                    right: parent.right
-                    rightMargin: units.gu(2)
-                    verticalCenter: parent.verticalCenter
-                }
-
-                onCheckedChanged: {
-                    Cutegram.pushNotifications = checked;
-
-                    if (pushClient.token == "") {
-                        if (checked) {
-                            Cutegram.pushNotifications = false;
-                            mainView.openPushDialog();
-                        }
-                    } else {
-                        if (checked) {
-                            pushClient.registerForPush();
+        ListItem {
+            divider.visible: false
+            height: visible ? units.gu(6) : 0
+            visible: (Cutegram.pushNumber === telegram.phoneNumber)
+
+            ListItemLayout {
+                id: notificationLayout
+                // TRANSLATORS: Text of notifications switch in settings.
+                title.text: i18n.tr("Notifications")
+
+                Switch {
+                    checked: Cutegram.pushNotifications
+                    SlotsLayout.position: SlotsLayout.Last
+
+                    onCheckedChanged: {
+                        Cutegram.pushNotifications = checked;
+
+                        if (pushClient.token == "") {
+                            if (checked) {
+                                Cutegram.pushNotifications = false;
+                                mainView.openPushDialog();
+                            }
                         } else {
-                            pushClient.unregisterFromPush();
+                            if (checked) {
+                                pushClient.registerForPush();
+                            } else {
+                                pushClient.unregisterFromPush();
+                            }
                         }
                     }
                 }
             }
         }
 
-        ListItem.Standard {
-            text: i18n.tr("Send by Enter")
-            showDivider: false
+        ListItem {
+            divider.visible: false
+            height: units.gu(6)
+            ListItemLayout {
+                title.text: i18n.tr("Send by Enter")
 
-            Switch {
-                checked: Cutegram.sendWithEnter
-                anchors {
-                    right: parent.right
-                    rightMargin: units.gu(2)
-                    verticalCenter: parent.verticalCenter
+                Switch {
+                    checked: Cutegram.sendWithEnter
+                    SlotsLayout.position: SlotsLayout.Last
+                    onCheckedChanged: Cutegram.sendWithEnter = checked
                 }
-
-                onCheckedChanged: Cutegram.sendWithEnter = checked
             }
         }
 
         // TODO Terminate all sessions
 
-        ListItem.Header {
+        ListItems.Header {
             // TRANSLATORS: Settings section header.
             text: i18n.tr("Support")
         }
 
-        ListItem.Standard {
-            showDivider: false
-            // TRANSLATORS: Text of settings item visible in the Support section.
-            text: i18n.tr("Ask a Question")
+        ListItem {
+            height: units.gu(6)
+            divider.visible: false
+            ListItemLayout {
+                // TRANSLATORS: Text of settings item visible in the Support section.
+                title.text: i18n.tr("Ask a Question")
+            }
             onClicked: Qt.openUrlExternally("http://askubuntu.com/search?q=telegram")
         }
 
-        ListItem.Standard {
-            showDivider: false
-            // TRANSLATORS: Text of settings item visible in the Support section
-            text: i18n.tr("Telegram FAQ")
+        ListItem {
+            height: units.gu(6)
+            divider.visible: false
+            ListItemLayout {
+                // TRANSLATORS: Text of settings item visible in the Support section
+                title.text: i18n.tr("Telegram FAQ")
+            }
             onClicked: Qt.openUrlExternally("https://telegram.org/faq")
         }
 
-        ListItem.Header {
-            // TRANSLATORS: Settings section header.
-            text: i18n.tr("Account")
+        ListItem {
+            height: units.gu(4)
+            ListItemLayout {
+                // TRANSLATORS: Settings section header.
+                title.text: i18n.tr("Account")
+                title.font.weight: Font.DemiBold
+                padding.bottom: units.gu(1)
+                padding.top: units.gu(1)
+            }
         }
 
-        ListItem.Standard {
-            showDivider: true
-            text: i18n.tr("Log out") + " | " + telegram.phoneNumber
+        ListItem {
+            height: units.gu(6)
+            ListItemLayout {
+                title.text: i18n.tr("Log out") + " | " + telegram.phoneNumber
+            }
             onClicked: PopupUtils.open(logout_dialog_component)
         }
 
-        ListItem.SingleControl {
-            showDivider: false
-            control: Label {
+        ListItem {
+            divider.visible: false
+            Label {
                 width: parent.width
-                height: units.gu(5)
+                height: units.gu(6)
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 // TRANSLATORS: Visible at bottom of settings screen. The argument is application version.
@@ -222,7 +246,7 @@
     ClickableContactImage {
         id: profile_image
         anchors {
-            top: parent.top
+            top: page.header.bottom
             topMargin: units.gu(2)
             left: parent.left
             leftMargin: units.gu(2)
@@ -247,13 +271,9 @@
             right: parent.right
             verticalCenter: profile_image.verticalCenter
         }
-        highlightWhenPressed: false
-        divider.visible: false
 
-        title: user.firstName + " " + user.lastName
-        titleIsBold: true
-        titleMaxLineCount: 2
-        subtitle: {
+        title.text: user.firstName + " " + user.lastName
+        subtitle.text: {
             var result = "";
             switch(user.status.classType)
             {
 
=== modified file 'telegram/app/qml/ProfilePage.qml'
--- telegram/app/qml/ProfilePage.qml	2015-11-16 11:26:59 +0000
+++ telegram/app/qml/ProfilePage.qml	2016-03-05 12:47:04 +0000
@@ -202,10 +202,8 @@
             right: parent.right
             verticalCenter: profile_image.verticalCenter
         }
-        highlightWhenPressed: false
-        divider.visible: false
 
-        title: {
+        title.text: {
             if (!dialog) return "";
 
             if (isChat)
@@ -214,9 +212,7 @@
                 return user ? user.firstName + " " + user.lastName : ""//emojis.textToEmojiText(user ? user.firstName + " " + user.lastName : "", 18, true);
         }
 
-        titleIsBold: true
-        titleMaxLineCount: 2
-        subtitle: {
+        subtitle.text: {
             //groupModel.count + " " + i18n.tr("members")
 
             var result = ""
 
=== modified file 'telegram/app/qml/components/SubtitledListItem.qml'
--- telegram/app/qml/components/SubtitledListItem.qml	2015-09-30 14:55:01 +0000
+++ telegram/app/qml/components/SubtitledListItem.qml	2016-03-05 12:47:04 +0000
@@ -1,59 +1,21 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.0 as ListItem
 
-ListItem.Empty {
+ListItem {
     id: item
-    width: parent.width
-    height: units.gu(8)
-
-    property string title: ""
-    property string titleColor: UbuntuColors.darkGrey
-    property bool titleIsBold: false
-    property int titleMaxLineCount: 1
-    property string subtitle: ""
-    property string subtitleColor: UbuntuColors.lightGrey
-    property bool subtitleIsBold: false
-
-    Text {
-        id: title
-        anchors {
-            top: parent.top
-            topMargin: units.gu(1)
-            left: parent.left
-            leftMargin: units.gu(2)
-            right: parent.right
-            rightMargin: units.gu(2)
-        }
-        width: parent.width
-        verticalAlignment: TextInput.AlignVCenter
-
-        maximumLineCount: item.titleMaxLineCount
-        wrapMode: Text.Wrap
-        elide: Text.ElideRight
-        font.pixelSize: FontUtils.sizeToPixels("large")
-        font.weight: item.titleIsBold ? Font.Bold : Font.Light
-        color: item.titleColor
-        text: item.title
-    }
-
-    Text {
-        id: subtitle
-        anchors {
-            top: title.bottom
-            topMargin: units.dp(4)
-            left: title.left
-            bottom: parent.bottom
-            bottomMargin: units.gu(1)
-            right: title.right
-        }
-        width: parent.width
-        verticalAlignment: TextInput.AlignVCenter
-
-        elide: Text.ElideRight
-        font.pixelSize: FontUtils.sizeToPixels("medium")
-        font.weight: item.subtitleIsBold ? Font.Bold : Font.Light
-        color: item.subtitleColor
-        text: item.subtitle
+
+    property alias title: itemLayout.title
+    property alias subtitle: itemLayout.subtitle
+
+    height: itemLayout.height
+    divider.visible: false
+
+    ListItemLayout {
+        id: itemLayout
+
+        title.font.bold: true
+        title.wrapMode: Text.Wrap
+        title.textSize: Label.Large
+        title.maximumLineCount: 2
     }
 }
 
=== modified file 'telegram/manifest.json.in'
--- telegram/manifest.json.in	2016-03-03 04:17:25 +0000
+++ telegram/manifest.json.in	2016-03-05 12:47:04 +0000
@@ -1,7 +1,7 @@
 {
     "name": "com.ubuntu.telegram",
     "description": "Telegram for Ubuntu Phone",
-    "framework" : "ubuntu-sdk-15.04.1",
+    "framework": "ubuntu-sdk-15.04.3",
     "architecture": "@CLICK_ARCH@",
     "title": "Telegram",
     "hooks": {
@@ -9,7 +9,7 @@
             "account-application": "telegram.application",
             "apparmor": "apparmor-telegram.json",
             "content-hub": "content-hub.json",
-            "desktop":  "telegram.desktop",
+            "desktop": "telegram.desktop",
             "urls": "urls.json"
         },
         "push": {
@@ -24,4 +24,3 @@
     "version": "2.0.8.1",
     "maintainer": "Ubuntu Telegram team <[e-mail]>"
 }
-