From 040c218fb2c584a061f01dac33f366578df06e68 Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sun, 17 Mar 2019 12:15:39 +0100 Subject: [PATCH] A lot of changes --- .gitmodules | 3 + ChangeLog.md | 20 ++ shared/css/static/channel-tree.scss | 4 + shared/css/static/control_bar.scss | 18 +- shared/css/static/frame/SelectInfo.scss | 37 ++- shared/css/static/general.scss | 118 +++++++--- shared/css/static/ts/chat.scss | 47 +++- shared/css/static/ts/icons.scss | 2 +- shared/css/static/ts/tab.scss | 25 +- shared/html/index.php | 4 +- shared/html/templates.html | 98 +++++--- shared/js/FileManager.ts | 4 + shared/js/chat.ts | 218 +++++++++++------- shared/js/client.ts | 10 +- shared/js/connection/CommandHandler.ts | 97 +++++++- shared/js/connection/ServerConnection.ts | 4 +- shared/js/load.ts | 3 +- shared/js/log.ts | 65 ++++-- shared/js/main.ts | 12 +- shared/js/profiles/identities/NameIdentity.ts | 3 +- .../profiles/identities/TeaForumIdentity.ts | 4 +- .../profiles/identities/TeamSpeakIdentity.ts | 28 +-- shared/js/settings.ts | 176 +++++++++++--- shared/js/sound/Sounds.ts | 2 +- shared/js/ui/channel.ts | 94 +++++++- shared/js/ui/client.ts | 21 +- shared/js/ui/frames/ControlBar.ts | 148 +++++++----- shared/js/ui/frames/SelectedItemInfo.ts | 87 +++++-- shared/js/ui/modal/ModalConnect.ts | 10 +- shared/js/ui/view.ts | 42 ++++ shared/js/utils/tab.ts | 11 +- vendor/jqueryjquery.min.js | 1 + vendor/jsrender/jsrender.min.js | 2 +- vendor/ua-parser-js | 1 + web/css/static/main.scss | 2 + 35 files changed, 1064 insertions(+), 357 deletions(-) create mode 120000 vendor/jqueryjquery.min.js create mode 160000 vendor/ua-parser-js diff --git a/.gitmodules b/.gitmodules index a69d7e56..fa43c3ad 100644 --- a/.gitmodules +++ b/.gitmodules @@ -5,3 +5,6 @@ [submodule "vendor/bbcode"] path = vendor/bbcode url = https://github.com/WolverinDEV/Extendible-BBCode-Parser.git +[submodule "vendor\\ua-parser-js"] + path = vendor\\ua-parser-js + url = https://github.com/WolverinDEV/ua-parser-js diff --git a/ChangeLog.md b/ChangeLog.md index d45b80c1..4c65d02d 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,4 +1,24 @@ # Changelog: +* **XXX** + - Using VAD by default instead of PPT + - Improved mobile experience: + - Double touch join channel + - Removed the info bar for devices smaller than 500px + - Added country flags and names + - Added favicon, which change when you're recording + - Fixed double cache loading + - Fixed modal sizing scroll bug + - Added a channel subscribe all button + - Added individual channel subscribe settings + - Improved chat switch performance + - Added a chat message URL finder + - Escape URL detection with `!` + - Improved chat experience + - Displaying offline chats as offline + - Notify when user closes the chat + - Notify when user disconnect/reconnects + - Preloading hostbanners to prevent flickering + * **17.02.19** - Removed WebAssembly as dependency (Now working with MS Edge as well (but without audio)) - Improved channel tree performance diff --git a/shared/css/static/channel-tree.scss b/shared/css/static/channel-tree.scss index 5d92c8c7..ee2eb2f4 100644 --- a/shared/css/static/channel-tree.scss +++ b/shared/css/static/channel-tree.scss @@ -135,6 +135,10 @@ display: block; } } + + .icon_no_sound { + display: flex; + } } .container-clients { diff --git a/shared/css/static/control_bar.scss b/shared/css/static/control_bar.scss index 8f4abda1..2ec3a444 100644 --- a/shared/css/static/control_bar.scss +++ b/shared/css/static/control_bar.scss @@ -47,13 +47,11 @@ $background:lightgray; .button-dropdown { .buttons { - display: grid; - grid-template-columns: auto auto; - grid-template-rows: 100%; - grid-gap: 2px; + display: flex; + flex-direction: row; .button { - margin-right: 0px; + margin-right: 0; } .button-dropdown { @@ -83,6 +81,7 @@ $background:lightgray; background-color: rgba(0,0,0,0.4); border-color: rgba(255, 255, 255, .75); /*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/ + border-left: 2px solid rgba(255, 255, 255, .75); } } } @@ -103,6 +102,11 @@ $background:lightgray; z-index: 1000; /*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/ + + &.right { + + } + .icon { vertical-align: middle; margin-right: 5px; @@ -131,8 +135,8 @@ $background:lightgray; } } - &:hover { - .dropdown.displayed { + &:hover.displayed { + .dropdown { display: block; } } diff --git a/shared/css/static/frame/SelectInfo.scss b/shared/css/static/frame/SelectInfo.scss index 72ff32e3..335249cc 100644 --- a/shared/css/static/frame/SelectInfo.scss +++ b/shared/css/static/frame/SelectInfo.scss @@ -60,6 +60,8 @@ } .container-banner { + position: relative; + flex-grow: 1; flex-shrink: 2; max-height: 25%; @@ -78,9 +80,29 @@ position: relative; flex-grow: 1; - img { - position: absolute; - } + .image-container { + display: flex; + flex-direction: row; + justify-content: center; + height: 100%; + + div { + background-position: center; + + &.hostbanner-mode-0 { } + + &.hostbanner-mode-1 { + width: 100%; + height: auto; + } + + &.hostbanner-mode-2 { + background-size: contain!important; + width:100%; + height:100% + } + } + } } } @@ -109,4 +131,13 @@ } } } + + .button-browser-info { + vertical-align: bottom; + cursor: pointer; + + &:hover { + background-color: gray; + } + } } \ No newline at end of file diff --git a/shared/css/static/general.scss b/shared/css/static/general.scss index e59cbc80..c0d474b8 100644 --- a/shared/css/static/general.scss +++ b/shared/css/static/general.scss @@ -228,9 +228,12 @@ footer .container { } $separator_thickness: 4px; -$small_device: 500px; +$small_device: 650px; +$animation_length: .5s; .app { + min-width: 350px; + .container-app-main { position: relative; display: flex; @@ -304,40 +307,78 @@ $small_device: 500px; flex-direction: row; justify-content: stretch; } -} -@media only screen and (max-width: $small_device) { - .container-app-main { - .container-info { - display: none; - position: absolute; - width: 100%!important; /* override the seperator property */ - height: 100%; + .hide-small { + opacity: 1; + transition: opacity $animation_length linear; + } - z-index: 1000; + .show-small { + display: none; - &.shown { - display: block; - } - - .select_info { - > .close { - display: block; - } - } - } - - .container-channel-chat + .container-seperator { - display: none; - } - - .container-channel-chat { - width: 100%!important; /* override the seperator property */ - } + opacity: 0; + transition: opacity $animation_length linear; } } +@media only screen and (max-width: $small_device) { + .app-container { + right: 0; + left: 0; + bottom: 25px; + top: 0; + + transition: all $animation_length linear; + overflow: auto; + } + + .app { + .container-app-main { + .container-info { + display: none; + position: absolute; + + width: 100%!important; /* override the seperator property */ + height: 100%; + + z-index: 1000; + + &.shown { + display: block; + } + + .select_info { + > .close { + display: block; + } + } + } + + .container-channel-chat + .container-seperator { + display: none; + animation: fadeout $animation_length linear; + } + + .container-channel-chat { + width: 100%!important; /* override the seperator property */ + } + } + } + + .hide-small { + display: none; + opacity: 0; + transition: opacity $animation_length linear; + } + + .show-small { + display: block!important; + + opacity: 1!important; + transition: opacity $animation_length linear; + } +} .container-seperator { background: lightgray; flex-grow: 0; @@ -399,13 +440,24 @@ body { } .icon-playlist-manage { - display: inline-block; - width: 32px; - height: 32px; + &.icon { + width: 16px; + height: 16px; + background-position: -5px -5px; + background-size: 25px; + } + + &.icon_x32 { + width: 32px; + height: 32px; + + background-position: -11px -9px; + background-size: 50px; + } + + display: inline-block; background: url('../../img/music/playlist.svg') no-repeat; - background-position: -11px -9px; - background-size: 50px; } x-content { diff --git a/shared/css/static/ts/chat.scss b/shared/css/static/ts/chat.scss index 51a68352..9fd2d806 100644 --- a/shared/css/static/ts/chat.scss +++ b/shared/css/static/ts/chat.scss @@ -35,6 +35,20 @@ display: inline-block; vertical-align: top; } + + .event-message { /* special formated messages */ + &.event-partner-disconnect { + color: red; + } + + &.event-partner-connect { + color: green; + } + + &.event-partner-closed { + color: orange; + } + } } } } @@ -62,11 +76,9 @@ cursor: pointer; height: 18px; - &.active { - background: #11111111; - } - .btn_close { + display: none; + float: none; margin-right: -5px; margin-left: 8px; @@ -78,9 +90,34 @@ } } - .name, .chatIcon { + .name, .chat-type { display: inline-block; } + + .name { + color: black; + } + + &.closeable { + .btn_close { + display: inline-block; + } + } + + &.active { + background: #11111111; + } + + &.offline { + .name { + color: gray; + } + } + &.unread { + .name { + color: blue; + } + } } } diff --git a/shared/css/static/ts/icons.scss b/shared/css/static/ts/icons.scss index dc739f35..5dafecdc 100644 --- a/shared/css/static/ts/icons.scss +++ b/shared/css/static/ts/icons.scss @@ -1031,7 +1031,7 @@ } .icon_x32.client-refresh { background-position: calc(-224px * 2) calc(-256px * 2); -}pe the key you wish +} .icon_x32.client-register { background-position: calc(-256px * 2) calc(-256px * 2); } diff --git a/shared/css/static/ts/tab.scss b/shared/css/static/ts/tab.scss index 0f6c28e9..a312ae96 100644 --- a/shared/css/static/ts/tab.scss +++ b/shared/css/static/ts/tab.scss @@ -1,7 +1,4 @@ x-tab { display:none } -x-content { - width: 100%; -} .tab { padding: 2px; @@ -18,15 +15,19 @@ x-content { .tab .tab-content { min-height: 200px; - border-color: #6f6f6f; - border-radius: 0px 2px 2px 2px; - border-style: solid; - overflow-y: auto; + border-radius: 0 2px 2px 2px; + border: solid #6f6f6f; + overflow-y: hidden; height: 100%; padding: 2px; display: flex; flex-grow: 1; + + x-content { + overflow-y: auto; + width: 100%; + } } /* @@ -39,7 +40,7 @@ x-content { */ .tab .tab-header { - font-family: Arial; + font-family: Arial, serif; font-size: 12px; /*white-space: pre;*/ line-height: 1; @@ -64,14 +65,10 @@ x-content { .tab .tab-header .entry { background: #5f5f5f5f; display: inline-block; - border: #6f6f6f; - border-width: 1px; - border-style: solid; + border: 1px solid #6f6f6f; border-radius: 2px 2px 0px 0px; vertical-align: middle; - padding: 2px; - padding-left: 5px; - padding-right: 5px; + padding: 2px 5px; cursor: pointer; flex-grow: 1; } diff --git a/shared/html/index.php b/shared/html/index.php index 91f5c861..b382804f 100644 --- a/shared/html/index.php +++ b/shared/html/index.php @@ -190,9 +190,9 @@ \ No newline at end of file diff --git a/shared/html/templates.html b/shared/html/templates.html index 9d4d5ac7..d5beca49 100644 --- a/shared/html/templates.html +++ b/shared/html/templates.html @@ -6,7 +6,6 @@ TeaSpeak-Web client templates -