Merge branch 'os1-rc' into support-line-breaks

pkg/interface/chat/src/js/components/new.js

@@ -150,7 +150,7 @@ export class NewScreen extends Component {
       // we make a path of the form /~zod/cool-group
       // if not, we make a path of the form /~/~zod/free-chat
       let chatPath = `/~${window.ship}${station}`;
-      if (!state.createGroup || state.groups.length === 0) {
+      if (!state.createGroup && state.groups.length === 0) {
         chatPath = `/~${chatPath}`;
       }
       props.api.chatView.create(

pkg/interface/weather/package-lock.json

@@ -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
         }
       }
     },

pkg/interface/weather/tile/tile.js

@@ -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 {
           &lt;&#45;
         </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();