From 336d3131ab159f7aa2c091eaf2f0d3d0843cfcff Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Wed, 17 Oct 2018 17:47:59 +0000
Subject: [PATCH] Styling and layout

---
 src/assets/stylesheets/entry.scss  | 20 +++++++++++++++++++
 src/assets/stylesheets/shared.scss |  9 ++++-----
 src/assets/translations.data.json  |  2 +-
 src/react-components/ui-root.js    | 32 ++++++++++++++++++------------
 src/subscriptions.js               |  6 +++---
 src/utils/hub-channel.js           |  8 ++++++++
 6 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index f04247410..d94b199b0 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -184,4 +184,24 @@
     cursor: pointer;
     color: $dark-grey-text;
   }
+
+  :local(.subscribe) {
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $darker-grey;
+
+    input {
+      @extend %checkbox;
+    }
+
+    input:checked {
+      @extend %checkbox-checked;
+    }
+
+    label {
+      margin-right: 8px;
+    }
+  }
 }
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index 79a12fc6f..bf9830857 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -153,16 +153,15 @@ $hud-panel-background: rgba(79, 79, 79, 0.45);
   -webkit-appearance: none;
   width: 2em;
   height: 2em;
-  border: 1px solid #e2e2e2;
-  border-radius: 9px;
+  border: 3px solid #aaa;
+  border-radius: 6px;
   vertical-align: sub;
   margin: 0 0.6em
 }
 
 %checkbox-checked {
-  border: 9px double #aaa;
-  outline: 9px solid #aaa;
-  outline-offset: -18px;
+  outline: 9px solid $action-color;
+  outline-offset: -15px;
 }
 
 %background-agnostic {
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index ba7a489df..60cd1e086 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -32,7 +32,7 @@
     "entry.enable-screen-sharing": "Share my desktop",
     "entry.return-to-vr": "Enter in VR",
     "entry.lobby": "Lobby",
-    "entry.notify_me": "Notify me when others join",
+    "entry.notify_me": "Notify me when others are here",
     "profile.save": "Accept",
     "profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
     "profile.header": "Name & Avatar",
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 51542fdd8..0c85be53d 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -687,6 +687,8 @@ class UIRoot extends Component {
   };
 
   renderEntryStartPanel = () => {
+    const hasPush = "PushManager" in window;
+
     return (
       <div className={entryStyles.entryPanel}>
         <div className={entryStyles.name}>{this.props.hubName}</div>
@@ -711,19 +713,23 @@ class UIRoot extends Component {
           </form>
         </div>
 
-        <div>
-          <input
-            id="subscribe"
-            type="checkbox"
-            onChange={this.onSubscribeChanged}
-            checked={
-              typeof this.state.isSubscribed === "undefined" ? this.props.initialIsSubscribed : this.state.isSubscribed
-            }
-          />
-          <label htmlFor="subscribe">
-            <FormattedMessage id="entry.notify_me" />
-          </label>
-        </div>
+        {hasPush && (
+          <div className={entryStyles.subscribe}>
+            <input
+              id="subscribe"
+              type="checkbox"
+              onChange={this.onSubscribeChanged}
+              checked={
+                typeof this.state.isSubscribed === "undefined"
+                  ? this.props.initialIsSubscribed
+                  : this.state.isSubscribed
+              }
+            />
+            <label htmlFor="subscribe">
+              <FormattedMessage id="entry.notify_me" />
+            </label>
+          </div>
+        )}
 
         <div className={entryStyles.buttonContainer}>
           <button
diff --git a/src/subscriptions.js b/src/subscriptions.js
index 282d7b836..b1f13791d 100644
--- a/src/subscriptions.js
+++ b/src/subscriptions.js
@@ -55,12 +55,12 @@ export default class Subscriptions {
 
     if (this.isSubscribed()) {
       const endpoint = subscriptions[this.hubId].endpoint;
-      console.log("De-register push subscription with reticulum for endpoint " + endpoint);
+      this.hubChannel.unsubscribe(endpoint);
 
       delete subscriptions[this.hubId];
 
       if (Object.keys(subscriptions).length === 0) {
-        console.log("Remove push subscription from browser");
+        this.registration.pushManager.unregister(endpoint);
       }
     } else {
       let subscription = await this.registration.pushManager.getSubscription();
@@ -75,7 +75,7 @@ export default class Subscriptions {
       }
 
       subscriptions[this.hubId] = { endpoint: subscription.endpoint };
-      console.log("Register push subscription with reticulum");
+      this.hubChannel.subscribe(subscription);
     }
 
     delete this._isSubscribed;
diff --git a/src/utils/hub-channel.js b/src/utils/hub-channel.js
index 328a76a36..9e98d8e09 100644
--- a/src/utils/hub-channel.js
+++ b/src/utils/hub-channel.js
@@ -91,6 +91,14 @@ export default class HubChannel {
     this.channel.push("events:profile_updated", { profile: this.store.state.profile });
   };
 
+  subscribe = subscription => {
+    this.channel.push("subscribe", { subscription });
+  };
+
+  unsubscribe = endpoint => {
+    this.channel.push("unsubscribe", { endpoint });
+  };
+
   sendMessage = body => {
     if (body === "") return;
     this.channel.push("message", { body });
-- 
GitLab