I tinkered with the UI during a few days, and this is what I came up with.
First, here’s the default view of the Email app:
It is indeed very difficult to make out if the email is read or not, especially using the light theme. The increased row count doesn’t really help that much. Here’s the updated view:
I replaced the glass item with a colored rectangle, bolded the texts, and removed the variable row count setting. Nothing that invasive, but the difference is notable! Here’s the diff between the files:
MessageItem.qml diff
--- /usr/share/jolla-email/pages/MessageItem.qml
+++ /home/defaultuser/MessageItem.qml
@@ -59,15 +59,17 @@
menu: contextMenuComponent
highlighted: menuOpen || down || (model.selected && selectMode)
- GlassItem {
+ Rectangle {
visible: !model.readStatus
- width: Theme.itemSizeSmall
- height: Theme.itemSizeSmall
- anchors.horizontalCenter: parent.left
- y: content.y + senderName.height/2 - height/2
- radius: 0.14
- falloffRadius: 0.13
- color: Theme.highlightColor
+ width: Theme.paddingMedium
+ anchors {
+ top: parent.top
+ left: parent.left
+ bottom: parent.bottom
+ topMargin: Theme.paddingSmall
+ bottomMargin: Theme.paddingSmall
+ }
+ color: Theme.rgba(Theme.highlightBackgroundColor, 1 - (Theme.highlightBackgroundOpacity / 2))
}
Column {
@@ -95,6 +97,7 @@
qsTrId("jolla-email-la-no_recipient"))
: Theme.highlightText(model.senderDisplayName, (highlightSender ? searchString : ""), Theme.highlightColor)
textFormat: Text.StyledText
+ font.weight: model.readStatus ? Font.Normal : Font.Bold
anchors {
left: parent.left
right: msgDateTime.left
@@ -153,6 +156,7 @@
qsTrId("jolla-email-la-no_subject")
textFormat: Text.StyledText
font.pixelSize: Theme.fontSizeSmall
+ font.weight: model.readStatus ? Font.Normal : Font.Bold
opacity: model.readStatus ? Theme.opacityHigh : 1.0
width: parent.width - icons.width
anchors {
@@ -174,10 +178,11 @@
qsTrId("jolla-email-la-no_preview")
textFormat: Text.StyledText
font.pixelSize: Theme.fontSizeSmall
+ font.weight: model.readStatus ? Font.Normal : Font.DemiBold
color: Theme.highlightColor
opacity: model.readStatus ? Theme.opacityHigh : 1.0
- maximumLineCount: Screen.sizeCategory >= Screen.Large ? 1 : ( model.readStatus ? 2 : 3)
+ maximumLineCount: Screen.sizeCategory >= Screen.Large ? 1 : 2
lineHeight: subjectText.height - Math.round(Theme.paddingSmall/2)
lineHeightMode: Text.FixedHeight
width: parent.width
So there you go! I quite like it, what do you guys think?