SkyzohKey/Tox Client | Show object: a89019df77f89a8856ab89b3de835a993aa7038e ∙ GitFOSS
init commit for profile chooser: http://i.imgur.com/Mn7iPvY.png
+ 745
- 309
new file
app/assets/images/login-background.png
new file
app/assets/images/tox-logo.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="90px"
+   height="109px"
+   viewBox="-1 -1 92 111"
+   enable-background="new 0 0 90 109"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="logo.svg"><metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs9" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1278"
+     inkscape:window-height="595"
+     id="namedview7"
+     showgrid="false"
+     inkscape:snap-bbox="false"
+     inkscape:zoom="2.1651376"
+     inkscape:cx="-11.973612"
+     inkscape:cy="54.5"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><g
+     id="g3"><path
+       d="M71.574,41.851c0-4.685,0.074-10.553-0.033-15.237c-0.047-2.018-0.268-4.076-0.746-6.034   C67.374,6.581,53.823-2.125,39.594,0.45C26.998,2.729,17.621,13.968,17.621,26.786v13.865v1.17c-0.475,0-0.794-0.001-1.116,0H5.023   C2.25,41.821,0,44.07,0,46.844v56.875c0,2.773,2.25,5.023,5.023,5.023h79.451c2.775,0,5.024-2.25,5.024-5.023V46.844   c0-2.774-2.249-5.023-5.024-5.023L71.574,41.851z M52.107,95.118H37.332c-2.322,0-4.203-1.914-4.203-4.274   c0-0.063,0.007-0.127,0.009-0.19c-0.005,0-0.006-1.021-0.008-2.041c-0.001-1.129,0.511-4.289,2.061-6.574   c1.641-2.418,3.855-3.99,6.257-4.697c-3.166-1.291-5.396-4.398-5.396-8.025c0-4.789,3.88-8.668,8.667-8.668   c4.789,0,8.667,3.879,8.667,8.668c0,3.719-2.344,6.891-5.637,8.12c2.332,0.753,4.537,2.313,6.273,4.707   c1.621,2.235,2.285,5.343,2.285,6.47v2.043c-0.006,0.062,0,0.125,0,0.189C56.308,93.204,54.427,95.118,52.107,95.118    M61.779,33.104c-1.562,4.611-4.52,8.305-7.61,11.912c-2.386,2.783-5.19,5.125-8.176,7.247c-0.144,0.103-0.298,0.188-0.685,0.427   c1.781-3.076,3.217-5.998,3.633-9.404c-4.234,1.002-8.227,0.564-12.093-1.14c-6.862-3.023-10.963-9.618-10.263-17.063   c0.573-6.127,3.94-10.543,9.321-13.395c8.667-4.593,19.734-1.655,24.689,6.516C63.482,22.962,63.527,27.945,61.779,33.104"
+       id="path5"
+       style="opacity:1;fill:none;fill-opacity:0;stroke:#c4d2df;stroke-opacity:1" /></g></svg>

new file
app/assets/styles/helpers.css
@@ -0,0 +1,59 @@
+.unselectable {
+  -webkit-user-select: none;
+  cursor: default;
+}
+.ellipsis {
+  display: inline-block;
+  white-space: nowrap;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+/**
+* Helpers.
+**/
+button {
+  background-color: #6BC260;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #8edb84 !important;
+}
+button:active {
+  background-color: #27ae60 !important;
+}
+
+.emojione {
+  width: 16px;
+  height: 16px;
+
+  position: relative;
+  top: 2px;
+}
+
+.green {
+  background-color: #6BC260 !important;
+  color: #ffffff !important;
+}
+.green:hover {
+  background-color: #8edb84 !important;
+}
+.green:active {
+  background-color: #27ae60 !important;
+}
+.red {
+  background-color: #e74c3c !important;
+  color: #ffffff !important;
+}
+.red:hover {
+  background-color: #f38175 !important;
+}
+.red:active {
+  background-color: #ef2929 !important;
+}
+

new file
app/assets/styles/tox-login.css
@@ -0,0 +1,237 @@
+@import 'helpers.css';
+@import 'fa.css';
+@import 'fonts.css';
+
+/**
+* HTML reset.
+**/
+* {
+  box-sizing: border-box;
+  font-family: Aller;
+}
+*:focus, *:active {
+  outline: none;
+}
+
+html, body, #wrapper {
+  width: 100vw;
+  height: 100vh;
+
+  margin: 0;
+  padding: 0;
+}
+
+.fa {
+  margin-right: 10px;
+  font-size: 12px;
+}
+.error {
+  border: 1px solid #e74c3c !important;
+}
+
+#wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+#tox-login-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  
+  flex: 0 0 150px;
+  
+  text-align: center;
+  background-color: #333333;
+}
+#tox-login-info #presentation {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex-direction: column;
+  
+  width: 100%;
+  padding: 10px;
+}
+#tox-login-info #presentation #tox-logo {
+  width: 60px;
+  height: 80px;
+  
+  background: transparent url('../images/tox-logo.svg') no-repeat center center;
+  background-size: 60px 80px;
+}
+#tox-login-info #presentation h1 {
+  display: flex;
+  align-items: center;
+  
+  margin: 0;
+  
+  color: #fff;
+  font-size: 48px;
+}
+#tox-login-info #links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex-direction: column;
+  
+  width: 100%;    
+}
+#tox-login-info #links a {
+  height:30px;
+  width: 100%;
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  background-color: #222;
+  border-bottom: 1px solid #171717;
+  color: #fff;
+  text-decoration: none;
+}
+#tox-login-info #links a:hover {
+  background-color: #444;
+}
+#tox-login-info #links a:active {
+  background-color: #171717;
+}
+#tox-login-container {
+  height: 100vh;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-content: center;
+  align-self: initial;
+  align-items: stretch;
+  
+  padding: 20px;
+  
+  color: #fff;
+  text-align: center;
+  background: url('../images/login-background.png') no-repeat center center /cover;
+  justify-content: center;
+}
+#tox-login-container #profile-errors {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  
+  margin-bottom: 10px;
+  padding: 5px 10px;
+  
+  background-color: #e74c3c;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 12px;
+}
+#tox-login-container #profile-wrapper {
+  display: flex;
+  flex-direction: column;
+  
+  padding: 10px;
+  
+  background-color: #eee;
+  border-radius: 5px;
+  color: #171717;
+}
+#tox-login-container #profile {
+  display: flex;
+  flex-direction: row;
+  
+  margin-bottom: 10px;
+}
+#tox-login-container #profile-avatar {
+  width: 55px;
+  height: 55px;
+  
+  margin: 0 10px 0 0;
+  padding: 0;
+  
+  border-radius: 5px;
+  /*border: 1px solid #ccc;*/
+  
+  background: transparent url('../images/mockup/avatar-004.png') no-repeat center center;
+  background-size: 55px 55px;
+}
+#tox-login-container #profile-wrapper #profile-stuff {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+#tox-login-container #profile-wrapper #profile-stuff input:first-child {
+  margin-bottom: 4px;
+}
+#tox-login-container #profile-wrapper #profile-stuff input {
+  height: 26px;
+  padding: 0 5px;
+
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+#tox-login-container #profile-wrapper #profile-stuff input:focus {
+  border: 1px solid #3498db !important;
+}
+#tox-login-container #profile-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#tox-login-container #profile-actions label {
+  font-weight: lighter;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+#tox-login-container #profile-actions label::after {
+  content: "|";
+  height: 100%;
+  width: 2px;
+  /* background-color: red; */
+  margin: 0 10px;
+  color: #bbb;
+}
+
+#tox-login-container #profile-actions button {
+  flex: 1;
+  padding: 3px 5px;
+
+  background-color: #6BC260;
+  border: none;
+  border-radius: 5px;
+  color: #ffffff;
+  cursor: pointer;
+  font-weight: bold;
+}
+#tox-login-container #profile-actions button:hover {
+  background-color: #8edb84 !important;
+}
+#tox-login-container #profile-actions button:active {
+  background-color: #27ae60 !important;
+}
+
+#register-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  
+  margin: 10px 0 0 0;
+  padding: 5px;
+  
+  /*background-color: #eee;*/
+  border-radius: 5px;
+  color: #171717;
+  font-size: 12px;
+}
+
+
+
+
+
+

app/assets/styles/tox.css
@@ -3,6 +3,7 @@
 **/
 @import 'fonts.css';
 @import 'fa.css';
+@import 'helpers.css';
 
 /**
 * HTML reset.

...
@@ -22,64 +23,6 @@ html, body {
   display: flex;
   flex: 1;
 }
-.unselectable {
-  -webkit-user-select: none;
-  cursor: default;
-}
-.ellipsis {
-  display: inline-block;
-  white-space: nowrap;
-  min-width: 0;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-
-/**
-* Helpers.
-**/
-button {
-  background-color: #6BC260;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-}
-button:hover {
-  background-color: #8edb84 !important;
-}
-button:active {
-  background-color: #27ae60 !important;
-}
-
-.emojione {
-  width: 16px;
-  height: 16px;
-
-  position: relative;
-  top: 2px;
-}
-
-.green {
-  background-color: #6BC260 !important;
-  color: #ffffff !important;
-}
-.green:hover {
-  background-color: #8edb84 !important;
-}
-.green:active {
-  background-color: #27ae60 !important;
-}
-.red {
-  background-color: #e74c3c !important;
-  color: #ffffff !important;
-}
-.red:hover {
-  background-color: #f38175 !important;
-}
-.red:active {
-  background-color: #ef2929 !important;
-}
 
 /**
 * Left sidebar.

...
@@ -356,7 +299,7 @@ aside {
   color: #fff;
 }
 #tox-menu button:hover {
-  background-color: #333333 !important;
+  background-color: /*#333333*/ #6BC260 !important;
   opacity: 1;
 }
 #tox-menu #add-contact {

app/controllers/renderer.js
@@ -290,9 +290,9 @@ Tox.prototype.addMessage = function (direction, author, message, timestamp) {
   }
 
   const tpl = `<article class="message message-${direction.escape()}">
-    <span class="message-author unselectable ellipsis" title="${_author.escape()}">${_author.escape()}</span>
+    <span class="message-author unselectable ellipsis" aria-hidden="true" title="${_author.escape()}">${_author.escape()}</span>
     <span class="message-content"><div>${emojione.toImage(message.escape().nl2br())}</div></span>
-    <span class="message-timestamp unselectable">${timestamp.escape()}</span>
+    <span class="message-timestamp unselectable" aria-hidden="true">${timestamp.escape()}</span>
   </article>`;
 
   const c = this.chatview.innerHTML;

...
@@ -319,9 +319,9 @@ Tox.prototype.addQuote = function (direction, author, message, timestamp) {
   }
 
   const tpl = `<article class="message message-${direction.escape()}">
-    <span class="message-author unselectable ellipsis" title="${_author.escape()}">${_author.escape()}</span>
+    <span class="message-author unselectable ellipsis" aria-hidden="true" title="${_author.escape()}">${_author.escape()}</span>
     <span class="message-content quote"><div>&gt;${emojione.toImage(message.escape().nl2br())}</div></span>
-    <span class="message-timestamp unselectable">${timestamp.escape()}</span>
+    <span class="message-timestamp unselectable" aria-hidden="true">${timestamp.escape()}</span>
   </article>`;
 
   const c = this.chatview.innerHTML;

...
@@ -348,17 +348,17 @@ Tox.prototype.addFileTransfer = function (direction, author, filename, filesize,
   }
 
   const tpl = `<article class="message message-${direction.escape()}">
-    <span class="message-author unselectable ellipsis" title="${_author.escape()}">${_author.escape()}</span>
+    <span class="message-author unselectable ellipsis" aria-hidden="true" title="${_author.escape()}">${_author.escape()}</span>
     <span class="transfer-content">
-      <span class="transfer-icon unselectable"></span>
+      <span class="transfer-icon unselectable" aria-hidden="true"></span>
       <span class="transfer-name ellipsis">${filename.escape()}</span>
-      <span class="transfer-size">${filesize.escape()}</span>
+      <span class="transfer-size" aria-hidden="true">${filesize.escape()}</span>
       <div class="transfer-actions unselectable">
-        <button class="transfer-accept"></button>
-        <button class="transfer-reject"></button>
+        <button class="transfer-accept" aria-hidden="true" title="Accept file transfer"></button>
+        <button class="transfer-reject" aria-hidden="true" title="Cancel file transfer"></button>
       </div>
     </span>
-    <span class="message-timestamp unselectable">${timestamp.escape()}</span>
+    <span class="message-timestamp unselectable" aria-hidden="true">${timestamp.escape()}</span>
   </article>`;
 
   const c = this.chatview.innerHTML;

new file
app/locales/en.json
@@ -0,0 +1,43 @@
+{
+  "contactslist": {
+    "titles": {
+      "user-profile-avatar": "Change your avatar",
+      "user-profile-status": "Change your status",
+      "menu-add-contact": "Add a contact",
+      "menu-new-group": "Create a group",
+      "menu-show-transfers": "File transers",
+      "menu-show-settings": "Preferences",
+    },
+    "search-contacts-placeholder": "Type to search...",
+  },
+  "chatview": {
+    "titles": {
+      "call-audio": "Audio call",
+      "call-video": "Video call",
+      "choose-emojis": "Open the emoji chooser",
+      "send-file": "Send file",
+      "send-message": "Send message",
+    }
+  },
+  "modals": {
+    "add-contact": {
+      "title": "Add a contact",
+      "toxid-label": "ToxID or alias:",
+      "toxid-placeholder": "Enter your contact ToxID...",
+      "message-label": "Message:",
+      "message-placeholder": "Hey mate, add me and we could talk! :p",
+      "close-modal-tip": "Click anywhere to close the modal",
+      "send-request": "Send the request",
+    }
+  },
+  "status": {
+    "online": "Online",
+    "offline": "Offline",
+    "away": "Away",
+    "busy": "Busy",
+    "blocked": "Blocked",
+  },
+  "misc": {
+    "no-emoji-pattern": "No emoji found for this pattern",
+  }
+}

new file
app/locales/fr.json
@@ -0,0 +1,43 @@
+{
+  "contactslist": {
+    "titles": {
+      "user-profile-avatar": "Changer votre avatar",
+      "user-profile-status": "Changer votre status",
+      "menu-add-contact": "Ajouter un contact",
+      "menu-new-group": "Créer un groupe",
+      "menu-show-transfers": "Transferts de fichiers",
+      "menu-show-settings": "Préferences",
+    },
+    "search-contacts-placeholder": "Rechercher...",
+  },
+  "chatview": {
+    "titles": {
+      "call-audio": "Appel audio",
+      "call-video": "Appel vidéo",
+      "choose-emojis": "Ouvrir le selecteur d'emojis",
+      "send-file": "Envoyer un fichier",
+      "send-message": "Envoyer un message",
+    }
+  },
+  "modals": {
+    "add-contact": {
+      "title": "Ajouter un contact",
+      "toxid-label": "ToxID ou pseudo :",
+      "toxid-placeholder": "Entrer le ToxID de votre contact...",
+      "message-label": "Message :",
+      "message-placeholder": "Salut, ajoutez moi et nous pourrons parler. :p",
+      "close-modal-tip": "Cliquer n'importe où pour fermer",
+      "send-request": "Envoyer la requête",
+    }
+  },
+  "status": {
+    "online": "En ligne",
+    "offline": "Hors-ligne",
+    "away": "Absent",
+    "busy": "Occupé",
+    "blocked": "Bloqué",
+  },
+  "misc": {
+    "no-emoji-pattern": "Aucun emoji ne correspond à ce motif",
+  }
+}

@@ -7,8 +7,6 @@ const BrowserWindow = electron.BrowserWindow;
 // Our internal protocol
 const protocol = "tox";
 
-console.log("main", __dirname);
-
 // Allow right click context menu.
 require('electron-context-menu')({
   showInspectElement: false,

...
@@ -20,22 +18,40 @@ let mainWindow;
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({
+  /*mainWindow = new BrowserWindow({
     width: 960,
     height: 500,
     center: true,
     autoHideMenuBar: true,
+  });*/
+  mainWindow = new BrowserWindow({
+    width: 500,
+    height: 250,
+    center: true,
+    autoHideMenuBar: true,
+    resizable: false,
   });
 
   mainWindow.title = "Tox";
-  mainWindow.setMinimumSize(750, 300);
+  /*mainWindow.setMinimumSize(750, 300);*/
+  mainWindow.setMinimumSize(500, 250);
   //mainWindow.setMenu(null);
 
   proto.registerFileProtocol(protocol, (request, callback) => {
     const url = request.url.substr(protocol.length + 3);
     mainWindow.webContents.send('protocol-activated', url);
-    //callback({ path: path.normalize(__dirname + '/' + url) });
-    console.log('Successfuly registered protocol `' + protocol + '://`');
+    
+    if (url == 'main-window') {
+      mainWindow.setSize(960, 500);
+      mainWindow.setMinimumSize(750, 300);
+      mainWindow.setResizable(true);
+      mainWindow.loadURL(`file://${__dirname}/views/${url}.html`);
+      return;
+    }
+    
+    //mainWindow.loadURL(`file://${__dirname}/views/${url}`);
+    //callback({ path: path.normalize(__dirname + '/views/' + url) });
+    console.log('Successfuly registered protocol `' + protocol + '://' + url + '`', __dirname + '/' + url);
   }, (err) => {
     if (err) {
       console.error('Failed to register internal protocol.', err);

...
@@ -90,7 +106,4 @@ app.on('activate', function () {
   if (mainWindow === null) {
     createWindow()
   }
-})
-
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.
+});

app/views/index.html
@@ -2,239 +2,47 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙</title>
+    <title>Tox</title>
 
-    <link rel="stylesheet" href="../assets/styles/tox.css">
+    <!--<link rel="stylesheet" href="../assets/styles/tox.css">-->
+    <link rel="stylesheet" href="../assets/styles/tox-login.css">
   </head>
   <body>
-    <aside class="unselectable">
-      <section id="user-profile">
-        <img id="user-avatar" src="../assets/images/mockup/avatar-004.png">
-        <div id="user-infos">
-          <span id="user-name" class="ellipsis" tabindex="-1" contenteditable="true">Chips Handon</span>
-          <span id="user-mood" class="ellipsis" tabindex="-1" contenteditable="true">Cracking the code.</span>
-        </div>
-        <button id="user-presence">
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </button>
-      </section>
-      <section id="contacts-list-filters">
-        <label for="contacts-list-search" id="contacts-list-search-label" class="fa fa-search" aria-hidden="true"></label>
-        <input id="contacts-list-search" placeholder="Type to search...">
-        <button id="contacts-list-filter">Online</button>
-      </section>
-      <section id="contacts-list" class="not-compact">
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-001.png">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Kev💙Ashcorp</span>
-            <span class="contact-mood ellipsis">Dropped the ball harder than you could ever believe</span>
-          </div>
-          <div class="contact-presence">
-            <span class="online-notify"></span>
-          </div>
-        </article>
-        <article class="contact active">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-000.png">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Frosty Disco Thunder Winter Bear 💙</span>
-            <span class="contact-mood ellipsis">Working on my new game: Door First!</span>
-          </div>
-          <div class="contact-presence">
-            <span class="online"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-002.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Loli</span>
-            <span class="contact-mood ellipsis">In Britain, some birds are flying</span>
-          </div>
-          <div class="contact-presence">
-            <span class="away"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-005.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Rowedahelicon</span>
-            <span class="contact-mood ellipsis">What's in a word if the...</span>
-          </div>
-          <div class="contact-presence">
-            <span class="away-notify"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-003.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Shag Rogers</span>
-            <span class="contact-mood ellipsis">CAN'T BAG THE SHAG</span>
-          </div>
-          <div class="contact-presence">
-            <span class="busy"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-006.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Chris X</span>
-            <span class="contact-mood ellipsis">Arting, brb</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline-notify"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-007.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">David (steamboat)</span>
-            <span class="contact-mood ellipsis">im good</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Tristious</span>
-            <span class="contact-mood ellipsis">thanks</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Vincent Estrada</span>
-            <span class="contact-mood ellipsis">txt me if u need me</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </article>
-      </section>
-      <section id="tox-menu">
-        <button id="add-contact"></button>
-        <button id="new-group"></button>
-        <button id="show-transfers"></button>
-        <button id="show-settings"></button>
-      </section>
-    </aside>
-    <main>
-      <header id="chatview-header">
-        <img id="contact-avatar" class="unselectable" src="../assets/images/mockup/avatar-000.png">
-        <div>
-          <span class="contact-name">Frosty Disco Thunder Winter Bear 💙</span>
-          <span class="contact-mood">Working on my new game: Door First!</span>
-        </div>
-        <section id="chatview-header-actions" class="unselectable">
-          <button id="call-audio"></button>
-          <button id="call-video"></button>
+    <div id="wrapper" class="unselectable">
+      <aside id="tox-login-info">
+        <section id="presentation">
+          <div id="tox-logo"></div>
+          <h1>Tox</h1>
+        </section>
+        <section id="links">
+          <a href="tox://main-window">
+            <span class="fa fa-user-plus"></span>
+            Register
+          </a>
+          <!--<a href="#">Settings</a>-->
         </section>
-      </header>
-      <section id="chatview-content"></section>
-      <section id="chatview-is-typing" class="unselectable">
-        <span class="typing-loader"></span>
-        <span class="typing-content">Frosty Disco Thunder Winter Bear 💙 is typing...</span>
-      </section>
-      <footer id="chatview-footer" class="unselectable">
-        <textarea id="chatview-entry" placeholder="Type your message here..."></textarea>
-        <div id="chatview-footer-actions">
-          <button id="chatview-emojis"></button>
-          <button id="chatview-send-file"></button>
+      </aside>
+      <main id="tox-login-container">
+        <!--<div id="profile-errors">
+          <span class="fa fa-exclamation-triangle"></span>
+          Password is incorrect.
+        </div>-->
+        <div id="profile-wrapper">
+          <section id="profile">
+            <div id="profile-avatar" class="avatar-default"></div>
+            <div id="profile-stuff">
+              <input type="text" id="profile-name" placeholder="Profile name...">
+              <input type="password" id="profile-pass" placeholder="Profile decryption password...">
+            </div>
+          </section>
+          <section id="profile-actions">
+            <input type="checkbox" id="remember">
+            <label for="remember">Remember password?</label>
+            
+            <button id="button-login">Login</button>
+          </section>
         </div>
-        <button id="chatview-send-message"></button>
-      </footer>
-    </main>
-    
-    <!-- Overlay + modal -->
-    <div id="overlay" class=""></div>
-    <div id="dialog-wrapper">
-      <dialog id="add-friend-modal" class="hide">
-        <header class="dialog-header unselectable">
-          <span class="fa fa-plus-circle"></span> Add a friend
-        </header>
-        <main class="dialog-content unselectable">
-          <label>ToxID or alias:</label>
-          <input type="text" id="add-friend-modal-toxid" placeholder="Enter your contact ToxID...">
-          
-          <label>Message:</label>
-          <textarea id="add-friend-modal-message" placeholder="Hey mate, add me and we could talk! :p"></textarea>
-          
-          
-        </main>
-        <footer class="dialog-footer unselectable">
-          <span class="dialog-close-tip">Click anywhere to close the modal</span>
-          <button id="add-friend-modal-send" class="send-request green">Send the request</button>
-        </footer>
-      </dialog>
+      </main>
     </div>
-
-    <script src="../helpers/emojiStrategy.js"></script>
-    <script>
-      require('../controllers/renderer.js');
-      
-      // SHAME ON ME FOR USING JQUERY BUT THERE IS NO OTHER SIMPLE WAY :'(
-      $("#chatview-entry").textcomplete([{
-        match: /\B:([\-+\w]*)$/,
-        search: function (term, callback) {
-          var results = [];
-          var results2 = [];
-          var results3 = [];
-          $.each(emojiStrategy, function(shortname,data) {
-            if(shortname.indexOf(term) > -1) { results.push(shortname); }
-            else {
-              if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
-                results2.push(shortname);
-              }
-              else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
-                results3.push(shortname);
-              }
-            }
-          });
-
-          if(term.length >= 3) {
-            results.sort(function(a,b) { return (a.length > b.length); });
-            results2.sort(function(a,b) { return (a.length > b.length); });
-            results3.sort();
-          }
-          var newResults = results.concat(results2).concat(results3);
-
-          callback(newResults);
-        },
-        template: function (shortname) {
-          window.emojiSearch = true;
-          return `${emojione.shortnameToImage(':'+shortname+':')} :${shortname}:`;
-        },
-        replace: function (shortname) {
-          window.emojiSearch = false;
-          return ':'+shortname+': ';
-        },
-        index: 1,
-        maxCount: 5
-      }], {
-        //height: 265,
-        maxCount: 5,
-        placement: 'top',
-        debounce: 500,
-        noResultsMessage: "<small style='padding: 0 10px;'>No emoji found for this pattern.</small>",
-        onKeydown: function (e, commands) {
-          // `commands` has `KEY_UP`, `KEY_DOWN`, `KEY_ENTER`, `KEY_PAGEUP`, `KEY_PAGEDOWN`,
-          // `KEY_ESCAPE` and `SKIP_DEFAULT`.
-          if (e.keyCode === 13) {
-            // Treat CTRL-J as enter key.
-            return commands.KEY_ENTER;
-          } else if (e.keyCode === 27 || e.keyCode === 8) {
-            window.emojiSearch = false;
-          }
-          // If the function does not return a result or undefined is returned,
-          // the plugin uses default behavior.
-        }
-      });
-    </script>
   </body>
 </html>

init commit for profile chooser: http://i.imgur.com/Mn7iPvY.png
+ 745
- 309
new file
app/assets/images/login-background.png
new file
app/assets/images/tox-logo.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="90px"
+   height="109px"
+   viewBox="-1 -1 92 111"
+   enable-background="new 0 0 90 109"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="logo.svg"><metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs9" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1278"
+     inkscape:window-height="595"
+     id="namedview7"
+     showgrid="false"
+     inkscape:snap-bbox="false"
+     inkscape:zoom="2.1651376"
+     inkscape:cx="-11.973612"
+     inkscape:cy="54.5"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><g
+     id="g3"><path
+       d="M71.574,41.851c0-4.685,0.074-10.553-0.033-15.237c-0.047-2.018-0.268-4.076-0.746-6.034   C67.374,6.581,53.823-2.125,39.594,0.45C26.998,2.729,17.621,13.968,17.621,26.786v13.865v1.17c-0.475,0-0.794-0.001-1.116,0H5.023   C2.25,41.821,0,44.07,0,46.844v56.875c0,2.773,2.25,5.023,5.023,5.023h79.451c2.775,0,5.024-2.25,5.024-5.023V46.844   c0-2.774-2.249-5.023-5.024-5.023L71.574,41.851z M52.107,95.118H37.332c-2.322,0-4.203-1.914-4.203-4.274   c0-0.063,0.007-0.127,0.009-0.19c-0.005,0-0.006-1.021-0.008-2.041c-0.001-1.129,0.511-4.289,2.061-6.574   c1.641-2.418,3.855-3.99,6.257-4.697c-3.166-1.291-5.396-4.398-5.396-8.025c0-4.789,3.88-8.668,8.667-8.668   c4.789,0,8.667,3.879,8.667,8.668c0,3.719-2.344,6.891-5.637,8.12c2.332,0.753,4.537,2.313,6.273,4.707   c1.621,2.235,2.285,5.343,2.285,6.47v2.043c-0.006,0.062,0,0.125,0,0.189C56.308,93.204,54.427,95.118,52.107,95.118    M61.779,33.104c-1.562,4.611-4.52,8.305-7.61,11.912c-2.386,2.783-5.19,5.125-8.176,7.247c-0.144,0.103-0.298,0.188-0.685,0.427   c1.781-3.076,3.217-5.998,3.633-9.404c-4.234,1.002-8.227,0.564-12.093-1.14c-6.862-3.023-10.963-9.618-10.263-17.063   c0.573-6.127,3.94-10.543,9.321-13.395c8.667-4.593,19.734-1.655,24.689,6.516C63.482,22.962,63.527,27.945,61.779,33.104"
+       id="path5"
+       style="opacity:1;fill:none;fill-opacity:0;stroke:#c4d2df;stroke-opacity:1" /></g></svg>

new file
app/assets/styles/helpers.css
@@ -0,0 +1,59 @@
+.unselectable {
+  -webkit-user-select: none;
+  cursor: default;
+}
+.ellipsis {
+  display: inline-block;
+  white-space: nowrap;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+/**
+* Helpers.
+**/
+button {
+  background-color: #6BC260;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #8edb84 !important;
+}
+button:active {
+  background-color: #27ae60 !important;
+}
+
+.emojione {
+  width: 16px;
+  height: 16px;
+
+  position: relative;
+  top: 2px;
+}
+
+.green {
+  background-color: #6BC260 !important;
+  color: #ffffff !important;
+}
+.green:hover {
+  background-color: #8edb84 !important;
+}
+.green:active {
+  background-color: #27ae60 !important;
+}
+.red {
+  background-color: #e74c3c !important;
+  color: #ffffff !important;
+}
+.red:hover {
+  background-color: #f38175 !important;
+}
+.red:active {
+  background-color: #ef2929 !important;
+}
+

new file
app/assets/styles/tox-login.css
@@ -0,0 +1,237 @@
+@import 'helpers.css';
+@import 'fa.css';
+@import 'fonts.css';
+
+/**
+* HTML reset.
+**/
+* {
+  box-sizing: border-box;
+  font-family: Aller;
+}
+*:focus, *:active {
+  outline: none;
+}
+
+html, body, #wrapper {
+  width: 100vw;
+  height: 100vh;
+
+  margin: 0;
+  padding: 0;
+}
+
+.fa {
+  margin-right: 10px;
+  font-size: 12px;
+}
+.error {
+  border: 1px solid #e74c3c !important;
+}
+
+#wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+#tox-login-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  
+  flex: 0 0 150px;
+  
+  text-align: center;
+  background-color: #333333;
+}
+#tox-login-info #presentation {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex-direction: column;
+  
+  width: 100%;
+  padding: 10px;
+}
+#tox-login-info #presentation #tox-logo {
+  width: 60px;
+  height: 80px;
+  
+  background: transparent url('../images/tox-logo.svg') no-repeat center center;
+  background-size: 60px 80px;
+}
+#tox-login-info #presentation h1 {
+  display: flex;
+  align-items: center;
+  
+  margin: 0;
+  
+  color: #fff;
+  font-size: 48px;
+}
+#tox-login-info #links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex-direction: column;
+  
+  width: 100%;    
+}
+#tox-login-info #links a {
+  height:30px;
+  width: 100%;
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  background-color: #222;
+  border-bottom: 1px solid #171717;
+  color: #fff;
+  text-decoration: none;
+}
+#tox-login-info #links a:hover {
+  background-color: #444;
+}
+#tox-login-info #links a:active {
+  background-color: #171717;
+}
+#tox-login-container {
+  height: 100vh;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-content: center;
+  align-self: initial;
+  align-items: stretch;
+  
+  padding: 20px;
+  
+  color: #fff;
+  text-align: center;
+  background: url('../images/login-background.png') no-repeat center center /cover;
+  justify-content: center;
+}
+#tox-login-container #profile-errors {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  
+  margin-bottom: 10px;
+  padding: 5px 10px;
+  
+  background-color: #e74c3c;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 12px;
+}
+#tox-login-container #profile-wrapper {
+  display: flex;
+  flex-direction: column;
+  
+  padding: 10px;
+  
+  background-color: #eee;
+  border-radius: 5px;
+  color: #171717;
+}
+#tox-login-container #profile {
+  display: flex;
+  flex-direction: row;
+  
+  margin-bottom: 10px;
+}
+#tox-login-container #profile-avatar {
+  width: 55px;
+  height: 55px;
+  
+  margin: 0 10px 0 0;
+  padding: 0;
+  
+  border-radius: 5px;
+  /*border: 1px solid #ccc;*/
+  
+  background: transparent url('../images/mockup/avatar-004.png') no-repeat center center;
+  background-size: 55px 55px;
+}
+#tox-login-container #profile-wrapper #profile-stuff {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+#tox-login-container #profile-wrapper #profile-stuff input:first-child {
+  margin-bottom: 4px;
+}
+#tox-login-container #profile-wrapper #profile-stuff input {
+  height: 26px;
+  padding: 0 5px;
+
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+#tox-login-container #profile-wrapper #profile-stuff input:focus {
+  border: 1px solid #3498db !important;
+}
+#tox-login-container #profile-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#tox-login-container #profile-actions label {
+  font-weight: lighter;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+#tox-login-container #profile-actions label::after {
+  content: "|";
+  height: 100%;
+  width: 2px;
+  /* background-color: red; */
+  margin: 0 10px;
+  color: #bbb;
+}
+
+#tox-login-container #profile-actions button {
+  flex: 1;
+  padding: 3px 5px;
+
+  background-color: #6BC260;
+  border: none;
+  border-radius: 5px;
+  color: #ffffff;
+  cursor: pointer;
+  font-weight: bold;
+}
+#tox-login-container #profile-actions button:hover {
+  background-color: #8edb84 !important;
+}
+#tox-login-container #profile-actions button:active {
+  background-color: #27ae60 !important;
+}
+
+#register-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  
+  margin: 10px 0 0 0;
+  padding: 5px;
+  
+  /*background-color: #eee;*/
+  border-radius: 5px;
+  color: #171717;
+  font-size: 12px;
+}
+
+
+
+
+
+

new file
app/views/main-window.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙</title>
+
+    <link rel="stylesheet" href="../assets/styles/tox.css">
+  </head>
+  <body>
+    <aside class="unselectable">
+      <section id="user-profile">
+        <img id="user-avatar" src="../assets/images/mockup/avatar-004.png">
+        <div id="user-infos">
+          <span id="user-name" class="ellipsis" tabindex="-1" contenteditable="true">Chips Handon</span>
+          <span id="user-mood" class="ellipsis" tabindex="-1" contenteditable="true">Cracking the code.</span>
+        </div>
+        <button id="user-presence" title="Change your status">
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </button>
+      </section>
+      <section id="contacts-list-filters">
+        <label for="contacts-list-search" id="contacts-list-search-label" class="fa fa-search" aria-hidden="true"></label>
+        <input id="contacts-list-search" placeholder="Type to search…">
+        <button id="contacts-list-filter">Online</button>
+      </section>
+      <section id="contacts-list" class="not-compact">
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-001.png">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Kev💙Ashcorp</span>
+            <span class="contact-mood ellipsis">Dropped the ball harder than you could ever believe</span>
+          </div>
+          <div class="contact-presence">
+            <span class="online-notify"></span>
+          </div>
+        </article>
+        <article class="contact active">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-000.png">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Frosty Disco Thunder Winter Bear 💙</span>
+            <span class="contact-mood ellipsis">Working on my new game: Door First!</span>
+          </div>
+          <div class="contact-presence">
+            <span class="online"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-002.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Loli</span>
+            <span class="contact-mood ellipsis">In Britain, some birds are flying</span>
+          </div>
+          <div class="contact-presence">
+            <span class="away"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-005.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Rowedahelicon</span>
+            <span class="contact-mood ellipsis">What's in a word if the...</span>
+          </div>
+          <div class="contact-presence">
+            <span class="away-notify"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-003.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Shag Rogers</span>
+            <span class="contact-mood ellipsis">CAN'T BAG THE SHAG</span>
+          </div>
+          <div class="contact-presence">
+            <span class="busy"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-006.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Chris X</span>
+            <span class="contact-mood ellipsis">Arting, brb</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline-notify"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-007.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">David (steamboat)</span>
+            <span class="contact-mood ellipsis">im good</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Tristious</span>
+            <span class="contact-mood ellipsis">thanks</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Vincent Estrada</span>
+            <span class="contact-mood ellipsis">txt me if u need me</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+      </section>
+      <section id="tox-menu">
+        <button id="add-contact" title="Add a contact"></button>
+        <button id="new-group" title="Create a group"></button>
+        <button id="show-transfers" title="File transfers"></button>
+        <button id="show-settings" title="Settings"></button>
+      </section>
+    </aside>
+    <main>
+      <header id="chatview-header">
+        <img id="contact-avatar" class="unselectable" src="../assets/images/mockup/avatar-000.png">
+        <div>
+          <span class="contact-name">Frosty Disco Thunder Winter Bear 💙</span>
+          <span class="contact-mood">Working on my new game: Door First!</span>
+        </div>
+        <section id="chatview-header-actions" class="unselectable">
+          <button id="call-audio" title="Audio call"></button>
+          <button id="call-video" title="Video call"></button>
+        </section>
+      </header>
+      <section id="chatview-content"></section>
+      <section id="chatview-is-typing" class="unselectable">
+        <span class="typing-loader"></span>
+        <span class="typing-content">Frosty Disco Thunder Winter Bear 💙 is typing…</span>
+      </section>
+      <footer id="chatview-footer" class="unselectable">
+        <textarea id="chatview-entry" placeholder="Type your message here…"></textarea>
+        <div id="chatview-footer-actions">
+          <button id="chatview-emojis" title="Open the emoji chooser"></button>
+          <button id="chatview-send-file" title="Send file"></button>
+        </div>
+        <button id="chatview-send-message" title="Send message"></button>
+      </footer>
+    </main>
+    
+    <!-- Overlay + modal -->
+    <div id="overlay" class=""></div>
+    <div id="dialog-wrapper">
+      <dialog id="add-friend-modal" class="hide">
+        <header class="dialog-header unselectable">
+          <span class="fa fa-plus-circle"></span> Add a contact
+        </header>
+        <main class="dialog-content unselectable">
+          <label>ToxID or alias:</label>
+          <input type="text" id="add-friend-modal-toxid" placeholder="Enter a ToxID or an alias...">
+          
+          <label>Message:</label>
+          <textarea id="add-friend-modal-message" placeholder="Hey mate, add me and we could talk! :p"></textarea>
+          
+          
+        </main>
+        <footer class="dialog-footer unselectable">
+          <span class="dialog-close-tip">Click anywhere to close the modal</span>
+          <button id="add-friend-modal-send" class="send-request green">Send the request</button>
+        </footer>
+      </dialog>
+    </div>
+
+    <script src="../helpers/emojiStrategy.js"></script>
+    <script>
+      require('../controllers/renderer.js');
+      
+      // SHAME ON ME FOR USING JQUERY BUT THERE IS NO OTHER SIMPLE WAY :'(
+      $("#chatview-entry").textcomplete([{
+        match: /\B:([\-+\w]*)$/,
+        search: function (term, callback) {
+          var results = [];
+          var results2 = [];
+          var results3 = [];
+          $.each(emojiStrategy, function(shortname,data) {
+            if(shortname.indexOf(term) > -1) { results.push(shortname); }
+            else {
+              if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
+                results2.push(shortname);
+              }
+              else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
+                results3.push(shortname);
+              }
+            }
+          });
+
+          if(term.length >= 3) {
+            results.sort(function(a,b) { return (a.length > b.length); });
+            results2.sort(function(a,b) { return (a.length > b.length); });
+            results3.sort();
+          }
+          var newResults = results.concat(results2).concat(results3);
+
+          callback(newResults);
+        },
+        template: function (shortname) {
+          window.emojiSearch = true;
+          return `${emojione.shortnameToImage(':'+shortname+':')} :${shortname}:`;
+        },
+        replace: function (shortname) {
+          window.emojiSearch = false;
+          return ':'+shortname+': ';
+        },
+        index: 1,
+        maxCount: 5
+      }], {
+        //height: 265,
+        maxCount: 5,
+        placement: 'top',
+        debounce: 500,
+        noResultsMessage: "<small style='padding: 0 10px;'>No emoji found for this pattern.</small>",
+        onKeydown: function (e, commands) {
+          // `commands` has `KEY_UP`, `KEY_DOWN`, `KEY_ENTER`, `KEY_PAGEUP`, `KEY_PAGEDOWN`,
+          // `KEY_ESCAPE` and `SKIP_DEFAULT`.
+          if (e.keyCode === 13) {
+            // Treat CTRL-J as enter key.
+            return commands.KEY_ENTER;
+          } else if (e.keyCode === 27 || e.keyCode === 8) {
+            window.emojiSearch = false;
+          }
+          // If the function does not return a result or undefined is returned,
+          // the plugin uses default behavior.
+        }
+      });
+    </script>
+  </body>
+</html>

file deleted
app/views/test.html
@@ -1 +0,0 @@
-<h1>It works!</h1>

@@ -33,7 +33,8 @@
     "url": "https://github.com/SkyzohKey/Tox-client/issues"
   },
   "devDependencies": {
-    "electron-prebuilt": "^1.2.0"
+    "electron-prebuilt": "^1.2.0",
+    "electron-reload": "^1.0.1"
   },
   "dependencies": {
     "date-format": "0.0.2",

new file
app/views/main-window.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙</title>
+
+    <link rel="stylesheet" href="../assets/styles/tox.css">
+  </head>
+  <body>
+    <aside class="unselectable">
+      <section id="user-profile">
+        <img id="user-avatar" src="../assets/images/mockup/avatar-004.png">
+        <div id="user-infos">
+          <span id="user-name" class="ellipsis" tabindex="-1" contenteditable="true">Chips Handon</span>
+          <span id="user-mood" class="ellipsis" tabindex="-1" contenteditable="true">Cracking the code.</span>
+        </div>
+        <button id="user-presence" title="Change your status">
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </button>
+      </section>
+      <section id="contacts-list-filters">
+        <label for="contacts-list-search" id="contacts-list-search-label" class="fa fa-search" aria-hidden="true"></label>
+        <input id="contacts-list-search" placeholder="Type to search…">
+        <button id="contacts-list-filter">Online</button>
+      </section>
+      <section id="contacts-list" class="not-compact">
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-001.png">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Kev💙Ashcorp</span>
+            <span class="contact-mood ellipsis">Dropped the ball harder than you could ever believe</span>
+          </div>
+          <div class="contact-presence">
+            <span class="online-notify"></span>
+          </div>
+        </article>
+        <article class="contact active">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-000.png">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Frosty Disco Thunder Winter Bear 💙</span>
+            <span class="contact-mood ellipsis">Working on my new game: Door First!</span>
+          </div>
+          <div class="contact-presence">
+            <span class="online"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-002.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Loli</span>
+            <span class="contact-mood ellipsis">In Britain, some birds are flying</span>
+          </div>
+          <div class="contact-presence">
+            <span class="away"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-005.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Rowedahelicon</span>
+            <span class="contact-mood ellipsis">What's in a word if the...</span>
+          </div>
+          <div class="contact-presence">
+            <span class="away-notify"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-003.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Shag Rogers</span>
+            <span class="contact-mood ellipsis">CAN'T BAG THE SHAG</span>
+          </div>
+          <div class="contact-presence">
+            <span class="busy"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-006.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Chris X</span>
+            <span class="contact-mood ellipsis">Arting, brb</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline-notify"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-007.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">David (steamboat)</span>
+            <span class="contact-mood ellipsis">im good</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Tristious</span>
+            <span class="contact-mood ellipsis">thanks</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Vincent Estrada</span>
+            <span class="contact-mood ellipsis">txt me if u need me</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+      </section>
+      <section id="tox-menu">
+        <button id="add-contact" title="Add a contact"></button>
+        <button id="new-group" title="Create a group"></button>
+        <button id="show-transfers" title="File transfers"></button>
+        <button id="show-settings" title="Settings"></button>
+      </section>
+    </aside>
+    <main>
+      <header id="chatview-header">
+        <img id="contact-avatar" class="unselectable" src="../assets/images/mockup/avatar-000.png">
+        <div>
+          <span class="contact-name">Frosty Disco Thunder Winter Bear 💙</span>
+          <span class="contact-mood">Working on my new game: Door First!</span>
+        </div>
+        <section id="chatview-header-actions" class="unselectable">
+          <button id="call-audio" title="Audio call"></button>
+          <button id="call-video" title="Video call"></button>
+        </section>
+      </header>
+      <section id="chatview-content"></section>
+      <section id="chatview-is-typing" class="unselectable">
+        <span class="typing-loader"></span>
+        <span class="typing-content">Frosty Disco Thunder Winter Bear 💙 is typing…</span>
+      </section>
+      <footer id="chatview-footer" class="unselectable">
+        <textarea id="chatview-entry" placeholder="Type your message here…"></textarea>
+        <div id="chatview-footer-actions">
+          <button id="chatview-emojis" title="Open the emoji chooser"></button>
+          <button id="chatview-send-file" title="Send file"></button>
+        </div>
+        <button id="chatview-send-message" title="Send message"></button>
+      </footer>
+    </main>
+    
+    <!-- Overlay + modal -->
+    <div id="overlay" class=""></div>
+    <div id="dialog-wrapper">
+      <dialog id="add-friend-modal" class="hide">
+        <header class="dialog-header unselectable">
+          <span class="fa fa-plus-circle"></span> Add a contact
+        </header>
+        <main class="dialog-content unselectable">
+          <label>ToxID or alias:</label>
+          <input type="text" id="add-friend-modal-toxid" placeholder="Enter a ToxID or an alias...">
+          
+          <label>Message:</label>
+          <textarea id="add-friend-modal-message" placeholder="Hey mate, add me and we could talk! :p"></textarea>
+          
+          
+        </main>
+        <footer class="dialog-footer unselectable">
+          <span class="dialog-close-tip">Click anywhere to close the modal</span>
+          <button id="add-friend-modal-send" class="send-request green">Send the request</button>
+        </footer>
+      </dialog>
+    </div>
+
+    <script src="../helpers/emojiStrategy.js"></script>
+    <script>
+      require('../controllers/renderer.js');
+      
+      // SHAME ON ME FOR USING JQUERY BUT THERE IS NO OTHER SIMPLE WAY :'(
+      $("#chatview-entry").textcomplete([{
+        match: /\B:([\-+\w]*)$/,
+        search: function (term, callback) {
+          var results = [];
+          var results2 = [];
+          var results3 = [];
+          $.each(emojiStrategy, function(shortname,data) {
+            if(shortname.indexOf(term) > -1) { results.push(shortname); }
+            else {
+              if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
+                results2.push(shortname);
+              }
+              else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
+                results3.push(shortname);
+              }
+            }
+          });
+
+          if(term.length >= 3) {
+            results.sort(function(a,b) { return (a.length > b.length); });
+            results2.sort(function(a,b) { return (a.length > b.length); });
+            results3.sort();
+          }
+          var newResults = results.concat(results2).concat(results3);
+
+          callback(newResults);
+        },
+        template: function (shortname) {
+          window.emojiSearch = true;
+          return `${emojione.shortnameToImage(':'+shortname+':')} :${shortname}:`;
+        },
+        replace: function (shortname) {
+          window.emojiSearch = false;
+          return ':'+shortname+': ';
+        },
+        index: 1,
+        maxCount: 5
+      }], {
+        //height: 265,
+        maxCount: 5,
+        placement: 'top',
+        debounce: 500,
+        noResultsMessage: "<small style='padding: 0 10px;'>No emoji found for this pattern.</small>",
+        onKeydown: function (e, commands) {
+          // `commands` has `KEY_UP`, `KEY_DOWN`, `KEY_ENTER`, `KEY_PAGEUP`, `KEY_PAGEDOWN`,
+          // `KEY_ESCAPE` and `SKIP_DEFAULT`.
+          if (e.keyCode === 13) {
+            // Treat CTRL-J as enter key.
+            return commands.KEY_ENTER;
+          } else if (e.keyCode === 27 || e.keyCode === 8) {
+            window.emojiSearch = false;
+          }
+          // If the function does not return a result or undefined is returned,
+          // the plugin uses default behavior.
+        }
+      });
+    </script>
+  </body>
+</html>

file deleted
app/views/test.html
@@ -1 +0,0 @@
-<h1>It works!</h1>

@@ -33,7 +33,8 @@
     "url": "https://github.com/SkyzohKey/Tox-client/issues"
   },
   "devDependencies": {
-    "electron-prebuilt": "^1.2.0"
+    "electron-prebuilt": "^1.2.0",
+    "electron-reload": "^1.0.1"
   },
   "dependencies": {
     "date-format": "0.0.2",

app/assets/styles/tox.css
@@ -3,6 +3,7 @@
 **/
 @import 'fonts.css';
 @import 'fa.css';
+@import 'helpers.css';
 
 /**
 * HTML reset.

...
@@ -22,64 +23,6 @@ html, body {
   display: flex;
   flex: 1;
 }
-.unselectable {
-  -webkit-user-select: none;
-  cursor: default;
-}
-.ellipsis {
-  display: inline-block;
-  white-space: nowrap;
-  min-width: 0;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-
-/**
-* Helpers.
-**/
-button {
-  background-color: #6BC260;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-}
-button:hover {
-  background-color: #8edb84 !important;
-}
-button:active {
-  background-color: #27ae60 !important;
-}
-
-.emojione {
-  width: 16px;
-  height: 16px;
-
-  position: relative;
-  top: 2px;
-}
-
-.green {
-  background-color: #6BC260 !important;
-  color: #ffffff !important;
-}
-.green:hover {
-  background-color: #8edb84 !important;
-}
-.green:active {
-  background-color: #27ae60 !important;
-}
-.red {
-  background-color: #e74c3c !important;
-  color: #ffffff !important;
-}
-.red:hover {
-  background-color: #f38175 !important;
-}
-.red:active {
-  background-color: #ef2929 !important;
-}
 
 /**
 * Left sidebar.

...
@@ -356,7 +299,7 @@ aside {
   color: #fff;
 }
 #tox-menu button:hover {
-  background-color: #333333 !important;
+  background-color: /*#333333*/ #6BC260 !important;
   opacity: 1;
 }
 #tox-menu #add-contact {

app/controllers/renderer.js
@@ -290,9 +290,9 @@ Tox.prototype.addMessage = function (direction, author, message, timestamp) {
   }
 
   const tpl = `<article class="message message-${direction.escape()}">
-    <span class="message-author unselectable ellipsis" title="${_author.escape()}">${_author.escape()}</span>
+    <span class="message-author unselectable ellipsis" aria-hidden="true" title="${_author.escape()}">${_author.escape()}</span>
     <span class="message-content"><div>${emojione.toImage(message.escape().nl2br())}</div></span>
-    <span class="message-timestamp unselectable">${timestamp.escape()}</span>
+    <span class="message-timestamp unselectable" aria-hidden="true">${timestamp.escape()}</span>
   </article>`;
 
   const c = this.chatview.innerHTML;

...
@@ -319,9 +319,9 @@ Tox.prototype.addQuote = function (direction, author, message, timestamp) {
   }
 
   const tpl = `<article class="message message-${direction.escape()}">
-    <span class="message-author unselectable ellipsis" title="${_author.escape()}">${_author.escape()}</span>
+    <span class="message-author unselectable ellipsis" aria-hidden="true" title="${_author.escape()}">${_author.escape()}</span>
     <span class="message-content quote"><div>&gt;${emojione.toImage(message.escape().nl2br())}</div></span>
-    <span class="message-timestamp unselectable">${timestamp.escape()}</span>
+    <span class="message-timestamp unselectable" aria-hidden="true">${timestamp.escape()}</span>
   </article>`;
 
   const c = this.chatview.innerHTML;

...
@@ -348,17 +348,17 @@ Tox.prototype.addFileTransfer = function (direction, author, filename, filesize,
   }
 
   const tpl = `<article class="message message-${direction.escape()}">
-    <span class="message-author unselectable ellipsis" title="${_author.escape()}">${_author.escape()}</span>
+    <span class="message-author unselectable ellipsis" aria-hidden="true" title="${_author.escape()}">${_author.escape()}</span>
     <span class="transfer-content">
-      <span class="transfer-icon unselectable"></span>
+      <span class="transfer-icon unselectable" aria-hidden="true"></span>
       <span class="transfer-name ellipsis">${filename.escape()}</span>
-      <span class="transfer-size">${filesize.escape()}</span>
+      <span class="transfer-size" aria-hidden="true">${filesize.escape()}</span>
       <div class="transfer-actions unselectable">
-        <button class="transfer-accept"></button>
-        <button class="transfer-reject"></button>
+        <button class="transfer-accept" aria-hidden="true" title="Accept file transfer"></button>
+        <button class="transfer-reject" aria-hidden="true" title="Cancel file transfer"></button>
       </div>
     </span>
-    <span class="message-timestamp unselectable">${timestamp.escape()}</span>
+    <span class="message-timestamp unselectable" aria-hidden="true">${timestamp.escape()}</span>
   </article>`;
 
   const c = this.chatview.innerHTML;

new file
app/locales/en.json
@@ -0,0 +1,43 @@
+{
+  "contactslist": {
+    "titles": {
+      "user-profile-avatar": "Change your avatar",
+      "user-profile-status": "Change your status",
+      "menu-add-contact": "Add a contact",
+      "menu-new-group": "Create a group",
+      "menu-show-transfers": "File transers",
+      "menu-show-settings": "Preferences",
+    },
+    "search-contacts-placeholder": "Type to search...",
+  },
+  "chatview": {
+    "titles": {
+      "call-audio": "Audio call",
+      "call-video": "Video call",
+      "choose-emojis": "Open the emoji chooser",
+      "send-file": "Send file",
+      "send-message": "Send message",
+    }
+  },
+  "modals": {
+    "add-contact": {
+      "title": "Add a contact",
+      "toxid-label": "ToxID or alias:",
+      "toxid-placeholder": "Enter your contact ToxID...",
+      "message-label": "Message:",
+      "message-placeholder": "Hey mate, add me and we could talk! :p",
+      "close-modal-tip": "Click anywhere to close the modal",
+      "send-request": "Send the request",
+    }
+  },
+  "status": {
+    "online": "Online",
+    "offline": "Offline",
+    "away": "Away",
+    "busy": "Busy",
+    "blocked": "Blocked",
+  },
+  "misc": {
+    "no-emoji-pattern": "No emoji found for this pattern",
+  }
+}

new file
app/locales/fr.json
@@ -0,0 +1,43 @@
+{
+  "contactslist": {
+    "titles": {
+      "user-profile-avatar": "Changer votre avatar",
+      "user-profile-status": "Changer votre status",
+      "menu-add-contact": "Ajouter un contact",
+      "menu-new-group": "Créer un groupe",
+      "menu-show-transfers": "Transferts de fichiers",
+      "menu-show-settings": "Préferences",
+    },
+    "search-contacts-placeholder": "Rechercher...",
+  },
+  "chatview": {
+    "titles": {
+      "call-audio": "Appel audio",
+      "call-video": "Appel vidéo",
+      "choose-emojis": "Ouvrir le selecteur d'emojis",
+      "send-file": "Envoyer un fichier",
+      "send-message": "Envoyer un message",
+    }
+  },
+  "modals": {
+    "add-contact": {
+      "title": "Ajouter un contact",
+      "toxid-label": "ToxID ou pseudo :",
+      "toxid-placeholder": "Entrer le ToxID de votre contact...",
+      "message-label": "Message :",
+      "message-placeholder": "Salut, ajoutez moi et nous pourrons parler. :p",
+      "close-modal-tip": "Cliquer n'importe où pour fermer",
+      "send-request": "Envoyer la requête",
+    }
+  },
+  "status": {
+    "online": "En ligne",
+    "offline": "Hors-ligne",
+    "away": "Absent",
+    "busy": "Occupé",
+    "blocked": "Bloqué",
+  },
+  "misc": {
+    "no-emoji-pattern": "Aucun emoji ne correspond à ce motif",
+  }
+}

app/main.js
@@ -7,8 +7,6 @@ const BrowserWindow = electron.BrowserWindow;
 // Our internal protocol
 const protocol = "tox";
 
-console.log("main", __dirname);
-
 // Allow right click context menu.
 require('electron-context-menu')({
   showInspectElement: false,

...
@@ -20,22 +18,40 @@ let mainWindow;
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({
+  /*mainWindow = new BrowserWindow({
     width: 960,
     height: 500,
     center: true,
     autoHideMenuBar: true,
+  });*/
+  mainWindow = new BrowserWindow({
+    width: 500,
+    height: 250,
+    center: true,
+    autoHideMenuBar: true,
+    resizable: false,
   });
 
   mainWindow.title = "Tox";
-  mainWindow.setMinimumSize(750, 300);
+  /*mainWindow.setMinimumSize(750, 300);*/
+  mainWindow.setMinimumSize(500, 250);
   //mainWindow.setMenu(null);
 
   proto.registerFileProtocol(protocol, (request, callback) => {
     const url = request.url.substr(protocol.length + 3);
     mainWindow.webContents.send('protocol-activated', url);
-    //callback({ path: path.normalize(__dirname + '/' + url) });
-    console.log('Successfuly registered protocol `' + protocol + '://`');
+    
+    if (url == 'main-window') {
+      mainWindow.setSize(960, 500);
+      mainWindow.setMinimumSize(750, 300);
+      mainWindow.setResizable(true);
+      mainWindow.loadURL(`file://${__dirname}/views/${url}.html`);
+      return;
+    }
+    
+    //mainWindow.loadURL(`file://${__dirname}/views/${url}`);
+    //callback({ path: path.normalize(__dirname + '/views/' + url) });
+    console.log('Successfuly registered protocol `' + protocol + '://' + url + '`', __dirname + '/' + url);
   }, (err) => {
     if (err) {
       console.error('Failed to register internal protocol.', err);

...
@@ -90,7 +106,4 @@ app.on('activate', function () {
   if (mainWindow === null) {
     createWindow()
   }
-})
-
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.
+});

app/views/index.html
@@ -2,239 +2,47 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙</title>
+    <title>Tox</title>
 
-    <link rel="stylesheet" href="../assets/styles/tox.css">
+    <!--<link rel="stylesheet" href="../assets/styles/tox.css">-->
+    <link rel="stylesheet" href="../assets/styles/tox-login.css">
   </head>
   <body>
-    <aside class="unselectable">
-      <section id="user-profile">
-        <img id="user-avatar" src="../assets/images/mockup/avatar-004.png">
-        <div id="user-infos">
-          <span id="user-name" class="ellipsis" tabindex="-1" contenteditable="true">Chips Handon</span>
-          <span id="user-mood" class="ellipsis" tabindex="-1" contenteditable="true">Cracking the code.</span>
-        </div>
-        <button id="user-presence">
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </button>
-      </section>
-      <section id="contacts-list-filters">
-        <label for="contacts-list-search" id="contacts-list-search-label" class="fa fa-search" aria-hidden="true"></label>
-        <input id="contacts-list-search" placeholder="Type to search...">
-        <button id="contacts-list-filter">Online</button>
-      </section>
-      <section id="contacts-list" class="not-compact">
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-001.png">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Kev💙Ashcorp</span>
-            <span class="contact-mood ellipsis">Dropped the ball harder than you could ever believe</span>
-          </div>
-          <div class="contact-presence">
-            <span class="online-notify"></span>
-          </div>
-        </article>
-        <article class="contact active">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-000.png">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Frosty Disco Thunder Winter Bear 💙</span>
-            <span class="contact-mood ellipsis">Working on my new game: Door First!</span>
-          </div>
-          <div class="contact-presence">
-            <span class="online"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-002.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Loli</span>
-            <span class="contact-mood ellipsis">In Britain, some birds are flying</span>
-          </div>
-          <div class="contact-presence">
-            <span class="away"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-005.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Rowedahelicon</span>
-            <span class="contact-mood ellipsis">What's in a word if the...</span>
-          </div>
-          <div class="contact-presence">
-            <span class="away-notify"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-003.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Shag Rogers</span>
-            <span class="contact-mood ellipsis">CAN'T BAG THE SHAG</span>
-          </div>
-          <div class="contact-presence">
-            <span class="busy"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-006.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Chris X</span>
-            <span class="contact-mood ellipsis">Arting, brb</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline-notify"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/mockup/avatar-007.jpg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">David (steamboat)</span>
-            <span class="contact-mood ellipsis">im good</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Tristious</span>
-            <span class="contact-mood ellipsis">thanks</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </article>
-        <article class="contact">
-          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
-          <div class="contact-infos">
-            <span class="contact-name ellipsis">Vincent Estrada</span>
-            <span class="contact-mood ellipsis">txt me if u need me</span>
-          </div>
-          <div class="contact-presence">
-            <span class="offline"></span>
-          </div>
-        </article>
-      </section>
-      <section id="tox-menu">
-        <button id="add-contact"></button>
-        <button id="new-group"></button>
-        <button id="show-transfers"></button>
-        <button id="show-settings"></button>
-      </section>
-    </aside>
-    <main>
-      <header id="chatview-header">
-        <img id="contact-avatar" class="unselectable" src="../assets/images/mockup/avatar-000.png">
-        <div>
-          <span class="contact-name">Frosty Disco Thunder Winter Bear 💙</span>
-          <span class="contact-mood">Working on my new game: Door First!</span>
-        </div>
-        <section id="chatview-header-actions" class="unselectable">
-          <button id="call-audio"></button>
-          <button id="call-video"></button>
+    <div id="wrapper" class="unselectable">
+      <aside id="tox-login-info">
+        <section id="presentation">
+          <div id="tox-logo"></div>
+          <h1>Tox</h1>
+        </section>
+        <section id="links">
+          <a href="tox://main-window">
+            <span class="fa fa-user-plus"></span>
+            Register
+          </a>
+          <!--<a href="#">Settings</a>-->
         </section>
-      </header>
-      <section id="chatview-content"></section>
-      <section id="chatview-is-typing" class="unselectable">
-        <span class="typing-loader"></span>
-        <span class="typing-content">Frosty Disco Thunder Winter Bear 💙 is typing...</span>
-      </section>
-      <footer id="chatview-footer" class="unselectable">
-        <textarea id="chatview-entry" placeholder="Type your message here..."></textarea>
-        <div id="chatview-footer-actions">
-          <button id="chatview-emojis"></button>
-          <button id="chatview-send-file"></button>
+      </aside>
+      <main id="tox-login-container">
+        <!--<div id="profile-errors">
+          <span class="fa fa-exclamation-triangle"></span>
+          Password is incorrect.
+        </div>-->
+        <div id="profile-wrapper">
+          <section id="profile">
+            <div id="profile-avatar" class="avatar-default"></div>
+            <div id="profile-stuff">
+              <input type="text" id="profile-name" placeholder="Profile name...">
+              <input type="password" id="profile-pass" placeholder="Profile decryption password...">
+            </div>
+          </section>
+          <section id="profile-actions">
+            <input type="checkbox" id="remember">
+            <label for="remember">Remember password?</label>
+            
+            <button id="button-login">Login</button>
+          </section>
         </div>
-        <button id="chatview-send-message"></button>
-      </footer>
-    </main>
-    
-    <!-- Overlay + modal -->
-    <div id="overlay" class=""></div>
-    <div id="dialog-wrapper">
-      <dialog id="add-friend-modal" class="hide">
-        <header class="dialog-header unselectable">
-          <span class="fa fa-plus-circle"></span> Add a friend
-        </header>
-        <main class="dialog-content unselectable">
-          <label>ToxID or alias:</label>
-          <input type="text" id="add-friend-modal-toxid" placeholder="Enter your contact ToxID...">
-          
-          <label>Message:</label>
-          <textarea id="add-friend-modal-message" placeholder="Hey mate, add me and we could talk! :p"></textarea>
-          
-          
-        </main>
-        <footer class="dialog-footer unselectable">
-          <span class="dialog-close-tip">Click anywhere to close the modal</span>
-          <button id="add-friend-modal-send" class="send-request green">Send the request</button>
-        </footer>
-      </dialog>
+      </main>
     </div>
-
-    <script src="../helpers/emojiStrategy.js"></script>
-    <script>
-      require('../controllers/renderer.js');
-      
-      // SHAME ON ME FOR USING JQUERY BUT THERE IS NO OTHER SIMPLE WAY :'(
-      $("#chatview-entry").textcomplete([{
-        match: /\B:([\-+\w]*)$/,
-        search: function (term, callback) {
-          var results = [];
-          var results2 = [];
-          var results3 = [];
-          $.each(emojiStrategy, function(shortname,data) {
-            if(shortname.indexOf(term) > -1) { results.push(shortname); }
-            else {
-              if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
-                results2.push(shortname);
-              }
-              else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
-                results3.push(shortname);
-              }
-            }
-          });
-
-          if(term.length >= 3) {
-            results.sort(function(a,b) { return (a.length > b.length); });
-            results2.sort(function(a,b) { return (a.length > b.length); });
-            results3.sort();
-          }
-          var newResults = results.concat(results2).concat(results3);
-
-          callback(newResults);
-        },
-        template: function (shortname) {
-          window.emojiSearch = true;
-          return `${emojione.shortnameToImage(':'+shortname+':')} :${shortname}:`;
-        },
-        replace: function (shortname) {
-          window.emojiSearch = false;
-          return ':'+shortname+': ';
-        },
-        index: 1,
-        maxCount: 5
-      }], {
-        //height: 265,
-        maxCount: 5,
-        placement: 'top',
-        debounce: 500,
-        noResultsMessage: "<small style='padding: 0 10px;'>No emoji found for this pattern.</small>",
-        onKeydown: function (e, commands) {
-          // `commands` has `KEY_UP`, `KEY_DOWN`, `KEY_ENTER`, `KEY_PAGEUP`, `KEY_PAGEDOWN`,
-          // `KEY_ESCAPE` and `SKIP_DEFAULT`.
-          if (e.keyCode === 13) {
-            // Treat CTRL-J as enter key.
-            return commands.KEY_ENTER;
-          } else if (e.keyCode === 27 || e.keyCode === 8) {
-            window.emojiSearch = false;
-          }
-          // If the function does not return a result or undefined is returned,
-          // the plugin uses default behavior.
-        }
-      });
-    </script>
   </body>
 </html>

new file
app/views/main-window.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙</title>
+
+    <link rel="stylesheet" href="../assets/styles/tox.css">
+  </head>
+  <body>
+    <aside class="unselectable">
+      <section id="user-profile">
+        <img id="user-avatar" src="../assets/images/mockup/avatar-004.png">
+        <div id="user-infos">
+          <span id="user-name" class="ellipsis" tabindex="-1" contenteditable="true">Chips Handon</span>
+          <span id="user-mood" class="ellipsis" tabindex="-1" contenteditable="true">Cracking the code.</span>
+        </div>
+        <button id="user-presence" title="Change your status">
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </button>
+      </section>
+      <section id="contacts-list-filters">
+        <label for="contacts-list-search" id="contacts-list-search-label" class="fa fa-search" aria-hidden="true"></label>
+        <input id="contacts-list-search" placeholder="Type to search…">
+        <button id="contacts-list-filter">Online</button>
+      </section>
+      <section id="contacts-list" class="not-compact">
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-001.png">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Kev💙Ashcorp</span>
+            <span class="contact-mood ellipsis">Dropped the ball harder than you could ever believe</span>
+          </div>
+          <div class="contact-presence">
+            <span class="online-notify"></span>
+          </div>
+        </article>
+        <article class="contact active">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-000.png">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Frosty Disco Thunder Winter Bear 💙</span>
+            <span class="contact-mood ellipsis">Working on my new game: Door First!</span>
+          </div>
+          <div class="contact-presence">
+            <span class="online"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-002.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Loli</span>
+            <span class="contact-mood ellipsis">In Britain, some birds are flying</span>
+          </div>
+          <div class="contact-presence">
+            <span class="away"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-005.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Rowedahelicon</span>
+            <span class="contact-mood ellipsis">What's in a word if the...</span>
+          </div>
+          <div class="contact-presence">
+            <span class="away-notify"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-003.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Shag Rogers</span>
+            <span class="contact-mood ellipsis">CAN'T BAG THE SHAG</span>
+          </div>
+          <div class="contact-presence">
+            <span class="busy"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-006.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Chris X</span>
+            <span class="contact-mood ellipsis">Arting, brb</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline-notify"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/mockup/avatar-007.jpg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">David (steamboat)</span>
+            <span class="contact-mood ellipsis">im good</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Tristious</span>
+            <span class="contact-mood ellipsis">thanks</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+        <article class="contact">
+          <img class="contact-avatar" src="../assets/images/icons/default-avatar.svg">
+          <div class="contact-infos">
+            <span class="contact-name ellipsis">Vincent Estrada</span>
+            <span class="contact-mood ellipsis">txt me if u need me</span>
+          </div>
+          <div class="contact-presence">
+            <span class="offline"></span>
+          </div>
+        </article>
+      </section>
+      <section id="tox-menu">
+        <button id="add-contact" title="Add a contact"></button>
+        <button id="new-group" title="Create a group"></button>
+        <button id="show-transfers" title="File transfers"></button>
+        <button id="show-settings" title="Settings"></button>
+      </section>
+    </aside>
+    <main>
+      <header id="chatview-header">
+        <img id="contact-avatar" class="unselectable" src="../assets/images/mockup/avatar-000.png">
+        <div>
+          <span class="contact-name">Frosty Disco Thunder Winter Bear 💙</span>
+          <span class="contact-mood">Working on my new game: Door First!</span>
+        </div>
+        <section id="chatview-header-actions" class="unselectable">
+          <button id="call-audio" title="Audio call"></button>
+          <button id="call-video" title="Video call"></button>
+        </section>
+      </header>
+      <section id="chatview-content"></section>
+      <section id="chatview-is-typing" class="unselectable">
+        <span class="typing-loader"></span>
+        <span class="typing-content">Frosty Disco Thunder Winter Bear 💙 is typing…</span>
+      </section>
+      <footer id="chatview-footer" class="unselectable">
+        <textarea id="chatview-entry" placeholder="Type your message here…"></textarea>
+        <div id="chatview-footer-actions">
+          <button id="chatview-emojis" title="Open the emoji chooser"></button>
+          <button id="chatview-send-file" title="Send file"></button>
+        </div>
+        <button id="chatview-send-message" title="Send message"></button>
+      </footer>
+    </main>
+    
+    <!-- Overlay + modal -->
+    <div id="overlay" class=""></div>
+    <div id="dialog-wrapper">
+      <dialog id="add-friend-modal" class="hide">
+        <header class="dialog-header unselectable">
+          <span class="fa fa-plus-circle"></span> Add a contact
+        </header>
+        <main class="dialog-content unselectable">
+          <label>ToxID or alias:</label>
+          <input type="text" id="add-friend-modal-toxid" placeholder="Enter a ToxID or an alias...">
+          
+          <label>Message:</label>
+          <textarea id="add-friend-modal-message" placeholder="Hey mate, add me and we could talk! :p"></textarea>
+          
+          
+        </main>
+        <footer class="dialog-footer unselectable">
+          <span class="dialog-close-tip">Click anywhere to close the modal</span>
+          <button id="add-friend-modal-send" class="send-request green">Send the request</button>
+        </footer>
+      </dialog>
+    </div>
+
+    <script src="../helpers/emojiStrategy.js"></script>
+    <script>
+      require('../controllers/renderer.js');
+      
+      // SHAME ON ME FOR USING JQUERY BUT THERE IS NO OTHER SIMPLE WAY :'(
+      $("#chatview-entry").textcomplete([{
+        match: /\B:([\-+\w]*)$/,
+        search: function (term, callback) {
+          var results = [];
+          var results2 = [];
+          var results3 = [];
+          $.each(emojiStrategy, function(shortname,data) {
+            if(shortname.indexOf(term) > -1) { results.push(shortname); }
+            else {
+              if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
+                results2.push(shortname);
+              }
+              else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
+                results3.push(shortname);
+              }
+            }
+          });
+
+          if(term.length >= 3) {
+            results.sort(function(a,b) { return (a.length > b.length); });
+            results2.sort(function(a,b) { return (a.length > b.length); });
+            results3.sort();
+          }
+          var newResults = results.concat(results2).concat(results3);
+
+          callback(newResults);
+        },
+        template: function (shortname) {
+          window.emojiSearch = true;
+          return `${emojione.shortnameToImage(':'+shortname+':')} :${shortname}:`;
+        },
+        replace: function (shortname) {
+          window.emojiSearch = false;
+          return ':'+shortname+': ';
+        },
+        index: 1,
+        maxCount: 5
+      }], {
+        //height: 265,
+        maxCount: 5,
+        placement: 'top',
+        debounce: 500,
+        noResultsMessage: "<small style='padding: 0 10px;'>No emoji found for this pattern.</small>",
+        onKeydown: function (e, commands) {
+          // `commands` has `KEY_UP`, `KEY_DOWN`, `KEY_ENTER`, `KEY_PAGEUP`, `KEY_PAGEDOWN`,
+          // `KEY_ESCAPE` and `SKIP_DEFAULT`.
+          if (e.keyCode === 13) {
+            // Treat CTRL-J as enter key.
+            return commands.KEY_ENTER;
+          } else if (e.keyCode === 27 || e.keyCode === 8) {
+            window.emojiSearch = false;
+          }
+          // If the function does not return a result or undefined is returned,
+          // the plugin uses default behavior.
+        }
+      });
+    </script>
+  </body>
+</html>

file deleted
app/views/test.html
@@ -1 +0,0 @@
-<h1>It works!</h1>

package.json
@@ -33,7 +33,8 @@
     "url": "https://github.com/SkyzohKey/Tox-client/issues"
   },
   "devDependencies": {
-    "electron-prebuilt": "^1.2.0"
+    "electron-prebuilt": "^1.2.0",
+    "electron-reload": "^1.0.1"
   },
   "dependencies": {
     "date-format": "0.0.2",

GitFOSS • v0.2.0 (#7b50ebe) • MIT License

"},{"type":"del","del":true,"oldLine":178,"position":213,"content":"- "},{"type":"normal","normal":true,"oldLine":239,"newLine":47,"position":274,"content":" "},{"type":"normal","normal":true,"oldLine":240,"newLine":48,"position":275,"content":" "}],"oldStart":2,"oldLines":239,"newStart":2,"newLines":47}],"deletions":228,"additions":36,"index":["ae2d466..eed54d1","100644"]},{"from":"/dev/null","to":"app/views/main-window.html","chunks":[{"content":"@@ -0,0 +1,240 @@","changes":[{"type":"add","add":true,"newLine":1,"position":1,"content":"+"},{"type":"add","add":true,"newLine":2,"position":2,"content":"+"},{"type":"add","add":true,"newLine":3,"position":3,"content":"+ "},{"type":"add","add":true,"newLine":4,"position":4,"content":"+ "},{"type":"add","add":true,"newLine":5,"position":5,"content":"+ Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙"},{"type":"add","add":true,"newLine":6,"position":6,"content":"+"},{"type":"add","add":true,"newLine":7,"position":7,"content":"+ "},{"type":"add","add":true,"newLine":8,"position":8,"content":"+ "},{"type":"add","add":true,"newLine":9,"position":9,"content":"+ "},{"type":"add","add":true,"newLine":10,"position":10,"content":"+ "},{"type":"add","add":true,"newLine":127,"position":127,"content":"+
"},{"type":"add","add":true,"newLine":128,"position":128,"content":"+
"},{"type":"add","add":true,"newLine":129,"position":129,"content":"+ "},{"type":"add","add":true,"newLine":130,"position":130,"content":"+
"},{"type":"add","add":true,"newLine":131,"position":131,"content":"+ Frosty Disco Thunder Winter Bear 💙"},{"type":"add","add":true,"newLine":132,"position":132,"content":"+ Working on my new game: Door First!"},{"type":"add","add":true,"newLine":133,"position":133,"content":"+
"},{"type":"add","add":true,"newLine":134,"position":134,"content":"+
"},{"type":"add","add":true,"newLine":135,"position":135,"content":"+ "},{"type":"add","add":true,"newLine":136,"position":136,"content":"+ "},{"type":"add","add":true,"newLine":137,"position":137,"content":"+
"},{"type":"add","add":true,"newLine":138,"position":138,"content":"+
"},{"type":"add","add":true,"newLine":139,"position":139,"content":"+
"},{"type":"add","add":true,"newLine":140,"position":140,"content":"+
"},{"type":"add","add":true,"newLine":141,"position":141,"content":"+ "},{"type":"add","add":true,"newLine":142,"position":142,"content":"+ Frosty Disco Thunder Winter Bear 💙 is typing…"},{"type":"add","add":true,"newLine":143,"position":143,"content":"+
"},{"type":"add","add":true,"newLine":144,"position":144,"content":"+ "},{"type":"add","add":true,"newLine":152,"position":152,"content":"+
"},{"type":"add","add":true,"newLine":153,"position":153,"content":"+ "},{"type":"add","add":true,"newLine":154,"position":154,"content":"+ "},{"type":"add","add":true,"newLine":155,"position":155,"content":"+
"},{"type":"add","add":true,"newLine":156,"position":156,"content":"+
"},{"type":"add","add":true,"newLine":157,"position":157,"content":"+ "},{"type":"add","add":true,"newLine":158,"position":158,"content":"+
"},{"type":"add","add":true,"newLine":159,"position":159,"content":"+ Add a contact"},{"type":"add","add":true,"newLine":160,"position":160,"content":"+
"},{"type":"add","add":true,"newLine":161,"position":161,"content":"+
"},{"type":"add","add":true,"newLine":162,"position":162,"content":"+ "},{"type":"add","add":true,"newLine":163,"position":163,"content":"+ "},{"type":"add","add":true,"newLine":164,"position":164,"content":"+ "},{"type":"add","add":true,"newLine":165,"position":165,"content":"+ "},{"type":"add","add":true,"newLine":166,"position":166,"content":"+ "},{"type":"add","add":true,"newLine":167,"position":167,"content":"+ "},{"type":"add","add":true,"newLine":168,"position":168,"content":"+ "},{"type":"add","add":true,"newLine":169,"position":169,"content":"+
"},{"type":"add","add":true,"newLine":170,"position":170,"content":"+ "},{"type":"add","add":true,"newLine":174,"position":174,"content":"+
"},{"type":"add","add":true,"newLine":175,"position":175,"content":"+
"},{"type":"add","add":true,"newLine":176,"position":176,"content":"+"},{"type":"add","add":true,"newLine":177,"position":177,"content":"+ "},{"type":"add","add":true,"newLine":178,"position":178,"content":"+ "},{"type":"add","add":true,"newLine":239,"position":239,"content":"+ "},{"type":"add","add":true,"newLine":240,"position":240,"content":"+"}],"oldStart":0,"oldLines":0,"newStart":1,"newLines":240}],"deletions":0,"additions":240,"new":true,"index":["0000000..25ea786"]},{"from":"app/views/test.html","to":"/dev/null","chunks":[{"content":"@@ -1 +0,0 @@","changes":[{"type":"del","del":true,"oldLine":1,"position":1,"content":"-

It works!

"}],"oldStart":1,"oldLines":0,"newStart":0,"newLines":0}],"deletions":1,"additions":0,"deleted":true,"index":["dd60957..0000000"]},{"from":"package.json","to":"package.json","chunks":[{"content":"@@ -33,7 +33,8 @@","changes":[{"type":"normal","normal":true,"oldLine":33,"newLine":33,"position":1,"content":" \"url\": \"https://github.com/SkyzohKey/Tox-client/issues\""},{"type":"normal","normal":true,"oldLine":34,"newLine":34,"position":2,"content":" },"},{"type":"normal","normal":true,"oldLine":35,"newLine":35,"position":3,"content":" \"devDependencies\": {"},{"type":"del","del":true,"oldLine":36,"position":4,"content":"- \"electron-prebuilt\": \"^1.2.0\""},{"type":"add","add":true,"newLine":36,"position":5,"content":"+ \"electron-prebuilt\": \"^1.2.0\","},{"type":"add","add":true,"newLine":37,"position":6,"content":"+ \"electron-reload\": \"^1.0.1\""},{"type":"normal","normal":true,"oldLine":37,"newLine":38,"position":7,"content":" },"},{"type":"normal","normal":true,"oldLine":38,"newLine":39,"position":8,"content":" \"dependencies\": {"},{"type":"normal","normal":true,"oldLine":39,"newLine":40,"position":9,"content":" \"date-format\": \"0.0.2\","}],"oldStart":33,"oldLines":7,"newStart":33,"newLines":8}],"deletions":1,"additions":2,"index":["ef6d3de..2bde1a6","100644"]}],"themeScheme":"light","orgSlug":"skz","repoSlug":"tox-client","commitHash":"a89019df77f89a8856ab89b3de835a993aa7038e"}, "Code$$0": {"code":"@@ -0,0 +1,50 @@\n+\n+\n+\n+image/svg+xml\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$1": {"code":"@@ -0,0 +1,59 @@\n+.unselectable {\n+ -webkit-user-select: none;\n+ cursor: default;\n+}\n+.ellipsis {\n+ display: inline-block;\n+ white-space: nowrap;\n+ min-width: 0;\n+ width: 100%;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+ box-sizing: border-box;\n+}\n+\n+/**\n+* Helpers.\n+**/\n+button {\n+ background-color: #6BC260;\n+ border: none;\n+ color: #fff;\n+ cursor: pointer;\n+}\n+button:hover {\n+ background-color: #8edb84 !important;\n+}\n+button:active {\n+ background-color: #27ae60 !important;\n+}\n+\n+.emojione {\n+ width: 16px;\n+ height: 16px;\n+\n+ position: relative;\n+ top: 2px;\n+}\n+\n+.green {\n+ background-color: #6BC260 !important;\n+ color: #ffffff !important;\n+}\n+.green:hover {\n+ background-color: #8edb84 !important;\n+}\n+.green:active {\n+ background-color: #27ae60 !important;\n+}\n+.red {\n+ background-color: #e74c3c !important;\n+ color: #ffffff !important;\n+}\n+.red:hover {\n+ background-color: #f38175 !important;\n+}\n+.red:active {\n+ background-color: #ef2929 !important;\n+}\n+\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$2": {"code":"@@ -0,0 +1,237 @@\n+@import 'helpers.css';\n+@import 'fa.css';\n+@import 'fonts.css';\n+\n+/**\n+* HTML reset.\n+**/\n+* {\n+ box-sizing: border-box;\n+ font-family: Aller;\n+}\n+*:focus, *:active {\n+ outline: none;\n+}\n+\n+html, body, #wrapper {\n+ width: 100vw;\n+ height: 100vh;\n+\n+ margin: 0;\n+ padding: 0;\n+}\n+\n+.fa {\n+ margin-right: 10px;\n+ font-size: 12px;\n+}\n+.error {\n+ border: 1px solid #e74c3c !important;\n+}\n+\n+#wrapper {\n+ display: flex;\n+ flex-direction: row;\n+}\n+\n+#tox-login-info {\n+ display: flex;\n+ flex-direction: column;\n+ justify-content: center;\n+ align-items: center;\n+ \n+ flex: 0 0 150px;\n+ \n+ text-align: center;\n+ background-color: #333333;\n+}\n+#tox-login-info #presentation {\n+ display: flex;\n+ flex: 1;\n+ align-items: center;\n+ justify-content: center;\n+ align-self: center;\n+ flex-direction: column;\n+ \n+ width: 100%;\n+ padding: 10px;\n+}\n+#tox-login-info #presentation #tox-logo {\n+ width: 60px;\n+ height: 80px;\n+ \n+ background: transparent url('../images/tox-logo.svg') no-repeat center center;\n+ background-size: 60px 80px;\n+}\n+#tox-login-info #presentation h1 {\n+ display: flex;\n+ align-items: center;\n+ \n+ margin: 0;\n+ \n+ color: #fff;\n+ font-size: 48px;\n+}\n+#tox-login-info #links {\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ align-self: center;\n+ flex-direction: column;\n+ \n+ width: 100%; \n+}\n+#tox-login-info #links a {\n+ height:30px;\n+ width: 100%;\n+ \n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ \n+ background-color: #222;\n+ border-bottom: 1px solid #171717;\n+ color: #fff;\n+ text-decoration: none;\n+}\n+#tox-login-info #links a:hover {\n+ background-color: #444;\n+}\n+#tox-login-info #links a:active {\n+ background-color: #171717;\n+}\n+#tox-login-container {\n+ height: 100vh;\n+ display: flex;\n+ flex: 1;\n+ flex-direction: column;\n+ align-content: center;\n+ align-self: initial;\n+ align-items: stretch;\n+ \n+ padding: 20px;\n+ \n+ color: #fff;\n+ text-align: center;\n+ background: url('../images/login-background.png') no-repeat center center /cover;\n+ justify-content: center;\n+}\n+#tox-login-container #profile-errors {\n+ display: flex;\n+ flex-direction: row;\n+ justify-content: center;\n+ align-items: center;\n+ align-content: center;\n+ \n+ margin-bottom: 10px;\n+ padding: 5px 10px;\n+ \n+ background-color: #e74c3c;\n+ border-radius: 5px;\n+ color: #fff;\n+ font-size: 12px;\n+}\n+#tox-login-container #profile-wrapper {\n+ display: flex;\n+ flex-direction: column;\n+ \n+ padding: 10px;\n+ \n+ background-color: #eee;\n+ border-radius: 5px;\n+ color: #171717;\n+}\n+#tox-login-container #profile {\n+ display: flex;\n+ flex-direction: row;\n+ \n+ margin-bottom: 10px;\n+}\n+#tox-login-container #profile-avatar {\n+ width: 55px;\n+ height: 55px;\n+ \n+ margin: 0 10px 0 0;\n+ padding: 0;\n+ \n+ border-radius: 5px;\n+ /*border: 1px solid #ccc;*/\n+ \n+ background: transparent url('../images/mockup/avatar-004.png') no-repeat center center;\n+ background-size: 55px 55px;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff {\n+ display: flex;\n+ flex: 1;\n+ flex-direction: column;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff input:first-child {\n+ margin-bottom: 4px;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff input {\n+ height: 26px;\n+ padding: 0 5px;\n+\n+ border: 1px solid #ccc;\n+ border-radius: 5px;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff input:focus {\n+ border: 1px solid #3498db !important;\n+}\n+#tox-login-container #profile-actions {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+}\n+#tox-login-container #profile-actions label {\n+ font-weight: lighter;\n+ font-size: 12px;\n+ line-height: 18px;\n+ cursor: pointer;\n+}\n+#tox-login-container #profile-actions label::after {\n+ content: \"|\";\n+ height: 100%;\n+ width: 2px;\n+ /* background-color: red; */\n+ margin: 0 10px;\n+ color: #bbb;\n+}\n+\n+#tox-login-container #profile-actions button {\n+ flex: 1;\n+ padding: 3px 5px;\n+\n+ background-color: #6BC260;\n+ border: none;\n+ border-radius: 5px;\n+ color: #ffffff;\n+ cursor: pointer;\n+ font-weight: bold;\n+}\n+#tox-login-container #profile-actions button:hover {\n+ background-color: #8edb84 !important;\n+}\n+#tox-login-container #profile-actions button:active {\n+ background-color: #27ae60 !important;\n+}\n+\n+#register-link {\n+ display: flex;\n+ flex-direction: row;\n+ justify-content: center;\n+ \n+ margin: 10px 0 0 0;\n+ padding: 5px;\n+ \n+ /*background-color: #eee;*/\n+ border-radius: 5px;\n+ color: #171717;\n+ font-size: 12px;\n+}\n+\n+\n+\n+\n+\n+\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$3": {"code":"@@ -3,6 +3,7 @@\n **/\n @import 'fonts.css';\n @import 'fa.css';\n+@import 'helpers.css';\n \n /**\n * HTML reset.\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$4": {"code":"@@ -22,64 +23,6 @@ html, body {\n display: flex;\n flex: 1;\n }\n-.unselectable {\n- -webkit-user-select: none;\n- cursor: default;\n-}\n-.ellipsis {\n- display: inline-block;\n- white-space: nowrap;\n- min-width: 0;\n- width: 100%;\n- overflow: hidden;\n- text-overflow: ellipsis;\n- box-sizing: border-box;\n-}\n-\n-/**\n-* Helpers.\n-**/\n-button {\n- background-color: #6BC260;\n- border: none;\n- color: #fff;\n- cursor: pointer;\n-}\n-button:hover {\n- background-color: #8edb84 !important;\n-}\n-button:active {\n- background-color: #27ae60 !important;\n-}\n-\n-.emojione {\n- width: 16px;\n- height: 16px;\n-\n- position: relative;\n- top: 2px;\n-}\n-\n-.green {\n- background-color: #6BC260 !important;\n- color: #ffffff !important;\n-}\n-.green:hover {\n- background-color: #8edb84 !important;\n-}\n-.green:active {\n- background-color: #27ae60 !important;\n-}\n-.red {\n- background-color: #e74c3c !important;\n- color: #ffffff !important;\n-}\n-.red:hover {\n- background-color: #f38175 !important;\n-}\n-.red:active {\n- background-color: #ef2929 !important;\n-}\n \n /**\n * Left sidebar.\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$5": {"code":"@@ -356,7 +299,7 @@ aside {\n color: #fff;\n }\n #tox-menu button:hover {\n- background-color: #333333 !important;\n+ background-color: /*#333333*/ #6BC260 !important;\n opacity: 1;\n }\n #tox-menu #add-contact {\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$6": {"code":"@@ -290,9 +290,9 @@ Tox.prototype.addMessage = function (direction, author, message, timestamp) {\n }\n \n const tpl = `
\n- ${_author.escape()}\n+ ${_author.escape()}\n
${emojione.toImage(message.escape().nl2br())}
\n- ${timestamp.escape()}\n+ ${timestamp.escape()}\n
`;\n \n const c = this.chatview.innerHTML;\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$7": {"code":"@@ -319,9 +319,9 @@ Tox.prototype.addQuote = function (direction, author, message, timestamp) {\n }\n \n const tpl = `
\n- ${_author.escape()}\n+ ${_author.escape()}\n
>${emojione.toImage(message.escape().nl2br())}
\n- ${timestamp.escape()}\n+ ${timestamp.escape()}\n
`;\n \n const c = this.chatview.innerHTML;\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$8": {"code":"@@ -348,17 +348,17 @@ Tox.prototype.addFileTransfer = function (direction, author, filename, filesize,\n }\n \n const tpl = `
\n- ${_author.escape()}\n+ ${_author.escape()}\n \n- \n+ \n ${filename.escape()}\n- ${filesize.escape()}\n+ ${filesize.escape()}\n
\n- \n- \n+ \n+ \n
\n
\n- ${timestamp.escape()}\n+ ${timestamp.escape()}\n
`;\n \n const c = this.chatview.innerHTML;\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$9": {"code":"@@ -0,0 +1,43 @@\n+{\n+ \"contactslist\": {\n+ \"titles\": {\n+ \"user-profile-avatar\": \"Change your avatar\",\n+ \"user-profile-status\": \"Change your status\",\n+ \"menu-add-contact\": \"Add a contact\",\n+ \"menu-new-group\": \"Create a group\",\n+ \"menu-show-transfers\": \"File transers\",\n+ \"menu-show-settings\": \"Preferences\",\n+ },\n+ \"search-contacts-placeholder\": \"Type to search...\",\n+ },\n+ \"chatview\": {\n+ \"titles\": {\n+ \"call-audio\": \"Audio call\",\n+ \"call-video\": \"Video call\",\n+ \"choose-emojis\": \"Open the emoji chooser\",\n+ \"send-file\": \"Send file\",\n+ \"send-message\": \"Send message\",\n+ }\n+ },\n+ \"modals\": {\n+ \"add-contact\": {\n+ \"title\": \"Add a contact\",\n+ \"toxid-label\": \"ToxID or alias:\",\n+ \"toxid-placeholder\": \"Enter your contact ToxID...\",\n+ \"message-label\": \"Message:\",\n+ \"message-placeholder\": \"Hey mate, add me and we could talk! :p\",\n+ \"close-modal-tip\": \"Click anywhere to close the modal\",\n+ \"send-request\": \"Send the request\",\n+ }\n+ },\n+ \"status\": {\n+ \"online\": \"Online\",\n+ \"offline\": \"Offline\",\n+ \"away\": \"Away\",\n+ \"busy\": \"Busy\",\n+ \"blocked\": \"Blocked\",\n+ },\n+ \"misc\": {\n+ \"no-emoji-pattern\": \"No emoji found for this pattern\",\n+ }\n+}\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$10": {"code":"@@ -0,0 +1,43 @@\n+{\n+ \"contactslist\": {\n+ \"titles\": {\n+ \"user-profile-avatar\": \"Changer votre avatar\",\n+ \"user-profile-status\": \"Changer votre status\",\n+ \"menu-add-contact\": \"Ajouter un contact\",\n+ \"menu-new-group\": \"Créer un groupe\",\n+ \"menu-show-transfers\": \"Transferts de fichiers\",\n+ \"menu-show-settings\": \"Préferences\",\n+ },\n+ \"search-contacts-placeholder\": \"Rechercher...\",\n+ },\n+ \"chatview\": {\n+ \"titles\": {\n+ \"call-audio\": \"Appel audio\",\n+ \"call-video\": \"Appel vidéo\",\n+ \"choose-emojis\": \"Ouvrir le selecteur d'emojis\",\n+ \"send-file\": \"Envoyer un fichier\",\n+ \"send-message\": \"Envoyer un message\",\n+ }\n+ },\n+ \"modals\": {\n+ \"add-contact\": {\n+ \"title\": \"Ajouter un contact\",\n+ \"toxid-label\": \"ToxID ou pseudo :\",\n+ \"toxid-placeholder\": \"Entrer le ToxID de votre contact...\",\n+ \"message-label\": \"Message :\",\n+ \"message-placeholder\": \"Salut, ajoutez moi et nous pourrons parler. :p\",\n+ \"close-modal-tip\": \"Cliquer n'importe où pour fermer\",\n+ \"send-request\": \"Envoyer la requête\",\n+ }\n+ },\n+ \"status\": {\n+ \"online\": \"En ligne\",\n+ \"offline\": \"Hors-ligne\",\n+ \"away\": \"Absent\",\n+ \"busy\": \"Occupé\",\n+ \"blocked\": \"Bloqué\",\n+ },\n+ \"misc\": {\n+ \"no-emoji-pattern\": \"Aucun emoji ne correspond à ce motif\",\n+ }\n+}\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$11": {"code":"@@ -7,8 +7,6 @@ const BrowserWindow = electron.BrowserWindow;\n // Our internal protocol\n const protocol = \"tox\";\n \n-console.log(\"main\", __dirname);\n-\n // Allow right click context menu.\n require('electron-context-menu')({\n showInspectElement: false,\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$12": {"code":"@@ -20,22 +18,40 @@ let mainWindow;\n \n function createWindow () {\n // Create the browser window.\n- mainWindow = new BrowserWindow({\n+ /*mainWindow = new BrowserWindow({\n width: 960,\n height: 500,\n center: true,\n autoHideMenuBar: true,\n+ });*/\n+ mainWindow = new BrowserWindow({\n+ width: 500,\n+ height: 250,\n+ center: true,\n+ autoHideMenuBar: true,\n+ resizable: false,\n });\n \n mainWindow.title = \"Tox\";\n- mainWindow.setMinimumSize(750, 300);\n+ /*mainWindow.setMinimumSize(750, 300);*/\n+ mainWindow.setMinimumSize(500, 250);\n //mainWindow.setMenu(null);\n \n proto.registerFileProtocol(protocol, (request, callback) => {\n const url = request.url.substr(protocol.length + 3);\n mainWindow.webContents.send('protocol-activated', url);\n- //callback({ path: path.normalize(__dirname + '/' + url) });\n- console.log('Successfuly registered protocol `' + protocol + '://`');\n+ \n+ if (url == 'main-window') {\n+ mainWindow.setSize(960, 500);\n+ mainWindow.setMinimumSize(750, 300);\n+ mainWindow.setResizable(true);\n+ mainWindow.loadURL(`file://${__dirname}/views/${url}.html`);\n+ return;\n+ }\n+ \n+ //mainWindow.loadURL(`file://${__dirname}/views/${url}`);\n+ //callback({ path: path.normalize(__dirname + '/views/' + url) });\n+ console.log('Successfuly registered protocol `' + protocol + '://' + url + '`', __dirname + '/' + url);\n }, (err) => {\n if (err) {\n console.error('Failed to register internal protocol.', err);\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$13": {"code":"@@ -90,7 +106,4 @@ app.on('activate', function () {\n if (mainWindow === null) {\n createWindow()\n }\n-})\n-\n-// In this file you can include the rest of your app's specific main process\n-// code. You can also put them in separate files and require them here.\n+});\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$14": {"code":"@@ -2,239 +2,47 @@\n \n \n \n- Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙\n+ Tox\n \n- \n+ \n+ \n \n \n- \n-
\n-
\n- \n-
\n- Frosty Disco Thunder Winter Bear 💙\n- Working on my new game: Door First!\n-
\n-
\n- \n- \n+
\n+
\n-
\n-
\n- \n- Frosty Disco Thunder Winter Bear 💙 is typing...\n-
\n-
\n- \n-
\n-
\n- \n- \n-
\n-
\n- \n-
\n- Add a friend\n-
\n-
\n- \n- \n- \n- \n- \n- \n- \n-
\n-
\n- Click anywhere to close the modal\n- \n-
\n-
\n+ \n
\n-\n- \n- \n \n \n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$15": {"code":"@@ -0,0 +1,240 @@\n+\n+\n+ \n+ \n+ Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙\n+\n+ \n+ \n+ \n+ \n+
\n+
\n+ \n+
\n+ Frosty Disco Thunder Winter Bear 💙\n+ Working on my new game: Door First!\n+
\n+
\n+ \n+ \n+
\n+
\n+
\n+
\n+ \n+ Frosty Disco Thunder Winter Bear 💙 is typing…\n+
\n+
\n+ \n+ \n+ \n+
\n+
\n+ \n+ \n+
\n+
\n+ \n+
\n+ Add a contact\n+
\n+
\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+
\n+
\n+ Click anywhere to close the modal\n+ \n+
\n+
\n+
\n+\n+ \n+ \n+ \n+\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$16": {"code":"@@ -1 +0,0 @@\n-

It works!

\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$17": {"code":"@@ -33,7 +33,8 @@\n \"url\": \"https://github.com/SkyzohKey/Tox-client/issues\"\n },\n \"devDependencies\": {\n- \"electron-prebuilt\": \"^1.2.0\"\n+ \"electron-prebuilt\": \"^1.2.0\",\n+ \"electron-reload\": \"^1.0.1\"\n },\n \"dependencies\": {\n \"date-format\": \"0.0.2\",\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, }; function afterRevival(revivalResults) { return undefined; } $IslandsRuntime.reviveIslands(islands, islandsProps, islandsEls) .then(afterRevival) .catch(afterRevival); })(IslandsRuntime);"},{"type":"del","del":true,"oldLine":178,"position":213,"content":"- "},{"type":"normal","normal":true,"oldLine":239,"newLine":47,"position":274,"content":" "},{"type":"normal","normal":true,"oldLine":240,"newLine":48,"position":275,"content":" "}],"oldStart":2,"oldLines":239,"newStart":2,"newLines":47}],"deletions":228,"additions":36,"index":["ae2d466..eed54d1","100644"]},{"from":"/dev/null","to":"app/views/main-window.html","chunks":[{"content":"@@ -0,0 +1,240 @@","changes":[{"type":"add","add":true,"newLine":1,"position":1,"content":"+"},{"type":"add","add":true,"newLine":2,"position":2,"content":"+"},{"type":"add","add":true,"newLine":3,"position":3,"content":"+ "},{"type":"add","add":true,"newLine":4,"position":4,"content":"+ "},{"type":"add","add":true,"newLine":5,"position":5,"content":"+ Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙"},{"type":"add","add":true,"newLine":6,"position":6,"content":"+"},{"type":"add","add":true,"newLine":7,"position":7,"content":"+ "},{"type":"add","add":true,"newLine":8,"position":8,"content":"+ "},{"type":"add","add":true,"newLine":9,"position":9,"content":"+ "},{"type":"add","add":true,"newLine":10,"position":10,"content":"+ "},{"type":"add","add":true,"newLine":127,"position":127,"content":"+
"},{"type":"add","add":true,"newLine":128,"position":128,"content":"+
"},{"type":"add","add":true,"newLine":129,"position":129,"content":"+ "},{"type":"add","add":true,"newLine":130,"position":130,"content":"+
"},{"type":"add","add":true,"newLine":131,"position":131,"content":"+ Frosty Disco Thunder Winter Bear 💙"},{"type":"add","add":true,"newLine":132,"position":132,"content":"+ Working on my new game: Door First!"},{"type":"add","add":true,"newLine":133,"position":133,"content":"+
"},{"type":"add","add":true,"newLine":134,"position":134,"content":"+
"},{"type":"add","add":true,"newLine":135,"position":135,"content":"+ "},{"type":"add","add":true,"newLine":136,"position":136,"content":"+ "},{"type":"add","add":true,"newLine":137,"position":137,"content":"+
"},{"type":"add","add":true,"newLine":138,"position":138,"content":"+
"},{"type":"add","add":true,"newLine":139,"position":139,"content":"+
"},{"type":"add","add":true,"newLine":140,"position":140,"content":"+
"},{"type":"add","add":true,"newLine":141,"position":141,"content":"+ "},{"type":"add","add":true,"newLine":142,"position":142,"content":"+ Frosty Disco Thunder Winter Bear 💙 is typing…"},{"type":"add","add":true,"newLine":143,"position":143,"content":"+
"},{"type":"add","add":true,"newLine":144,"position":144,"content":"+
"},{"type":"add","add":true,"newLine":145,"position":145,"content":"+ "},{"type":"add","add":true,"newLine":146,"position":146,"content":"+ "},{"type":"add","add":true,"newLine":150,"position":150,"content":"+ "},{"type":"add","add":true,"newLine":151,"position":151,"content":"+
"},{"type":"add","add":true,"newLine":152,"position":152,"content":"+
"},{"type":"add","add":true,"newLine":153,"position":153,"content":"+ "},{"type":"add","add":true,"newLine":154,"position":154,"content":"+ "},{"type":"add","add":true,"newLine":155,"position":155,"content":"+
"},{"type":"add","add":true,"newLine":156,"position":156,"content":"+
"},{"type":"add","add":true,"newLine":157,"position":157,"content":"+ "},{"type":"add","add":true,"newLine":158,"position":158,"content":"+
"},{"type":"add","add":true,"newLine":159,"position":159,"content":"+ Add a contact"},{"type":"add","add":true,"newLine":160,"position":160,"content":"+
"},{"type":"add","add":true,"newLine":161,"position":161,"content":"+
"},{"type":"add","add":true,"newLine":162,"position":162,"content":"+ "},{"type":"add","add":true,"newLine":163,"position":163,"content":"+ "},{"type":"add","add":true,"newLine":164,"position":164,"content":"+ "},{"type":"add","add":true,"newLine":165,"position":165,"content":"+ "},{"type":"add","add":true,"newLine":166,"position":166,"content":"+ "},{"type":"add","add":true,"newLine":167,"position":167,"content":"+ "},{"type":"add","add":true,"newLine":168,"position":168,"content":"+ "},{"type":"add","add":true,"newLine":169,"position":169,"content":"+
"},{"type":"add","add":true,"newLine":170,"position":170,"content":"+
"},{"type":"add","add":true,"newLine":171,"position":171,"content":"+ Click anywhere to close the modal"},{"type":"add","add":true,"newLine":172,"position":172,"content":"+ "},{"type":"add","add":true,"newLine":173,"position":173,"content":"+
"},{"type":"add","add":true,"newLine":174,"position":174,"content":"+
"},{"type":"add","add":true,"newLine":175,"position":175,"content":"+
"},{"type":"add","add":true,"newLine":176,"position":176,"content":"+"},{"type":"add","add":true,"newLine":177,"position":177,"content":"+ "},{"type":"add","add":true,"newLine":178,"position":178,"content":"+ "},{"type":"add","add":true,"newLine":239,"position":239,"content":"+ "},{"type":"add","add":true,"newLine":240,"position":240,"content":"+"}],"oldStart":0,"oldLines":0,"newStart":1,"newLines":240}],"deletions":0,"additions":240,"new":true,"index":["0000000..25ea786"]},{"from":"app/views/test.html","to":"/dev/null","chunks":[{"content":"@@ -1 +0,0 @@","changes":[{"type":"del","del":true,"oldLine":1,"position":1,"content":"-

It works!

"}],"oldStart":1,"oldLines":0,"newStart":0,"newLines":0}],"deletions":1,"additions":0,"deleted":true,"index":["dd60957..0000000"]},{"from":"package.json","to":"package.json","chunks":[{"content":"@@ -33,7 +33,8 @@","changes":[{"type":"normal","normal":true,"oldLine":33,"newLine":33,"position":1,"content":" \"url\": \"https://github.com/SkyzohKey/Tox-client/issues\""},{"type":"normal","normal":true,"oldLine":34,"newLine":34,"position":2,"content":" },"},{"type":"normal","normal":true,"oldLine":35,"newLine":35,"position":3,"content":" \"devDependencies\": {"},{"type":"del","del":true,"oldLine":36,"position":4,"content":"- \"electron-prebuilt\": \"^1.2.0\""},{"type":"add","add":true,"newLine":36,"position":5,"content":"+ \"electron-prebuilt\": \"^1.2.0\","},{"type":"add","add":true,"newLine":37,"position":6,"content":"+ \"electron-reload\": \"^1.0.1\""},{"type":"normal","normal":true,"oldLine":37,"newLine":38,"position":7,"content":" },"},{"type":"normal","normal":true,"oldLine":38,"newLine":39,"position":8,"content":" \"dependencies\": {"},{"type":"normal","normal":true,"oldLine":39,"newLine":40,"position":9,"content":" \"date-format\": \"0.0.2\","}],"oldStart":33,"oldLines":7,"newStart":33,"newLines":8}],"deletions":1,"additions":2,"index":["ef6d3de..2bde1a6","100644"]}],"themeScheme":"light","orgSlug":"skz","repoSlug":"tox-client","commitHash":"a89019df77f89a8856ab89b3de835a993aa7038e"}, "Code$$0": {"code":"@@ -0,0 +1,50 @@\n+\n+\n+\n+image/svg+xml\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$1": {"code":"@@ -0,0 +1,59 @@\n+.unselectable {\n+ -webkit-user-select: none;\n+ cursor: default;\n+}\n+.ellipsis {\n+ display: inline-block;\n+ white-space: nowrap;\n+ min-width: 0;\n+ width: 100%;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+ box-sizing: border-box;\n+}\n+\n+/**\n+* Helpers.\n+**/\n+button {\n+ background-color: #6BC260;\n+ border: none;\n+ color: #fff;\n+ cursor: pointer;\n+}\n+button:hover {\n+ background-color: #8edb84 !important;\n+}\n+button:active {\n+ background-color: #27ae60 !important;\n+}\n+\n+.emojione {\n+ width: 16px;\n+ height: 16px;\n+\n+ position: relative;\n+ top: 2px;\n+}\n+\n+.green {\n+ background-color: #6BC260 !important;\n+ color: #ffffff !important;\n+}\n+.green:hover {\n+ background-color: #8edb84 !important;\n+}\n+.green:active {\n+ background-color: #27ae60 !important;\n+}\n+.red {\n+ background-color: #e74c3c !important;\n+ color: #ffffff !important;\n+}\n+.red:hover {\n+ background-color: #f38175 !important;\n+}\n+.red:active {\n+ background-color: #ef2929 !important;\n+}\n+\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$2": {"code":"@@ -0,0 +1,237 @@\n+@import 'helpers.css';\n+@import 'fa.css';\n+@import 'fonts.css';\n+\n+/**\n+* HTML reset.\n+**/\n+* {\n+ box-sizing: border-box;\n+ font-family: Aller;\n+}\n+*:focus, *:active {\n+ outline: none;\n+}\n+\n+html, body, #wrapper {\n+ width: 100vw;\n+ height: 100vh;\n+\n+ margin: 0;\n+ padding: 0;\n+}\n+\n+.fa {\n+ margin-right: 10px;\n+ font-size: 12px;\n+}\n+.error {\n+ border: 1px solid #e74c3c !important;\n+}\n+\n+#wrapper {\n+ display: flex;\n+ flex-direction: row;\n+}\n+\n+#tox-login-info {\n+ display: flex;\n+ flex-direction: column;\n+ justify-content: center;\n+ align-items: center;\n+ \n+ flex: 0 0 150px;\n+ \n+ text-align: center;\n+ background-color: #333333;\n+}\n+#tox-login-info #presentation {\n+ display: flex;\n+ flex: 1;\n+ align-items: center;\n+ justify-content: center;\n+ align-self: center;\n+ flex-direction: column;\n+ \n+ width: 100%;\n+ padding: 10px;\n+}\n+#tox-login-info #presentation #tox-logo {\n+ width: 60px;\n+ height: 80px;\n+ \n+ background: transparent url('../images/tox-logo.svg') no-repeat center center;\n+ background-size: 60px 80px;\n+}\n+#tox-login-info #presentation h1 {\n+ display: flex;\n+ align-items: center;\n+ \n+ margin: 0;\n+ \n+ color: #fff;\n+ font-size: 48px;\n+}\n+#tox-login-info #links {\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ align-self: center;\n+ flex-direction: column;\n+ \n+ width: 100%; \n+}\n+#tox-login-info #links a {\n+ height:30px;\n+ width: 100%;\n+ \n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ \n+ background-color: #222;\n+ border-bottom: 1px solid #171717;\n+ color: #fff;\n+ text-decoration: none;\n+}\n+#tox-login-info #links a:hover {\n+ background-color: #444;\n+}\n+#tox-login-info #links a:active {\n+ background-color: #171717;\n+}\n+#tox-login-container {\n+ height: 100vh;\n+ display: flex;\n+ flex: 1;\n+ flex-direction: column;\n+ align-content: center;\n+ align-self: initial;\n+ align-items: stretch;\n+ \n+ padding: 20px;\n+ \n+ color: #fff;\n+ text-align: center;\n+ background: url('../images/login-background.png') no-repeat center center /cover;\n+ justify-content: center;\n+}\n+#tox-login-container #profile-errors {\n+ display: flex;\n+ flex-direction: row;\n+ justify-content: center;\n+ align-items: center;\n+ align-content: center;\n+ \n+ margin-bottom: 10px;\n+ padding: 5px 10px;\n+ \n+ background-color: #e74c3c;\n+ border-radius: 5px;\n+ color: #fff;\n+ font-size: 12px;\n+}\n+#tox-login-container #profile-wrapper {\n+ display: flex;\n+ flex-direction: column;\n+ \n+ padding: 10px;\n+ \n+ background-color: #eee;\n+ border-radius: 5px;\n+ color: #171717;\n+}\n+#tox-login-container #profile {\n+ display: flex;\n+ flex-direction: row;\n+ \n+ margin-bottom: 10px;\n+}\n+#tox-login-container #profile-avatar {\n+ width: 55px;\n+ height: 55px;\n+ \n+ margin: 0 10px 0 0;\n+ padding: 0;\n+ \n+ border-radius: 5px;\n+ /*border: 1px solid #ccc;*/\n+ \n+ background: transparent url('../images/mockup/avatar-004.png') no-repeat center center;\n+ background-size: 55px 55px;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff {\n+ display: flex;\n+ flex: 1;\n+ flex-direction: column;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff input:first-child {\n+ margin-bottom: 4px;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff input {\n+ height: 26px;\n+ padding: 0 5px;\n+\n+ border: 1px solid #ccc;\n+ border-radius: 5px;\n+}\n+#tox-login-container #profile-wrapper #profile-stuff input:focus {\n+ border: 1px solid #3498db !important;\n+}\n+#tox-login-container #profile-actions {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+}\n+#tox-login-container #profile-actions label {\n+ font-weight: lighter;\n+ font-size: 12px;\n+ line-height: 18px;\n+ cursor: pointer;\n+}\n+#tox-login-container #profile-actions label::after {\n+ content: \"|\";\n+ height: 100%;\n+ width: 2px;\n+ /* background-color: red; */\n+ margin: 0 10px;\n+ color: #bbb;\n+}\n+\n+#tox-login-container #profile-actions button {\n+ flex: 1;\n+ padding: 3px 5px;\n+\n+ background-color: #6BC260;\n+ border: none;\n+ border-radius: 5px;\n+ color: #ffffff;\n+ cursor: pointer;\n+ font-weight: bold;\n+}\n+#tox-login-container #profile-actions button:hover {\n+ background-color: #8edb84 !important;\n+}\n+#tox-login-container #profile-actions button:active {\n+ background-color: #27ae60 !important;\n+}\n+\n+#register-link {\n+ display: flex;\n+ flex-direction: row;\n+ justify-content: center;\n+ \n+ margin: 10px 0 0 0;\n+ padding: 5px;\n+ \n+ /*background-color: #eee;*/\n+ border-radius: 5px;\n+ color: #171717;\n+ font-size: 12px;\n+}\n+\n+\n+\n+\n+\n+\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$3": {"code":"@@ -3,6 +3,7 @@\n **/\n @import 'fonts.css';\n @import 'fa.css';\n+@import 'helpers.css';\n \n /**\n * HTML reset.\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$4": {"code":"@@ -22,64 +23,6 @@ html, body {\n display: flex;\n flex: 1;\n }\n-.unselectable {\n- -webkit-user-select: none;\n- cursor: default;\n-}\n-.ellipsis {\n- display: inline-block;\n- white-space: nowrap;\n- min-width: 0;\n- width: 100%;\n- overflow: hidden;\n- text-overflow: ellipsis;\n- box-sizing: border-box;\n-}\n-\n-/**\n-* Helpers.\n-**/\n-button {\n- background-color: #6BC260;\n- border: none;\n- color: #fff;\n- cursor: pointer;\n-}\n-button:hover {\n- background-color: #8edb84 !important;\n-}\n-button:active {\n- background-color: #27ae60 !important;\n-}\n-\n-.emojione {\n- width: 16px;\n- height: 16px;\n-\n- position: relative;\n- top: 2px;\n-}\n-\n-.green {\n- background-color: #6BC260 !important;\n- color: #ffffff !important;\n-}\n-.green:hover {\n- background-color: #8edb84 !important;\n-}\n-.green:active {\n- background-color: #27ae60 !important;\n-}\n-.red {\n- background-color: #e74c3c !important;\n- color: #ffffff !important;\n-}\n-.red:hover {\n- background-color: #f38175 !important;\n-}\n-.red:active {\n- background-color: #ef2929 !important;\n-}\n \n /**\n * Left sidebar.\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$5": {"code":"@@ -356,7 +299,7 @@ aside {\n color: #fff;\n }\n #tox-menu button:hover {\n- background-color: #333333 !important;\n+ background-color: /*#333333*/ #6BC260 !important;\n opacity: 1;\n }\n #tox-menu #add-contact {\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$6": {"code":"@@ -290,9 +290,9 @@ Tox.prototype.addMessage = function (direction, author, message, timestamp) {\n }\n \n const tpl = `
\n- ${_author.escape()}\n+ ${_author.escape()}\n
${emojione.toImage(message.escape().nl2br())}
\n- ${timestamp.escape()}\n+ ${timestamp.escape()}\n
`;\n \n const c = this.chatview.innerHTML;\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$7": {"code":"@@ -319,9 +319,9 @@ Tox.prototype.addQuote = function (direction, author, message, timestamp) {\n }\n \n const tpl = `
\n- ${_author.escape()}\n+ ${_author.escape()}\n
>${emojione.toImage(message.escape().nl2br())}
\n- ${timestamp.escape()}\n+ ${timestamp.escape()}\n
`;\n \n const c = this.chatview.innerHTML;\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$8": {"code":"@@ -348,17 +348,17 @@ Tox.prototype.addFileTransfer = function (direction, author, filename, filesize,\n }\n \n const tpl = `
\n- ${_author.escape()}\n+ ${_author.escape()}\n \n- \n+ \n ${filename.escape()}\n- ${filesize.escape()}\n+ ${filesize.escape()}\n
\n- \n- \n+ \n+ \n
\n
\n- ${timestamp.escape()}\n+ ${timestamp.escape()}\n
`;\n \n const c = this.chatview.innerHTML;\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$9": {"code":"@@ -0,0 +1,43 @@\n+{\n+ \"contactslist\": {\n+ \"titles\": {\n+ \"user-profile-avatar\": \"Change your avatar\",\n+ \"user-profile-status\": \"Change your status\",\n+ \"menu-add-contact\": \"Add a contact\",\n+ \"menu-new-group\": \"Create a group\",\n+ \"menu-show-transfers\": \"File transers\",\n+ \"menu-show-settings\": \"Preferences\",\n+ },\n+ \"search-contacts-placeholder\": \"Type to search...\",\n+ },\n+ \"chatview\": {\n+ \"titles\": {\n+ \"call-audio\": \"Audio call\",\n+ \"call-video\": \"Video call\",\n+ \"choose-emojis\": \"Open the emoji chooser\",\n+ \"send-file\": \"Send file\",\n+ \"send-message\": \"Send message\",\n+ }\n+ },\n+ \"modals\": {\n+ \"add-contact\": {\n+ \"title\": \"Add a contact\",\n+ \"toxid-label\": \"ToxID or alias:\",\n+ \"toxid-placeholder\": \"Enter your contact ToxID...\",\n+ \"message-label\": \"Message:\",\n+ \"message-placeholder\": \"Hey mate, add me and we could talk! :p\",\n+ \"close-modal-tip\": \"Click anywhere to close the modal\",\n+ \"send-request\": \"Send the request\",\n+ }\n+ },\n+ \"status\": {\n+ \"online\": \"Online\",\n+ \"offline\": \"Offline\",\n+ \"away\": \"Away\",\n+ \"busy\": \"Busy\",\n+ \"blocked\": \"Blocked\",\n+ },\n+ \"misc\": {\n+ \"no-emoji-pattern\": \"No emoji found for this pattern\",\n+ }\n+}\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$10": {"code":"@@ -0,0 +1,43 @@\n+{\n+ \"contactslist\": {\n+ \"titles\": {\n+ \"user-profile-avatar\": \"Changer votre avatar\",\n+ \"user-profile-status\": \"Changer votre status\",\n+ \"menu-add-contact\": \"Ajouter un contact\",\n+ \"menu-new-group\": \"Créer un groupe\",\n+ \"menu-show-transfers\": \"Transferts de fichiers\",\n+ \"menu-show-settings\": \"Préferences\",\n+ },\n+ \"search-contacts-placeholder\": \"Rechercher...\",\n+ },\n+ \"chatview\": {\n+ \"titles\": {\n+ \"call-audio\": \"Appel audio\",\n+ \"call-video\": \"Appel vidéo\",\n+ \"choose-emojis\": \"Ouvrir le selecteur d'emojis\",\n+ \"send-file\": \"Envoyer un fichier\",\n+ \"send-message\": \"Envoyer un message\",\n+ }\n+ },\n+ \"modals\": {\n+ \"add-contact\": {\n+ \"title\": \"Ajouter un contact\",\n+ \"toxid-label\": \"ToxID ou pseudo :\",\n+ \"toxid-placeholder\": \"Entrer le ToxID de votre contact...\",\n+ \"message-label\": \"Message :\",\n+ \"message-placeholder\": \"Salut, ajoutez moi et nous pourrons parler. :p\",\n+ \"close-modal-tip\": \"Cliquer n'importe où pour fermer\",\n+ \"send-request\": \"Envoyer la requête\",\n+ }\n+ },\n+ \"status\": {\n+ \"online\": \"En ligne\",\n+ \"offline\": \"Hors-ligne\",\n+ \"away\": \"Absent\",\n+ \"busy\": \"Occupé\",\n+ \"blocked\": \"Bloqué\",\n+ },\n+ \"misc\": {\n+ \"no-emoji-pattern\": \"Aucun emoji ne correspond à ce motif\",\n+ }\n+}\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$11": {"code":"@@ -7,8 +7,6 @@ const BrowserWindow = electron.BrowserWindow;\n // Our internal protocol\n const protocol = \"tox\";\n \n-console.log(\"main\", __dirname);\n-\n // Allow right click context menu.\n require('electron-context-menu')({\n showInspectElement: false,\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$12": {"code":"@@ -20,22 +18,40 @@ let mainWindow;\n \n function createWindow () {\n // Create the browser window.\n- mainWindow = new BrowserWindow({\n+ /*mainWindow = new BrowserWindow({\n width: 960,\n height: 500,\n center: true,\n autoHideMenuBar: true,\n+ });*/\n+ mainWindow = new BrowserWindow({\n+ width: 500,\n+ height: 250,\n+ center: true,\n+ autoHideMenuBar: true,\n+ resizable: false,\n });\n \n mainWindow.title = \"Tox\";\n- mainWindow.setMinimumSize(750, 300);\n+ /*mainWindow.setMinimumSize(750, 300);*/\n+ mainWindow.setMinimumSize(500, 250);\n //mainWindow.setMenu(null);\n \n proto.registerFileProtocol(protocol, (request, callback) => {\n const url = request.url.substr(protocol.length + 3);\n mainWindow.webContents.send('protocol-activated', url);\n- //callback({ path: path.normalize(__dirname + '/' + url) });\n- console.log('Successfuly registered protocol `' + protocol + '://`');\n+ \n+ if (url == 'main-window') {\n+ mainWindow.setSize(960, 500);\n+ mainWindow.setMinimumSize(750, 300);\n+ mainWindow.setResizable(true);\n+ mainWindow.loadURL(`file://${__dirname}/views/${url}.html`);\n+ return;\n+ }\n+ \n+ //mainWindow.loadURL(`file://${__dirname}/views/${url}`);\n+ //callback({ path: path.normalize(__dirname + '/views/' + url) });\n+ console.log('Successfuly registered protocol `' + protocol + '://' + url + '`', __dirname + '/' + url);\n }, (err) => {\n if (err) {\n console.error('Failed to register internal protocol.', err);\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":0,"borderBottomRightRadius":0}}, "Code$$13": {"code":"@@ -90,7 +106,4 @@ app.on('activate', function () {\n if (mainWindow === null) {\n createWindow()\n }\n-})\n-\n-// In this file you can include the rest of your app's specific main process\n-// code. You can also put them in separate files and require them here.\n+});\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":0,"borderTopRightRadius":0,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$14": {"code":"@@ -2,239 +2,47 @@\n \n \n \n- Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙\n+ Tox\n \n- \n+ \n+ \n \n \n- \n-
\n-
\n- \n-
\n- Frosty Disco Thunder Winter Bear 💙\n- Working on my new game: Door First!\n-
\n-
\n- \n- \n+
\n+
\n-
\n-
\n- \n- Frosty Disco Thunder Winter Bear 💙 is typing...\n-
\n-
\n- \n-
\n-
\n- \n- \n-
\n-
\n- \n-
\n- Add a friend\n-
\n-
\n- \n- \n- \n- \n- \n- \n- \n-
\n-
\n- Click anywhere to close the modal\n- \n-
\n-
\n+ \n
\n-\n- \n- \n \n \n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$15": {"code":"@@ -0,0 +1,240 @@\n+\n+\n+ \n+ \n+ Tox - Chips Handson - Frosty Disco Thunder Winter Bear 💙\n+\n+ \n+ \n+ \n+ \n+
\n+
\n+ \n+
\n+ Frosty Disco Thunder Winter Bear 💙\n+ Working on my new game: Door First!\n+
\n+
\n+ \n+ \n+
\n+
\n+
\n+
\n+ \n+ Frosty Disco Thunder Winter Bear 💙 is typing…\n+
\n+
\n+ \n+ \n+ \n+
\n+
\n+ \n+ \n+
\n+
\n+ \n+
\n+ Add a contact\n+
\n+
\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+
\n+
\n+ Click anywhere to close the modal\n+ \n+
\n+
\n+
\n+\n+ \n+ \n+ \n+\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$16": {"code":"@@ -1 +0,0 @@\n-

It works!

\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, "Code$$17": {"code":"@@ -33,7 +33,8 @@\n \"url\": \"https://github.com/SkyzohKey/Tox-client/issues\"\n },\n \"devDependencies\": {\n- \"electron-prebuilt\": \"^1.2.0\"\n+ \"electron-prebuilt\": \"^1.2.0\",\n+ \"electron-reload\": \"^1.0.1\"\n },\n \"dependencies\": {\n \"date-format\": \"0.0.2\",\n","language":"diff","themeScheme":"light","style":{"borderTopLeftRadius":8,"borderTopRightRadius":8,"borderBottomLeftRadius":8,"borderBottomRightRadius":8}}, }; function afterRevival(revivalResults) { return undefined; } $IslandsRuntime.reviveIslands(islands, islandsProps, islandsEls) .then(afterRevival) .catch(afterRevival); })(IslandsRuntime);