Merge pull request #11506 from Ultimaker/CURA-8949_preferences_styling

Styling of preferences screens

resources/qml/Preferences/GeneralPage.qml

@@ -100,14 +100,14 @@ UM.PreferencesPage
         invertZoomCheckbox.checked = boolCheck(UM.Preferences.getValue("view/invert_zoom"))
         UM.Preferences.resetPreference("view/zoom_to_mouse");
         zoomToMouseCheckbox.checked = boolCheck(UM.Preferences.getValue("view/zoom_to_mouse"))
-        UM.Preferences.resetPreference("view/top_layer_count");
+        //UM.Preferences.resetPreference("view/top_layer_count");
-        topLayerCountCheckbox.checked = boolCheck(UM.Preferences.getValue("view/top_layer_count"))
+        //topLayerCountCheckbox.checked = boolCheck(UM.Preferences.getValue("view/top_layer_count"))
         UM.Preferences.resetPreference("general/restore_window_geometry")
         restoreWindowPositionCheckbox.checked = boolCheck(UM.Preferences.getValue("general/restore_window_geometry"))
 
         UM.Preferences.resetPreference("general/camera_perspective_mode")
-        var defaultCameraMode = UM.Preferences.getValue("general/camera_perspective_mode")
+        //var defaultCameraMode = UM.Preferences.getValue("general/camera_perspective_mode")
-        setDefaultCameraMode(defaultCameraMode)
+//        /setDefaultCameraMode(defaultCameraMode)
 
         UM.Preferences.resetPreference("cura/choice_on_profile_override")
         setDefaultDiscardOrKeepProfile(UM.Preferences.getValue("cura/choice_on_profile_override"))
@@ -125,6 +125,13 @@ UM.PreferencesPage
         pluginNotificationsUpdateCheckbox.checked = boolCheck(UM.Preferences.getValue("info/automatic_plugin_update_check"))
     }
 
+    buttons: [
+        Cura.SecondaryButton
+        {
+            text: catalog.i18nc("@action:button", "Defaults")
+            onClicked: reset()
+        }
+    ]
     ScrollView
     {
         id: preferencesScrollView
@@ -150,20 +157,20 @@ UM.PreferencesPage
 
             UM.Label
             {
-                font.bold: true
+                font: UM.Theme.getFont("medium_bold")
                 text: catalog.i18nc("@label", "Interface")
             }
 
             GridLayout
             {
                 id: interfaceGrid
-                columns: 4
+                columns: 2
                 width: parent.width
 
                 UM.Label
                 {
                     id: languageLabel
-                    text: "Language:" //Don't translate this, to make it easier to find the language drop-down if you can't read the current language.
+                    text: "Language*:" //Don't translate this, to make it easier to find the language drop-down if you can't read the current language.
                 }
 
                 ListModel
@@ -208,7 +215,8 @@ UM.PreferencesPage
 
                     textRole: "text"
                     model: languageList
-                    Layout.fillWidth: true
+                    implicitWidth: UM.Theme.getSize("setting_control").width
+                    implicitHeight: currencyField.height
 
                     function setCurrentIndex() {
                         var code = UM.Preferences.getValue("general/language");
@@ -223,7 +231,9 @@ UM.PreferencesPage
 
                     currentIndex: setCurrentIndex()
 
-                    onActivated: if (model.get(index).code != "")
+                    onActivated:
+                    {
+                        if (model.get(index).code != "")
                         {
                             UM.Preferences.setValue("general/language", model.get(index).code);
                         }
@@ -231,6 +241,7 @@ UM.PreferencesPage
                         {
                             currentIndex = setCurrentIndex();
                         }
+                    }
                 }
 
                 UM.Label
@@ -244,13 +255,14 @@ UM.PreferencesPage
                     id: currencyField
                     selectByMouse: true
                     text: UM.Preferences.getValue("cura/currency")
+                    implicitWidth: UM.Theme.getSize("setting_control").width
                     onTextChanged: UM.Preferences.setValue("cura/currency", text)
                 }
 
                 UM.Label
                 {
                     id: themeLabel
-                    text: catalog.i18nc("@label","Theme:")
+                    text: catalog.i18nc("@label: Please keep the asterix, it's to indicate that a restart is needed.", "Theme*:")
                 }
 
                 ListModel
@@ -272,7 +284,8 @@ UM.PreferencesPage
 
                     model: themeList
                     textRole: "text"
-                    Layout.fillWidth: true
+                    implicitWidth: UM.Theme.getSize("setting_control").width
+                    implicitHeight: currencyField.height
 
                     currentIndex:
                     {
@@ -290,23 +303,6 @@ UM.PreferencesPage
                 }
             }
 
-            UM.Label
-            {
-                id: languageCaption
-
-                //: Language change warning
-                text: catalog.i18nc("@label", "You will need to restart the application for these changes to have effect.")
-                wrapMode: Text.WordWrap
-                font.italic: true
-            }
-
-            Item
-            {
-                //: Spacer
-                height: UM.Theme.getSize("default_margin").height
-                width: UM.Theme.getSize("default_margin").width
-            }
-
             UM.TooltipArea
             {
                 width: childrenRect.width;
@@ -324,6 +320,16 @@ UM.PreferencesPage
                 }
             }
 
+            UM.Label
+            {
+                id: languageCaption
+
+                //: Language change warning
+                text: catalog.i18nc("@label", "*You will need to restart the application for these changes to have effect.")
+                wrapMode: Text.WordWrap
+                font.italic: true
+            }
+
             Item
             {
                 //: Spacer
@@ -333,7 +339,7 @@ UM.PreferencesPage
 
             UM.Label
             {
-                font.bold: true
+                font: UM.Theme.getFont("medium_bold")
                 text: catalog.i18nc("@label", "Viewport behavior")
             }
 
@@ -526,7 +532,7 @@ UM.PreferencesPage
                 text: catalog.i18nc("@info:tooltip", "What type of camera rendering should be used?")
                 Column
                 {
-                    spacing: 4 * screenScaleFactor
+                    spacing: UM.Theme.getSize("narrow_margin").height
 
                     UM.Label
                     {
@@ -548,6 +554,8 @@ UM.PreferencesPage
 
                         model: comboBoxList
                         textRole: "text"
+                        width: UM.Theme.getSize("setting_control").width
+                        height: UM.Theme.getSize("setting_control").height
 
                         currentIndex:
                         {
@@ -575,7 +583,7 @@ UM.PreferencesPage
 
             UM.Label
             {
-                font.bold: true
+                font: UM.Theme.getFont("medium_bold")
                 text: catalog.i18nc("@label","Opening and saving files")
             }
 
@@ -589,6 +597,7 @@ UM.PreferencesPage
                 {
                     id: singleInstanceCheckbox
                     text: catalog.i18nc("@option:check","Use a single instance of Cura")
+
                     checked: boolCheck(UM.Preferences.getValue("cura/single_instance"))
                     onCheckedChanged: UM.Preferences.setValue("cura/single_instance", checked)
                 }
@@ -692,7 +701,7 @@ UM.PreferencesPage
 
                 Column
                 {
-                    spacing: 4 * screenScaleFactor
+                    spacing: UM.Theme.getSize("narrow_margin").height
 
                     UM.Label
                     {
@@ -702,7 +711,8 @@ UM.PreferencesPage
                     Cura.ComboBox
                     {
                         id: choiceOnOpenProjectDropDownButton
-                        width: Math.round(250 * screenScaleFactor)
+                        width: UM.Theme.getSize("setting_control").width
+                        height: UM.Theme.getSize("setting_control").height
 
                         model: ListModel
                         {
@@ -746,18 +756,18 @@ UM.PreferencesPage
 
             UM.TooltipArea
             {
-                width: childrenRect.width;
+                width: childrenRect.width
-                height: childrenRect.height;
+                height: childrenRect.height
 
                 text: catalog.i18nc("@info:tooltip", "When you have made changes to a profile and switched to a different one, a dialog will be shown asking whether you want to keep your modifications or not, or you can choose a default behaviour and never show that dialog again.")
 
                 Column
                 {
-                    spacing: 4 * screenScaleFactor
+                    spacing: UM.Theme.getSize("narrow_margin").height
 
                     UM.Label
                     {
-                        font.bold: true
+                        font: UM.Theme.getFont("medium_bold")
                         text: catalog.i18nc("@label", "Profiles")
                     }
 
@@ -769,8 +779,8 @@ UM.PreferencesPage
                     Cura.ComboBox
                     {
                         id: choiceOnProfileOverrideDropDownButton
-                        width: Math.round(250 * screenScaleFactor)
+                        width: UM.Theme.getSize("setting_control").width
-                        popup.width: Math.round(350 * screenScaleFactor)
+                        height: UM.Theme.getSize("setting_control").height
                         model: ListModel
                         {
                             id: discardOrKeepProfileListModel
@@ -812,7 +822,7 @@ UM.PreferencesPage
 
             UM.Label
             {
-                font.bold: true
+                font: UM.Theme.getFont("medium_bold")
                 text: catalog.i18nc("@label", "Privacy")
             }
             UM.TooltipArea
@@ -829,15 +839,17 @@ UM.PreferencesPage
                     onCheckedChanged: UM.Preferences.setValue("info/send_slice_info", checked)
                 }
 
-                Button
+
+                UM.SimpleButton
                 {
-                    id: showMoreInfo
+                    onClicked: CuraApplication.showMoreInformationDialogForAnonymousDataCollection()
-                    anchors.top: sendDataCheckbox.bottom
+                    iconSource: UM.Theme.getIcon("Information")
-                    text: catalog.i18nc("@action:button", "More information")
+                    anchors.left: sendDataCheckbox.right
-                    onClicked:
+                    anchors.verticalCenter: sendDataCheckbox.verticalCenter
-                    {
+                    hoverBackgroundColor: UM.Theme.getColor("secondary_button_hover")
-                        CuraApplication.showMoreInformationDialogForAnonymousDataCollection();
+                    backgroundRadius: width / 2
-                    }
+                    height: UM.Theme.getSize("small_button_icon").height
+                    width: height
                 }
             }
 
@@ -850,7 +862,7 @@ UM.PreferencesPage
 
             UM.Label
             {
-                font.bold: true
+                font: UM.Theme.getFont("medium_bold")
                 text: catalog.i18nc("@label", "Updates")
             }
 

resources/qml/Preferences/MachinesPage.qml

@@ -11,15 +11,16 @@ import Cura 1.0 as Cura
 
 UM.ManagementPage
 {
-    id: base;
+    id: base
 
-    title: catalog.i18nc("@title:tab", "Printers");
+    title: catalog.i18nc("@title:tab", "Printers")
     model: Cura.GlobalStacksModel { }
 
     sectionRole: "discoverySource"
 
     activeId: Cura.MachineManager.activeMachine !== null ? Cura.MachineManager.activeMachine.id: ""
     activeIndex: activeMachineIndex()
+    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
 
     function activeMachineIndex()
     {
@@ -34,44 +35,20 @@ UM.ManagementPage
     }
 
     buttons: [
-        Button
+        Cura.SecondaryButton
         {
-            id: activateMenuButton
+            text: catalog.i18nc("@action:button", "Add New")
-            text: catalog.i18nc("@action:button", "Activate");
-            icon.name: "list-activate"
-            enabled: base.currentItem != null && base.currentItem.id != Cura.MachineManager.activeMachine.id
-            onClicked: Cura.MachineManager.setActiveMachine(base.currentItem.id)
-        },
-        Button
-        {
-            id: addMenuButton
-            text: catalog.i18nc("@action:button", "Add");
-            icon.name: "list-add"
             onClicked: Cura.Actions.addMachine.trigger()
-        },
-        Button
-        {
-            id: removeMenuButton
-            text: catalog.i18nc("@action:button", "Remove");
-            icon.name: "list-remove"
-            enabled: base.currentItem != null && model.count > 1
-            onClicked: confirmDialog.open();
-        },
-        Button
-        {
-            id: renameMenuButton
-            text: catalog.i18nc("@action:button", "Rename");
-            icon.name: "edit-rename"
-            enabled: base.currentItem != null && base.currentItem.metadata.group_name == null
-            onClicked: renameDialog.open();
         }
     ]
 
     Item
     {
+        id: content_item
         visible: base.currentItem != null
         anchors.fill: parent
 
+
         UM.Label
         {
             id: machineName
@@ -85,10 +62,14 @@ UM.ManagementPage
         {
             id: machineActions
             visible: currentItem && currentItem.id == Cura.MachineManager.activeMachine.id
-            anchors.left: parent.left
+            anchors
-            anchors.right: parent.right
+            {
-            anchors.top: machineName.bottom
+                left: parent.left
-            anchors.topMargin: UM.Theme.getSize("default_margin").height
+                right: parent.right
+                top: machineName.bottom
+                topMargin: UM.Theme.getSize("default_margin").height
+            }
+            spacing: UM.Theme.getSize("default_margin").height
 
             Repeater
             {
@@ -99,7 +80,7 @@ UM.ManagementPage
                 {
                     width: Math.round(childrenRect.width + 2 * screenScaleFactor)
                     height: childrenRect.height
-                    Button
+                    Cura.SecondaryButton
                     {
                         text: machineActionRepeater.model[index].label
                         onClicked:
@@ -122,12 +103,6 @@ UM.ManagementPage
             minimumHeight: UM.Theme.getSize("modal_window_minimum").height
             maximumWidth: minimumWidth * 3
             maximumHeight: minimumHeight * 3
-            rightButtons: Button
-            {
-                text: catalog.i18nc("@action:button", "Close")
-                icon.name: "dialog-close"
-                onClicked: actionDialog.reject()
-            }
         }
 
         UM.I18nCatalog { id: catalog; name: "cura"; }
@@ -152,17 +127,39 @@ UM.ManagementPage
 
         UM.RenameDialog
         {
-            id: renameDialog;
+            id: renameDialog
-            object: base.currentItem && base.currentItem.name ? base.currentItem.name : "";
+            object: base.currentItem && base.currentItem.name ? base.currentItem.name : ""
             property var machine_name_validator: Cura.MachineNameValidator { }
-            validName: renameDialog.newName.match(renameDialog.machine_name_validator.machineNameRegex) != null;
+            validName: renameDialog.newName.match(renameDialog.machine_name_validator.machineNameRegex) != null
             onAccepted:
             {
-                Cura.MachineManager.renameMachine(base.currentItem.id, newName.trim());
+                Cura.MachineManager.renameMachine(base.currentItem.id, newName.trim())
                 //Force updating currentItem and the details panel
                 objectList.onCurrentIndexChanged()
             }
         }
+        Cura.Menu
+        {
+            id: menu
+            Cura.MenuItem
+            {
+                text: catalog.i18nc("@action:button", "Activate")
+                enabled: base.currentItem != null && base.currentItem.id != Cura.MachineManager.activeMachine.id
+                onTriggered: Cura.MachineManager.setActiveMachine(base.currentItem.id)
+            }
+            Cura.MenuItem
+            {
+                text: catalog.i18nc("@action:button", "Remove")
+                enabled: base.currentItem != null && model.count > 1
+                onTriggered: confirmDialog.open()
+            }
+            Cura.MenuItem
+            {
+                text: catalog.i18nc("@action:button", "Rename")
+                enabled: base.currentItem != null && base.currentItem.metadata.group_name == null
+                onTriggered:  renameDialog.open()
+            }
+       }
 
         Connections
         {
@@ -173,6 +170,5 @@ UM.ManagementPage
                 objectList.onCurrentIndexChanged()
             }
         }
-
     }
 }

resources/qml/Preferences/ProfilesPage.qml

@@ -10,35 +10,24 @@ import UM 1.5 as UM
 import Cura 1.6 as Cura
 
 
-Item
+UM.ManagementPage
 {
     id: base
 
-    property var resetEnabled: false  // Keep PreferencesDialog happy
     property var extrudersModel: CuraApplication.getExtrudersModel()
     property var qualityManagementModel: CuraApplication.getQualityManagementModel()
 
-    UM.I18nCatalog { id: catalog; name: "cura"; }
+    scrollviewCaption: catalog.i18nc("@label", "Profiles compatible with active printer:") + "<b>" + Cura.MachineManager.activeMachine.name + "</b>"
+
+    onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
 
-    Label
-    {
-        id: titleLabel
-        anchors
-        {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            margins: 5 * screenScaleFactor
-        }
-        font.pointSize: 18
-        text: catalog.i18nc("@title:tab", "Profiles")
-    }
 
     property var hasCurrentItem: base.currentItem != null
+    sectionRole: "section_name"
 
     property var currentItem:
     {
-        var current_index = qualityListView.currentIndex;
+        var current_index = objectList.currentIndex;
         return (current_index == -1) ? null : base.qualityManagementModel.getItem(current_index);
     }
 
@@ -66,125 +55,29 @@ Item
         return isCurrentItemActivated && Cura.MachineManager.hasUserSettings;
     }
 
-    Row  // Button Row
+    model: qualityManagementModel
-    {
+    buttons: [
-        id: buttonRow
+        Cura.SecondaryButton
-        anchors
         {
-            left: parent.left
+            text: catalog.i18nc("@action:button", "Import")
-            right: parent.right
+            onClicked:importDialog.open()
-            top: titleLabel.bottom
+        },
-        }
+        Cura.SecondaryButton
-        height: childrenRect.height
-
-        // Activate button
-        Button
-        {
-            id: activateMenuButton
-            text: catalog.i18nc("@action:button", "Activate")
-            icon.name: "list-activate"
-            enabled: !isCurrentItemActivated && base.currentItem
-            onClicked:
-            {
-                if(base.currentItem.is_read_only)
-                {
-                    Cura.IntentManager.selectIntent(base.currentItem.intent_category, base.currentItem.quality_type);
-                }
-                else
-                {
-                    Cura.MachineManager.setQualityChangesGroup(base.currentItem.quality_changes_group);
-                }
-            }
-        }
-
-        // Create button
-        Button
         {
             id: createMenuButton
-            text: catalog.i18nc("@label", "Create")
+            text: catalog.i18nc("@action:button", "Create new")
-            icon.name: "list-add"
+
-            enabled: base.canCreateProfile && !Cura.MachineManager.stacksHaveErrors
+            enabled: !Cura.MachineManager.stacksHaveErrors
             visible: base.canCreateProfile
 
             onClicked:
             {
-                createQualityDialog.object = Cura.ContainerManager.makeUniqueName(base.currentItem.name);
+                createQualityDialog.object = Cura.ContainerManager.makeUniqueName(base.currentItem.name)
-                createQualityDialog.open();
+                createQualityDialog.open()
-                createQualityDialog.selectText();
+                createQualityDialog.selectText()
             }
         }
-
+    ]
-        // Duplicate button
-        Button
-        {
-            id: duplicateMenuButton
-            text: catalog.i18nc("@label", "Duplicate")
-            icon.name: "list-add"
-            enabled: !base.canCreateProfile
-            visible: !base.canCreateProfile
-
-            onClicked:
-            {
-                duplicateQualityDialog.object = Cura.ContainerManager.makeUniqueName(base.currentItem.name);
-                duplicateQualityDialog.open();
-                duplicateQualityDialog.selectText();
-            }
-        }
-
-        // Remove button
-        Button
-        {
-            id: removeMenuButton
-            text: catalog.i18nc("@action:button", "Remove")
-            icon.name: "list-remove"
-            enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated
-            onClicked:
-            {
-                forceActiveFocus();
-                confirmRemoveQualityDialog.open();
-            }
-        }
-
-        // Rename button
-        Button
-        {
-            id: renameMenuButton
-            text: catalog.i18nc("@action:button", "Rename")
-            icon.name: "edit-rename"
-            enabled: base.hasCurrentItem && !base.currentItem.is_read_only
-            onClicked:
-            {
-                renameQualityDialog.object = base.currentItem.name;
-                renameQualityDialog.open();
-                renameQualityDialog.selectText();
-            }
-        }
-
-        // Import button
-        Button
-        {
-            id: importMenuButton
-            text: catalog.i18nc("@action:button", "Import")
-            icon.name: "document-import"
-            onClicked:
-            {
-                importDialog.open();
-            }
-        }
-
-        // Export button
-        Button
-        {
-            id: exportMenuButton
-            text: catalog.i18nc("@action:button", "Export")
-            icon.name: "document-export"
-            enabled: base.hasCurrentItem && !base.currentItem.is_read_only
-            onClicked:
-            {
-                exportDialog.open();
-            }
-        }
-    }
 
     // Click create profile from ... in Profile context menu
     signal createProfile()
@@ -195,186 +88,209 @@ Item
         createQualityDialog.selectText();
     }
 
-    // Dialog to request a name when creating a new profile
-    UM.RenameDialog
-    {
-        id: createQualityDialog
-        title: catalog.i18nc("@title:window", "Create Profile")
-        object: "<new name>"
-        explanation: catalog.i18nc("@info", "Please provide a name for this profile.")
-        onAccepted:
-        {
-            base.newQualityNameToSelect = newName;  // We want to switch to the new profile once it's created
-            base.toActivateNewQuality = true;
-            base.qualityManagementModel.createQualityChanges(newName);
-        }
-    }
-
     property string newQualityNameToSelect: ""
     property bool toActivateNewQuality: false
 
-    // This connection makes sure that we will switch to the correct quality after the model gets updated
+    Item
-    Connections
     {
-        target: base.qualityManagementModel
+        id: content_item
-        function onItemsChanged()
+        anchors.fill: parent
+        // This connection makes sure that we will switch to the correct quality after the model gets updated
+        Connections
         {
-            var toSelectItemName = base.currentItem == null ? "" : base.currentItem.name;
+            target: base.qualityManagementModel
-            if (newQualityNameToSelect != "")
+            function onItemsChanged()
             {
-                toSelectItemName = newQualityNameToSelect;
+                var toSelectItemName = base.currentItem == null ? "" : base.currentItem.name;
-            }
+                if (newQualityNameToSelect != "")
-
-            var newIdx = -1;  // Default to nothing if nothing can be found
-            if (toSelectItemName != "")
-            {
-                // Select the required quality name if given
-                for (var idx = 0; idx < base.qualityManagementModel.count; ++idx)
                 {
-                    var item = base.qualityManagementModel.getItem(idx);
+                    toSelectItemName = newQualityNameToSelect;
-                    if (item && item.name == toSelectItemName)
+                }
+
+                var newIdx = -1;  // Default to nothing if nothing can be found
+                if (toSelectItemName != "")
+                {
+                    // Select the required quality name if given
+                    for (var idx = 0; idx < base.qualityManagementModel.count; ++idx)
                     {
-                        // Switch to the newly created profile if needed
+                        var item = base.qualityManagementModel.getItem(idx);
-                        newIdx = idx;
+                        if (item && item.name == toSelectItemName)
-                        if (base.toActivateNewQuality)
                         {
-                            // Activate this custom quality if required
+                            // Switch to the newly created profile if needed
-                            if(item.quality_changes_group)
+                            newIdx = idx;
+                            if (base.toActivateNewQuality)
                             {
-                                Cura.MachineManager.setQualityChangesGroup(item.quality_changes_group);
+                                // Activate this custom quality if required
+                                if(item.quality_changes_group)
+                                {
+                                    Cura.MachineManager.setQualityChangesGroup(item.quality_changes_group);
+                                }
                             }
+                            break;
                         }
-                        break;
+                    }
+                }
+                objectList.currentIndex = newIdx;
+
+                // Reset states
+                base.newQualityNameToSelect = "";
+                base.toActivateNewQuality = false;
+            }
+        }
+        UM.MessageDialog
+        {
+            id: messageDialog
+            standardButtons: Dialog.Ok
+        }
+
+        // Dialog to request a name when creating a new profile
+        UM.RenameDialog
+        {
+            id: createQualityDialog
+            title: catalog.i18nc("@title:window", "Create Profile")
+            object: "<new name>"
+            explanation: catalog.i18nc("@info", "Please provide a name for this profile.")
+            onAccepted:
+            {
+                base.newQualityNameToSelect = newName;  // We want to switch to the new profile once it's created
+                base.toActivateNewQuality = true;
+                base.qualityManagementModel.createQualityChanges(newName);
+            }
+        }
+
+        Cura.Menu
+        {
+            id: menu
+            Cura.MenuItem
+            {
+                text: catalog.i18nc("@action:button", "Activate")
+
+                enabled: !isCurrentItemActivated && base.currentItem
+                onTriggered:
+                {
+                    if(base.currentItem.is_read_only)
+                    {
+                        Cura.IntentManager.selectIntent(base.currentItem.intent_category, base.currentItem.quality_type)
+                    }
+                    else
+                    {
+                        Cura.MachineManager.setQualityChangesGroup(base.currentItem.quality_changes_group)
                     }
                 }
             }
-            qualityListView.currentIndex = newIdx;
+            Cura.MenuItem
-
-            // Reset states
-            base.newQualityNameToSelect = "";
-            base.toActivateNewQuality = false;
-        }
-    }
-
-    // Dialog to request a name when duplicating a new profile
-    UM.RenameDialog
-    {
-        id: duplicateQualityDialog
-        title: catalog.i18nc("@title:window", "Duplicate Profile")
-        object: "<new name>"
-        onAccepted:
-        {
-            base.qualityManagementModel.duplicateQualityChanges(newName, base.currentItem);
-        }
-    }
-
-    // Confirmation dialog for removing a profile
-    UM.MessageDialog
-    {
-        id: confirmRemoveQualityDialog
-
-        title: catalog.i18nc("@title:window", "Confirm Remove")
-        text: catalog.i18nc("@label (%1 is object name)", "Are you sure you wish to remove %1? This cannot be undone!").arg(base.currentItemName)
-        standardButtons: StandardButton.Yes | StandardButton.No
-        modal: true
-
-        onAccepted:
-        {
-            base.qualityManagementModel.removeQualityChangesGroup(base.currentItem.quality_changes_group);
-            // reset current item to the first if available
-            qualityListView.currentIndex = -1;  // Reset selection.
-        }
-    }
-
-    // Dialog to rename a quality profile
-    UM.RenameDialog
-    {
-        id: renameQualityDialog
-        title: catalog.i18nc("@title:window", "Rename Profile")
-        object: "<new name>"
-        onAccepted:
-        {
-            var actualNewName = base.qualityManagementModel.renameQualityChangesGroup(base.currentItem.quality_changes_group, newName);
-            base.newQualityNameToSelect = actualNewName;  // Select the new name after the model gets updated
-        }
-    }
-
-    // Dialog for importing a quality profile
-    FileDialog
-    {
-        id: importDialog
-        title: catalog.i18nc("@title:window", "Import Profile")
-        selectExisting: true
-        nameFilters: base.qualityManagementModel.getFileNameFilters("profile_reader")
-        folder: CuraApplication.getDefaultPath("dialog_profile_path")
-        onAccepted:
-        {
-            var result = Cura.ContainerManager.importProfile(fileUrl);
-            messageDialog.title = catalog.i18nc("@title:window", "Import Profile")
-            messageDialog.text = result.message;
-            messageDialog.open();
-            CuraApplication.setDefaultPath("dialog_profile_path", folder);
-        }
-    }
-
-    // Dialog for exporting a quality profile
-    FileDialog
-    {
-        id: exportDialog
-        title: catalog.i18nc("@title:window", "Export Profile")
-        selectExisting: false
-        nameFilters: base.qualityManagementModel.getFileNameFilters("profile_writer")
-        folder: CuraApplication.getDefaultPath("dialog_profile_path")
-        onAccepted:
-        {
-            var result = Cura.ContainerManager.exportQualityChangesGroup(base.currentItem.quality_changes_group,
-                                                                         fileUrl, selectedNameFilter);
-
-            if (result && result.status == "error")
             {
-                messageDialog.title = catalog.i18nc("@title:window", "Export Profile")
+                text: catalog.i18nc("@action:button", "Remove")
+                enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated
+                onTriggered:
+                {
+                    forceActiveFocus()
+                    confirmRemoveQualityDialog.open()
+                }
+            }
+            Cura.MenuItem
+            {
+                text: catalog.i18nc("@action:button", "Rename")
+                enabled: base.hasCurrentItem && !base.currentItem.is_read_only
+                onTriggered:
+                {
+                    renameQualityDialog.object = base.currentItem.name
+                    renameQualityDialog.open()
+                    renameQualityDialog.selectText()
+                }
+            }
+            Cura.MenuItem
+            {
+                text: catalog.i18nc("@action:button", "Export")
+                enabled: base.hasCurrentItem && !base.currentItem.is_read_only
+                onTriggered: exportDialog.open()
+            }
+        }
+
+        // Dialog for exporting a quality profile
+        FileDialog
+        {
+            id: exportDialog
+            title: catalog.i18nc("@title:window", "Export Profile")
+            selectExisting: false
+            nameFilters: base.qualityManagementModel.getFileNameFilters("profile_writer")
+            folder: CuraApplication.getDefaultPath("dialog_profile_path")
+            onAccepted:
+            {
+                var result = Cura.ContainerManager.exportQualityChangesGroup(base.currentItem.quality_changes_group,
+                                                                             fileUrl, selectedNameFilter);
+
+                if (result && result.status == "error")
+                {
+                    messageDialog.title = catalog.i18nc("@title:window", "Export Profile")
+                    messageDialog.text = result.message;
+                    messageDialog.open();
+                }
+
+                // else pop-up Message thing from python code
+                CuraApplication.setDefaultPath("dialog_profile_path", folder);
+            }
+        }
+
+        // Dialog to request a name when duplicating a new profile
+        UM.RenameDialog
+        {
+            id: duplicateQualityDialog
+            title: catalog.i18nc("@title:window", "Duplicate Profile")
+            object: "<new name>"
+            onAccepted:
+            {
+                base.qualityManagementModel.duplicateQualityChanges(newName, base.currentItem);
+            }
+        }
+
+        // Confirmation dialog for removing a profile
+        UM.MessageDialog
+        {
+            id: confirmRemoveQualityDialog
+
+            title: catalog.i18nc("@title:window", "Confirm Remove")
+            text: catalog.i18nc("@label (%1 is object name)", "Are you sure you wish to remove %1? This cannot be undone!").arg(base.currentItemName)
+            standardButtons: StandardButton.Yes | StandardButton.No
+            modal: true
+
+            onAccepted:
+            {
+                base.qualityManagementModel.removeQualityChangesGroup(base.currentItem.quality_changes_group);
+                // reset current item to the first if available
+                qualityListView.currentIndex = -1;  // Reset selection.
+            }
+        }
+
+        // Dialog to rename a quality profile
+        UM.RenameDialog
+        {
+            id: renameQualityDialog
+            title: catalog.i18nc("@title:window", "Rename Profile")
+            object: "<new name>"
+            onAccepted:
+            {
+                var actualNewName = base.qualityManagementModel.renameQualityChangesGroup(base.currentItem.quality_changes_group, newName);
+                base.newQualityNameToSelect = actualNewName;  // Select the new name after the model gets updated
+            }
+        }
+
+        // Dialog for importing a quality profile
+        FileDialog
+        {
+            id: importDialog
+            title: catalog.i18nc("@title:window", "Import Profile")
+            selectExisting: true
+            nameFilters: base.qualityManagementModel.getFileNameFilters("profile_reader")
+            folder: CuraApplication.getDefaultPath("dialog_profile_path")
+            onAccepted:
+            {
+                var result = Cura.ContainerManager.importProfile(fileUrl);
+                messageDialog.title = catalog.i18nc("@title:window", "Import Profile")
                 messageDialog.text = result.message;
                 messageDialog.open();
+                CuraApplication.setDefaultPath("dialog_profile_path", folder);
             }
-
-            // else pop-up Message thing from python code
-            CuraApplication.setDefaultPath("dialog_profile_path", folder);
-        }
-    }
-
-    //Dialogue box for showing the result of importing or exporting profiles.
-    UM.MessageDialog
-    {
-        id: messageDialog
-        standardButtons: Dialog.Ok
-    }
-
-    Item
-    {
-        id: contentsItem
-
-        anchors
-        {
-            top: titleLabel.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            margins: 5 * screenScaleFactor
-            bottomMargin: 0
-        }
-
-        clip: true
-    }
-
-    Item
-    {
-        anchors
-        {
-            top: buttonRow.bottom
-            topMargin: UM.Theme.getSize("default_margin").height
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
         }
 
         SystemPalette
@@ -382,241 +298,114 @@ Item
             id: palette
         }
 
-        Label
+        Column
         {
-            id: captionLabel
+            id: detailsPanelHeaderColumn
             anchors
             {
-                top: parent.top
                 left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+
+            spacing: UM.Theme.getSize("default_margin").height
+            visible: base.currentItem != null
+            UM.Label
+            {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                text: base.currentItemDisplayName
+                font: UM.Theme.getFont("large_bold")
+                elide: Text.ElideRight
+            }
+
+            Flow
+            {
+                id: currentSettingsActions
+                width: parent.width
+
+                visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
+
+                Cura.SecondaryButton
+                {
+                    text: catalog.i18nc("@action:button", "Update profile with current settings/overrides")
+                    enabled: Cura.MachineManager.hasUserSettings && objectList.currentIndex && !objectList.currentIndex.is_read_only
+                    onClicked: Cura.ContainerManager.updateQualityChanges()
+                }
+
+                Cura.SecondaryButton
+                {
+                    text: catalog.i18nc("@action:button", "Discard current changes");
+                    enabled: Cura.MachineManager.hasUserSettings
+                    onClicked: Cura.ContainerManager.clearUserContainers();
+                }
+            }
+
+            UM.Label
+            {
+                id: defaultsMessage
+                visible: false
+                text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
+                width: parent.width
+            }
+            UM.Label
+            {
+                id: noCurrentSettingsMessage
+                visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
+                text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
+                width: parent.width
+            }
+
+            UM.TabRow
+            {
+                id: profileExtruderTabs
+                UM.TabRowButton //One extra tab for the global settings.
+                {
+                    text: catalog.i18nc("@title:tab", "Global Settings")
+                }
+
+                Repeater
+                {
+                    model: base.extrudersModel
+
+                    UM.TabRowButton
+                    {
+                        text: model.name
+                    }
+                }
             }
-            visible: text != ""
-            text: catalog.i18nc("@label %1 is printer name", "Printer: %1").arg(Cura.MachineManager.activeMachine.name)
-            width: profileBackground.width
-            elide: Text.ElideRight
         }
 
         Rectangle
         {
-            id: profileBackground
+            color: UM.Theme.getColor("main_background")
             anchors
             {
-                top: captionLabel.visible ? captionLabel.bottom : parent.top
+                top: detailsPanelHeaderColumn.bottom
-                topMargin: captionLabel.visible ? UM.Theme.getSize("default_margin").height : 0
+                topMargin: -UM.Theme.getSize("default_lining").width
-                bottom: parent.bottom
                 left: parent.left
+                right: parent.right
+                bottom: parent.bottom
             }
-            width: (parent.width * 0.4) | 0
+            border.width: UM.Theme.getSize("default_lining").width
-
+            border.color: UM.Theme.getColor("thick_lining")
-            color: palette.light
+            visible: base.hasCurrentItem
-
-            ListView
-            {
-                id: qualityListView
-                anchors.fill: parent
-
-                ScrollBar.vertical: UM.ScrollBar
-                {
-                    id: profileScrollBar
-                }
-                clip: true
-                model: base.qualityManagementModel
-
-                Component.onCompleted:
-                {
-                    var selectedItemName = Cura.MachineManager.activeQualityOrQualityChangesName;
-
-                    // Select the required quality name if given
-                    for (var idx = 0; idx < base.qualityManagementModel.count; idx++)
-                    {
-                        var item = base.qualityManagementModel.getItem(idx);
-                        if (item.name == selectedItemName)
-                        {
-                            currentIndex = idx;
-                            break;
-                        }
-                    }
-                }
-
-                section.property: "section_name"
-                section.delegate: Rectangle
-                {
-                    height: childrenRect.height
-
-                    Label
-                    {
-                        anchors.left: parent.left
-                        anchors.leftMargin: UM.Theme.getSize("default_lining").width
-                        text: section
-                        font.bold: true
-                    }
-                }
-
-                delegate: Rectangle
-                {
-                    width: profileBackground.width - profileScrollBar.width
-                    height: childrenRect.height
-
-                    // Added this property to identify custom profiles in automated system tests (Squish)
-                    property bool isReadOnly: model.is_read_only
-
-                    property bool isCurrentItem: ListView.isCurrentItem
-                    color: isCurrentItem ? palette.highlight : (model.index % 2) ? palette.base : palette.alternateBase
-
-                    Label
-                    {
-                        anchors.left: parent.left
-                        anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                        anchors.right: parent.right
-                        width: Math.floor((parent.width * 0.8))
-                        text: model.name
-                        elide: Text.ElideRight
-                        font.italic:
-                        {
-                            if (model.is_read_only)
-                            {
-                                // For built-in qualities, it needs to match both the intent category and the quality name
-                                return model.name == Cura.MachineManager.activeQualityOrQualityChangesName && model.intent_category == Cura.MachineManager.activeIntentCategory
-                            }
-                            else
-                            {
-                                // For custom qualities, it only needs to match the name
-                                return model.name == Cura.MachineManager.activeQualityOrQualityChangesName
-                            }
-                        }
-                        color: parent.isCurrentItem ? palette.highlightedText : palette.text
-                    }
-
-                    MouseArea
-                    {
-                        anchors.fill: parent
-                        onClicked:
-                        {
-                            parent.ListView.view.currentIndex = model.index;
-                        }
-                    }
-                }
-            }
         }
 
-        // details panel on the right
+        Cura.ProfileOverview
-        Item
         {
-            id: detailsPanel
-
             anchors
             {
-                left: profileBackground.right
+                top: detailsPanelHeaderColumn.bottom
-                leftMargin: UM.Theme.getSize("default_margin").width
+                margins: UM.Theme.getSize("default_margin").height
-                top: parent.top
+                left: parent.left
-                bottom: parent.bottom
                 right: parent.right
+                bottom: parent.bottom
             }
 
-            Column
+            visible: detailsPanelHeaderColumn.visible
-            {
+            qualityItem: base.currentItem
-                id: detailsPanelHeaderColumn
+            extruderPosition: profileExtruderTabs.currentIndex - 1
-                anchors
-                {
-                    left: parent.left
-                    right: parent.right
-                    top: parent.top
-                }
-
-                spacing: UM.Theme.getSize("default_margin").height
-                visible: base.currentItem != null
-
-                Item    // Profile title Label
-                {
-                    id: profileName
-
-                    width: parent.width
-                    height: childrenRect.height
-
-                    Label
-                    {
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        text: base.currentItemDisplayName
-                        font: UM.Theme.getFont("large_bold")
-                        elide: Text.ElideRight
-                        renderType: Text.NativeRendering
-                    }
-                }
-
-                Flow
-                {
-                    id: currentSettingsActions
-                    width: parent.width
-
-                    visible: base.hasCurrentItem && base.currentItem.name == Cura.MachineManager.activeQualityOrQualityChangesName && base.currentItem.intent_category == Cura.MachineManager.activeIntentCategory
-
-                    Button
-                    {
-                        text: catalog.i18nc("@action:button", "Update profile with current settings/overrides")
-                        enabled: Cura.MachineManager.hasUserSettings && qualityListView.currentItem && !qualityListView.currentItem.is_read_only
-                        onClicked: Cura.ContainerManager.updateQualityChanges()
-                    }
-
-                    Button
-                    {
-                        text: catalog.i18nc("@action:button", "Discard current changes");
-                        enabled: Cura.MachineManager.hasUserSettings
-                        onClicked: Cura.ContainerManager.clearUserContainers();
-                    }
-                }
-
-                Label
-                {
-                    id: defaultsMessage
-                    visible: false
-                    text: catalog.i18nc("@action:label", "This profile uses the defaults specified by the printer, so it has no settings/overrides in the list below.")
-                    wrapMode: Text.WordWrap
-                    width: parent.width
-                }
-                Label
-                {
-                    id: noCurrentSettingsMessage
-                    visible: base.isCurrentItemActivated && !Cura.MachineManager.hasUserSettings
-                    text: catalog.i18nc("@action:label", "Your current settings match the selected profile.")
-                    wrapMode: Text.WordWrap
-                    width: parent.width
-                }
-
-                UM.TabRow
-                {
-                    id: profileExtruderTabs
-                    UM.TabRowButton //One extra tab for the global settings.
-                    {
-                        text: catalog.i18nc("@title:tab", "Global Settings")
-                    }
-
-                    Repeater
-                    {
-                        model: base.extrudersModel
-
-                        UM.TabRowButton
-                        {
-                            text: model.name
-                        }
-                    }
-                }
-            }
-
-            Cura.ProfileOverview
-            {
-                anchors
-                {
-                    top: detailsPanelHeaderColumn.bottom
-                    left: parent.left
-                    right: parent.right
-                    bottom: parent.bottom
-                }
-
-                visible: detailsPanelHeaderColumn.visible
-                qualityItem: base.currentItem
-                extruderPosition: profileExtruderTabs.currentIndex - 1
-            }
         }
     }
 }

resources/qml/Preferences/SettingVisibilityPage.qml

@@ -3,7 +3,6 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 2.15
-import QtQuick.Controls 1.1 as OldControls
 
 import UM 1.5 as UM
 
@@ -17,6 +16,14 @@ UM.PreferencesPage
 
     property int scrollToIndex: 0
 
+    buttons: [
+        Cura.SecondaryButton
+        {
+            text: catalog.i18nc("@action:button", "Defaults")
+            onClicked: reset()
+        }
+    ]
+
     signal scrollToSection( string key )
     onScrollToSection:
     {
@@ -34,7 +41,7 @@ UM.PreferencesPage
         id: base
         anchors.fill: parent
 
-        OldControls.CheckBox
+        UM.CheckBox
         {
             id: toggleVisibleSettings
             anchors
@@ -44,7 +51,7 @@ UM.PreferencesPage
                 leftMargin: UM.Theme.getSize("default_margin").width
             }
             text: catalog.i18nc("@label:textbox", "Check all")
-            checkedState:
+            checkState:
             {
                 if(definitionsModel.visibleCount == definitionsModel.categoryCount)
                 {
@@ -59,8 +66,7 @@ UM.PreferencesPage
                     return Qt.PartiallyChecked
                 }
             }
-            partiallyCheckedEnabled: true
+            tristate: true
-
             MouseArea
             {
                 anchors.fill: parent;

resources/qml/TableView.qml

@@ -39,22 +39,23 @@ Item
                 width: Math.max(1, Math.round(tableBase.width / headerRepeater.count))
                 height: UM.Theme.getSize("section").height
 
-                color: UM.Theme.getColor("secondary")
+                color: UM.Theme.getColor("main_background")
+                border.width: UM.Theme.getSize("default_lining").width
+                border.color: UM.Theme.getColor("thick_lining")
 
-                Label
+                UM.Label
                 {
                     id: contentText
                     anchors.left: parent.left
-                    anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+                    anchors.leftMargin: UM.Theme.getSize("default_margin").width
                     anchors.right: parent.right
                     anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
-
+                    wrapMode: Text.NoWrap
                     text: modelData
                     font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
                     elide: Text.ElideRight
                 }
-                Rectangle //Resize handle.
+                Item //Resize handle.
                 {
                     anchors
                     {
@@ -62,9 +63,7 @@ Item
                         top: parent.top
                         bottom: parent.bottom
                     }
-                    width: UM.Theme.getSize("thick_lining").width
+                    width: UM.Theme.getSize("default_lining").width
-
-                    color: UM.Theme.getColor("thick_lining")
 
                     MouseArea
                     {
@@ -97,13 +96,24 @@ Item
                     }
                 }
 
-                onWidthChanged:
+                onWidthChanged: tableView.forceLayout(); //Rescale table cells underneath as well.
-                {
-                    tableView.forceLayout(); //Rescale table cells underneath as well.
-                }
             }
         }
     }
+    Rectangle
+    {
+        color: UM.Theme.getColor("main_background")
+        anchors
+        {
+            top: headerBar.bottom
+            topMargin: -UM.Theme.getSize("default_lining").width
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("thick_lining")
+    }
 
     TableView
     {
@@ -114,6 +124,7 @@ Item
             left: parent.left
             right: parent.right
             bottom: parent.bottom
+            margins: UM.Theme.getSize("default_lining").width
         }
 
         flickableDirection: Flickable.AutoFlickIfNeeded
@@ -128,18 +139,21 @@ Item
         {
             implicitHeight: Math.max(1, cellContent.height)
 
-            color: UM.Theme.getColor((tableBase.currentRow == row) ? "primary" : ((row % 2 == 0) ? "main_background" : "viewport_background"))
+            color: UM.Theme.getColor((tableBase.currentRow == row) ? "text_selection" : "main_background")
 
-            Label
+            UM.Label
             {
                 id: cellContent
-                width: parent.width
+                anchors
-
+                {
+                    left: parent.left
+                    leftMargin: UM.Theme.getSize("default_margin").width
+                    right: parent.right
+                }
+                wrapMode: Text.NoWrap
                 text: display
                 verticalAlignment: Text.AlignVCenter
                 elide: Text.ElideRight
-                font: UM.Theme.getFont("default")
-                color: UM.Theme.getColor("text")
             }
             TextMetrics
             {

resources/qml/Widgets/ComboBox.qml

@@ -72,7 +72,7 @@ ComboBox
         anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: downArrow.left
-
+        wrapMode: Text.NoWrap
         text:
         {
             if (control.delegateModel.count == 0)
@@ -149,6 +149,7 @@ ComboBox
             textFormat: Text.PlainText
             color: UM.Theme.getColor("setting_control_text")
             elide: Text.ElideRight
+            wrapMode: Text.NoWrap
         }
 
         background: UM.TooltipArea