Lists: Colored, Dimmed, Markers

Colored Bars

List of Tracked Times can be a long list and you get this list for all ‘Open’ Tracked Times or from History all tracked times of a month or while creating a new accounting report.

List is ordered by Day and Time and each (Day) Header has an Icon:

This Icon works as a Marker Icon telling the User that there’s a Chart Diagram available. Tapping on the Header opens the Diagram for this specific day:

Take a look at the Chart Icon again:

it works well on dark and bright themes because the line is transparent and blue looks good on both themes.

Going back to the list: there are some rows marked orange:

Orange marked rows tells the user: this is a row where data was modified after tracking.

To control tap on a row to get the details and make database info visible (from Overflow menu)

To add such a small colored bar directly on the right site take a look at this code:

Container {
    id: outerItemContainer
    layout: DockLayout {
    }
    horizontalAlignment: HorizontalAlignment.Fill
    Container {
        minWidth: 12
        maxWidth: 12
        verticalAlignment: VerticalAlignment.Fill
        horizontalAlignment: HorizontalAlignment.Right
        background: itemRoot.ListItem.view.rightMarkerColor(ListItemData)
    }
    // now layout all fields for this ListItem
}

The outer Container uses a DockLayout with HorizontalAlignment.Fill so we’re sure that always all available space is used – doesn’t matter if Portrait or Landscape.

As next we define the Container for the colored bar and set minWidth and maxWidth to same size (12 px in this case), also we use VerticalAlignment.Fill. We don’t know the height of the Container but using VerticalAlignment.Fill we’re sure that always the height of surrounding Container was used.

HorizontalAlignment.Right will guarantee that the bar will always be placed at the right site.

Only left thing is to know if we have to colorize the row or not, so we ask a function: rightMarkerColor() is a function placed at ListView. There we do our business logic – in this case take the data of the row and test if we should color it because it’s modified or added manually:

function rightMarkerColor(data){
    if('insertedByUser' in data && data.insertedByUser == true){
        return insertedColor
    }
    if (data.modifiedUTC.length > 0){
        return modifiedColor
    }
    return nothingColor
}

we’re returning a property from ListView:

ListView {
    id: trackedList
     property variant insertedColor: rootPane.isDark() ? Color.Yellow : Color.Magenta
     property variant modifiedColor: Color.create("#FF9900")
     property variant nothingColor: Color.Transparent
     // ...
}

Creating a Color costs ressources, so if same color is used more then one time, it’s better to define the Color once and use the variable as we do here in our ListView.

In this App it’s the only place where I’m using these Colors – otherwise I would have defined them at root object (my tabbedPane)

Other rows are marked yellow on dark theme and magenta on bright theme:

yellow doesn’t look good on the bright theme and magenta doesn’t look good on dark theme. So for now I’m using different colors but will change this later using another color working well on both themes and also in combination with the orange marked rows in same List.

You can track times (Start / Stop with current System time) or – if you have the permission – you can also add Times manually.

To distinguish manually added rows these are marked yellow / magenta. You can verify this from database info:

Marker Icons

If you inspect the list of tracked times you’ll find another Marker Icon:

This time we have two similar but different Icons for dark and bright themes. To make the differences visible I put both icons on black and white background:

On dark the right Icon fits best and there’s a great contrast between yellow and black.

On bright at first you could think the same Icon will work, but on the list it’s a really small Icon and you would overlook it easy. So I spent a blue background to the Icon to make it recognizable. To use different Icons for dark and bright Cascades uses static asset selectors.

What does this Icon mean ? All tracked records where the time spans over midnight will get this ‘overnight – marker – icon’. To control tap on the row and inspect start and stop times:

User will find the same Icon with some text explaining: “Time tracked ‘Over Midnight'” – next time he/she sees the same Icon on a list row it’s clear: overnight !

Dimmed Rows

Using Enterprise or Group Editions from time to time you’re uploading your tracked data to server or send to group manager. As soon as data is uploaded you cannot edit tracked data. To visualize already transmitted data I’m dimming the rows. Here’s how it looks using a dark theme:

…and using a light theme:

Without taking a look at the details you immediately know which data is already transmitted to server or not.

Dimming is easy done by setting opacity of outer container. Here’s the QML code:

Container {
    id: outerItemContainer
    opacity: itemRoot.ListItem.view.myOpacity(ListItemData.isTransmitted)
    layout: DockLayout {
    }
    horizontalAlignment: HorizontalAlignment.Fill
    // ....
}

To get outer container filled completely it’s a good idea to use a DockLayout and HorizontalAlignment.Fill – vertical will be dynamic and depends from content.

To calculate the value of opacity I’m calling a function added to the ListView:

function myOpacity(isTransmitted){
    if(isTransmitted && isOpen()){
        if(Application.themeSupport.theme.colorTheme.style == VisualStyle.Dark){
            return 0.6
        } else {
            return 0.5
        }
    } else {
        return 1.0
    }
}

This ListView is used from list of open tracked data and also from history of tracked data. History data is always be sent to server – only if displaying open data I want to distinguish.

If data was transmitted and list is list of open tracked data I want to change opacity – otherwise I’m setting the default 1.0

I did some tests to find out the best value for opacity where users will notice if a row is dimmed, but on the other side the text should be readable. Setting 0.6 for a dark theme and 0.5 for a light theme works well. (see screenshots above)

Summary: dimming rows, using small colored bars or marker icons additional informations become ‘visible’ without any extra actions or taps by user.

Colored Bars

Marker Icons

Dimmed Rows

Related