@@ -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.pngnew file
app/assets/images/login-background.pngnew 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",