Commit 9fbc163f authored by Yang Wang's avatar Yang Wang Committed by Andreas Traczyk

chatview-gnome: initial commit for chatview folder created in lrc

Change-Id: I2f4bd15b218bb252aac292772774ad9b960b8014
parent 1d99bb3b
# README - chatview
The chatview runs under a WebKit GTK view. It is written using web technologies
(HTML5/CSS3/JS) and is responsible for displaying everything that deals with the
navbar, the messages, and the message bar.
## Contributing - syntax
We have a set of ESLint rules that define clear syntax rules (web/.eslintrc.json).
You will need the following tools:
- ESLint (The pluggable linting utility for JavaScript and JSX)
https://eslint.org/
- ESLint HTML plugin (eslint-plugin-html)
https://www.npmjs.com/package/eslint-plugin-html
Before pushing a patch, make sure that it passes ESLint:
$ eslint chatview.html
Most trivial issues can be fixed using
$ eslint chatview.js --fix
We will not accept patches introducing non-ESLint-compliant code.
## WebKit GTK
Everything runs under WebKit GTK, that is if you need to write browser specific
code, you will only need to support WebKit (CSS -webkit- prefix).
Do not use querySelector if getElementById or getElementByClassName can be used
instead. querySelector doesn't always make the code easier and has very bad
performances.
../../lrc/src/web-chatview/README
\ No newline at end of file
.internal_mes_wrapper {
margin: 3px 0 0 0;
}
.message_wrapper {
padding: 1em;
}
.sender_image {
margin: 10px;
}
.message_out + .message_out .message_wrapper {
border-top-right-radius: 10px;
}
.message_in + .message_in .message_wrapper {
border-top-left-radius: 10px;
}
.message_in + .message_in .sender_image {
visibility: hidden;
}
.message_out + .message_out .sender_image {
visibility: hidden;
}
.message_text {
hyphens: auto;
word-break: break-word;
word-wrap: break-word;
}
\ No newline at end of file
../../lrc/src/web-chatview/chatview-gnome.css
\ No newline at end of file
.internal_mes_wrapper {
margin: 0;
}
.message_wrapper {
padding: 0.5em 1em 0.5em 1em;
}
.sender_image {
margin: 0px 10px 0px 10px;
}
.message_in .message_wrapper {
background-color: #cfebf5;
}
.message_in .sender_image,
.message_out .sender_image {
visibility: hidden;
}
.message_in.last_of_sequence .sender_image,
.message_in.single_message .sender_image {
visibility: visible;
}
.message_in.last_of_sequence .sender_image {
margin-top: 2px;
}
.message_in.middle_of_sequence .sender_image {
margin-top: 0px;
}
.generated_message.message_in .message_wrapper,
.generated_message.message_out .message_wrapper {
background-color: transparent !important;
border-radius: 0px !important;
}
.single_message.message_in .message_wrapper,
.single_message.message_out .message_wrapper {
border-radius: 0.7em 0.7em 0.7em 0.7em !important;
}
.last_of_sequence.message_in .message_wrapper {
border-radius: 0.7em 0.7em 0.7em 0.7em;
}
.first_of_sequence.message_in .message_wrapper {
border-radius: 0.7em 0.7em 0.7em 0.7em;
}
.middle_of_sequence.message_in .message_wrapper {
border-radius: 0.7em 0.7em 0.7em 0.7em;
}
.last_of_sequence.message_out .message_wrapper {
border-radius: 0.7em 0.7em 0.7em 0.7em;
}
.first_of_sequence.message_out .message_wrapper {
border-radius: 0.7em 0.7em 0.7em 0.7em;
}
.middle_of_sequence.message_out .message_wrapper {
border-radius: 0.7em 0.7em 0.7em 0.7em;
}
.middle_of_sequence .internal_mes_wrapper,
.last_of_sequence .internal_mes_wrapper,
.last_message .internal_mes_wrapper {
margin: 0px 0 0 0 !important;
}
.message_out .sender_image {
margin: 0px;
}
.first_of_sequence.message_out .internal_mes_wrapper,
.single_message.message_out .internal_mes_wrapper {
margin: 0px 0 0 0 !important;
}
.message_text {
word-break: break-all;
word-wrap: hyphenate;
}
pre {
white-space: pre-wrap;
}
\ No newline at end of file
This diff is collapsed.
../../lrc/src/web-chatview/chatview.css
\ No newline at end of file
<html>
<!-- Empty head might be needed for setSenderImage -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
</head>
<body>
<div id="wrapperOfNavbar" class="navbar-wrapper">
<div id="navbar">
<div id="backButton" class="nav-button non-action-button nav-left" onmouseover="addBackButtonHoverProperty()"
onclick="backToWelcomeView()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg>
</div>
<div id="nav-contactid" class="nav-left">
<div id="nav-contactid-wrapper">
<div id="nav-contactid-alias"></div>
<div id="nav-contactid-bestId"></div>
</div>
</div>
<div id="optionsButton" style="display:none" class="deactivated nav-button action-button nav-right" onclick="moreOptions()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</div>
<div id="callButtons">
<!-- callButtons block allows more efficient hiding of placeCallButton and placeAudioCallButton -->
<div id="placeCallButton" class="nav-button action-button nav-right" onclick="placeCall()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
</svg>
</div>
<div id="placeAudioCallButton" class="nav-button action-button nav-right" onclick="placeAudioCall()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z" />
</svg>
</div>
</div>
<div id="addToConversationsButton" class="nav-button action-button nav-right" onclick="addToConversations()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
</div>
<div id="unbanButton" class="nav-button action-critical-button nav-right" onclick="addBannedContact()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<circle cx="15" cy="8" r="4" />
<path d="M23 20v-2c0-2.3-4.1-3.7-6.9-3.9l6 5.9h.9zm-11.6-5.5C9.2 15.1 7 16.3 7 18v2h9.9l4 4 1.3-1.3-21-20.9L0 3.1l4 4V10H1v2h3v3h2v-3h2.9l2.5 2.5zM6 10v-.9l.9.9H6z" />
</svg>
</div>
</div>
<div id="invitation">
<div id="invite_header">
<span id="invite_image"></span>
<div id="text"></div>
</div>
<div id="actions">
<div id="acceptButton" class="nav-button action-button invite-btn-green" onclick="acceptInvitation()">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
</div>
<div id="refuseButton" class="nav-button action-button invite-btn-red" onclick="refuseInvitation()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
</svg>
</div>
<div id="blockButton" class="nav-button action-button invite-btn-red" onclick="blockConversation()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" />
</svg>
</div>
</div>
</div>
</div>
<div id="container">
<div id="messages" onscroll="onScrolled()"></div>
<div id="back_to_bottom_button_container">
<div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div>
</div>
<div id="file_image_send_container"></div>
<div id="sendMessage">
<div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()" title="select file to send">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
<textarea id="message" autofocus placeholder="Type a message" onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()"
rows="1"></textarea>
<div id="sendButton" class="nav-button action-button" onclick="sendMessage(); grow_text_area()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
</div>
</div>
</body>
</html>
../../lrc/src/web-chatview/chatview.html
\ No newline at end of file
This diff is collapsed.
../../lrc/src/web-chatview/chatview.js
\ No newline at end of file
This diff is collapsed.
../../lrc/src/web-chatview/jed.js
\ No newline at end of file
This diff is collapsed.
../../lrc/src/web-chatview/linkify-html.js
\ No newline at end of file
/*
* Copyright (c) 2016 SoapBox Innovations Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
'use strict';
;(function (window, linkify) {
var linkifyString = function (linkify) {
'use strict';
/**
Convert strings of text into linkable HTML text
*/
var tokenize = linkify.tokenize;
var options = linkify.options;
var Options = options.Options;
function escapeText(text) {
return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function escapeAttr(href) {
return href.replace(/"/g, '&quot;');
}
function attributesToString(attributes) {
if (!attributes) {
return '';
}
var result = [];
for (var attr in attributes) {
var val = attributes[attr] + '';
result.push(attr + '="' + escapeAttr(val) + '"');
}
return result.join(' ');
}
function linkifyStr(str) {
var opts = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
opts = new Options(opts);
var tokens = tokenize(str);
var result = [];
for (var i = 0; i < tokens.length; i++) {
var token = tokens[i];
if (token.type === 'nl' && opts.nl2br) {
result.push('<br>\n');
continue;
} else if (!token.isLink || !opts.check(token)) {
result.push(escapeText(token.toString()));
continue;
}
var _opts$resolve = opts.resolve(token);
var formatted = _opts$resolve.formatted;
var formattedHref = _opts$resolve.formattedHref;
var tagName = _opts$resolve.tagName;
var className = _opts$resolve.className;
var target = _opts$resolve.target;
var attributes = _opts$resolve.attributes;
var link = '<' + tagName + ' href="' + escapeAttr(formattedHref) + '"';
if (className) {
link += ' class="' + escapeAttr(className) + '"';
}
if (target) {
link += ' target="' + escapeAttr(target) + '"';
}
if (attributes) {
link += ' ' + attributesToString(attributes);
}
link += '>' + escapeText(formatted) + '</' + tagName + '>';
result.push(link);
}
return result.join('');
}
if (!String.prototype.linkify) {
String.prototype.linkify = function (opts) {
return linkifyStr(this, opts);
};
}
return linkifyStr;
}(linkify);
window.linkifyStr = linkifyString;
})(window, linkify);
../../lrc/src/web-chatview/linkify-string.js
\ No newline at end of file
This diff is collapsed.
../../lrc/src/web-chatview/linkify.js
\ No newline at end of file
This diff is collapsed.
../../lrc/src/web-chatview/qwebchannel.js
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<gresources>
<gresource prefix="/net/jami/JamiGnome">
<!-- HTML -->
<file>chatview.html</file>
<!-- JavaScript -->
<file>chatview.js</file>
<file>linkify.js</file>
<file>linkify-string.js</file>
<file>linkify-html.js</file>
<file>jed.js</file>
<!-- CSS -->
<file>chatview.css</file>
<file>chatview-gnome.css</file>
<!-- Locale -->
</gresource>
</gresources>
../../lrc/src/web-chatview/web.gresource.xml
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment