Update chat UI(#84)
This commit is contained in:
Phuoc Anh Kha Le
GitHub
parent
db37cb4c40
commit
b417c08bfe
9 changed files with 124 additions and 89 deletions
|
|
@ -182,6 +182,9 @@ header {
|
|||
cursor: pointer;
|
||||
padding: 3.5px;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-shadow {
|
||||
|
|
@ -539,7 +542,11 @@ math {
|
|||
|
||||
@media (max-width: 799px) {
|
||||
#navigation {
|
||||
height: 36px;
|
||||
height: $navbar_height_mobile;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-top: $navbar_height_mobile;
|
||||
}
|
||||
|
||||
#navicon {
|
||||
|
|
@ -637,11 +644,11 @@ math {
|
|||
}
|
||||
|
||||
#chat-icon {
|
||||
color: $theme_color;
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
#chat-icon:hover {
|
||||
color: green;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
#nav-lang-icon {
|
||||
|
|
|
|||
|
|
@ -52,11 +52,15 @@
|
|||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
flex-grow: 1;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
#chat-input {
|
||||
color: black;
|
||||
border: 2px solid #e4a81c;
|
||||
border: 2px solid black;
|
||||
}
|
||||
#chat-input::placeholder {
|
||||
color: grey;
|
||||
}
|
||||
#chat-online-content {
|
||||
padding: 0;
|
||||
|
|
@ -81,7 +85,7 @@
|
|||
}
|
||||
#chat-online {
|
||||
margin: 0;
|
||||
width: 35%;
|
||||
width: 30%;
|
||||
}
|
||||
#chat-area {
|
||||
flex-grow: 1;
|
||||
|
|
@ -91,12 +95,12 @@
|
|||
font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
|
||||
}
|
||||
.info-pic {
|
||||
height: 100%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
margin-left: 10px;
|
||||
font-size: 2em;
|
||||
font-size: 1.8em;
|
||||
font-weight: bold !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -111,21 +115,6 @@
|
|||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
#refresh-button {
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 0.3em;
|
||||
background: transparent;
|
||||
border: none;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
#refresh-button:hover {
|
||||
background: lightgreen;
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
transition: 1.5s ease-in-out;
|
||||
}
|
||||
.status-pic {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
|
@ -135,6 +124,7 @@
|
|||
position: relative;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
.status-circle {
|
||||
position: absolute;
|
||||
|
|
@ -166,11 +156,11 @@
|
|||
}
|
||||
.message-text {
|
||||
padding: 0.4em 0.6em 0.5em;
|
||||
border-radius: 15px;
|
||||
border-radius: 20px;
|
||||
max-width: 70%;
|
||||
width: fit-content;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.3;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.message-text-other {
|
||||
background: #eeeeee;
|
||||
|
|
@ -181,10 +171,11 @@
|
|||
color: white;
|
||||
}
|
||||
.chat-input-icon {
|
||||
color: $theme_color;
|
||||
color: white;
|
||||
background-color: #3c8262;
|
||||
}
|
||||
.chat-input-icon:hover {
|
||||
background: lightgray;
|
||||
background: #57b28b;
|
||||
}
|
||||
.chat {
|
||||
.active-span {
|
||||
|
|
@ -193,12 +184,16 @@
|
|||
}
|
||||
|
||||
.unread-count {
|
||||
float: right;
|
||||
color: white;
|
||||
background-color: darkcyan;
|
||||
border-radius: 2px;
|
||||
padding: 0 0.5em;
|
||||
align-self: flex-end;
|
||||
border-radius: 50%;
|
||||
align-self: center;
|
||||
flex: 0 0 1.25rem;
|
||||
height: 1.25rem;
|
||||
font-size: smaller;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#setting-content {
|
||||
display: none;
|
||||
|
|
@ -224,6 +219,6 @@
|
|||
|
||||
@media (max-width: 799px) {
|
||||
#chat-area {
|
||||
height: calc(100vh - 120px);
|
||||
height: calc(100vh - $navbar_height_mobile);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "vars";
|
||||
|
||||
.list-contest {
|
||||
box-shadow: 0px 4px 8px rgba(4, 83, 67, 0.2), 0px 6px 20px rgba(4, 83, 67, 0.19);
|
||||
box-shadow: 0px 1px 2px lightgrey, 0px 1px 5px lightgrey;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -12,3 +12,4 @@ $table_header_rounding: 6px;
|
|||
|
||||
$monospace-fonts: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
$navbar_height: 50px;
|
||||
$navbar_height_mobile: 36px;
|
||||
|
|
|
|||
|
|
@ -59,17 +59,8 @@
|
|||
|
||||
{% block body %}
|
||||
<div class="chat">
|
||||
<div id="mobile" class="tabs">
|
||||
<ul>
|
||||
<li id="chat-tab" class="tab active"><a href="#">
|
||||
<i class="tab-icon fa fa-comments"></i> {{ _('Chat') }}
|
||||
</a></li>
|
||||
<li id="online-tab" class="tab"><a href="#"><i class="tab-icon fa fa-wifi"></i> {{ _('Online Users') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="chat-container">
|
||||
<div id="chat-online" class="chat-right-panel sidebox">
|
||||
<div id="chat-online" class="chat-left-panel sidebox">
|
||||
<div id="chat-online-content">
|
||||
<div id="search-container">
|
||||
<form id="chat-search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
|
||||
|
|
@ -83,7 +74,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-area" class="chat-left-panel">
|
||||
<div id="chat-area" class="chat-right-panel">
|
||||
<div id="chat-info">
|
||||
{% include 'chat/user_online_status.html' %}
|
||||
</div>
|
||||
|
|
@ -98,7 +89,7 @@
|
|||
<div class="chat-input-icon" id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i>
|
||||
</div>
|
||||
<div class="chat-input-icon" id="submit-button">
|
||||
<i class="fa fa-play"></i>
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip" role="tooltip">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
#content {
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -57,7 +58,7 @@
|
|||
.profile-pic {
|
||||
height: 2.6em;
|
||||
width: 2.6em;
|
||||
border-radius: 0.3em;
|
||||
border-radius: 50%;
|
||||
margin-top: 0.1em;
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -106,6 +107,16 @@
|
|||
#setting {
|
||||
position: relative;
|
||||
}
|
||||
#setting-button {
|
||||
height: 2.3em;
|
||||
width: 2.5em;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.status-user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -122,15 +133,20 @@
|
|||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
text-align: left;
|
||||
}
|
||||
#chat-input {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
width: 80%;
|
||||
resize: none;
|
||||
height: 100%;
|
||||
height: 80%;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#chat-input:focus {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -162,11 +178,13 @@
|
|||
stroke-width: 1;
|
||||
}
|
||||
.info-pic {
|
||||
border-radius: 5px;
|
||||
margin-left: 1em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#chat-info {
|
||||
height: 3em;
|
||||
padding-left: 0.75em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
|
|
@ -175,26 +193,30 @@
|
|||
overflow:hidden;
|
||||
}
|
||||
#chat-input-container {
|
||||
padding-left: 5%;
|
||||
padding-left: 3%;
|
||||
}
|
||||
#chat-area {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
.back-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 799px) {
|
||||
html, body {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#mobile ul {
|
||||
width: 100%;
|
||||
}
|
||||
.info-pic {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.active-span {
|
||||
display: none;
|
||||
}
|
||||
#chat-area {
|
||||
display: none;
|
||||
}
|
||||
.back-button {
|
||||
margin-right: 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endcompress %}
|
||||
|
|
@ -279,6 +279,21 @@
|
|||
$("#click_space_" + window.other_user_id).addClass("selected-status-row");
|
||||
}
|
||||
|
||||
function show_right_panel() {
|
||||
if (isMobile) {
|
||||
$('.chat-left-panel').hide();
|
||||
$('#chat-area').css('display', 'flex');
|
||||
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
|
||||
}
|
||||
}
|
||||
|
||||
function hide_right_panel() {
|
||||
if (isMobile) {
|
||||
$('.chat-left-panel').show();
|
||||
$('#chat-area').hide();
|
||||
}
|
||||
}
|
||||
|
||||
function load_room(encrypted_user) {
|
||||
if (window.lock_click_space) return;
|
||||
|
||||
|
|
@ -288,6 +303,7 @@
|
|||
update_last_seen();
|
||||
refresh_status();
|
||||
$('#chat-input').focus();
|
||||
show_right_panel();
|
||||
}
|
||||
window.lock_click_space = true;
|
||||
if (encrypted_user) {
|
||||
|
|
@ -314,6 +330,7 @@
|
|||
function register_click_space() {
|
||||
$('.click_space').on('click', function(e) {
|
||||
if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
|
||||
show_right_panel();
|
||||
return;
|
||||
}
|
||||
var other_user = $(this).attr('value');
|
||||
|
|
@ -323,10 +340,10 @@
|
|||
if (window.room_id) {
|
||||
load_room(null);
|
||||
}
|
||||
});
|
||||
if (isMobile) {
|
||||
$('#chat-tab a').click();
|
||||
else {
|
||||
show_right_panel();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function update_last_seen() {
|
||||
|
|
@ -439,26 +456,6 @@
|
|||
return true
|
||||
});
|
||||
|
||||
$('#chat-tab').find('a').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#chat-tab').addClass('active');
|
||||
$('#online-tab').removeClass('active');
|
||||
$('.chat-left-panel').show();
|
||||
$('.chat-right-panel').hide();
|
||||
});
|
||||
$('#online-tab').find('a').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#online-tab').addClass('active');
|
||||
$('#chat-tab').removeClass('active');
|
||||
$('.chat-left-panel').hide();
|
||||
$('.chat-right-panel').show();
|
||||
});
|
||||
|
||||
$('#refresh-button').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
refresh_status();
|
||||
});
|
||||
|
||||
setInterval(refresh_status, 2 * 60 * 1000);
|
||||
|
||||
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
|
||||
|
|
@ -466,7 +463,7 @@
|
|||
const button = document.querySelector('#emoji-button');
|
||||
const tooltip = document.querySelector('.tooltip');
|
||||
Popper.createPopper(button, tooltip, {
|
||||
placement: 'left-end',
|
||||
placement: isMobile ? 'auto-end' : 'left-end',
|
||||
});
|
||||
|
||||
function toggleEmoji() {
|
||||
|
|
@ -558,5 +555,16 @@
|
|||
}
|
||||
register_setting();
|
||||
color_selected_room();
|
||||
|
||||
$('#chat-input').on('input', function() {
|
||||
if (this.scrollHeight > this.clientHeight) {
|
||||
this.style.height = (this.scrollHeight) + 'px';
|
||||
$(this).css('border-radius', '30px');
|
||||
} else {
|
||||
$(this).css('height', '80%');
|
||||
}
|
||||
});
|
||||
|
||||
$('#submit-button').on('click', submit_chat);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -5,8 +5,10 @@
|
|||
<span style="padding-left:0.5em">
|
||||
<b>{{_('Lobby')}}</b>
|
||||
</span>
|
||||
<span class="spacer">
|
||||
<span class="unread-count" id="unread-count-lobby">{{unread_count_lobby if unread_count_lobby}}</span>
|
||||
<span class="spacer" style="display:flex;justify-content: flex-end;">
|
||||
{% if unread_count_lobby and unread_count_lobby > 0 %}
|
||||
<span class="unread-count" id="unread-count-lobby">{{unread_count_lobby}}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</li>
|
||||
{% for section in status_sections %}
|
||||
|
|
@ -37,9 +39,11 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if user.unread_count and user.unread_count > 0 %}
|
||||
<span class="unread-count" id="unread-count-{{user.user.id}}">
|
||||
{{user.unread_count if user.unread_count}}
|
||||
{{user.unread_count}}
|
||||
</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
<div onclick="hide_right_panel()" class="back-button">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
{% if other_user %}
|
||||
<div class="status-container" style="height: 100%">
|
||||
<div class="status-container" style="height: 3em; width: 3em;">
|
||||
<img src="{{ gravatar(other_user, 135) }}" class="info-pic">
|
||||
<svg style="position:absolute; height:100%; width: 100%; transform: rotate(180deg);" >
|
||||
<circle class="info-circle"
|
||||
fill="{{'green' if other_online else 'red'}}"/>
|
||||
</svg>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="status-container" style="height: 3em;">
|
||||
<img src="{{ static('icons/logo.png') }}" class="info-pic" style="border-radius: 0px;">
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="info-name username">
|
||||
{% if other_user %}
|
||||
|
|
@ -21,9 +28,9 @@
|
|||
|
||||
{% if other_user %}
|
||||
<span style="margin-right: 0.3em" id="setting">
|
||||
<button class="control-button small" style="height:100%;" id="setting-button">
|
||||
<div class="control-button small" style="" id="setting-button">
|
||||
<i class="fa fa-ellipsis-h"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="setting-content">
|
||||
<li>
|
||||
<a href="{{url('toggle_ignore', other_user.id)}}" class=" {{'green' if is_ignored else 'red'}}">
|
||||
|
|
|
|||
Loading…
Reference in a new issue