aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/CurrentUserUtils.ts254
-rw-r--r--src/client/util/GroupManager.scss1
-rw-r--r--src/client/util/GroupManager.tsx96
-rw-r--r--src/client/util/GroupMemberView.scss5
-rw-r--r--src/client/util/GroupMemberView.tsx11
-rw-r--r--src/client/util/InteractionUtils.tsx46
-rw-r--r--src/client/util/Scripting.ts2
-rw-r--r--src/client/util/SearchUtil.ts2
-rw-r--r--src/client/util/SelectionManager.ts3
-rw-r--r--src/client/util/SettingsManager.scss260
-rw-r--r--src/client/util/SettingsManager.tsx201
-rw-r--r--src/client/util/SharingManager.scss65
-rw-r--r--src/client/util/SharingManager.tsx357
-rw-r--r--src/client/util/type_decls.d5
14 files changed, 891 insertions, 417 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 6d752832a..37ffcb78e 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -8,11 +8,11 @@ import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc";
import { List } from "../../fields/List";
import { listSpec } from "../../fields/Schema";
import { ScriptField, ComputedField } from "../../fields/ScriptField";
-import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types";
+import { Cast, PromiseValue, StrCast, NumCast, BoolCast } 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,12 +38,14 @@ export class CurrentUserUtils {
@observable public static GuestWorkspace: Doc | undefined;
@observable public static GuestMobile: Doc | undefined;
+ @observable public static propertiesWidth: number = 0;
+
// sets up the default User Templates - slideView, queryView, descriptionView
static setupUserTemplateButtons(doc: Doc) {
if (doc["template-button-query"] === undefined) {
const queryTemplate = Docs.Create.MulticolumnDocument(
[
- Docs.Create.QueryDocument({ title: "query", _height: 200 }),
+ Docs.Create.SearchDocument({ _viewType: CollectionViewType.Schema, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }),
Docs.Create.FreeformDocument([], { title: "data", _height: 100 })
],
{ _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true }
@@ -246,6 +248,8 @@ export class CurrentUserUtils {
if (doc["template-buttons"] === undefined) {
doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument(requiredTypes, {
title: "Advanced Item Prototypes", _xMargin: 0, _showTitle: "title",
+ hidden: ComputedField.MakeFunction("self.target.noviceMode") as any,
+ target: doc,
_autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
}));
@@ -411,16 +415,13 @@ export class CurrentUserUtils {
if (doc.emptyButton === undefined) {
doc.emptyButton = Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title: "Button" });
}
- if (doc.emptySearch === undefined) {
- doc.emptySearch = Docs.Create.QueryDocument({ _width: 200, title: "empty search" });
- }
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: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
+ doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 400, UseCors: true });
}
if (doc.activeMobileMenu === undefined) {
this.setupActiveMobileMenu(doc);
@@ -429,7 +430,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 },
@@ -465,7 +466,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,
@@ -492,6 +493,70 @@ export class CurrentUserUtils {
return doc.myItemCreators as Doc;
}
+ static menuBtnDescriptions(): {
+ title: string, icon: string, click: string,
+ }[] {
+ return [
+ { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' },
+ { 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: "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")' },
+ ];
+ }
+
+ static setupSearchPanel(doc: Doc) {
+ if (doc["search-panel"] === undefined) {
+ doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({
+ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true,
+ childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack",
+ })) as any as Doc;
+ }
+ }
+ static setupMenuPanel(doc: Doc) {
+ if (doc.menuStack === undefined) {
+ const menuBtns = CurrentUserUtils.menuBtnDescriptions().map(({ title, icon, click }) =>
+ Docs.Create.FontIconDocument({
+ icon,
+ iconShape: "square",
+ title,
+ _backgroundColor: "black",
+ stayInCollection: true,
+ childDropAction: "same",
+ _width: 60,
+ _height: 60,
+ 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,
+ _yPadding: 0, _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled",
+ }));
+ }
+ // this resets all sidebar buttons to being deactivated
+ PromiseValue(Cast(doc.menuStack, Doc)).then(stack => {
+ stack && PromiseValue(stack.data).then(btns => {
+ DocListCastAsync(btns).then(bts => bts?.forEach(btn => {
+ btn.color = "white";
+ btn._backgroundColor = "";
+ }));
+ });
+ });
+ return doc.menuStack as Doc;
+ }
+
+
// Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu
static setupActiveMobileMenu(doc: Doc) {
if (doc.activeMobileMenu === undefined) {
@@ -590,17 +655,15 @@ 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) {
+ static async setupToolsBtnPanel(doc: Doc) {
// setup a masonry view of all he creators
const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc);
+ doc["tabs-button-tools"] = undefined;
+
if (doc.myCreators === undefined) {
doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], {
title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
@@ -615,131 +678,115 @@ 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", title: "tools stack", forceActive: true
+ title: "sidebar-tools", _width: 500, _yMargin: 20, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, forceActive: true
})) as any as Doc;
- 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,
- 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 Doc).sourcePanel; // prefetch sourcePanel
- return doc["tabs-button-tools"] as Doc;
}
static setupWorkspaces(doc: Doc) {
// setup workspaces library item
+ doc.myWorkspaces === undefined;
if (doc.myWorkspaces === undefined) {
doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], {
- title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true,
+ 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"]);
+ 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"]);
- return doc.myWorkspaces as Doc;
+ const workspaces = 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) {
doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], {
title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false,
- childDropAction: "alias", targetDropAction: "same", stayInCollection: true,
+ childDropAction: "alias", targetDropAction: "same", stayInCollection: true, treeViewOpen: true,
}));
}
- return doc.myCatalog as Doc;
+
+ if (doc["sidebar-catalog"] === undefined) {
+ const catalog = 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
+ doc.myRecentlyClosed === undefined;
if (doc.myRecentlyClosed === undefined) {
doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], {
- title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true,
+ title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, treeViewOpen: true, stayInCollection: true,
}));
}
// 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"]);
- 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,
+ const recentlyClosed = doc.myRecentlyClosed as Doc;
+
+ 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) {
- 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")
- }));
+
+ 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 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);
- const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
- const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
- const 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([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",
- }));
- (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn });
- }
+ CurrentUserUtils.setupSidebarContainer(doc);
+ await CurrentUserUtils.setupToolsBtnPanel(doc);
+ CurrentUserUtils.setupWorkspaces(doc);
+ CurrentUserUtils.setupCatalog(doc);
+ CurrentUserUtils.setupRecentlyClosed(doc);
+ CurrentUserUtils.setupUserDoc(doc);
}
static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
@@ -749,7 +796,7 @@ export class CurrentUserUtils {
})) as any as Doc
static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({
- ...opts, dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100
+ ...opts, dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 40, _nativeHeight: 40, _width: 40, _height: 40
})) as any as Doc
/// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window
@@ -773,6 +820,11 @@ export class CurrentUserUtils {
// the initial presentation Doc to use
static setupDefaultPresentation(doc: Doc) {
+ if (doc["template-presentation"] === undefined) {
+ doc["template-presentation"] = new PrefetchProxy(Docs.Create.PresElementBoxDocument({
+ title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data"
+ }));
+ }
if (doc.activePresentation === undefined) {
doc.activePresentation = Docs.Create.PresDocument(new List<Doc>(), {
title: "Presentation", _viewType: CollectionViewType.Stacking, targetDropAction: "alias",
@@ -782,9 +834,9 @@ 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: "Mobile Uploads" }));
+ static setupSharingSidebar(doc: Doc) {
+ if (doc["sidebar-sharing"] === undefined) {
+ doc["sidebar-sharing"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Shared Documents", childDropAction: "alias" }));
}
}
@@ -848,13 +900,19 @@ export class CurrentUserUtils {
doc.activeDash = StrCast(doc.activeDash, "0");
doc.fontSize = StrCast(doc.fontSize, "12pt");
doc.fontFamily = StrCast(doc.fontFamily, "Arial");
+ doc.fontColor = StrCast(doc.fontColor, "black");
+ doc.fontHighlight = StrCast(doc.fontHighlight, "");
+ doc.defaultColor = StrCast(doc.defaultColor, "white");
+ doc.noviceMode = BoolCast(doc.noviceMode, true);
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.setupSharingSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing
this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
+ this.setupMenuPanel(doc);
+ this.setupSearchPanel(doc);
this.setupOverlays(doc); // documents in overlay layer
this.setupDockedButtons(doc); // the bottom bar of font icons
this.setupDefaultPresentation(doc); // presentation that's initially triggered
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 51e4fa9e2..9438bdd72 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -92,6 +92,7 @@
.sort-groups {
text-align: left;
margin-left: 5;
+ width: 50px;
cursor: pointer;
}
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 72fba5c1b..277e96a89 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -18,8 +18,11 @@ import { setGroups } from "../../fields/util";
import { DocServer } from "../DocServer";
import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
-library.add(fa.faPlus, fa.faTimes, fa.faInfoCircle);
+library.add(fa.faPlus, fa.faTimes, fa.faInfoCircle, fa.faCaretUp, fa.faCaretRight, fa.faCaretDown);
+/**
+ * Interface for options for the react-select component
+ */
export interface UserOptions {
label: string;
value: string;
@@ -30,17 +33,16 @@ 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.
@observable private createGroupModalOpen: boolean = false;
private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box.
- private createGroupButtonRef: React.RefObject<HTMLButtonElement> = React.createRef();
- private currentUserGroups: string[] = [];
+ private createGroupButtonRef: React.RefObject<HTMLButtonElement> = React.createRef(); // the ref for the group creation button
+ private currentUserGroups: string[] = []; // the list of groups the current user is a member of
@observable private buttonColour: "#979797" | "black" = "#979797";
@observable private groupSort: "ascending" | "descending" | "none" = "none";
+ private populating: boolean = false;
@@ -49,6 +51,9 @@ export default class GroupManager extends React.Component<{}> {
GroupManager.Instance = this;
}
+ /**
+ * Populates the list of users and groups.
+ */
componentDidMount() {
this.populateUsers();
this.populateGroups();
@@ -58,33 +63,35 @@ export default class GroupManager extends React.Component<{}> {
* Fetches the list of users stored on the database.
*/
populateUsers = async () => {
- runInAction(() => this.users = []);
- const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
- const raw = JSON.parse(userList) as User[];
- const evaluating = raw.map(async user => {
- // const isCandidate = user.email !== Doc.CurrentUserEmail;
- // if (isCandidate) {
- const userDocument = await DocServer.GetRefField(user.userDocumentId);
- if (userDocument instanceof Doc) {
- const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
- runInAction(() => {
- if (notificationDoc instanceof Doc) {
- this.users.push(user.email);
- }
- });
- }
- // }
- });
- return Promise.all(evaluating);
+ if (!this.populating) {
+ this.populating = true;
+ runInAction(() => this.users = []);
+ const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
+ const raw = JSON.parse(userList) as User[];
+ const evaluating = raw.map(async user => {
+ const userDocument = await DocServer.GetRefField(user.userDocumentId);
+ if (userDocument instanceof Doc) {
+ const notificationDoc = await Cast(userDocument["sidebar-sharing"], Doc);
+ runInAction(() => {
+ if (notificationDoc instanceof Doc) {
+ this.users.push(user.email);
+ }
+ });
+ }
+ });
+ return Promise.all(evaluating).then(() => this.populating = false);
+ }
}
+ /**
+ * Populates the list of groups the current user is a member of and sets this list to be used in the GetEffectiveAcl in util.ts
+ */
populateGroups = () => {
DocListCastAsync(this.GroupManagerDoc?.data).then(groups => {
groups?.forEach(group => {
const members: string[] = JSON.parse(StrCast(group.members));
if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(StrCast(group.groupName));
});
-
setGroups(this.currentUserGroups);
});
}
@@ -101,7 +108,7 @@ export default class GroupManager extends React.Component<{}> {
*/
@action
open = () => {
- SelectionManager.DeselectAll();
+ // SelectionManager.DeselectAll();
this.isOpen = true;
this.populateUsers();
this.populateGroups();
@@ -116,6 +123,7 @@ export default class GroupManager extends React.Component<{}> {
this.currentGroup = undefined;
// this.users = [];
this.createGroupModalOpen = false;
+ TaskCompletionBox.taskCompleted = false;
}
/**
@@ -128,7 +136,6 @@ export default class GroupManager extends React.Component<{}> {
/**
* @returns a list of all group documents.
*/
- // private ?
getAllGroups(): Doc[] {
const groupDoc = this.GroupManagerDoc;
return groupDoc ? DocListCast(groupDoc.data) : [];
@@ -138,32 +145,14 @@ export default class GroupManager extends React.Component<{}> {
* @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
+ * Returns an array of the list of members of a given group.
*/
- 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)) })
- );
- }
-
getGroupMembers(group: string | Doc): string[] {
if (group instanceof Doc) return JSON.parse(StrCast(group.members)) as string[];
else return JSON.parse(StrCast(this.getGroup(group)!.members)) as string[];
@@ -222,8 +211,6 @@ export default class GroupManager extends React.Component<{}> {
deleteGroup(group: Doc): boolean {
if (group) {
if (this.GroupManagerDoc && this.hasEditAccess(group)) {
- // TODO look at this later
- // SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
SharingManager.Instance.removeGroup(group);
const members: string[] = JSON.parse(StrCast(group.members));
@@ -316,12 +303,17 @@ export default class GroupManager extends React.Component<{}> {
}
+ /**
+ * @returns the MainViewModal which allows the user to create groups.
+ */
private get groupCreationModal() {
const contents = (
<div className="group-create">
<div className="group-heading" style={{ marginBottom: 0 }}>
<p><b>New Group</b></p>
- <div className={"close-button"} onClick={action(() => this.createGroupModalOpen = false)}>
+ <div className={"close-button"} onClick={action(() => {
+ this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false;
+ })}>
<FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
</div>
</div>
@@ -329,6 +321,7 @@ export default class GroupManager extends React.Component<{}> {
className="group-input"
ref={this.inputRef}
onKeyDown={this.handleKeyDown}
+ autoFocus
type="text"
placeholder="Group name"
onChange={action(() => this.buttonColour = this.inputRef.current?.value ? "black" : "#979797")} />
@@ -373,7 +366,7 @@ export default class GroupManager extends React.Component<{}> {
interactive={true}
contents={contents}
dialogueBoxStyle={{ width: "90%", height: "70%" }}
- closeOnExternalClick={action(() => this.createGroupModalOpen = false)}
+ closeOnExternalClick={action(() => { this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false; })}
/>
);
}
@@ -415,7 +408,10 @@ export default class GroupManager extends React.Component<{}> {
<div
className="sort-groups"
onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
- Name {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""} {/* → */}
+ Name {this.groupSort === "ascending" ? <FontAwesomeIcon icon={fa.faCaretUp} size={"xs"} />
+ : this.groupSort === "descending" ? <FontAwesomeIcon icon={fa.faCaretDown} size={"xs"} />
+ : <FontAwesomeIcon icon={fa.faCaretRight} size={"xs"} />
+ }
</div>
<div className="group-body">
{groups.map(group =>
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index c609c5c7b..2eb164988 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -41,9 +41,10 @@
margin-top: -5;
height: 20;
text-overflow: ellipsis;
+ background: none;
&:hover {
- text-overflow: visible;
+ text-overflow: unset;
overflow-x: auto;
}
}
@@ -72,7 +73,7 @@
.editing-contents {
overflow-y: auto;
- height: 65%;
+ height: 62%;
width: 100%;
color: black;
margin-top: -15px;
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index f20670c4e..531ef988a 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -29,13 +29,17 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
+ const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
+
return (!this.props.group ? null :
<div className="editing-interface">
<div className="editing-header">
<input
className="group-title"
+ style={{ marginLeft: !hasEditAccess ? "-14%" : 0 }}
value={StrCast(this.props.group.groupName)}
onChange={e => this.props.group.groupName = e.currentTarget.value}
+ disabled={!hasEditAccess}
>
</input>
<div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
@@ -65,12 +69,15 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
null}
<div
className="sort-emails"
+ style={{ paddingTop: hasEditAccess ? 0 : 35 }}
onClick={action(() => this.memberSort = this.memberSort === "ascending" ? "descending" : this.memberSort === "descending" ? "none" : "ascending")}>
Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
</div>
</div>
<hr />
- <div className="editing-contents">
+ <div className="editing-contents"
+ style={{ height: hasEditAccess ? "62%" : "85%" }}
+ >
{members.map(member => (
<div
className="editing-row"
@@ -79,7 +86,7 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
<div className="user-email">
{member}
</div>
- {GroupManager.Instance.hasEditAccess(this.props.group) ?
+ {hasEditAccess ?
<div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
<FontAwesomeIcon icon={fa.faTrashAlt} size={"sm"} />
</div>
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 8b3614ea7..04a750f93 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -99,6 +99,15 @@ export namespace InteractionUtils {
if (shape) { //if any of the shape are true
pts = makePolygon(shape, points);
}
+ else if (points.length >= 5 && points[3].X === points[4].X) {
+ for (var i = 0; i < points.length - 3; i += 4) {
+ const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]];
+ for (var t = 0; t < 1; t += 0.01) {
+ const point = beziercurve(t, array);
+ pts.push({ X: point[0], Y: point[1] });
+ }
+ }
+ }
else if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y === points[0].Y) {
//pointer is up (first and last points are the same)
const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
@@ -118,6 +127,12 @@ export namespace InteractionUtils {
pts.pop();
}
}
+ if (isNaN(scalex)) {
+ scalex = 1;
+ }
+ if (isNaN(scaley)) {
+ scaley = 1;
+ }
const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc +
`${(pt.X - left - width / 2) * scalex + width / 2},
${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
@@ -136,7 +151,6 @@ export namespace InteractionUtils {
<polygon points={`${2 - arrowDim} ${-Math.max(1, arrowDim / 2)}, ${2 - arrowDim} ${Math.max(1, arrowDim / 2)}, 3 0`} />
</marker>}
</defs>}
-
<polyline
points={strpts}
style={{
@@ -157,17 +171,6 @@ export namespace InteractionUtils {
</svg>);
}
- // export function makeArrow() {
- // return (
- // InkOptionsMenu.Instance.getColors().map(color => {
- // const id1 = "arrowStartTest" + color;
- // <marker id={id1} orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
- // <polygon points="0 0, 3 1, 0 2" fill={"#" + color} />
- // </marker>;
- // })
- // );
- // }
-
export function makePolygon(shape: string, points: { X: number, Y: number }[]) {
if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
//pointer is up (first and last points are the same)
@@ -217,10 +220,28 @@ export namespace InteractionUtils {
points.push({ X: left, Y: top });
return points;
case "triangle":
+ // points.push({ X: left, Y: bottom });
+ // points.push({ X: right, Y: bottom });
+ // points.push({ X: (right + left) / 2, Y: top });
+ // points.push({ X: left, Y: bottom });
+
+ points.push({ X: left, Y: bottom });
points.push({ X: left, Y: bottom });
+
points.push({ X: right, Y: bottom });
+ points.push({ X: right, Y: bottom });
+ points.push({ X: right, Y: bottom });
+ points.push({ X: right, Y: bottom });
+
+ points.push({ X: (right + left) / 2, Y: top });
+ points.push({ X: (right + left) / 2, Y: top });
points.push({ X: (right + left) / 2, Y: top });
+ points.push({ X: (right + left) / 2, Y: top });
+
+ points.push({ X: left, Y: bottom });
points.push({ X: left, Y: bottom });
+
+
return points;
case "circle":
const centerX = (right + left) / 2;
@@ -256,6 +277,7 @@ export namespace InteractionUtils {
// points.push({ X: x2, Y: y2 });
// return points;
case "line":
+
points.push({ X: left, Y: top });
points.push({ X: right, Y: bottom });
return points;
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index f1e6155d2..cb0a4bea0 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -134,7 +134,7 @@ export function scriptingGlobal(constructor: { new(...args: any[]): any }) {
Scripting.addGlobal(constructor);
}
-const _scriptingGlobals: { [name: string]: any } = {};
+export const _scriptingGlobals: { [name: string]: any } = {};
let scriptingGlobals: { [name: string]: any } = _scriptingGlobals;
const _scriptingDescriptions: { [name: string]: any } = {};
const _scriptingParams: { [name: string]: any } = {};
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 0a01d8ac7..7b2c601fe 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -29,6 +29,8 @@ export namespace SearchUtil {
rows?: number;
fq?: string;
allowAliases?: boolean;
+ "facet"?: string;
+ "facet.field"?: string;
}
export function Search(query: string, returnDocs: true, options?: SearchParams): Promise<DocSearchResult>;
export function Search(query: string, returnDocs: false, options?: SearchParams): Promise<IdSearchResult>;
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 20d881961..05ba00331 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -12,6 +12,7 @@ export namespace SelectionManager {
@observable IsDragging: boolean = false;
SelectedDocuments: ObservableMap<DocumentView, boolean> = new ObservableMap();
+
@action
SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
@@ -32,6 +33,7 @@ export namespace SelectionManager {
}
@action
DeselectDoc(docView: DocumentView): void {
+
if (manager.SelectedDocuments.get(docView)) {
manager.SelectedDocuments.delete(docView);
docView.props.whenActiveChanged(false);
@@ -40,6 +42,7 @@ export namespace SelectionManager {
}
@action
DeselectAll(): void {
+
Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false));
manager.SelectedDocuments.clear();
Doc.UserDoc().activeSelection = new List<Doc>([]);
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index c1627e69f..41bce8a1b 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -1,13 +1,13 @@
@import "../views/globalCssVariables";
.settings-interface {
- background-color: whitesmoke !important;
+ //background-color: whitesmoke !important;
color: grey;
width: 450px;
height: 300px;
button {
- background: $lighter-alt-accent;
+ background: #315a96;
outline: none;
border-radius: 5px;
border: 0px;
@@ -22,91 +22,243 @@
}
}
-.settings-interface {
+.settings-title {
+ font-size: 25px;
+ font-weight: bold;
+ padding-right: 10px;
+ color: black;
+}
+
+.settings-username {
+ font-size: 14px;
+ padding-right: 15px;
+ color: black;
+ margin-top: 10px;
+}
+
+.settings-section {
display: flex;
- flex-direction: column;
+ border-bottom: 1px solid grey;
+ padding-bottom: 8px;
+ padding-top: 6px;
- button {
- width: 100%;
- align-self: center;
- background: $darker-alt-accent;
- margin-top: 4px;
+ .settings-section-title {
+ font-size: 16;
+ font-weight: bold;
+ text-align: left;
+ color: black;
+ width: 80;
+ margin-right: 50px;
}
- .delete-button {
- background: rgb(227, 86, 86);
+ &:last-child {
+ border-bottom: none;
}
+}
- .close-button {
- position: absolute;
- right: 1em;
- top: 1em;
+
+.password-content {
+ display: flex;
+
+ .password-content-inputs {
+ width: 100;
+
+ .password-inputs {
+ border: none;
+ margin-bottom: 8px;
+ width: 180;
+ color: black;
+ border-radius: 5px;
+ }
+ }
+
+ .password-content-buttons {
+ margin-left: 84px;
+ width: 100;
+
+ .password-submit {
+ margin-left: 85px;
+ }
+
+ .password-forgot {
+ margin-left: 65px;
+ margin-top: -20px;
+ white-space: nowrap;
+ }
+ }
+}
+
+.accounts-content {
+ display: flex;
+}
+
+.modes-content {
+ display: flex;
+
+ .modes-select {
+ width: 170px;
+ margin-right: 65px;
+ color: black;
+ border-radius: 5px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .modes-playground {
+ display: flex;
+
+ .playground-check {
+ margin-right: 5px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .playground-text {
+ color: black;
+ }
+ }
+}
+
+.colorFlyout {
+ margin-top: 2px;
+ margin-right: 25px;
+
+ &:hover {
cursor: pointer;
}
- .settings-heading {
- letter-spacing: .5em;
+ .colorFlyout-button {
+ width: 20px;
+ height: 20px;
+ border: 0.5px solid black;
+ border-radius: 5px;
}
+}
+.preferences-content {
+ display: flex;
+ margin-top: 4px;
- .settings-body {
+ .preferences-color {
display: flex;
- justify-content: space-between;
- margin-top: -10;
- .settings-type {
- display: flex;
- flex-direction: column;
- flex-basis: 45%;
+ .preferences-color-text {
+ color: black;
+ font-size: 11;
+ margin-top: 4;
+ margin-right: 4;
+ }
+ }
+
+ .preferences-font {
+ display: flex;
+ .preferences-font-text {
+ color: black;
+ font-size: 11;
+ margin-top: 4;
+ margin-right: 4;
}
- .settings-content {
- padding-left: 1em;
- padding-right: 1em;
- display: flex;
- flex-direction: column;
- flex-basis: 70%;
- justify-content: space-around;
- text-align: left;
-
- ::placeholder {
- color: $intermediate-color;
- }
+ .font-select {
+ width: 100px;
+ color: black;
+ font-size: 9;
+ margin-right: 6;
+ border-radius: 5px;
- input {
- border-radius: 5px;
- border: none;
- padding: 4px;
- min-width: 100%;
- margin: 2px 0;
+ &:hover {
+ cursor: pointer;
}
+ }
- .error-text {
- color: #C40233;
- }
+ .size-select {
+ width: 60px;
+ color: black;
+ font-size: 9;
+ border-radius: 5px;
- .success-text {
- color: #009F6B;
+ &:hover {
+ cursor: pointer;
}
+ }
+ }
+}
- p {
- padding: 0 0 .1em .2em;
- }
+.settings-interface {
+ display: flex;
+ flex-direction: column;
+ button {
+ width: auto;
+ align-self: center;
+ background: #252b33;
+ margin-right: 15px;
+
+ //margin-top: 4px;
+
+ &:hover {
+ background: $main-accent;
}
}
+ // .delete-button {
+ // background: rgb(227, 86, 86);
+ // }
+
+ .close-button {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ cursor: pointer;
+ }
+
+ .settings-content {
+ background: #e4e4e4;
+ border-radius: 6px;
+ padding: 10px;
+ width: 560px;
+ }
+
+ .settings-top {
+ display: flex;
+ margin-bottom: 10px;
+ }
+
+
+ .error-text {
+ color: #C40233;
+ width: 300;
+ margin-left: -20;
+ font-size: 10;
+ margin-bottom: 4;
+ margin-top: -3;
+ }
+
+ .success-text {
+ width: 300;
+ margin-left: -20;
+ font-size: 10;
+ margin-bottom: 4;
+ margin-top: -3;
+ color: #009F6B;
+ }
+
.focus-span {
text-decoration: underline;
}
h1 {
- color: $dark-color;
+ color: #121721;
text-transform: uppercase;
letter-spacing: 2px;
- font-size: 120%;
+ font-size: 19;
margin-top: 0;
+ font-weight: bold;
}
.container {
@@ -133,8 +285,6 @@
color: black;
}
-
-
}
}
@@ -151,7 +301,7 @@
.settings-interface button {
width: 100%;
font-size: 30px;
- background: #b2cef8;
+ background: #315a96;
}
.settings-interface .settings-heading {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 90d59aa51..68ed32c0f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,4 +1,4 @@
-import { observable, runInAction, action } from "mobx";
+import { observable, runInAction, action, computed } from "mobx";
import * as React from "react";
import MainViewModal from "../views/MainViewModal";
import { observer } from "mobx-react";
@@ -9,18 +9,25 @@ import "./SettingsManager.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Networking } from "../Network";
import { CurrentUserUtils } from "./CurrentUserUtils";
-import { Utils } from "../../Utils";
+import { Utils, addStyleSheet, addStyleSheetRule, removeStyleSheetRule } from "../../Utils";
import { Doc } from "../../fields/Doc";
import GroupManager from "./GroupManager";
import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
-import { togglePlaygroundMode } from "../../fields/util";
+import { DocServer } from "../DocServer";
+import { BoolCast, StrCast, NumCast } from "../../fields/Types";
+import { undoBatch } from "./UndoManager";
+import { ColorState, SketchPicker } from "react-color";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
library.add(fa.faTimes);
@observer
export default class SettingsManager extends React.Component<{}> {
public static Instance: SettingsManager;
+ static _settingsStyle = addStyleSheet();
@observable private isOpen = false;
@observable private dialogueBoxOpacity = 1;
@observable private overlayOpacity = 0.4;
@@ -32,6 +39,9 @@ export default class SettingsManager extends React.Component<{}> {
private new_password_ref = React.createRef<HTMLInputElement>();
private new_confirm_ref = React.createRef<HTMLInputElement>();
+
+ @computed get backgroundColor() { return Doc.UserDoc().defaultColor; }
+
public open = action(() => {
SelectionManager.DeselectAll();
this.isOpen = true;
@@ -99,54 +109,158 @@ export default class SettingsManager extends React.Component<{}> {
@action
togglePlaygroundMode = () => {
- togglePlaygroundMode();
this.playgroundMode = !this.playgroundMode;
+ if (this.playgroundMode) DocServer.Control.makeReadOnly();
+ else DocServer.Control.makeEditable();
+
+ addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
+ }
+
+ @action
+ changeMode = (e: any) => {
+ if (e.currentTarget.value === "Novice") {
+ Doc.UserDoc().noviceMode = true;
+ } else {
+ Doc.UserDoc().noviceMode = false;
+ }
+ }
+
+ @action
+ changeFontFamily = (e: any) => {
+ Doc.UserDoc().fontFamily = e.currentTarget.value;
+ }
+
+ @action
+ changeFontSize = (e: any) => {
+ Doc.UserDoc().fontSize = e.currentTarget.value;
+ }
+
+ @action @undoBatch
+ switchColor = (color: ColorState) => {
+ const val = String(color.hex);
+ Doc.UserDoc().defaultColor = val;
+ return true;
}
private get settingsInterface() {
- return (
- <div className={"settings-interface"}>
- <div className="settings-heading">
- <h1>settings</h1>
- <div className={"close-button"} onClick={this.close}>
- <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
- </div>
- </div>
- <div className="settings-body">
- <div className="settings-type">
- <button onClick={this.onClick} value="password">reset password</button>
- <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
- <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
- <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
- <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
- <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
- <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
- {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
- </button>
+
+
+ const passwordContent = <div className="password-content">
+ <div className="password-content-inputs">
+ <input className="password-inputs" type="password" placeholder="current password" ref={this.curr_password_ref} />
+ <input className="password-inputs" type="password" placeholder="new password" ref={this.new_password_ref} />
+ <input className="password-inputs" type="password" placeholder="confirm new password" ref={this.new_confirm_ref} />
+ </div>
+ <div className="password-content-buttons">
+ {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
+ {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
+ <button className="password-submit" onClick={this.dispatchRequest}>submit</button>
+ <a className="password-forgot" style={{ marginLeft: 65, marginTop: -20 }}
+ href="/forgotPassword">forgot password?</a>
+ </div>
+ </div>;
+
+ const modesContent = <div className="modes-content">
+ <select className="modes-select"
+ onChange={e => this.changeMode(e)}>
+ <option key={"Novice"} value={"Novice"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
+ Novice
+ </option>
+ <option key={"Developer"} value={"Developer"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+ Developer
+ </option>
+ </select>
+ <div className="modes-playground">
+ <input className="playground-check" type="checkbox"
+ checked={this.playgroundMode}
+ onChange={undoBatch(action(() => this.togglePlaygroundMode()))}
+ /><div className="playground-text">Playground Mode</div>
+ </div>
+ </div>;
+
+ const accountsContent = <div className="accounts-content">
+ <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
+ <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
+ <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
+ </div>;
+
+ const colorBox = <SketchPicker onChange={this.switchColor}
+ presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+ '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+ '#FFFFFF', '#f1efeb', 'transparent']}
+ color={StrCast(this.backgroundColor)} />;
+
+ const colorFlyout = <div className="colorFlyout">
+ <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+ content={colorBox}>
+ <div>
+ <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }}
+ onPointerDown={e => e.stopPropagation()} >
+ <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
</div>
- {this.settingsContent === "password" ?
- <div className="settings-content">
- <input placeholder="current password" ref={this.curr_password_ref} />
- <input placeholder="new password" ref={this.new_password_ref} />
- <input placeholder="confirm new password" ref={this.new_confirm_ref} />
- {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
- {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
- <button onClick={this.dispatchRequest}>submit</button>
- <a href="/forgotPassword">forgot password?</a>
-
- </div>
- : undefined}
- {this.settingsContent === "data" ?
- <div className="settings-content">
- <p>WARNING: <br />
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
- <button className="delete-button">DELETE</button>
- </div>
- : undefined}
</div>
+ </Flyout>
+ </div>;
+ const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+ const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"];
+
+ const preferencesContent = <div className="preferences-content">
+ <div className="preferences-color">
+ <div className="preferences-color-text">Background Color</div> {colorFlyout}
</div>
- );
+ <div className="preferences-font">
+ <div className="preferences-font-text">Default Font</div>
+ <select className="font-select"
+ onChange={e => this.changeFontFamily(e)}>
+ {fontFamilies.map((font) => {
+ return <option key={font} value={font} selected={StrCast(Doc.UserDoc().fontFamily) === font}>
+ {font}
+ </option>;
+ })}
+ </select>
+ <select className="size-select"
+ onChange={e => this.changeFontSize(e)}>
+ {fontSizes.map((size) => {
+ return <option key={size} value={size} selected={StrCast(Doc.UserDoc().fontSize) === size}>
+ {size}
+ </option>;
+ })}
+ </select>
+ </div>
+ </div>;
+
+ return (<div className="settings-interface">
+ <div className="settings-top">
+ <div className="settings-title">Settings</div>
+ <div className="settings-username">{Doc.CurrentUserEmail}</div>
+ <button onClick={() => window.location.assign(Utils.prepend("/logout"))}
+ style={{ right: 35, position: "absolute" }} >
+ {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
+ </button>
+ <div className="close-button" onClick={this.close}>
+ <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
+ </div>
+ </div>
+ <div className="settings-content">
+ <div className="settings-section">
+ <div className="settings-section-title">Password</div>
+ <div className="settings-section-context">{passwordContent}</div>
+ </div>
+ <div className="settings-section">
+ <div className="settings-section-title">Modes</div>
+ <div className="settings-section-context">{modesContent}</div>
+ </div>
+ <div className="settings-section">
+ <div className="settings-section-title">Accounts</div>
+ <div className="settings-section-context">{accountsContent}</div>
+ </div>
+ <div className="settings-section" style={{ paddingBottom: 4 }}>
+ <div className="settings-section-title">Preferences</div>
+ <div className="settings-section-context">{preferencesContent}</div>
+ </div>
+ </div>
+ </div>);
}
render() {
@@ -156,6 +270,7 @@ export default class SettingsManager extends React.Component<{}> {
isDisplayed={this.isOpen}
interactive={true}
closeOnExternalClick={this.close}
+ dialogueBoxStyle={{ width: "600px", height: "340px" }}
/>
);
}
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index 130785672..7912db74d 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,6 +1,6 @@
.sharing-interface {
width: 600px;
- height: 360px;
+ // height: 360px;
.overlay {
transform: translate(-20px, -20px);
@@ -23,33 +23,51 @@
z-index: 999;
}
- .share-setup {
- display: flex;
- margin-bottom: 20px;
- align-items: center;
- height: 36;
+ .share-container {
+ .share-setup {
+ display: flex;
+ margin-bottom: 20px;
+ align-items: center;
+ height: 36;
- .user-search {
- width: 90%;
+ .user-search {
+ width: 90%;
- input {
- height: 30;
+ input {
+ height: 30;
+ }
+ }
+
+ .permissions-select {
+ z-index: 1;
+ margin-left: -100;
+ border: none;
+ outline: none;
+ text-align: justify; // for Edge
+ text-align-last: end;
}
- }
- .permissions-select {
- z-index: 1;
- margin-left: -100;
- border: none;
- outline: none;
- text-align: justify; // for Edge
- text-align-last: end;
+ .share-button {
+ height: 105%;
+ margin-left: 2%;
+ background-color: black;
+ }
}
- .share-button {
- height: 105%;
- margin-left: 2%;
- background-color: #979797;
+ .sort-checkboxes {
+ float: left;
+ margin-top: -17px;
+ margin-bottom: 10px;
+ font-size: 10px;
+
+ input {
+ height: 10px;
+ }
+
+ label {
+ font-weight: normal;
+ font-style: italic;
+ }
}
}
@@ -66,6 +84,7 @@
.user-sort {
text-align: left;
margin-left: 10;
+ width: 100px;
cursor: pointer;
}
@@ -92,10 +111,8 @@
height: 250px;
margin: 0 2;
-
.none {
font-style: italic;
-
}
}
}
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 452a58d21..d50a132f8 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,14 +1,13 @@
import { observable, runInAction, action } from "mobx";
import * as React from "react";
import MainViewModal from "../views/MainViewModal";
-import { Doc, Opt, DocListCastAsync } from "../../fields/Doc";
+import { Doc, Opt, AclAdmin, AclPrivate, DocListCast } from "../../fields/Doc";
import { DocServer } from "../DocServer";
import { Cast, StrCast } from "../../fields/Types";
import * as RequestPromise from "request-promise";
import { Utils } from "../../Utils";
import "./SharingManager.scss";
import { observer } from "mobx-react";
-import { library } from '@fortawesome/fontawesome-svg-core';
import * as fa from '@fortawesome/free-solid-svg-icons';
import { DocumentView } from "../views/nodes/DocumentView";
import { SelectionManager } from "./SelectionManager";
@@ -20,17 +19,22 @@ import GroupMemberView from "./GroupMemberView";
import Select from "react-select";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { List } from "../../fields/List";
-import { distributeAcls, SharingPermissions } from "../../fields/util";
+import { distributeAcls, SharingPermissions, GetEffectiveAcl } from "../../fields/util";
import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+library.add(fa.faInfoCircle, fa.faCaretUp, fa.faCaretRight, fa.faCaretDown);
-library.add(fa.faCopy, fa.faTimes);
export interface User {
email: string;
userDocumentId: string;
}
-interface GroupOptions {
+/**
+ * Interface for grouped options for the react-select component.
+ */
+interface GroupedOptions {
label: string;
options: UserOptions[];
}
@@ -39,9 +43,13 @@ interface GroupOptions {
// const PublicKey = "publicLinkPermissions";
// const DefaultColor = "black";
-const groupType = "!groupType/";
+// used to differentiate between individuals and groups when sharing
const indType = "!indType/";
+const groupType = "!groupType/";
+/**
+ * A user who also has a notificationDoc.
+ */
interface ValidatedUser {
user: User;
notificationDoc: Doc;
@@ -52,42 +60,45 @@ const storage = "data";
@observer
export default class SharingManager extends React.Component<{}> {
public static Instance: SharingManager;
- @observable private isOpen = false;
- @observable private users: ValidatedUser[] = [];
- @observable private targetDoc: Doc | undefined;
- @observable private targetDocView: DocumentView | undefined;
+ @observable private isOpen = false; // whether the SharingManager modal is open or not
+ @observable private users: ValidatedUser[] = []; // the list of users with notificationDocs
+ @observable private targetDoc: Doc | undefined; // the document being shared
+ @observable private targetDocView: DocumentView | undefined; // the DocumentView of the document being shared
// @observable private copied = false;
- @observable private dialogueBoxOpacity = 1;
- @observable private overlayOpacity = 0.4;
- @observable private selectedUsers: UserOptions[] | null = null;
- @observable private permissions: SharingPermissions = SharingPermissions.Edit;
- @observable private individualSort: "ascending" | "descending" | "none" = "none";
- @observable private groupSort: "ascending" | "descending" | "none" = "none";
- private shareDocumentButtonRef: React.RefObject<HTMLButtonElement> = React.createRef();
-
-
+ @observable private dialogueBoxOpacity = 1; // for the modal
+ @observable private overlayOpacity = 0.4; // for the modal
+ @observable private selectedUsers: UserOptions[] | null = null; // users (individuals/groups) selected to share with
+ @observable private permissions: SharingPermissions = SharingPermissions.Edit; // the permission with which to share with other users
+ @observable private individualSort: "ascending" | "descending" | "none" = "none"; // sorting options for the list of individuals
+ @observable private groupSort: "ascending" | "descending" | "none" = "none"; // sorting options for the list of groups
+ private shareDocumentButtonRef: React.RefObject<HTMLButtonElement> = React.createRef(); // ref for the share button, used for the position of the popup
+ // if both showUserOptions and showGroupOptions are false then both are displayed
+ @observable private showUserOptions: boolean = false; // whether to show individuals as options when sharing (in the react-select component)
+ @observable private showGroupOptions: boolean = false; // // whether to show groups as options when sharing (in the react-select component)
+ private populating: boolean = false;
// private get linkVisible() {
// return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
// }
public open = (target: DocumentView) => {
- SelectionManager.DeselectAll();
- this.populateUsers().then(action(() => {
+ runInAction(() => this.users = []);
+ // SelectionManager.DeselectAll();
+ this.populateUsers();
+ runInAction(() => {
this.targetDocView = target;
this.targetDoc = target.props.Document;
DictationOverlay.Instance.hasActiveModal = true;
this.isOpen = true;
this.permissions = SharingPermissions.Edit;
- }));
-
+ });
+ this.targetDoc!.author === Doc.CurrentUserEmail && !this.targetDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`] && distributeAcls(`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`, SharingPermissions.Admin, this.targetDoc!);
}
public close = action(() => {
this.isOpen = false;
- this.users = [];
- this.selectedUsers = null;
-
+ this.selectedUsers = null; // resets the list of users and seleected users (in the react-select component)
+ TaskCompletionBox.taskCompleted = false;
setTimeout(action(() => {
// this.copied = false;
DictationOverlay.Instance.hasActiveModal = false;
@@ -100,109 +111,131 @@ export default class SharingManager extends React.Component<{}> {
SharingManager.Instance = this;
}
+ /**
+ * Populates the list of users.
+ */
+ componentDidMount() {
+ this.populateUsers();
+ }
+
+ /**
+ * Populates the list of validated users (this.users) by adding registered users which have a sidebar-sharing.
+ */
populateUsers = async () => {
- const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
- const raw = JSON.parse(userList) as User[];
- const evaluating = raw.map(async user => {
- const isCandidate = user.email !== Doc.CurrentUserEmail;
- if (isCandidate) {
- const userDocument = await DocServer.GetRefField(user.userDocumentId);
- if (userDocument instanceof Doc) {
- const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
- runInAction(() => {
- if (notificationDoc instanceof Doc) {
- this.users.push({ user, notificationDoc });
- }
- });
+ if (!this.populating) {
+ this.populating = true;
+ runInAction(() => this.users = []);
+ const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
+ const raw = JSON.parse(userList) as User[];
+ const evaluating = raw.map(async user => {
+ const isCandidate = user.email !== Doc.CurrentUserEmail;
+ if (isCandidate) {
+ const userDocument = await DocServer.GetRefField(user.userDocumentId);
+ if (userDocument instanceof Doc) {
+ const notificationDoc = await Cast(userDocument["sidebar-sharing"], Doc);
+ runInAction(() => {
+ if (notificationDoc instanceof Doc) {
+ this.users.push({ user, notificationDoc });
+ }
+ });
+ }
}
- }
- });
- return Promise.all(evaluating);
+ });
+ return Promise.all(evaluating).then(() => this.populating = false);
+ }
}
- setInternalGroupSharing = (group: Doc, permission: string) => {
+ /**
+ * Sets the permission on the target for the group.
+ * @param group
+ * @param permission
+ */
+ setInternalGroupSharing = (group: Doc, permission: string, targetDoc?: Doc) => {
const members: string[] = JSON.parse(StrCast(group.members));
const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
- const target = this.targetDoc!;
+ const target = targetDoc || this.targetDoc!;
const ACL = `ACL-${StrCast(group.groupName)}`;
- // fix this - not needed (here and setinternalsharing and removegroup)
- // target[ACL] = permission;
- // Doc.GetProto(target)[ACL] = permission;
- distributeAcls(ACL, permission as SharingPermissions, this.targetDoc!);
+ target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
- group.docsShared ? DocListCastAsync(group.docsShared).then(resolved => Doc.IndexOf(target, resolved!) === -1 && (group.docsShared as List<Doc>).push(target)) : group.docsShared = new List<Doc>([target]);
+ // if documents have been shared, add the target to that list if it doesn't already exist, otherwise create a new list with the target
+ group.docsShared ? Doc.IndexOf(target, DocListCast(group.docsShared)) === -1 && (group.docsShared as List<Doc>).push(target) : group.docsShared = new List<Doc>([target]);
users.forEach(({ notificationDoc }) => {
- DocListCastAsync(notificationDoc[storage]).then(resolved => {
- if (permission !== SharingPermissions.None) Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
- else Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
- });
+ if (permission !== SharingPermissions.None) Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target); // add the target to the notificationDoc if it hasn't already been added
+ else Doc.IndexOf(target, DocListCast(notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target); // remove the target from the list if it already exists
});
}
+ /**
+ * Shares the documents shared with a group with a new user who has been added to that group.
+ * @param group
+ * @param emailId
+ */
shareWithAddedMember = (group: Doc, emailId: string) => {
const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
- if (group.docsShared) {
- DocListCastAsync(group.docsShared).then(docsShared => {
- docsShared?.forEach(doc => {
- DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
- });
- });
- }
+ if (group.docsShared) DocListCast(group.docsShared).forEach(doc => Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
}
+ shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, target: Doc) => {
+ const user = this.users.find(({ user: { email } }) => email === (shareWith === "Me" ? Doc.CurrentUserEmail : shareWith));
+ if (user) this.setInternalSharing(user, permission, target);
+ else this.setInternalGroupSharing(GroupManager.Instance.getGroup(shareWith)!, permission, target);
+ }
+
+ /**
+ * Removes the documents shared with a user through a group when the user is removed from the group.
+ * @param group
+ * @param emailId
+ */
removeMember = (group: Doc, emailId: string) => {
const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
if (group.docsShared) {
- DocListCastAsync(group.docsShared).then(docsShared => {
- docsShared?.forEach(doc => {
- DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc));
- });
+ DocListCast(group.docsShared).forEach(doc => {
+ Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc); // remove the doc only if it is in the list
});
}
}
+ /**
+ * Removes a group's permissions from documents that have been shared with it.
+ * @param group
+ */
removeGroup = (group: Doc) => {
if (group.docsShared) {
- DocListCastAsync(group.docsShared).then(resolved => {
- resolved?.forEach(doc => {
- const ACL = `ACL-${StrCast(group.groupName)}`;
- // doc[ACL] = doc[DataSym][ACL] = "Not Shared";
-
- distributeAcls(ACL, SharingPermissions.None, doc);
+ DocListCast(group.docsShared).forEach(doc => {
+ const ACL = `ACL-${StrCast(group.groupName)}`;
- const members: string[] = JSON.parse(StrCast(group.members));
- const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
+ distributeAcls(ACL, SharingPermissions.None, doc);
- users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc));
- });
+ const members: string[] = JSON.parse(StrCast(group.members));
+ const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
+ users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc));
});
}
}
- // @action
- setInternalSharing = (recipient: ValidatedUser, permission: string) => {
+ /**
+ * Shares the document with a user.
+ */
+ setInternalSharing = (recipient: ValidatedUser, permission: string, targetDoc?: Doc) => {
const { user, notificationDoc } = recipient;
- const target = this.targetDoc!;
+ const target = targetDoc || this.targetDoc!;
const key = user.email.replace('.', '_');
const ACL = `ACL-${key}`;
- distributeAcls(ACL, permission as SharingPermissions, this.targetDoc!);
+
+ target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
if (permission !== SharingPermissions.None) {
- DocListCastAsync(notificationDoc[storage]).then(resolved => {
- Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
- });
+ Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
}
else {
- DocListCastAsync(notificationDoc[storage]).then(resolved => {
- Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
- });
+ Doc.IndexOf(target, DocListCast(notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
}
}
@@ -230,14 +263,17 @@ export default class SharingManager extends React.Component<{}> {
// }
// });
+ /**
+ * Returns the SharingPermissions (Admin, Can Edit etc) access that's used to share
+ */
private get sharingOptions() {
- return Object.values(SharingPermissions).map(permission => {
- return (
- <option key={permission} value={permission} selected={permission === SharingPermissions.Edit}>
+ return Object.values(SharingPermissions).map(permission =>
+ (
+ <option key={permission} value={permission}>
{permission}
</option>
- );
- });
+ )
+ );
}
private focusOn = (contents: string) => {
@@ -270,16 +306,25 @@ export default class SharingManager extends React.Component<{}> {
);
}
+ /**
+ * Handles changes in the users selected in react-select
+ */
@action
handleUsersChange = (selectedOptions: any) => {
this.selectedUsers = selectedOptions as UserOptions[];
}
+ /**
+ * Handles changes in the permission chosen to share with someone with
+ */
@action
handlePermissionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
this.permissions = event.currentTarget.value as SharingPermissions;
}
+ /**
+ * Calls the relevant method for sharing, displays the popup, and resets the relevant variables.
+ */
@action
share = () => {
if (this.selectedUsers) {
@@ -294,7 +339,7 @@ export default class SharingManager extends React.Component<{}> {
const { left, width, top, height } = this.shareDocumentButtonRef.current!.getBoundingClientRect();
TaskCompletionBox.popupX = left - 1.5 * width;
- TaskCompletionBox.popupY = top - height;
+ TaskCompletionBox.popupY = top - 1.5 * height;
TaskCompletionBox.textDisplayed = "Document shared!";
TaskCompletionBox.taskCompleted = true;
setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2000);
@@ -303,85 +348,133 @@ export default class SharingManager extends React.Component<{}> {
}
}
+ /**
+ * Sorting algorithm to sort users.
+ */
sortUsers = (u1: ValidatedUser, u2: ValidatedUser) => {
const { email: e1 } = u1.user;
const { email: e2 } = u2.user;
return e1 < e2 ? -1 : e1 === e2 ? 0 : 1;
}
+ /**
+ * Sorting algorithm to sort groups.
+ */
sortGroups = (group1: Doc, group2: Doc) => {
const g1 = StrCast(group1.groupName);
const g2 = StrCast(group2.groupName);
return g1 < g2 ? -1 : g1 === g2 ? 0 : 1;
}
+ /**
+ * @returns the main interface of the SharingManager.
+ */
private get sharingInterface() {
const groupList = GroupManager.Instance?.getAllGroups() || [];
- const sortedUsers = this.users.sort(this.sortUsers)
+ const sortedUsers = this.users.slice().sort(this.sortUsers)
.map(({ user: { email } }) => ({ label: email, value: indType + email }));
- const sortedGroups = groupList.sort(this.sortGroups)
+ const sortedGroups = groupList.slice().sort(this.sortGroups)
.map(({ groupName }) => ({ label: StrCast(groupName), value: groupType + StrCast(groupName) }));
- const options: GroupOptions[] = GroupManager.Instance ?
- [
- {
+ // the next block handles the users shown (individuals/groups/both)
+ const options: GroupedOptions[] = [];
+ if (GroupManager.Instance) {
+ if ((this.showUserOptions && this.showGroupOptions) || (!this.showUserOptions && !this.showGroupOptions)) {
+ options.push({
label: 'Individuals',
options: sortedUsers
},
- {
+ {
+ label: 'Groups',
+ options: sortedGroups
+ });
+ }
+ else if (this.showUserOptions) {
+ options.push({
+ label: 'Individuals',
+ options: sortedUsers
+ });
+ }
+ else {
+ options.push({
label: 'Groups',
options: sortedGroups
- }
- ]
- : [];
+ });
+ }
+ }
const users = this.individualSort === "ascending" ? this.users.sort(this.sortUsers) : this.individualSort === "descending" ? this.users.sort(this.sortUsers).reverse() : this.users;
const groups = this.groupSort === "ascending" ? groupList.sort(this.sortGroups) : this.groupSort === "descending" ? groupList.sort(this.sortGroups).reverse() : groupList;
+ const effectiveAcl = this.targetDoc ? GetEffectiveAcl(this.targetDoc) : AclPrivate;
+
+ // the list of users shared with
const userListContents: (JSX.Element | null)[] = users.map(({ user, notificationDoc }) => {
const userKey = user.email.replace('.', '_');
- const permissions = StrCast(this.targetDoc?.[`ACL-${userKey}`], SharingPermissions.None);
+ const permissions = StrCast(this.targetDoc?.[`ACL-${userKey}`]);
- return permissions === SharingPermissions.None || user.email === this.targetDoc?.author ? null : (
+ return !permissions || user.email === this.targetDoc?.author ? null : (
<div
key={userKey}
className={"container"}
>
<span className={"padding"}>{user.email}</span>
<div className="edit-actions">
- <select
- className={"permissions-dropdown"}
- value={permissions}
- onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)}
- >
- {this.sharingOptions}
- </select>
+ {effectiveAcl === AclAdmin ? (
+ <select
+ className={"permissions-dropdown"}
+ value={permissions}
+ onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)}
+ >
+ {this.sharingOptions}
+ </select>
+ ) : (
+ <div className={"permissions-dropdown"}>
+ {permissions}
+ </div>
+ )}
</div>
</div>
);
});
+ // the owner of the doc and the current user are placed at the top of the user list.
userListContents.unshift(
(
<div
key={"owner"}
className={"container"}
>
- <span className={"padding"}>{this.targetDoc?.author}</span>
+ <span className={"padding"}>{this.targetDoc?.author === Doc.CurrentUserEmail ? "Me" : this.targetDoc?.author}</span>
<div className="edit-actions">
<div className={"permissions-dropdown"}>
Owner
</div>
</div>
</div>
- )
+ ),
+ this.targetDoc?.author !== Doc.CurrentUserEmail ?
+ (
+ <div
+ key={"me"}
+ className={"container"}
+ >
+ <span className={"padding"}>Me</span>
+ <div className="edit-actions">
+ <div className={"permissions-dropdown"}>
+ {this.targetDoc?.[`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`]}
+ </div>
+ </div>
+ </div>
+ ) : null
);
+ // the list of groups shared with
const groupListContents = groups.map(group => {
- const permissions = StrCast(this.targetDoc?.[`ACL-${StrCast(group.groupName)}`], SharingPermissions.None);
+ const permissions = StrCast(this.targetDoc?.[`ACL-${StrCast(group.groupName)}`]);
- return permissions === SharingPermissions.None ? null : (
+ return !permissions ? null : (
<div
key={StrCast(group.groupName)}
className={"container"}
@@ -403,7 +496,7 @@ export default class SharingManager extends React.Component<{}> {
);
});
- const displayUserList = !userListContents?.every(user => user === null);
+ // don't display the group list if all groups are null
const displayGroupList = !groupListContents?.every(group => group === null);
return (
@@ -447,10 +540,9 @@ export default class SharingManager extends React.Component<{}> {
<div className="sharing-contents">
<p className={"share-title"}><b>Share </b>{this.focusOn(StrCast(this.targetDoc?.title, "this document"))}</p>
<div className={"close-button"} onClick={this.close}>
- <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
+ <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
</div>
- {this.targetDoc?.author !== Doc.CurrentUserEmail ? null
- :
+ {<div className="share-container">
<div className="share-setup">
<Select
className={"user-search"}
@@ -460,40 +552,45 @@ export default class SharingManager extends React.Component<{}> {
options={options}
onChange={this.handleUsersChange}
value={this.selectedUsers}
+ styles={{
+ indicatorSeparator: () => ({
+ visibility: "hidden"
+ })
+ }}
/>
- <select className="permissions-select" onChange={this.handlePermissionsChange}>
+ <select className="permissions-select" onChange={this.handlePermissionsChange} value={this.permissions}>
{this.sharingOptions}
</select>
<button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
Share
</button>
</div>
+ <div className="sort-checkboxes">
+ <input type="checkbox" onChange={action(() => this.showUserOptions = !this.showUserOptions)} /> <label style={{ marginRight: 10 }}>Individuals</label>
+ <input type="checkbox" onChange={action(() => this.showGroupOptions = !this.showGroupOptions)} /> <label>Groups</label>
+ </div>
+ </div>
}
<div className="main-container">
<div className={"individual-container"}>
<div
className="user-sort"
onClick={action(() => this.individualSort = this.individualSort === "ascending" ? "descending" : this.individualSort === "descending" ? "none" : "ascending")}>
- Individuals {this.individualSort === "ascending" ? "↑" : this.individualSort === "descending" ? "↓" : ""} {/* → */}
+ Individuals {this.individualSort === "ascending" ? <FontAwesomeIcon icon={fa.faCaretUp} size={"xs"} />
+ : this.individualSort === "descending" ? <FontAwesomeIcon icon={fa.faCaretDown} size={"xs"} />
+ : <FontAwesomeIcon icon={fa.faCaretRight} size={"xs"} />}
</div>
- <div className={"users-list"} style={{ display: !displayUserList ? "flex" : "block" }}>{/*200*/}
- {
- !displayUserList ?
- <div
- className={"none"}
- >
- There are no users this document has been shared with.
- </div>
- :
- userListContents
- }
+ <div className={"users-list"} style={{ display: "block" }}>{/*200*/}
+ {userListContents}
</div>
</div>
<div className={"group-container"}>
<div
className="user-sort"
onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
- Groups {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""} {/* → */}
+ Groups {this.groupSort === "ascending" ? <FontAwesomeIcon icon={fa.faCaretUp} size={"xs"} />
+ : this.groupSort === "descending" ? <FontAwesomeIcon icon={fa.faCaretDown} size={"xs"} />
+ : <FontAwesomeIcon icon={fa.faCaretRight} size={"xs"} />}
</div>
<div className={"groups-list"} style={{ display: !displayGroupList ? "flex" : "block" }}>{/*200*/}
diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
index 08aec3724..ab6c94f83 100644
--- a/src/client/util/type_decls.d
+++ b/src/client/util/type_decls.d
@@ -187,6 +187,11 @@ declare class List<T extends Field> extends ObjectField {
[Copy](): ObjectField;
}
+declare class InkField extends ObjectField {
+ constructor(data:Array<{X:number, Y:number}>);
+ [Copy](): ObjectField;
+}
+
// @ts-ignore
declare const console: any;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-03 19:58:14 +0000