aboutsummaryrefslogtreecommitdiff
path: root/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/views')
-rw-r--r--src/views/collections/CollectionDockingView.scss233
-rw-r--r--src/views/collections/CollectionDockingView.tsx10
-rw-r--r--src/views/nodes/NodeView.scss23
-rw-r--r--src/views/nodes/TextNodeView.tsx28
-rw-r--r--src/views/nodes/TopBar.tsx46
-rw-r--r--src/views/nodes/VideoNodeView.scss5
-rw-r--r--src/views/nodes/VideoNodeView.tsx29
7 files changed, 91 insertions, 283 deletions
diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss
index 118662d89..db924b57f 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/views/collections/CollectionDockingView.scss
@@ -1,43 +1,36 @@
-
.collectiondockingview-container {
position: relative;
top: 0;
left: 0;
overflow: hidden;
-
.lm_controls>li {
opacity: 0.6;
transform: scale(1.2);
}
.lm_maximised .lm_controls .lm_maximise {
- opacity:1;
+ opacity: 1;
transform: scale(0.8);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important;
}
-
.flexlayout__layout {
left: 0;
top: 0;
right: 0;
bottom: 0;
position: absolute;
- overflow:hidden;
+ overflow: hidden;
}
-
.flexlayout__splitter {
background-color: black;
}
-
.flexlayout__splitter:hover {
background-color: #333;
}
-
.flexlayout__splitter_drag {
border-radius: 5px;
background-color: #444;
z-index: 1000;
}
-
.flexlayout__outline_rect {
position: absolute;
cursor: move;
@@ -47,7 +40,6 @@
z-index: 1000;
box-sizing: border-box;
}
-
.flexlayout__outline_rect_edge {
cursor: move;
border: 2px solid #b7d1b5;
@@ -56,14 +48,12 @@
z-index: 1000;
box-sizing: border-box;
}
-
.flexlayout__edge_rect {
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
background-color: lightgray;
}
-
.flexlayout__drag_rect {
position: absolute;
cursor: move;
@@ -72,32 +62,28 @@
border-radius: 5px;
z-index: 1000;
box-sizing: border-box;
- background-color:#eeeeee;
+ background-color: #eeeeee;
opacity: 0.9;
text-align: center;
-
display: flex;
justify-content: center;
flex-direction: column;
- overflow:hidden;
- padding:10px;
+ overflow: hidden;
+ padding: 10px;
word-wrap: break-word;
}
-
.flexlayout__tabset {
overflow: hidden;
background-color: #222;
box-sizing: border-box;
}
-
.flexlayout__tab {
overflow: auto;
- position:absolute;
+ position: absolute;
box-sizing: border-box;
background-color: #222;
- color:black;
+ color: black;
}
-
.flexlayout__tab_button {
cursor: pointer;
padding: 2px 8px 3px 8px;
@@ -105,77 +91,65 @@
/*box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .15);*/
/*border-top-left-radius: 3px;*/
/*border-top-right-radius: 3px;*/
- float:left;
+ float: left;
vertical-align: top;
box-sizing: border-box;
-
}
-
.flexlayout__tab_button--selected {
color: #ddd;
background-color: #222;
}
-
.flexlayout__tab_button--unselected {
color: gray;
}
-
.flexlayout__tab_button_leading {
- display:inline-block;
+ display: inline-block;
}
-
.flexlayout__tab_button_content {
- display:inline-block;
+ display: inline-block;
}
-
.flexlayout__tab_button_textbox {
float: left;
border: none;
- color:lightgreen;
- background-color:#222;
+ color: lightgreen;
+ background-color: #222;
}
.flexlayout__tab_button_textbox:focus {
outline: none;
}
-
.flexlayout__tab_button_trailing {
- display:inline-block;
- margin-left:5px;
- margin-top:3px;
- width:8px;
- height:8px;
+ display: inline-block;
+ margin-left: 5px;
+ margin-top: 3px;
+ width: 8px;
+ height: 8px;
}
-
.flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
- .flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
+ .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
}
-
.flexlayout__tab_button_overflow {
float: left;
width: 20px;
- height:15px;
- margin-top:2px;
- padding-left:12px;
- border:none;
+ height: 15px;
+ margin-top: 2px;
+ padding-left: 12px;
+ border: none;
font-size: 10px;
- color:lightgray;
+ color: lightgray;
font-family: Arial, sans-serif;
background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
}
-
- .flexlayout__tabset_header
- {
+ .flexlayout__tabset_header {
position: absolute;
left: 0;
right: 0;
- color:#eee;
+ color: #eee;
background-color: #212121;
- padding:3px 3px 3px 5px;
+ padding: 3px 3px 3px 5px;
/*box-shadow: inset 0px 0px 3px 0px rgba(136, 136, 136, 0.54);*/
box-sizing: border-box;
}
-
.flexlayout__tab_header_inner {
position: absolute;
left: 0;
@@ -183,7 +157,6 @@
bottom: 0;
width: 10000px;
}
-
.flexlayout__tab_header_outer {
background-color: black;
position: absolute;
@@ -193,205 +166,171 @@
/*height: 100px;*/
overflow: hidden;
}
-
- .flexlayout__tabset-selected
- {
+ .flexlayout__tabset-selected {
background-image: linear-gradient(#111, #444);
}
-
- .flexlayout__tabset-maximized
- {
+ .flexlayout__tabset-maximized {
background-image: linear-gradient(#666, #333);
}
-
.flexlayout__tab_toolbar {
- position:absolute;
- display:flex;
+ position: absolute;
+ display: flex;
flex-direction: row-reverse;
align-items: center;
- top:0;
- bottom:0;
- right:0;
+ top: 0;
+ bottom: 0;
+ right: 0;
}
-
.flexlayout__tab_toolbar_button-min {
- width:20px;
- height:20px;
- border:none;
+ width: 20px;
+ height: 20px;
+ border: none;
outline-width: 0;
background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
-
}
.flexlayout__tab_toolbar_button-max {
- width:20px;
- height:20px;
- border:none;
+ width: 20px;
+ height: 20px;
+ border: none;
outline-width: 0;
background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
}
-
- .flexlayout__popup_menu {
- }
-
+ .flexlayout__popup_menu {}
.flexlayout__popup_menu_item {
padding: 2px 10px 2px 10px;
- color:#ddd;
+ color: #ddd;
}
-
.flexlayout__popup_menu_item:hover {
background-color: #444444;
}
-
.flexlayout__popup_menu_container {
box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
border: 1px solid #555;
background: #222;
- border-radius:3px;
- position:absolute;
- z-index:1000;
+ border-radius: 3px;
+ position: absolute;
+ z-index: 1000;
}
-
-
.flexlayout__border_top {
- background-color:black;
+ background-color: black;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
- overflow:hidden;
+ overflow: hidden;
}
-
.flexlayout__border_bottom {
- background-color:black;
+ background-color: black;
border-top: 1px solid #333;
box-sizing: border-box;
- overflow:hidden;
+ overflow: hidden;
}
.flexlayout__border_left {
- background-color:black;
+ background-color: black;
border-right: 1px solid #333;
box-sizing: border-box;
- overflow:hidden;
+ overflow: hidden;
}
-
.flexlayout__border_right {
- background-color:black;
+ background-color: black;
border-left: 1px solid #333;
box-sizing: border-box;
- overflow:hidden;
+ overflow: hidden;
}
-
- .flexlayout__border_inner_bottom{
+ .flexlayout__border_inner_bottom {
display: flex;
}
-
.flexlayout__border_inner_left {
- position:absolute;
+ position: absolute;
white-space: nowrap;
right: 23px;
- transform-origin: top right;
+ transform-origin: top right;
transform: rotate(-90deg);
}
-
.flexlayout__border_inner_right {
- position:absolute;
+ position: absolute;
white-space: nowrap;
left: 23px;
- transform-origin: top left;
+ transform-origin: top left;
transform: rotate(90deg);
}
-
.flexlayout__border_button {
background-color: #222;
- color:white;
- display:inline-block;
- white-space:nowrap;
-
+ color: white;
+ display: inline-block;
+ white-space: nowrap;
cursor: pointer;
padding: 2px 8px 3px 8px;
margin: 2px;
vertical-align: top;
box-sizing: border-box;
}
-
.flexlayout__border_button--selected {
color: #ddd;
background-color: #222;
}
-
.flexlayout__border_button--unselected {
color: gray;
}
-
.flexlayout__border_button_leading {
float: left;
- display:inline;
+ display: inline;
}
-
.flexlayout__border_button_content {
- display:inline-block;
+ display: inline-block;
}
-
.flexlayout__border_button_textbox {
float: left;
border: none;
- color:green;
- background-color:#ddd;
+ color: green;
+ background-color: #ddd;
}
.flexlayout__border_button_textbox:focus {
outline: none;
}
-
.flexlayout__border_button_trailing {
- display:inline-block;
- margin-left:5px;
- margin-top:3px;
- width:8px;
- height:8px;
+ display: inline-block;
+ margin-left: 5px;
+ margin-top: 3px;
+ width: 8px;
+ height: 8px;
}
-
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
- .flexlayout__border_button--selected .flexlayout__border_button_trailing{
+ .flexlayout__border_button--selected .flexlayout__border_button_trailing {
background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
}
-
-
.flexlayout__border_toolbar_left {
- position:absolute;
+ position: absolute;
display: flex;
flex-direction: column-reverse;
align-items: center;
- bottom:0;
- left:0;
- right:0;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
-
.flexlayout__border_toolbar_right {
- position:absolute;
+ position: absolute;
display: flex;
flex-direction: column-reverse;
align-items: center;
- bottom:0;
- left:0;
- right:0;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
-
.flexlayout__border_toolbar_top {
- position:absolute;
+ position: absolute;
display: flex;
flex-direction: row-reverse;
align-items: center;
- top:0;
- bottom:0;
- right:0;
+ top: 0;
+ bottom: 0;
+ right: 0;
}
-
.flexlayout__border_toolbar_bottom {
- position:absolute;
+ position: absolute;
display: flex;
flex-direction: row-reverse;
align-items: center;
- top:0;
- bottom:0;
- right:0;
+ top: 0;
+ bottom: 0;
+ right: 0;
}
-
} \ No newline at end of file
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index a547ea1e8..c5d4272bf 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -28,7 +28,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
const { fieldKey, Document: Document } = this.props;
const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
var docs = value.map(doc => {
- return { type: 'tabset', weight: 50, selected: 0, children: [ { type: "tab", name: doc.Title, component: doc.Id } ] };
+ return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] };
});
return FlexLayout.Model.fromJson({
global: {}, borders: [],
@@ -49,7 +49,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
return new GoldenLayout({
settings: {
selectionEnabled: true
- }, content: [ { type: 'row', content: docs } ]
+ }, content: [{ type: 'row', content: docs }]
});
}
constructor(props: CollectionViewProps) {
@@ -122,8 +122,8 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
const { fieldKey, Document: Document } = this.props;
const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
for (var i: number = 0; i < value.length; i++) {
- if (value[ i ].Id === component) {
- return (<DocumentView key={value[ i ].Id} ContainingCollectionView={this} Document={value[ i ]} ContainingDocumentView={this.props.ContainingDocumentView} />);
+ if (value[i].Id === component) {
+ return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} ContainingDocumentView={this.props.ContainingDocumentView} />);
}
}
if (component === "text") {
@@ -174,7 +174,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
componentState: { doc: dv.props.Document }
};
CollectionDockingView.myLayout._makeFullScreen = true;
- CollectionDockingView.myLayout.root.contentItems[ 0 ].addChild(newItemConfig);
+ CollectionDockingView.myLayout.root.contentItems[0].addChild(newItemConfig);
}
public static CloseFullScreen() {
if (CollectionDockingView.myLayout._maximizedStack != null) {
diff --git a/src/views/nodes/NodeView.scss b/src/views/nodes/NodeView.scss
deleted file mode 100644
index dac1c0a8e..000000000
--- a/src/views/nodes/NodeView.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.node {
- position: absolute;
- background: #cdcdcd;
- overflow: hidden;
- &.minimized {
- width: 30px;
- height: 30px;
- }
- .top {
- background: #232323;
- height: 20px;
- cursor: pointer;
- }
- .content {
- padding: 20px 20px;
- height: auto;
- box-sizing: border-box;
- }
- .scroll-box {
- overflow-y: scroll;
- height: calc(100% - 20px);
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/TextNodeView.tsx b/src/views/nodes/TextNodeView.tsx
deleted file mode 100644
index ab762df12..000000000
--- a/src/views/nodes/TextNodeView.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {observer} from "mobx-react";
-import {StaticTextNodeStore} from "../../stores/StaticTextNodeStore";
-import "./NodeView.scss";
-import {TopBar} from "./TopBar";
-import React = require("react");
-
-interface IProps {
- store: StaticTextNodeStore;
-}
-
-@observer
-export class TextNodeView extends React.Component<IProps> {
-
- render() {
- let store = this.props.store;
- return (
- <div className="node text-node" style={{transform: store.Transform}}>
- <TopBar store={store} />
- <div className="scroll-box">
- <div className="content">
- <h3 className="title">{store.Title}</h3>
- <p className="paragraph">{store.Text}</p>
- </div>
- </div>
- </div>
- );
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/TopBar.tsx b/src/views/nodes/TopBar.tsx
deleted file mode 100644
index bb126e8b5..000000000
--- a/src/views/nodes/TopBar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { observer } from "mobx-react";
-import { NodeStore } from "../../stores/NodeStore";
-import "./NodeView.scss";
-import React = require("react");
-
-interface IProps {
- store: NodeStore;
-}
-
-@observer
-export class TopBar extends React.Component<IProps> {
-
- private _isPointerDown = false;
-
- onPointerDown = (e: React.PointerEvent): void => {
- e.stopPropagation();
- e.preventDefault();
- this._isPointerDown = true;
- document.removeEventListener("pointermove", this.onPointerMove);
- document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- document.addEventListener("pointerup", this.onPointerUp);
- }
-
- onPointerUp = (e: PointerEvent): void => {
- e.stopPropagation();
- e.preventDefault();
- this._isPointerDown = false;
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- }
-
- onPointerMove = (e: PointerEvent): void => {
- e.stopPropagation();
- e.preventDefault();
- if (!this._isPointerDown) {
- return;
- }
- this.props.store.X += e.movementX;
- this.props.store.Y += e.movementY;
- }
-
- render() {
- return <div className="top" onPointerDown={this.onPointerDown}></div>
- }
-}
diff --git a/src/views/nodes/VideoNodeView.scss b/src/views/nodes/VideoNodeView.scss
deleted file mode 100644
index f412c3519..000000000
--- a/src/views/nodes/VideoNodeView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.node {
- video {
- width: 100%;
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/VideoNodeView.tsx b/src/views/nodes/VideoNodeView.tsx
deleted file mode 100644
index 0a7b3d174..000000000
--- a/src/views/nodes/VideoNodeView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { observer } from "mobx-react";
-import { VideoNodeStore } from "../../stores/VideoNodeStore";
-import "./NodeView.scss";
-import { TopBar } from "./TopBar";
-import "./VideoNodeView.scss";
-import React = require("react");
-
-interface IProps {
- store: VideoNodeStore;
-}
-
-@observer
-export class VideoNodeView extends React.Component<IProps> {
-
- render() {
- let store = this.props.store;
- return (
- <div className="node text-node" style={{ transform: store.Transform }}>
- <TopBar store={store} />
- <div className="scroll-box">
- <div className="content">
- <h3 className="title">{store.Title}</h3>
- <video src={store.Url} controls />
- </div>
- </div>
- </div>
- );
- }
-} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-30 01:29:27 +0000