555 lines
22 KiB
Plaintext
555 lines
22 KiB
Plaintext
export global Settings {
|
||
in-out property <bool> dark-mode: true;
|
||
}
|
||
|
||
export struct ThermostatData {
|
||
name: string,
|
||
current: string,
|
||
target: string,
|
||
state: string,
|
||
available: bool,
|
||
}
|
||
|
||
export struct LightData {
|
||
name: string,
|
||
on: bool,
|
||
available: bool,
|
||
}
|
||
|
||
export struct CalendarData {
|
||
date: string,
|
||
time: string,
|
||
summary: string,
|
||
calendar: string,
|
||
}
|
||
|
||
component ControlButton inherits Rectangle {
|
||
in property <string> label;
|
||
in property <bool> active: false;
|
||
in property <bool> enabled: true;
|
||
callback activated();
|
||
|
||
border-width: 2px;
|
||
border-color: Settings.dark-mode ? #777777 : black;
|
||
background: root.enabled && (touch.pressed || root.active) ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
|
||
|
||
touch := TouchArea {
|
||
clicked => { if root.enabled { root.activated(); } }
|
||
}
|
||
|
||
Text {
|
||
text: root.label;
|
||
color: root.enabled && (touch.pressed || root.active) ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: root.label == "−" || root.label == "+" ? 48px : 16px;
|
||
font-weight: 700;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
component NavigationButton inherits Rectangle {
|
||
in property <string> label;
|
||
in property <bool> active: false;
|
||
callback activated();
|
||
|
||
border-width: 2px;
|
||
border-color: Settings.dark-mode ? #777777 : black;
|
||
background: root.active || touch.pressed ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
|
||
|
||
touch := TouchArea {
|
||
clicked => { root.activated(); }
|
||
}
|
||
|
||
Text {
|
||
text: root.label;
|
||
color: root.active || touch.pressed ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
letter-spacing: 1px;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
component ThermostatRow inherits Rectangle {
|
||
in property <ThermostatData> room;
|
||
in property <int> row-index;
|
||
in property <bool> selected: false;
|
||
callback row-activated(int);
|
||
|
||
background: root.selected ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
|
||
|
||
TouchArea {
|
||
clicked => { root.row-activated(root.row-index); }
|
||
}
|
||
|
||
Rectangle {
|
||
x: 0;
|
||
y: parent.height - 1px;
|
||
width: parent.width;
|
||
height: 1px;
|
||
background: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
}
|
||
|
||
Text {
|
||
x: 16px;
|
||
y: 8px;
|
||
width: 330px;
|
||
height: 34px;
|
||
text: root.room.name;
|
||
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 25px;
|
||
font-weight: 700;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: 17px;
|
||
y: 46px;
|
||
width: 330px;
|
||
height: 20px;
|
||
text: root.room.available ? root.room.state : "UNAVAILABLE";
|
||
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: 365px;
|
||
y: 2px;
|
||
width: 135px;
|
||
height: 70px;
|
||
text: root.room.current;
|
||
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 52px;
|
||
font-weight: 700;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: 530px;
|
||
y: 5px;
|
||
width: 136px;
|
||
height: 66px;
|
||
text: root.room.target;
|
||
color: root.selected ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 39px;
|
||
font-weight: 700;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
component LightTile inherits Rectangle {
|
||
in property <LightData> light;
|
||
in property <int> light-index;
|
||
callback toggled(int);
|
||
|
||
border-width: 2px;
|
||
border-color: Settings.dark-mode ? #777777 : black;
|
||
background: root.light.on ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
|
||
|
||
TouchArea {
|
||
clicked => { if root.light.available { root.toggled(root.light-index); } }
|
||
}
|
||
|
||
Text {
|
||
x: 14px;
|
||
y: 7px;
|
||
width: parent.width - 88px;
|
||
height: 29px;
|
||
text: root.light.name;
|
||
color: root.light.on ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
overflow: elide;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: 14px;
|
||
y: 37px;
|
||
width: parent.width - 88px;
|
||
height: 21px;
|
||
text: !root.light.available ? "UNAVAILABLE" : root.light.on ? "ON" : "OFF";
|
||
color: root.light.on ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: parent.width - 56px;
|
||
y: 8px;
|
||
width: 38px;
|
||
height: parent.height - 16px;
|
||
text: root.light.on ? "●" : "○";
|
||
color: root.light.on ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 25px;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
component CalendarRow inherits Rectangle {
|
||
in property <CalendarData> event;
|
||
|
||
background: Settings.dark-mode ? black : white;
|
||
|
||
Rectangle {
|
||
x: 0;
|
||
y: parent.height - 2px;
|
||
width: parent.width;
|
||
height: 2px;
|
||
background: Settings.dark-mode ? #777777 : black;
|
||
}
|
||
|
||
Text {
|
||
x: 0;
|
||
y: 14px;
|
||
width: 150px;
|
||
height: 27px;
|
||
text: root.event.date;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
Text {
|
||
x: 0;
|
||
y: 47px;
|
||
width: 150px;
|
||
height: 24px;
|
||
text: root.event.time;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
Text {
|
||
x: 175px;
|
||
y: 11px;
|
||
width: parent.width - 175px;
|
||
height: 39px;
|
||
text: root.event.summary;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
overflow: elide;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: 175px;
|
||
y: 55px;
|
||
width: parent.width - 175px;
|
||
height: 23px;
|
||
text: root.event.calendar;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
export component AppWindow inherits Window {
|
||
width: 1024px;
|
||
height: 600px;
|
||
background: Settings.dark-mode ? black : white;
|
||
|
||
in property <[ThermostatData]> thermostats;
|
||
in property <[LightData]> lights;
|
||
in property <[CalendarData]> calendar-events;
|
||
in-out property <int> current-page: 0;
|
||
in-out property <int> selected-index: 0;
|
||
in property <string> selected-name: "--";
|
||
in property <string> selected-target: "--";
|
||
in property <string> selected-mode: "--";
|
||
in property <bool> selected-supports-heat: false;
|
||
in property <bool> selected-supports-cool: false;
|
||
in property <bool> selected-supports-fan: false;
|
||
in property <string> selected-fan-mode: "--";
|
||
in property <string> outside-temperature: "--";
|
||
in property <string> outside-high: "HIGH --";
|
||
in property <string> outside-condition: "CONNECTING";
|
||
in property <string> weather-kind: "cloud";
|
||
in property <string> next-event-label: "NEXT EVENT";
|
||
in property <string> next-event-title: "LOADING CALENDAR";
|
||
in property <string> next-event-time: "--";
|
||
in property <string> battery-level: "--%";
|
||
in property <string> battery-kind: "battery";
|
||
in property <string> updated-text: "WAITING FOR HOME ASSISTANT";
|
||
in property <string> action-status: "TAP A ROOM TO CONTROL";
|
||
in property <string> lights-summary: "LOADING LIGHTS";
|
||
in-out property <bool> dark-mode: false;
|
||
|
||
callback select-room(int);
|
||
callback change-target(int);
|
||
callback set-mode(string);
|
||
callback set-fan-mode(string);
|
||
callback toggle-light(int);
|
||
callback refresh();
|
||
callback clean-screen();
|
||
callback user-activity();
|
||
callback enter-sleep();
|
||
callback wake-from-sleep();
|
||
callback quit();
|
||
|
||
Rectangle {
|
||
x: 0;
|
||
y: 0;
|
||
width: parent.width;
|
||
height: 5px;
|
||
background: Settings.dark-mode ? #777777 : black;
|
||
}
|
||
|
||
TouchArea {
|
||
x: 0;
|
||
y: 5px;
|
||
width: parent.width - 78px;
|
||
height: 78px;
|
||
clicked => { root.user-activity(); root.current-page = 2; }
|
||
}
|
||
|
||
Text {
|
||
x: 38px;
|
||
y: 12px;
|
||
width: parent.width - 128px;
|
||
height: 18px;
|
||
text: root.next-event-label;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
Text {
|
||
x: 38px;
|
||
y: 32px;
|
||
width: 390px;
|
||
height: 36px;
|
||
text: root.next-event-title;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
overflow: elide;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: 438px;
|
||
y: 32px;
|
||
width: 100px;
|
||
height: 36px;
|
||
text: root.next-event-time;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
horizontal-alignment: right;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
if root.battery-kind == "battery-charging": Image { image-rendering: smooth; x: 552px; y: 34px; width: 34px; height: 30px; source: @image-url("icons/battery-charging.svg"); image-fit: contain; }
|
||
if root.battery-kind == "battery-full": Image { image-rendering: smooth; x: 552px; y: 34px; width: 34px; height: 30px; source: @image-url("icons/battery-full.svg"); image-fit: contain; }
|
||
if root.battery-kind == "battery-medium": Image { image-rendering: smooth; x: 552px; y: 34px; width: 34px; height: 30px; source: @image-url("icons/battery-medium.svg"); image-fit: contain; }
|
||
if root.battery-kind == "battery-low": Image { image-rendering: smooth; x: 552px; y: 34px; width: 34px; height: 30px; source: @image-url("icons/battery-low.svg"); image-fit: contain; }
|
||
if root.battery-kind == "battery": Image { image-rendering: smooth; x: 552px; y: 34px; width: 34px; height: 30px; source: @image-url("icons/battery.svg"); image-fit: contain; }
|
||
if root.battery-kind == "plug": Image { image-rendering: smooth; x: 552px; y: 34px; width: 34px; height: 30px; source: @image-url("icons/plug.svg"); image-fit: contain; }
|
||
|
||
Text {
|
||
x: 590px;
|
||
y: 32px;
|
||
width: 66px;
|
||
height: 36px;
|
||
text: root.battery-level;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
horizontal-alignment: right;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Rectangle {
|
||
x: parent.width - 66px;
|
||
y: 19px;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-width: 2px;
|
||
border-color: Settings.dark-mode ? #777777 : black;
|
||
background: close-touch.pressed ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
|
||
|
||
close-touch := TouchArea {
|
||
clicked => { Settings.dark-mode = !Settings.dark-mode }
|
||
}
|
||
|
||
Text {
|
||
text: Settings.dark-mode ? "D" : "L";
|
||
color: close-touch.pressed ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black;
|
||
font-size: 29px;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
}
|
||
|
||
if root.current-page == 0: Rectangle {
|
||
x: 0;
|
||
y: 84px;
|
||
width: root.width;
|
||
height: root.height - 84px;
|
||
background: Settings.dark-mode ? black : white;
|
||
|
||
Text {
|
||
x: 38px;
|
||
y: 10px;
|
||
width: 180px;
|
||
height: 21px;
|
||
text: "OUTSIDE";
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
Text {
|
||
x: 33px;
|
||
y: 28px;
|
||
width: 300px;
|
||
height: 116px;
|
||
text: root.outside-temperature;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 104px;
|
||
font-weight: 700;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
x: 260px;
|
||
y: 101px;
|
||
width: 150px;
|
||
height: 32px;
|
||
text: root.outside-high;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
if root.weather-kind == "sun": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/sun.svg"); image-fit: contain; }
|
||
if root.weather-kind == "cloud-sun": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/cloud-sun.svg"); image-fit: contain; }
|
||
if root.weather-kind == "cloud-moon": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/cloud-moon.svg"); image-fit: contain; }
|
||
if root.weather-kind == "cloud": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/cloud.svg"); image-fit: contain; }
|
||
if root.weather-kind == "cloud-rain": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/cloud-rain.svg"); image-fit: contain; }
|
||
if root.weather-kind == "cloud-rain-wind": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/cloud-rain-wind.svg"); image-fit: contain; }
|
||
if root.weather-kind == "cloud-lightning": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/cloud-lightning.svg"); image-fit: contain; }
|
||
if root.weather-kind == "snowflake": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/snowflake.svg"); image-fit: contain; }
|
||
if root.weather-kind == "cloud-fog": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/cloud-fog.svg"); image-fit: contain; }
|
||
if root.weather-kind == "moon": Image { image-rendering: smooth; x: 520px; y: 20px; width: 120px; height: 105px; source: @image-url("icons/moon.svg"); image-fit: contain; }
|
||
|
||
Text {
|
||
x: 392px;
|
||
y: 126px;
|
||
width: parent.width - 430px;
|
||
height: 22px;
|
||
text: root.outside-condition;
|
||
color: Settings.dark-mode ? #777777 : black;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
horizontal-alignment: right;
|
||
}
|
||
|
||
Rectangle { x: 38px; y: 151px; width: parent.width - 76px; height: 3px; background: Settings.dark-mode ? #777777 : black; }
|
||
|
||
Text { x: 38px; y: 173px; width: 260px; height: 24px; text: "THERMOSTATS"; color: Settings.dark-mode ? #777777 : black; font-size: 17px; font-weight: 700; letter-spacing: 2px; }
|
||
Text { x: 403px; y: 175px; width: 135px; height: 20px; text: "NOW"; color: Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; horizontal-alignment: center; }
|
||
Text { x: 568px; y: 175px; width: 136px; height: 20px; text: "SET"; color: Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; horizontal-alignment: center; }
|
||
Rectangle { x: 38px; y: 205px; width: parent.width - 76px; height: 1px; background: Settings.dark-mode ? #777777 : black; }
|
||
|
||
for room[index] in root.thermostats: ThermostatRow {
|
||
x: 38px;
|
||
y: 206px + index * 80px;
|
||
width: root.width - 76px;
|
||
height: 80px;
|
||
room: room;
|
||
row-index: index;
|
||
selected: root.selected-index == index;
|
||
row-activated(index) => { root.user-activity(); root.select-room(index); }
|
||
}
|
||
|
||
Rectangle { x: 38px; y: 627px; width: parent.width - 76px; height: 4px; background: Settings.dark-mode ? #777777 : black; }
|
||
Text { x: 38px; y: 642px; width: 280px; height: 22px; text: root.selected-name + " / " + root.selected-mode; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; overflow: elide; }
|
||
Text { x: 34px; y: 661px; width: 190px; height: 78px; text: root.selected-target; color: Settings.dark-mode ? #777777 : black; font-size: 62px; font-weight: 700; vertical-alignment: center; }
|
||
|
||
ControlButton { x: 236px; y: 662px; width: 78px; height: 78px; label: "−"; activated => { root.user-activity(); root.change-target(-1); } }
|
||
ControlButton { x: 324px; y: 662px; width: 78px; height: 78px; label: "+"; activated => { root.user-activity(); root.change-target(1); } }
|
||
ControlButton { x: 412px; y: 662px; width: 92px; height: 78px; label: "HEAT"; enabled: root.selected-supports-heat; active: root.selected-mode == "HEAT" || root.selected-mode == "HEATING"; activated => { root.user-activity(); root.set-mode("heat"); } }
|
||
ControlButton { x: 514px; y: 662px; width: 92px; height: 78px; label: "COOL"; enabled: root.selected-supports-cool; active: root.selected-mode == "COOL" || root.selected-mode == "COOLING"; activated => { root.user-activity(); root.set-mode("cool"); } }
|
||
ControlButton { x: 616px; y: 662px; width: 104px; height: 78px; label: "OFF"; active: root.selected-mode == "OFF"; activated => { root.user-activity(); root.set-mode("off"); } }
|
||
|
||
Text { x: 38px; y: 754px; width: 92px; height: 54px; text: "FAN\nSPEED"; color: Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; vertical-alignment: center; }
|
||
ControlButton { x: 138px; y: 752px; width: 76px; height: 58px; label: "AUTO"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "AUTO"; activated => { root.user-activity(); root.set-fan-mode("Auto"); } }
|
||
ControlButton { x: 222px; y: 752px; width: 76px; height: 58px; label: "LOW"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "LOW"; activated => { root.user-activity(); root.set-fan-mode("Low"); } }
|
||
ControlButton { x: 306px; y: 752px; width: 76px; height: 58px; label: "MED"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "MED"; activated => { root.user-activity(); root.set-fan-mode("Med"); } }
|
||
ControlButton { x: 390px; y: 752px; width: 76px; height: 58px; label: "HIGH"; enabled: root.selected-supports-fan; active: root.selected-fan-mode == "HIGH"; activated => { root.user-activity(); root.set-fan-mode("High"); } }
|
||
|
||
Text { x: 38px; y: 822px; width: 540px; height: 24px; text: root.action-status; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; overflow: elide; }
|
||
Rectangle {
|
||
x: parent.width - 152px; y: 814px; width: 114px; height: 40px; border-width: 2px; border-color: Settings.dark-mode ? #777777 : black; background: refresh-touch.pressed ? Settings.dark-mode ? #777777 : black : Settings.dark-mode ? black : white;
|
||
refresh-touch := TouchArea { clicked => { root.user-activity(); root.refresh(); } }
|
||
Text { text: "REFRESH"; color: refresh-touch.pressed ? Settings.dark-mode ? black : white : Settings.dark-mode ? #777777 : black; font-size: 14px; font-weight: 700; horizontal-alignment: center; vertical-alignment: center; }
|
||
}
|
||
}
|
||
|
||
if root.current-page == 1: Rectangle {
|
||
x: 0;
|
||
y: 84px;
|
||
width: root.width;
|
||
height: root.height - 84px;
|
||
background: Settings.dark-mode ? black : white;
|
||
|
||
Text { x: 38px; y: 18px; width: 230px; height: 30px; text: "LIGHTS"; color: Settings.dark-mode ? #777777 : black; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
|
||
Text { x: 330px; y: 21px; width: 390px; height: 24px; text: root.lights-summary; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; horizontal-alignment: right; }
|
||
Rectangle { x: 38px; y: 55px; width: parent.width - 76px; height: 3px; background: Settings.dark-mode ? #777777 : black; }
|
||
|
||
for light[index] in root.lights: LightTile {
|
||
// x: index < 10 ? 38px : 390px;
|
||
// y: 72px + (index < 10 ? index : index - 10) * 74px;
|
||
x: Math.mod(index, 2) == 0 ? 38px : 390px;
|
||
y: 72px + Math.floor(index / 2) * 74px;
|
||
width: 330px;
|
||
height: 66px;
|
||
light: light;
|
||
light-index: index;
|
||
toggled(index) => { root.user-activity(); root.toggle-light(index); }
|
||
}
|
||
}
|
||
|
||
if root.current-page == 2: Rectangle {
|
||
x: 0;
|
||
y: 84px;
|
||
width: root.width;
|
||
height: root.height - 84px;
|
||
background: Settings.dark-mode ? black : white;
|
||
|
||
Text { x: 38px; y: 18px; width: 260px; height: 30px; text: "CALENDAR"; color: Settings.dark-mode ? #777777 : black; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
|
||
Text { x: 400px; y: 21px; width: 320px; height: 24px; text: "NEXT 30 DAYS"; color: Settings.dark-mode ? #777777 : black; font-size: 15px; font-weight: 700; horizontal-alignment: right; }
|
||
Rectangle { x: 38px; y: 55px; width: parent.width - 76px; height: 3px; background: Settings.dark-mode ? #777777 : black; }
|
||
|
||
for event[index] in root.calendar-events: CalendarRow {
|
||
x: 38px;
|
||
y: 68px + index * 110px;
|
||
width: root.width - 76px;
|
||
height: 110px;
|
||
event: event;
|
||
}
|
||
|
||
if root.calendar-events.length == 0: Text {
|
||
x: 38px; y: 105px; width: parent.width - 76px; height: 50px; text: "NO UPCOMING EVENTS"; color: Settings.dark-mode ? #777777 : black; font-size: 24px; font-weight: 700;
|
||
}
|
||
}
|
||
|
||
NavigationButton { x: 38px; y: parent.height - 80px; width: 168px; height: 60px; label: "CLIMATE"; active: root.current-page == 0; activated => { root.user-activity(); root.current-page = 0; } }
|
||
NavigationButton { x: 222px; y: parent.height - 80px; width: 168px; height: 60px; label: "LIGHTS"; active: root.current-page == 1; activated => { root.user-activity(); root.current-page = 1; } }
|
||
NavigationButton { x: 406px; y: parent.height - 80px; width: 168px; height: 60px; label: "CALENDAR"; active: root.current-page == 2; activated => { root.user-activity(); root.current-page = 2; } }
|
||
}
|