Disabeling BBCode formatting by default for the chat and giving a hint for the markdown format

Signed-off-by: WolverinDEV <git@teaspeak.de>

ChangeLog.md

@@ -1,4 +1,8 @@
 # Changelog:
+* **21.12.19**
+    - Improved background performance when the microphone has been muted
+    - Added support for `[ul]` and `[ol]` tags within the chat
+    
 * **20.12.19**
     - Fixing chat URL escaping
     - Fixed issue [#77](https://github.com/TeaSpeak/TeaWeb/issues/77)

shared/css/static/frame-chat.scss

@@ -1334,5 +1334,26 @@ $client_info_avatar_size: 10em;
 				vertical-align: text-bottom;
 			}
 		}
+
+		.container-format-helper {
+			flex-shrink: 0;
+			flex-grow: 0;
+
+			min-height: unset;
+			height: initial;
+
+			color: #555555;
+			font-size: .8em;
+			text-align: right;
+			margin: -3px 2px 2px 2.5em;
+
+			@include text-dotdotdot();
+			@include transition($button_hover_animation_time ease-in-out);
+
+			max-height: 2em; /* for a smooth transition */
+			&.hidden {
+				max-height: 0;
+			}
+		}
 	}
 }

shared/html/templates.html

@@ -288,6 +288,7 @@
                     <div class="chatbox">
                         <div class="container-typing">{{tr "Partner is typing..." /}}</div>
                         <node key="chatbox"></node>
+                        <div class="container-format-helper"></div>
                     </div>
                 </div>
             </div>
@@ -356,6 +357,7 @@
             <div class="container-channel-chat">
                 <div class="container-chat"></div>
                 <node key="chatbox"></node>
+                <div class="container-format-helper"></div>
             </div>
         </script>
 
@@ -2001,6 +2003,13 @@
                             </div>
                             <a>{{tr "Enables markdown input support for chat. " /}}</a>
                         </label>
+                        <label>
+                            <div class="checkbox">
+                                <input type="checkbox" class="option-support-bbcode">
+                                <div class="mark"></div>
+                            </div>
+                            <a>{{tr "Enable the BBCode syntax for your chat." /}}</a>
+                        </label>
                         <div class="container-icon-size">
                             <div>{{tr "Chat-icon size:" /}}<a class="value">100%</a></div>
                             <div class="container-slider">

shared/js/settings.ts

@@ -264,7 +264,7 @@ class Settings extends StaticSettings {
 
     static readonly KEY_CHAT_ENABLE_BBCODE: SettingsKey<boolean> = {
         key: 'chat_enable_bbcode',
-        default_value: true,
+        default_value: false,
         description: 'Enabled bbcode support in chat.'
     };
 

shared/js/ui/frames/chat.ts

@@ -97,11 +97,14 @@ namespace MessageHelper {
                 "b", "big",
                 "i", "italic",
                 "u", "underlined",
+                "s", "strikethrough",
                 "color",
                 "url",
                 "code",
                 "icode",
                 "i-code",
+                "sub", "sup",
+                "h1", "h2", "h3",
 
                 "ul", "ol", "list",
                 "li",

shared/js/ui/frames/chat_frame.ts

@@ -1768,6 +1768,7 @@ test
             this._container_conversation_list = this._html_tag.find(".conversation-list");
             this._html_no_chats = this._container_conversation_list.find(".no-chats");
             this._container_typing = this._html_tag.find(".container-typing");
+            this.update_input_format_helper();
         }
 
         try_input_focus() {
@@ -1778,6 +1779,15 @@ test
             if(this._current_conversation)
                 this._current_conversation.fix_scroll(false);
         }
+
+        update_input_format_helper() {
+            const tag = this._html_tag.find(".container-format-helper");
+            if(settings.static_global(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
+                tag.removeClass("hidden").text(tr("*italic*, **bold**, ~~strikethrough~~, `code`, and more..."));
+            } else {
+                tag.addClass("hidden");
+            }
+        }
     }
 
     export namespace channel {
@@ -2325,6 +2335,7 @@ test
                     if(this._current_conversation)
                         this._current_conversation.mark_read();
                 });
+                this.update_input_format_helper();
             }
 
             set_current_channel(channel_id: number, update_info_frame?: boolean) {
@@ -2378,6 +2389,15 @@ test
                 if(this._current_conversation)
                     this._current_conversation.fix_scroll(false);
             }
+
+            update_input_format_helper() {
+                const tag = this._html_tag.find(".container-format-helper");
+                if(settings.static_global(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
+                    tag.removeClass("hidden").text(tr("*italic*, **bold**, ~~strikethrough~~, `code`, and more..."));
+                } else {
+                    tag.addClass("hidden");
+                }
+            }
         }
     }
 

shared/js/ui/modal/ModalSettings.ts

@@ -344,12 +344,24 @@ namespace Modals {
             }).prop("checked", settings.static_global(Settings.KEY_CHAT_COLORED_EMOJIES));
         }
 
+        const update_format_helper = () => server_connections.server_connection_handlers().map(e => e.side_bar).forEach(e => {
+            e.private_conversations().update_input_format_helper();
+            e.channel_conversations().update_input_format_helper();
+        });
         {
             const option = container.find(".option-support-markdown") as JQuery<HTMLInputElement>;
             option.on('change', event => {
                 settings.changeGlobal(Settings.KEY_CHAT_ENABLE_MARKDOWN, option[0].checked);
+                update_format_helper();
             }).prop("checked", settings.static_global(Settings.KEY_CHAT_ENABLE_MARKDOWN));
         }
+        {
+            const option = container.find(".option-support-bbcode") as JQuery<HTMLInputElement>;
+            option.on('change', event => {
+                settings.changeGlobal(Settings.KEY_CHAT_ENABLE_BBCODE, option[0].checked);
+                update_format_helper();
+            }).prop("checked", settings.static_global(Settings.KEY_CHAT_ENABLE_BBCODE));
+        }
         {
             const option = container.find(".option-url-tagging") as JQuery<HTMLInputElement>;
             option.on('change', event => {

vendor/xbbcode

@@ -1 +1 @@
-Subproject commit b65dc080a8e2410563f9ce7e50a6c7e99f6eee09
+Subproject commit daf528bd7b4a51a8b83f1b9c50ce63bab672ac35