diff --git a/css/index.css b/css/index.css index b297849..1eb1577 100644 --- a/css/index.css +++ b/css/index.css @@ -45,8 +45,81 @@ grid-template-rows: 1fr; grid-column-gap: 5px; grid-row-gap: 5px; + } +#infoContainer { + position: absolute; + width: 250px; + height: auto; + z-index: 999; + +} + +#DraggableTitleBar { + z-index: 999; + cursor: move; + background-color: rgba(104, 104, 104, 0.75); + + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: auto; + font-size: 1.5em; + color: black; + text-align: center; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border: solid; + border-bottom: none; + border-color: black; +} + +.collapsible { + background-color: rgb(0, 0, 0); + color: rgb(255, 255, 255); + border-radius: 5px; + cursor: pointer; + width: 100%; + border: none; + text-align: center; + outline: none; + font-size: 15px; + padding: 5px; + margin-top: 5px; + margin-bottom: 5px; +} + +.collapsible:hover { + background-color: #777; +} + +.content { + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; +} + +.info { + background-color: rgba(255, 255, 255, 0.5); + padding-left: 10px; + padding-right: 10px; + padding-top: 5px; + padding-bottom: 5px; + + color: black; + border: solid; + border-top: none; + border-color: black; + font-size: medium; + text-align: left; + max-height: fit-content; + overflow: auto; + cursor: auto; +} + + .canvasHolder { position: relative; width: 2560px; diff --git a/index.html b/index.html index adaac6f..fa2f7b5 100644 --- a/index.html +++ b/index.html @@ -9,58 +9,29 @@ -
-
-
-
- - -
- - -
- - -
- - -
- - -
- - -
-
-
- -
- -
-
- +
+
openOutpaint 🐠
+
+ + +
+ + + +
+

- +

- +

- -
- -
- -
- -
- -
- -
- +
+
+ +
+
- +
-
+

- + @@ -116,22 +86,73 @@
- +

- +

- -
-
- -
- +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+ +
+ +
+
+ +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+
+
+ +
+
+
@@ -184,6 +205,7 @@ + \ No newline at end of file diff --git a/js/settingsbar.js b/js/settingsbar.js new file mode 100644 index 0000000..9531643 --- /dev/null +++ b/js/settingsbar.js @@ -0,0 +1,45 @@ +dragElement(document.getElementById("infoContainer")); + +function dragElement(elmnt) { + var p1 = 0, + p2 = 0, + p3 = 0, + p4 = 0; + document.getElementById('DraggableTitleBar').onmousedown = dragMouseDown; + + function dragMouseDown(e) { + e.preventDefault(); + p3 = e.clientX; + p4 = e.clientY; + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + } + + function elementDrag(e) { + e.preventDefault(); + p1 = p3 - e.clientX; + p2 = p4 - e.clientY; + elmnt.style.top = (elmnt.offsetTop - (p4-e.clientY)) + "px"; + elmnt.style.left = (elmnt.offsetLeft - (p3-e.clientX)) + "px"; + p3 = e.clientX; + p4 = e.clientY; + } + + function closeDragElement() { + document.onmouseup = null; + document.onmousemove = null; + } +} + +var coll = document.getElementsByClassName("collapsible"); +for (var i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function () { + this.classList.toggle("active"); + var content = this.nextElementSibling; + if (content.style.maxHeight) { + content.style.maxHeight = null; + } else { + content.style.maxHeight = content.scrollHeight + "px"; + } + }); +} \ No newline at end of file