TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

fixed release chat icons

Browse source
This commit is contained in:
WolverinDEV 2019-02-09 21:08:49 +01:00
parent aa692981d3
commit 4835e6e9e8
3 changed files with 95 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
shared/css/static/general.scss
View file

@ -1,66 +1,70 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
.align_row { .align_row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.align_column { .align_column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.icon_loading { .icon_loading {
border: 2px solid #f3f3f3; /* Light grey */ border: 2px solid #f3f3f3; /* Light grey */
border-top: 2px solid #3498db; /* Blue */ border-top: 2px solid #3498db; /* Blue */
border-radius: 50%; border-radius: 50%;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
width: 14px!important; width: 14px !important;
height: 14px!important; height: 14px !important;
} }
.avatar_loading { .avatar_loading {
border: 2px solid #f3f3f3; /* Light grey */ border: 2px solid #f3f3f3; /* Light grey */
border-top: 2px solid #3498db; /* Blue */ border-top: 2px solid #3498db; /* Blue */
border-radius: 50%; border-radius: 50%;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
width: 14px!important; width: 14px !important;
height: 14px!important; height: 14px !important;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(360deg); } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
.select_info { .select_info {
font-family: Arial; font-family: Arial;
font-size: 12px; font-size: 12px;
/*white-space: pre;*/ /*white-space: pre;*/
line-height: 1; line-height: 1;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* The Modal (background) */ /* The Modal (background) */
.modal_disabled { .modal_disabled {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */ z-index: 1; /* Sit on top */
left: 0; left: 0;
top: 0; top: 0;
width: 100%; /* Full width */ width: 100%; /* Full width */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
/* Modal Header */ /* Modal Header */
.modal-header { .modal-header {
@ -120,7 +124,7 @@
border: 2px solid #888; border: 2px solid #888;
width: auto; width: auto;
max-width: 90%; max-width: 90%;
box-shadow: 0 4px 15px 0 rgba(0,0,0,0.2), 2px 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2), 2px 6px 20px 0 rgba(0, 0, 0, 0.19);
animation-name: modalFlyIn; animation-name: modalFlyIn;
animation-duration: 0.4s; animation-duration: 0.4s;
top: 10%; top: 10%;
@ -133,39 +137,45 @@
/* Add Animation */ /* Add Animation */
@keyframes modalFlyIn { @keyframes modalFlyIn {
from {top: 0%; opacity: 0} from {
to {top: 10%; opacity: 1} top: 0%;
opacity: 0
}
to {
top: 10%;
opacity: 1
}
} }
.channel_perm_tbl input { .channel_perm_tbl input {
width: 30px; width: 30px;
} }
.channel_perm_tbl .key { .channel_perm_tbl .key {
width: 120px; width: 120px;
} }
.channel_general_properties .value { .channel_general_properties .value {
width: 100%; width: 100%;
} }
html { html {
background-color: gray; background-color: gray;
} }
fieldset { fieldset {
border: unset; border: unset;
display: unset; display: unset;
} }
.modal-head-error { .modal-head-error {
background: darkred; background: darkred;
font-family: Arial; font-family: Arial;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: middle;
} }
.modal-button-group { .modal-button-group {
@ -173,47 +183,48 @@ fieldset {
} }
.modal-button-group button { .modal-button-group button {
width: 100px; width: 100px;
margin-right: 5px; margin-right: 5px;
margin-left: 5px; margin-left: 5px;
} }
.modal-button-group button:last-of-type { .modal-button-group button:last-of-type {
margin-right: 0px; margin-right: 0px;
} }
.invalid_input { .invalid_input {
border-color: red; border-color: red;
} }
.GroupBox { .GroupBox {
border: gray solid; border: gray solid;
border-width: 2px; border-width: 2px;
border-radius: 0px 6px 6px 6px; border-radius: 0px 6px 6px 6px;
} }
code { code {
background-color: lightgray; background-color: lightgray;
padding: 2px; padding: 2px;
} }
footer { footer {
position: fixed; position: fixed;
width: 100%; width: 100%;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
height: 25px; height: 25px;
background-color: lightgray; background-color: lightgray;
display: flex; display: flex;
} }
footer .container { footer .container {
width: 100%; width: 100%;
display: flex; display: flex;
position: relative; position: relative;
vertical-align: center; vertical-align: center;
justify-content: center; justify-content: center;
} }
$separator_thickness: 4px; $separator_thickness: 4px;
@ -336,7 +347,7 @@ html, body {
body { body {
padding: 8px; padding: 8px;
background: darkgray!important; background: darkgray !important;
} }
.icon-playlist-manage { .icon-playlist-manage {
@ -358,5 +369,5 @@ x-content {
} }
[class*=" bmd-label"], [class^=bmd-label] { [class*=" bmd-label"], [class^=bmd-label] {
color: rgba(0, 0, 0, .6)!important; color: rgba(0, 0, 0, .6) !important;
} }

10
shared/css/static/ts/chat.scss
View file

@ -1,5 +1,5 @@
#chat { #chat {
font-family: Arial; font-family: Arial, serif;
font-size: 12px; font-size: 12px;
/*white-space: pre;*/ /*white-space: pre;*/
line-height: 1; line-height: 1;
@ -44,7 +44,6 @@
max-width: 100%; max-width: 100%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
/*height: 24px;*/
overflow: auto; overflow: auto;
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
@ -56,11 +55,12 @@
background: #5f5f5f5f; background: #5f5f5f5f;
display: inline-block; display: inline-block;
border: 1px solid #6f6f6f; border: 1px solid #6f6f6f;
border-radius: 0px 0px 2px 2px; border-radius: 0 0 2px 2px;
vertical-align: middle; vertical-align: middle;
padding-right: 5px; padding-right: 5px;
padding-left: 2px; padding-left: 2px;
cursor: pointer; cursor: pointer;
height: 18px;
&.active { &.active {
background: #11111111; background: #11111111;
@ -77,6 +77,10 @@
cursor: pointer; cursor: pointer;
} }
} }
.name, .chatIcon {
display: inline-block;
}
} }
} }

4
shared/js/chat.ts
View file

@ -209,7 +209,7 @@ class ChatEntry {
let tag = $.spawn("div"); let tag = $.spawn("div");
tag.addClass("chat"); tag.addClass("chat");
tag.append("<div class=\"chatIcon icon clicon " + this.chatIcon() + "\"></div>"); tag.append("<div class=\"chatIcon icon " + this.chatIcon() + "\"></div>");
tag.append("<a class='name'>" + this._name + "</a>"); tag.append("<a class='name'>" + this._name + "</a>");
let closeTag = $.spawn("div"); let closeTag = $.spawn("div");
@ -288,7 +288,7 @@ class ChatEntry {
set unread(flag : boolean) { set unread(flag : boolean) {
if(this._unread == flag) return; if(this._unread == flag) return;
this._unread = flag; this._unread = flag;
this.htmlTag.find(".chatIcon").attr("class", "chatIcon icon clicon " + this.chatIcon()); this.htmlTag.find(".chatIcon").attr("class", "chatIcon icon " + this.chatIcon());
if(flag) { if(flag) {
this.htmlTag.find(".name").css("color", "blue"); this.htmlTag.find(".name").css("color", "blue");
} else { } else {