aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx2
-rw-r--r--src/client/views/collections/CollectionPDFView.scss26
-rw-r--r--src/client/views/collections/CollectionPDFView.tsx10
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss7
-rw-r--r--src/client/views/collections/CollectionVideoView.scss10
-rw-r--r--src/client/views/collections/CollectionVideoView.tsx67
-rw-r--r--src/client/views/collections/PreviewCursor.tsx4
-rw-r--r--src/client/views/nodes/PDFBox.scss2
8 files changed, 88 insertions, 40 deletions
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 08f3a338b..98fb23fa4 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -335,7 +335,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
ref={this._canvasRef}>
{this.backgroundView}
<InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} />
- <PreviewCursor container={this} addLiveTextDocuemnt={this.addLiveTextBox} getTransform={this.getTransform} />
+ <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} getTransform={this.getTransform} />
{this.views}
</div>
<MarqueeView container={this} activeDocuemnts={this.getActiveDocuments} selectDocuments={this.selectDocuments} addDocument={this.props.addDocument} removeDocument={this.props.removeDocument} getMarqueeTransform={this.getMarqueeTransform} getTransform={this.getTransform} />
diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss
new file mode 100644
index 000000000..cc1402498
--- /dev/null
+++ b/src/client/views/collections/CollectionPDFView.scss
@@ -0,0 +1,26 @@
+.collectionPdfView-buttonTray {
+ top : 25px;
+ left : 20px;
+ position: relative;
+ transform-origin: left top;
+ position: absolute;
+}
+.collectionPdfView-cont{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+}
+.collectionPdfView-backward {
+ color : white;
+ top :0px;
+ left : 0px;
+ position: absolute;
+ background-color: rgba(50, 50, 50, 0.2);
+}
+.collectionPdfView-forward {
+ color : white;
+ top :0px;
+ left : 25px;
+ position: absolute;
+ background-color: rgba(50, 50, 50, 0.2);
+} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index be3a281f2..124d82c8b 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -5,6 +5,7 @@ import { KeyStore } from "../../../fields/KeyStore";
import { ContextMenu } from "../ContextMenu";
import { CollectionView, CollectionViewType } from "./CollectionView";
import { CollectionViewProps } from "./CollectionViewBase";
+import "./CollectionPDFView.scss"
import React = require("react");
import { FieldId } from "../../../fields/Field";
@@ -24,10 +25,11 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
@action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : -1;
private get uIButtons() {
+ let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]);
return (
- <div className="pdfBox-buttonTray" key="tray">
- <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button>
- <button className="pdfButton" onClick={this.onPageForward}>{">"}</button>
+ <div className="collectionPdfView-buttonTray" key="tray" style={{ transform: `scale(${scaling}, ${scaling})` }}>
+ <button className="collectionPdfView-backward" onClick={this.onPageBack}>{"<"}</button>
+ <button className="collectionPdfView-forward" onClick={this.onPageForward}>{">"}</button>
</div>);
}
@@ -49,7 +51,7 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
get subView(): any { return CollectionView.SubView(this); }
render() {
- return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
+ return (<div className="collectionPdfView-cont" onContextMenu={this.specificContextMenu}>
{this.subView}
{this.props.isSelected() ? this.uIButtons : (null)}
</div>)
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index c9e1d431d..fdcad1355 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -9,6 +9,12 @@
height: 100%;
overflow: hidden;
+.collectionSchemaView-content {
+ position: absolute;
+ height:100%;
+ width:100%;
+ overflow:auto;
+}
.collectionSchemaView-previewRegion {
position: relative;
background: $light-color;
@@ -51,7 +57,6 @@
overflow-y: auto;
overflow-x: auto;
height: 100%;
-
display: -webkit-inline-box;
direction: ltr;
// direction:rtl;
diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss
index 6c2f5a62a..ec3c0327d 100644
--- a/src/client/views/collections/CollectionVideoView.scss
+++ b/src/client/views/collections/CollectionVideoView.scss
@@ -1,4 +1,9 @@
-.collectionVideoView-controls{
+.collectionVideoView-buttonTray{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+}
+.collectionVideoView-cont{
width: 100%;
height: 100%;
position: absolute;
@@ -9,6 +14,7 @@
left : 25px;
position: absolute;
background-color: rgba(50, 50, 50, 0.2);
+ transform-origin: left top;
}
.collectionVideoView-play {
width: 25px;
@@ -20,6 +26,7 @@
background-color: rgba(50, 50, 50, 0.2);
border-radius: 4px;
text-align: center;
+ transform-origin: left bottom;
}
.collectionVideoView-full {
width: 25px;
@@ -31,5 +38,6 @@
background-color: rgba(50, 50, 50, 0.2);
border-radius: 4px;
text-align: center;
+ transform-origin: right bottom;
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 9856a1284..9b01c23c9 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -7,7 +7,6 @@ import { CollectionView, CollectionViewType } from "./CollectionView";
import { CollectionViewProps } from "./CollectionViewBase";
import React = require("react");
import { FieldId } from "../../../fields/Field";
-import { ReplaceAroundStep } from "prosemirror-transform";
import "./CollectionVideoView.scss"
@@ -21,6 +20,25 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
}
private _mainCont = React.createRef<HTMLDivElement>();
+
+ private get uIButtons() {
+ let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]);
+ return (
+ <div className="collectionVideoView-buttonTray" key="tray">
+ <div className="collectionVideoView-time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+ <span>{"" + Math.round(this.ctime)}</span>
+ <span style={{ fontSize: 8 }}>{" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}</span>
+ </div>
+ <div className="collectionVideoView-play" onPointerDown={this.onPlayDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+ {this.playing ? "\"" : ">"}
+ </div>
+ <div className="collectionVideoView-full" onPointerDown={this.onFullDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+ F
+ </div>
+ </div>);
+ }
+
+
// "inherited" CollectionView API starts here...
@observable
@@ -40,20 +58,20 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
get subView(): any { return CollectionView.SubView(this); }
componentDidMount() {
- this.repete();
+ this.updateTimecode();
}
- player = (): HTMLVideoElement => {
- return this._mainCont.current!.getElementsByTagName("video")[0];
+ get player(): HTMLVideoElement | undefined {
+ return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined;
}
@action
- repete = () => {
- if (this.player()) {
- this.ctime = this.player().currentTime;
+ updateTimecode = () => {
+ if (this.player) {
+ this.ctime = this.player.currentTime;
this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime));
}
- setTimeout(() => this.repete(), 100)
+ setTimeout(() => this.updateTimecode(), 100)
}
@@ -64,20 +82,20 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
@action
onPlayDown = () => {
- if (this.player()) {
- if (this.player().paused) {
- this.player().play();
+ if (this.player) {
+ if (this.player.paused) {
+ this.player.play();
this.playing = true;
} else {
- this.player().pause();
+ this.player.pause();
this.playing = false;
}
}
}
@action
onFullDown = (e: React.PointerEvent) => {
- if (this.player()) {
- this.player().requestFullscreen();
+ if (this.player) {
+ this.player.requestFullscreen();
e.stopPropagation();
e.preventDefault();
}
@@ -85,28 +103,17 @@ export class CollectionVideoView extends React.Component<CollectionViewProps> {
@action
onResetDown = () => {
- if (this.player()) {
- this.player().pause();
- this.player().currentTime = 0;
+ if (this.player) {
+ this.player.pause();
+ this.player.currentTime = 0;
}
}
render() {
return (<div className="collectionVideoView-cont" ref={this._mainCont} onContextMenu={this.specificContextMenu}>
- <div className="collectionVideoView-controls" >
- {this.subView}
- <div className="collectionVideoView-time" onPointerDown={this.onResetDown}>
- <span>{"" + Math.round(this.ctime)}</span>
- <span style={{ fontSize: 8 }}>{" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}</span>
- </div>
- <div className="collectionVideoView-play" onPointerDown={this.onPlayDown}>
- {this.playing ? "\"" : ">"}
- </div>
- <div className="collectionVideoView-full" onPointerDown={this.onFullDown}>
- F
- </div>
- </div>
+ {this.subView}
+ {this.uIButtons}
</div>)
}
} \ No newline at end of file
diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx
index 42b926374..a1411250a 100644
--- a/src/client/views/collections/PreviewCursor.tsx
+++ b/src/client/views/collections/PreviewCursor.tsx
@@ -16,7 +16,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
export interface PreviewCursorProps {
getTransform: () => Transform;
container: CollectionFreeFormView;
- addLiveTextDocuemnt: (doc: Document) => void;
+ addLiveTextDocument: (doc: Document) => void;
}
@observer
@@ -61,7 +61,7 @@ export class PreviewCursor extends React.Component<PreviewCursorProps> {
//make textbox and add it to this collection
let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
- this.props.addLiveTextDocuemnt(newBox);
+ this.props.addLiveTextDocument(newBox);
e.stopPropagation();
e.preventDefault();
}
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 9f92410d4..ad947afd5 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -11,5 +11,5 @@
}
.pdfBox-contentContainer {
position: absolute;
- transform-origin: "left top";
+ transform-origin: left top;
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 23:24:37 +0000