travis: Test dist path [WIP].

Rewrote styling for the webview so that it takes the whole window
when the app loads up.

Fixes #249.

.travis.yml

@@ -2,16 +2,31 @@ sudo: required
 dist: trusty
 
 os:
-- osx
+  - osx
-- linux
+  - linux
+
+osx_image: xcode9.0
 
 addons:
   apt:
     packages:
-    - build-essential
+      - build-essential
-    - libxext-dev
+      - libxext-dev
-    - libxtst-dev
+      - libxtst-dev
-    - libxkbfile-dev
+      - libxkbfile-dev
+  artifacts:
+    paths:
+      - $(ls ./dist/*.AppImage | tr "\n" ":")
+      - $(ls ./dist/*.deb | tr "\n" ":")
+      - $(ls ./dist/*.dmg | tr "\n" ":")
+      - $(ls ./dist/*.zip | tr "\n" ":")
+      - $(ls ./dist/*.dmg.blockmap | tr "\n" ":")
+      - $(ls ./dist/github/*.json | tr "\n" ":")
+      - $(ls ./dist/github/*.yml | tr "\n" ":")
+      - $(ls ./dist/*.yml | tr "\n" ":")
+      - $(ls ./dist/mac/*.yml | tr "\n" ":")
+      - $(ls ./dist/linux/*.yml | tr "\n" ":")
+    debug: true
 
 language: node_js
 node_js:
@@ -24,11 +39,20 @@ before_install:
 
 cache:
   directories:
-  - node_modules
+    - node_modules
-  - app/node_modules
+    - app/node_modules
+    - ~/.cache
 
 script:
-- npm run travis
+  - npm run travis
+  - chmod +x ./scripts/install-release-dependencies.sh
+  - ./scripts/install-release-dependencies.sh
+  - npm run dist
+  - node ./scripts/prepare-artifacts.js
+  # log out /dist files might be useful to know
+  # what files are uploaded
+  - ls dist
+
 notifications:
   webhooks:
     urls:

app/package.json

@@ -30,7 +30,7 @@
     "electron-is-dev": "0.3.0",
     "electron-log": "2.2.7",
     "electron-spellchecker": "1.1.2",
-    "electron-updater": "2.18.2",
+    "electron-updater": "2.21.0",
     "electron-window-state": "4.1.1",
     "is-online": "7.0.0",
     "node-json-db": "0.7.3",

app/renderer/css/main.css

@@ -28,7 +28,7 @@ body {
     -webkit-app-region: drag;
     overflow: hidden;
     transition: all 0.5s ease;
-    z-index: 1;
+    z-index: 2;
 }
 
 .toggle-sidebar div {
@@ -249,28 +249,34 @@ body {
 }
 
 webview {
-    opacity: 1;
     /* transition: opacity 0.3s ease-in; */
     flex-grow: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 webview.onload {
     transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
 }
 
-webview.disabled {
+webview.active {
-    flex: 0 1;
+    opacity: 1;
-    height: 0;
+    z-index: 1;
-    width: 0;
+    visibility: visible;
-    opacity: 0;
-    transition: opacity 0.3s ease-out;
 }
 
-webview:focus {
+webview.disabled {
+    opacity: 0;
+}
+
+webview.focus {
     outline: 0px solid transparent;
 }
 
-
 /* Tooltip styling */
 
 #back-tooltip,

app/renderer/css/preference.css

@@ -95,11 +95,13 @@ td:nth-child(odd) {
 }
 
 #sidebar {
-    width: 80px;
+    width: 150px;
-    padding: 30px;
+    min-width: 100px;
+    padding: 30px 30px 30px 35px;
     display: flex;
     flex-direction: column;
     font-size: 16px;
+    background: #f2f2f2;
 }
 
 #nav-container {
@@ -270,8 +272,8 @@ img.server-info-icon {
 }
 
 .settings-card:hover {
-    /* border-left: 8px solid #bcbcbc; */
+    border-left: 8px solid #bcbcbc;
-    /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0px rgba(0, 0, 0, 0.12); */
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0px rgba(0, 0, 0, 0.12);
 }
 
 .hidden {

app/renderer/js/components/webview.js

@@ -130,6 +130,7 @@ class WebView extends BaseComponent {
 		}
 
 		this.$el.classList.remove('disabled');
+		this.$el.classList.add('active');
 		setTimeout(() => {
 			if (this.props.role === 'server') {
 				this.$el.classList.remove('onload');
@@ -168,6 +169,7 @@ class WebView extends BaseComponent {
 
 	hide() {
 		this.$el.classList.add('disabled');
+		this.$el.classList.remove('active');
 	}
 
 	load() {

app/renderer/js/pages/preference/added-server-section.js

@@ -1,61 +0,0 @@
-'use strict';
-
-const BaseSection = require(__dirname + '/base-section.js');
-const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
-const ServerInfoForm = require(__dirname + '/server-info-form.js');
-const CreateOrganziation = require(__dirname + '/create-new-org.js');
-
-class AddedSection extends BaseSection {
-	constructor(props) {
-		super();
-		this.props = props;
-	}
-
-	template() {
-		return `
-			<div class="settings-pane" id="server-settings-pane">
-				<div id="new-server-container"></div>
-				<div class="title" id="existing-servers"></div>
-				<div id="server-info-container"></div>
-				<div id="create-organization-container"></div>
-			</div>
-		`;
-	}
-
-	init() {
-		this.initServers();
-	}
-
-	initServers() {
-		this.props.$root.innerHTML = '';
-
-		const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.template();
-		this.$serverInfoContainer = document.getElementById('server-info-container');
-		this.$existingServers = document.getElementById('existing-servers');
-
-		this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
-		// Show Existing servers if servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Connected organizations';
-
-		this.$createOrganizationContainer = document.getElementById('create-organization-container');
-		this.initCreateNewOrganization();
-
-		for (let i = 0; i < servers.length; i++) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server: servers[i],
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
-	}
-
-	initCreateNewOrganization() {
-		new CreateOrganziation({
-			$root: this.$createOrganizationContainer
-		}).init();
-	}
-}
-
-module.exports = AddedSection;

app/renderer/js/pages/preference/nav.js

@@ -8,7 +8,7 @@ class PreferenceNav extends BaseComponent {
 
 		this.props = props;
 
-		this.navItems = ['General', 'Network', 'Servers', 'Added-servers', 'Shortcuts'];
+		this.navItems = ['General', 'Network', 'Servers', 'Shortcuts'];
 
 		this.init();
 	}

app/renderer/js/pages/preference/new-server-form.js

@@ -13,25 +13,17 @@ class NewServerForm extends BaseComponent {
 		return `
 			<div class="settings-card">
 				<div class="server-info-right">
-					<div class="title">Organization URL</div>
+					<div class="title">URL of Zulip organization</div>
 					<div class="server-info-row">
-						<input class="setting-input-value" autofocus placeholder="example.zulipchat.com or chat.example.com"/>
+						<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or chat.your-organization.com"/>
 					</div>
 					<div class="server-info-row">
 						<div class="action blue server-save-action">
-							<span>Next</span>
+							<i class="material-icons">add_box</i>
+							<span>Add</span>
 						</div>
 					</div>
 				</div>
-				<div class="divider">
-				<hr class="left"/>OR<hr class="right" />
-				</div>
-
-				<div class="server-info-row">
-						<div class="action blue server-create-action">
-							<span>Create a new organization</span>
-						</div>
-					</div>
 			</div>
 		`;
 	}
@@ -51,13 +43,13 @@ class NewServerForm extends BaseComponent {
 	}
 
 	submitFormHandler() {
-		this.$saveServerButton.children[0].innerHTML = 'Adding...';
+		this.$saveServerButton.children[1].innerHTML = 'Adding...';
 		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
 			DomainUtil.addDomain(serverConf).then(() => {
 				this.props.onChange(this.props.index);
 			});
 		}, errorMessage => {
-			this.$saveServerButton.children[0].innerHTML = 'Next';
+			this.$saveServerButton.children[1].innerHTML = 'Add';
 			alert(errorMessage);
 		});
 	}

app/renderer/js/pages/preference/preference.js

@@ -8,7 +8,6 @@ const ServersSection = require(__dirname + '/js/pages/preference/servers-section
 const GeneralSection = require(__dirname + '/js/pages/preference/general-section.js');
 const NetworkSection = require(__dirname + '/js/pages/preference/network-section.js');
 const ShortcutsSection = require(__dirname + '/js/pages/preference/shortcuts-section.js');
-const AddedSection = require(__dirname + '/js/pages/preference/added-server-section.js');
 
 class PreferenceView extends BaseComponent {
 	constructor() {
@@ -58,12 +57,6 @@ class PreferenceView extends BaseComponent {
 				});
 				break;
 			}
-			case 'Added-servers': {
-				this.section = new AddedSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
 			case 'Shortcuts': {
 				this.section = new ShortcutsSection({
 					$root: this.$settingsContainer

app/renderer/js/pages/preference/servers-section.js

@@ -1,7 +1,10 @@
 'use strict';
 
 const BaseSection = require(__dirname + '/base-section.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+const ServerInfoForm = require(__dirname + '/server-info-form.js');
 const NewServerForm = require(__dirname + '/new-server-form.js');
+const CreateOrganziation = require(__dirname + '/create-new-org.js');
 
 class ServersSection extends BaseSection {
 	constructor(props) {
@@ -11,15 +14,12 @@ class ServersSection extends BaseSection {
 
 	template() {
 		return `
-		<div id="myModal" class="modal">
-		<div class="modal-content">
-
 			<div class="settings-pane" id="server-settings-pane">
-				<div class="page-title">Add a Zulip organization</div>
+				<div class="page-title">Register or login to a Zulip organization to get started</div>
 				<div id="new-server-container"></div>
-			</div>
+				<div class="title" id="existing-servers"></div>
-
+				<div id="server-info-container"></div>
-			</div>
+				<div id="create-organization-container"></div>
 			</div>
 		`;
 	}
@@ -31,17 +31,35 @@ class ServersSection extends BaseSection {
 	initServers() {
 		this.props.$root.innerHTML = '';
 
+		const servers = DomainUtil.getDomains();
 		this.props.$root.innerHTML = this.template();
 		this.$serverInfoContainer = document.getElementById('server-info-container');
 		this.$existingServers = document.getElementById('existing-servers');
 		this.$newServerContainer = document.getElementById('new-server-container');
 		this.$newServerButton = document.getElementById('new-server-action');
 
+		this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
+		// Show Existing servers if servers are there otherwise hide it
+		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Connected organizations';
 		this.initNewServerForm();
 
 		this.$createOrganizationContainer = document.getElementById('create-organization-container');
+		this.initCreateNewOrganization();
 
+		for (let i = 0; i < servers.length; i++) {
+			new ServerInfoForm({
+				$root: this.$serverInfoContainer,
+				server: servers[i],
+				index: i,
+				onChange: this.reloadApp
+			}).init();
+		}
+	}
 
+	initCreateNewOrganization() {
+		new CreateOrganziation({
+			$root: this.$createOrganizationContainer
+		}).init();
 	}
 
 	initNewServerForm() {

app/renderer/preference.html

@@ -1,163 +1,16 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
-
+  <head>
-<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width">
-  <meta name="viewport" content="width=device-width">
+    <title>Zulip - Settings</title>
-  <title>Zulip - Settings</title>
+    <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
-  <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
+  </head>
-  <style>
+  <body>
-    /* The Modal (background) */
+    <div id="content">
-
+      <div id="sidebar"></div>
-    .modal {
+      <div id="settings-container"></div>
-      display: block;
+    </div>
-      /* Hidden by default */
+  </body>
-      position: fixed;
+  <script src="js/pages/preference/preference.js"></script>
-      /* Stay in place */
-      z-index: 1;
-      /* Sit on top */
-      padding-top: 100px;
-      /* Location of the box */
-      left: 0;
-      top: 0;
-      width: 100%;
-      /* Full width */
-      height: 100%;
-      /* Full height */
-      overflow: auto;
-      /* Enable scroll if needed */
-      /* background-color: rgb(0, 0, 0); */
-      /* Fallback color */
-      /* background-color: rgba(0, 0, 0, 0.4); */
-      background: rgba(61, 64, 67, 15);
-      /* Black w/ opacity */
-    }
-
-    /* Modal Content */
-
-    .modal-content {
-      background-color: #fefefe;
-      margin: auto;
-      padding: 57px;
-      border: #dae1e3 1px solid;
-      width: 600px;
-      /* margin-bottom: 113px; */
-      height: 344px;
-      border-radius: 4px;
-    }
-
-    /* The Close Button */
-
-    .close {
-      color: #aaaaaa;
-      float: right;
-      font-size: 28px;
-      font-weight: bold;
-    }
-
-    .close:hover,
-    .close:focus {
-      color: #000;
-      text-decoration: none;
-      cursor: pointer;
-    }
-
-    #server-settings-pane {
-      margin-left: 18%;
-    }
-
-    .settings-card.server-info-right:hover {
-      box-shadow: none !important;
-      border: none !important;
-    }
-
-    .server-save-action {
-      padding: 11px;
-      padding-left: 20px;
-      width: 292px;
-      border-radius: 4px;
-      margin-top: 16px;
-
-    }
-
-    .divider {
-      /* width: 250px;
-      text-align: center;
-      margin-left: 39px;
-      margin-top: 48px; */
-
-      width: 335px;
-      text-align: center;
-      margin-left: 0px;
-      margin-top: 48px;
-      color: #7d878a;
-
-    }
-
-    .divider hr {
-      margin-left: auto;
-      margin-right: auto;
-      width: 42%;
-
-    }
-
-    .left {
-      float: left;
-    }
-
-    .right {
-      float: right;
-    }
-
-    .server-create-action {
-      width: 314px;
-      margin-top: 40px;
-      padding: 11px;
-      border-radius: 4px;
-
-    }
-
-    .server-create-action span {
-      margin-left: 60px;
-      font-size: 15px;
-    }
-
-    .server-save-action span {
-      margin-left: 130px;
-    }
-
-    .server-save-action {
-      width: 306px;
-    }
-
-    .server-info-row {
-      display: block;
-    }
-
-    .setting-input-value {
-      width: 319px;
-    }
-
-    .page-title {
-      color: #222c31;
-      margin-left: 65px;
-      font-size: 22px;
-      font-weight: 100;
-      margin-bottom: 20px;
-      padding: 0;
-    }
-    .title {
-      color: #7d878a;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="content">
-    <div id="sidebar"></div>
-    <div id="settings-container"></div>
-  </div>
-</body>
-<script src="js/pages/preference/preference.js"></script>
-
 </html>

package.json

@@ -114,7 +114,7 @@
     "cp-file": "^5.0.0",
     "devtron": "1.4.0",
     "electron": "1.8.2",
-    "electron-builder": "19.53.6",
+    "electron-builder": "20.4.1",
     "electron-connect": "0.6.2",
     "electron-debug": "1.4.0",
     "google-translate-api": "2.3.0",
@@ -164,7 +164,8 @@
     ],
     "ignore": [
       "tests/*.js",
-      "tools/locale-helper/*.js"
+      "tools/locale-helper/*.js",
+      "scripts/*.js"
     ],
     "envs": [
       "node",

scripts/install-release-dependencies.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+set -e
+if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then
+  sudo apt-get install --no-install-recommends -y icnsutils
+
+  # to build 32 bit from a machine with 64 bit
+  sudo apt-get install --no-install-recommends -y gcc-multilib g++-multilib
+fi

scripts/prepare-artifacts.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+if (!process.env.TRAVIS_OS_NAME === 'linux') {
+  process.exit(0);
+}
+
+const fs = require('fs');
+const path = require('path');
+
+// go to dist directory
+process.chdir(path.resolve(__dirname, '../dist'));
+
+const extensions = /\.deb|\.AppImage|\.zip/;
+const files = fs.readdirSync(process.cwd()).filter(file => file.includes);
+
+function changeFileName(file) {
+  file = file.replace(/^z/, 'Z');
+  file = file.replace(/_{2}/, '-');
+  return file;
+}
+
+// Change file name to what we want
+// eg zulip_1.8.2_amd64.deb -> Zulip-1.8.2-amd64.deb
+// and change file name
+files.map(file => {
+  const newFileName = changeFileName(file);
+  fs.renameSync(file, newFileName);
+});