Add custom theme for advanced users

UI/Base/Combine.ts

@@ -3,10 +3,12 @@ import Translations from "../i18n/Translations";
 
 export default class Combine extends UIElement {
     private uiElements: (string | UIElement)[];
+    private className: string = undefined;
     private clas: string = undefined;
 
-    constructor(uiElements: (string | UIElement)[]) {
+    constructor(uiElements: (string | UIElement)[], className: string = undefined) {
         super(undefined);
+        this.className = className;
         this.uiElements = uiElements;
     }
 
@@ -19,6 +21,10 @@ export default class Combine extends UIElement {
                 elements += element;
             }
         }
+        if(this.className !== undefined){
+            elements = `<span class='${this.className}'>${elements}</span>`;
+        }
+        
         return elements;
     }
 

UI/Base/Image.ts

@@ -0,0 +1,20 @@
+import {UIElement} from "../UIElement";
+
+
+export class Image extends UIElement{
+    private src: string;
+    private style: string = "";
+    constructor(src: string, style: string = "") {
+        super(undefined);
+        this.style = style;
+        this.src = src;
+    }
+    
+    InnerRender(): string {
+        if(this.src === undefined){
+            return "";
+        }
+        return `<img src='${this.src}' style='${this.style}'>`;
+    }
+    
+}

UI/Base/TabbedComponent.ts

@@ -27,8 +27,10 @@ export class TabbedComponent extends UIElement {
         for (let i = 0; i < this.headers.length; i++) {
             let header = this.headers[i];
 
-            headerBar += `<div class=\'tab-single-header ${i == this._source.data ? 'tab-active' : 'tab-non-active'}\'>` +
-                header.Render() + "</div>"
+            if (!this.content[i].IsEmpty()) {
+                headerBar += `<div class=\'tab-single-header ${i == this._source.data ? 'tab-active' : 'tab-non-active'}\'>` +
+                    header.Render() + "</div>"
+            }
         }