Re-style server settings UI (Jigsaw-Code#173)

rambleraptor · Jun 19, 2018 · e0a24b2 · e0a24b2
1 parent ab94c65
commit e0a24b2
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 55 deletions.
diff --git a/src/server_manager/model/server.ts b/src/server_manager/model/server.ts
@@ -48,6 +48,12 @@ export interface Server {
 
   // Gets the date when this server was created.
   getCreatedDate(): Date;
+
+  // Returns the server's domain name or IP address.
+  getHostname(): string;
+
+  // Returns the server's management API port.
+  getManagementPort(): number;
 }
 
 // Manual servers are servers which the user has independently setup to run

diff --git a/src/server_manager/ui_components/outline-iconset.html b/src/server_manager/ui_components/outline-iconset.html
@@ -0,0 +1,26 @@
+<!--
+  Copyright 2018 The Outline Authors
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="outline-iconset" size="24">
+  <svg><defs>
+    <g id="outline">
+      <path d="M10,18 C14.418278,18 18,14.418278 18,10 C18,5.581722 14.418278,2 10,2 C5.581722,2 2,5.581722 2,10 C2,14.418278 5.581722,18 10,18 Z M10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 Z" id="Oval-2-Copy-75"></path>
+      <path d="M10,18 C12.7614237,18 15,15.7614237 15,13 C15,10.2385763 12.7614237,8 10,8 C7.23857625,8 5,10.2385763 5,13 C5,15.7614237 7.23857625,18 10,18 Z M10,20 C6.13400675,20 3,16.8659932 3,13 C3,9.13400675 6.13400675,6 10,6 C13.8659932,6 17,9.13400675 17,13 C17,16.8659932 13.8659932,20 10,20 Z" id="Oval-2-Copy-76"></path>
+      <path d="M10,18 C11.1045695,18 12,17.1045695 12,16 C12,14.8954305 11.1045695,14 10,14 C8.8954305,14 8,14.8954305 8,16 C8,17.1045695 8.8954305,18 10,18 Z M10,20 C7.790861,20 6,18.209139 6,16 C6,13.790861 7.790861,12 10,12 C12.209139,12 14,13.790861 14,16 C14,18.209139 12.209139,20 10,20 Z" id="Oval-2-Copy-77"></path>
+    </g>
+  </defs></svg>
+</iron-iconset-svg>
diff --git a/src/server_manager/ui_components/outline-server-settings.html b/src/server_manager/ui_components/outline-server-settings.html
@@ -19,6 +19,7 @@
 <link rel='import' href='../bower_components/paper-toggle-button/paper-toggle-button.html'>
 
 <link rel='import' href='./cloud-install-styles.html'>
+<link rel='import' href='./outline-iconset.html'>
 
 <dom-module id='outline-server-settings'>
   <template>
@@ -32,56 +33,49 @@
         z-index: 101;  /* must be higher than the outline-help-bubble */
         background: white;
       }
-      app-toolbar h2 {
-        margin-left: 30px;
+      app-toolbar iron-icon {
+        margin-right: 24px;
       }
       .content {
         flex-grow: 1;
       }
       .setting {
-        padding: 20px;
+        padding: 24px;
         display: flex;
         align-items: flex-start;
       }
       .setting:not(:first-child) {
         border-top: 1px solid rgba(0, 0, 0, 0.08);
       }
       .setting > iron-icon {
-        margin-right: 20px;
+        margin-right: 24px;
         width: 40px;
+        color: #000;
+        opacity: 0.87;
       }
       .setting > div {
         width: 100%;
       }
       .setting h3 {
-        font-size: 16px;
-        margin: 0;
+        margin: 0 0 16px 0;
         padding: 0;
+        color: #000;
+        opacity: 0.87;
+        font-size: 18px;
+        font-weight: 500;
       }
       .setting p {
-        margin-bottom: 0;
+        margin-bottom: 12px;
       }
       #metricsHeader {
         display: flex;
         justify-content: space-between;
+        align-items: flex-start;
       }
-      #metricsStatus {
+      .detail {
         margin-top: 0px;
         font-size: 12px;
       }
-      .footer {
-        height: 65px;
-        border-top: 1px solid rgba(0, 0, 0, 0.08);
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-      }
-      .footer paper-button {
-        width: 75px;
-      }
-      .footer .saveButton {
-        color: var(--primary-green);
-      }
       .clickable {
         cursor: pointer;
       }
@@ -93,19 +87,48 @@
       paper-input {
         /* Removes extra padding added by children of paper-input */
         margin-top: -8px;
+        --paper-input-container-label-focus: {
+          color: var(--primary-green);
+        };
+        --paper-input-container-underline-focus: {
+          border-color: var(--primary-green);
+        };
+        --paper-input-container-label: {
+          font-size: 14px;
+          line-height: 22px;
+        };
+      }
+      paper-input[disabled] {
+        --paper-input-container-underline: {
+          display: none;
+        };
+        --paper-input-container-underline-focus: {
+          display: none;
+        };
+        --paper-input-container-underline-disabled: {
+          display: none;
+        };
+        --paper-input-container-disabled: {
+          opacity: 1;
+        }
       }
     </style>
     <div class='fullScreenOverlay' hidden$='[[!visible]]'>
       <app-toolbar>
-        <h2>Server Settings</h2>
+        <paper-icon-button icon="arrow-back" on-tap="save"></paper-icon-button>
+        <h2>Server Details</h2>
       </app-toolbar>
       <div class='content'>
-        <!-- Rename controls -->
         <div class='setting'>
-          <iron-icon icon="create"></iron-icon>
+          <iron-icon icon="outline-iconset:outline"></iron-icon>
           <div>
-            <paper-input value='{{name}}' label='name' always-float-label maxlength='100'></paper-input>
-            <p>Set a new name for your server. Note that this will not be reflected on the devices of the users that you invited to connect to it.</p>
+            <h3>Information</h3>
+            <paper-input value='{{name}}' label='Name' always-float-label maxlength='100'></paper-input>
+            <p class='detail'>Set a new name for your server. Note that this will not be reflected on the devices of the users that you invited to connect to it.</p>
+            <paper-input disabled value='[[serverHostname]]' label='Hostname' hidden$='[[!serverHostname]]' always-float-label maxlength='100'></paper-input>
+            <paper-input disabled value='[[serverManagementPort]]' label='Management Port' hidden$='[[!serverManagementPort]]' always-float-label maxlength='100'></paper-input>
+            <paper-input disabled value='[[serverCreationDate]]' label='Created' hidden$='[[!serverCreationDate]]' always-float-label maxlength='100'></paper-input>
+            <paper-input disabled value='[[serverId]]' label='Server ID' hidden$='[[!serverId]]' always-float-label maxlength='100'></paper-input>
           </div>
         </div>
         <!-- Metrics controls -->
@@ -116,29 +139,10 @@ <h2>Server Settings</h2>
               <h3>Share anonymous metrics</h3>
               <paper-toggle-button checked='{{metricsEnabled}}'></paper-toggle-button>
             </div>
-            <p id='metricsStatus'>
-              <span hidden$='[[metricsEnabled]]'>Anonymous metrics sharing is disabled</span>
-              <span hidden$='[[!metricsEnabled]]'>Anonymous metrics sharing is enabled</span>
-            </p>
             <p>Share anonymized metrics to help improve the reliability and performance of Outline, for you and for those you share your server with. <a class="learnMoreLink" href="https://s3.amazonaws.com/outline-vpn/index.html#/en/support/dataCollection">Learn more</a>.</p>
-            <p hidden$='[[!metricsEnabled]]'>Server ID: [[serverId]]</p>
-          </div>
-        </div>
-        <!-- Delete/forget. -->
-        <div class='setting'>
-          <iron-icon icon="delete"></iron-icon>
-          <div hidden$='[[!deleteEnabled]]'>
-            <h3 on-tap='delete' class='clickable'>Destroy server</h3>
-          </div>
-          <div hidden$='[[!forgetEnabled]]'>
-            <h3 on-tap='forget' class='clickable'>Forget server</h3>
           </div>
         </div>
       </div>
-      <div class='footer'>
-        <paper-button on-tap="close">Cancel</paper-button>
-        <paper-button on-tap="save" class='saveButton'>Save</paper-button>
-      </div>
     </div>
   </template>
   <script>
@@ -150,7 +154,11 @@ <h3 on-tap='forget' class='clickable'>Forget server</h3>
         name: String,
         metricsEnabled: Boolean,
         visible: {type: Boolean, value: false},
-        serverId: String
+        // Initialize to null so we can use the hidden attribute, which does not work well with undefined values.
+        serverId: {type: String, value: null},
+        serverHostname: {type: String, value: null},
+        serverManagementPort: {type: Number, value: null},
+        serverCreationDate: {type: String, value: null}
       },
       open: function(name, metricsEnabled) {
         this.visible = true;
@@ -176,12 +184,6 @@ <h3 on-tap='forget' class='clickable'>Forget server</h3>
           this.fire(metricsSignal);
         }
         this.close();
-      },
-      delete: function() {
-        this.fire('DeleteServerRequested');
-      },
-      forget: function() {
-        this.fire('ForgetServerRequested');
       }
     });
   </script>

diff --git a/src/server_manager/ui_components/outline-server-view.html b/src/server_manager/ui_components/outline-server-view.html
@@ -25,6 +25,7 @@
 <link rel='import' href='../bower_components/paper-progress/paper-progress.html'>
 
 <link rel='import' href='./cloud-install-styles.html'>
+<link rel='import' href='./outline-iconset.html'>
 <link rel='import' href='./outline-help-bubble.html'>
 <link rel='import' href='./outline-metrics-option-dialog.html'>
 <link rel='import' href='./outline-server-settings.html'>
@@ -36,8 +37,12 @@
   <template>
     <style include='cloud-install-styles'></style>
     <style>
+      paper-item {
+        font-size: 14px;
+      }
       paper-listbox iron-icon {
         margin-right: 10px;
+        width: 18px;
       }
       .card-header {
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
@@ -274,7 +279,7 @@
           <paper-button on-tap="closeGetConnectedDialog" autofocus>Close</paper-button>
         </div>
     </paper-dialog>
-    <outline-server-settings id='serverSettings' forget-enabled='[[forgetEnabled]]' delete-enabled='[[deleteEnabled]]' server-id='[[serverId]]'></outline-server-settings>
+    <outline-server-settings id='serverSettings' server-id='[[serverId]]' server-hostname='[[serverHostname]]' server-management-port='[[serverManagementPort]]' server-creation-date='[[serverCreationDate]]'></outline-server-settings>
 
     <div class='card-header'>
       <div class='headerContents'>
@@ -287,7 +292,20 @@ <h3>{{serverName}}</h3>
             <span hidden$='{{!monthlyCost}}'>, ${{monthlyCost}} US/Mo</span>
           </p>
         </div>
-        <paper-icon-button icon='settings' on-tap='showServerSettings'></paper-icon-button>
+        <paper-menu-button horizontal-align='right' class='overflowMenu' close-on-activate no-animations dynamic-align>
+          <paper-icon-button icon='more-vert' slot='dropdown-trigger'></paper-icon-button>
+          <paper-listbox slot='dropdown-content'>
+            <paper-item on-tap='showServerSettings'>
+              <iron-icon icon="outline-iconset:outline"></iron-icon>Server details
+            </paper-item>
+            <paper-item hidden$='[[!deleteEnabled]]' on-tap='deleteServer'>
+              <iron-icon icon='icons:remove-circle-outline'></iron-icon>Delete server
+            </paper-item>
+            <paper-item hidden$='[[!forgetEnabled]]' on-tap='forgetServer'>
+              <iron-icon icon='icons:remove-circle-outline'></iron-icon>Forget server
+            </paper-item>
+          </paper-listbox>
+        </paper-menu-button>
       </div>
       <!-- TODO: hide or modify progress bars for manual servers -->
       <paper-progress value='[[_getTotalTransferredPercent(transferStats)]]'></paper-progress>
@@ -367,6 +385,9 @@ <h3>Create keys, share access</h3>
       },
       properties: {
         serverName: String,
+        serverHostname: String,
+        serverManagementPort: Number,
+        serverCreationDate: String,
         // myConnection has the same fields as each item in accessKeyRows.  It may
         // be unset in some old versions of Outline that allowed deleting this
         // row.
@@ -579,6 +600,12 @@ <h3>Create keys, share access</h3>
         newIframe.src = oldIframe.src;
         newIframe.className = oldIframe.className;
         dialog.insertBefore(newIframe, dialog.children[0]);
+      },
+      deleteServer: function() {
+        this.fire('DeleteServerRequested');
+      },
+      forgetServer: function() {
+        this.fire('ForgetServerRequested');
       }
     });
   </script>

diff --git a/src/server_manager/web_app/app.spec.ts b/src/server_manager/web_app/app.spec.ts
@@ -229,6 +229,12 @@ class FakeServer implements server.Server {
   removeAccessKey(accessKeyId: server.AccessKeyId) {
     return Promise.reject(new Error('FakeServer.removeAccessKey not implemented'));
   }
+  getHostname() {
+    return 'fake-server';
+  }
+  getManagementPort() {
+    return 8080;
+  }
 }
 
 class FakeManualServer extends FakeServer implements server.ManualServer {

diff --git a/src/server_manager/web_app/app.ts b/src/server_manager/web_app/app.ts
@@ -481,6 +481,10 @@ export class App {
     // Show view and initialize fields from selectedServer.
     const view = this.appRoot.getAndShowServerView();
     view.serverName = selectedServer.getName();
+    view.serverHostname = selectedServer.getHostname();
+    view.serverManagementPort = selectedServer.getManagementPort();
+    view.serverCreationDate = selectedServer.getCreatedDate().toLocaleString(
+        'en-US', {year: 'numeric', month: 'long', day: 'numeric'});
 
     if (isManagedServer(selectedServer)) {
       const host = selectedServer.getHost();
@@ -689,7 +693,7 @@ export class App {
   private forgetSelectedServer() {
     const serverToForget = this.selectedServer;
     if (!isManualServer(serverToForget)) {
-      const msg = 'cannot delete non-ManualServer';
+      const msg = 'cannot forget non-ManualServer';
       SentryErrorReporter.logError(msg);
       throw new Error(msg);
     }

diff --git a/src/server_manager/web_app/shadowbox_server.ts b/src/server_manager/web_app/shadowbox_server.ts
@@ -125,6 +125,22 @@ export class ShadowboxServer implements server.Server {
     return new Date(this.serverConfig.createdTimestampMs);
   }
 
+  getHostname(): string {
+    try {
+      return new URL(this.managementApiAddress).hostname;
+    } catch (e) {
+      return '';
+    }
+  }
+
+  getManagementPort(): number {
+    try {
+      return parseInt(new URL(this.managementApiAddress).port, 10);
+    } catch (e) {
+      return undefined;
+    }
+  }
+
   private getServerConfig(): Promise<ServerConfig> {
     SentryErrorReporter.logInfo('Retrieving server configuration');
     return this.apiRequest<ServerConfig>('server');