Style settings section headings

interface/resources/qml/dialogs/PreferencesDialog.qml

@@ -2,7 +2,7 @@
 //  PreferencesDialog.qml
 //
 //  Created by Bradley Austin Davis on 24 Jan 2016
-//  Copyright 2015 High Fidelity, Inc.
+//  Copyright 2016 High Fidelity, Inc.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -10,8 +10,6 @@
 
 import QtQuick 2.5
 import QtQuick.Controls 1.4
-import QtQuick.Dialogs 1.2 as OriginalDialogs
-import Qt.labs.settings 1.0
 
 import "../controls-uit" as HifiControls
 import "../styles-uit"
@@ -75,10 +73,20 @@ Window {
             }
 
             if (sections.length) {
-                sections[0].expanded = true;
+                // Default sections to expanded/collapsed as appropriate for dialog.
-                if (sections.length === 1) {
+                if (title === "Avatar Preferences") {
-                    sections[0].collapsable = false
+                    sections[0].expanded = true;
+                    if (sections.length === 1) {
+                        sections[0].collapsable = false
+                    }
+                } else {
+                    for (i = 0; i < sections.length; i++) {
+                        sections[i].collapsable = false;
+                        sections[i].expanded = true;
+                    }
                 }
+                sections[0].hasSeparator = false;
+                sections[sections.length - 1].hasSpacer = true;
             }
         }
 
@@ -109,4 +117,3 @@ Window {
         }
     }
 }
-

interface/resources/qml/dialogs/preferences/Preference.qml

@@ -1,3 +1,13 @@
+//
+//  Preference.qml
+//
+//  Created by Bradley Austin Davis on 18 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 

interface/resources/qml/dialogs/preferences/Section.qml

@@ -1,20 +1,33 @@
+//
+//  Section.qml
+//
+//  Created by Bradley Austin Davis on 18 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 import Hifi 1.0
 
-import "../../controls" as VrControls
+import "../../controls-uit" as HiFiControls
+import "../../styles-uit"
 import "."
 
 Preference {
     id: root
     property bool collapsable: true
     property bool expanded: false
+    property bool hasSeparator: true
+    property bool hasSpacer: false
     property string name: "Header"
     property real spacing: 8
-    readonly property alias toggle: toggle
-    readonly property alias header: header
     default property alias preferences: contentContainer.children
 
+    HifiConstants { id: hifi }
+
     function saveAll() {
         for (var i = 0; i < d.preferences.length; ++i) {
             var preference = d.preferences[i];
@@ -29,47 +42,23 @@ Preference {
         }
     }
 
-    clip: true
+    children: [ contentContainer ]
-    children: [ toggle, header, contentContainer ]
+
-    height: expanded ? header.height + contentContainer.height + root.spacing * 3
+    height: contentContainer.height + (root.hasSpacer ? 2 * hifi.dimensions.contentSpacing.y : 0)
-                     : Math.max(toggle.height, header.height) + root.spacing * 2
-    Behavior on height { PropertyAnimation {} }
 
     Component.onCompleted: d.buildPreferences();
 
-    function toggleExpanded() {
+    HiFiControls.StaticSection {
-        root.expanded = !root.expanded;
-    }
-
-    VrControls.FontAwesome {
-        id: toggle
-        width: root.collapsable ? height : 0
-        anchors { left: parent.left; top: parent.top; margins: root.spacing }
-        visible: root.collapsable
-        enabled: root.collapsable
-        rotation: root.expanded ? 0 : -90
-        text: "\uf078"
-        Behavior on rotation { PropertyAnimation {} }
-        MouseArea { anchors.fill: parent; onClicked: root.toggleExpanded() }
-    }
-
-    Text {
-        id: header
-        anchors { left: toggle.right; top: parent.top; leftMargin: root.spacing * 2; margins: root.spacing }
-        font.bold: true
-        font.pointSize: 16
-        color: "#0e7077"
-        text: root.name
-        MouseArea { anchors.fill: parent; onClicked: root.toggleExpanded() }
-    }
-
-    Column {
         id: contentContainer
-        spacing: root.spacing
+        name: root.name
-        anchors { left: toggle.right; top: header.bottom; topMargin: root.spacing; right: parent.right; margins: root.spacing }
+
-        enabled: root.expanded
+        hasSeparator: root.hasSeparator
-        visible: root.expanded
+
-        clip: true
+        anchors {
+            left: parent.left
+            right: parent.right
+            margins: 0
+        }
     }
 
     QtObject {