187 lines
7.5 KiB
Plaintext
187 lines
7.5 KiB
Plaintext
export component MainWindow inherits Window {
|
|
|
|
in property <string> city: "Unknown City";
|
|
in property <string> country: "UK";
|
|
in property <string> weather_main: "Clouds";
|
|
in property <string> weather_description: "broken clouds with heavy rain";
|
|
in property <string> weather_icon: "";
|
|
in property <string> temperature: "23.1";
|
|
in property <string> unit: "C";
|
|
in property <int> popup_width: 300;
|
|
in property <int> popup_height: 124;
|
|
in property <string> default_font: "IosevkaTermSlab Nerd Font Mono";
|
|
|
|
always-on-top: true;
|
|
no-frame: true;
|
|
width: popup_width *1px;
|
|
height: popup_height *1px;
|
|
background: transparent;
|
|
default-font-family: default_font;
|
|
|
|
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
|
|
Rectangle {
|
|
row: 0;
|
|
//background: #232323;
|
|
height: 65px;
|
|
width: 276px;
|
|
|
|
GridLayout {
|
|
// Left - weather icon
|
|
Rectangle {
|
|
height: 65px;
|
|
width: 65px;
|
|
//background: #316481;
|
|
row: 0;
|
|
col:0;
|
|
Text {
|
|
width: 100%;
|
|
height: 100%;
|
|
text: root.weather_icon;
|
|
font-size: 65px;
|
|
vertical-alignment: center;
|
|
horizontal-alignment: center;
|
|
}
|
|
}
|
|
// Right - Location and temperature
|
|
Rectangle {
|
|
row: 0;
|
|
col:1;
|
|
//background: #318138;
|
|
height: 65px;
|
|
width: 211px;
|
|
|
|
GridLayout {
|
|
// Top right - Location
|
|
Rectangle {
|
|
row: 0;
|
|
col: 0;
|
|
//background: #232323;
|
|
height: 20px;
|
|
Text {
|
|
width: 100%;
|
|
height: 100%;
|
|
text: root.city + "," + root.country;
|
|
vertical-alignment: center;
|
|
horizontal-alignment: right;
|
|
}
|
|
}
|
|
// Bottom right - Temperature block
|
|
Rectangle {
|
|
row: 1;
|
|
col: 0;
|
|
//background: #7a2a70;
|
|
height: 45px;
|
|
GridLayout {
|
|
// Temperature value
|
|
Rectangle {
|
|
//background: #7c3434;
|
|
row: 0;
|
|
col:0;
|
|
rowspan: 2;
|
|
height: 45px;
|
|
min-width: 0px;
|
|
Text {
|
|
vertical-alignment: center;
|
|
horizontal-alignment: right;
|
|
width: 100%;
|
|
height: 100%;
|
|
text: root.temperature;
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
// Degree symbol
|
|
Rectangle {
|
|
//background: #39347c;
|
|
row: 0;
|
|
col:1;
|
|
rowspan: 1;
|
|
width: 18px;
|
|
Text {
|
|
text: "";
|
|
font-size: 18px;
|
|
vertical-alignment: bottom;
|
|
horizontal-alignment: right;
|
|
height: 100%;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
// Temperature unit
|
|
Rectangle {
|
|
//background: #577c34;
|
|
row: 1;
|
|
col:1;
|
|
rowspan: 1;
|
|
width: 18px;
|
|
Text {
|
|
//text: root.unit;
|
|
text: "C";
|
|
font-size: 18px;
|
|
vertical-alignment: top;
|
|
horizontal-alignment: right;
|
|
height: 100%;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Bottom row
|
|
Rectangle {
|
|
row: 1;
|
|
//background: #863b3b;
|
|
height: 35px;
|
|
width: 276px;
|
|
|
|
GridLayout {
|
|
// Bottom left - Weather condition
|
|
Rectangle {
|
|
row: 0;
|
|
col: 0;
|
|
width: 135px;
|
|
height: 35px;
|
|
//background: #2f794e;
|
|
Text {
|
|
height: 100%;
|
|
width: 100%;
|
|
vertical-alignment: center;
|
|
horizontal-alignment: left;
|
|
text: root.weather_main;
|
|
//text: "Thunderstorms";
|
|
font-size: 21px;
|
|
}
|
|
}
|
|
// Bottom right - Weather description
|
|
Rectangle {
|
|
row: 0;
|
|
col: 1;
|
|
//background: #b4a44a;
|
|
Text {
|
|
height: 100%;
|
|
width: 100%;
|
|
vertical-alignment: top;
|
|
horizontal-alignment: right;
|
|
text: root.weather_description;
|
|
font-size: 13.5px;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |