mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-09-21 15:38:59 +03:00
Merge pull request #2308 from urbit/mp/os1/weather/colors
weather: add blurred color gradient, changes based on weather
This commit is contained in:
matildepark
GitHub
commit
76576003be
File diff suppressed because one or more lines are too long
BIN
pkg/interface/weather/package-lock.json
generated
BIN
pkg/interface/weather/package-lock.json
generated
Binary file not shown.
@ -2,33 +2,17 @@ import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import moment from 'moment';
|
||||
|
||||
class IconWithData extends Component {
|
||||
render() {
|
||||
const { props } = this;
|
||||
|
||||
return (
|
||||
<div className='mt2'>
|
||||
<p className="f9 white">{props.text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class WeatherTile extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
let ship = window.ship;
|
||||
let api = window.api;
|
||||
|
||||
this.state = {
|
||||
latlng: '',
|
||||
manualEntry: false,
|
||||
error: false
|
||||
};
|
||||
let api = window.api;
|
||||
}
|
||||
|
||||
// geolocation and manual input functions
|
||||
locationSubmit() {
|
||||
navigator.geolocation.getCurrentPosition((res) => {
|
||||
let latlng = `${res.coords.latitude},${res.coords.longitude}`;
|
||||
@ -59,21 +43,85 @@ export default class WeatherTile extends Component {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// set appearance based on weather
|
||||
setColors(data) {
|
||||
let weatherStyle = {
|
||||
gradient1: "",
|
||||
gradient2: "",
|
||||
text: ""
|
||||
};
|
||||
|
||||
keyPress(e) {
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
this.manualLocationSubmit(e.target.value);
|
||||
switch (data.daily.icon) {
|
||||
case "clear-day":
|
||||
weatherStyle = {
|
||||
gradient1: "#A5CEF0", gradient2: "#FEF4E0", text: "black"
|
||||
}
|
||||
break;
|
||||
case "clear-night":
|
||||
weatherStyle = {
|
||||
gradient1: "#56668e", gradient2: "#000080", text: "white"
|
||||
}
|
||||
break;
|
||||
case "rain":
|
||||
weatherStyle = {
|
||||
gradient1: "#b1b2b3", gradient2: "#b0c7ff", text: "black"
|
||||
};
|
||||
break;
|
||||
case "snow":
|
||||
weatherStyle = {
|
||||
gradient1: "#eee", gradient2: "#f9f9f9", text: "black"
|
||||
};
|
||||
break;
|
||||
case "sleet":
|
||||
weatherStyle = {
|
||||
gradient1: "#eee", gradient2: "#f9f9f9", text: "black"
|
||||
};
|
||||
break;
|
||||
case "wind":
|
||||
weatherStyle = {
|
||||
gradient1: "#eee", gradient2: "#fff", text: "black"
|
||||
};
|
||||
break;
|
||||
case "fog":
|
||||
weatherStyle = {
|
||||
gradient1: "#eee", gradient2: "#fff", text: "black"
|
||||
};
|
||||
break;
|
||||
case "cloudy":
|
||||
weatherStyle = {
|
||||
gradient1: "#eee", gradient2: "#b1b2b3", text: "black"
|
||||
};
|
||||
break;
|
||||
case "partly-cloudy-day":
|
||||
weatherStyle = {
|
||||
gradient1: "#fcc440", gradient2: "#b1b2b3", text: "black"
|
||||
};
|
||||
break;
|
||||
case "partly-cloudy-night":
|
||||
weatherStyle = {
|
||||
gradient1: "#7f7f7f", gradient2: "#56668e", text: "white"
|
||||
};
|
||||
break;
|
||||
default:
|
||||
weatherStyle = {
|
||||
gradient1: "white", gradient2: "white", text: "black"
|
||||
};
|
||||
}
|
||||
return weatherStyle;
|
||||
}
|
||||
|
||||
renderWrapper(child) {
|
||||
// all tile views
|
||||
renderWrapper(child,
|
||||
weatherStyle = { gradient1: "white", gradient2: "white", text: "black" }
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className="pa2 relative bg-white b--black ba"
|
||||
className={"relative " + weatherStyle.text}
|
||||
style={{
|
||||
width: 126,
|
||||
height: 126,
|
||||
background: `linear-gradient(135deg, ${weatherStyle.gradient1} 0%,` +
|
||||
`${weatherStyle.gradient2} 45%, ${weatherStyle.gradient2} 65%,` +
|
||||
`${weatherStyle.gradient1} 100%)`
|
||||
}}>
|
||||
{child}
|
||||
</div>
|
||||
@ -95,7 +143,7 @@ export default class WeatherTile extends Component {
|
||||
onClick={() => this.locationSubmit()}>Detect -></a>
|
||||
}
|
||||
return this.renderWrapper(
|
||||
<div>
|
||||
<div className="pa2 w-100 h-100 bg-white black">
|
||||
<a
|
||||
className="f9 black pointer"
|
||||
onClick={() =>
|
||||
@ -104,10 +152,10 @@ export default class WeatherTile extends Component {
|
||||
<-
|
||||
</a>
|
||||
{secureCheck}
|
||||
<p className="f9 black pt2">
|
||||
<p className="f9 pt2">
|
||||
Please enter your{" "}
|
||||
<a
|
||||
className="white"
|
||||
className="black"
|
||||
href="https://latitudeandlongitude.org/"
|
||||
target="_blank">
|
||||
latitude and longitude
|
||||
@ -122,12 +170,17 @@ export default class WeatherTile extends Component {
|
||||
className="w-100 black bg-transparent bn f9"
|
||||
type="text"
|
||||
placeholder="29.558107, -95.089023"
|
||||
onKeyDown={this.keyPress.bind(this)}></input>
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
this.manualLocationSubmit(e.target.value);
|
||||
}}
|
||||
}/>
|
||||
<input
|
||||
className="bg-transparent black bn pointer f9 flex-shrink-0"
|
||||
type="submit"
|
||||
onClick={() => this.manualLocationSubmit()}
|
||||
value="->"></input>
|
||||
value="->"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,29 +189,32 @@ export default class WeatherTile extends Component {
|
||||
|
||||
renderNoData() {
|
||||
return this.renderWrapper((
|
||||
<div onClick={() => this.setState({manualEntry: !this.state.manualEntry})}>
|
||||
<p className="black f9 absolute"
|
||||
<div
|
||||
className="pa2 w-100 h-100 b--black ba bg-white black"
|
||||
onClick={() => this.setState({manualEntry: !this.state.manualEntry})}>
|
||||
<p className="f9 absolute"
|
||||
style={{left: 8, top: 8}}>
|
||||
Weather
|
||||
</p>
|
||||
<p className="absolute w-100 flex-col f9 black" style={{verticalAlign: "bottom", bottom: 8, left: 8, cursor: "pointer"}}>-> Set location</p>
|
||||
<p className="absolute w-100 flex-col f9" style={{verticalAlign: "bottom", bottom: 8, left: 8, cursor: "pointer"}}>-> Set location</p>
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
renderWithData(data) {
|
||||
renderWithData(data, weatherStyle) {
|
||||
let c = data.currently;
|
||||
let d = data.daily.data[0];
|
||||
|
||||
let da = moment.unix(d.sunsetTime).format('h:mm a') || '';
|
||||
|
||||
return this.renderWrapper(
|
||||
<div>
|
||||
<p className="black f9 absolute" style={{ left: 8, top: 8 }}>
|
||||
<div className="w-100 h-100 b--black ba"
|
||||
style={{backdropFilter: "blur(80px)"}}>
|
||||
<p className="f9 absolute" style={{ left: 8, top: 8 }}>
|
||||
Weather
|
||||
</p>
|
||||
<a
|
||||
className="black f9 absolute pointer"
|
||||
className="f9 absolute pointer"
|
||||
style={{ right: 8, top: 8 }}
|
||||
onClick={() =>
|
||||
this.setState({ manualEntry: !this.state.manualEntry })
|
||||
@ -166,12 +222,12 @@ export default class WeatherTile extends Component {
|
||||
->
|
||||
</a>
|
||||
<div className="w-100 absolute" style={{ left: 8, bottom: 8 }}>
|
||||
<p className="f9 black">{c.summary}</p>
|
||||
<p className="f9 pt1 black">{Math.round(c.temperature)}°</p>
|
||||
<p className="f9 pt1 black">Sunset at {da}</p>
|
||||
<p className="f9">{c.summary}</p>
|
||||
<p className="f9 pt1">{Math.round(c.temperature)}°</p>
|
||||
<p className="f9 pt1">Sunset at {da}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
, weatherStyle);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -182,7 +238,8 @@ export default class WeatherTile extends Component {
|
||||
}
|
||||
|
||||
if ('currently' in data && 'daily' in data) {
|
||||
return this.renderWithData(data);
|
||||
let weatherStyle = this.setColors(data);
|
||||
return this.renderWithData(data, weatherStyle);
|
||||
}
|
||||
|
||||
return this.renderNoData();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user