aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/CollectionLinearView.scss13
-rw-r--r--src/client/views/CollectionLinearView.tsx111
-rw-r--r--src/client/views/MainView.tsx34
-rw-r--r--src/client/views/collections/CollectionBaseView.tsx6
-rw-r--r--src/client/views/collections/CollectionSubView.tsx1
-rw-r--r--src/client/views/collections/CollectionView.tsx2
-rw-r--r--src/client/views/collections/CollectionViewChromes.tsx1
-rw-r--r--src/server/authentication/models/current_user_utils.ts2
8 files changed, 111 insertions, 59 deletions
diff --git a/src/client/views/CollectionLinearView.scss b/src/client/views/CollectionLinearView.scss
index 30be07a9f..46a226eef 100644
--- a/src/client/views/CollectionLinearView.scss
+++ b/src/client/views/CollectionLinearView.scss
@@ -1,8 +1,13 @@
@import "globalCssVariables";
@import "nodeModuleOverrides";
+.collectionLinearView-outer{
+ overflow: hidden;
+ height:100%;
+ padding:5px;
+}
.collectionLinearView {
-
+ display:flex;
>label {
background: $dark-color;
color: $light-color;
@@ -18,6 +23,8 @@
label p {
padding-left: 10.5px;
+ width: 500px;
+ height: 500px;
}
label:hover {
@@ -41,18 +48,14 @@
.collectionLinearView-content {
display: flex;
opacity: 1;
- margin: 0;
padding: 0;
position: relative;
- float: right;
.collectionFreeFormDocumentView-container {
position: relative;
}
.collectionLinearView-docBtn {
position:relative;
margin-right: 10px;
- width: 35px;
- height: 35px;
}
.collectionLinearView-round-button {
width: 36px;
diff --git a/src/client/views/CollectionLinearView.tsx b/src/client/views/CollectionLinearView.tsx
index 18e3598a5..692f940f8 100644
--- a/src/client/views/CollectionLinearView.tsx
+++ b/src/client/views/CollectionLinearView.tsx
@@ -7,22 +7,23 @@ import { InkTool } from '../../new_fields/InkField';
import { ObjectField } from '../../new_fields/ObjectField';
import { ScriptField } from '../../new_fields/ScriptField';
import { NumCast, StrCast } from '../../new_fields/Types';
-import { emptyFunction, returnEmptyString, returnOne, returnTrue, returnFalse } from '../../Utils';
+import { emptyFunction, returnEmptyString, returnOne, returnTrue, returnFalse, Utils } from '../../Utils';
import { Docs } from '../documents/Documents';
import { DragManager } from '../util/DragManager';
import { Transform } from '../util/Transform';
import { UndoManager } from '../util/UndoManager';
import { InkingControl } from './InkingControl';
-import { DocumentView } from './nodes/DocumentView';
+import { DocumentView, documentSchema } from './nodes/DocumentView';
import "./CollectionLinearView.scss";
+import { makeInterface } from '../../new_fields/Schema';
+import { CollectionSubView } from './collections/CollectionSubView';
-interface CollectionLinearViewProps {
- Document: Doc;
- fieldKey: string;
-}
+
+type LinearDocument = makeInterface<[typeof documentSchema,]>;
+const LinearDocument = makeInterface(documentSchema);
@observer
-export class CollectionLinearView extends React.Component<CollectionLinearViewProps>{
+export class CollectionLinearView extends CollectionSubView(LinearDocument) {
@observable public addMenuToggle = React.createRef<HTMLInputElement>();
private _dropDisposer?: DragManager.DragDropDisposer;
@@ -30,7 +31,7 @@ export class CollectionLinearView extends React.Component<CollectionLinearViewPr
this._dropDisposer && this._dropDisposer();
}
- protected createDropTarget = (ele: HTMLLabelElement) => { //used for stacking and masonry view
+ protected createDropTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view
this._dropDisposer && this._dropDisposer();
if (ele) {
this._dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } });
@@ -38,16 +39,18 @@ export class CollectionLinearView extends React.Component<CollectionLinearViewPr
}
drop = action((e: Event, de: DragManager.DropEvent) => {
- (de.data as DragManager.DocumentDragData).draggedDocuments.map(doc => {
- if (!doc.onDragStart) {
- let dbox = Docs.Create.FontIconDocument({ nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, backgroundColor: StrCast(doc.backgroundColor), title: "Custom", icon: "bolt" });
+ (de.data as DragManager.DocumentDragData).draggedDocuments.map((doc, i) => {
+ let dbox = doc;
+ if (!doc.onDragStart && this.props.Document.convertToButtons) {
+ dbox = Docs.Create.FontIconDocument({ nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, backgroundColor: StrCast(doc.backgroundColor), title: "Custom", icon: "bolt" });
dbox.dragFactory = doc;
dbox.removeDropProperties = doc.removeDropProperties instanceof ObjectField ? ObjectField.MakeCopy(doc.removeDropProperties) : undefined;
dbox.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)');
- doc = dbox;
}
- Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc);
+ (de.data as DragManager.DocumentDragData).droppedDocuments[i] = dbox;
});
+ e.stopPropagation();
+ return super.drop(e, de);
});
selected = (tool: InkTool) => {
@@ -58,49 +61,55 @@ export class CollectionLinearView extends React.Component<CollectionLinearViewPr
return { fontSize: "50%" };
}
+ public isCurrent(doc: Doc) { return !doc.isMinimized && (Math.abs(NumCast(doc.displayTimecode, -1) - NumCast(this.Document.currentTimecode, -1)) < 1.5 || NumCast(doc.displayTimecode, -1) === -1); }
+
+ dimension = () => NumCast(this.props.Document.height) - 5;
render() {
- return <div className="collectionLinearView">
- <input id="collectionLinearView-toggle" type="checkbox" ref={this.addMenuToggle} />
- <label htmlFor="collectionLinearView-toggle" ref={this.createDropTarget} title="Close Menu"><p>+</p></label>
+ let guid = Utils.GenerateGuid();
+ return <div className="collectionLinearView-outer"><div className="collectionLinearView" ref={this.createDropTarget} >
+ <input id={`${guid}`} type="checkbox" ref={this.addMenuToggle} />
+ <label htmlFor={`${guid}`} style={{ marginTop: (this.dimension() - 36) / 2, marginBottom: "auto" }} title="Close Menu"><p>+</p></label>
<div className="collectionLinearView-content">
- <button key="undo" className="collectionLinearView-add-button collectionLinearView-round-button" title="Undo" style={{ opacity: UndoManager.CanUndo() ? 1 : 0.5, transition: "0.4s ease all" }} onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
- <button key="redo" className="collectionLinearView-add-button collectionLinearView-round-button" title="Redo" style={{ opacity: UndoManager.CanRedo() ? 1 : 0.5, transition: "0.4s ease all" }} onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
+ {this.props.showHiddenControls ? <button key="undo" className="collectionLinearView-add-button collectionLinearView-round-button" title="Undo" style={{ opacity: UndoManager.CanUndo() ? 1 : 0.5, transition: "0.4s ease all" }} onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button> : (null)}
+ {this.props.showHiddenControls ? <button key="redo" className="collectionLinearView-add-button collectionLinearView-round-button" title="Redo" style={{ opacity: UndoManager.CanRedo() ? 1 : 0.5, transition: "0.4s ease all" }} onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button> : (null)}
- {DocListCast(this.props.Document[this.props.fieldKey]).map(doc => <div className="collectionLinearView-docBtn" key={StrCast(doc.title)} >
- <DocumentView
- Document={doc}
- DataDoc={undefined}
- addDocument={undefined}
- addDocTab={returnFalse}
- pinToPres={emptyFunction}
- removeDocument={(doc: Doc) => Doc.RemoveDocFromList(this.props.Document, this.props.fieldKey, doc)}
- ruleProvider={undefined}
- onClick={undefined}
- ScreenToLocalTransform={Transform.Identity}
- ContentScaling={() => 35 / NumCast(doc.nativeWidth, 35)}
- PanelWidth={() => 35}
- PanelHeight={() => 35}
- renderDepth={0}
- focus={emptyFunction}
- backgroundColor={returnEmptyString}
- parentActive={returnTrue}
- whenActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- zoomToScale={emptyFunction}
- getScale={returnOne}>
- </DocumentView>
- </div>)}
+ {this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair =>
+ <div className="collectionLinearView-docBtn" style={{ width: this.dimension(), height: this.dimension() }} key={StrCast(pair.layout.title)} >
+ <DocumentView
+ Document={pair.layout}
+ DataDoc={pair.data}
+ addDocument={this.props.addDocument}
+ addDocTab={returnFalse}
+ pinToPres={emptyFunction}
+ removeDocument={this.props.removeDocument}
+ ruleProvider={undefined}
+ onClick={undefined}
+ ScreenToLocalTransform={Transform.Identity}
+ ContentScaling={() => this.dimension() / (10 + NumCast(pair.layout.nativeWidth, this.dimension()))} // ugh - need to get rid of this inline function to avoid recomputing
+ PanelWidth={this.dimension}
+ PanelHeight={this.dimension}
+ renderDepth={this.props.renderDepth + 1}
+ focus={emptyFunction}
+ backgroundColor={returnEmptyString}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ zoomToScale={emptyFunction}
+ getScale={returnOne}>
+ </DocumentView>
+ </div>)}
{/* <li key="undoTest"><button className="add-button round-button" title="Click if undo isn't working" onClick={() => UndoManager.TraceOpenBatches()}><FontAwesomeIcon icon="exclamation" size="sm" /></button></li> */}
-
- <button className="collectionLinearView-toolbar-button collectionLinearView-round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /> </button>
- <button key="pen" onClick={() => InkingControl.Instance.switchTool(InkTool.Pen)} title="Pen" style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="lg" /></button>
- <button key="marker" onClick={() => InkingControl.Instance.switchTool(InkTool.Highlighter)} title="Highlighter" style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="lg" /></button>
- <button key="eraser" onClick={() => InkingControl.Instance.switchTool(InkTool.Eraser)} title="Eraser" style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="lg" /></button>
- <InkingControl />
+ {this.props.showHiddenControls ? <>
+ <button className="collectionLinearView-toolbar-button collectionLinearView-round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /> </button>
+ <button key="pen" onClick={() => InkingControl.Instance.switchTool(InkTool.Pen)} title="Pen" style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="lg" /></button>
+ <button key="marker" onClick={() => InkingControl.Instance.switchTool(InkTool.Highlighter)} title="Highlighter" style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="lg" /></button>
+ <button key="eraser" onClick={() => InkingControl.Instance.switchTool(InkTool.Eraser)} title="Eraser" style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="lg" /></button>
+ <InkingControl />
+ </> : (null)}
</div>
- </div>;
+ </div></div>;
}
} \ No newline at end of file
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4367785b6..5756c1510 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -441,10 +441,42 @@ export class MainView extends React.Component {
}}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null);
}
+ addButtonDoc = (doc: Doc) => {
+ Doc.AddDocToList(CurrentUserUtils.UserDocument, "docButtons", doc);
+ return true;
+ }
+ remButtonDoc = (doc: Doc) => {
+ Doc.RemoveDocFromList(CurrentUserUtils.UserDocument, "docButtons", doc);
+ return true;
+ }
@computed get docButtons() {
return <div className="mainView-docButtons" style={{ left: (this._flyoutTranslate ? this.flyoutWidth : 0) + 20 }} >
<MainViewNotifs />
- <CollectionLinearView Document={CurrentUserUtils.UserDocument} fieldKey={"docButtons"} />
+ <CollectionLinearView Document={CurrentUserUtils.UserDocument} DataDoc={undefined}
+ fieldKey={"docButtons"}
+ fieldExt={""}
+ showHiddenControls={true}
+ select={emptyFunction}
+ chromeCollapsed={true}
+ active={returnFalse}
+ isSelected={returnFalse}
+ moveDocument={returnFalse}
+ CollectionView={undefined}
+ addDocument={this.addButtonDoc}
+ addDocTab={this.addDocTabFunc}
+ pinToPres={emptyFunction}
+ removeDocument={this.remButtonDoc}
+ ruleProvider={undefined}
+ onClick={undefined}
+ ScreenToLocalTransform={Transform.Identity}
+ ContentScaling={returnOne}
+ PanelWidth={this.flyoutWidthFunc}
+ PanelHeight={this.getContentsHeight}
+ renderDepth={0}
+ focus={emptyFunction}
+ whenActiveChanged={emptyFunction}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined} />
</div>;
}
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 61919427a..7798964ea 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -23,6 +23,7 @@ export enum CollectionViewType {
Stacking,
Masonry,
Pivot,
+ Linear,
}
export namespace CollectionViewType {
@@ -35,7 +36,8 @@ export namespace CollectionViewType {
["tree", CollectionViewType.Tree],
["stacking", CollectionViewType.Stacking],
["masonry", CollectionViewType.Masonry],
- ["pivot", CollectionViewType.Pivot]
+ ["pivot", CollectionViewType.Pivot],
+ ["linear", CollectionViewType.Linear]
]);
export const valueOf = (value: string) => {
@@ -177,7 +179,7 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
<div id="collectionBaseView"
style={{
pointerEvents: this.props.Document.isBackground ? "none" : "all",
- boxShadow: this.props.Document.isBackground ? undefined : `#9c9396 ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
+ boxShadow: this.props.Document.isBackground || viewtype === CollectionViewType.Linear ? undefined : `#9c9396 ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
}}
className={this.props.className || "collectionView-cont"}
onContextMenu={this.props.onContextMenu} ref={this.props.contentRef}>
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index fdbe5339d..6e8e4fa12 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -33,6 +33,7 @@ export interface CollectionViewProps extends FieldViewProps {
VisibleHeight?: () => number;
chromeCollapsed: boolean;
setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void;
+ showHiddenControls?: boolean; // hack for showing the undo/redo/ink controls in a linear view -- needs to be redone
}
export interface SubCollectionViewProps extends CollectionViewProps {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 893763840..3d5b4e562 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -19,6 +19,7 @@ import { CollectionStackingView } from './CollectionStackingView';
import { CollectionTreeView } from "./CollectionTreeView";
import { CollectionViewBaseChrome } from './CollectionViewChromes';
import { ImageUtils } from '../../util/Import & Export/ImageUtils';
+import { CollectionLinearView } from '../CollectionLinearView';
export const COLLECTION_BORDER_WIDTH = 2;
library.add(faTh, faTree, faSquare, faProjectDiagram, faSignature, faThList, faFingerprint, faColumns, faEllipsisV, faImage, faEye as any, faCopy);
@@ -66,6 +67,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />); }
case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />); }
case CollectionViewType.Pivot: { this.props.Document.freeformLayoutEngine = "pivot"; return (<CollectionFreeFormView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />); }
+ case CollectionViewType.Linear: { return (<CollectionLinearView chromeCollapsed={this._collapsed} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />); }
case CollectionViewType.Freeform:
default:
this.props.Document.freeformLayoutEngine = undefined;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 72f3514b6..3a66c05f4 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -399,6 +399,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
<option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
<option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View</option>
<option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="7">Pivot View</option>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="8">Linear View</option>
</select>
<div className="collectionViewBaseChrome-viewSpecs" style={{ display: collapsed ? "none" : "grid" }}>
<input className="collectionViewBaseChrome-viewSpecsInput"
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 9f9f79dc4..3858907ba 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -37,7 +37,9 @@ export class CurrentUserUtils {
doc.gridGap = 5;
doc.xMargin = 5;
doc.yMargin = 5;
+ doc.height = 42;
doc.boxShadow = "0 0";
+ doc.convertToButtons = true; // for CollectionLinearView used as the docButton layout
doc.optionalRightCollection = Docs.Create.StackingDocument([], { title: "New mobile uploads" });
return doc;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 08:50:46 +0000