1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "../theme.slint";
5import { Images } from "../images.slint";
6
7export global HeaderAdapter {
8 in property <string> date: "Sunday 8th, January 2023";
9 in property <string> time: "5:20";
10 in property <string> time-suffix: "PM";
11 in property <image> logo: Images.slint-logo;
12}
13
14export component Header {
15 in property <string> date <=> HeaderAdapter.date;
16 in property <string> time <=> HeaderAdapter.time;
17 in property <string> time-suffix <=> HeaderAdapter.time-suffix;
18 in property <image> logo <=> HeaderAdapter.logo;
19
20 min-height: 50px;
21 vertical-stretch: 0;
22
23 HorizontalLayout {
24 padding: 20px;
25 spacing: 5px;
26
27 Rectangle {
28 horizontal-stretch: 1;
29
30 Text {
31 x: 0px;
32 color: Theme.palette.white;
33 text: date;
34 font-size: Theme.typo.header-item.size;
35 font-weight: Theme.typo.header-item.weight;
36 }
37 }
38
39 Rectangle {
40 horizontal-stretch: 1;
41
42 Image {
43 height: 30px;
44 source: logo;
45 }
46 }
47
48 Rectangle {
49 horizontal-stretch: 1;
50
51 Text {
52 x: i-time-suffix.x - 5px - self.width;
53 horizontal-alignment: right;
54 color: Theme.palette.white;
55 text: time;
56 font-size: Theme.typo.header-item.size;
57 font-weight: Theme.typo.header-item.weight;
58 }
59
60 i-time-suffix := Text {
61 x: parent.width - self.width;
62 horizontal-stretch: 0;
63 color: Theme.palette.shark-gray;
64 text: time-suffix;
65 font-size: Theme.typo.header-item.size;
66 font-weight: Theme.typo.header-item.weight;
67 }
68 }
69 }
70}