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
/** Variable and font definitions */
:root {
/* color definitions */
--jami-light-blue: rgba(59, 193, 211, 0.3);
--jami-dark-blue: #003b4e;
--jami-green: #219d55;
--jami-green-hover: #1f8b4c;
--jami-red: #dc2719;
--jami-red-hover: #b02e2c;
/* main properties */
--bg-color: #f2f2f2; /* same as macOS client */
/* navbar properties */
--navbar-height: 40px;
--navbar-padding-top: 8px;
--navbar-padding-bottom: var(--navbar-padding-top);
/* message bar properties */
--textarea-max-height: 150px;
--placeholder-text-color: #d3d3d3;
/* button properties */
--action-icon-color: var(--jami-dark-blue);
--deactivated-icon-color: #BEBEBE;
--action-icon-hover-color: var(--jami-light-blue);
--action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of ring light blue */
--action-critical-icon-press-color: rgba(211, 77, 59, 0.5);
--action-critical-icon-color: #4E1300;
--non-action-icon-color: #212121;
--action-icon-press-color: rgba(59, 193, 211, 0.5);
--invite-hover-color: white;
/* hairline properties */
--hairline-color: #d9d9d9;
--hairline-thickness: 0.2px;
}
@font-face {
font-family: emoji;
/* Fonts for text outside emoji blocks */
src: local('Open sans'),
local('Helvetica'),
local('Segoe UI'),
local('sans-serif');
}
@font-face {
font-family: emoji;
src: local('Noto Color Emoji'),
local('Android Emoji'),
local('Twitter Color Emoji');
/* Emoji unicode blocks */
unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}
/** Body */
body {
--messagebar-size: 57px;
margin: 0;
overflow: hidden;
background-color: var(--bg-color);
padding-bottom: var(--messagebar-size);
/* disable selection highlight because it looks very bad */
-webkit-user-select: none;
}
::-webkit-scrollbar-track {
background-color: var(--bg-color);
}
::-webkit-scrollbar {
width: 8px;
background-color: var(--bg-color);
}
::-webkit-scrollbar-thumb {
background-color: var(--bg-color);
}
/** Navbar */
.navbar-wrapper {
/* on top, over everything and full width */
position: fixed;
left:0; right:0;
z-index: 500;
top: 0;
}
#navbar {
background-color: var(--bg-color);
padding-right: 8px;
padding-left: 8px;
padding-top: var(--navbar-padding-top);
padding-bottom: var(--navbar-padding-bottom);
height: var(--navbar-height);
overflow: hidden;
align-items: center;
/* takes whole width */
left:0; right:0;
/* hairline */
border-bottom: var(--hairline-thickness) solid var(--hairline-color);
display: flex;
}
.hiddenState {
/* Used to hide navbar and message bar */
display: none !important;
}
.svgicon {
display: block;
margin: auto;
height: 70%;
}
.nav-button {
width: 40px;
height: 40px;
display: flex;
cursor: pointer;
align-self: center;
border-radius: 50%;
}
.nav-button.deactivated {
width: 40px;
height: 40px;
align-self: center;
display: flex;
border-radius: 50%;
cursor: auto;
}
.nav-right {
align-self: flex-end;
}
.nav-left {
align-self: flex-start;
}
#nav-contactid {
margin: 0px;
margin-left: 5px;
padding: 0px;
height: 100%;
font-family: emoji;
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
/* contactid field should take as much place as possible, but it should
also be the first one to shrink if necesary. */
flex-grow: 2;
flex-shrink: 2;
min-width: 0; /* necessary for child to be able to shrink correctly */
/* center vertically */
display: flex;
align-items: center;
}
#nav-contactid-wrapper {
width: 100%;
}
#nav-contactid-alias {
font-size: 14px;
font-weight: bold;
margin-bottom: 3px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav-contactid-bestId {
font-size: 11px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oneEntry #nav-contactid-bestId {
display: none;
}
.action-button svg {
fill: var(--action-icon-color);
}
.action-button.deactivated svg {
fill: var(--deactivated-icon-color);
}
.non-action-button svg {
fill: var(--non-action-icon-color);
}
.non-action-button:hover, .action-button:hover {
background: var(--action-icon-hover-color);
}
.non-action-button:active, .action-button:active {
background: var(--action-icon-press-color);
}
.action-button.deactivated:hover, .action-button.deactivated:active {
background: none;
}
.action-critical-button svg {
fill: var(--action-critical-icon-color);
}
.action-critical-button:hover {
background: var(--action-critical-icon-hover-color);
}
.action-critical-button:active {
background: var(--action-critical-icon-press-color);
}
#callButtons {
display: flex;
}
#navbar #unbanButton, #navbar #addToConversationsButton {
display: none;
}
#navbar.onBannedState #addToConvButton, #navbar.onBannedState #callButtons, #navbar.onBannedState #addToConversationsButton {
display: none;
}
#navbar.onBannedState #unbanButton {
display: flex;
}
/** Invitation bar */
#invitation {
visibility: hidden;
background: var(--bg-color);
position: absolute;
width: 100%;
padding-bottom: 10px;
/* hairline */
border-bottom: var(--hairline-thickness) solid var(--hairline-color);
}
#invitation #invite_header {
margin: 10px;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
}
#invitation .sender_image {
width: 50px;
height: 50px;
}
#invitation #actions {
margin-right: auto;
margin-left: auto;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
}
#invitation #actions div {
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-left: 5px;
}
#invitation #text {
text-align: center;
font-size: 0.8em;
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
}
/** Messaging bar */
#sendMessage {
background-color: var(--bg-color);
display: flex;
overflow: hidden;
padding: 4px;
align-items: center;
position: fixed;
left: 0;
right: 0;
z-index: 500;
bottom: 0;
/* hairline */
border-top: var(--hairline-thickness) solid var(--hairline-color);
}
#message {
font-family: emoji;
flex: 1;
background-color: var(--bg-color);
border: 0;
overflow-y: scroll;
color: black;
max-height: var(--textarea-max-height);
margin-right: 10px;
resize: none;
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
}
#message:focus,
#message.focus {
outline: none;
}
#container[disabled] {
background-color: #ccc;
}
input[placeholder], [placeholder], *[placeholder] {
color: var(--placeholder-text-color);
}
/** Main chat view */
#lazyloading-icon {
margin: auto;
margin-bottom: 10px;
margin-top: 5px;
vertical-align: center;
width: 30px;
display: flex;
}
#container {
position: relative;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
/* When there are not enough messages to occupy full height of the
container, make sure they are displayed at the bottom, not at the
top. */
justify-content: flex-end;
}
a:link {
text-decoration: none;
color: #0e649b;
transition: all 0.2s ease-in-out;
border-bottom: dotted 1px;
}
a:hover {
border: 0;
}
#file_image_send_container {
visibility: hidden;
position: fixed;
bottom: var(--messagebar-size);
z-index: 1;
display: flex;
justify-content: flex-start;
left: 0;
right: 0;
height: 8em;
/*border-top-left-radius: 25px;
border-top-right-radius: 25px;*/
border: 2px solid lightgray;
padding: 20px;
border-bottom: none;
background-color: #cfdbdd;
overflow-x: overlay;
}
#file_image_send_container::-webkit-scrollbar {
height: 10px;
}
#file_image_send_container::after {
/*Create the margins with pseudo-elements*/
/*to solve overflow:scroll and The Right Padding Problem*/
content: ' ';
min-width: 20px;
}
.img_wrapper {
position: relative;
max-width: 65px;
min-width: 65px;
max-height: 80px;
border: 3px solid rgba(255,255,255,0);
padding: 30px;
border-radius: 20px;
background-color: #cfdbdd;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
}
/* Make the image responsive */
.img_wrapper img {
height: 118px;
min-width: 131px;
object-fit: cover;
border-radius: 20px;
}
/* Style the button and place it at the top right corner of the image */
.img_wrapper .btn {
position: absolute;
color: #fff;
border: 1px solid #AEAEAE;
border-radius: 40%;
background: rgba(96,95,97,0.5);
font-size: 10px;
font-weight: bold;
top: -5%;
right: -5%;
}
.img_wrapper .btn:hover {
background-color: lightgray;
}
.img_wrapper .btn:focus {
outline: none;
color: black;
}
.file_wrapper {
position: relative;
max-width: 65px;
min-width: 65px;
max-height: 80px;
border: 3px solid rgba(255,255,255,0);
padding: 30px;
border-radius: 20px;
background-color: white;
display: flex;
justify-content: flex-start;
align-items: center;
margin: 5px;
font-family: sans-serif;
}
/* Style the button and place it at the top right corner of the image */
.file_wrapper .btn {
position: absolute;
color: #fff;
border: 1px solid #AEAEAE;
border-radius: 40%;
background: rgba(96,95,97,0.5);
font-size: 10px;
font-weight: bold;
top: -5%;
right: -5%;
}
.file_wrapper .btn:hover {
background-color: lightgray;
}
.file_wrapper .btn:focus {
outline: none;
color: black;
}
.file_wrapper .svg-icon {
position: absolute;
max-width: 2em;
max-height: 25px;
margin-right: 2em;
top: 8%;
left: 1px;
}
.file_wrapper .svg-icon path,
.file_wrapper .svg-icon polygon,
.file_wrapper .svg-icon rect {
fill: #000000;
}
.file_wrapper .svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
.file_wrapper .fileinfo {
position: absolute;
top: 30%;
left: 7%;
}
#back_to_bottom_button_container {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
width: 100%;
height: 4em;
pointer-events: none;
}
#back_to_bottom_button {
visibility: hidden;
margin: auto;
font: 0.875em emoji;
text-align: center;
width: 10em;
border-radius: 2em;
background-color: var(--jami-dark-blue);
color: #fff;
padding: 0.5em;
box-shadow: 2px 2px 4px black;
opacity: 1;
overflow: hidden;
white-space: nowrap;
transition: opacity .5s ease, width .2s ease, color .1s ease .2s;
pointer-events: all;
}
#back_to_bottom_button:hover {
cursor: pointer;
}
#back_to_bottom_button.fade {
opacity: 0;
width: 1em;
color: transparent;
transition: .2s opacity ease .1s, .2s width ease .1s, color .1s ease;
}
#back_to_bottom_button.fade:hover {
cursor: context-menu;
}
#messages {
position: relative;
z-index: 0;
width: 100%;
overflow: hidden;
height: auto;
padding-top: 0.5em;
opacity: 1;
transition: 0.5s opacity;
}
#messages.fade {
opacity: 0;