From 3257bfdb28fbd4573adc7d507827d6a6957fc7d2 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 2 Aug 2020 12:15:58 -0500 Subject: merging menuiconbox into fonticonbox --- src/client/documents/Documents.ts | 9 +--- src/client/util/CurrentUserUtils.ts | 5 ++- src/client/util/SharingManager.tsx | 6 +++ src/client/views/MainView.tsx | 18 ++++++-- src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/FontIconBox.scss | 56 ++++++++++++++++++++++- src/client/views/nodes/FontIconBox.tsx | 59 ++++++++++++++++++------- src/client/views/nodes/MenuIconBox.scss | 49 -------------------- src/client/views/nodes/MenuIconBox.tsx | 33 -------------- 9 files changed, 123 insertions(+), 115 deletions(-) delete mode 100644 src/client/views/nodes/MenuIconBox.scss delete mode 100644 src/client/views/nodes/MenuIconBox.tsx (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index de0557185..300af4e50 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -31,7 +31,6 @@ import { ColorBox } from "../views/nodes/ColorBox"; import { ComparisonBox } from "../views/nodes/ComparisonBox"; import { DocHolderBox } from "../views/nodes/DocHolderBox"; import { FontIconBox } from "../views/nodes/FontIconBox"; -import { MenuIconBox } from "../views/nodes/MenuIconBox"; import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox"; import { ImageBox } from "../views/nodes/ImageBox"; import { KeyValueBox } from "../views/nodes/KeyValueBox"; @@ -152,6 +151,7 @@ export interface DocumentOptions { annotationOn?: Doc; removeDropProperties?: List; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document dbDoc?: Doc; + menuIcon?: boolean; // if the font icon box is in the menu linkRelationship?: string; // type of relatinoship a link represents ischecked?: ScriptField; // returns whether a font icon box is checked activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts) @@ -301,9 +301,6 @@ export namespace Docs { layout: { view: FontIconBox, dataField: defaultDataKey }, options: { _width: 40, _height: 40, borderRounding: "100%" }, }], - [DocumentType.MENUICON, { - layout: { view: MenuIconBox, dataField: defaultDataKey }, - }], // [DocumentType.RECOMMENDATION, { // layout: { view: RecommendationsBox, dataField: defaultDataKey }, // options: { _width: 200, _height: 200 }, @@ -794,10 +791,6 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) }); } - export function MenuIconDocument(options?: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) }); - } - export function PresElementBoxDocument(options?: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b37c91c56..7b6868f73 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -48,6 +48,8 @@ export class CurrentUserUtils { @observable public static closedStack: any | undefined; @observable public static searchStack: any | undefined; + @observable public static selectedPanel: string = "none"; + // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { if (doc["template-button-query"] === undefined) { @@ -520,8 +522,9 @@ export class CurrentUserUtils { static setupMenuPanel(doc: Doc) { if (doc.menuStack === undefined) { const buttons = CurrentUserUtils.menuBtnDescriptions(); - const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({ + const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({ icon, + menuIcon: true, title, _backgroundColor: "black", stayInCollection: true, diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 000b3e46c..eda12a5e9 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -179,6 +179,12 @@ export default class SharingManager extends React.Component<{}> { } } + 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 diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d095a9836..c83aeee25 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -234,7 +234,7 @@ export class MainView extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - _width: this._panelWidth * .7 - this.propertiesWidth(), + _width: this._panelWidth * .7 - this.propertiesWidth() * 0.7, _height: this._panelHeight, title: "Collection " + workspaceCount, }; @@ -367,7 +367,7 @@ export class MainView extends React.Component { @computed get dockingContent() { TraceMobx(); const mainContainer = this.mainContainer; - const width = this.flyoutWidth; + const width = this.flyoutWidth + this.propertiesWidth(); return
{!mainContainer ? (null) : this.mainDocView}
; @@ -388,10 +388,16 @@ export class MainView extends React.Component { setupMoveUpEvents(this, e, action((e: PointerEvent) => { this.flyoutWidth = Math.max(e.clientX, 0); this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; + if (this.flyoutWidth === 0) { + CurrentUserUtils.selectedPanel = "none"; + } return false; }), emptyFunction, action(() => { this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); + if (this.flyoutWidth === 0) { + CurrentUserUtils.selectedPanel = "none"; + } })); } } @@ -464,7 +470,7 @@ export class MainView extends React.Component { onClick={undefined} ScreenToLocalTransform={this.mainContainerXf} ContentScaling={returnOne} - PanelWidth={() => 70} + PanelWidth={() => 60} PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} @@ -484,6 +490,7 @@ export class MainView extends React.Component { @action @undoBatch closeFlyout = () => { + CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } @@ -493,10 +500,12 @@ export class MainView extends React.Component { @action @undoBatch selectMenu = (str: string) => { if (this.panelContent === str && this.flyoutWidth !== 0) { + CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } else { this.panelContent = str; + CurrentUserUtils.selectedPanel = str; switch (this.panelContent) { case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break; case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break; @@ -505,7 +514,8 @@ export class MainView extends React.Component { case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break; case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break; } - if (str === "Settings" || str === "Sharing" || str === "Help") { + if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") { + CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } else { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index e3f258b8d..e8173d103 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -18,7 +18,6 @@ import { DocHolderBox } from "./DocHolderBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FontIconBox } from "./FontIconBox"; -import { MenuIconBox } from "./MenuIconBox"; import { FieldView, FieldViewProps } from "./FieldView"; import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -190,7 +189,7 @@ export class DocumentContentsView extends React.Component; @@ -59,20 +61,45 @@ export class FontIconBox extends DocComponent( } render() { - const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc); - const refLayout = Doc.Layout(referenceDoc); - const button = ; - return !this.layoutDoc.toolTip ? button : - {StrCast(this.layoutDoc.toolTip)}}> - {button} - ; + + //style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}> + + if (this.layoutDoc.menuIcon) { + + let backgroundColor = "black"; + if (this.dataDoc.title === "Sharing" || this.dataDoc.title === "Help" || this.dataDoc.title === "Settings" || this.dataDoc.title === "Import") { + backgroundColor = "black"; + } else { + backgroundColor = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "black"; + } + + const color = backgroundColor === "lightgrey" ? "black" : "white"; + const menuBTN =
+ +
+ +
{this.dataDoc.title}
+
+
; + + return menuBTN; + } else { + const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc); + const refLayout = Doc.Layout(referenceDoc); + const button = ; + return !this.layoutDoc.toolTip ? button : + {StrCast(this.layoutDoc.toolTip)}}> + {button} + ; + } + } } \ No newline at end of file diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss deleted file mode 100644 index 1b72f5a8f..000000000 --- a/src/client/views/nodes/MenuIconBox.scss +++ /dev/null @@ -1,49 +0,0 @@ -.menuButton { - //padding: 7px; - padding-left: 7px; - width: 100%; - width: 60px; - height: 70px; - - .menuButton-wrap { - width: 45px; - /* padding: 5px; */ - touch-action: none; - background: black; - transform-origin: top left; - /* margin-bottom: 5px; */ - margin-top: 5px; - margin-right: 25px; - border-radius: 8px; - - &:hover { - background: rgb(61, 61, 61); - cursor: pointer; - } - } - - .menuButton-label { - color: white; - margin-right: 4px; - border-radius: 8px; - width: 42px; - position: relative; - text-align: center; - font-size: 8px; - margin-top: 1px; - letter-spacing: normal; - padding: 3px; - background-color: inherit; - } - - .menuButton-icon { - width: auto; - height: 35px; - padding: 5px; - } - - svg { - width: 95% !important; - height: 95%; - } -} \ No newline at end of file diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx deleted file mode 100644 index 0aa7b327e..000000000 --- a/src/client/views/nodes/MenuIconBox.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { createSchema, makeInterface } from '../../../fields/Schema'; -import { StrCast } from '../../../fields/Types'; -import { DocComponent } from '../DocComponent'; -import { FieldView, FieldViewProps } from './FieldView'; -import './MenuIconBox.scss'; -const MenuIconSchema = createSchema({ - icon: "string" -}); - -type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>; -const MenuIconDocument = makeInterface(MenuIconSchema); -@observer -export class MenuIconBox extends DocComponent(MenuIconDocument) { - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); } - _ref: React.RefObject = React.createRef(); - - render() { - - const color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white"; - const menuBTN =
-
- -
{this.dataDoc.title}
-
-
; - - return menuBTN; - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2