Rework tiles
This commit is contained in:
Michael Zanetti
parent
6a912a9995
commit
5b5e85c7ad
@ -124,6 +124,13 @@ int main(int argc, char *argv[])
|
||||
|
||||
QQmlApplicationEngine *engine = new QQmlApplicationEngine();
|
||||
|
||||
StyleController styleController;
|
||||
|
||||
QQmlFileSelector *styleSelector = new QQmlFileSelector(engine);
|
||||
styleSelector->setExtraSelectors({styleController.currentStyle()});
|
||||
|
||||
engine->rootContext()->setContextProperty("styleController", &styleController);
|
||||
|
||||
qmlRegisterSingletonType<PlatformHelper>("Nymea", 1, 0, "PlatformHelper", platformHelperProvider);
|
||||
qmlRegisterSingletonType<NfcHelper>("Nymea", 1, 0, "NfcHelper", NfcHelper::nfcHelperProvider);
|
||||
qmlRegisterType<NfcThingActionWriter>("Nymea", 1, 0, "NfcThingActionWriter");
|
||||
@ -141,9 +148,6 @@ int main(int argc, char *argv[])
|
||||
engine->rootContext()->setContextProperty("qtBuildVersion", QT_VERSION_STR);
|
||||
engine->rootContext()->setContextProperty("qtVersion", qVersion());
|
||||
|
||||
StyleController styleController;
|
||||
engine->rootContext()->setContextProperty("styleController", &styleController);
|
||||
|
||||
engine->rootContext()->setContextProperty("kioskMode", parser.isSet(kioskOption));
|
||||
engine->rootContext()->setContextProperty("autoConnectHost", parser.value(connectOption));
|
||||
|
||||
|
||||
@ -33,6 +33,7 @@ import QtQuick.Controls 2.2
|
||||
import QtQuick.Controls.Material 2.2
|
||||
import QtQuick.Layouts 1.3
|
||||
import Nymea 1.0
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
id: root
|
||||
@ -40,7 +41,7 @@ Item {
|
||||
property alias iconName: colorIcon.name
|
||||
property alias fallbackIconName: fallbackIcon.name
|
||||
property alias iconColor: colorIcon.color
|
||||
property alias backgroundImage: background.source
|
||||
property alias backgroundImage: backgroundImg.source
|
||||
property string text
|
||||
property bool disconnected: false
|
||||
property bool isWireless: false
|
||||
@ -53,97 +54,123 @@ Item {
|
||||
signal clicked();
|
||||
signal pressAndHold();
|
||||
|
||||
Pane {
|
||||
Rectangle {
|
||||
id: background
|
||||
anchors.fill: parent
|
||||
anchors.margins: app.margins / 2
|
||||
Material.elevation: 1
|
||||
padding: 0
|
||||
|
||||
Image {
|
||||
id: background
|
||||
anchors.fill: parent
|
||||
anchors.margins: 1
|
||||
z: -1
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
// horizontalAlignment: Image.AlignTop
|
||||
// opacity: .5
|
||||
// Rectangle {
|
||||
// anchors.fill: parent
|
||||
// color: Material.background
|
||||
// opacity: .5
|
||||
// }
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 1 - innerContent.height / background.height
|
||||
color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .1))
|
||||
}
|
||||
GradientStop {
|
||||
position: 1 - innerContent.height / background.height
|
||||
color: Qt.tint(app.backgroundColor, Qt.rgba(app.foregroundColor.r, app.foregroundColor.g, app.foregroundColor.b, .05))
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: ItemDelegate {
|
||||
padding: 0; topPadding: 0; bottomPadding: 0
|
||||
onClicked: root.clicked()
|
||||
onPressAndHold: root.pressAndHold()
|
||||
radius: 6
|
||||
}
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
spacing: 0
|
||||
ColumnLayout {
|
||||
Layout.fillHeight: true
|
||||
Layout.margins: app.margins
|
||||
Item {
|
||||
visible: background.status !== Image.Ready
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Image {
|
||||
id: backgroundImg
|
||||
anchors.fill: parent
|
||||
anchors.margins: app.margins / 2
|
||||
visible: false
|
||||
z: -1
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
}
|
||||
|
||||
ColorIcon {
|
||||
id: colorIcon
|
||||
anchors.centerIn: parent
|
||||
height: app.hugeIconSize //* 1.5
|
||||
width: height
|
||||
ColorIcon {
|
||||
id: fallbackIcon
|
||||
anchors.fill: parent
|
||||
color: root.iconColor
|
||||
visible: parent.status === Image.Error
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
id: backgroundImgClipper
|
||||
radius: background.radius
|
||||
anchors.fill: parent
|
||||
visible: false
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 1 - innerContent.height / background.height
|
||||
color: "transparent"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1 - innerContent.height / background.height
|
||||
color: "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
visible: background.status !== Image.Ready
|
||||
OpacityMask {
|
||||
anchors.fill: parent
|
||||
anchors.margins: app.margins / 2
|
||||
source: backgroundImg
|
||||
maskSource: backgroundImgClipper
|
||||
// visible: root.backgroundImage.length > 0
|
||||
}
|
||||
|
||||
Label {
|
||||
id: label
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
text: root.text.toUpperCase()
|
||||
font.pixelSize: app.smallFont
|
||||
font.letterSpacing: 1
|
||||
wrapMode: Text.WordWrap
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
maximumLineCount: 2
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
ItemDelegate {
|
||||
anchors {
|
||||
top: parent.top; left: parent.left; right: parent.right; bottom: innerContent.top
|
||||
topMargin: app.margins / 2; leftMargin: app.margins / 2; rightMargin: app.margins / 2
|
||||
}
|
||||
padding: 0; topPadding: 0; bottomPadding: 0
|
||||
onClicked: root.clicked()
|
||||
onPressAndHold: root.pressAndHold()
|
||||
|
||||
}
|
||||
MouseArea {
|
||||
id: innerContent
|
||||
contentItem: ColumnLayout {
|
||||
spacing: 0
|
||||
ColumnLayout {
|
||||
Layout.fillHeight: true
|
||||
Layout.margins: app.margins
|
||||
Item {
|
||||
visible: backgroundImg.status !== Image.Ready
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: app.iconSize + app.margins * 2
|
||||
visible: root.contentItem.length > 1
|
||||
Layout.fillHeight: true
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Material.background
|
||||
ColorIcon {
|
||||
id: colorIcon
|
||||
anchors.centerIn: parent
|
||||
height: app.hugeIconSize
|
||||
width: height
|
||||
ColorIcon {
|
||||
id: fallbackIcon
|
||||
anchors.fill: parent
|
||||
color: root.iconColor
|
||||
visible: parent.status === Image.Error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Material.foreground
|
||||
opacity: 0.05
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
visible: backgroundImg.status !== Image.Ready
|
||||
|
||||
Label {
|
||||
id: label
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
text: root.text.toUpperCase()
|
||||
font.pixelSize: app.smallFont
|
||||
font.letterSpacing: 1
|
||||
wrapMode: Text.WordWrap
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
maximumLineCount: 2
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: innerContent
|
||||
anchors { left: parent.left; bottom: parent.bottom; right: parent.right; margins: app.margins / 2 }
|
||||
height: app.iconSize + app.margins * 2
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: quickAlertPane
|
||||
anchors { top: parent.top; right: parent.right; margins: app.margins }
|
||||
|
||||
@ -64,4 +64,7 @@ Item {
|
||||
return page;
|
||||
}
|
||||
|
||||
function isDark(color) {
|
||||
return ((color.r() * 299 + color.g() * 587 + color.b() * 114) / 1000) > 123
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user