diff --git a/src/views/channel.ejs b/src/views/channel.ejs index 7826f96..0afe0ad 100644 --- a/src/views/channel.ejs +++ b/src/views/channel.ejs @@ -41,7 +41,7 @@ along with this program. If not, see .-->
-
+
@@ -75,6 +75,8 @@ along with this program. If not, see .--> +
+
@@ -89,6 +91,8 @@ along with this program. If not, see .-->
+
+
@@ -102,7 +106,7 @@ along with this program. If not, see .-->
-
+
diff --git a/www/css/channel.css b/www/css/channel.css index 2fa00c7..59e2eb0 100644 --- a/www/css/channel.css +++ b/www/css/channel.css @@ -87,11 +87,19 @@ div#chat-panel-main-div{ cursor: ew-resize; top: 0; bottom: 0; - left: 0; width: 0.4em; + z-index: 3; +} + +.left-drag-handle{ + left: 0; z-index: 8; } +.right-drag-handle{ + right: 0; +} + #chat-panel-multipanel-div{ height: 100%; } @@ -216,13 +224,18 @@ input#chat-panel-prompt{ #cpanel-active-div{ position: absolute; - z-index: 3; + z-index: 4; top: 0; bottom: 0; left: 0; } +#cpanel-pinned-div{ + position: relative; +} + .cpanel-div{ display: none; + min-width: 4em; width: 30%; } \ No newline at end of file diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css index 0ac39d4..b63fc2c 100644 --- a/www/css/theme/movie-night.css +++ b/www/css/theme/movie-night.css @@ -17,6 +17,7 @@ along with this program. If not, see .*/ :root{ --main-font: "open-sans", sans-serif; --bg0: rgb(158, 158, 158); + --bg0-alpha0: rgba(158, 158, 158, 0.75); --bg1: rgb(70, 70, 70); --bg2: rgb(220, 220, 220); --bg1-alt0: rgb(30, 30, 30); @@ -41,6 +42,9 @@ along with this program. If not, see .*/ --userlist-color6:rgb(111, 61, 204); --media-header-gradient: linear-gradient(180deg, var(--bg1-alt0) 0%, #FFFFFF00 76%); + + /*--active-panel-effect: blur(1em);*/ + --active-panel-effect: none; } body{ @@ -244,6 +248,11 @@ select.panel-head-element{ margin: auto; } +#cpanel-active-div{ + background-color: var(--bg0-alpha0); + backdrop-filter: var(--active-panel-effect); +} + .cpanel-div{ background-color: var(--bg0); } diff --git a/www/js/channel/chat.js b/www/js/channel/chat.js index 435ecf6..153a46c 100644 --- a/www/js/channel/chat.js +++ b/www/js/channel/chat.js @@ -23,7 +23,7 @@ class chatBox{ this.aspectLock = true; //clickDragger object - this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div", "#chat-panel-user-count"); + this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div"); //Element Nodes this.chatPanel = document.querySelector("#chat-panel-div"); diff --git a/www/js/channel/cpanel.js b/www/js/channel/cpanel.js index ae3ec3e..59e9b54 100644 --- a/www/js/channel/cpanel.js +++ b/www/js/channel/cpanel.js @@ -24,6 +24,10 @@ class cPanel{ this.pinnedPanel = null; this.poppedPanels = []; + //ClickDragger Objects + this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false); + this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false); + //Element Nodes //Active Panel this.activePanelDiv = document.querySelector("#cpanel-active-div"); @@ -36,7 +40,7 @@ class cPanel{ this.pinnedPanelDiv = document.querySelector("#cpanel-pinned-div"); this.pinnedPanelTitle = document.querySelector("#cpanel-pinned-title"); this.pinnedPanelDoc = document.querySelector("#cpanel-pinned-doc"); - this.activePanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon"); + this.pinnedPanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon"); this.pinnedPanelPopoutIcon = document.querySelector("#cpanel-pinned-popout-icon"); this.pinnedPanelCloseIcon = document.querySelector("#cpanel-pinned-close-icon"); @@ -48,7 +52,7 @@ class cPanel{ this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this)); this.activePanelPopoutIcon.addEventListener("click", this.popActivePanel.bind(this)); this.pinnedPanelCloseIcon.addEventListener("click", this.hidePinnedPanel.bind(this)); - this.activePanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this)); + this.pinnedPanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this)); this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this)); } diff --git a/www/js/utils.js b/www/js/utils.js index 9e51cfe..333b66d 100644 --- a/www/js/utils.js +++ b/www/js/utils.js @@ -27,7 +27,7 @@ class canopyUXUtils{ static clickDragger = class{ - constructor(handle, element, breakPoint){ + constructor(handle, element, leftHandle = true){ //Pull needed nodes this.handle = document.querySelector(handle); this.element = document.querySelector(element); @@ -35,6 +35,9 @@ class canopyUXUtils{ //True while dragging this.dragLock = false; + //Come to the ~~dark~~ left side + this.leftHandle = leftHandle + //Little hacky but it could be worse :P this.fixWidth = false; @@ -69,8 +72,13 @@ class canopyUXUtils{ drag(event){ if(this.dragLock){ - //get difference between mouse and right edge of element - var difference = this.element.getBoundingClientRect().right - event.clientX; + if(this.leftHandle){ + //get difference between mouse and right edge of element + var difference = this.element.getBoundingClientRect().right - event.clientX; + }else{ + //get difference between mouse and left edge of element + var difference = event.clientX - this.element.getBoundingClientRect().left; + } //check if we have a scrollbar because we're breaking shit var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;