bluesaxman/blue.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some more minor tweeks to blueui window class, and more tweeks to index and css

Browse Source
This commit is contained in:
bluesaxman 2022-04-07 19:51:27 -06:00
parent 40b4ae07a6
commit f25979eff1
3 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/css.css
View File

@ -4,10 +4,17 @@
} }
body { body {
width: 100%;
height: 100%;
display: flex; display: flex;
justify-content:center; justify-content:center;
align-items:center; align-items:center;
flex-direction: column; }
body > .bui_window_root {
flex:1;
width: 99%;
height: 99%;
} }
.bui_window_content { .bui_window_content {
@ -36,9 +43,10 @@ body {
} }
.bui_window_root { .bui_window_root {
display: inline-block; display: block;
position: relative; position: absolute;
background: rgba(200,200,200,1); background: rgba(200,200,200,0.7);
backdrop-filter: blur(5px);
color: black; color: black;
border: solid 1px rgba(140,140,140,1); border: solid 1px rgba(140,140,140,1);
border-radius: 5px; border-radius: 5px;
@ -60,3 +68,14 @@ body {
right: 0; right: 0;
top: 0; top: 0;
} }
.bui_window_resize_handle {
position: absolute;
display: block;
bottom: 0;
right: 0;
height: 5px;
width: 5px;
background: rgba(0,0,0,0.01);
cursor: pointer;
}

5
index.html
View File

@ -63,8 +63,13 @@ blueui.js - Adds classes for several highly reusable ui objects such as buttons
document.body.appendChild(window.bdescription.root); document.body.appendChild(window.bdescription.root);
window.bdescription.content.appendChild(window.bcore.root); window.bdescription.content.appendChild(window.bcore.root);
window.bcore.root.style.top = "40px";
window.bdescription.content.appendChild(window.baudio.root); window.bdescription.content.appendChild(window.baudio.root);
window.baudio.root.style.top = "80px";
window.bdescription.content.appendChild(window.bmath.root); window.bdescription.content.appendChild(window.bmath.root);
window.bmath.root.style.top = "120px";
window.bdescription.content.appendChild(window.bpixle.root); window.bdescription.content.appendChild(window.bpixle.root);
window.bpixle.root.style.top = "160px";
window.bdescription.content.appendChild(window.bui.root); window.bdescription.content.appendChild(window.bui.root);
window.bui.root.style.top = "200px";
</script> </script>

8
libs/blueui.js
View File

@ -82,8 +82,8 @@ function makeResizeable (targetNode, handleNode) {
function initResize(e) { function initResize(e) {
startX = e.clientX; startX = e.clientX;
startY = e.clientY; startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(target).width, 10); startWidth = parseInt(document.defaultView.getComputedStyle(targetNode).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(target).height, 10); startHeight = parseInt(document.defaultView.getComputedStyle(targetNode).height, 10);
document.documentElement.addEventListener('mousemove', doResize, false); document.documentElement.addEventListener('mousemove', doResize, false);
document.documentElement.addEventListener('mouseup', stopResize, false); document.documentElement.addEventListener('mouseup', stopResize, false);
} }
@ -133,6 +133,8 @@ class buiWindow {
this.main.setAttribute("class","bui_window_main"); this.main.setAttribute("class","bui_window_main");
this.content = document.createElement("div"); this.content = document.createElement("div");
this.content.setAttribute("class","bui_window_content"); this.content.setAttribute("class","bui_window_content");
this.content.style.height = height+"px";
this.content.style.width = width+"px";
this.main.appendChild(this.content); this.main.appendChild(this.content);
sizeable = "boolean" == typeof sizeable ? sizeable : true; sizeable = "boolean" == typeof sizeable ? sizeable : true;
if (sizeable) { if (sizeable) {
@ -142,7 +144,7 @@ class buiWindow {
this.main.appendChild(this.resizeHandle); this.main.appendChild(this.resizeHandle);
} }
this.root.appendChild(this.titlebar); this.root.appendChild(this.titlebar);
this.root.appendChild(this.content); this.root.appendChild(this.main);
} }
minimize () { minimize () {