aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/DocumentDecorations.scss2
-rw-r--r--src/client/views/InkingStroke.tsx2
-rw-r--r--src/client/views/MainView.tsx18
-rw-r--r--src/client/views/collections/CollectionDockingView.scss2
-rw-r--r--src/client/views/collections/CollectionMenu.scss4
-rw-r--r--src/client/views/collections/TabDocView.tsx83
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/client/views/nodes/FontIconBox.scss17
-rw-r--r--src/client/views/nodes/FontIconBox.tsx7
-rw-r--r--src/client/views/nodes/MenuIconBox.scss49
-rw-r--r--src/client/views/nodes/MenuIconBox.tsx33
11 files changed, 78 insertions, 142 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 8291d7212..e02408559 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -21,7 +21,7 @@ $linkGap : 3px;
background: none;
}
- .documentDecorations-selector {
+ .documentDecorations-levelSelector {
pointer-events: auto;
height: 15px;
width: 15px;
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 1a1a3d75c..da98eca73 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -119,7 +119,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
const hpoints = InteractionUtils.CreatePolyline(data, left, top,
this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15),
StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
- "none", "none", undefined, scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true);
+ "none", "none", undefined, scaleX, scaleY, "", "visiblepainted", false, true);
//points for adding
const apoints = InteractionUtils.CreatePoints(data, left, top, strokeColor, strokeWidth, strokeWidth,
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 01df10aa0..7dddd1669 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -285,7 +285,7 @@ export class MainView extends React.Component {
setupMoveUpEvents(this, e,
action(e => (this._flyoutWidth = Math.max(e.clientX - 58, 0)) ? false : false),
() => this._flyoutWidth < 5 && this.closeFlyout(),
- this.toggleFlyout);
+ this.closeFlyout);
}
flyoutWidthFunc = () => this._flyoutWidth;
@@ -382,11 +382,7 @@ export class MainView extends React.Component {
SearchBox.Instance.enter(undefined);
break;
default:
- this._sidebarContent.proto = button.target as any;
- closed && this.expandFlyout();
- button._backgroundColor = "lightgrey";
- button.color = "black";
- this._lastButton = button;
+ closed && this.expandFlyout(button);
}
}
return true;
@@ -424,8 +420,14 @@ export class MainView extends React.Component {
</div>;
}
- expandFlyout = action(() => this._flyoutWidth = (this._flyoutWidth || 250));
- toggleFlyout = action(() => this._flyoutWidth < 15 ? this.expandFlyout() : this.closeFlyout());
+ expandFlyout = action((button: Doc) => {
+ this._flyoutWidth = (this._flyoutWidth || 250);
+ this._sidebarContent.proto = button.target as any;
+ button._backgroundColor = "lightgrey";
+ button.color = "black";
+ this._lastButton = button;
+ });
+
closeFlyout = action(() => {
this._lastButton && (this._lastButton.color = "white");
this._lastButton && (this._lastButton._backgroundColor = "");
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index d3be1636d..96f5afcd9 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -70,7 +70,7 @@
margin: auto;
}
- .collectionDockingView-dragAsDocument {
+ .collectionDockingView-drag {
touch-action: none;
position: absolute;
padding-left: 5px;
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 21312e5f3..e36e5caa7 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -377,6 +377,7 @@
.antimodeMenu-button {
text-align: center;
display: block;
+ position: relative;
}
.color-previewI {
@@ -384,12 +385,15 @@
height: 20%;
bottom: 0;
position: absolute;
+ margin-left: 2px;
}
.color-previewII {
width: 80%;
height: 80%;
margin-left: 10%;
+ position: absolute;
+ bottom: 5;
}
.btn-group {
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 3cb57f086..3c230537c 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -53,67 +53,70 @@ export class TabDocView extends React.Component<TabDocViewProps> {
tab._disposers = {} as { [name: string]: IReactionDisposer };
tab.contentItem.config.fixed && (tab.contentItem.parent.config.fixed = true);
tab.DashDoc = doc;
+ CollectionDockingView.Instance.tabMap.add(tab);
+ // setup the title element and set its size according to the # of chars in the title. Show the full title when clicked.
const titleEle = tab.titleElement[0];
- CollectionDockingView.Instance.tabMap.add(tab);
- titleEle.onchange = (e: any) => {
- titleEle.size = e.currentTarget.value.length + 3;
- Doc.GetProto(doc).title = e.currentTarget.value;
- };
titleEle.size = StrCast(doc.title).length + 3;
titleEle.value = doc.title;
titleEle.style["max-width"] = "100px";
- const gearSpan = document.createElement("span");
- gearSpan.className = "collectionDockingView-gear";
- gearSpan.style.position = "relative";
- gearSpan.style.paddingLeft = "0px";
- gearSpan.style.paddingRight = "12px";
- const stack = tab.contentItem.parent;
- tab.element[0].onclick = (e: any) => {
- if (e.target.className !== "lm_close_tab" && this.view) {
- SelectionManager.SelectDoc(this.view, false);
- if (Date.now() - titleEle.lastClick < 1000) titleEle.select();
- titleEle.lastClick = Date.now();
- (document.activeElement !== titleEle) && titleEle.focus();
- }
+ titleEle.onchange = (e: any) => {
+ titleEle.size = e.currentTarget.value.length + 3;
+ Doc.GetProto(doc).title = e.currentTarget.value;
};
// shifts the focus to this tab when another tab is dragged over it
tab.element[0].onmouseenter = (e: MouseEvent) => {
if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
tab.header.parent.setActiveContentItem(tab.contentItem);
+ console.log("Seetting " + titleEle.value);
+ tab.setActive(true);
}
- tab.setActive(true);
};
- const onDown = (e: React.PointerEvent) => {
+ const onPointerDown = (e: React.PointerEvent) => {
setupMoveUpEvents(this, e, (e) => {
- !e.defaultPrevented && DragManager.StartDocumentDrag([gearSpan], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), e.clientX, e.clientY);
+ !e.defaultPrevented && DragManager.StartDocumentDrag([dragHdl], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), e.clientX, e.clientY);
return !e.defaultPrevented;
}, returnFalse, emptyFunction);
};
- tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc),
- (selected) => {
- selected && tab.contentItem !== tab.header.parent.getActiveContentItem() && UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch");
+ // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected
+ tab.element[0].onclick = (e: any) => {
+ if (e.target.className !== "lm_close_tab" && this.view) {
+ SelectionManager.SelectDoc(this.view, false);
+ if (Date.now() - titleEle.lastClick < 1000) titleEle.select();
+ titleEle.lastClick = Date.now();
+ (document.activeElement !== titleEle) && titleEle.focus();
}
- );
- tab._disposers.buttonDisposer = reaction(() => this.view,
- (view) => {
- if (view) {
- ReactDOM.render(<span title="Drag as document" className="collectionDockingView-dragAsDocument" onPointerDown={onDown} >
- <CollectionDockingViewMenu views={() => [view]} Stack={stack} />
- </span>,
- gearSpan);
- tab._disposers.buttonDisposer?.();
- }
- }, { fireImmediately: true });
+ };
+ tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc),
+ (selected) => selected && tab.contentItem !== tab.header.parent.getActiveContentItem() &&
+ UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch"));
- tab.reactComponents = [gearSpan];
- tab.element.append(gearSpan);
+ //attach the selection doc buttons menu to the drag handle
+ const stack = tab.contentItem.parent;
+ const dragHdl = document.createElement("span");
+ dragHdl.className = "collectionDockingView-gear";
+ dragHdl.style.position = "relative";
+ dragHdl.style.paddingLeft = "0px";
+ dragHdl.style.paddingRight = "12px";
+ tab._disposers.buttonDisposer = reaction(() => this.view, (view) => view &&
+ [ReactDOM.render(
+ <span title="Drag as document" className="collectionDockingView-drag" onPointerDown={onPointerDown} >
+ <CollectionDockingViewMenu views={() => [view]} Stack={stack} />
+ </span>, dragHdl),
+ tab._disposers.buttonDisposer?.()],
+ { fireImmediately: true });
+ tab.reactComponents = [dragHdl];
+ tab.element.append(dragHdl);
+
+ // highlight the tab when the tab document is brushed in any part of the UI
tab._disposers.reactionDisposer = reaction(() => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }), ({ title, degree }) => {
- tab.titleElement[0].value = title;
- tab.titleElement[0].style.padding = degree ? 0 : 2;
- tab.titleElement[0].style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`;
+ titleEle.value = title;
+ titleEle.style.padding = degree ? 0 : 2;
+ titleEle.style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`;
}, { fireImmediately: true });
+
+ // clean up the tab when it is closed
tab.closeElement.off('click') //unbind the current click handler
.click(function () {
Object.values(tab._disposers).forEach((disposer: any) => disposer?.());
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index dc9b7c98f..5d5a1f7f3 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,6 @@ import { DocHolderBox } from "./DocHolderBox";
import { DocumentViewProps } from "./DocumentView";
import "./DocumentView.scss";
import { FontIconBox } from "./FontIconBox";
-import { MenuIconBox } from "./MenuIconBox";
import { FieldView, FieldViewProps } from "./FieldView";
import { FormattedTextBox, FormattedTextBoxProps } from "./formattedText/FormattedTextBox";
import { ImageBox } from "./ImageBox";
@@ -190,7 +189,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
blacklistedAttrs={[]}
renderInWrapper={false}
components={{
- FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
+ FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox,
ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 75bc90d7a..d7c5e9c92 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -37,9 +37,10 @@
.menuButton-round {
border-radius: 100%;
background-color: black;
+ padding: 0;
.fontIconBox-label {
- margin-left: -10px; // button padding is 10px;
+ //margin-left: -10px; // button padding is 10px;
bottom: 0;
position: absolute;
}
@@ -52,7 +53,6 @@
.menuButton-square {
padding-top: 3px;
padding-bottom: 3px;
- padding-left: 5px;
.fontIconBox-label {
border-radius: 0px;
@@ -64,7 +64,8 @@
.menuButton,
.menuButton-round,
.menuButton-square {
- width: 100%;
+ margin-left: -5%;
+ width: 110%;
height: 100%;
pointer-events: all;
touch-action: none;
@@ -72,6 +73,7 @@
.menuButton-wrap {
touch-action: none;
border-radius: 8px;
+ width: 100%;
// &:hover {
// background: rgb(61, 61, 61);
@@ -89,4 +91,13 @@
width: 95% !important;
height: 95%;
}
+}
+.menuButton-round {
+ width: 100%;
+ svg {
+ width: 50% !important;
+ height: 50%;
+ position: relative;
+ bottom: 2px;
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 87142babd..c55b9d9f2 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -65,10 +65,9 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth)));
const shape = StrCast(this.layoutDoc.iconShape, "round");
const icon = StrCast(this.dataDoc.icon, "user") as any;
- const presTrailsIcon = <img
- style={{ width: shape === 'round' ? 25 : 30, height: shape === 'round' ? 25 : 30, filter: color === 'white' ? 'invert(100%)' : 'invert(0%)', transform: shape === 'round' ? 'translate(-5px, -7px)' : undefined }}
- id={"pres-icon"}
- src={`/assets/${"presTrails.png"}`} />;
+ const presSize = shape === 'round' ? 25 : 30;
+ const presTrailsIcon = <img src={`/assets/${"presTrails.png"}`}
+ style={{ width: presSize, height: presSize, filter: `invert(${color === "white" ? "100%" : "0%"})`, marginBottom: "5px" }} />;
const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
style={{
boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined,
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
deleted file mode 100644
index 1b72f5a8f..000000000
--- a/src/client/views/nodes/MenuIconBox.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.menuButton {
- //padding: 7px;
- padding-left: 7px;
- width: 100%;
- width: 60px;
- height: 70px;
-
- .menuButton-wrap {
- width: 45px;
- /* padding: 5px; */
- touch-action: none;
- background: black;
- transform-origin: top left;
- /* margin-bottom: 5px; */
- margin-top: 5px;
- margin-right: 25px;
- border-radius: 8px;
-
- &:hover {
- background: rgb(61, 61, 61);
- cursor: pointer;
- }
- }
-
- .menuButton-label {
- color: white;
- margin-right: 4px;
- border-radius: 8px;
- width: 42px;
- position: relative;
- text-align: center;
- font-size: 8px;
- margin-top: 1px;
- letter-spacing: normal;
- padding: 3px;
- background-color: inherit;
- }
-
- .menuButton-icon {
- width: auto;
- height: 35px;
- padding: 5px;
- }
-
- svg {
- width: 95% !important;
- height: 95%;
- }
-} \ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
deleted file mode 100644
index 5ed8a9b78..000000000
--- a/src/client/views/nodes/MenuIconBox.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { createSchema, makeInterface } from '../../../fields/Schema';
-import { StrCast } from '../../../fields/Types';
-import { DocComponent } from '../DocComponent';
-import { FieldView, FieldViewProps } from './FieldView';
-import './MenuIconBox.scss';
-const MenuIconSchema = createSchema({
- icon: "string"
-});
-
-type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
-const MenuIconDocument = makeInterface(MenuIconSchema);
-@observer
-export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
- public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
- _ref: React.RefObject<HTMLButtonElement> = React.createRef();
-
- render() {
-
- const color = this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) === "lightgrey" ? "black" : "white";
- const menuBTN = <div className="menuButton" style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) }}>
- <div className="menuButton-wrap"
- style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) }} >
- <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
- <div className="menuButton-label" style={{ color: color }}> {this.dataDoc.title} </div>
- </div>
- </div>;
-
- return menuBTN;
- }
-} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 18:36:23 +0000