- {checkboxes.length &&
{checkboxes}
}
-
+
;
}
diff --git a/src/ui/floating/container.jsx b/src/ui/floating/container.jsx
new file mode 100644
index 00000000..00c34f22
--- /dev/null
+++ b/src/ui/floating/container.jsx
@@ -0,0 +1,65 @@
+import {React, Utilities} from "modules";
+
+import FloatingWindow from "./window";
+
+class FloatingWindowContainer extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {windows: []};
+ }
+
+ render() {
+ return this.state.windows.map(window =>
+
+ {window.children}
+
+ );
+ }
+
+ open(window) {
+ this.setState({
+ windows: [...this.state.windows, window]
+ });
+ // this.windows.push(window);
+ // this.forceUpdate();
+ }
+
+ close(id) {
+ this.setState({
+ windows: this.state.windows.filter(w => {
+ if (w.id == id && w.onClose) w.onClose();
+ return w.id != id;
+ })
+ });
+ // const index = this.windows.findIndex(w => w.id == id);
+ // if (index < 0) return;
+ // this.windows.splice(index, 1);
+ // this.forceUpdate();
+ }
+
+ static get id() {return "floating-windows";}
+ static get root() {
+ if (this._root) return this._root;
+ const container = document.createElement("div");
+ container.id = this.id;
+ document.body.append(container);
+ return this._root = container;
+ }
+}
+
+const containerRef = React.createRef();
+const container =
;
+// ReactDOM.render(container, FloatingWindowContainer.root);
+const App = document.querySelector(".app-19_DXt").__reactInternalInstance$.return.return.return.return.return.return.return.return.return;
+Utilities.monkeyPatch(App.type.prototype, "render", {after: (data) => {
+ data.returnValue.props.children.props.children.props.children.props.children[4].props.children[1].props.children.push(container);
+}});
+App.stateNode.forceUpdate();
+export default containerRef.current;
+
+// patch App component
+//
+//document.querySelector(".app-19_DXt").__reactInternalInstance$.return.return.return.return.return.return.return.return.return.type
+//props.children.props.children.props.children.props.children[4].props.children[1].props.children[""0""].push( SELF )
+// forceupdate app component
\ No newline at end of file
diff --git a/src/ui/customcss/detached.jsx b/src/ui/floating/window.jsx
similarity index 81%
rename from src/ui/customcss/detached.jsx
rename to src/ui/floating/window.jsx
index 97b4e015..66819700 100644
--- a/src/ui/customcss/detached.jsx
+++ b/src/ui/floating/window.jsx
@@ -27,33 +27,48 @@ export default class FloatingWindow extends React.Component {
this.onDrag = this.onDrag.bind(this);
this.onDragStart = this.onDragStart.bind(this);
this.onDragStop = this.onDragStop.bind(this);
+ this.onResizeStart = this.onResizeStart.bind(this);
}
componentDidMount() {
if (this.props.isPopout) {
- console.log(this);
- const popout = this._reactInternalFiber.return.return.return.stateNode;
+ // console.log(this);
+ const popout = this._reactInternalFiber.return.return.return.return.stateNode;//_reactInternalFiber.return.return.return.return.stateNode
setImmediate(() => {
document.removeEventListener("click", popout.close, true);
if (!this.props.close) this.props.close = popout.close;
});
}
+ this.window.current.addEventListener("mousedown", this.onResizeStart, false);
this.titlebar.current.addEventListener("mousedown", this.onDragStart, false);
document.addEventListener("mouseup", this.onDragStop, false);
}
- onDragStop(e) {
+ onResizeStart() {
+ this.currentWidth = this.window.current.style.width;
+ this.currentHeight = this.window.current.style.height;
+ }
+
+ onDragStop() {
// e.preventDefault();
// e.stopPropagation();
document.removeEventListener("mousemove", this.onDrag, true);
+ if (this.props.onResize) {
+ const width = this.window.current.style.width;
+ const height = this.window.current.style.height;
+ if (width != this.currentWidth || height != this.currentHeight) this.props.onResize();
+ this.currentWidth = width;
+ this.currentHeight = height;
+ }
}
onDragStart(e) {
// e.preventDefault();
// e.stopPropagation();
+
const div = this.window.current;
- console.log(div.offsetTop, div.offsetLeft);
+ // console.log(div.offsetTop, div.offsetLeft);
this.offY = e.clientY - parseInt(div.offsetTop);
this.offX = e.clientX - parseInt(div.offsetLeft);
document.addEventListener("mousemove", this.onDrag, true);
@@ -76,9 +91,10 @@ export default class FloatingWindow extends React.Component {
render() {
const top = this.props.center ? (Screen.height / 2) - (this.props.height / 2) : this.props.top;
const left = this.props.center ? (Screen.width / 2) - (this.props.width / 2) : this.props.left ;
- console.log(top, left);
+ // console.log(top, left);
+ const className = `floating-window ${this.props.className || ""} ${this.props.resizable ? "resizable" : ""}`;
const styles = {height: this.props.height, width: this.props.width, left: left || 0, top: top || 0};
- return
+ return
{this.props.title}
@@ -94,7 +110,7 @@ export default class FloatingWindow extends React.Component {
}
close() {
- console.log("click close");
+ // console.log("click close");
if (this.props.close) this.props.close();
}
}
diff --git a/src/ui/icons/cog.jsx b/src/ui/icons/cog.jsx
new file mode 100644
index 00000000..4d76b92a
--- /dev/null
+++ b/src/ui/icons/cog.jsx
@@ -0,0 +1,11 @@
+import {React} from "modules";
+
+export default class Cog extends React.Component {
+ render() {
+ const size = this.props.size || "20px";
+ return
;
+ }
+}
\ No newline at end of file
diff --git a/src/ui/icons/detach.jsx b/src/ui/icons/detach.jsx
new file mode 100644
index 00000000..e12449d9
--- /dev/null
+++ b/src/ui/icons/detach.jsx
@@ -0,0 +1,11 @@
+import {React} from "modules";
+
+export default class Detach extends React.Component {
+ render() {
+ const size = this.props.size || "24px";
+ return
;
+ }
+}
\ No newline at end of file
diff --git a/src/ui/icons/edit.jsx b/src/ui/icons/edit.jsx
new file mode 100644
index 00000000..4d44dcf3
--- /dev/null
+++ b/src/ui/icons/edit.jsx
@@ -0,0 +1,11 @@
+import {React} from "modules";
+
+export default class Edit extends React.Component {
+ render() {
+ const size = this.props.size || "24px";
+ return
;
+ }
+}
\ No newline at end of file
diff --git a/src/ui/icons/reload.jsx b/src/ui/icons/reload.jsx
index a9dbdc87..385a6f26 100644
--- a/src/ui/icons/reload.jsx
+++ b/src/ui/icons/reload.jsx
@@ -3,7 +3,7 @@ import {React} from "modules";
export default class ReloadIcon extends React.Component {
render() {
const size = this.props.size || "24px";
- return