mirror of
https://github.com/urbit/shrub.git
synced 2024-12-19 00:13:12 +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
41
pkg/interface/weather/package-lock.json
generated
41
pkg/interface/weather/package-lock.json
generated
@ -2066,8 +2066,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -2088,14 +2087,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -2110,20 +2107,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -2240,8 +2234,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -2253,7 +2246,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -2268,7 +2260,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -2276,14 +2267,12 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -2302,7 +2291,6 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -2383,8 +2371,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -2396,7 +2383,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -2482,8 +2468,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -2519,7 +2504,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -2539,7 +2523,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -2583,14 +2566,12 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -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