Merge lp:~joergberroth/unav/20160328_fixes into lp:unav

[JkB]

*changed Naming of HeaderListItem.qml to ListItemHeader.qml and fixed it in PoiPage.qml, SettingsPage.qml, SearchPage.qml
*PoiListPage.qml: Added WordWrap to subtitles
*RoutePage.qml: reverted topMargin for Grid

**SettingsPage.qml: Made Design of Expandables more intuitive. minor design changes.

***index.html: comment the debug route simulation

The changes from yesterday against the latest branch.
With some more design change proposals to SettingsPage.qml
The way, the expandables expanded felt a bit diffuse. So, here is my proposal

Best Joerg

[Nekhelesh Ramananthan (nik90)]

Hi Joerg, thanks for the fixes. They're mostly good except for some minor issues that I have listed below,

1. The listitem text is not vertically centered in the settings page. See http://imgur.com/2ccNEsq. The tick padding is also incorrect. I also think we shouldn't change the left padding of the text since the rest of the core apps don't do that. I did some testing and this looks good -> http://imgur.com/AzrnFAE

Here is the code diff, http://paste.ubuntu.com/15540311/

2. The delete icon on the list item is also weird. I think the text "Clear History" makes it clear what the listitem action does.

An example from the core app "Clock", we have a settings option "Change Timezone"..the text alone does the job.

3. I already agreed to the name change of HeaderListItem. Just one minor thing, the next time you move/rename a file, please do "bzr mv oldfile newfile". That is more cleaner. For this MP it is good.

4. I don't have any opinion on the index.html file change. I leave that to Marcos.

review: Needs Fixing

[JkB (joergberroth)]

Am 2016-03-28 um 18:04 schrieb Nekhelesh Ramananthan:
> Review: Needs Fixing
>
> Hi Joerg, thanks for the fixes. They're mostly good except for some minor issues that I have listed below,
>
Hi, thx, too.

> 1. The listitem text is not vertically centered in the settings page. See http://imgur.com/2ccNEsq. The tick padding is also incorrect.
Ah yes, I see.
I also think we shouldn't change the left padding of the text since the
rest of the core apps don't do that.
Well, I think there is no clear separation than. The former approach had
a visible separation. dekko does it via checkboxes.
The only other app I see with the new expandable than is clock.
Try this in clock:
-expand a setting list
-focus another app
- refocus the setting page
...you are totaly lost as you don't get the states at first sight.
I think this is not the best approach.

I did some testing and this looks good -> http://imgur.com/AzrnFAE
I could agree on that, too.
But, please re-think it on base of the expl. above.
Still, i like the indent more as it separates the list/action from the
"header".
>
> Here is the code diff, http://paste.ubuntu.com/15540311/
>
> 2. The delete icon on the list item is also weird. I think the text "Clear History" makes it clear what the listitem action does.

I think the icon clarifys that there is not only text but an action to take.
I had this discussion with marcos, too.
As it is 1:2 now, i will leave it out so far, again ;-) .
>
> An example from the core app "Clock", we have a settings option "Change Timezone"..the text alone does the job.
Can not find this action.... ;-)
> 3. I already agreed to the name change of HeaderListItem. Just one minor thing, the next time you move/rename a file, please do "bzr mv oldfile newfile". That is more cleaner. For this MP it is good.
ah yes, I'll do.

Thanks.

[Nekhelesh Ramananthan (nik90)]

> I also think we shouldn't change the left padding of the text since the
> rest of the core apps don't do that.
> Well, I think there is no clear separation than. The former approach had
> a visible separation. dekko does it via checkboxes.
> The only other app I see with the new expandable than is clock.
> Try this in clock:
> -expand a setting list
> -focus another app
> - refocus the setting page
> ...you are totaly lost as you don't get the states at first sight.
> I think this is not the best approach.
>
> I did some testing and this looks good -> http://imgur.com/AzrnFAE
> I could agree on that, too.
> But, please re-think it on base of the expl. above.
> Still, i like the indent more as it separates the list/action from the
> "header".

Alright go with the indentation. But please use padding.leading: units.gu(1) to move the text. Otherwise it breaks the listitemlayout visually. In this case, you might also then want to indent the tick icon. SO add padding.trailing: units.gu(1). Please test this.

> > Here is the code diff, http://paste.ubuntu.com/15540311/
> >
> > 2. The delete icon on the list item is also weird. I think the text "Clear
> History" makes it clear what the listitem action does./me
>
> I think the icon clarifys that there is not only text but an action to take.
> I had this discussion with marcos, too.
> As it is 1:2 now, i will leave it out so far, again ;-) .

Now that uNav is a core app shipped by default on the phone, it is even more important that it follows the design standards of other core apps like Dekko, Clock, Weather, Music app etc. None of those apps display such an icon in a list item. We want to maintain consistency. That's what I am trying to get at.

> >
> > An example from the core app "Clock", we have a settings option "Change
> Timezone"..the text alone does the job.
> Can not find this action.... ;-)

Its in the clock app settings page right at the bottom.

[JkB (joergberroth)]

Am 2016-03-28 um 19:45 schrieb Nekhelesh Ramananthan:

>
> Alright go with the indentation. But please use padding.leading: units.gu(1) to move the text. Otherwise it breaks the listitemlayout visually. In this case, you might also then want to indent the tick icon. SO add padding.trailing: units.gu(1). Please test this.
Just updated the branch. Have a look. What do you think?

> Now that uNav is a core app shipped by default on the phone, it is even more important that it follows the design standards of other core apps like Dekko, Clock, Weather, Music app etc. None of those apps display such an icon in a list item. We want to maintain consistency. That's what I am trying to get at.

I fully see this!,

>>> An example from the core app "Clock", we have a settings option "Change
>> Timezone"..the text alone does the job.
>> Can not find this action.... ;-)
> Its in the clock app settings page right at the bottom.
but this action also (at least in the latest rc-prop version I am using)
has an arrow as action indication ( and leads me to the system-setting page)

>
Best Joerg

[Nekhelesh Ramananthan (nik90)]

> > Alright go with the indentation. But please use padding.leading: units.gu(1)
> to move the text. Otherwise it breaks the listitemlayout visually. In this
> case, you might also then want to indent the tick icon. SO add
> padding.trailing: units.gu(1). Please test this.
>
> Just updated the branch. Have a look. What do you think?

I think visually it is okay, but I'm not happy with the code. Please use padding.leading and padding.trailing to adjust the indentation instead of anchors. Refer to SlotsLayout documentation [1] Also while running your code, I saw warnings like Reference error: Unit is not defined and so on.

Also since you hid the subtitle and the divider when its expanded, how about we remove the indentation and instead change the font color of the options shown?

[1] https://developer.ubuntu.com/api/apps/qml/sdk-15.04.1/Ubuntu.Components.SlotsLayout/

>
> > Now that uNav is a core app shipped by default on the phone, it is even more
> important that it follows the design standards of other core apps like Dekko,
> Clock, Weather, Music app etc. None of those apps display such an icon in a
> list item. We want to maintain consistency. That's what I am trying to get at.
>
> I fully see this!,
>
> >>> An example from the core app "Clock", we have a settings option "Change
> >> Timezone"..the text alone does the job.
> >> Can not find this action.... ;-)
> > Its in the clock app settings page right at the bottom.
> but this action also (at least in the latest rc-prop version I am using)
> has an arrow as action indication ( and leads me to the system-setting page)
>

Yes the arrow is a standard design pattern used to indicate that it opens a new page. Had we instead shown a dialog, we would not have used any icon there. I spoke to the canonical designers about this.

[lp:~joergberroth/unav/20160328_fixes]

5. By JkB on 2016-03-28

* improved expandable behaviour in SettingsPage.qml

6. By JkB on 2016-03-28

* fixed ListItemHeader in AboutPage.qml

* changed font weight back to standard medium for ListItemHeaders

7. By JkB on 2016-03-28

*exchanged indent-separation with color separation

[JkB (joergberroth)]

Am 2016-03-28 um 20:16 schrieb Nekhelesh Ramananthan:
>
> Also since you hid the subtitle and the divider when its expanded, how about we remove the indentation and instead change the font color of the options shown?
That does the trick. Branch updated

[Nekhelesh Ramananthan (nik90)]

Looks great Joerg! Awesome work! One minor nitpick I have to point out,

why is the listview height (12+1)? It leaves 1 gu gap at the bottom that doesn't look so good :P. Can you remove that? Everything else is good.

review: Needs Fixing

[JkB (joergberroth)]

My one designer eye ;-) says that it looks better with that gap.
Really, it separates it better to the following...

Am 2016-03-28 um 21:15 schrieb Nekhelesh Ramananthan:
> Review: Needs Fixing
>
> Looks great Joerg! Awesome work! One minor nitpick I have to point out,
>
> why is the listview height (12+1)? It leaves 1 gu gap at the bottom that doesn't look so good :P. Can you remove that? Everything else is good.
>

[Nekhelesh Ramananthan (nik90)]

Alrite I give in ;-). Code looks good and works well. Approving. I will leave this in the hands of Marcos to review the index.html code change.

review: Approve (qml code testing)

[costales (costales)]

Thanks a lot Joerg |o/
The index.html is right for me :)
Merged!

=== modified file 'nav/index.html'
--- nav/index.html	2016-03-26 18:53:17 +0000
+++ nav/index.html	2016-03-28 19:01:41 +0000
@@ -260,10 +260,12 @@
 			if (!navigator.geolocation) {
 				$('#gps_denied').show();
 				return;
-			}
-			
+                        }
 
-			// TODO release BEGIN remove debug
+                        /**
+                        // *TESTING* This block is for testing purposes only. It simulates a route
+                        // and should be removed before every release.
+                        // TODO release BEGIN remove debug
 			var route = [
 				[43.51557,-5.655146666666667],[43.515764999999995,-5.655245000000001],[43.515955,-5.655354999999999],[43.51614333333334,-5.655476666666668],[43.51633,-5.655601666666667],[43.516515,-5.6557216666666665],[43.516695,-5.655835],[43.516871666666674,-5.655946666666667],[43.517039999999994,-5.656053333333333],[43.517208333333336,-5.6561650000000006],[43.517363333333336,-5.656270000000001],[43.517515,-5.656368333333334],[43.51765833333334,-5.656464999999999],[43.51779333333334,-5.6565666666666665],[43.51792333333333,-5.656670000000001],[43.518055000000004,-5.656765],[43.518188333333335,-5.656851666666667],[43.518323333333335,-5.656935000000001],[43.518458333333335,-5.657018333333333],[43.518591666666666,-5.657103333333334],[43.518724999999996,-5.657188333333333],[43.51885666666667,-5.657273333333334],[43.51898500000001,-5.657354999999999],[43.51910833333333,-5.6574366666666664],[43.51923,-5.657515000000001],[43.51935166666667,-5.657591666666667],[43.51946833333333,-5.657673333333334],[43.51958333333334,-5.65776],[43.51969166666666,-5.657848333333334],[43.519800000000004,-5.657933333333333],[43.519909999999996,-5.658021666666667],[43.520021666666665,-5.658115],[43.520134999999996,-5.658213333333333],[43.520224999999996,-5.658365],[43.520273333333336,-5.658556666666668],[43.520296666666674,-5.6587733333333325],[43.52031,-5.65899],[43.520329999999994,-5.659196666666666],[43.52035166666666,-5.6594],[43.52037833333334,-5.6595949999999995],[43.520405,-5.659795000000001],[43.520431666666674,-5.659996666666666],[43.52046166666667,-5.660196666666667],[43.52049999999999,-5.660386666666667],[43.52054,-5.660563333333332],[43.52058166666667,-5.660741666666667],[43.52062166666666,-5.6609266666666676],[43.52066833333333,-5.6611183333333335],[43.52072166666667,-5.661316666666666],[43.520786666666666,-5.661518333333333],[43.520865,-5.661720000000001],[43.52095333333333,-5.661916666666667],[43.521049999999995,-5.662096666666668],[43.521151666666675,-5.662258333333334],[43.52125833333333,-5.662405],[43.521363333333326,-5.662538333333333],[43.52146666666666,-5.662656666666667],[43.52155833333333,-5.662758333333333],[43.521634999999996,-5.66284],[43.52169666666667,-5.6629016666666665],[43.52174,-5.662941666666668],[43.52177,-5.66297],[43.52178833333334,-5.662984999999999],[43.52179666666666,-5.662993333333333],[43.5218,-5.6629950000000004],[43.5218,-5.662993333333333],[43.52182,-5.663011666666667],[43.52185166666666,-5.663041666666667],[43.521894999999994,-5.663076666666666],[43.521945,-5.6631149999999995],[43.52201,-5.663164999999999],[43.52208166666666,-5.663216666666667],[43.52216,-5.66327],[43.52225,-5.663326666666667],[43.52235166666666,-5.663381666666667],[43.52246333333333,-5.663433333333334],[43.52258,-5.663478333333334],[43.52269666666666,-5.663518333333333],[43.522816666666664,-5.66355],[43.52293666666666,-5.663576666666668],[43.52306,-5.663595],[43.52318166666667,-5.663603333333333],[43.523303333333324,-5.663605],[43.52342166666667,-5.663600000000001],[43.523541666666674,-5.663588333333333],[43.52366,-5.66357],[43.52378166666667,-5.663544999999999],[43.52390666666667,-5.6635133333333325],[43.52403833333333,-5.663475],[43.524175,-5.663433333333334],[43.524316666666664,-5.66339],[43.52445833333333,-5.6633466666666665],[43.52459833333334,-5.6633033333333325],[43.52474,-5.663258333333332],[43.52488166666667,-5.663213333333334],[43.52502333333334,-5.663170000000001],[43.52516833333334,-5.663128333333333],[43.525310000000005,-5.6630899999999995],[43.52545333333334,-5.663056666666667],[43.52559666666666,-5.663023333333332],[43.52574,-5.662986666666666],[43.52588333333333,-5.662945000000001],[43.52602666666667,-5.6629033333333325],[43.52617,-5.66286],[43.526309999999995,-5.662816666666667],[43.52645166666666,-5.662774999999999],[43.526595,-5.662733333333334],[43.526738333333334,-5.66269],[43.52688,-5.6626433333333335],[43.52702166666666,-5.662598333333333],[43.52716166666667,-5.662554999999999],[43.52729666666667,-5.662515],[43.52742,-5.662476666666667],[43.52753333333333,-5.662441666666666],[43.527635,-5.6624083333333335],[43.527725,-5.662374999999999],[43.52780500000001,-5.662344999999999],[43.52787,-5.662319999999999],[43.527925,-5.662303333333334],[43.52797166666666,-5.66229],[43.528009999999995,-5.662276666666666],[43.52804166666667,-5.662266666666667],[43.52806666666667,-5.662256666666667],[43.52807833333333,-5.66225],[43.52808166666667,-5.66225],[43.52808,-5.662248333333334],[43.52807833333333,-5.6622466666666655]
 			];
@@ -336,10 +338,9 @@
 			},800);
 			return;
 			// TODO release END remove debug
-			
-			
-			
-			
+                        // *TESTING* End
+                        **/
+
 			id_gps = navigator.geolocation.watchPosition(
 				function (pos) {
 					
@@ -451,7 +452,10 @@
 			longpress = (endTime - startTime < 225) ? false : true;
 		});
 		
-		// TODO release BEGIN remove debug
+                /**
+                // *TESTING* This block is for testing purposes only. It simulates a route
+                // and should be removed before every release.
+                // TODO release BEGIN remove debug
 		$("#map").on('mousedown', function () {
 			startTime = new Date().getTime();
 		});
@@ -460,6 +464,8 @@
 			longpress = (endTime - startTime < 225) ? false : true;
 		});
 		// TODO release END remove debug
+                //*TESTING* END
+                **/
 		
 		// Drag
 		map.on('pointerdrag', function(evt) {

=== modified file 'qml/AboutPage.qml'
--- qml/AboutPage.qml	2016-03-26 18:53:17 +0000
+++ qml/AboutPage.qml	2016-03-28 19:01:41 +0000
@@ -100,7 +100,7 @@
         anchors.fill: parent
         section.property: "category"
         section.criteria: ViewSection.FullString
-        section.delegate: HeaderListItem {
+        section.delegate: ListItemHeader {
             title: section
         }
 

=== modified file 'qml/PoiListPage.qml'
--- qml/PoiListPage.qml	2016-03-26 21:16:49 +0000
+++ qml/PoiListPage.qml	2016-03-28 19:01:41 +0000
@@ -326,6 +326,7 @@
                 subtitle.text: model.openinghours !== "" ? "%1 | %2".arg(getOpeningHours(model.openinghours)).arg(QmlJs.formatDistance(model.distance, navApp.settings.unit))
                                                          : QmlJs.formatDistance(model.distance, navApp.settings.unit)
                 subtitle.maximumLineCount: 2
+                subtitle.wrapMode: Text.WordWrap
                 summary.text: model.description
                 summary.maximumLineCount: 3
 

=== modified file 'qml/PoiPage.qml'
--- qml/PoiPage.qml	2016-03-27 10:05:20 +0000
+++ qml/PoiPage.qml	2016-03-28 19:01:41 +0000
@@ -157,7 +157,7 @@
             width: parent.width
             height: sectionHeader.height
 
-            HeaderListItem {
+            ListItemHeader {
                 id: sectionHeader
                 title: section
             }
@@ -191,4 +191,3 @@
     }
 }
 
-

=== modified file 'qml/RoutePage.qml'
--- qml/RoutePage.qml	2016-03-26 18:53:17 +0000
+++ qml/RoutePage.qml	2016-03-28 19:01:41 +0000
@@ -31,7 +31,7 @@
     Flickable {
         id: flickable
 
-        anchors { fill: parent; margins: units.gu(2) }
+        anchors { fill: parent; margins: units.gu(2); topMargin: units.gu(6) }
         height: contentItem.childrenRect.height
         boundsBehavior: (contentHeight > routePage.height) ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds
 

=== modified file 'qml/SearchPage.qml'
--- qml/SearchPage.qml	2016-03-26 18:53:17 +0000
+++ qml/SearchPage.qml	2016-03-28 19:01:41 +0000
@@ -230,7 +230,7 @@
 
         section.property: "title"
         section.criteria: ViewSection.FullString
-        section.delegate: HeaderListItem {
+        section.delegate: ListItemHeader {
             title: section
         }
 

=== modified file 'qml/SettingsPage.qml'
--- qml/SettingsPage.qml	2016-03-26 18:53:17 +0000
+++ qml/SettingsPage.qml	2016-03-28 19:01:41 +0000
@@ -40,7 +40,7 @@
             navigationModeModel.append({ "mode": i18n.tr("Walking"), "index": 1 })
             navigationModeModel.append({ "mode": i18n.tr("Bicycle"), "index": 2 })
 
-            _modeList.subText.text = navigationModeModel.get(navApp.settings.routingMode).mode
+            modeList.subText.text = navigationModeModel.get(navApp.settings.routingMode).mode
         }
     }
 
@@ -52,7 +52,7 @@
             soundModel.append({ "sound": i18n.tr("A Notification"), "index": 1 })
             soundModel.append({ "sound": i18n.tr("None"), "index": 2 })
 
-            _soundList.subText.text = soundModel.get(navApp.settings.soundIndications).sound
+            soundList.subText.text = soundModel.get(navApp.settings.soundIndications).sound
         }
     }
 
@@ -63,7 +63,7 @@
             unitModel.append({ "unit": i18n.tr("Kilometres"), "index": 0 })
             unitModel.append({ "unit": i18n.tr("Miles"), "index": 1 })
 
-            _unitList.subText.text = unitModel.get(navApp.settings.unit).unit
+            unitList.subText.text = unitModel.get(navApp.settings.unit).unit
         }
     }
 
@@ -81,22 +81,30 @@
                 right: parent.right
             }
 
+            ListItemHeader {
+                 id: navigationListHeader
+                 title: i18n.tr("Navigation")
+            }
+
             ExpandableListItem {
-                id: _modeList
+                id: modeList
 
-                listViewHeight: units.gu(21)
+                listViewHeight: units.gu(12+1)
                 titleText.text: i18n.tr("Navigation Mode")
 
                 model: navigationModeModel
 
                 delegate: ListItem {
+                    divider.visible: false
+                    height: navigationListItemLayout.height
                     ListItemLayout {
+                        id: navigationListItemLayout
                         title.text: model.mode
-
+                        title.color: "#5D5D5D"
+                        padding { top: units.gu(1); bottom: units.gu(1) }
                         Icon {
                             SlotsLayout.position: SlotsLayout.Trailing
                             width: units.gu(2)
-                            height: width
                             name: "tick"
                             visible: navApp.settings.routingMode === model.index
                         }
@@ -105,8 +113,8 @@
                     onClicked: {
                         navApp.settings.routingMode = model.index
                         mainPageStack.executeJavaScript("if (nav.get_route_status() != 'no' && !nav.get_route_status().startsWith('simulate')){nav.set_route_status('waiting4signal')}; settings.set_routing_mode(" + model.index +");")
-                        _modeList.subText.text = navigationModeModel.get(navApp.settings.routingMode).mode
-                        _modeList.toggleExpansion()
+                        modeList.subText.text = navigationModeModel.get(navApp.settings.routingMode).mode
+                        modeList.toggleExpansion()
                     }
                 }
             }
@@ -152,21 +160,24 @@
             }
 
             ExpandableListItem {
-                id: _soundList
+                id: soundList
 
-                listViewHeight: units.gu(21)
+                listViewHeight: units.gu(12+1)
                 titleText.text: i18n.tr("Guidance")
 
                 model: soundModel
 
                 delegate: ListItem {
+                    divider.visible: false
+                    height: soundListItemLayout.height
                     ListItemLayout {
+                        id: soundListItemLayout
                         title.text: model.sound
-
+                        title.color: "#5D5D5D"
+                        padding { top: units.gu(1); bottom: units.gu(1) }
                         Icon {
                             SlotsLayout.position: SlotsLayout.Trailing
                             width: units.gu(2)
-                            height: width
                             name: "tick"
                             visible: navApp.settings.soundIndications === model.index
                         }
@@ -175,33 +186,36 @@
                     onClicked: {
                         navApp.settings.soundIndications = model.index
                         mainPageStack.executeJavaScript("settings.set_sound(" + model.index + ");")
-                        _soundList.subText.text = soundModel.get(navApp.settings.soundIndications).sound
-                        _soundList.toggleExpansion()
+                        soundList.subText.text = soundModel.get(navApp.settings.soundIndications).sound
+                        soundList.toggleExpansion()
                     }
                 }
             }
 
-           HeaderListItem {
+           ListItemHeader {
                 id: mapListHeader
                 title: i18n.tr("Map")
             }
 
            ExpandableListItem {
-               id: _unitList
+               id: unitList
 
-               listViewHeight: units.gu(14)
+               listViewHeight: units.gu(8+1)
                titleText.text: i18n.tr("Units")
 
                model: unitModel
 
                delegate: ListItem {
+                   divider.visible: false
+                   height: unitListItemLayout.height
                    ListItemLayout {
+                       id: unitListItemLayout
                        title.text: model.unit
-
+                       title.color: "#5D5D5D"
+                       padding { top: units.gu(1); bottom: units.gu(1) }
                        Icon {
                            SlotsLayout.position: SlotsLayout.Trailing
                            width: units.gu(2)
-                           height: width
                            name: "tick"
                            visible: navApp.settings.unit === model.index
                        }
@@ -211,13 +225,13 @@
                        navApp.settings.unit = model.index
                        mainPageStack.executeJavaScript("settings.set_unit(\'" + ( model.index === 0 ? "km" : "mi" ) +"\');")
                        mainPageStack.executeJavaScript("ui.set_scale_unit(\'" + ( navApp.settings.unit === 0 ? "km" : "mi" ) +"\');")
-                       _unitList.subText.text = unitModel.get(navApp.settings.unit).unit
-                       _unitList.toggleExpansion()
+                       unitList.subText.text = unitModel.get(navApp.settings.unit).unit
+                       unitList.toggleExpansion()
                    }
                }
            }
 
-            HeaderListItem {
+            ListItemHeader {
                 id: privacyListHeader
                 title: i18n.tr("History")
             }
@@ -237,9 +251,8 @@
             }
 
             ListItem {
-                Label {
-                    anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
-                    text: i18n.tr("Clear History")
+                ListItemLayout {
+                    title.text: i18n.tr("Clear History")
                 }
                 onClicked: PopupUtils.open(confirmEraseHistory)
             }
@@ -251,6 +264,7 @@
                 id: dialogueErase
                 title: i18n.tr("Clear History")
                 text: i18n.tr("You'll delete the current history")
+
                 Button {
                     text: i18n.tr("Delete")
                     color: UbuntuColors.red
@@ -259,6 +273,7 @@
                         PopupUtils.close(dialogueErase);
                     }
                 }
+
                 Button {
                      text: i18n.tr("Cancel")
                      onClicked: PopupUtils.close(dialogueErase)
@@ -279,7 +294,5 @@
                 }
             }
         }
-
     }
 }
-

=== modified file 'qml/components/ExpandableListItem.qml'
--- qml/components/ExpandableListItem.qml	2016-03-26 18:53:17 +0000
+++ qml/components/ExpandableListItem.qml	2016-03-28 19:01:41 +0000
@@ -45,12 +45,12 @@
     ListItem {
         id: headerListItem
         height: expandableHeader.height + divider.height
-
+        divider.visible: false
         ListItemLayout {
             id: expandableHeader
 
             subtitle.textSize: Label.Medium
-
+            subtitle.visible: !expansion.expanded
             Icon {
                 id: arrow
 

=== removed file 'qml/components/HeaderListItem.qml'
--- qml/components/HeaderListItem.qml	2016-03-26 18:53:17 +0000
+++ qml/components/HeaderListItem.qml	1970-01-01 00:00:00 +0000
@@ -1,30 +0,0 @@
-/*
- * uNav http://launchpad.net/unav
- * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90
- *
- * uNav is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 3 of the License, or
- * (at your option) any later version.
- *
- * uNav is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-
-ListItem {
-    id: headerListItem
-
-    property string title
-
-    height: units.gu(4)
-    Label {
-        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
-        text: title
-        font.bold: true
-    }
-}

=== added file 'qml/components/ListItemHeader.qml'
--- qml/components/ListItemHeader.qml	1970-01-01 00:00:00 +0000
+++ qml/components/ListItemHeader.qml	2016-03-28 19:01:41 +0000
@@ -0,0 +1,30 @@
+/*
+ * uNav http://launchpad.net/unav
+ * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90
+ *
+ * uNav is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * uNav is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+ListItem {
+    id: headerListItem
+
+    property string title
+
+    height: units.gu(4)
+    Label {
+        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
+        text: title
+        font.bold: false
+    }
+}