140 lines
5.1 KiB
Plaintext
140 lines
5.1 KiB
Plaintext
export component MainWindow inherits Window {
|
|
|
|
in property <string> city;
|
|
in property <string> country;
|
|
in property <string> weather_main;
|
|
in property <string> weather_description;
|
|
in property <string> weather_icon;
|
|
in property <string> temperature;
|
|
in property <string> unit;
|
|
|
|
always-on-top: true;
|
|
no-frame: true;
|
|
width: 300px;
|
|
height: 124px;
|
|
background: transparent;
|
|
default-font-family: "IosevkaTermSlab Nerd Font Mono";
|
|
|
|
Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
background: @linear-gradient(160deg, #236a8bc7, #c5edff5c);
|
|
drop-shadow-blur: 15px;
|
|
drop-shadow-color: #00000066;
|
|
|
|
GridLayout {
|
|
padding: 12px;
|
|
width: 100%;
|
|
// Top row
|
|
Row {
|
|
HorizontalLayout {
|
|
// Left column - weather icon
|
|
Rectangle {
|
|
width: 80px;
|
|
height: 80px;
|
|
Text {
|
|
text: weather_icon;
|
|
font-size: 80px;
|
|
color: #ffffff;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
// Right column
|
|
Rectangle {
|
|
width: 196px;
|
|
background: #000;
|
|
VerticalLayout {
|
|
alignment: end;
|
|
// City name
|
|
Text {
|
|
text: city + "," + country;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
horizontal-alignment: right;
|
|
vertical-alignment: center;
|
|
height: 18px;
|
|
font-weight: 600;
|
|
}
|
|
// Temperature block
|
|
HorizontalLayout {
|
|
padding: 0px;
|
|
// Temperatur value
|
|
Rectangle {
|
|
background: #ff8800;
|
|
Text {
|
|
text: temperature;
|
|
color: #ffffff;
|
|
font-size: 40px;
|
|
horizontal-alignment: right;
|
|
vertical-alignment: center;
|
|
letter-spacing: 0px;
|
|
}
|
|
}
|
|
// Temperature unit
|
|
Rectangle {
|
|
background: #ff009d;
|
|
VerticalLayout {
|
|
padding: 0px;
|
|
spacing: 0px;
|
|
alignment: end;
|
|
// The degree symbol
|
|
Text {
|
|
text: "o";
|
|
font-size: 16px;
|
|
color: #fff;
|
|
horizontal-alignment: left;
|
|
vertical-alignment: center;
|
|
height: 25px;
|
|
font-weight: 800;
|
|
}
|
|
// Unit symbol
|
|
Text {
|
|
text: unit;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
horizontal-alignment: left;
|
|
vertical-alignment: center;
|
|
height: 20px;
|
|
width: 18px;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bottom row
|
|
Row {
|
|
/* Summary */
|
|
Text {
|
|
height: 20px;
|
|
text: weather_main;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
vertical-alignment: top;
|
|
horizontal-alignment: left;
|
|
width: 40%; // Fixed percentage width for consistent layout
|
|
font-weight: 800;
|
|
}
|
|
/* Description */
|
|
Text {
|
|
text: weather_description;
|
|
font-size: 12px;
|
|
color: #ffffffcc;
|
|
horizontal-alignment: TextHorizontalAlignment.right;
|
|
vertical-alignment: TextVerticalAlignment.top;
|
|
horizontal-stretch: 1.0;
|
|
wrap: word-wrap;
|
|
height: 100%;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |