aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/util/CurrentUserUtils.ts198
-rw-r--r--src/client/views/MainView.tsx63
-rw-r--r--src/client/views/collections/CollectionLinearView.tsx2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx119
-rw-r--r--src/client/views/collections/CollectionSubView.tsx8
-rw-r--r--src/client/views/linking/LinkEditor.tsx24
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx3
-rw-r--r--src/client/views/nodes/DocumentLinksButton.tsx87
-rw-r--r--src/client/views/nodes/DocumentView.scss9
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
-rw-r--r--src/client/views/nodes/FontIconBox.scss89
-rw-r--r--src/client/views/nodes/FontIconBox.tsx61
-rw-r--r--src/client/views/nodes/formattedText/RichTextMenu.tsx16
-rw-r--r--src/fields/Doc.ts2
-rw-r--r--src/fields/RichTextField.ts2
-rw-r--r--src/server/websocket.ts4
18 files changed, 279 insertions, 415 deletions
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 659f78970..985fcce11 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -13,7 +13,6 @@ export enum DocumentType {
INK = "ink", // ink stroke
SCREENSHOT = "screenshot", // view of a desktop application
FONTICON = "fonticonbox", // font icon
- MENUICON = "menuiconbox",
QUERY = "query", // search query
LABEL = "label", // simple text label
BUTTON = "button", // onClick button
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 300af4e50..92942bd58 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -151,7 +151,7 @@ export interface DocumentOptions {
annotationOn?: Doc;
removeDropProperties?: List<string>; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document
dbDoc?: Doc;
- menuIcon?: boolean; // if the font icon box is in the menu
+ iconShape?: string; // shapes of the fonticon border
linkRelationship?: string; // type of relatinoship a link represents
ischecked?: ScriptField; // returns whether a font icon box is checked
activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts)
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 3aa13d535..ffe29fddc 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -12,7 +12,7 @@ import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types";
import { nullAudio } from "../../fields/URLField";
import { DragManager } from "./DragManager";
import { Scripting } from "./Scripting";
-import { CollectionViewType } from "../views/collections/CollectionView";
+import { CollectionViewType, CollectionView } from "../views/collections/CollectionView";
import { makeTemplate } from "./DropConverter";
import { RichTextField } from "../../fields/RichTextField";
import { PrefetchProxy } from "../../fields/Proxy";
@@ -38,17 +38,6 @@ export class CurrentUserUtils {
@observable public static GuestWorkspace: Doc | undefined;
@observable public static GuestMobile: Doc | undefined;
- @observable public static toolsBtn: any | undefined;
- @observable public static libraryBtn: any | undefined;
- @observable public static searchBtn: any | undefined;
-
- @observable public static toolsStack: any | undefined;
- @observable public static workspaceStack: any | undefined;
- @observable public static catalogStack: any | undefined;
- @observable public static closedStack: any | undefined;
- @observable public static searchStack: any | undefined;
-
- @observable public static selectedPanel: string = "none";
@observable public static propertiesWidth: number = 0;
// sets up the default User Templates - slideView, queryView, descriptionView
@@ -442,7 +431,7 @@ export class CurrentUserUtils {
{ toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
{ toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
{ toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
- { toolTip: "Drag a comparison box", title: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
+ { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
{ toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
// { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
{ toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc },
@@ -478,7 +467,7 @@ export class CurrentUserUtils {
}
const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
- _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100,
+ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
icon,
title,
toolTip,
@@ -509,14 +498,15 @@ export class CurrentUserUtils {
title: string, icon: string, click: string,
}[] {
return [
- { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' },
- { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' },
- { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' },
- { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
- { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' },
- { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' },
- { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' },
- { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' },
+ { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu(self, "Workspace")' },
+ { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu(self, "Catalog")' },
+ { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu(self, "Archive")' },
+ { title: "Import", icon: "upload", click: 'scriptContext.selectMenu(self, "Import")' },
+ { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' },
+ { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' },
+ { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' },
+ { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' },
+ { title: "User Doc", icon: "address-card", click: 'scriptContext.selectMenu(self, "UserDoc")' },
];
}
@@ -525,18 +515,23 @@ export class CurrentUserUtils {
const buttons = CurrentUserUtils.menuBtnDescriptions();
const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({
icon,
- menuIcon: true,
+ iconShape: "square",
title,
_backgroundColor: "black",
stayInCollection: true,
+ childDropAction: "same",
_width: 60,
_height: 60,
onDoubleClick: ScriptField.MakeScript('console.log("hi")', { scriptContext: "any" }),
onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
}));
+ const userDoc = menuBtns[menuBtns.length - 1];
+ userDoc.target = doc;
+ userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode");
doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
title: "menuItemPanel",
+ dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
_backgroundColor: "black",
_gridGap: 0,
_yMargin: 0,
@@ -645,10 +640,6 @@ export class CurrentUserUtils {
return Cast(userDoc.thumbDoc, Doc);
}
- static setupLibrary(userDoc: Doc) {
- return CurrentUserUtils.setupWorkspaces(userDoc);
- }
-
// setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker.
// when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) {
@@ -672,29 +663,13 @@ export class CurrentUserUtils {
doc.myColorPicker = new PrefetchProxy(color);
}
- if (doc["tabs-button-tools"] === undefined) {
+ if (doc["sidebar-tools"] === undefined) {
const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], {
- _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true
+ title: "sidebar-tools", _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, forceActive: true
})) as any as Doc;
- CurrentUserUtils.toolsStack = toolsStack;
-
- doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
- letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
- sourcePanel: toolsStack,
- onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
- dragFactory: toolsStack,
- removeDropProperties: new List<string>(["lockedPosition"]),
- stayInCollection: true,
- hideFilterView: true,
- targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
- onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"),
- }));
+ doc["sidebar-tools"] = toolsStack;
}
- (doc["tabs-button-tools"] as any as Doc).sourcePanel; // prefetch sourcePanel
-
- return doc["tabs-button-tools"] as any as Doc;
}
static setupWorkspaces(doc: Doc) {
@@ -705,20 +680,21 @@ export class CurrentUserUtils {
title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true,
}));
}
- const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`);
- (doc.myWorkspaces as Doc).contextMenuScripts = new List<ScriptField>([newWorkspace!]);
- (doc.myWorkspaces as Doc).contextMenuLabels = new List<string>(["Create New Workspace"]);
-
- const workspaces = doc.myWorkspaces as Doc;
+ if (doc["sidebar-workspaces"] === undefined) {
+ const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`);
+ (doc.myWorkspaces as Doc).contextMenuScripts = new List<ScriptField>([newWorkspace!]);
+ (doc.myWorkspaces as Doc).contextMenuLabels = new List<string>(["Create New Workspace"]);
- CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
- title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
- treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
- lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
- })) as any as Doc;
+ const workspaces = doc.myWorkspaces as Doc;
- return doc.myWorkspaces as Doc;
+ doc["sidebar-workspaces"] = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
+ treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+ treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+ lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+ })) as any as Doc;
+ }
}
+
static setupCatalog(doc: Doc) {
doc.myCatalog === undefined;
if (doc.myCatalog === undefined) {
@@ -728,15 +704,16 @@ export class CurrentUserUtils {
}));
}
- const catalog = doc.myCatalog as Doc;
+ if (doc["sidebar-catalog"] === undefined) {
+ const catalog = doc.myCatalog as Doc;
- CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
- title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
- treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
- lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
- })) as any as Doc;
-
- return doc.myCatalog as Doc;
+ doc["sidebar-catalog"] = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
+ title: "sidebar-catalog",
+ treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+ treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+ lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+ })) as any as Doc;
+ }
}
static setupRecentlyClosed(doc: Doc) {
// setup Recently Closed library item
@@ -748,90 +725,51 @@ export class CurrentUserUtils {
}
// this is equivalent to using PrefetchProxies to make sure the recentlyClosed doc is ready
PromiseValue(Cast(doc.myRecentlyClosed, Doc)).then(recent => recent && PromiseValue(recent.data).then(DocListCast));
- const clearAll = ScriptField.MakeScript(`self.data = new List([])`);
- (doc.myRecentlyClosed as Doc).contextMenuScripts = new List<ScriptField>([clearAll!]);
- (doc.myRecentlyClosed as Doc).contextMenuLabels = new List<string>(["Clear All"]);
+ if (doc["sidebar-recentlyClosed"] === undefined) {
+ const clearAll = ScriptField.MakeScript(`self.data = new List([])`);
+ (doc.myRecentlyClosed as Doc).contextMenuScripts = new List<ScriptField>([clearAll!]);
+ (doc.myRecentlyClosed as Doc).contextMenuLabels = new List<string>(["Clear All"]);
- const recentlyClosed = doc.myRecentlyClosed as Doc;
+ const recentlyClosed = doc.myRecentlyClosed as Doc;
- CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
- title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
- treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
- lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
- })) as any as Doc;
-
- return doc.myRecentlyClosed as Doc;
- }
- // setup the Library button which will display the library panel. This panel includes a collection of workspaces, documents, and recently closed views
- static setupLibraryPanel(doc: Doc, sidebarContainer: Doc) {
- const workspaces = CurrentUserUtils.setupWorkspaces(doc);
- const documents = CurrentUserUtils.setupCatalog(doc);
- const recentlyClosed = CurrentUserUtils.setupRecentlyClosed(doc);
-
- if (doc["tabs-button-library"] === undefined) {
- const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], {
- title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
- treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
+ doc["sidebar-recentlyClosed"] = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
+ title: "sidebar-recentlyClosed",
+ treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+ treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
})) as any as Doc;
- doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same",
- letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
- sourcePanel: libraryStack,
- onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
- dragFactory: libraryStack,
- removeDropProperties: new List<string>(["lockedPosition"]),
- stayInCollection: true,
- targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
- onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
- }));
}
- return doc["tabs-button-library"] as Doc;
}
-
- // setup the Search button which will display the search panel.
- static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
- doc["tabs-button-search"] = undefined;
- if (doc["tabs-button-search"] === undefined) {
- doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
- letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
- sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc,
- searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
- targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
- lockedPosition: true,
- onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
- }));
- CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc;
+ static setupUserDoc(doc: Doc) {
+ if (doc["sidebar-userDoc"] === undefined) {
+ doc.treeViewOpen = true;
+ doc.treeViewExpandedView = "fields";
+ doc["sidebar-userDoc"] = new PrefetchProxy(Docs.Create.TreeDocument([doc], {
+ treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, title: "sidebar-userDoc",
+ treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
+ lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+ })) as any as Doc;
}
- return doc["tabs-button-search"] as any as Doc;
}
static setupSidebarContainer(doc: Doc) {
- if (doc["tabs-panelContainer"] === undefined) {
+ if (doc["sidebar"] === undefined) {
const sidebarContainer = new Doc();
sidebarContainer._chromeStatus = "disabled";
sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()");
- doc["tabs-panelContainer"] = new PrefetchProxy(sidebarContainer);
+ doc["sidebar"] = new PrefetchProxy(sidebarContainer);
}
- return doc["tabs-panelContainer"] as Doc;
+ return doc["sidebar"] as Doc;
}
// setup the list of sidebar mode buttons which determine what is displayed in the sidebar
static async setupSidebarButtons(doc: Doc) {
const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc);
- CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
- CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
- CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
-
- // Finally, setup the list of buttons to display in the sidebar
- if (doc["tabs-buttons"] === undefined) {
- doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], {
- _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
- title: "sidebar btn row stack", backgroundColor: "dimGray",
- }));
- (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn });
- }
+ await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
+ CurrentUserUtils.setupWorkspaces(doc);
+ CurrentUserUtils.setupCatalog(doc);
+ CurrentUserUtils.setupRecentlyClosed(doc);
+ CurrentUserUtils.setupUserDoc(doc);
}
static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index fdf4c1626..a5dbc0627 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -79,9 +79,8 @@ export class MainView extends React.Component {
@computed private get userDoc() { return Doc.UserDoc(); }
@computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
@computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
- @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
- @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
+ @observable public sidebarContent: any = this.userDoc?.["sidebar"];
@observable public panelContent: string = "none";
@observable public showProperties: boolean = false;
public isPointerDown = false;
@@ -316,7 +315,7 @@ export class MainView extends React.Component {
if (this.panelContent === doc?.title) return "lightgrey";
if (this.darkScheme) {
switch (doc?.type) {
- case DocumentType.MENUICON: return "white";
+ case DocumentType.FONTICON: return "white";
case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
case DocumentType.LINK:
case DocumentType.COL: {
@@ -326,7 +325,7 @@ export class MainView extends React.Component {
}
} else {
switch (doc?.type) {
- case DocumentType.MENUICON: return "black";
+ case DocumentType.FONTICON: return "black";
case DocumentType.RTF: return "#f1efeb";
case DocumentType.BUTTON:
case DocumentType.LABEL: return "lightgray";
@@ -389,18 +388,8 @@ export class MainView extends React.Component {
if (this._flyoutTranslate) {
setupMoveUpEvents(this, e, action((e: PointerEvent) => {
this.flyoutWidth = Math.max(e.clientX, 0);
- this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
- if (this.flyoutWidth === 0) {
- CurrentUserUtils.selectedPanel = "none";
- }
return false;
- }), emptyFunction, action(() => {
- this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
- this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
- if (this.flyoutWidth === 0) {
- CurrentUserUtils.selectedPanel = "none";
- }
- }));
+ }), emptyFunction, action(() => this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0));
}
}
@@ -456,7 +445,7 @@ export class MainView extends React.Component {
}
@computed get menuPanel() {
-
+ setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 0);
return <div className="mainView-menuPanel">
<DocumentView
Document={Doc.UserDoc().menuStack as Doc}
@@ -470,7 +459,7 @@ export class MainView extends React.Component {
rootSelected={returnTrue}
removeDocument={returnFalse}
onClick={undefined}
- ScreenToLocalTransform={this.mainContainerXf}
+ ScreenToLocalTransform={this.sidebarScreenToLocal}
ContentScaling={returnOne}
PanelWidth={() => 60}
PanelHeight={this.getContentsHeight}
@@ -492,37 +481,38 @@ export class MainView extends React.Component {
@action @undoBatch
closeFlyout = () => {
- CurrentUserUtils.selectedPanel = "none";
this.panelContent = "none";
this.flyoutWidth = 0;
}
get groupManager() { return GroupManager.Instance; }
+ _lastButton: Doc | undefined;
@action @undoBatch
- selectMenu = (str: string) => {
+ selectMenu = (button: Doc, str: string) => {
+ this._lastButton && (this._lastButton.color = "white");
+ this._lastButton && (this._lastButton._backgroundColor = "");
if (this.panelContent === str && this.flyoutWidth !== 0) {
- CurrentUserUtils.selectedPanel = "none";
this.panelContent = "none";
this.flyoutWidth = 0;
} else {
- this.panelContent = str;
- CurrentUserUtils.selectedPanel = str;
- switch (this.panelContent) {
- case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
- case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
- case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break;
- case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
- case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
- case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
+ let panelDoc: Doc | undefined;
+ switch (this.panelContent = str) {
+ case "Tools": panelDoc = Doc.UserDoc()["sidebar-tools"] as Doc ?? undefined; break;
+ case "Workspace": panelDoc = Doc.UserDoc()["sidebar-workspaces"] as Doc ?? undefined; break;
+ case "Catalog": panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break;
+ case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break;
+ case "Settings": SettingsManager.Instance.open(); break;
+ case "Sharing": GroupManager.Instance.open(); break;
+ case "UserDoc": panelDoc = Doc.UserDoc()["sidebar-userDoc"] as Doc ?? undefined; break;
}
- if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") {
- CurrentUserUtils.selectedPanel = "none";
- this.panelContent = "none";
- this.flyoutWidth = 0;
- } else {
+ this.sidebarContent.proto = panelDoc;
+ if (panelDoc) {
MainView.expandFlyout();
- }
+ button._backgroundColor = "lightgrey";
+ button.color = "black";
+ this._lastButton = button;
+ } else this.flyoutWidth = 0;
}
return true;
}
@@ -613,7 +603,7 @@ export class MainView extends React.Component {
public static expandFlyout = action(() => {
MainView.Instance._flyoutTranslate = true;
MainView.Instance.flyoutWidth = (MainView.Instance.flyoutWidth || 250);
- MainView.Instance.sidebarButtonsDoc._columnWidth = MainView.Instance.flyoutWidth / 3 - 30;
+
});
@computed get expandButton() {
@@ -642,6 +632,7 @@ export class MainView extends React.Component {
fieldKey={"data"}
dropAction={"alias"}
annotationsKey={""}
+ backgroundColor={this.defaultBackgroundColors}
rootSelected={returnTrue}
bringToFront={emptyFunction}
select={emptyFunction}
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 3b31947f7..a9e812ad3 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -161,7 +161,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
PanelHeight={nested ? pair.layout[HeightSym] : () => this.dimension()}
renderDepth={this.props.renderDepth + 1}
focus={emptyFunction}
- backgroundColor={returnEmptyString}
+ backgroundColor={this.props.backgroundColor}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 0a3f77888..8c4118e89 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -77,8 +77,8 @@ export default class CollectionMenu extends AntimodeMenu {
}
render() {
- const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} placement="bottom">
- <button className="antimodeMenu-button" key="pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
+ const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} key="pin menu" placement="bottom">
+ <button className="antimodeMenu-button" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
<FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
</button>
</Tooltip>;
@@ -86,9 +86,8 @@ export default class CollectionMenu extends AntimodeMenu {
const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left";
const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel";
- const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} placement="bottom">
- <button className="antimodeMenu-button" key="properties"
- onPointerDown={this.toggleProperties}>
+ const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="properties" placement="bottom">
+ <button className="antimodeMenu-button" key="properties" onPointerDown={this.toggleProperties}>
<FontAwesomeIcon icon={propIcon} size="lg" />
</button>
</Tooltip>;
@@ -359,7 +358,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
<div className="collectionViewBaseChrome">
{this.props.type === CollectionViewType.Invalid ||
this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes}
- {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome}
+ {this.props.type === CollectionViewType.Docking || (this.isText && Doc.UserDoc().noviceMode) ? (null) : this.templateChrome}
{Doc.UserDoc().noviceMode ? (null) :
<Tooltip title={<div className="dash-tooltip">filter documents to show</div>} placement="bottom">
<div className="collectionViewBaseChrome-viewSpecs" style={{ display: "grid" }}>
@@ -372,7 +371,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
{this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
<Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
<button className={"antimodeMenu-button"} key="float"
- style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
+ style={{ backgroundColor: this.props.docView.layoutDoc.z ? "121212" : undefined, borderRight: "1px solid gray" }}
onClick={() => DocumentView.FloatDoc(this.props.docView)}>
<FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
</button>
@@ -451,10 +450,6 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""];
private _width = ["1", "5", "10", "100"];
- // private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
- // private _head = ["", "", "arrow", "", "", "arrow", "", "", ""];
- // private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""];
- // private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"];
private _dotsize = [10, 20, 30, 40];
private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"];
private _head = ["", "", "", "arrow", "", ""];
@@ -524,12 +519,10 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
});
return <div className="btn-draw" key="draw">
{this._draw.map((icon, i) =>
- <Tooltip title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
- <button className="antimodeMenu-button" key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
+ <Tooltip key={icon} title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
+ <button className="antimodeMenu-button" onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
- {/* {this._draw[i]} */}
<FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
-
</button>
</Tooltip>)}
</div>;
@@ -594,53 +587,55 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
}
render() {
- return !this.props.docView.layoutDoc ? (null) : <div className="collectionFreeFormMenu-cont">
- {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : <Tooltip title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
- <div key="map" className="backKeyframe" onClick={this.miniMap}>
- <FontAwesomeIcon icon={"map"} size={"lg"} />
- </div>
- </Tooltip>
- }
- {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
- <div key="back" className="backKeyframe" onClick={this.prevKeyframe}>
- <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
- </div>
- </Tooltip> : null}
- {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
- <div key="num" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
- onClick={action(() => this.document.editing = !this.document.editing)} >
- {NumCast(this.document.currentFrame)}
- </div>
- </Tooltip> : null}
- {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
- <div key="fwd" className="fwdKeyframe" onClick={this.nextKeyframe}>
- <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
- </div>
- </Tooltip> : null}
-
- {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
- <Tooltip title={<div className="dash-tooltip">Use Hypothesis</div>} placement="bottom">
- <button className={"antimodeMenu-button"} key="hypothesis"
- style={{
- backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
- borderRight: "1px solid gray"
- }}
- onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
- <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
- </button>
- </Tooltip>
- }
- {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ?
- <>
- {this.drawButtons}
- {this.widthPicker}
- {this.colorPicker}
- {this.fillPicker}
- </> :
- (null)
- }
- {this.isText ? <RichTextMenu key="rich" /> : null}
- </div>;
+ return !this.props.docView.layoutDoc ? (null) :
+ <div className="collectionFreeFormMenu-cont">
+ {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
+ <Tooltip key="map" title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
+ <div className="backKeyframe" onClick={this.miniMap}>
+ <FontAwesomeIcon icon={"map"} size={"lg"} />
+ </div>
+ </Tooltip>
+ }
+ {!this.isText ? <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
+ <div className="backKeyframe" onClick={this.prevKeyframe}>
+ <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
+ </div>
+ </Tooltip> : null}
+ {!this.isText ? <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
+ <div className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
+ onClick={action(() => this.document.editing = !this.document.editing)} >
+ {NumCast(this.document.currentFrame)}
+ </div>
+ </Tooltip> : null}
+ {!this.isText ? <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
+ <div className="fwdKeyframe" onClick={this.nextKeyframe}>
+ <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
+ </div>
+ </Tooltip> : null}
+
+ {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
+ <Tooltip key="hypothesis" title={<div className="dash-tooltip">Use Hypothesis</div>} placement="bottom">
+ <button className={"antimodeMenu-button"} key="hypothesis"
+ style={{
+ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
+ borderRight: "1px solid gray"
+ }}
+ onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
+ <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
+ </button>
+ </Tooltip>
+ }
+ {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ?
+ <>
+ {this.drawButtons}
+ {this.widthPicker}
+ {this.colorPicker}
+ {this.fillPicker}
+ </> :
+ (null)
+ }
+ {this.isText ? <RichTextMenu key="rich" /> : null}
+ </div>;
}
}
@observer
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index c90e85271..3ebc6baca 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -185,13 +185,10 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
@action
protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean {
const docDragData = de.complete.docDragData;
- ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData });
if (docDragData) {
let added = false;
- const dropaction = docDragData.dropAction || docDragData.userDropAction;
- if (dropaction && dropaction !== "move") {
- added = this.addDocument(docDragData.droppedDocuments);
- } else if (docDragData.moveDocument) {
+ const dropAction = docDragData.dropAction || docDragData.userDropAction;
+ if ((!dropAction || dropAction === "move") && docDragData.moveDocument) {
const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d);
const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d);
const res = addedDocs.length ? this.addDocument(addedDocs) : true;
@@ -201,6 +198,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.addDocument : returnFalse);
} else added = res;
} else {
+ ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData });
added = this.addDocument(docDragData.droppedDocuments);
}
added && e.stopPropagation();
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index c9aae0598..660afd4b9 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -1,20 +1,16 @@
import { library } from "@fortawesome/fontawesome-svg-core";
import { faArrowLeft, faCog, faEllipsisV, faExchangeAlt, faPlus, faTable, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, computed, toJS } from "mobx";
+import { Tooltip } from "@material-ui/core";
+import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
-import { Doc, Opt } from "../../../fields/Doc";
-import { StrCast, DateCast } from "../../../fields/Types";
+import { Doc } from "../../../fields/Doc";
+import { DateCast, StrCast } from "../../../fields/Types";
import { Utils } from "../../../Utils";
import { LinkManager } from "../../util/LinkManager";
+import { undoBatch } from "../../util/UndoManager";
import './LinkEditor.scss';
import React = require("react");
-import { DocumentView } from "../nodes/DocumentView";
-import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
-import { EditableView } from "../EditableView";
-import { RefObject } from "react";
-import { Tooltip } from "@material-ui/core";
-import { undoBatch } from "../../util/UndoManager";
library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus);
@@ -296,20 +292,18 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
//@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
- @action @undoBatch
+ @undoBatch @action
deleteLink = (): void => {
LinkManager.Instance.deleteLink(this.props.linkDoc);
this.props.showLinks();
}
- @action @undoBatch
+ @undoBatch @action
setDescripValue = (value: string) => {
if (LinkManager.currentLink) {
LinkManager.currentLink.description = value;
this.buttonColor = "rgb(62, 133, 55)";
- setTimeout(action(() => {
- this.buttonColor = "black";
- }), 750);
+ setTimeout(action(() => this.buttonColor = "black"), 750);
return true;
}
}
@@ -361,7 +355,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
this.openDropdown = !this.openDropdown;
}
- @action @undoBatch
+ @undoBatch @action
changeFollowBehavior = (follow: string) => {
this.openDropdown = false;
Doc.GetProto(this.props.linkDoc).followLinkLocation = follow;
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index f7e253f42..6081def5d 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -78,9 +78,6 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
render() {
TraceMobx();
- if (this.props.Document.title === "Archive") {
- console.log("");
- }
return (<div className="contentFittingDocumentView" style={{
width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(),
height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(),
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index b00de14a8..9395ac961 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -95,72 +95,55 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
}
}
- @action @undoBatch
completeLink = (e: React.PointerEvent): void => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => {
- if (doubleTap && this.props.InMenu && !!!this.props.StartLink) {
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action((e, doubleTap) => {
+ if (doubleTap && this.props.InMenu && !this.props.StartLink) {
if (DocumentLinksButton.StartLink === this.props.View) {
DocumentLinksButton.StartLink = undefined;
- } else {
-
- if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
- const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
- LinkManager.currentLink = linkDoc;
-
- runInAction(() => {
- if (linkDoc) {
- TaskCompletionBox.textDisplayed = "Link Created";
- TaskCompletionBox.popupX = e.screenX;
- TaskCompletionBox.popupY = e.screenY - 133;
- TaskCompletionBox.taskCompleted = true;
-
- LinkDescriptionPopup.popupX = e.screenX;
- LinkDescriptionPopup.popupY = e.screenY - 100;
- LinkDescriptionPopup.descriptionPopup = true;
+ } else if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+ const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+ LinkManager.currentLink = linkDoc;
+ if (linkDoc) {
+ TaskCompletionBox.textDisplayed = "Link Created";
+ TaskCompletionBox.popupX = e.screenX;
+ TaskCompletionBox.popupY = e.screenY - 133;
+ TaskCompletionBox.taskCompleted = true;
- setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500);
- }
+ LinkDescriptionPopup.popupX = e.screenX;
+ LinkDescriptionPopup.popupY = e.screenY - 100;
+ LinkDescriptionPopup.descriptionPopup = true;
- });
+ setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500);
}
}
}
- }));
+ })));
}
-
- @action @undoBatch
- finishLinkClick = (screenX: number, screenY: number) => {
+ finishLinkClick = undoBatch(action((screenX: number, screenY: number) => {
if (DocumentLinksButton.StartLink === this.props.View) {
DocumentLinksButton.StartLink = undefined;
- } else {
- if (this.props.InMenu && !this.props.StartLink) {
- if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
- const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
- // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks (). see note above in onLInkButtonMoved
- runInAction(() => DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc);
- setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
- LinkManager.currentLink = linkDoc;
-
- runInAction(() => {
- if (linkDoc) {
- TaskCompletionBox.textDisplayed = "Link Created";
- TaskCompletionBox.popupX = screenX;
- TaskCompletionBox.popupY = screenY - 133;
- TaskCompletionBox.taskCompleted = true;
-
- if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
- LinkDescriptionPopup.popupX = screenX;
- LinkDescriptionPopup.popupY = screenY - 100;
- LinkDescriptionPopup.descriptionPopup = true;
- }
-
- setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500);
- }
- });
+ } else if (this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+ const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+ // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks (). see note above in onLInkButtonMoved
+ DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc;
+ setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
+ LinkManager.currentLink = linkDoc;
+ if (linkDoc) {
+ TaskCompletionBox.textDisplayed = "Link Created";
+ TaskCompletionBox.popupX = screenX;
+ TaskCompletionBox.popupY = screenY - 133;
+ TaskCompletionBox.taskCompleted = true;
+
+ if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
+ LinkDescriptionPopup.popupX = screenX;
+ LinkDescriptionPopup.popupY = screenY - 100;
+ LinkDescriptionPopup.descriptionPopup = true;
}
+
+ setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500);
}
}
- }
+ }));
@observable
public static EditLink: DocumentView | undefined;
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index b978f6245..e6b8928d4 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -54,6 +54,15 @@
}
}
+ .documentView-anchorCont {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ }
+
.documentView-lock {
width: 20;
height: 20;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ec0a5f3ac..a195f2813 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -890,7 +890,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
this.rootDoc.type === DocumentType.LINK ||
this.props.dontRegisterView ? (null) : // view that are not registered
DocUtils.FilterDocs(this.directLinks, this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) =>
- <DocumentView {...this.props} key={i + 1}
+ <div className="documentView-anchorCont" key={i + 1}> <DocumentView {...this.props}
Document={d}
ContainingCollectionView={this.props.ContainingCollectionView}
ContainingCollectionDoc={this.props.Document} // bcz: hack this.props.Document is not a collection Need a better prop for passing the containing document to the LinkAnchorBox
@@ -903,7 +903,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
pointerEvents={false}
LayoutTemplate={undefined}
LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(d, this.props.Document)}`)}
- />);
+ /></div >);
}
@computed get innards() {
TraceMobx();
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index a142d873a..31bc471de 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,51 +1,46 @@
-.fontIconBox-outerDiv {
- width: 100%;
- height: 100%;
- pointer-events: all;
- touch-action: none;
- border-radius: inherit;
- background: black;
- border-radius: 100%;
- transform-origin: top left;
+
+.fontIconBox-label {
+ color: white;
+ margin-right: 4px;
+ margin-top: 1px;
+ position: relative;
+ text-align: center;
+ font-size: 7px;
+ letter-spacing: normal;
+ background-color: inherit;
+ border-radius: 8px;
+ margin-top: -8px;
+ padding: 0;
+ width: 100%;
+}
+
+.menuButton-round {
+ border-radius: 100%;
.fontIconBox-label {
- background: gray;
- color: white;
- border-radius: 8px;
- width: 100%;
+ margin-left: -10px; // button padding is 10px;
+ bottom:0;
position: absolute;
- text-align: center;
- font-size: 8px;
- //margin-top:4px;
- letter-spacing: normal;
- left: 0;
- overflow: hidden;
- }
-
- svg {
- width: 95% !important;
- height: 95%;
}
}
-
-.menuButton {
- //padding: 7px;
- padding-left: 5px;
- width: 100%;
- width: 60px;
- height: 60px;
+.menuButton-square {
padding-top: 3px;
padding-bottom: 3px;
+ padding-left: 5px;
+ .fontIconBox-label {
+ border-radius: 0px;
+ margin-top: 0px;
+ border-radius: "inherit";
+ }
+}
+.menuButton, .menuButton-round, .menuButton-square{
+ width: 100%;
+ height:100%;
+ pointer-events: all;
+ touch-action: none;
.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 {
@@ -54,24 +49,10 @@
}
}
- .menuButton-label {
- color: white;
- margin-right: 4px;
- border-radius: 8px;
- width: 42px;
- position: relative;
- text-align: center;
- font-size: 7px;
- margin-top: 1px;
- letter-spacing: normal;
- padding: 3px;
- background-color: inherit;
- }
-
- .menuButton-icon {
+ .menuButton-icon-square {
width: auto;
height: 32px;
- padding: 5px;
+ padding: 4px;
}
svg {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 48f9d7cc6..2f540e62a 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,8 +12,6 @@ import { Doc } from '../../../fields/Doc';
import { ContextMenu } from '../ContextMenu';
import { ScriptField } from '../../../fields/ScriptField';
import { Tooltip } from '@material-ui/core';
-import { createUnionOrIntersectionTypeNode } from 'typescript';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
const FontIconSchema = createSchema({
icon: "string",
});
@@ -61,49 +59,22 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
}
render() {
-
- //style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
-
- if (this.layoutDoc.menuIcon) {
-
- // let backgroundColor = "black";
- // if (this.dataDoc.title === "Sharing" || this.dataDoc.title === "Help" || this.dataDoc.title === "Settings" || this.dataDoc.title === "Import") {
- // backgroundColor = "black";
- // } else {
- // backgroundColor = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "";
- // }
-
- const color = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "black" : "white";
- const menuBTN = <div className="menuButton"
- onDoubleClick={emptyFunction}
- style={{ backgroundColor: CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "" }}>
-
- <div className="menuButton-wrap"
- style={{ backgroundColor: CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "" }}>
- <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>
+ const label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
+ const color = StrCast(this.layoutDoc.color, this._foregroundColor);
+ const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc)));
+ const shape = StrCast(this.layoutDoc.iconShape, "round");
+ const button = <>
+ <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
+ style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor }}>
+ <div className="menuButton-wrap">
+ {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />}
+ {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
</div>
- </div>;
-
- return menuBTN;
- } else {
- const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc);
- const refLayout = Doc.Layout(referenceDoc);
- const button = <button className="fontIconBox-outerDiv" ref={this._ref} onContextMenu={this.specificContextMenu}
- style={{
- padding: Cast(this.layoutDoc._xPadding, "number", null),
- background: StrCast(refLayout._backgroundColor, StrCast(refLayout.backgroundColor)),
- boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
- }}>
- <FontAwesomeIcon className="fontIconBox-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={StrCast(this.layoutDoc.color, this._foregroundColor)} size="sm" />
- {!this.rootDoc.title ? (null) : <div className="fontIconBox-label" style={{ width: this.rootDoc.label ? "max-content" : undefined }}> {StrCast(this.rootDoc.label, StrCast(this.rootDoc.title).substring(0, 6))} </div>}
- </button>;
- return !this.layoutDoc.toolTip ? button :
- <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
- {button}
- </Tooltip>;
- }
-
+ </button>
+ </>;
+ return !this.layoutDoc.toolTip ? button :
+ <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
+ {button}
+ </Tooltip>;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index d7eb73bb4..6e268be48 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -437,10 +437,16 @@ export default class RichTextMenu extends AntimodeMenu {
}
changeFontSize = (mark: Mark, view: EditorView) => {
+ if ((this.view?.state.selection.$from.pos || 0) < 2) {
+ this.TextView.layoutDoc._fontSize = mark.attrs.fontSize;
+ }
this.setMark(view.state.schema.marks.pFontSize.create({ fontSize: mark.attrs.fontSize }), view.state, view.dispatch, true);
}
changeFontFamily = (mark: Mark, view: EditorView) => {
+ if ((this.view?.state.selection.$from.pos || 0) < 2) {
+ this.TextView.layoutDoc._fontFamily = mark.attrs.family;
+ }
this.setMark(view.state.schema.marks.pFontFamily.create({ family: mark.attrs.family }), view.state, view.dispatch, true);
}
@@ -794,7 +800,9 @@ export default class RichTextMenu extends AntimodeMenu {
const link = this.currentLink ? this.currentLink : "";
const button = <Tooltip title={<div className="dash-tooltip">set hyperlink</div>} placement="bottom">
- <div style={{ marginTop: 8 }}><FontAwesomeIcon icon="link" size="lg" /> </div>
+ <button className="antimodeMenu-button color-preview-button">
+ <FontAwesomeIcon icon="link" size="lg" />
+ </button>
</Tooltip>;
const dropdownContent =
@@ -1050,10 +1058,10 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
render() {
return (
<div className="button-dropdown-wrapper" ref={node => this.ref = node}>
- <button className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
+ <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
{this.props.button}
- <div style={{ marginTop: this.props.link ? "4.5" : "-8.5" }}><FontAwesomeIcon icon="caret-down" size="sm" /></div>
- </button>
+ <div style={{ marginTop: "-8.5" }}><FontAwesomeIcon icon="caret-down" size="sm" /></div>
+ </div>
{this.showDropdown ? this.props.dropdownContent : (null)}
</div>
);
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 6d01785aa..f4505d475 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -409,7 +409,7 @@ export namespace Doc {
// and returns the document who's proto is undefined or whose proto is marked as a base prototype ('isPrototype').
export function GetProto(doc: Doc): Doc {
if (doc instanceof Promise) {
- console.log("GetProto: error: got Promise insead of Doc");
+ console.log("GetProto: warning: got Promise insead of Doc");
}
const proto = doc && (Doc.GetT(doc, "isPrototype", "boolean", true) ? doc : (doc.proto || doc));
return proto === doc ? proto : Doc.GetProto(proto);
diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts
index 5cf0e0cc3..2ca5ac082 100644
--- a/src/fields/RichTextField.ts
+++ b/src/fields/RichTextField.ts
@@ -20,7 +20,7 @@ export class RichTextField extends ObjectField {
}
Empty() {
- return !(this.Text || this.Data.toString().includes("dashField"));
+ return !(this.Text || this.Data.toString().includes("dashField") || this.Data.toString().includes("align"));
}
[Copy]() {
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index 3dd238f38..d81450b32 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -208,12 +208,12 @@ export namespace WebSocket {
}
function GetRefField([id, callback]: [string, (result?: Transferable) => void]) {
- process.stdout.write(`…`)
+ process.stdout.write(`.`);
Database.Instance.getDocument(id, callback);
}
function GetRefFields([ids, callback]: [string[], (result?: Transferable[]) => void]) {
- console.log(green(`> ${ids.length} fields`));
+ process.stdout.write(`${ids.length}…`);
Database.Instance.getDocuments(ids, callback);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 23:31:24 +0000