ETM-Schurig/powersync-app
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better styling

Browse Source
This commit is contained in:
Michael Zanetti 2018-08-03 21:14:50 +02:00
parent 04b5e1931b
commit 5f9fb02e32
28 changed files with 123 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
nymea-app/styles/dark/ApplicationWindow.qml
View File

@ -3,16 +3,33 @@ import QtQuick.Templates 2.2
import QtQuick.Controls.Material 2.2
ApplicationWindow {
property color guhAccent: "#ff57baae"
Material.theme: Material.Dark
// The system (box) name.
property string systemName: "nymea"
// The app name
property string appName: "nymea:app"
Material.theme: Material.Dark
Material.accent: guhAccent
Material.primary: Material.background
// The header background color
property color primaryColor: Material.background
function interfaceToColor(name) {
return "khaki"
// Header font color
property color headerForegroundColor: Material.foreground
// The font color
property color foregroundColor: Material.foreground
// The color of selected/highlighted things
property color accentColor: "#ff57baae"
// colors for interfaces, e.g. icons
property var interfaceColors: {
"temperaturesensor": "red",
"humiditysensor": "deepskyblue",
"moisturesensor":"blue",
"lightsensor": "orange",
"conductivitysensor": "green",
"pressuresensor": "grey"
}
}

27
nymea-app/styles/light/ApplicationWindow.qml
View File

@ -3,12 +3,31 @@ import QtQuick.Templates 2.2
import QtQuick.Controls.Material 2.2
ApplicationWindow {
property color guhAccent: "#ff57baae"
// The system (box) name.
property string systemName: "nymea"
// The app name
property string appName: "nymea:app"
Material.theme: Material.Light
Material.accent: guhAccent
Material.primary: "white"
// The header background color
property color primaryColor: "white"
// Header font color
property color headerForegroundColor: Material.foreground
// The font color
property color foregroundColor: Material.foreground
// The color of selected/highlighted things
property color accentColor: "#ff57baae"
// colors for interfaces, e.g. icons
property var interfaceColors: {
"temperaturesensor": "red",
"humiditysensor": "deepskyblue",
"moisturesensor":"blue",
"lightsensor": "orange",
"conductivitysensor": "green",
"pressuresensor": "grey"
}
}

12
nymea-app/ui/ConnectPage.qml
View File

@ -196,7 +196,7 @@ Page {
}
progressive: true
secondaryIconName: "../images/network-secure.svg"
secondaryIconColor: isTrusted ? app.guhAccent : Material.foreground
secondaryIconColor: isTrusted ? app.accentColor : Material.foreground
swipe.enabled: discoveryDeviceDelegate.discoveryDevice.deviceType === DiscoveryDevice.DeviceTypeNetwork
onClicked: {
@ -361,7 +361,7 @@ Page {
Layout.preferredHeight: app.iconSize * 2
Layout.preferredWidth: height
name: certDialog.hasOldFingerprint ? "../images/lock-broken.svg" : "../images/info.svg"
color: certDialog.hasOldFingerprint ? "red" : app.guhAccent
color: certDialog.hasOldFingerprint ? "red" : app.accentColor
}
Label {
@ -369,7 +369,7 @@ Page {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: certDialog.hasOldFingerprint ? qsTr("Warning") : qsTr("Hi there!")
color: certDialog.hasOldFingerprint ? "red" : app.guhAccent
color: certDialog.hasOldFingerprint ? "red" : app.accentColor
font.pixelSize: app.largeFont
}
}
@ -468,7 +468,7 @@ Page {
Layout.preferredHeight: app.iconSize * 2
Layout.preferredWidth: height
name: "../images/info.svg"
color: app.guhAccent
color: app.accentColor
}
Label {
@ -476,7 +476,7 @@ Page {
Layout.fillWidth: true
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
text: dialog.title
color: app.guhAccent
color: app.accentColor
font.pixelSize: app.largeFont
}
}
@ -557,7 +557,7 @@ Page {
visible: model.sslEnabled
name: "../images/network-secure.svg"
property bool isTrusted: Engine.connection.isTrusted(dialog.discoveryDevice.toUrl(index))
color: isTrusted ? app.guhAccent : keyColor
color: isTrusted ? app.accentColor : keyColor
}
}
onClicked: {

2
nymea-app/ui/LoginPage.qml
View File

@ -108,7 +108,7 @@ Page {
: qsTr("The passwords don't match.")
wrapMode: Text.WordWrap
Layout.preferredHeight: confirmPasswordTextField.height * 2
color: app.guhAccent
color: app.accentColor
}
Button {

2
nymea-app/ui/MagicPage.qml
View File

@ -78,7 +78,7 @@ Page {
id: ruleDelegate
width: parent.width
iconName: "../images/" + (model.executable ? (iconTag ? iconTag.value : "slideshow") : "magic") + ".svg"
iconColor: model.executable ? (colorTag ? colorTag.value : app.guhAccent) : !model.enabled ? "red" : (model.active ? app.guhAccent : "grey")
iconColor: model.executable ? (colorTag ? colorTag.value : app.accentColor) : !model.enabled ? "red" : (model.active ? app.accentColor : "grey")
text: model.name
canDelete: true

41
nymea-app/ui/Nymea.qml
View File

@ -1,5 +1,5 @@
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.2
import Qt.labs.settings 1.0
@ -13,7 +13,12 @@ ApplicationWindow {
height: 580
visibility: ApplicationWindow.AutomaticVisibility
font: Qt.application.font
// Those variables must be present in the Style
title: appName
Material.primary: primaryColor
Material.accent: accentColor
Material.foreground: foregroundColor
property int margins: 14
property int bigMargins: 20
@ -24,9 +29,9 @@ ApplicationWindow {
property int iconSize: 30
property int delegateHeight: 60
property bool landscape: app.width > app.height
readonly property bool landscape: app.width > app.height
property var settings: Settings {
readonly property var settings: Settings {
property string lastConnectedHost: ""
property alias viewMode: app.visibility
property bool returnToHome: false
@ -258,21 +263,25 @@ ApplicationWindow {
return "";
}
property var fallbackColors: {
"temperaturesensor": "red",
"humiditysensor": "deepskyblue",
"moisturesensor":"blue",
"lightsensor": "orange",
"conductivitysensor": "green",
"pressuresensor": "grey"
}
function interfaceToColor(name) {
switch (name) {
case "temperaturesensor":
return "red";
case "humiditysensor":
return "deepskyblue";
case "moisturesensor":
return "blue";
case "lightsensor":
return "orange";
case "conductivitysensor":
return "green";
case "pressuresensor":
return "grey";
// Try to load color map from style
if (interfaceColors[name]) {
return interfaceColors[name];
}
if (fallbackColors[name]) {
return fallbackColors[name];
}
return "grey";
}

4
nymea-app/ui/PushButtonAuthPage.qml
View File

@ -42,12 +42,12 @@ Page {
ColorIcon {
height: app.iconSize * 2
width: height
color: app.guhAccent
color: app.accentColor
name: "../images/info.svg"
}
Label {
color: app.guhAccent
color: app.accentColor
text: qsTr("Authentication required")
wrapMode: Text.WordWrap
Layout.fillWidth: true

4
nymea-app/ui/WirelessControlerPage.qml
View File

@ -149,7 +149,7 @@ Page {
return getWirelessStatusString()
}
iconColor: model.selectedNetwork ? app.guhAccent : "#808080"
iconColor: model.selectedNetwork ? app.accentColor : "#808080"
iconName: {
if (model.protected) {
if (model.signalStrength <= 25)
@ -316,7 +316,7 @@ Page {
Layout.preferredHeight: app.iconSize
Layout.preferredWidth: app.iconSize
name: "../images/eye.svg"
color: passwordTextField.echoMode === TextInput.Normal ? app.guhAccent : keyColor
color: passwordTextField.echoMode === TextInput.Normal ? app.accentColor : keyColor
MouseArea {
anchors.fill: parent
anchors.margins: -app.margins / 2

2
nymea-app/ui/components/EmptyViewPlaceholder.qml
View File

@ -21,7 +21,7 @@ ColumnLayout {
Layout.fillWidth: true
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
color: app.guhAccent
color: app.accentColor
}
Label {
id: textLabel

6
nymea-app/ui/components/FancyHeader.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.1
ToolBar {
id: root
@ -33,6 +34,7 @@ ToolBar {
font.pixelSize: app.mediumFont
elide: Text.ElideRight
text: root.title
color: app.headerForegroundColor
}
HeaderButton {
@ -58,6 +60,7 @@ ToolBar {
font.pixelSize: app.mediumFont
elide: Text.ElideRight
text: qsTr("menu")
color: app.headerForegroundColor
}
HeaderButton {
@ -96,7 +99,7 @@ ToolBar {
anchors.fill: parent
anchors.margins: app.margins / 2
border.width: 1
border.color: app.guhAccent
border.color: app.accentColor
color: "transparent"
ColumnLayout {
anchors.fill: parent
@ -116,6 +119,7 @@ ToolBar {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: app.extraSmallFont
color: app.headerForegroundColor
}
}
}

1
nymea-app/ui/components/GuhHeader.qml
View File

@ -41,6 +41,7 @@ ToolBar {
font.pixelSize: app.mediumFont
elide: Text.ElideRight
text: root.text
color: app.headerForegroundColor
}
}
}

4
nymea-app/ui/components/MainPageTabButton.qml
View File

@ -21,14 +21,14 @@ TabButton {
Layout.preferredHeight: app.iconSize
Layout.alignment: Qt.AlignHCenter
name: root.iconSource
color: root.checked ? app.guhAccent : keyColor
color: root.checked ? app.accentColor : keyColor
}
Label {
Layout.fillWidth: root.alignment === Qt.Vertical
text: root.text
horizontalAlignment: Text.AlignHCenter
font.pixelSize: app.smallFont
color: root.checked ? app.guhAccent : Material.foreground
color: root.checked ? app.accentColor : Material.foreground
}
}
}

4
nymea-app/ui/components/MeaDialog.qml
View File

@ -25,7 +25,7 @@ Dialog {
id: headerColorIcon
Layout.preferredHeight: app.iconSize * 2
Layout.preferredWidth: height
color: app.guhAccent
color: app.accentColor
visible: name.length > 0
}
@ -35,7 +35,7 @@ Dialog {
Layout.margins: app.margins
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
text: root.title
color: app.guhAccent
color: app.accentColor
font.pixelSize: app.largeFont
}
}

2
nymea-app/ui/components/MeaListItemDelegate.qml
View File

@ -11,7 +11,7 @@ SwipeDelegate {
property string iconName
property int iconSize: app.iconSize
property color iconColor: app.guhAccent
property color iconColor: app.accentColor
property alias secondaryIconName: secondaryIcon.name
property alias secondaryIconColor: secondaryIcon.color
property alias tertiaryIconName: tertiaryIcon.name

2
nymea-app/ui/components/ThinDivider.qml
View File

@ -4,5 +4,5 @@ import QtQuick.Layouts 1.2
Rectangle {
height: 1
Layout.fillWidth: true
color: app.guhAccent
color: app.accentColor
}

2
nymea-app/ui/customviews/ExtendedVolumeController.qml
View File

@ -22,7 +22,7 @@ CustomViewBase {
ColorIcon {
anchors.fill: parent
name: "../images/audio-speakers-muted-symbolic.svg"
color: parent.isMuted ? app.guhAccent : keyColor
color: parent.isMuted ? app.accentColor : keyColor
}
onClicked: {

4
nymea-app/ui/customviews/GenericTypeLogView.qml
View File

@ -50,7 +50,7 @@ Item {
Layout.preferredHeight: app.iconSize
Layout.preferredWidth: height
name: "../images/event.svg"
color: app.guhAccent
color: app.accentColor
}
ColumnLayout {
@ -80,7 +80,7 @@ Item {
// for (var k = 0; k < eventDescriptor.paramDescriptors.count; k++) {
// var paramDescriptor = eventDescriptor.paramDescriptors.get(k);
// if (paramDescriptor.value === model.value) {
// return app.guhAccent;
// return app.accentColor;
// }
// }
// }

4
nymea-app/ui/devicepages/ColorLightDevicePage.qml
View File

@ -29,7 +29,7 @@ DevicePageBase {
ColorIcon {
anchors.fill: parent
name: "../images/light-off.svg"
color: powerRow.powerState.value === true ? keyColor : app.guhAccent
color: powerRow.powerState.value === true ? keyColor : app.accentColor
}
onClicked: {
var actionType = root.deviceClass.actionTypes.findByName("power");
@ -63,7 +63,7 @@ DevicePageBase {
ColorIcon {
anchors.fill: parent
name: "../images/light-on.svg"
color: powerRow.powerState.value === true ? app.guhAccent : keyColor
color: powerRow.powerState.value === true ? app.accentColor : keyColor
}
onClicked: {
var actionType = root.deviceClass.actionTypes.findByName("power");

2
nymea-app/ui/devicepages/ConfigureThingPage.qml
View File

@ -69,7 +69,7 @@ Page {
Layout.rightMargin: app.margins
Layout.topMargin: app.margins
text: qsTr("Thing parameters").toUpperCase()
color: app.guhAccent
color: app.accentColor
}
Repeater {

2
nymea-app/ui/devicepages/GarageGateDevicePage.qml
View File

@ -66,7 +66,7 @@ DevicePageBase {
name: arrows.up ? "../images/up.svg" : "../images/down.svg"
width: parent.width
height: width
color: app.guhAccent
color: app.accentColor
}
}
}

2
nymea-app/ui/devicepages/StateLogPage.qml
View File

@ -137,7 +137,7 @@ Page {
Layout.fillWidth: true
Layout.fillHeight: true
mode: settings.graphStyle
color: app.guhAccent
color: app.accentColor
Timer {
id: updateTimer

4
nymea-app/ui/magic/DeviceRulesPage.qml
View File

@ -99,7 +99,7 @@ Page {
delegate: MeaListItemDelegate {
width: parent.width
iconName: "../images/magic.svg"
iconColor: !model.enabled ? "red" : (model.active ? app.guhAccent : "grey")
iconColor: !model.enabled ? "red" : (model.active ? app.accentColor : "grey")
text: model.name
canDelete: true
@ -137,7 +137,7 @@ Page {
horizontalAlignment: Text.AlignHCenter
text: qsTr("There's no magic involving %1.").arg(root.device.name)
font.pixelSize: app.largeFont
color: app.guhAccent
color: app.accentColor
}
Label {
width: parent.width

4
nymea-app/ui/magic/EditRulePage.qml
View File

@ -317,7 +317,7 @@ Page {
width: height
color: "transparent"
border.width: 2
border.color: modelData === root.ruleColor ? app.guhAccent : "transparent"
border.color: modelData === root.ruleColor ? app.accentColor : "transparent"
anchors.centerIn: parent
}
@ -347,7 +347,7 @@ Page {
width: height
color: "transparent"
border.width: 2
border.color: modelData === root.ruleIcon ? app.guhAccent : "transparent"
border.color: modelData === root.ruleIcon ? app.accentColor : "transparent"
anchors.centerIn: parent
}

4
nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml
View File

@ -34,7 +34,7 @@ SwipeDelegate {
Layout.preferredHeight: childEvaluatorsRepeater.count > 0 ? app.iconSize * .6 : app.iconSize
Layout.preferredWidth: height
name: root.stateEvaluator.stateDescriptor.interfaceName.length === 0 ? "../images/state.svg" : "../images/state-interface.svg"
color: app.guhAccent
color: app.accentColor
}
Label {
@ -97,7 +97,7 @@ SwipeDelegate {
Layout.preferredHeight: app.iconSize * .6
Layout.preferredWidth: height
name: childEvaluatorDelegate.stateDescriptor.interfaceName.length === 0 ? "../images/state.svg" : "../images/state-interface.svg"
color: app.guhAccent
color: app.accentColor
}
Label {
font.pixelSize: app.smallFont

6
nymea-app/ui/mainviews/DevicesPageDelegate.qml
View File

@ -9,7 +9,7 @@ MainPageTile {
id: root
text: interfaceToString(model.name).toUpperCase()
iconName: interfaceToIcon(model.name)
iconColor: app.guhAccent
iconColor: app.accentColor
disconnected: devicesSubProxyConnectables.count > 0
batteryCritical: devicesSubProxyBattery.count > 0
@ -131,7 +131,7 @@ MainPageTile {
id: icon
width: app.iconSize
height: width
color: app.guhAccent
color: app.accentColor
name: {
switch (model.name) {
@ -251,7 +251,7 @@ MainPageTile {
Label {
font.pixelSize: app.largeFont
color: app.guhAccent
color: app.accentColor
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
text: {

14
nymea-app/ui/mainviews/FavoritesView.qml
View File

@ -34,7 +34,7 @@ Item {
height: gridView.cellHeight
text: device.name.toUpperCase()
iconName: app.interfacesToIcon(deviceClass.interfaces)
iconColor: app.guhAccent
iconColor: app.accentColor
visible: !fakeDragItem.visible || fakeDragItem.deviceId !== device.id
batteryCritical: batteryCriticalState && batteryCriticalState.value === true
disconnected: connectedState && connectedState.value === false
@ -182,7 +182,7 @@ Item {
padding: 0; topPadding: 0; bottomPadding: 0
contentItem: ColorIcon {
name: "../images/light-off.svg"
color: app.guhAccent
color: app.accentColor
}
onClicked: {
var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
@ -225,7 +225,7 @@ Item {
padding: 0; topPadding: 0; bottomPadding: 0
contentItem: ColorIcon {
name: "../images/light-on.svg"
color: app.guhAccent
color: app.accentColor
}
onClicked: {
var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
@ -322,13 +322,13 @@ Item {
horizontalAlignment: Text.AlignRight
text: sensorsRoot.currentStateType.unitString
font.pixelSize: app.smallFont
color: app.guhAccent
color: app.accentColor
}
Label {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
text: sensorsRoot.currentState.value// + " " + sensorsRoot.currentStateType.unitString
color: app.guhAccent
color: app.accentColor
}
}
@ -366,7 +366,7 @@ Item {
padding: 0; topPadding: 0; bottomPadding: 0
contentItem: ColorIcon {
name: "../images/up.svg"
color: app.guhAccent
color: app.accentColor
}
onClicked: {
var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
@ -400,7 +400,7 @@ Item {
padding: 0; topPadding: 0; bottomPadding: 0
contentItem: ColorIcon {
name: "../images/down.svg"
color: app.guhAccent
color: app.accentColor
}
onClicked: {
var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);

2
nymea-app/ui/mainviews/ScenesView.qml
View File

@ -31,7 +31,7 @@ Item {
height: interfacesGridView.cellHeight
iconName: iconTag ? "../images/" + iconTag.value + ".svg" : "../images/slideshow.svg";
fallbackIconName: "../images/slideshow.svg"
iconColor: colorTag ? colorTag.value : app.guhAccent;
iconColor: colorTag ? colorTag.value : app.accentColor;
text: model.name.toUpperCase()
property var colorTag: Engine.tagsManager.tags.findRuleTag(model.id, "color")

2
nymea-app/ui/system/LogViewerPage.qml
View File

@ -13,7 +13,7 @@ Page {
HeaderButton {
imageSource: "../images/go-down.svg"
color: root.autoScroll ? app.guhAccent : keyColor
color: root.autoScroll ? app.accentColor : keyColor
onClicked: root.autoScroll = !root.autoScroll
}
}