some style enhancements + add default font "Aller"
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="12.608px" height="10.029px" viewBox="0 0 12.608 10.029" enable-background="new 0 0 12.608 10.029" xml:space="preserve">
+<polygon fill="#FFFFFF" points="4.24,6.707 1.661,4.127 0,5.789 4.24,10.029 4.241,10.029 5.902,8.369 12.608,1.662 10.946,0 "/>
+</svg>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="10.086px" height="10.087px" viewBox="0 0 10.086 10.087" enable-background="new 0 0 10.086 10.087" xml:space="preserve">
+<polygon fill="#FFFFFF" points="10.086,1.692 8.395,0 5.043,3.351 1.693,0.001 0,1.693 3.35,5.043 0,8.394 1.693,10.086
+ 5.043,6.736 8.395,10.087 10.086,8.394 6.734,5.043 "/>
+</svg>
@@ -0,0 +1,54 @@
+@font-face {
+ font-family: 'Aller Display';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Aller Display'), url('../fonts/Aller/AllerDisplay.woff') format('woff');
+}
+
+
+@font-face {
+ font-family: 'Aller Light';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Aller Light'), url('../fonts/Aller/Aller_Lt.woff') format('woff');
+}
+
+
+@font-face {
+ font-family: 'Aller';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Aller'), url('../fonts/Aller/Aller_Rg.woff') format('woff');
+}
+
+
+@font-face {
+ font-family: 'Aller Bold Italic';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Aller Bold Italic'), url('../fonts/Aller/Aller_BdIt.woff') format('woff');
+}
+
+
+@font-face {
+ font-family: 'Aller Bold';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Aller Bold'), url('../fonts/Aller/Aller_Bd.woff') format('woff');
+}
+
+
+@font-face {
+ font-family: 'Aller Italic';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Aller Italic'), url('../fonts/Aller/Aller_It.woff') format('woff');
+}
+
+
+@font-face {
+ font-family: 'Aller Light Italic';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Aller Light Italic'), url('../fonts/Aller/Aller_LtIt.woff') format('woff');
+}
@@ -2,18 +2,7 @@
* Fonts.
**/
/*
-@font-face {
- font-family: EmojiOne;
- src:
- local("Emoji One"),
- local("Emoji One Color"),
- local("EmojiOne"),
- local("EmojiOne Color"),
- url('../fonts/EmojiOneColor-SVGinOT.ttf');
- font-weight: 400;
- font-style: normal;
- text-rendering: optimizeLegibility;
-}*/
+@import 'fonts.css';
/**
* HTML reset.
@@ -47,6 +36,9 @@ html, body {
box-sizing: border-box;
}
+/**
+* Helpers.
+**/
button {
background-color: #6BC260;
border: none;
@@ -54,9 +46,12 @@ button {
cursor: pointer;
}
button:hover {
- background-color: #7cd272;
- opacity: .7;
+ background-color: #8edb84 !important;
+}
+button:active {
+ background-color: #27ae60 !important;
}
+
.emojione {
width: 16px;
height: 16px;
@@ -65,6 +60,27 @@ button:hover {
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.
* Usage: Contacts list.
@@ -130,8 +146,10 @@ aside {
cursor: pointer;
}
#user-profile #user-presence:hover {
- background-color: #333333;
- opacity: 1;
+ background-color: #333333 !important;
+}
+#user-profile #user-presence:active {
+ background-color: #555555 !important;
}
#user-profile #user-presence img {
height: 12px;
@@ -485,7 +503,7 @@ section#chatview-content {
flex: 1;
margin: 0 10px;
- padding: 5px 5px 5px 10px;
+ padding: 5px;
background-color: #eeeeee;
border-radius: 5px;
@@ -495,6 +513,9 @@ section#chatview-content {
#chatview-content .message .transfer-content .transfer-icon {
width: 16px;
height: 16px;
+
+ background: transparent url("../images/icons/file.svg") no-repeat center center;
+ background-size: 16px 16px;
}
#chatview-content .message .transfer-content .transfer-name {
flex: 1;
@@ -503,14 +524,35 @@ section#chatview-content {
#chatview-content .message .transfer-content .transfer-size {
padding: 0 10px;
}
+#chatview-content .message .transfer-content .transfer-actions {
+ display: flex;
+ align-self: center;
+}
#chatview-content .message .transfer-content .transfer-actions button {
+ width: 20px;
+ height: 20px;
+
background-color: #6BC260;
border: none;
border-radius: 3px;
color: #fff;
}
#chatview-content .message .transfer-content .transfer-actions button:first-child {
- margin-right: 2px;
+ margin-right: 5px;
+}
+#chatview-content .message .transfer-content .transfer-actions .transfer-accept {
+ background: #6BC260 url("../images/icons/accept.svg") no-repeat center center;
+ background-size: 12px 12px;
+}
+#chatview-content .message .transfer-content .transfer-actions .transfer-reject {
+ background: #e74c3c url("../images/icons/reject.svg") no-repeat center center;
+ background-size: 10px 10px;
+}
+#chatview-content .message .transfer-content .transfer-actions .transfer-reject:hover {
+ background-color: #f38175 !important;
+}
+#chatview-content .message .transfer-content .transfer-actions .transfer-reject:active {
+ background-color: #ef2929 !important;
}
/* 3. Chatview is-typing */
@@ -529,6 +571,7 @@ section#chatview-content {
height: 12px;
background: transparent url("../images/icons/typing.gif") no-repeat center center;
+ background-size: 37px 12px;
}
#chatview-is-typing .typing-content {
padding: 0 10px;
@@ -15,7 +15,7 @@ const stringHelper = require('../helpers/string.js');
* Our Tox class.
**/
function Tox () {
- this.mockupMode = false;
+ this.mockupMode = true;
this.latestDirection = null;
this.init();
@@ -238,9 +238,11 @@ Tox.prototype.setTitle = function (friendName) {
* TODO: Use html templates instead of this big string.
**/
Tox.prototype.addMessage = function (direction, author, message, timestamp) {
- let _author;
- if (this.latestDirection == direction) _author = "";
- else _author = author;
+ let _author = "";
+ if (this.latestDirection != direction) {
+ _author = author;
+ }
+
this.latestDirection = direction;
if (timestamp === undefined) {
@@ -265,9 +267,11 @@ Tox.prototype.addMessage = function (direction, author, message, timestamp) {
* TODO: Use html templates instead of this big string.
**/
Tox.prototype.addFileTransfer = function (direction, author, filename, filesize, timestamp) {
- let _author;
- if (this.latestDirection == direction) _author = "";
- else _author = author;
+ let _author = "";
+ if (this.latestDirection != direction) {
+ _author = author;
+ }
+
this.latestDirection = direction;
if (timestamp === undefined) {
@@ -277,12 +281,12 @@ Tox.prototype.addFileTransfer = function (direction, author, filename, filesize,
const tpl = `<article class="message message-${direction}">
<span class="message-author unselectable ellipsis">${_author.escape()}</span>
<span class="transfer-content">
- <img class="transfer-icon unselectable" src="../assets/images/icons/file.svg">
- <span class="transfer-name">${filename.escape()}</span>
+ <span class="transfer-icon unselectable"></span>
+ <span class="transfer-name ellipsis">${filename.escape()}</span>
<span class="transfer-size">${filesize.escape()}</span>
<div class="transfer-actions unselectable">
- <button class="transfer-accept">Accept</button>
- <button class="transfer-reject">Reject</button>
+ <button class="transfer-accept"></button>
+ <button class="transfer-reject"></button>
</div>
</span>
<span class="message-timestamp unselectable">${timestamp.escape()}</span>
@@ -297,7 +301,8 @@ Tox.prototype.addFileTransfer = function (direction, author, filename, filesize,
window.app = new Tox();
/**
-* Test for IPC handler. Permits to communicate data between main process and render process.
+* Test for IPC handler.
+* Permits to communicate data between main process and render process.
**/
ipc.on('protocol-activated', function (e, url) {
console.log("tox://" + url, "activated!");