qtdoc/examples/demos/coffee/Colors.qml

134 lines
3.6 KiB
QML
Raw Normal View History

// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma Singleton
import QtQuick
Item {
QtObject {
id: light
readonly property color background: "#ffffff"
readonly property color textColor: "#121111"
readonly property color borderColor: "#D8D8D8"
readonly property color cardColor: "#FFFFFF"
readonly property color caption: "#898989"
}
QtObject {
id: dark
readonly property color background: "#121212"
readonly property color textColor: "#FEFEFE"
readonly property color borderColor: "#3E3E3E"
readonly property color cardColor: "#212121"
readonly property color caption: "#898989"
}
Gradient {
id: invertedGreyBorder
GradientStop { position: 0.0; color: currentTheme.cardColor }
GradientStop { position: 1.0; color: currentTheme.borderColor }
}
Gradient {
id: greyBorder
GradientStop { position: 0.0; color: currentTheme.borderColor }
GradientStop { position: 1.0; color: currentTheme.cardColor }
}
Gradient {
id: invertedGreenBorder
// GradientStop positions are arbitrary
GradientStop {
position: 1.0
color: "#18B969"
}
GradientStop {
position: 0.66
color: "#c718b969"
}
GradientStop {
position: 0.33
color: "#ab18b969"
}
GradientStop {
position: 0.0
color: currentTheme.cardColor
}
}
Gradient {
id: greenBorder
GradientStop {
position: 1.0
color: currentTheme.cardColor
}
GradientStop {
position: 0.66
color: "#ab18b969"
}
GradientStop {
position: 0.33
color: "#c718b969"
}
GradientStop {
position: 0.0
color: "#18B969"
}
}
Gradient {
id: greenButtonGradient
GradientStop {
position: 0.3
color: "#2CDE85"
}
GradientStop {
position: 0.5
color: "#24b46d"
}
GradientStop {
position: 0.9
color: "#9c219d60"
}
}
Gradient {
id: darkButtonGradient
GradientStop {
position: 0.2
color: Colors.currentTheme.background
}
GradientStop {
position: 0.5
color: "#2a2a2a"
}
GradientStop {
position: 0.9
color: "#f72a2a2a"
}
}
Gradient {
id: lightButtonGradient
GradientStop {
position: 0.2
color: Colors.currentTheme.background
}
GradientStop {
position: 0.5
color: "#eeeeee"
}
GradientStop {
position: 0.9
color: "#e6e6e6"
}
}
Fix Coffee Machine clipping UI elements on lower resolution displays Reason for these changes is that it was discovered that some of the UI elements of the re-designed Coffee Machine example did overflow the target device display with lower than ~1080x1920 display resolution. Added states to coffee cards that will scale the cards and their content down if target device screen resolution is lower than set limit. Added state to home component where text components will be scaled down in target device screen resolution is lower than set limit. Added some colors to Colors.qml to remove hardcoded color values. Added states to sliders in Settings.qml and in CustomSlider.qml that will scale them down if target device screen resolution is lower than set limit. Scaled the custom buttons heights down a bit throughout the app to make them fit on screen. Added state to progress page that will scale the caption text down if target device screen resotion is lower than set limit and set minimum width and height to dialog component so that the text will not overflow its container. Added states to ready page that will reduce the row spacing of the grid component and scale the caption font size down if target device screen resolution is lower than the set limit. Tested successfully with Android emulators with screen resolution ranging from 320x480 to 1440x3120. Removed multiple property changes regarding text sizes in Settings.qml and replaced them by binding the text objects font size to a new property int that will be modified through state. Added the missing when condition in state change to change the font size in Setting.qml. Renamed ambiguous id's * Removed unused property aliases * Re-applied missing qdoc snippet tags to Settings.qml which were removed by mistake. This should fix one of the qdoc warnings in CI. Fixes: QTBUG-116402 Pick-to: 6.7 6.6 Change-Id: I2524be43f943494f5ab7b2689b222a977996dac6 Reviewed-by: Nicholas Bennett <nicholas.bennett@qt.io>
2023-12-11 07:05:43 +00:00
property color green: "#1FC974"
property color shadow: "white"
property color border: "#898989"
property color grey: "#585858"
property var currentTheme: dark
property alias dark: dark
property alias light: light
property alias invertedGreenBorder: invertedGreenBorder
property alias invertedGreyBorder: invertedGreyBorder
property alias greyBorder: greyBorder
property alias greenBorder: greenBorder
property alias darkButtonGradient: darkButtonGradient
property alias lightButtonGradient: lightButtonGradient
property alias greenButtonGradient: greenButtonGradient
}