aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/CurrentUserUtils.ts168
-rw-r--r--src/client/util/DocumentManager.ts8
-rw-r--r--src/client/util/DragManager.ts4
-rw-r--r--src/client/util/GroupManager.scss136
-rw-r--r--src/client/util/GroupManager.tsx360
-rw-r--r--src/client/util/GroupMemberView.scss68
-rw-r--r--src/client/util/GroupMemberView.tsx75
-rw-r--r--src/client/util/InteractionUtils.tsx10
-rw-r--r--src/client/util/LinkManager.ts21
-rw-r--r--src/client/util/SearchUtil.ts2
-rw-r--r--src/client/util/SettingsManager.scss22
-rw-r--r--src/client/util/SharingManager.scss104
-rw-r--r--src/client/util/SharingManager.tsx209
13 files changed, 1038 insertions, 149 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 0b644fa79..ce910c062 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -54,6 +54,25 @@ export class CurrentUserUtils {
removeDropProperties: new List<string>(["dropAction"]), title: "query view", icon: "question-circle"
});
}
+ // Prototype for mobile button (not sure if 'Advanced Item Prototypes' is ideal location)
+ if (doc["template-mobile-button"] === undefined) {
+ const queryTemplate = this.mobileButton({
+ title: "NEW MOBILE BUTTON",
+ onClick: undefined,
+ },
+ [this.ficon({
+ ignoreClick: true,
+ icon: "mobile",
+ backgroundColor: "rgba(0,0,0,0)"
+ }),
+ this.mobileTextContainer({},
+ [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
+ doc["template-mobile-button"] = CurrentUserUtils.ficon({
+ onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
+ dragFactory: new PrefetchProxy(queryTemplate) as any as Doc,
+ removeDropProperties: new List<string>(["dropAction"]), title: "mobile button", icon: "mobile"
+ });
+ }
if (doc["template-button-slides"] === undefined) {
const slideTemplate = Docs.Create.MultirowDocument(
@@ -219,6 +238,7 @@ export class CurrentUserUtils {
doc["template-button-slides"] as Doc,
doc["template-button-description"] as Doc,
doc["template-button-query"] as Doc,
+ doc["template-mobile-button"] as Doc,
doc["template-button-detail"] as Doc,
doc["template-button-link"] as Doc,
doc["template-button-switch"] as Doc];
@@ -343,7 +363,7 @@ export class CurrentUserUtils {
} else {
const templateIconsDoc = Cast(doc["template-icons"], Doc, null);
const requiredTypes = [doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc,
- doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc, doc["template-icon-view-pdf"] as Doc];
+ doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc];
DocListCastAsync(templateIconsDoc.data).then(async curIcons => {
await Promise.all(curIcons!);
requiredTypes.map(ntype => Doc.AddDocToList(templateIconsDoc, "data", ntype));
@@ -364,16 +384,25 @@ export class CurrentUserUtils {
doc.emptyCollection = Docs.Create.FreeformDocument([],
{ _nativeWidth: undefined, _nativeHeight: undefined, _width: 150, _height: 100, title: "freeform" });
}
+ if (doc.emptyComparison === undefined) {
+ doc.emptyComparison = Docs.Create.ComparisonDocument({ title: "compare", _width: 300, _height: 300 });
+ }
+ if (doc.emptyScript === undefined) {
+ doc.emptyScript = Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250, title: "script" });
+ }
if (doc.emptyDocHolder === undefined) {
doc.emptyDocHolder = Docs.Create.DocumentDocument(
ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]") as any,
{ _width: 250, _height: 250, title: "container" });
}
if (doc.emptyWebpage === undefined) {
- doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
+ doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
+ }
+ if (doc.activeMobileMenu === undefined) {
+ this.setupActiveMobileMenu(doc);
}
return [
- { title: "Drag a comparison box", label: "Comp", icon: "columns", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' },
+ { title: "Drag a comparison box", label: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
{ title: "Drag a collection", label: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
{ title: "Drag a web page", label: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
{ title: "Drag a cat image", label: "Img", icon: "cat", ignoreClick: true, drag: 'Docs.Create.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { _width: 250, _nativeWidth:250, title: "an image of a cat" })' },
@@ -383,9 +412,9 @@ export class CurrentUserUtils {
{ title: "Drag a clickable button", label: "Btn", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding:10, _yPadding: 10, title: "Button" })' },
{ title: "Drag a presentation view", label: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory,true)`, dragFactory: doc.emptyPresentation as Doc },
{ title: "Drag a search box", label: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' },
- { title: "Drag a scripting box", label: "Script", icon: "terminal", ignoreClick: true, drag: 'Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250 title: "untitled script" })' },
+ { title: "Drag a scripting box", label: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
{ title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
- { title: "Drag a mobile view", label: "Phone", icon: "phone", ignoreClick: true, drag: 'Doc.UserDoc().activeMobile' },
+ { title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
{ title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
// { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
// { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
@@ -395,6 +424,7 @@ export class CurrentUserUtils {
{ title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
{ title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
{ title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
+ { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
];
}
@@ -439,25 +469,72 @@ export class CurrentUserUtils {
return doc.myItemCreators as Doc;
}
- static setupMobileButtons(doc: Doc, buttons?: string[]) {
- const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
- { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" },
- { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
- { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
- { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
- { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
- // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "red", activeInkPen: doc },
- { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" },
- // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
- ];
- return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
- _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
- onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
- ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activeInkPen: data.activeInkPen,
- backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
+ // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu
+ static setupActiveMobileMenu(doc: Doc) {
+ if (doc.activeMobileMenu === undefined) {
+ console.log("undefined");
+ doc.activeMobileMenu = this.setupMobileMenu();
+ }
+ return doc.activeMobileMenu as Doc;
+ }
+
+ // Sets up mobileMenu stacking document
+ static setupMobileMenu() {
+ const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), {
+ _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100
}));
+ return menu;
+ }
+
+ // SEts up mobile buttons for inside mobile menu
+ static setupMobileButtons(doc?: Doc, buttons?: string[]) {
+ const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
+ { title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " },
+ { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." },
+ { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." },
+ { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." },
+ { title: "PRESENTATION", icon: "desktop", click: 'switchToMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." },
+ { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." }
+ ];
+ // returns a list of mobile buttons
+ return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data =>
+ this.mobileButton({
+ title: data.title,
+ lockedPosition: true,
+ onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
+ _backgroundColor: data.backgroundColor
+ },
+ [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])])
+ );
}
+ // sets up the main document for the mobile button
+ static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, {
+ ...opts,
+ dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15,
+ borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled"
+ }) as any as Doc
+
+ // sets up the text container for the information contained within the mobile button
+ static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, {
+ ...opts,
+ dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25,
+ backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true
+ }) as any as Doc
+
+ // Sets up the title of the button
+ static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, {
+ ...opts,
+ dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
+ }) as any as Doc
+
+ // Sets up the description of the button
+ static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, {
+ ...opts,
+ dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
+ }) as any as Doc
+
+
static setupThumbButtons(doc: Doc) {
const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
{ title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
@@ -491,31 +568,12 @@ export class CurrentUserUtils {
return Cast(userDoc.thumbDoc, Doc);
}
- static setupMobileDoc(userDoc: Doc) {
- return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
- _columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5
- });
+ static setupLibrary(userDoc: Doc) {
+ return CurrentUserUtils.setupWorkspaces(userDoc);
}
- static setupMobileInkingDoc(userDoc: Doc) {
- return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" });
- }
-
- static setupMobileUploadDoc(userDoc: Doc) {
- // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" })
- const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", {
- title: "Upload Images From the Web", _chromeStatus: "enabled", lockedPosition: true
- });
- const uploadDoc = Docs.Create.StackingDocument([], {
- title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true
- });
- return Docs.Create.StackingDocument([webDoc, uploadDoc], {
- _width: screen.width, lockedPosition: true, _chromeStatus: "disabled", title: "Upload", _autoHeight: true, _yMargin: 80, backgroundColor: "lightgray"
- });
- }
-
- // 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)
+ // 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) {
// setup a masonry view of all he creators
const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
@@ -619,7 +677,7 @@ export class CurrentUserUtils {
return doc["tabs-button-library"] as Doc;
}
- // setup the Search button which will display the search panel.
+ // setup the Search button which will display the search panel.
static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
if (doc["tabs-button-search"] === undefined) {
doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
@@ -654,7 +712,7 @@ export class CurrentUserUtils {
// Finally, setup the list of buttons to display in the sidebar
if (doc["tabs-buttons"] === undefined) {
- doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([searchBtn, libraryBtn, toolsBtn], {
+ doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
_width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
title: "sidebar btn row stack", backgroundColor: "dimGray",
}));
@@ -709,12 +767,14 @@ export class CurrentUserUtils {
}
}
+ // Right sidebar is where mobile uploads are contained
static setupRightSidebar(doc: Doc) {
if (doc.rightSidebarCollection === undefined) {
- doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Right Sidebar" }));
+ doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
}
}
+
static setupClickEditorTemplates(doc: Doc) {
if (doc["clickFuncs-child"] === undefined) {
const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript(
@@ -765,18 +825,20 @@ export class CurrentUserUtils {
doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "");
doc.activeDash = StrCast(doc.activeDash, "0");
doc.fontSize = NumCast(doc.fontSize, 12);
- doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
- doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
+ doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
+ doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon
this.setupDocTemplates(doc); // sets up the template menu of templates
this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing
- this.setupOverlays(doc); // documents in overlay layer
+ this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
+ this.setupOverlays(doc); // documents in overlay layer
this.setupDockedButtons(doc); // the bottom bar of font icons
this.setupDefaultPresentation(doc); // presentation that's initially triggered
await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels
doc.globalLinkDatabase = Docs.Prototypes.MainLinkDocument();
doc.globalScriptDatabase = Docs.Prototypes.MainScriptDocument();
+ doc.globalGroupDatabase = Docs.Prototypes.MainGroupDocument();
// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
doc["dockedBtn-undo"] && reaction(() => UndoManager.undoStack.slice(), () => Doc.GetProto(doc["dockedBtn-undo"] as Doc).opacity = UndoManager.CanUndo() ? 1 : 0.4, { fireImmediately: true });
@@ -809,9 +871,5 @@ export class CurrentUserUtils {
}
}
-Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); },
- "initializes the Mobile inking document", "(userDoc: Doc)");
-Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); },
- "initializes the Mobile upload document", "(userDoc: Doc)");
Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); },
- "creates a new workspace when called"); \ No newline at end of file
+ "creates a new workspace when called");
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index fb5d1717e..1fa5faeb3 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -146,7 +146,7 @@ export class DocumentManager {
};
const docView = getFirstDocView(targetDoc, originatingDoc);
let annotatedDoc = await Cast(targetDoc.annotationOn, Doc);
- if (annotatedDoc) {
+ if (annotatedDoc && !linkDoc?.isPushpin) {
const first = getFirstDocView(annotatedDoc);
if (first) {
annotatedDoc = first.props.Document;
@@ -156,7 +156,11 @@ export class DocumentManager {
}
}
if (docView) { // we have a docView already and aren't forced to create a new one ... just focus on the document. TODO move into view if necessary otherwise just highlight?
- docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish);
+ if (linkDoc?.isPushpin) docView.props.Document.hidden = !docView.props.Document.hidden;
+ else {
+ docView.props.Document.hidden && (docView.props.Document.hidden = undefined);
+ docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish);
+ }
highlight();
} else {
const contextDocs = docContext ? await DocListCastAsync(docContext.data) : undefined;
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 0db3963b2..2ceafff30 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -202,7 +202,6 @@ export namespace DragManager {
dropDoc instanceof Doc && DocUtils.MakeLinkToActiveAudio(dropDoc);
return dropDoc;
};
- const batch = UndoManager.StartBatch("dragging");
const finishDrag = (e: DragCompleteEvent) => {
const docDragData = e.docDragData;
if (docDragData && !docDragData.droppedDocuments.length) {
@@ -216,7 +215,6 @@ export namespace DragManager {
const remProps = (dragData?.removeDropProperties || []).concat(Array.from(dragProps));
remProps.map(prop => drop[prop] = undefined);
});
- batch.end();
}
return e;
};
@@ -315,6 +313,7 @@ export namespace DragManager {
export let docsBeingDragged: Doc[] = [];
export let CanEmbed = false;
export function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
+ const batch = UndoManager.StartBatch("dragging");
eles = eles.filter(e => e);
CanEmbed = false;
if (!dragDiv) {
@@ -449,6 +448,7 @@ export namespace DragManager {
document.removeEventListener("pointermove", moveHandler, true);
document.removeEventListener("pointerup", upHandler);
SnappingManager.clearSnapLines();
+ batch.end();
});
AbortDrag = () => {
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
new file mode 100644
index 000000000..544a79e98
--- /dev/null
+++ b/src/client/util/GroupManager.scss
@@ -0,0 +1,136 @@
+@import "../views/globalCssVariables";
+
+.group-interface {
+ background-color: whitesmoke !important;
+ color: grey;
+ width: 450px;
+ height: 300px;
+
+ .dialogue-box {
+ width: 450;
+ height: 300;
+ }
+
+ button {
+ background: $lighter-alt-accent;
+ outline: none;
+ border-radius: 5px;
+ border: 0px;
+ color: #fcfbf7;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ padding: 10px;
+ margin: 10px;
+ transition: transform 0.2s;
+ margin: 2px;
+ }
+}
+
+.group-interface {
+ display: flex;
+ flex-direction: column;
+
+ .overlay {
+ transform: translate(-20px, -20px);
+ border-radius: 10px;
+ }
+
+ button {
+ width: 100%;
+ align-self: center;
+ background: $darker-alt-accent;
+ }
+
+ .delete-button {
+ background: rgb(227, 86, 86);
+ }
+
+ .close-button {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ cursor: pointer;
+ z-index: 999;
+ }
+
+ .group-heading {
+ letter-spacing: .5em;
+ }
+
+
+ .group-body {
+ display: flex;
+ justify-content: space-between;
+ max-height: 80%;
+
+ .group-create {
+ display: flex;
+ flex-direction: column;
+ flex-basis: 30%;
+ margin-left: 5px;
+
+ input {
+ border-radius: 5px;
+ border: none;
+ padding: 4px;
+ min-width: 100%;
+ margin: 4px 0 4px 0;
+ }
+
+ }
+
+ .group-content {
+ padding-left: 1em;
+ padding-right: 1em;
+ justify-content: space-around;
+ text-align: left;
+
+ overflow-y: auto;
+ width: 100%;
+
+ .group-row {
+ display: flex;
+ position: relative;
+ margin-bottom: 5px;
+ min-height: 40px;
+ border: 1px solid;
+ border-radius: 10px;
+ align-items: center;
+
+ .group-name {
+ position: relative;
+ max-width: 65%;
+ left: 10;
+ }
+
+ button {
+ position: absolute;
+ width: 30%;
+ right: 2;
+ margin-top: 0;
+ }
+ }
+
+ ::placeholder {
+ color: $intermediate-color;
+ }
+
+ input {
+ border-radius: 5px;
+ border: none;
+ padding: 4px;
+ min-width: 100%;
+ margin: 2px 0;
+ }
+
+ }
+ }
+
+ h1 {
+ color: $dark-color;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 120%;
+ }
+} \ No newline at end of file
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
new file mode 100644
index 000000000..7c68fc2a0
--- /dev/null
+++ b/src/client/util/GroupManager.tsx
@@ -0,0 +1,360 @@
+import * as React from "react";
+import { observable, action, runInAction, computed } from "mobx";
+import { SelectionManager } from "./SelectionManager";
+import MainViewModal from "../views/MainViewModal";
+import { observer } from "mobx-react";
+import { Doc, DocListCast, Opt } from "../../fields/Doc";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as fa from '@fortawesome/free-solid-svg-icons';
+import { library } from "@fortawesome/fontawesome-svg-core";
+import SharingManager, { User } from "./SharingManager";
+import { Utils } from "../../Utils";
+import * as RequestPromise from "request-promise";
+import Select from 'react-select';
+import "./GroupManager.scss";
+import { StrCast } from "../../fields/Types";
+import GroupMemberView from "./GroupMemberView";
+
+library.add(fa.faWindowClose);
+
+export interface UserOptions {
+ label: string;
+ value: string;
+}
+
+@observer
+export default class GroupManager extends React.Component<{}> {
+
+ static Instance: GroupManager;
+ @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not.
+ @observable private dialogueBoxOpacity: number = 1; // opacity of the dialogue box div of the MainViewModal.
+ @observable private overlayOpacity: number = 0.4; // opacity of the overlay div of the MainViewModal.
+ @observable private users: string[] = []; // list of users populated from the database.
+ @observable private selectedUsers: UserOptions[] | null = null; // list of users selected in the "Select users" dropdown.
+ @observable currentGroup: Opt<Doc>; // the currently selected group.
+ private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box.
+
+ constructor(props: Readonly<{}>) {
+ super(props);
+ GroupManager.Instance = this;
+ }
+
+ // sets up the list of users
+ componentDidMount() {
+ this.populateUsers().then(resolved => runInAction(() => this.users = resolved));
+ }
+
+ /**
+ * Fetches the list of users stored on the database and @returns a list of the emails.
+ */
+ populateUsers = async () => {
+ const userList: User[] = JSON.parse(await RequestPromise.get(Utils.prepend("/getUsers")));
+ const currentUserIndex = userList.findIndex(user => user.email === Doc.CurrentUserEmail);
+ currentUserIndex !== -1 && userList.splice(currentUserIndex, 1);
+ return userList.map(user => user.email);
+ }
+
+ /**
+ * @returns the options to be rendered in the dropdown menu to add users and create a group.
+ */
+ @computed get options() {
+ return this.users.map(user => ({ label: user, value: user }));
+ }
+
+ /**
+ * Makes the GroupManager visible.
+ */
+ @action
+ open = () => {
+ SelectionManager.DeselectAll();
+ this.isOpen = true;
+ }
+
+ /**
+ * Hides the GroupManager.
+ */
+ @action
+ close = () => {
+ this.isOpen = false;
+ this.currentGroup = undefined;
+ }
+
+ /**
+ * @returns the database of groups.
+ */
+ get GroupManagerDoc(): Doc | undefined {
+ return Doc.UserDoc().globalGroupDatabase as Doc;
+ }
+
+ /**
+ * @returns a list of all group documents.
+ */
+ private getAllGroups(): Doc[] {
+ const groupDoc = this.GroupManagerDoc;
+ return groupDoc ? DocListCast(groupDoc.data) : [];
+ }
+
+ /**
+ * @returns a group document based on the group name.
+ * @param groupName
+ */
+ private getGroup(groupName: string): Doc | undefined {
+ const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
+ return groupDoc;
+ }
+
+ /**
+ * @returns a readonly copy of a single group document
+ */
+ getGroupCopy(groupName: string): Doc | undefined {
+ const groupDoc = this.getGroup(groupName);
+ if (groupDoc) {
+ const { members, owners } = groupDoc;
+ return Doc.assign(new Doc, { groupName, members: StrCast(members), owners: StrCast(owners) });
+ }
+ return undefined;
+ }
+ /**
+ * @returns a readonly copy of the list of group documents
+ */
+ getAllGroupsCopy(): Doc[] {
+ return this.getAllGroups().map(({ groupName, owners, members }) =>
+ Doc.assign(new Doc, { groupName: (StrCast(groupName)), owners: (StrCast(owners)), members: (StrCast(members)) })
+ );
+ }
+
+ /**
+ * @returns the members of the admin group.
+ */
+ get adminGroupMembers(): string[] {
+ return this.getGroup("admin") ? JSON.parse(StrCast(this.getGroup("admin")!.members)) : "";
+ }
+
+ /**
+ * @returns a boolean indicating whether the current user has access to edit group documents.
+ * @param groupDoc
+ */
+ hasEditAccess(groupDoc: Doc): boolean {
+ if (!groupDoc) return false;
+ const accessList: string[] = JSON.parse(StrCast(groupDoc.owners));
+ return accessList.includes(Doc.CurrentUserEmail) || this.adminGroupMembers?.includes(Doc.CurrentUserEmail);
+ }
+
+ /**
+ * Helper method that sets up the group document.
+ * @param groupName
+ * @param memberEmails
+ */
+ createGroupDoc(groupName: string, memberEmails: string[] = []) {
+ const groupDoc = new Doc;
+ groupDoc.groupName = groupName;
+ groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]);
+ groupDoc.members = JSON.stringify(memberEmails);
+ this.addGroup(groupDoc);
+ }
+
+ /**
+ * Helper method that adds a group document to the database of group documents and @returns whether it was successfully added or not.
+ * @param groupDoc
+ */
+ addGroup(groupDoc: Doc): boolean {
+ if (this.GroupManagerDoc) {
+ Doc.AddDocToList(this.GroupManagerDoc, "data", groupDoc);
+ return true;
+ }
+ return false;
+ }
+
+ /**
+ * Deletes a group from the database of group documents and @returns whether the group was deleted or not.
+ * @param group
+ */
+ deleteGroup(group: Doc): boolean {
+ if (group) {
+ if (this.GroupManagerDoc && this.hasEditAccess(group)) {
+ Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
+ SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
+ if (group === this.currentGroup) {
+ runInAction(() => this.currentGroup = undefined);
+ }
+ return true;
+ }
+ }
+ return false;
+ }
+
+ /**
+ * Adds a member to a group.
+ * @param groupDoc
+ * @param email
+ */
+ addMemberToGroup(groupDoc: Doc, email: string) {
+ if (this.hasEditAccess(groupDoc)) {
+ const memberList: string[] = JSON.parse(StrCast(groupDoc.members));
+ !memberList.includes(email) && memberList.push(email);
+ groupDoc.members = JSON.stringify(memberList);
+ }
+ }
+
+ /**
+ * Removes a member from the group.
+ * @param groupDoc
+ * @param email
+ */
+ removeMemberFromGroup(groupDoc: Doc, email: string) {
+ if (this.hasEditAccess(groupDoc)) {
+ const memberList: string[] = JSON.parse(StrCast(groupDoc.members));
+ const index = memberList.indexOf(email);
+ index !== -1 && memberList.splice(index, 1);
+ groupDoc.members = JSON.stringify(memberList);
+ }
+ }
+
+ /**
+ * Handles changes in the users selected in the "Select users" dropdown.
+ * @param selectedOptions
+ */
+ @action
+ handleChange = (selectedOptions: any) => {
+ this.selectedUsers = selectedOptions as UserOptions[];
+ }
+
+ /**
+ * Creates the group when the enter key has been pressed (when in the input).
+ * @param e
+ */
+ handleKeyDown = (e: React.KeyboardEvent) => {
+ e.key === "Enter" && this.createGroup();
+ }
+
+ /**
+ * Handles the input of required fields in the setup of a group and resets the relevant variables.
+ */
+ @action
+ createGroup = () => {
+ if (!this.inputRef.current?.value) {
+ alert("Please enter a group name");
+ return;
+ }
+ if (this.getAllGroups().find(group => group.groupName === this.inputRef.current!.value)) { // why do I need a null check here?
+ alert("Please select a unique group name");
+ return;
+ }
+ this.createGroupDoc(this.inputRef.current.value, this.selectedUsers?.map(user => user.value));
+ this.selectedUsers = null;
+ this.inputRef.current.value = "";
+ }
+
+ /**
+ * A getter that @returns the interface rendered to view an individual group.
+ */
+ private get editingInterface() {
+ const members: string[] = this.currentGroup ? JSON.parse(StrCast(this.currentGroup.members)) : [];
+ const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(StrCast(this.currentGroup!.members)) as string[]).includes(option.value)) : [];
+ return (!this.currentGroup ? null :
+ <div className="editing-interface">
+ <div className="editing-header">
+ <b>{this.currentGroup.groupName}</b>
+ <div className={"close-button"} onClick={action(() => this.currentGroup = undefined)}>
+ <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+ </div>
+
+ {this.hasEditAccess(this.currentGroup) ?
+ <div className="group-buttons">
+ <div className="add-member-dropdown">
+ <Select
+ // isMulti={true}
+ isSearchable={true}
+ options={options}
+ onChange={selectedOption => this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)}
+ placeholder={"Add members"}
+ value={null}
+ closeMenuOnSelect={true}
+ />
+ </div>
+ <button onClick={() => this.deleteGroup(this.currentGroup!)}>Delete group</button>
+ </div> :
+ null}
+ </div>
+ <div className="editing-contents">
+ {members.map(member => (
+ <div className="editing-row">
+ <div className="user-email">
+ {member}
+ </div>
+ {this.hasEditAccess(this.currentGroup!) ? <button onClick={() => this.removeMemberFromGroup(this.currentGroup!, member)}> Remove </button> : null}
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+
+ }
+
+ /**
+ * A getter that @returns the main interface for the GroupManager.
+ */
+ private get groupInterface() {
+ return (
+ <div className="group-interface">
+ {/* <MainViewModal
+ contents={this.editingInterface}
+ isDisplayed={this.currentGroup ? true : false}
+ interactive={true}
+ dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+ overlayDisplayedOpacity={this.overlayOpacity}
+ /> */}
+ {this.currentGroup ?
+ <GroupMemberView
+ group={this.currentGroup}
+ onCloseButtonClick={() => this.currentGroup = undefined}
+ />
+ : null}
+ <div className="group-heading">
+ <h1>Groups</h1>
+ <div className={"close-button"} onClick={this.close}>
+ <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+ </div>
+ </div>
+ <div className="group-body">
+ <div className="group-create">
+ <button onClick={this.createGroup}>Create group</button>
+ <input ref={this.inputRef} onKeyDown={this.handleKeyDown} type="text" placeholder="Group name" />
+ <Select
+ isMulti={true}
+ isSearchable={true}
+ options={this.options}
+ onChange={this.handleChange}
+ placeholder={"Select users"}
+ value={this.selectedUsers}
+ closeMenuOnSelect={false}
+ />
+ </div>
+ <div className="group-content">
+ {this.getAllGroups().map(group =>
+ <div className="group-row">
+ <div className="group-name">{group.groupName}</div>
+ <button onClick={action(() => this.currentGroup = group)}>
+ {this.hasEditAccess(group) ? "Edit" : "View"}
+ </button>
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ render() {
+ return (
+ <MainViewModal
+ contents={this.groupInterface}
+ isDisplayed={this.isOpen}
+ interactive={true}
+ dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+ overlayDisplayedOpacity={this.overlayOpacity}
+ />
+ );
+ }
+
+} \ No newline at end of file
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
new file mode 100644
index 000000000..7833c485f
--- /dev/null
+++ b/src/client/util/GroupMemberView.scss
@@ -0,0 +1,68 @@
+@import "../views/globalCssVariables";
+
+.editing-interface {
+ background-color: whitesmoke !important;
+ color: grey;
+ width: 100%;
+ height: 100%;
+
+ button {
+ background: $darker-alt-accent;
+ outline: none;
+ border-radius: 5px;
+ border: 0px;
+ color: #fcfbf7;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ padding: 10px;
+ margin: 10px;
+ transition: transform 0.2s;
+ margin: 2px;
+ }
+
+ .memberView-closeButton {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ cursor: pointer;
+ z-index: 1000;
+ }
+
+ .editing-header {
+ margin-bottom: 5;
+
+ .group-buttons {
+ display: flex;
+ margin-top: 5;
+
+ .add-member-dropdown {
+ width: 100%;
+ margin: 0 5;
+ }
+ }
+ }
+
+ .editing-contents {
+ overflow-y: auto;
+ // max-height: 67%;
+ height: 67%;
+ width: 100%;
+
+ .editing-row {
+ display: flex;
+ align-items: center;
+ // border: 1px solid;
+ // border-radius: 10px;
+
+ .user-email {
+ // position: relative;
+ min-width: 65%;
+ word-break: break-all;
+ padding: 0 5;
+ }
+ }
+ }
+
+
+} \ No newline at end of file
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
new file mode 100644
index 000000000..b2d75158e
--- /dev/null
+++ b/src/client/util/GroupMemberView.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+import MainViewModal from "../views/MainViewModal";
+import { observer } from "mobx-react";
+import GroupManager, { UserOptions } from "./GroupManager";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { StrCast } from "../../fields/Types";
+import { action } from "mobx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as fa from '@fortawesome/free-solid-svg-icons';
+import Select from "react-select";
+import { Doc, Opt } from "../../fields/Doc";
+import "./GroupMemberView.scss";
+
+library.add(fa.faWindowClose);
+
+interface GroupMemberViewProps {
+ group: Doc;
+ onCloseButtonClick: () => void;
+}
+
+@observer
+export default class GroupMemberView extends React.Component<GroupMemberViewProps> {
+
+ private get editingInterface() {
+ const members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
+ const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
+ return (!this.props.group ? null :
+ <div className="editing-interface">
+ <div className="editing-header">
+ <b>{this.props.group.groupName}</b>
+ <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
+ <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+ </div>
+
+ {GroupManager.Instance.hasEditAccess(this.props.group) ?
+ <div className="group-buttons">
+ <div className="add-member-dropdown">
+ <Select
+ isSearchable={true}
+ options={options}
+ onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)}
+ placeholder={"Add members"}
+ value={null}
+ closeMenuOnSelect={true}
+ />
+ </div>
+ <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
+ </div> :
+ null}
+ </div>
+ <div className="editing-contents">
+ {members.map(member => (
+ <div className="editing-row">
+ <div className="user-email">
+ {member}
+ </div>
+ {GroupManager.Instance.hasEditAccess(this.props.group) ? <button onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}> Remove </button> : null}
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+
+ }
+
+ render() {
+ return <MainViewModal
+ isDisplayed={true}
+ interactive={true}
+ contents={this.editingInterface}
+ />;
+ }
+
+
+} \ No newline at end of file
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 6ab7bcc87..07adbb8b1 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -27,7 +27,7 @@ export namespace InteractionUtils {
export interface MultiTouchEventDisposer { (): void; }
/**
- *
+ *
* @param element - element to turn into a touch target
* @param startFunc - event handler, typically Touchable.onTouchStart (classes that inherit touchable can pass in this.onTouchStart)
*/
@@ -120,7 +120,7 @@ export namespace InteractionUtils {
const dashArray = String(Number(width) * Number(dash));
const defGuid = Utils.GenerateGuid();
const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth)));
- return (<svg fill={!fill || fill === "none" ? color : fill}> {/* setting the svg fill sets the arrowStart fill */}
+ return (<svg fill={color}> {/* setting the svg fill sets the arrowStart fill */}
{nodefs ? (null) : <defs>
{arrowStart !== "dot" && arrowEnd !== "dot" ? (null) : <marker id={`dot${defGuid}`} orient="auto" overflow="visible">
<circle r={1} fill="context-stroke" />
@@ -279,8 +279,8 @@ export namespace InteractionUtils {
/**
* Returns euclidean distance between two points
- * @param pt1
- * @param pt2
+ * @param pt1
+ * @param pt2
*/
export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2));
@@ -411,4 +411,4 @@ export namespace InteractionUtils {
// }
// }
}
-} \ No newline at end of file
+}
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 0aec81ab0..6da581f35 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -1,4 +1,4 @@
-import { Doc, DocListCast } from "../../fields/Doc";
+import { Doc, DocListCast, Opt } from "../../fields/Doc";
import { List } from "../../fields/List";
import { listSpec } from "../../fields/Schema";
import { Cast, StrCast } from "../../fields/Types";
@@ -23,6 +23,10 @@ import { Scripting } from "./Scripting";
export class LinkManager {
private static _instance: LinkManager;
+
+
+ public static currentLink: Opt<Doc>;
+
public static get Instance(): LinkManager {
return this._instance || (this._instance = new this());
}
@@ -41,24 +45,17 @@ export class LinkManager {
}
public addLink(linkDoc: Doc): boolean {
- const linkList = LinkManager.Instance.getAllLinks();
- linkList.push(linkDoc);
if (LinkManager.Instance.LinkManagerDoc) {
- LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList);
+ Doc.AddDocToList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
return true;
}
return false;
}
public deleteLink(linkDoc: Doc): boolean {
- const linkList = LinkManager.Instance.getAllLinks();
- const index = LinkManager.Instance.getAllLinks().indexOf(linkDoc);
- if (index > -1) {
- linkList.splice(index, 1);
- if (LinkManager.Instance.LinkManagerDoc) {
- LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList);
- return true;
- }
+ if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) {
+ Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
+ return true;
}
return false;
}
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 5679c0a14..1ac68480e 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -74,7 +74,7 @@ export namespace SearchUtil {
const docs = ids.map((id: string) => docMap[id]).map(doc => doc as Doc);
for (let i = 0; i < ids.length; i++) {
const testDoc = docs[i];
- if (testDoc instanceof Doc && testDoc.type !== DocumentType.KVP && (options.allowAliases || theDocs.findIndex(d => Doc.AreProtosEqual(d, testDoc)) === -1)) {
+ if (testDoc instanceof Doc && testDoc.type !== DocumentType.KVP && (options.allowAliases || testDoc.proto === undefined || theDocs.findIndex(d => Doc.AreProtosEqual(d, testDoc)) === -1)) {
theDocs.push(testDoc);
theLines.push([]);
}
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 6513cb223..13c65042c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -41,6 +41,7 @@
position: absolute;
right: 1em;
top: 1em;
+ cursor: pointer;
}
.settings-heading {
@@ -133,4 +134,25 @@
}
+}
+
+@media only screen and (max-device-width: 480px) {
+ .settings-interface {
+ width: 80vw;
+ height: 400px;
+ }
+
+ .settings-interface .settings-body .settings-content input {
+ font-size: 30;
+ }
+
+ .settings-interface button {
+ width: 100%;
+ font-size: 30px;
+ background: #b2cef8;
+ }
+
+ .settings-interface .settings-heading {
+ font-size: 25;
+ }
} \ No newline at end of file
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index dec9f751a..fcbc05f8a 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,13 +1,75 @@
+@import "../views/globalCssVariables";
+
.sharing-interface {
display: flex;
flex-direction: column;
+ width: 730px;
+
+ .dialogue-box {
+ width: 450;
+ height: 300;
+ }
+
+ .overlay {
+ transform: translate(-20px, -20px);
+ }
+
+ .sharing-contents {
+ display: flex;
+
+ button {
+ background: $darker-alt-accent;
+ outline: none;
+ border-radius: 5px;
+ border: 0px;
+ color: #fcfbf7;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ padding: 0 10;
+ margin: 0 5;
+ transition: transform 0.2s;
+ height: 25;
+ }
+
+ .individual-container,
+ .group-container {
+ width: 50%;
+
+ .share-groups,
+ .share-individual {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .groups-list,
+ .users-list {
+ font-style: italic;
+ background: white;
+ border: 1px solid black;
+ padding-left: 10px;
+ padding-right: 10px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ text-align: left;
+ display: flex;
+ align-content: center;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ color: red;
+ height: 150px;
+ margin: 0 2;
+ }
+ }
+ }
.focus-span {
text-decoration: underline;
}
p {
- font-size: 20px;
+ font-size: 15px;
text-align: left;
font-style: italic;
padding: 0;
@@ -36,33 +98,10 @@
}
}
- .share-individual {
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- .users-list {
- font-style: italic;
- background: white;
- border: 1px solid black;
- padding-left: 10px;
- padding-right: 10px;
- max-height: 200px;
- overflow: scroll;
- height: -webkit-fill-available;
- text-align: left;
- display: flex;
- align-content: center;
- align-items: center;
- text-align: center;
- justify-content: center;
- color: red;
- }
-
.container {
- display: block;
+ display: flex;
position: relative;
- margin-top: 10px;
+ margin-top: 5px;
margin-bottom: 10px;
font-size: 22px;
-webkit-user-select: none;
@@ -74,18 +113,27 @@
max-width: 700px;
text-align: left;
font-style: normal;
- font-size: 15;
+ font-size: 14;
font-weight: normal;
padding: 0;
+ align-items: baseline;
.padding {
- padding: 0 0 0 20px;
+ padding: 0 10px 0 0;
color: black;
}
.permissions-dropdown {
outline: none;
+ height: 25;
}
+
+ .edit-actions {
+ display: flex;
+ position: absolute;
+ right: 51.5%;
+ }
+
}
.no-users {
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index dc67145fc..127ee33ce 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -17,6 +17,8 @@ import { SelectionManager } from "./SelectionManager";
import { DocumentManager } from "./DocumentManager";
import { CollectionView } from "../views/collections/CollectionView";
import { DictationOverlay } from "../views/DictationOverlay";
+import GroupManager from "./GroupManager";
+import GroupMemberView from "./GroupMemberView";
library.add(fa.faCopy);
@@ -28,17 +30,30 @@ export interface User {
export enum SharingPermissions {
None = "Not Shared",
View = "Can View",
- Comment = "Can Comment",
+ Add = "Can Add",
Edit = "Can Edit"
}
const ColorMapping = new Map<string, string>([
[SharingPermissions.None, "red"],
[SharingPermissions.View, "maroon"],
- [SharingPermissions.Comment, "blue"],
+ [SharingPermissions.Add, "blue"],
[SharingPermissions.Edit, "green"]
]);
+const HierarchyMapping = new Map<string, string>([
+ [SharingPermissions.None, "0"],
+ [SharingPermissions.View, "1"],
+ [SharingPermissions.Add, "2"],
+ [SharingPermissions.Edit, "3"],
+
+ ["0", SharingPermissions.None],
+ ["1", SharingPermissions.View],
+ ["2", SharingPermissions.Add],
+ ["3", SharingPermissions.Edit]
+
+]);
+
const SharingKey = "sharingPermissions";
const PublicKey = "publicLinkPermissions";
const DefaultColor = "black";
@@ -55,11 +70,13 @@ export default class SharingManager extends React.Component<{}> {
public static Instance: SharingManager;
@observable private isOpen = false;
@observable private users: ValidatedUser[] = [];
+ @observable private groups: Doc[] = [];
@observable private targetDoc: Doc | undefined;
@observable private targetDocView: DocumentView | undefined;
@observable private copied = false;
@observable private dialogueBoxOpacity = 1;
@observable private overlayOpacity = 0.4;
+ @observable private groupToView: Opt<Doc>;
private get linkVisible() {
return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
@@ -76,6 +93,8 @@ export default class SharingManager extends React.Component<{}> {
this.sharingDoc = new Doc;
}
}));
+
+ runInAction(() => this.groups = GroupManager.Instance.getAllGroupsCopy());
}
public close = action(() => {
@@ -121,26 +140,71 @@ export default class SharingManager extends React.Component<{}> {
return Promise.all(evaluating);
}
- setInternalSharing = async (recipient: ValidatedUser, state: string) => {
+ setInternalGroupSharing = (group: Doc, permission: string) => {
+ const members: string[] = JSON.parse(StrCast(group.members));
+ const users: ValidatedUser[] = this.users.filter(user => members.includes(user.user.email));
+
+ const sharingDoc = this.sharingDoc!;
+ if (permission === SharingPermissions.None) {
+ const metadata = sharingDoc[StrCast(group.groupName)];
+ if (metadata) sharingDoc[StrCast(group.groupName)] = undefined;
+ }
+ else {
+ sharingDoc[StrCast(group.groupName)] = permission;
+ }
+
+ users.forEach(user => {
+ this.setInternalSharing(user, permission, group);
+ });
+ }
+
+ setInternalSharing = async (recipient: ValidatedUser, state: string, group: Opt<Doc>) => {
const { user, notificationDoc } = recipient;
const target = this.targetDoc!;
const manager = this.sharingDoc!;
const key = user.userDocumentId;
- if (state === SharingPermissions.None) {
- const metadata = (await DocCastAsync(manager[key]));
- if (metadata) {
- const sharedAlias = (await DocCastAsync(metadata.sharedAlias))!;
- Doc.RemoveDocFromList(notificationDoc, storage, sharedAlias);
- manager[key] = undefined;
- }
- } else {
- const sharedAlias = Doc.MakeAlias(target);
- Doc.AddDocToList(notificationDoc, storage, sharedAlias);
- const metadata = new Doc;
- metadata.permissions = state;
- metadata.sharedAlias = sharedAlias;
- manager[key] = metadata;
+
+ let metadata = await DocCastAsync(manager[key]);
+ const permissions: { [key: string]: number } = metadata?.permissions ? JSON.parse(StrCast(metadata.permissions)) : {};
+ permissions[StrCast(group ? group.groupName : Doc.CurrentUserEmail)] = parseInt(HierarchyMapping.get(state)!);
+ const max = Math.max(...Object.values(permissions));
+
+ // let max = 0;
+ // const keys: string[] = [];
+ // for (const [key, value] of Object.entries(permissions)) {
+ // if (value === max && max !== 0) {
+ // keys.push(key);
+ // }
+ // else if (value > max) {
+ // keys.splice(0, keys.length);
+ // keys.push(key);
+ // max = value;
+ // }
+ // }
+
+ switch (max) {
+ case 0:
+ if (metadata) {
+ const sharedAlias = (await DocCastAsync(metadata.sharedAlias))!;
+ Doc.RemoveDocFromList(notificationDoc, storage, sharedAlias);
+ manager[key] = undefined;
+ }
+ break;
+
+ case 1: case 2: case 3:
+ if (!metadata) {
+ metadata = new Doc;
+ const sharedAlias = Doc.MakeAlias(target);
+ Doc.AddDocToList(notificationDoc, storage, sharedAlias);
+ metadata.sharedAlias = sharedAlias;
+ manager[key] = metadata;
+ }
+ metadata.permissions = JSON.stringify(permissions);
+ // metadata.usersShared = JSON.stringify(keys);
+ break;
}
+
+ if (metadata) metadata.maxPermission = HierarchyMapping.get(`${max}`);
}
private setExternalSharing = (state: string) => {
@@ -211,17 +275,27 @@ export default class SharingManager extends React.Component<{}> {
if (!sharingDoc) {
return SharingPermissions.None;
}
- const metadata = sharingDoc[userKey] as Doc;
+ const metadata = sharingDoc[userKey] as Doc | string;
if (!metadata) {
return SharingPermissions.None;
}
- return StrCast(metadata.permissions, SharingPermissions.None);
+ return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None);
}
private get sharingInterface() {
const existOtherUsers = this.users.length > 0;
+ const existGroups = this.groups.length > 0;
+
+ // const manager = this.sharingDoc!;
+
return (
<div className={"sharing-interface"}>
+ {this.groupToView ?
+ <GroupMemberView
+ group={this.groupToView}
+ onCloseButtonClick={action(() => this.groupToView = undefined)}
+ /> :
+ null}
<p className={"share-link"}>Manage the public link to {this.focusOn("this document...")}</p>
{!this.linkVisible ? (null) :
<div className={"link-container"}>
@@ -252,31 +326,77 @@ export default class SharingManager extends React.Component<{}> {
</select>
</div>
<div className={"hr-substitute"} />
- <p className={"share-individual"}>Privately share {this.focusOn("this document")} with an individual...</p>
- <div className={"users-list"} style={{ display: existOtherUsers ? "block" : "flex", minHeight: existOtherUsers ? undefined : 200 }}>
- {!existOtherUsers ? "There are no other users in your database." :
- this.users.map(({ user, notificationDoc }) => {
- const userKey = user.userDocumentId;
- const permissions = this.computePermissions(userKey);
- const color = ColorMapping.get(permissions);
- return (
- <div
- key={userKey}
- className={"container"}
- >
- <select
- className={"permissions-dropdown"}
- value={permissions}
- style={{ color, borderColor: color }}
- onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)}
- >
- {this.sharingOptions}
- </select>
- <span className={"padding"}>{user.email}</span>
- </div>
- );
- })
- }
+ <div className="sharing-contents">
+ <div className={"individual-container"}>
+ <p className={"share-individual"}>Privately share {this.focusOn("this document")} with an individual...</p>
+ <div className={"users-list"} style={{ display: existOtherUsers ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
+ {!existOtherUsers ? "There are no other users in your database." :
+ this.users.map(({ user, notificationDoc }) => { // can't use async here
+ const userKey = user.userDocumentId;
+ const permissions = this.computePermissions(userKey);
+ const color = ColorMapping.get(permissions);
+
+ // console.log(manager);
+ // const metadata = manager[userKey] as Doc;
+ // const usersShared = StrCast(metadata?.usersShared, "");
+ // console.log(usersShared)
+
+
+ return (
+ <div
+ key={userKey}
+ className={"container"}
+ >
+ <span className={"padding"}>{user.email}</span>
+ {/* <div className={"shared-by"}>{usersShared}</div> */}
+ <div className="edit-actions">
+ <select
+ className={"permissions-dropdown"}
+ value={permissions}
+ style={{ color, borderColor: color }}
+ onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value, undefined)}
+ >
+ {this.sharingOptions}
+ </select>
+ </div>
+ </div>
+ );
+ })
+ }
+ </div>
+ </div>
+ <div className={"group-container"}>
+ <p className={"share-groups"}>Privately share {this.focusOn("this document")} with a group...</p>
+ <div className={"groups-list"} style={{ display: existGroups ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
+ {!existGroups ? "There are no groups in your database." :
+ this.groups.map(group => {
+ const permissions = this.computePermissions(StrCast(group.groupName));
+ const color = ColorMapping.get(permissions);
+ return (
+ <div
+ key={StrCast(group.groupName)}
+ className={"container"}
+ >
+ <span className={"padding"}>{group.groupName}</span>
+ <div className="edit-actions">
+ <select
+ className={"permissions-dropdown"}
+ value={permissions}
+ style={{ color, borderColor: color }}
+ onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
+ >
+ {this.sharingOptions}
+ </select>
+ <button onClick={action(() => this.groupToView = group)}>Edit</button>
+ </div>
+ </div>
+ );
+ })
+
+ }
+
+ </div>
+ </div>
</div>
<div className={"close-button"} onClick={this.close}>Done</div>
</div>
@@ -284,6 +404,7 @@ export default class SharingManager extends React.Component<{}> {
}
render() {
+ // console.log(this.sharingDoc);
return (
<MainViewModal
contents={this.sharingInterface}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-27 10:35:21 +0000