From aa32c1f1af21d003b263a079507202fffc7ab105 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 23 Feb 2016 17:54:02 +1300 Subject: [PATCH] Restyle modal message dialog content --- .../resources/qml/controls-uit/TextEdit.qml | 19 ++++++--- .../resources/qml/dialogs/MessageDialog.qml | 40 ++++++++++++++----- .../messageDialog/MessageDialogButton.qml | 13 ++++++ .../qml/styles-uit/HifiConstants.qml | 1 + .../resources/qml/windows-uit/ModalFrame.qml | 2 +- 5 files changed, 57 insertions(+), 18 deletions(-) diff --git a/interface/resources/qml/controls-uit/TextEdit.qml b/interface/resources/qml/controls-uit/TextEdit.qml index d6d0c60af3..5edc65a6e5 100644 --- a/interface/resources/qml/controls-uit/TextEdit.qml +++ b/interface/resources/qml/controls-uit/TextEdit.qml @@ -8,11 +8,18 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -import QtQuick 2.3 as Original -import "../styles" +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import QtQuick.Controls.Styles 1.4 +import "../styles-uit" -Original.TextEdit { - HifiConstants { id: hifi } - font.family: hifi.fonts.fontFamily - font.pixelSize: hifi.fonts.pixelSize +TextEdit { + + property real size: 32 + + FontLoader { id: ralewaySemibold; source: "../../fonts/Raleway-Semibold.ttf"; } + font.family: ralewaySemibold.name + font.pointSize: size + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignLeft } diff --git a/interface/resources/qml/dialogs/MessageDialog.qml b/interface/resources/qml/dialogs/MessageDialog.qml index 8524b5ce75..bac13c5403 100644 --- a/interface/resources/qml/dialogs/MessageDialog.qml +++ b/interface/resources/qml/dialogs/MessageDialog.qml @@ -18,7 +18,6 @@ import "../windows-uit" import "messageDialog" -// FIXME respect default button functionality ModalWindow { id: root HifiConstants { id: hifi } @@ -85,12 +84,15 @@ ModalWindow { readonly property real outerSpacing: hifi.dimensions.contentSpacing.y readonly property int minWidth: 480 readonly property int maxWdith: 1280 - readonly property int minHeight: 160 + readonly property int minHeight: 120 readonly property int maxHeight: 720 function resize() { var targetWidth = mainTextContainer.width - var targetHeight = mainTextContainer.implicitHeight + informativeTextContainer.implicitHeight + d.spacing * 8 + buttons.height + details.height + var targetHeight = mainTextContainer.height + 4 * hifi.dimensions.contentSpacing.y + + (informativeTextContainer.text != "" ? informativeTextContainer.contentHeight + hifi.dimensions.contentSpacing.y : 0) + + buttons.height + + (content.state === "expanded" ? details.implicitHeight + hifi.dimensions.contentSpacing.y : 0) root.width = (targetWidth < d.minWidth) ? d.minWidth : ((targetWidth > d.maxWdith) ? d.maxWidth : targetWidth) root.height = (targetHeight < d.minHeight) ? d.minHeight: ((targetHeight > d.maxHeight) ? d.maxHeight : targetHeight) } @@ -103,8 +105,8 @@ ModalWindow { size: hifi.fontSizes.menuItem color: hifi.colors.baseGrayHighlight anchors { - left: parent.left; top: parent.top; + left: parent.left; margins: 0 topMargin: hifi.dimensions.contentSpacing.y } @@ -112,12 +114,19 @@ ModalWindow { lineHeightMode: Text.ProportionalHeight } - Text { + RalewaySemibold { id: informativeTextContainer onHeightChanged: d.resize(); onWidthChanged: d.resize(); wrapMode: Text.WordWrap - font.pointSize: 11 - anchors { top: mainTextContainer.bottom; right: parent.right; left: parent.left; margins: d.spacing * 2 } + size: hifi.fontSizes.menuItem + color: hifi.colors.baseGrayHighlight + anchors { + top: mainTextContainer.bottom; + left: parent.left; + right: parent.right; + margins: 0 + topMargin: text != "" ? hifi.dimensions.contentSpacing.y : 0 + } } Flow { @@ -147,8 +156,8 @@ ModalWindow { Button { id: moreButton text: qsTr("Show Details...") - onClicked: { content.state = (content.state === "" ? "expanded" : "") - } + width: 160 + onClicked: { content.state = (content.state === "" ? "expanded" : "") } visible: detailedText && detailedText.length > 0 } MessageDialogButton { dialog: root; text: qsTr("Help"); button: OriginalDialogs.StandardButton.Help; } @@ -157,10 +166,16 @@ ModalWindow { Item { id: details width: parent.width - implicitHeight: detailedText.implicitHeight + root.spacing + implicitHeight: detailedText.implicitHeight height: 0 clip: true - anchors { bottom: parent.bottom; left: parent.left; right: parent.right; margins: d.spacing * 2 } + anchors { + top: buttons.bottom + left: parent.left; + right: parent.right; + margins: 0 + topMargin: hifi.dimensions.contentSpacing.y + } Flickable { id: flickable contentHeight: detailedText.height @@ -169,10 +184,13 @@ ModalWindow { anchors.bottomMargin: root.outerSpacing TextEdit { id: detailedText + size: hifi.fontSizes.menuItem + color: hifi.colors.baseGrayHighlight width: details.width wrapMode: Text.WordWrap readOnly: true selectByMouse: true + anchors.margins: 0 } } } diff --git a/interface/resources/qml/dialogs/messageDialog/MessageDialogButton.qml b/interface/resources/qml/dialogs/messageDialog/MessageDialogButton.qml index 2bcb3d1f29..b7ff9354eb 100644 --- a/interface/resources/qml/dialogs/messageDialog/MessageDialogButton.qml +++ b/interface/resources/qml/dialogs/messageDialog/MessageDialogButton.qml @@ -1,11 +1,24 @@ +// +// MessageDialogButton.qml +// +// Created by Bradley Austin Davis on 29 Jan 2016 +// Copyright 2015 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.2 import QtQuick.Dialogs 1.2 +import "../../controls-uit" + Button { property var dialog; property int button: StandardButton.NoButton; + color: dialog.defaultButton === button ? hifi.buttons.blue : hifi.buttons.white focus: dialog.defaultButton === button onClicked: dialog.click(button) visible: dialog.buttons & button diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index b18a4498bf..466feb88d5 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/interface/resources/qml/styles-uit/HifiConstants.qml @@ -42,6 +42,7 @@ Item { readonly property color baseGrayShadow60: "#99252525" readonly property color baseGrayHighlight40: "#66575757" readonly property color baseGrayHighlight15: "#26575757" + readonly property color lightGrayText80: "#ccafafaf" readonly property color faintGray50: "#80e3e3e3" // Other colors diff --git a/interface/resources/qml/windows-uit/ModalFrame.qml b/interface/resources/qml/windows-uit/ModalFrame.qml index 7cf3af86ec..b76996a873 100644 --- a/interface/resources/qml/windows-uit/ModalFrame.qml +++ b/interface/resources/qml/windows-uit/ModalFrame.qml @@ -50,7 +50,7 @@ Frame { size: 30 color: hifi.colors.lightGrayText visible: text != "" - y: -hifi.dimensions.modalDialogTitleHeight + y: -hifi.dimensions.modalDialogTitleHeight - 3 anchors.left: parent.left } RalewayRegular {