Made the sections scrollable
WolverinDEV
parent
bc38e367d3
commit
9236714bec
|
|
@ -150,13 +150,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.main_container {
|
||||
padding: 4px;
|
||||
border: lightgray solid;
|
||||
border-width: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: gray;
|
||||
}
|
||||
|
|
@ -268,24 +261,56 @@ footer .container {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
$separator_thickness: 4px;
|
||||
.app {
|
||||
.container-app-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
|
||||
border: $separator_thickness solid lightgray;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.container-control-bar {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
border-radius: 2px 0 0 0;
|
||||
border-bottom-width: 0;
|
||||
background-color: lightgrey;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container-channel-chat {
|
||||
/*
|
||||
> div {
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
max-width: 100%;
|
||||
}
|
||||
*/
|
||||
|
||||
min-width: 100px;
|
||||
max-width: 60%; /* tmp chat fix */
|
||||
//max-width: 60%; /* tmp chat fix */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: stretch;
|
||||
|
||||
.container-channel {
|
||||
flex-grow: 60;
|
||||
background: white;
|
||||
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
height: calc(100% - 250px);
|
||||
min-height: 100px;
|
||||
|
||||
/*
|
||||
overflow: auto;
|
||||
|
|
@ -293,30 +318,51 @@ footer .container {
|
|||
*/
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
background: white;
|
||||
border: 2px solid lightgray;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.container-chat {
|
||||
background: white;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
|
||||
max-height: 400px;
|
||||
//max-height: 400px;
|
||||
height: 250px;
|
||||
border-radius: 0 0 0 2px;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
min-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-info {
|
||||
background: white;
|
||||
|
||||
min-width: 100px;
|
||||
max-width: 40%;
|
||||
width: 40%;
|
||||
border-radius: 0 0 2px 0;
|
||||
//max-width: 40%;
|
||||
//width: 40%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.container-seperator {
|
||||
background: lightgray;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.horizontal {
|
||||
height: $separator_thickness;
|
||||
width: 100%;
|
||||
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
width: $separator_thickness;
|
||||
height: 100%;
|
||||
|
||||
cursor: col-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@
|
|||
<script class="jsrender-template" id="tmpl_main" type="text/html">
|
||||
<div class="app-container">
|
||||
<div class="app">
|
||||
<!-- Container -->
|
||||
<div style="height: 45px; width: 100%; border-radius: 2px 0px 0px 0px; border-bottom-width: 0px; background-color: lightgrey"
|
||||
class="main_container">
|
||||
<!-- navigation bar -->
|
||||
<div class="container-control-bar">
|
||||
<div id="control_bar" class="control_bar">
|
||||
<div class="button btn_connect" title="{{tr 'Connect to a server' /}}">
|
||||
<div class="icon_x32 client-connect"></div>
|
||||
|
|
@ -100,12 +99,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-direction: row; height: 100%; width: 100%; display: flex; justify-content: stretch;">
|
||||
<div class="container-app-main">
|
||||
<div class="container-channel-chat">
|
||||
<div class="container-channel" class="main_container">
|
||||
<!-- Channel tree -->
|
||||
<div class="container-channel main_container">
|
||||
<div class="channelTree" id="channelTree"></div>
|
||||
</div>
|
||||
<!-- Channel tree -->
|
||||
|
||||
<div class="container-seperator horizontal"></div>
|
||||
<!-- Chat window -->
|
||||
<div class="main_container container-chat">
|
||||
<div id="chat">
|
||||
<div class="messages">
|
||||
|
|
@ -118,8 +120,9 @@
|
|||
<button>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- Chat window -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-seperator vertical"></div>
|
||||
<div class="main_container container-info">
|
||||
<div id="select_info" class="select_info" style="width: 100%; max-width: 100%">
|
||||
<div class="container-banner"></div>
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ namespace loader {
|
|||
|
||||
let error = false;
|
||||
const error_handler = (event: ErrorEvent) => {
|
||||
if(event.filename == tag.src) { //Our tag throw an uncaught error
|
||||
if(event.filename == tag.src && event.message.indexOf("Illegal constructor") == -1) { //Our tag throw an uncaught error
|
||||
//console.log("msg: %o, url: %o, line: %o, col: %o, error: %o", event.message, event.filename, event.lineno, event.colno, event.error);
|
||||
window.removeEventListener('error', error_handler as any);
|
||||
|
||||
|
|
@ -340,6 +340,7 @@ const loader_javascript = {
|
|||
"js/ui/server.js",
|
||||
"js/ui/view.js",
|
||||
"js/ui/client_move.js",
|
||||
"js/ui/context_divider.js",
|
||||
|
||||
"js/ui/frames/SelectedItemInfo.js",
|
||||
"js/ui/frames/ControlBar.js",
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ async function initialize() {
|
|||
}
|
||||
|
||||
try { //Initialize main template
|
||||
const main = $("#tmpl_main").renderTag();
|
||||
const main = $("#tmpl_main").renderTag().dividerfy();
|
||||
$("body").append(main);
|
||||
} catch(error) {
|
||||
console.error(error);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
/// <reference path="client.ts" />
|
||||
|
||||
if(typeof(customElements) !== "undefined") {
|
||||
class X_Properties extends HTMLElement {}
|
||||
class X_Property extends HTMLElement {}
|
||||
try {
|
||||
class X_Properties extends HTMLElement {}
|
||||
class X_Property extends HTMLElement {}
|
||||
|
||||
customElements.define('x-properties', X_Properties, { extends: 'div' });
|
||||
customElements.define('x-property', X_Property, { extends: 'div' });
|
||||
customElements.define('x-properties', X_Properties, { extends: 'div' });
|
||||
customElements.define('x-property', X_Property, { extends: 'div' });
|
||||
} catch(error) {
|
||||
console.warn("failed to define costum elements");
|
||||
}
|
||||
}
|
||||
|
||||
class StaticSettings {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
interface JQuery<TElement = HTMLElement> {
|
||||
dividerfy() : this;
|
||||
}
|
||||
|
||||
if(!$.fn.dividerfy) {
|
||||
$.fn.dividerfy = function<T extends HTMLElement>(this: JQuery<T>) : JQuery<T> {
|
||||
this.find(".container-seperator").each(function (this: T) {
|
||||
const element = $(this);
|
||||
const vertical = element.hasClass("vertical");
|
||||
|
||||
const listener_move = (event: MouseEvent) => {
|
||||
if(!this.previousElementSibling) return;
|
||||
if(!this.nextElementSibling) return;
|
||||
|
||||
const parent_element = $(this.parentElement);
|
||||
const previous_element = $(this.previousElementSibling);
|
||||
const next_element = $(this.nextElementSibling);
|
||||
|
||||
const parent_offset = parent_element.offset();
|
||||
const min = vertical ? parent_offset.left : parent_offset.top;
|
||||
const max = vertical ? parent_offset.left + parent_element.width() : parent_offset.top + parent_element.height();
|
||||
const current = vertical ? event.pageX : event.pageY;
|
||||
|
||||
/*
|
||||
const previous_offset = previous_element.offset();
|
||||
const next_offset = next_element.offset();
|
||||
|
||||
const min = vertical ? Math.min(previous_offset.left, next_offset.left) : Math.min(previous_offset.top, next_offset.top);
|
||||
const max = vertical ?
|
||||
Math.max(previous_offset.left + previous_element.width(), next_offset.left + next_element.width()) :
|
||||
Math.max(previous_offset.top + previous_element.height(), next_offset.top + next_element.height());
|
||||
*/
|
||||
|
||||
let previous_width = 0;
|
||||
let next_width = 0;
|
||||
if(current < min) {
|
||||
previous_width = 0;
|
||||
next_width = 1;
|
||||
} else if(current < max) {
|
||||
const x_offset = current - min;
|
||||
const x_offset_max = max - min;
|
||||
|
||||
previous_width = x_offset / x_offset_max;
|
||||
next_width = 1 - previous_width;
|
||||
} else {
|
||||
previous_width = 1;
|
||||
next_width = 0;
|
||||
}
|
||||
|
||||
|
||||
previous_element.css(vertical ? "width" : "height", "calc(" + Math.ceil(previous_width * 100) + "% - " + (vertical ? element.width() : element.height()) + "px)");
|
||||
next_element.css(vertical ? "width" : "height", "calc(" + Math.ceil(next_width * 100) + "% - " + (vertical ? element.width() : element.height()) + "px)");
|
||||
};
|
||||
|
||||
const listener_up = (event: MouseEvent) => {
|
||||
document.removeEventListener('mousemove', listener_move);
|
||||
document.removeEventListener('mouseup', listener_up);
|
||||
$(document.documentElement).css("user-select", "");
|
||||
};
|
||||
|
||||
element.on('mousedown', () => {
|
||||
document.addEventListener('mousemove', listener_move);
|
||||
document.addEventListener('mouseup', listener_up);
|
||||
$(document.documentElement).css("user-select", "none");
|
||||
});
|
||||
});
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,16 @@
|
|||
/// <reference path="../../proto.ts" />
|
||||
/// <reference path="../../client.ts" />
|
||||
|
||||
/*
|
||||
TODO: Check needed permissions and may not even try to request, because we dont have the permission. Permissions:
|
||||
b_virtualserver_servergroup_permission_list
|
||||
b_virtualserver_channel_permission_list
|
||||
b_virtualserver_client_permission_list
|
||||
b_virtualserver_channelgroup_permission_list
|
||||
b_virtualserver_channelclient_permission_list
|
||||
b_virtualserver_playlist_permission_list
|
||||
*/
|
||||
|
||||
namespace Modals {
|
||||
async function build_permission_editor() : Promise<JQuery[]> {
|
||||
let root_entry: any = {};
|
||||
|
|
|
|||
|
|
@ -7,16 +7,21 @@ interface JQuery<TElement = HTMLElement> {
|
|||
changeElementType(type: string) : JQuery<TElement>;
|
||||
}
|
||||
|
||||
if(typeof (customElements) !== "undefined") {
|
||||
class X_Tab extends HTMLElement {}
|
||||
class X_Entry extends HTMLElement {}
|
||||
class X_Tag extends HTMLElement {}
|
||||
class X_Content extends HTMLElement {}
|
||||
|
||||
customElements.define('x-tab', X_Tab, { extends: 'div' });
|
||||
customElements.define('x-entry', X_Entry, { extends: 'div' });
|
||||
customElements.define('x-tag', X_Tag, { extends: 'div' });
|
||||
customElements.define('x-content', X_Content, { extends: 'div' });
|
||||
if(typeof (customElements) !== "undefined") {
|
||||
try {
|
||||
class X_Tab extends HTMLElement {}
|
||||
class X_Entry extends HTMLElement {}
|
||||
class X_Tag extends HTMLElement {}
|
||||
class X_Content extends HTMLElement {}
|
||||
|
||||
customElements.define('x-tab', X_Tab, { extends: 'div' });
|
||||
customElements.define('x-entry', X_Entry, { extends: 'div' });
|
||||
customElements.define('x-tag', X_Tag, { extends: 'div' });
|
||||
customElements.define('x-content', X_Content, { extends: 'div' });
|
||||
} catch(error) {
|
||||
console.warn("failed to define costum elements");
|
||||
}
|
||||
} else {
|
||||
console.warn(tr("Could not defied tab customElements!"));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue