From ebf3e9f7b9f847e3b6c0a30720b12dd293458a62 Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sun, 14 Oct 2018 13:27:48 +0200 Subject: [PATCH] Fixed some style bugs and permission editor bug for the native client --- .travis.yml | 2 +- index.php | 4 +- shared/css/general.scss | 9 +- shared/css/modals.scss | 32 +++- shared/css/ts/tab.scss | 12 +- shared/js/load.ts | 39 +++-- shared/js/main.ts | 19 ++- shared/js/proto.ts | 8 +- shared/js/ui/modal/ModalPermissionEdit.ts | 40 +---- shared/js/utils/modal.ts | 7 +- templates.html | 199 +++++++++++++--------- 11 files changed, 215 insertions(+), 156 deletions(-) diff --git a/.travis.yml b/.travis.yml index ebf10067..7ba23a4b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -9,7 +9,7 @@ jobs: - docker images - docker pull $DOCKER_USERNAME/teaweb:build - docker images - - docker run --rm $DOCKER_USERNAME/teaweb /bin/bash -c /root/build_teaweb.sh travis + - docker run --rm $DOCKER_USERNAME/teaweb /bin/bash -c /root/build_teaweb.sh travis travis if: branch = master - stage: test teaweb script: diff --git a/index.php b/index.php index e082b0f3..3a768aac 100644 --- a/index.php +++ b/index.php @@ -72,7 +72,7 @@ ?> - + diff --git a/shared/css/general.scss b/shared/css/general.scss index 81163a97..fc5eae29 100644 --- a/shared/css/general.scss +++ b/shared/css/general.scss @@ -79,7 +79,13 @@ } /* Modal Body */ -.modal-body:not(:empty) {padding: 2px 16px;} +.modal-body:not(:empty) { + display: flex; + padding: 2px 16px; + flex-grow: 1; + flex-direction: column; + justify-content: stretch; +} /* Modal Footer */ .modal-footer:not(:empty) { @@ -120,6 +126,7 @@ animation-name: modalFlyIn; animation-duration: 0.4s; top: 10%; + max-height: 80%; left: 0; right: 0; diff --git a/shared/css/modals.scss b/shared/css/modals.scss index 77bd74be..662e4cb1 100644 --- a/shared/css/modals.scss +++ b/shared/css/modals.scss @@ -140,10 +140,21 @@ } } +.horizontal-stretch { + display: flex; + flex-grow: 1; + flex-direction: column; +} + +.container-permissions { + display: flex; + height: 100%; +} + .permission-explorer { width: 100%; display: grid; - grid-template-rows: min-content auto; + grid-template-rows: min-content auto min-content; grid-gap: 5px; .bar-filter { @@ -355,15 +366,21 @@ .layout-group-server, .layout-group-channel, .layout-channel, .layout-client, .layout-client-channel { width: 100%; + height: 100%; display: flex; flex-direction: row; + justify-content: stretch; & > div { margin: 5px; } .list-group-server, .list-group-channel, .list-group-server-clients, .list-channel { + border: grey solid 1px; position: relative; + width: 175px; + flex-grow: 0; + .entries { display: table; position: absolute; @@ -374,8 +391,6 @@ } .list-group-server, .list-group-channel { - width: 300px; - flex-grow: 0; border: grey solid 1px; user-select: none; overflow: auto; @@ -419,7 +434,6 @@ .list-group-server-clients { flex-grow: 0; width: 200px; - border: grey solid 1px; } } @@ -428,10 +442,7 @@ display: flex; flex-direction: column; - overflow-x: scroll; - overflow-y: auto; - width: 300px; - flex-grow: 1; + overflow: auto; .channel { cursor: pointer; @@ -455,6 +466,7 @@ .client-info { display: flex; flex-direction: column; + width: 200px; & > div:not(.list-channel) { display: grid; @@ -467,6 +479,10 @@ pointer-events: none; } } + + .list-channel { + flex-grow: 1; + } } } diff --git a/shared/css/ts/tab.scss b/shared/css/ts/tab.scss index 30d7a0c5..5316e32c 100644 --- a/shared/css/ts/tab.scss +++ b/shared/css/ts/tab.scss @@ -1,10 +1,14 @@ x-tab { display:none } +x-content { + width: 100%; +} .tab { padding: 2px; height: 100%; - display: flex; flex-direction: column; + display: flex; + flex-grow: 1; } .tab div * { @@ -18,6 +22,9 @@ x-tab { display:none } overflow-y: auto; height: 100%; padding: 2px; + + display: flex; + flex-grow: 1; } /* @@ -47,6 +54,9 @@ x-tab { display:none } flex-direction: row; justify-content: stretch; width: 100%; + + flex-grow: 0; + flex-shrink: 0; } .tab .tab-header .entry { diff --git a/shared/js/load.ts b/shared/js/load.ts index 0cf475e3..3ca032d8 100644 --- a/shared/js/load.ts +++ b/shared/js/load.ts @@ -115,7 +115,7 @@ function loadDebug() { app.type = app.Type.DEBUG; console.log("Load for debug!"); - awaitLoad(loadScripts([ + load_wait_scripts([ ["wasm/TeaWeb-Identity.js"], //Load general API's @@ -170,18 +170,18 @@ function loadDebug() { "js/client.js", "js/chat.js", "js/Identity.js" + ]).then(() => load_wait_scripts([ + "js/codec/CodecWrapper.js" + ])).then(() => load_wait_scripts([ + "js/main.js" ])).then(() => { - return loadScripts(["js/codec/CodecWrapper.js"]); - }).then(() => { - awaitLoad(loadScripts(["js/main.js"])).then(() => { - console.log("Loaded successfully all scripts!"); - app.callbackApp(); - }); + console.log("Loaded successfully all scripts!"); + app.callbackApp(); }); } -function awaitLoad(promises: {path: string, promise: Promise}[]) : Promise { - return new Promise((resolve, reject) => { +function awaitLoad(promises: {path: string, promise: Promise}[]) : Promise { + return new Promise((resolve, reject) => { let awaiting = promises.length; let success = true; @@ -205,6 +205,10 @@ function awaitLoad(promises: {path: string, promise: Promise}[]) : Prom }); } +function load_wait_scripts(paths: (string | string[])[]) : Promise { + return awaitLoad(loadScripts(paths)); +} + function loadTemplates() { //Load the templates @@ -248,6 +252,7 @@ function loadSide() { if(window.require !== undefined) { console.log("Loading node specific things"); const remote = require('electron').remote; + module.paths.push(remote.app.getAppPath() + "/node_modules"); module.paths.push(remote.app.getAppPath() + "/app"); module.paths.push(remote.getGlobal("browser-root") + "js/"); window.$ = require("assets/jquery.min.js"); @@ -269,15 +274,17 @@ function loadSide() { return; } //Load the general scripts and required scripts - (window.require !== undefined ? Promise.resolve(true) : awaitLoad(loadScripts([ - ["vendor/jquery/jquery.min.js"], - ]))).then(() => awaitLoad(loadScripts([ + (window.require !== undefined ? + Promise.resolve() : + load_wait_scripts([ + "vendor/jquery/jquery.min.js" + ]) + ).then(() => load_wait_scripts([ + "vendor/jsrender/jsrender.min.js" + ])).then(() => load_wait_scripts([ ["vendor/bbcode/xbbcode.js"], ["https://webrtc.github.io/adapter/adapter-latest.js"] - ]))).then(() => awaitLoad(loadScripts([ - //["https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"] - ["vendor/jsrender/jsrender.min.js"] - ]))).then(() => { + ])).then(() => { //Load the teaweb scripts loadScript("js/proto.js").then(loadDebug).catch(loadRelease); //Load the teaweb templates diff --git a/shared/js/main.ts b/shared/js/main.ts index 192fbc07..8c622a7d 100644 --- a/shared/js/main.ts +++ b/shared/js/main.ts @@ -49,14 +49,14 @@ function setup_close() { }; } -function main() { +function setup_jsrender() : boolean { if(!js_render) { displayCriticalError("Missing jsrender extension!"); - return; + return false; } if(!js_render.views) { displayCriticalError("Missing jsrender viewer extension!"); - return; + return false; } js_render.views.settings.allowCode(true); js_render.views.tags("rnd", (argument) => { @@ -65,6 +65,19 @@ function main() { return (Math.round(Math.random() * (min + max + 1) - min)).toString(); }); + + $(".jsrender-template").each((idx, _entry) => { + if(!js_render.templates(_entry.id, _entry.innerHTML)) { //, _entry.innerHTML + console.error("Failed to cache template " + _entry.id + " for js render!"); + } else + console.debug("Successfully loaded jsrender template " + _entry.id); + }); + return true; +} + +function main() { + if(!setup_jsrender()) return; + //http://localhost:63343/Web-Client/index.php?_ijt=omcpmt8b9hnjlfguh8ajgrgolr&default_connect_url=true&default_connect_type=teamspeak&default_connect_url=localhost%3A9987&disableUnloadDialog=1&loader_ignore_age=1 AudioController.initializeAudioController(); if(!TSIdentityHelper.setup()) { console.error("Could not setup the TeamSpeak identity parser!"); return; } diff --git a/shared/js/proto.ts b/shared/js/proto.ts index 6102cbd4..148723ae 100644 --- a/shared/js/proto.ts +++ b/shared/js/proto.ts @@ -112,8 +112,12 @@ if(typeof ($) !== "undefined") { if(this.render) { result = $(this.render(values)); } else { - result = window.jsrender.templates("xxx", this.html()) - result = window.jsrender.render["xxx"](values); + const template = window.jsrender.render[this.attr("id")]; + /* + result = window.jsrender.templates("tmpl_permission_entry", $("#tmpl_permission_entry").html()); + result = window.jsrender.templates("xxx", this.html()); + */ + result = template(values); result = $(result); } result.find("node").each((index, element) => { diff --git a/shared/js/ui/modal/ModalPermissionEdit.ts b/shared/js/ui/modal/ModalPermissionEdit.ts index 65c9ce39..135db57b 100644 --- a/shared/js/ui/modal/ModalPermissionEdit.ts +++ b/shared/js/ui/modal/ModalPermissionEdit.ts @@ -37,41 +37,6 @@ namespace Modals { entry.permission_name = perm.name; entry.unset = true; group_entry.entries.push(entry); - - { - let tag: JQuery; - if(perm.name.startsWith("b_")) { - tag = $.spawn("label").addClass("checkbox"); - $.spawn("input").attr("type", "checkbox").appendTo(tag); - $.spawn("span").addClass("checkmark").appendTo(tag); - } else { - tag = $.spawn("input"); - tag.attr("type", "number"); - tag.attr("min-value", -1); - tag.attr("max-value", 9999999999); //TODO use there may the grant permission - } - root_entry[perm.name + "_value"] = tag; - } - { - let tag = $.spawn("label").addClass("checkbox"); - $.spawn("input").attr("type", "checkbox").appendTo(tag); - $.spawn("span").addClass("checkmark").appendTo(tag); - root_entry[perm.name + "_skip"] = tag; - } - { - let tag = $.spawn("label").addClass("checkbox"); - $.spawn("input").attr("type", "checkbox").appendTo(tag); - $.spawn("span").addClass("checkmark").appendTo(tag); - root_entry[perm.name + "_negate"] = tag; - } - { - let tag = $.spawn("input"); - tag.attr("type", "number"); - tag.attr("min-value", -1); - tag.attr("max-value", 9999999999); - root_entry[perm.name + "_grant"] = tag; - } - //{{>permission_name}}_value } }; groups.forEach(entry => insert_group(entry)); @@ -115,7 +80,8 @@ namespace Modals { return tag; }, - width: "90%" + width: "90%", + height: "80%" }); connectModal.htmlTag.find(".btn_close").on('click', () => { @@ -152,7 +118,7 @@ namespace Modals { function make_permission_editor(tag: JQuery, default_number: number, cb_edit: (type: PermissionInfo, value?: number, skip?: boolean, negate?: boolean) => Promise, cb_grant_edit: (type: PermissionInfo, value?: number) => Promise) { tag = tag.hasClass("permission-explorer") ? tag : tag.find(".permission-explorer"); const list = tag.find(".list"); - list.css("max-height", document.body.clientHeight * .7) + //list.css("max-height", document.body.clientHeight * .7) list.find(".arrow").each((idx, _entry) => { let entry = $(_entry); diff --git a/shared/js/utils/modal.ts b/shared/js/utils/modal.ts index 7c0a559e..2ca4d218 100644 --- a/shared/js/utils/modal.ts +++ b/shared/js/utils/modal.ts @@ -58,7 +58,7 @@ class ModalProperties { return this; } width: number | string = "60%"; - hight: number | string = "auto"; + height: number | string = "auto"; closeable: boolean = true; @@ -92,7 +92,10 @@ class Modal { let content = $.spawn("div"); content.addClass("modal-content"); - content.css("width", this.properties.width); + if(this.properties.width) + content.css("width", this.properties.width); + if(this.properties.height) + content.css("height", this.properties.height); let header = ModalFunctions.divify(ModalFunctions.jqueriefy(this.properties.header)).addClass("modal-header"); if(this.properties.closeable) header.append("×"); diff --git a/templates.html b/templates.html index 2a8ff2df..7a6c2988 100644 --- a/templates.html +++ b/templates.html @@ -6,7 +6,7 @@ - - - - - - - - - - - + - - - - - -