fix(listitems): Support list items on dark backgrounds

iBelieve · iBelieve · commit 175375bf8e51 · 2016-06-15T21:39:51.000-05:00
diff --git a/src/components/ThinDivider.qml b/src/components/ThinDivider.qml
@@ -9,6 +9,7 @@
  */
 
 import QtQuick 2.4
+import Material 0.3
 
 /*!
    \qmltype ThinDivider
@@ -22,6 +23,8 @@ Rectangle {
         right: parent.right
     }
 
-    color: Qt.rgba(0,0,0,0.1)
+    property bool darkBackground
+
+    color: darkBackground ? Theme.dark.hintColor : Theme.light.hintColor
     height: 1
 }
diff --git a/src/listitems/BaseListItem.qml b/src/listitems/BaseListItem.qml
@@ -26,6 +26,7 @@ View {
         right: parent ? parent.right : undefined
     }
 
+    property bool darkBackground
     property int margins: 16 * Units.dp
 
     property bool selected
@@ -44,6 +45,7 @@ View {
         anchors.leftMargin: dividerInset
 
         visible: showDivider
+        darkBackground: listItem.darkBackground
     }
 
     Ink {
diff --git a/src/listitems/Divider.qml b/src/listitems/Divider.qml
@@ -25,9 +25,12 @@ Item {
 		right: parent.right
 	}
 
+    property bool darkBackground
+
 	height: 16 * Units.dp
 
 	ThinDivider {
         anchors.verticalCenter: parent.verticalCenter
+        darkBackground: divider.darkBackground
     }
 }
diff --git a/src/listitems/SectionHeader.qml b/src/listitems/SectionHeader.qml
@@ -52,7 +52,8 @@ BaseListItem {
                 }
 
                 visible: name != ""
-                color: listItem.expanded ? Theme.primaryColor : Theme.light.iconColor
+                color: listItem.expanded ? Theme.primaryColor
+                        : darkBackground ? Theme.dark.iconColor : Theme.light.iconColor
                 size: 24 * Units.dp
             }
         }
@@ -66,7 +67,8 @@ BaseListItem {
             elide: Text.ElideRight
             style: "subheading"
 
-            color: listItem.expanded ? Theme.primaryColor : Theme.light.textColor
+            color: listItem.expanded ? Theme.primaryColor
+                    : darkBackground ? Theme.dark.textColor : Theme.light.textColor
         }
 
         Item {
@@ -83,6 +85,7 @@ BaseListItem {
                 name: "navigation/expand_more"
                 rotation: listItem.expanded ? 180 : 0
                 size: 24 * Units.dp
+                color: darkBackground ? Theme.dark.iconColor : Theme.light.iconColor
 
                 Behavior on rotation {
                     NumberAnimation { duration: 200 }
diff --git a/src/listitems/SimpleMenu.qml b/src/listitems/SimpleMenu.qml
@@ -34,6 +34,7 @@ Subtitled {
         id: hiddenLabel
         style: "subheading"
         visible: false
+        color: darkBackground ? Theme.dark.textColor : Theme.light.textColor
 
         onContentWidthChanged: {
             __maxWidth = Math.max(contentWidth + 33 * Units.dp, __maxWidth)
diff --git a/src/listitems/Standard.qml b/src/listitems/Standard.qml
@@ -91,7 +91,9 @@ BaseListItem {
                 }
 
                 visible: valid
-                color: listItem.selected ? Theme.primaryColor : Theme.light.iconColor
+                color: listItem.selected ? Theme.primaryColor
+                        : darkBackground ? Theme.dark.iconColor : Theme.light.iconColor
+
                 size: 24 * Units.dp
             }
         }
@@ -118,7 +120,8 @@ BaseListItem {
                 elide: Text.ElideRight
                 style: "subheading"
 
-                color: listItem.selected ? Theme.primaryColor : Theme.light.textColor
+                color: listItem.selected ? Theme.primaryColor
+                        : darkBackground ? Theme.dark.textColor : Theme.light.textColor
 
                 visible: !contentItem.visible
             }
@@ -129,7 +132,7 @@ BaseListItem {
 
             Layout.alignment: Qt.AlignVCenter
 
-            color: Theme.light.subTextColor
+            color: darkBackground ? Theme.dark.subTextColor : Theme.light.subTextColor
             elide: Text.ElideRight
             style: "body1"
 
diff --git a/src/listitems/Subheader.qml b/src/listitems/Subheader.qml
@@ -35,6 +35,7 @@ View {
     property alias text: label.text
     property alias style: label.style
     property alias textColor: label.color
+    property bool darkBackground
 
     Label {
         id: label
@@ -50,13 +51,14 @@ View {
             margins: margins
         }
 
-        color: Theme.light.subTextColor
+        color: darkBackground ? Theme.dark.subTextColor : Theme.light.subTextColor
     }
 
     property bool showDivider: false
 
     ThinDivider {
         anchors.bottom: parent.bottom
         visible: showDivider
+        darkBackground: listItem.darkBackground
     }
 }
diff --git a/src/listitems/Subtitled.qml b/src/listitems/Subtitled.qml
@@ -74,7 +74,8 @@ BaseListItem {
                 }
 
                 visible: valid
-                color: listItem.selected ? Theme.primaryColor : Theme.light.iconColor
+                color: listItem.selected ? Theme.primaryColor
+                        : darkBackground ? Theme.dark.iconColor : Theme.light.iconColor
                 size: 24 * Units.dp
             }
         }
@@ -99,6 +100,7 @@ BaseListItem {
 
                     elide: Text.ElideRight
                     style: "subheading"
+                    color: darkBackground ? Theme.dark.textColor : Theme.light.textColor
                 }
 
                 Label {
@@ -107,7 +109,7 @@ BaseListItem {
                     Layout.alignment: Qt.AlignVCenter
                     Layout.preferredWidth: visible ? implicitWidth : 0
 
-                    color: Theme.light.subTextColor
+                    color: darkBackground ? Theme.dark.subTextColor : Theme.light.subTextColor
                     elide: Text.ElideRight
                     horizontalAlignment: Qt.AlignHCenter
                     style: "body1"
@@ -130,7 +132,7 @@ BaseListItem {
                 Layout.fillWidth: true
                 Layout.preferredHeight: implicitHeight * maximumLineCount/lineCount
 
-                color: Theme.light.subTextColor
+                color: darkBackground ? Theme.dark.subTextColor : Theme.light.subTextColor
                 elide: Text.ElideRight
                 wrapMode: Text.WordWrap
                 style: "body1"

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@`
`9`	`9`	`*/`
`10`	`10`
`11`	`11`	`import QtQuick 2.4`
	`12`	`+import Material 0.3`
`12`	`13`
`13`	`14`	`/*!`
`14`	`15`	`\qmltype ThinDivider`
`@@ -22,6 +23,8 @@ Rectangle {`
`22`	`23`	`right: parent.right`
`23`	`24`	`}`
`24`	`25`
`25`		`- color: Qt.rgba(0,0,0,0.1)`
	`26`	`+ property bool darkBackground`
	`27`	`+`
	`28`	`+ color: darkBackground ? Theme.dark.hintColor : Theme.light.hintColor`
`26`	`29`	`height: 1`
`27`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ View {`
`26`	`26`	`right: parent ? parent.right : undefined`
`27`	`27`	`}`
`28`	`28`
	`29`	`+ property bool darkBackground`
`29`	`30`	`property int margins: 16 * Units.dp`
`30`	`31`
`31`	`32`	`property bool selected`
`@@ -44,6 +45,7 @@ View {`
`44`	`45`	`anchors.leftMargin: dividerInset`
`45`	`46`
`46`	`47`	`visible: showDivider`
	`48`	`+ darkBackground: listItem.darkBackground`
`47`	`49`	`}`
`48`	`50`
`49`	`51`	`Ink {`
Original file line number	Diff line number	Diff line change
`@@ -25,9 +25,12 @@ Item {`
`25`	`25`	`right: parent.right`
`26`	`26`	`}`
`27`	`27`
	`28`	`+ property bool darkBackground`
	`29`	`+`
`28`	`30`	`height: 16 * Units.dp`
`29`	`31`
`30`	`32`	`ThinDivider {`
`31`	`33`	`anchors.verticalCenter: parent.verticalCenter`
	`34`	`+ darkBackground: divider.darkBackground`
`32`	`35`	`}`
`33`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,8 @@ BaseListItem {`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`visible: name != ""`
`55`		`- color: listItem.expanded ? Theme.primaryColor : Theme.light.iconColor`
	`55`	`+ color: listItem.expanded ? Theme.primaryColor`
	`56`	`+ : darkBackground ? Theme.dark.iconColor : Theme.light.iconColor`
`56`	`57`	`size: 24 * Units.dp`
`57`	`58`	`}`
`58`	`59`	`}`
`@@ -66,7 +67,8 @@ BaseListItem {`
`66`	`67`	`elide: Text.ElideRight`
`67`	`68`	`style: "subheading"`
`68`	`69`
`69`		`- color: listItem.expanded ? Theme.primaryColor : Theme.light.textColor`
	`70`	`+ color: listItem.expanded ? Theme.primaryColor`
	`71`	`+ : darkBackground ? Theme.dark.textColor : Theme.light.textColor`
`70`	`72`	`}`
`71`	`73`
`72`	`74`	`Item {`
`@@ -83,6 +85,7 @@ BaseListItem {`
`83`	`85`	`name: "navigation/expand_more"`
`84`	`86`	`rotation: listItem.expanded ? 180 : 0`
`85`	`87`	`size: 24 * Units.dp`
	`88`	`+ color: darkBackground ? Theme.dark.iconColor : Theme.light.iconColor`
`86`	`89`
`87`	`90`	`Behavior on rotation {`
`88`	`91`	`NumberAnimation { duration: 200 }`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,9 @@ BaseListItem {`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`visible: valid`
`94`		`- color: listItem.selected ? Theme.primaryColor : Theme.light.iconColor`
	`94`	`+ color: listItem.selected ? Theme.primaryColor`
	`95`	`+ : darkBackground ? Theme.dark.iconColor : Theme.light.iconColor`
	`96`	`+`
`95`	`97`	`size: 24 * Units.dp`
`96`	`98`	`}`
`97`	`99`	`}`
`@@ -118,7 +120,8 @@ BaseListItem {`
`118`	`120`	`elide: Text.ElideRight`
`119`	`121`	`style: "subheading"`
`120`	`122`
`121`		`- color: listItem.selected ? Theme.primaryColor : Theme.light.textColor`
	`123`	`+ color: listItem.selected ? Theme.primaryColor`
	`124`	`+ : darkBackground ? Theme.dark.textColor : Theme.light.textColor`
`122`	`125`
`123`	`126`	`visible: !contentItem.visible`
`124`	`127`	`}`
`@@ -129,7 +132,7 @@ BaseListItem {`
`129`	`132`
`130`	`133`	`Layout.alignment: Qt.AlignVCenter`
`131`	`134`
`132`		`- color: Theme.light.subTextColor`
	`135`	`+ color: darkBackground ? Theme.dark.subTextColor : Theme.light.subTextColor`
`133`	`136`	`elide: Text.ElideRight`
`134`	`137`	`style: "body1"`
`135`	`138`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ View {`
`35`	`35`	`property alias text: label.text`
`36`	`36`	`property alias style: label.style`
`37`	`37`	`property alias textColor: label.color`
	`38`	`+ property bool darkBackground`
`38`	`39`
`39`	`40`	`Label {`
`40`	`41`	`id: label`
`@@ -50,13 +51,14 @@ View {`
`50`	`51`	`margins: margins`
`51`	`52`	`}`
`52`	`53`
`53`		`- color: Theme.light.subTextColor`
	`54`	`+ color: darkBackground ? Theme.dark.subTextColor : Theme.light.subTextColor`
`54`	`55`	`}`
`55`	`56`
`56`	`57`	`property bool showDivider: false`
`57`	`58`
`58`	`59`	`ThinDivider {`
`59`	`60`	`anchors.bottom: parent.bottom`
`60`	`61`	`visible: showDivider`
	`62`	`+ darkBackground: listItem.darkBackground`
`61`	`63`	`}`
`62`	`64`	`}`