-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathMainView.ux
171 lines (161 loc) · 7.05 KB
/
MainView.ux
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!-- author http://twitter.com/superpikar -->
<App>
<JavaScript File="./MainView.js" />
<iOS.StatusBarConfig Style="Light" Animation="Slide" IsVisible="True" />
<ClientPanel>
<Container ux:Class="PageWithTitle" ux:Name="self" HitTestMode="LocalBoundsAndChildren" Subtree="innerPanel">
<float4 ux:Property="HeaderColor" />
<float4 ux:Property="HeaderTextColor" />
<string ux:Property="Instructions" />
<string ux:Property="Title" />
<Android.StatusBarConfig Color="{Property self.HeaderColor}" IsVisible="True" />
<DockPanel ux:Binding="Children">
<StackPanel Dock="Top">
<Panel Color="{Property self.HeaderColor}" Height="55">
<Text Value="{Property self.Title}" FontSize="22" Alignment="Center" TextColor="{Property self.HeaderTextColor}"/>
</Panel>
</StackPanel>
<Panel ux:Name="innerPanel" />
<Panel Color="#000" Dock="Bottom" Padding="7">
<Text Value="{Property self.Instructions}" TextColor="{Resource BackgroundColor}" Alignment="Center" FontSize="10" />
</Panel>
</DockPanel>
</Container>
<Text ux:Class="SubTitle" FontSize="18" />
<StackPanel ux:Class="Box" Margin="0,0,0,20">
</StackPanel>
<StackPanel ux:Class="BoxError" Margin="0,20" Color="{Resource AlertColor}" Padding="20">
<AddingAnimation>
<Change this.Opacity="0" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn" />
</AddingAnimation>
<RemovingAnimation>
<Change this.Opacity="0" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn" />
</RemovingAnimation>
</StackPanel>
<Button ux:Class="TabButton" Padding="0,10" Color="{Resource MainColor}" Alignment="Center" Width="100%">
<string ux:Property="label" />
<!-- <Tapped>
<Change this.Color="{Resource MainDarkerColor}" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn" />
</Tapped> -->
<Text Value="{Property label}" Color="{Resource BackgroundColor}" Alignment="Center"/>
</Button>
<Rectangle ux:Class="VerticalDivider" Width="1" Color="{Resource DisableColor}" Margin="0,8" />
<Rectangle ux:Class="HorizontalDivider" Height="1" Color="{Resource DisableColor}" Margin="8,0" />
<StackPanel ux:Class="WeatherInfo" Width="75">
<WhileTrue Value="{time != ''}">
<Text Value="{time}" Alignment="Center"/>
<Text Value="{date}" Alignment="Center" FontSize="10"/>
</WhileTrue>
<WhileTrue Value="{time == ''}">
<Text Value="" Alignment="Center" FontSize="10"/>
<Text Value="{date}" Alignment="Center"/>
</WhileTrue>
<Image Url="http://openweathermap.org/img/w/{weather[0].icon}.png"/>
<Text Value="{weather[0].description}" FontSize="10" Alignment="Center"/>
<Text Value="{main.temp} °C" FontSize="12" Alignment="Center"/>
</StackPanel>
<PageWithTitle Title="Weather App" HeaderColor="{Resource MainColor}" HeaderTextColor="{Resource BackgroundColor}" Color="#FEFDFC" Instructions="Retrieve from https://openweathermap.org/">
<ScrollView>
<StackPanel>
<StackPanel Padding="20">
<DockPanel Margin="0,0,0,20">
<StackPanel Padding="0,0,20,0">
<SubTitle>Location</SubTitle>
<Text FontSize="24" Value="{location.city}, {location.country}" TextWrapping="Wrap"/>
<Text Value="{location.latitude}, {location.longitude}" FontSize="10"/>
</StackPanel>
<Rectangle ux:Name="buttonLocate" Color="{Resource MainDarkerColor}" Dock="Right" Height="40" Padding="10" Alignment="Top" CornerRadius="20">
<Tapped>
<Scale Factor=".9" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn" />
</Tapped>
<Panel Alignment="Center">
<WhileTrue Value="{isLoading}">
<Image Source="{Resource IconSpinner}" Color="{Resource BackgroundColor}" />
<Change buttonLocate.Color="{Resource DisableColor}" />
</WhileTrue>
<WhileFalse Value="{isLoading}">
<Image Source="{Resource IconLocation}" Color="{Resource BackgroundColor}" Tapped="{detectCurrentLocation}" />
</WhileFalse>
</Panel>
</Rectangle>
</DockPanel>
<Image Width="80" Url="http://openweathermap.org/img/w/{weatherData.weather[0].icon}.png"/>
<StackPanel Orientation="Horizontal" Alignment="Center">
<Text Value="{weatherData.main.temp} °C" FontSize="28"/>
<StackPanel Padding="20,0,0,0">
<Text Value="{weatherData.weather[0].description}" FontSize="12" Alignment="Center"/>
<Text Value="{currentDate}" FontSize="13" Alignment="Center"/>
</StackPanel>
</StackPanel>
<Grid RowCount="1" ColumnCount="2" Margin="0,30,0,0">
<Box>
<SubTitle>Weather</SubTitle>
<Text Value="Pressure: {weatherData.main.pressure}"/>
<Text Value="Humidity: {weatherData.main.humidity}"/>
</Box>
<Box>
<SubTitle>Wind</SubTitle>
<Text Value="Speed: {weatherData.wind.speed}"/>
<Text Value="Degree: {weatherData.wind.deg}"/>
</Box>
</Grid>
<WhileNotEmpty Items="{errorMessage}">
<BoxError>
<Each Items="{errorMessage}">
<Text Value="{}" TextWrapping="Wrap"/>
</Each>
</BoxError>
</WhileNotEmpty>
</StackPanel>
<Grid Columns="1*, auto, 1*" Color="{Resource MainColor}">
<TabButton ux:Name="buttonHourly" label="Hourly Forecast">
<Clicked>
<Set tabs.Active="tabHourly" />
</Clicked>
</TabButton>
<VerticalDivider Color="{Resource MainDarkerColor}"/>
<TabButton ux:Name="buttonDaily" label="Daily Forecast">
<Clicked>
<Set tabs.Active="tabDaily" />
</Clicked>
</TabButton>
</Grid>
<PageControl ux:Name="tabs" Interaction="None" Active="tabHourly">
<Panel ux:Name="tabHourly">
<WhileActive Threshold="0.5">
<Change buttonHourly.Color="{Resource MainDarkerColor}" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn"/>
</WhileActive>
<WhileInactive Threshold="0.5">
<Change buttonDaily.Color="{Resource MainColor}" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn"/>
</WhileInactive>
<ScrollView AllowedScrollDirections="Horizontal" Padding="20">
<StackPanel Orientation="Horizontal">
<Each Items="{forecastHourly}">
<WeatherInfo />
<VerticalDivider Margin="10,0,20,0"/>
</Each>
</StackPanel>
</ScrollView>
</Panel>
<Panel ux:Name="tabDaily">
<WhileActive Threshold="0.5">
<Change buttonDaily.Color="{Resource MainDarkerColor}" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn"/>
</WhileActive>
<WhileInactive Threshold="0.5">
<Change buttonHourly.Color="{Resource MainColor}" Duration="0.15" Easing="CubicOut" EasingBack="CubicIn"/>
</WhileInactive>
<ScrollView AllowedScrollDirections="Horizontal" Padding="20">
<StackPanel Orientation="Horizontal">
<Each Items="{forecastDaily}">
<WeatherInfo />
<VerticalDivider Margin="10,0,20,0"/>
</Each>
</StackPanel>
</ScrollView>
</Panel>
</PageControl>
</StackPanel>
</ScrollView>
</PageWithTitle>
</ClientPanel>
</App>