ubuntu-touch-coreapps-reviewers team mailing list archive
-
ubuntu-touch-coreapps-reviewers team
-
Mailing list archive
-
Message #06250
[Merge] lp:~verzegnassi-stefano/ubuntu-docviewer-app/reboot-uitk13-listitemlayout into lp:ubuntu-docviewer-app
Stefano Verzegnassi has proposed merging lp:~verzegnassi-stefano/ubuntu-docviewer-app/reboot-uitk13-listitemlayout into lp:ubuntu-docviewer-app with lp:~verzegnassi-stefano/ubuntu-docviewer-app/reboot-uitk13 as a prerequisite.
Commit message:
Use UITK 1.3 ListItemLayout
Requested reviews:
Roman Shchekin (mrqtros)
For more details, see:
https://code.launchpad.net/~verzegnassi-stefano/ubuntu-docviewer-app/reboot-uitk13-listitemlayout/+merge/278875
Use ListItemLayout to provide a proper layouting inside ListItem.
*** REFERENCES
ListItemLayout example:
http://bazaar.launchpad.net/~ubuntu-sdk-team/ubuntu-ui-toolkit/staging/view/1665/examples/ubuntu-ui-toolkit-gallery/ListItemLayouts.qml
UI/UX ListItem slots specifications: (Ask James for the authorization to view the document)
https://docs.google.com/document/d/1rNxpbyA0rDd6fQ6cgNmonQXysCH002q9W9pUOP4ozj4/edit?usp=sharing_eid&ts=561fb6a2
--
Your team Ubuntu Document Viewer Developers is subscribed to branch lp:ubuntu-docviewer-app.
=== modified file 'src/app/qml/common/SubtitledListItem.qml'
--- src/app/qml/common/SubtitledListItem.qml 2015-10-23 11:23:43 +0000
+++ src/app/qml/common/SubtitledListItem.qml 2015-11-27 22:04:07 +0000
@@ -19,23 +19,16 @@
ListItem {
id: listItemSubtitled
- property alias text: mainLabel.text
- property alias subText: subLabel.text
-
- Column {
- anchors {
- left: parent.left; right: parent.right
- margins: units.gu(2)
- verticalCenter: parent.verticalCenter
- }
-
- Label {
- id: mainLabel
- color: UbuntuColors.midAubergine
- }
- Label {
- id: subLabel
- textSize: Label.Small
- }
+ property string text
+ property string subText
+
+ height: listItemLayout.height
+
+ ListItemLayout {
+ id: listItemLayout
+
+ title.text: listItemSubtitled.text
+ title.color: UbuntuColors.midAubergine
+ subtitle.text: listItemSubtitled.subText
}
}
=== modified file 'src/app/qml/documentPage/DocumentDelegateActions.qml'
--- src/app/qml/documentPage/DocumentDelegateActions.qml 2015-10-23 11:19:19 +0000
+++ src/app/qml/documentPage/DocumentDelegateActions.qml 2015-11-27 22:04:07 +0000
@@ -18,8 +18,6 @@
import Ubuntu.Components 1.3
import Ubuntu.Components.Popups 1.3
-// TODO: Probably requires some change in order to work with latest ListItem 1.2
-
QtObject {
property list<Action> leadingActions: [
Action {
=== modified file 'src/app/qml/documentPage/DocumentListDelegate.qml'
--- src/app/qml/documentPage/DocumentListDelegate.qml 2015-10-23 11:23:43 +0000
+++ src/app/qml/documentPage/DocumentListDelegate.qml 2015-11-27 22:04:07 +0000
@@ -21,59 +21,64 @@
import "../common/utils.js" as Utils
-// TODO: Ask for a review of this component to the design team
-
ListItem {
id: listDelegate
height: units.gu(9)
leadingActions: ListItemActions { actions: documentDelegateActions.leadingActions }
trailingActions: ListItemActions { actions: documentDelegateActions.trailingActions }
- RowLayout {
- spacing: units.gu(2)
- anchors {
- fill: parent; margins: units.gu(1)
- leftMargin: units.gu(2)
- rightMargin: units.gu(2)
- }
-
+ /*** UITK 1.3 spec: Three slot layout (B-A-C)
+ ________________________________________
+ | | | |
+ | B | A | C |
+ |___|________________________________|___|
+
+ *********************************************/
+
+ ListItemLayout {
+ id: listItemLayout
+ anchors.fill: parent
+
+ /* UITK 1.3 specs: Slot B */
Icon {
+ SlotsLayout.position: SlotsLayout.Leading
name: Utils.getIconNameFromMimetype(model.mimetype)
- Layout.preferredWidth: height
- Layout.preferredHeight: units.gu(5)
- }
-
- Column {
- Layout.fillWidth: true
-
- RowLayout {
- width: parent.width
- Label {
- text: model.name
- //wrapMode: Text.Wrap
- elide: Text.ElideRight
- color: UbuntuColors.midAubergine
- Layout.fillWidth: true
- }
- Label {
- text: Utils.printSize(i18n, model.size)
- textSize: Label.Small
- }
+ width: units.gu(5); height: width
+ }
+
+ /* UITK 1.3 specs: Slot A */
+ title {
+ text: model.name
+ elide: Text.ElideRight
+ color: UbuntuColors.midAubergine
+ }
+
+ subtitle.text: internal.formattedDateTime()
+
+ /* UITK 1.3 specs: Slot C */
+ Item {
+ SlotsLayout.position: SlotsLayout.Trailing
+ SlotsLayout.overrideVerticalPositioning: true
+ width: Math.max(sizeLabel.width, externalStorageLabel.width)
+ height: parent.height
+
+ Label {
+ id: sizeLabel
+ anchors.right: parent.right
+ text: Utils.printSize(i18n, model.size)
+ textSize: Label.Small
+ y: listItemLayout.mainSlot.y + listItemLayout.title.y
+ + listItemLayout.title.baselineOffset - baselineOffset
}
- RowLayout {
- width: parent.width
- Label {
- text: internal.formattedDateTime()
- textSize: Label.Small
-
- Layout.fillWidth: true
- }
- Icon {
- width: units.gu(2); height: width
- name: "sdcard-symbolic"
- visible: model.isFromExternalStorage
- }
+ Icon {
+ id: externalStorageLabel
+ anchors.right: parent.right
+ width: units.gu(2); height: width
+ name: "sdcard-symbolic"
+ visible: model.isFromExternalStorage
+ y: listItemLayout.mainSlot.y + listItemLayout.subtitle.y
+ + listItemLayout.subtitle.baselineOffset - baselineOffset
}
}
}
=== modified file 'src/app/qml/documentPage/SectionHeader.qml'
--- src/app/qml/documentPage/SectionHeader.qml 2015-10-23 11:19:19 +0000
+++ src/app/qml/documentPage/SectionHeader.qml 2015-11-27 22:04:07 +0000
@@ -1,9 +1,9 @@
import QtQuick 2.4
import Ubuntu.Components 1.3
-import Ubuntu.Components.ListItems 1.3 as ListItem
+import Ubuntu.Components.ListItems 1.3 as ListItems
import DocumentViewer 1.0
-ListItem.Header {
+ListItems.Header {
text: {
if (sortSettings.sortMode === 1) // sort by name
return section.toUpperCase()
=== modified file 'src/app/qml/loView/LOViewDefaultHeader.qml'
--- src/app/qml/loView/LOViewDefaultHeader.qml 2015-11-13 21:19:46 +0000
+++ src/app/qml/loView/LOViewDefaultHeader.qml 2015-11-27 22:04:07 +0000
@@ -89,6 +89,7 @@
},*/
Action {
+ // FIXME: Autopilot test broken... seems not to detect we're now using an ActionBar since the switch to UITK 1.3
objectName: "gotopage"
iconName: "browser-tabs"
text: i18n.tr("Go to position...")
=== modified file 'src/app/qml/loView/PartsView.qml'
--- src/app/qml/loView/PartsView.qml 2015-11-02 01:06:31 +0000
+++ src/app/qml/loView/PartsView.qml 2015-11-27 22:04:07 +0000
@@ -49,17 +49,22 @@
onClicked: internal.delegate_onClicked(model.index)
- RowLayout {
- anchors {
- fill: parent
- leftMargin: units.gu(1)
- rightMargin: units.gu(1)
- }
- spacing: units.gu(1)
-
+ /*** UITK 1.3 specs: Three slot layout (B-A-C)
+ ________________________________________
+ | | | |
+ | B | A | C |
+ |___|________________________________|___|
+
+ *********************************************/
+
+ ListItemLayout {
+ id: listItemLayout
+ anchors.fill: parent
+
+ /* UITK 1.3 specs: Slot B */
Image {
- Layout.fillHeight: true
- Layout.preferredWidth: height
+ SlotsLayout.position: SlotsLayout.Leading
+ height: parent.height; width: height
fillMode: Image.PreserveAspectFit
// Do not store a cache of the thumbnail, so that we don't show
// thumbnails of a previously loaded document.
@@ -67,8 +72,8 @@
source: model.thumbnail
}
- Label {
- Layout.fillWidth: true
+ /* UITK 1.3 specs: Slot A */
+ title {
wrapMode: Text.WordWrap
text: model.name
visible: view.isWide
@@ -76,7 +81,10 @@
: theme.palette.selected.backgroundText
}
+ /* UITK 1.3 specs: Slot C */
Label {
+ SlotsLayout.position: SlotsLayout.Trailing
+
text: model.index + 1
color: (loView.document.currentPart === model.index) ? UbuntuColors.orange
: theme.palette.selected.backgroundText
=== modified file 'src/app/qml/pdfView/PdfContentsPage.qml'
--- src/app/qml/pdfView/PdfContentsPage.qml 2015-11-01 19:56:27 +0000
+++ src/app/qml/pdfView/PdfContentsPage.qml 2015-11-27 22:04:07 +0000
@@ -88,44 +88,39 @@
visible: view.currentIndex == model.index
}
- RowLayout {
- anchors {
- fill: parent
- leftMargin: units.gu(1)
- rightMargin: units.gu(1)
- }
-
- spacing: units.gu(1)
-
- Label {
- objectName: "content"
- Layout.fillWidth: true
-
+ /* UITK 1.3 spec: Three slot layout (A-B-C) */
+ // ________________________________________
+ // | | | |
+ // | A | B | C |
+ // |______________________________|__ __|___|
+ //
+ ListItemLayout {
+ id: listItemLayout
+ objectName: "listItemLayout" + index
+ anchors.fill: parent
+
+ /* UITK 1.3 specs: Slot A */
+ title {
text: model.title
elide: Text.ElideRight
-
font.weight: model.level == 0 ? Font.DemiBold : Font.Normal
color: (model.level == 0) ? UbuntuColors.midAubergine
: theme.palette.selected.backgroundText
}
- /*
- TODO: Needs UX team's review.
- UX specifications for ListItem suggest to use a "tick" icon
- as indicator for a selected state.
- This currently looks a bit redundant, since we already
- use a grey overlay (see above).
- */
+ /* UITK 1.3 specs: Slot B */
Icon {
- Layout.preferredHeight: units.gu(2)
- Layout.preferredWidth: units.gu(2)
+ SlotsLayout.position: SlotsLayout.Trailing
+ width: units.gu(2); height: width
name: "tick"
color: UbuntuColors.green
visible: view.currentIndex == model.index
}
+ /* UITK 1.3 specs: Slot C */
Label {
objectName: "pageindex"
+ SlotsLayout.position: SlotsLayout.Last
text: model.pageIndex + 1
font.weight: model.level == 0 ? Font.DemiBold : Font.Normal
color: (model.level == 0) ? UbuntuColors.midAubergine
Follow ups
