Skip to content

Commit

Permalink
Various UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
emericg committed Nov 25, 2024
1 parent 19c8e65 commit b8b173e
Show file tree
Hide file tree
Showing 21 changed files with 123 additions and 145 deletions.
1 change: 1 addition & 0 deletions CMakeLists.txt
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ qt_add_qml_module(${CMAKE_PROJECT_NAME}
qml/components/ItemNoPlants.qml
qml/components/ItemNoJournal.qml
qml/components/LuxBox.qml
qml/components/PhBox.qml
qml/components/PlantCalendarWidget.qml
qml/components/PlantHardinessWidget.qml
qml/components/PlantSizeWidget.qml
Expand Down
2 changes: 1 addition & 1 deletion qml/DesktopHeader.qml
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ Rectangle {
onEntered: { buttonBackBg.opacity = 0.5; }
onExited: { buttonBackBg.opacity = 0; buttonBack.width = 32; }

onPressed: buttonBack.width = 24
onPressed: buttonBack.width = 28
onReleased: buttonBack.width = 32
onClicked: backButtonClicked()

Expand Down
4 changes: 4 additions & 0 deletions qml/DevicePlantSensorSettings.qml
Original file line number Diff line number Diff line change
Expand Up @@ -508,6 +508,10 @@ Flickable {
backgroundColor: Theme.colorBackground
iconColor: Theme.colorIcon
source: UtilsDeviceSensors.getDeviceSensorIcon(modelData.sensorId)
sourceRotation: {
if (source == "qrc:/IconLibrary/material-symbols/sensors/tonality.svg") return 90
return 0
}
}
Column {
anchors.verticalCenter: parent.verticalCenter
Expand Down
159 changes: 34 additions & 125 deletions qml/PlantScreen.qml
Original file line number Diff line number Diff line change
Expand Up @@ -1267,12 +1267,12 @@ Grid {
border.color: Qt.darker(color, 1.03)

IconSvg {
width: 28
height: 28
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 8
width: 28
height: 28

opacity: 0.66
color: Theme.colorSubText
Expand Down Expand Up @@ -1320,20 +1320,16 @@ Grid {

Item {
id: itemHygro
height: 40
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
height: 40

IconSvg {
id: imageHygro
width: 24
height: 24
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
width: 24
height: 24

color: Theme.colorSubText
source: "qrc:/IconLibrary/material-icons/duotone/water_mid.svg"
Expand Down Expand Up @@ -1378,19 +1374,16 @@ Grid {
id: itemCondu
height: 40
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0

IconSvg {
id: imageCondu
width: 24
height: 24
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
width: 24
height: 24

rotation: 90
color: Theme.colorSubText
source: "qrc:/IconLibrary/material-symbols/sensors/tonality.svg"
}
Expand Down Expand Up @@ -1433,19 +1426,16 @@ Grid {
id: itemSoilPH
height: 64
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0

IconSvg {
id: imageSoilPH
width: 24
height: 24
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
width: 24
height: 24

rotation: 90
color: Theme.colorSubText
source: "qrc:/IconLibrary/material-symbols/sensors/tonality.svg"
}
Expand Down Expand Up @@ -1492,95 +1482,29 @@ Grid {
spacing: 3
property int phsz: (rangeSlider_soilPH.width - 2*rangeSlider_soilPH.padding - 4 - 5*spacing) / 6

Rectangle { // 4
PhBox {
width: parent.phsz
height: 20
radius: Theme.componentRadius
color: "#ff914d"

Text {
anchors.centerIn: parent
text: "4"
textFormat: Text.PlainText
color: "white"
font.bold: true
font.pixelSize: Theme.fontSizeContentVerySmall
}
text: "4"
}
Rectangle { // 5
PhBox {
width: parent.phsz
height: 20
radius: Theme.componentRadius
color: "#ffbd59"

Text {
anchors.centerIn: parent
text: "5"
textFormat: Text.PlainText
color: "white"
font.bold: true
font.pixelSize: Theme.fontSizeContentVerySmall
}
text: "5"
}
Rectangle { // 6
PhBox {
width: parent.phsz
height: 20
radius: Theme.componentRadius
color: "#ffde59"

Text {
anchors.centerIn: parent
text: "6"
textFormat: Text.PlainText
color: "white"
font.bold: true
font.pixelSize: Theme.fontSizeContentVerySmall
}
text: "6"
}
Rectangle { // 7
PhBox {
width: parent.phsz
height: 20
radius: Theme.componentRadius
color: "#c9e265"

Text {
anchors.centerIn: parent
text: "7"
textFormat: Text.PlainText
color: "white"
font.bold: true
font.pixelSize: Theme.fontSizeContentVerySmall
}
text: "7"
}
Rectangle { // 8
PhBox {
width: parent.phsz
height: 20
radius: Theme.componentRadius
color: "#03989e"

Text {
anchors.centerIn: parent
text: "8"
textFormat: Text.PlainText
color: "white"
font.bold: true
font.pixelSize: Theme.fontSizeContentVerySmall
}
text: "8"
}
Rectangle { // 9
PhBox {
width: parent.phsz
height: 20
radius: Theme.componentRadius
color: "#2163bb"

Text {
anchors.centerIn: parent
text: "9"
textFormat: Text.PlainText
color: "white"
font.bold: true
font.pixelSize: Theme.fontSizeContentVerySmall
}
text: "9"
}
}
}
Expand All @@ -1589,22 +1513,19 @@ Grid {
Item {
id: itemTemp
height: 40
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right

IconSvg {
id: imageTemp
width: 24
height: 24
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
width: 24
height: 24

color: Theme.colorSubText
source: "qrc:/IconLibrary/material-symbols/sensors/airware.svg"
source: "qrc:/assets/gfx/icons/thermometer_big-24px.svg"
//source: "qrc:/IconLibrary/material-symbols/sensors/thermometer-fill.svg"
}
Text {
anchors.left: imageTemp.right
Expand Down Expand Up @@ -1645,18 +1566,14 @@ Grid {
Item {
height: 40
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0

IconSvg {
id: imageHygro2
width: 24
height: 24
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
width: 24
height: 24

color: Theme.colorSubText
source: "qrc:/IconLibrary/material-icons/duotone/water_mid.svg"
Expand Down Expand Up @@ -1701,18 +1618,14 @@ Grid {
id: itemLumi
height: 64
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0

IconSvg {
id: imageLumi
width: 24
height: 24
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
width: 24
height: 24

color: Theme.colorText
source: "qrc:/IconLibrary/material-icons/duotone/wb_sunny.svg"
Expand Down Expand Up @@ -1804,18 +1717,14 @@ Grid {
id: itemLumiMmol
height: 64
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0

IconSvg {
id: imageLumiMmol
width: 24
height: 24
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
width: 24
height: 24

color: Theme.colorText
source: "qrc:/IconLibrary/material-icons/duotone/wb_sunny.svg"
Expand Down
2 changes: 1 addition & 1 deletion qml/Settings.qml
Original file line number Diff line number Diff line change
Expand Up @@ -844,7 +844,7 @@ Loader {

ListTitle {
text: qsTr("Bluetooth")
source: "qrc:/IconLibrary/material-symbols/sensors/bluetooth.svg"
source: "qrc:/IconLibrary/material-symbols/bluetooth.svg"
}

////////
Expand Down
4 changes: 2 additions & 2 deletions qml/Tutorial.qml
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ Rectangle {
font.pixelSize: singleColumn ? Theme.fontSizeContent : Theme.fontSizeContentBig
}
IconSvg {
width: tutorialPages.width * (tutorialPages.height > tutorialPages.width ? 0.66 : 0.3)
width: tutorialPages.width * (tutorialPages.height > tutorialPages.width ? 0.666 : 0.3)
height: width*0.2
anchors.horizontalCenter: parent.horizontalCenter

Expand All @@ -296,7 +296,7 @@ Rectangle {
font.pixelSize: singleColumn ? Theme.fontSizeContent : Theme.fontSizeContentBig
}
IconSvg {
width: tutorialPages.width * (tutorialPages.height > tutorialPages.width ? 0.66 : 0.3)
width: tutorialPages.width * (tutorialPages.height > tutorialPages.width ? 0.666 : 0.3)
height: width*0.1797
anchors.horizontalCenter: parent.horizontalCenter

Expand Down
7 changes: 7 additions & 0 deletions qml/components/AirQualityIndicator.qml
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ Item {
arcBegin: 0
arcEnd: ((indicatorAirQuality.limitMin/indicatorAirQuality.valueMax) * 270) - 1
arcOffset: 225

arcColor: (Theme.currentTheme === Theme.THEME_PLANT ? Theme.colorLightGreen : Theme.colorGreen)
arcOpacity: 1
}
Expand All @@ -50,6 +51,7 @@ Item {
arcBegin: ((indicatorAirQuality.limitMin/indicatorAirQuality.valueMax) * 270) + 1
arcEnd: ((indicatorAirQuality.limitMax/indicatorAirQuality.valueMax) * 270) - 1
arcOffset: 225

arcColor: Theme.colorOrange
arcOpacity: 1
}
Expand All @@ -65,6 +67,7 @@ Item {
arcBegin: ((indicatorAirQuality.limitMax/indicatorAirQuality.valueMax) * 270) + 1
arcEnd: 270
arcOffset: 225

arcColor: Theme.colorRed
arcOpacity: 1
}
Expand All @@ -80,8 +83,10 @@ Item {
arcOffset: 225
arcBegin: 0
arcEnd: 270

arcWidth: isMobile ? 12 : 18
arcColor: indicatorAirQuality.color
arcCap: "round"

background: true
backgroundOpacity: 0.5
Expand Down Expand Up @@ -156,4 +161,6 @@ Item {
font.bold: false
}
}

////////////////////////////////////////////////////////////////////////////
}
3 changes: 2 additions & 1 deletion qml/components/LuxBox.qml
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ Rectangle {
implicitHeight: 20
radius: 2

required property string text

color: "grey"
property string text: ""

Text {
anchors.fill: parent
Expand Down
Loading

0 comments on commit b8b173e

Please sign in to comment.