From 1a26573dbb77a62500c02e1232468fce0ef5feac Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Sun, 8 May 2022 22:10:26 +0200 Subject: [PATCH] Increase corner radius --- nymea-app/styles.qrc | 1 + nymea-app/styles/dark/Dialog.qml | 2 +- nymea-app/styles/light/Dialog.qml | 105 ++++++++++++++++++++++ nymea-app/ui/StyleBase.qml | 4 +- nymea-app/ui/components/NymeaComboBox.qml | 23 +++++ 5 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 nymea-app/styles/light/Dialog.qml create mode 100644 nymea-app/ui/components/NymeaComboBox.qml diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc index c61fc393..fa2a73c6 100644 --- a/nymea-app/styles.qrc +++ b/nymea-app/styles.qrc @@ -38,5 +38,6 @@ styles/noir/logo-wide.svg ui/Configuration.qml styles/dark/Dialog.qml + styles/light/Dialog.qml diff --git a/nymea-app/styles/dark/Dialog.qml b/nymea-app/styles/dark/Dialog.qml index 85ed9852..080f34b7 100644 --- a/nymea-app/styles/dark/Dialog.qml +++ b/nymea-app/styles/dark/Dialog.qml @@ -74,7 +74,7 @@ T.Dialog { } background: Rectangle { - radius: Style.smallCornerRadius + radius: Style.cornerRadius color: control.Material.dialogColor layer.enabled: control.Material.elevation > 0 diff --git a/nymea-app/styles/light/Dialog.qml b/nymea-app/styles/light/Dialog.qml new file mode 100644 index 00000000..080f34b7 --- /dev/null +++ b/nymea-app/styles/light/Dialog.qml @@ -0,0 +1,105 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Templates 2.2 as T +import QtQuick.Controls 2.2 +import QtQuick.Controls.Material 2.2 +import QtQuick.Controls.Material.impl 2.2 +import Nymea 1.0 + +T.Dialog { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + header && header.visible ? header.implicitWidth : 0, + footer && footer.visible ? footer.implicitWidth : 0, + contentWidth > 0 ? contentWidth + leftPadding + rightPadding : 0) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + (header && header.visible ? header.implicitHeight + spacing : 0) + + (footer && footer.visible ? footer.implicitHeight + spacing : 0) + + (contentHeight > 0 ? contentHeight + topPadding + bottomPadding : 0)) + + contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0) + contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0) + + padding: 24 + topPadding: 20 + + Material.elevation: 24 + + enter: Transition { + // grow_fade_in + NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 } + NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 } + } + + exit: Transition { + // shrink_fade_out + NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 } + NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 } + } + + background: Rectangle { + radius: Style.cornerRadius + color: control.Material.dialogColor + + layer.enabled: control.Material.elevation > 0 + layer.effect: ElevationEffect { + elevation: control.Material.elevation + } + } + + header: Label { + text: control.title + visible: control.title + elide: Label.ElideRight + padding: 24 + bottomPadding: 0 + // TODO: QPlatformTheme::TitleBarFont + font.bold: true + font.pixelSize: 16 + background: Rectangle { + radius: 2 + color: control.Material.dialogColor + clip: true + } + } + + footer: DialogButtonBox { + visible: count > 0 + } +} diff --git a/nymea-app/ui/StyleBase.qml b/nymea-app/ui/StyleBase.qml index a425bffa..f145ffdd 100644 --- a/nymea-app/ui/StyleBase.qml +++ b/nymea-app/ui/StyleBase.qml @@ -17,8 +17,8 @@ Item { property color tooltipBackgroundColor: tileOverlayColor - property int cornerRadius: 6 - property int smallCornerRadius: 4 + property int cornerRadius: 10 + property int smallCornerRadius: 6 readonly property int smallMargins: 8 readonly property int margins: 16 diff --git a/nymea-app/ui/components/NymeaComboBox.qml b/nymea-app/ui/components/NymeaComboBox.qml new file mode 100644 index 00000000..5d3bb7b0 --- /dev/null +++ b/nymea-app/ui/components/NymeaComboBox.qml @@ -0,0 +1,23 @@ +import QtQuick 2.0 +import QtQuick.Controls 2.2 +import QtQuick.Controls.Material 2.2 + +ComboBox { + id: control + background: Item { + implicitWidth: 120 + implicitHeight: control.Material.buttonHeight + + Ripple { + clip: control.flat + clipRadius: control.flat ? 0 : 2 + x: control.editable && control.indicator ? control.indicator.x : 0 + width: control.editable && control.indicator ? control.indicator.width : parent.width + height: parent.height + pressed: control.pressed + anchor: control.editable && control.indicator ? control.indicator : control + active: control.pressed || control.visualFocus || control.hovered + color: control.Material.rippleColor + } + } +}