From c9f379adab864132e6cf044f808a43254601e4bb Mon Sep 17 00:00:00 2001 From: geireann Date: Fri, 30 Jul 2021 13:26:25 -0400 Subject: major UI / updates + refactoring --- src/client/views/DocumentButtonBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/DocumentButtonBar.tsx') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index a5d80cd22..b11aa99b0 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -24,7 +24,7 @@ import { DocumentView } from './nodes/DocumentView'; import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; import { TemplateMenu } from "./TemplateMenu"; import React = require("react"); -import { PresBox } from './nodes/PresBox'; +import { PresBox } from './nodes/trails/PresBox'; import { undoBatch } from '../util/UndoManager'; import { CollectionViewType } from './collections/CollectionView'; const higflyout = require("@hig/flyout"); -- cgit v1.2.3-70-g09d2 From b44c8e15662b26a1f848fd241a4e13ef4312c877 Mon Sep 17 00:00:00 2001 From: geireann Date: Sat, 31 Jul 2021 00:08:14 -0400 Subject: more updates --- src/client/views/DocumentButtonBar.tsx | 7 ++++--- src/client/views/nodes/DocumentLinksButton.scss | 9 ++++----- src/client/views/nodes/DocumentLinksButton.tsx | 19 ++++++++++++++----- 3 files changed, 22 insertions(+), 13 deletions(-) (limited to 'src/client/views/DocumentButtonBar.tsx') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index b11aa99b0..1e5380971 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from '@material-ui/core'; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc } from "../../fields/Doc"; +import { Doc, DocCastAsync } from "../../fields/Doc"; import { RichTextField } from '../../fields/RichTextField'; import { Cast, NumCast, StrCast } from "../../fields/Types"; import { emptyFunction, setupMoveUpEvents, simulateMouseClick } from "../../Utils"; @@ -348,16 +348,17 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV if (!this.view0) return (null); const isText = this.view0.props.Document[this.view0.LayoutFieldKey] instanceof RichTextField; + const doc = this.view0?.props.Document; const considerPull = isText && this.considerGoogleDocsPull; const considerPush = isText && this.considerGoogleDocsPush; return
- {DocumentLinksButton.StartLink || !Doc.UserDoc()["documentLinksButton-fullMenu"] ?
+ {(DocumentLinksButton.StartLink || Doc.UserDoc()["documentLinksButton-fullMenu"]) && DocumentLinksButton.StartLink != doc ?
: (null)} - {!Doc.UserDoc()["documentLinksButton-fullMenu"] ? (null) :
+ {/*!Doc.UserDoc()["documentLinksButton-fullMenu"] ? (null) :
{this.templateButton}
/*
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index daffaf9e7..1fc71b5f8 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -44,16 +44,15 @@ } .documentLinksButton-endLink { - border: red solid 2px; - + border: $medium-blue 2px dashed; + color: $medium-blue; &:hover { - background: deepskyblue; + background: $light-gray; transform: scale(1.05); cursor: pointer; } } .documentLinksButton-startLink { - border: red solid 2px; - background-color: rgba(255, 192, 203, 0.5); + background-color: $medium-blue; } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index a6d07374a..e3cbade38 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -20,6 +20,7 @@ import './DocumentLinksButton.scss'; import { DocServer } from "../../DocServer"; import { LightboxView } from "../LightboxView"; import { cat } from "shelljs"; +import { Colors } from "../global/globalEnums"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -252,8 +253,8 @@ export class DocumentLinksButton extends React.Component @@ -267,17 +268,25 @@ export class DocumentLinksButton extends React.Component DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)} /> + onClick={e => DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}> + {this.props.StartLink ? + + : link} +
: (null) } {DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.InMenu && this.props.StartLink ? -
+
+ {this.props.StartLink ? + + : link} +
: (null) }
; -- cgit v1.2.3-70-g09d2 From d3a7e378e26466b911733f76addfe9fc61a689df Mon Sep 17 00:00:00 2001 From: geireann Date: Sat, 31 Jul 2021 18:17:35 -0400 Subject: fixed linking issues with dragging & updating linking UI --- src/client/views/DocumentButtonBar.scss | 21 +++++ src/client/views/DocumentButtonBar.tsx | 26 +++--- src/client/views/DocumentDecorations.scss | 2 +- .../views/collections/CollectionLinearView.scss | 8 +- src/client/views/global/globalCssVariables.scss | 2 +- src/client/views/nodes/DocumentLinksButton.scss | 38 ++++++-- src/client/views/nodes/DocumentLinksButton.tsx | 102 ++++++++++----------- src/client/views/topbar/TopBar.scss | 3 +- src/client/views/topbar/TopBar.tsx | 1 - 9 files changed, 119 insertions(+), 84 deletions(-) (limited to 'src/client/views/DocumentButtonBar.tsx') diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 157f3a4f2..171e7134f 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -59,6 +59,7 @@ $linkGap : 3px; align-items: center; } +// depracated (now use .documentButtonBar-icon) for standard buttons .documentButtonBar-linker { height: 20px; width: 20px; @@ -74,6 +75,26 @@ $linkGap : 3px; } } +.documentButtonBar-icon { + height: 80%; + width: 80%; + font-size: 100%; + text-align: center; + border-radius: 50%; + pointer-events: auto; + background-color: $dark-gray; + border: none; + transition: 0.2s ease all; + display: flex; + align-content: center; + justify-content: center; + align-items: center; + + &:hover { + background-color: $black; + } +} + .documentButtonBar-linker:hover { cursor: pointer; transform: scale(1.05); diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 1e5380971..df1e6899d 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -110,7 +110,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}>
{ await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); @@ -139,7 +139,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) :
{title}
}> -
{ if (e.altKey) { @@ -188,8 +188,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) : {"follow primary link on click"}
}> -
this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, false, false)))}>
@@ -200,7 +200,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) : {SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}
}> -
this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))}> @@ -243,7 +243,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const presPinWithViewIcon = ; const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{"Pin with current view"}
}> -
this.pinWithView(targetDoc)}> +
this.pinWithView(targetDoc)}> {presPinWithViewIcon}
; @@ -253,8 +253,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get shareButton() { const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{"Open Sharing Manager"}
}> -
SharingManager.Instance.open(this.view0, targetDoc)}> - +
SharingManager.Instance.open(this.view0, targetDoc)}> +
; } @@ -262,8 +262,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get menuButton() { const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{`Open Context Menu`}
}> -
this.openContextMenu(e)}> - +
this.openContextMenu(e)}> +
; } @@ -271,9 +271,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get moreButton() { const targetDoc = this.view0?.props.Document; return !targetDoc ? (null) :
{`${CurrentUserUtils.propertiesWidth > 0 ? "Close" : "Open"} Properties Panel`}
}> -
+
CurrentUserUtils.propertiesWidth = CurrentUserUtils.propertiesWidth > 0 ? 0 : 250)}> -
; } @@ -286,7 +286,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV dv).map(dv => dv!.props.Document)} suggestWithFunction /> /* tfs: @bcz This might need to be the data document? */}>
e.stopPropagation()} > - {} + {}
; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 952d8d150..316f63240 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -336,7 +336,7 @@ $linkGap : 3px; } .documentdecorations-icon { - margin-top: 3px; + margin: 0px; } .templating-button, .docDecs-tagButton { diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 86610ac20..913a65774 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -20,7 +20,7 @@ } .bottomPopup-background { - background: $light-blue; + background: $medium-blue; display: flex; height: 35; transform: translate3d(6px, 0px, 0px); @@ -30,7 +30,7 @@ } .bottomPopup-text { - color: black; + color: $white; display: inline; white-space: nowrap; padding-left: 8px; @@ -45,7 +45,7 @@ padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: #efefef; + background-color: $light-gray; border-radius: 3px; color: black; margin-right: 5px; @@ -58,7 +58,7 @@ padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: #f3b6b6; + background-color: $close-red; border-radius: 3px; color: black; } diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index a9f33c4da..1b881ba43 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -11,7 +11,7 @@ $medium-blue: #4476F7; $pink: #E0217D; $yellow: #F5D747; -$logout-red: #ca4444; +$close-red: #e48282; $drop-shadow: "#32323215"; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 9bab72d55..b37b68249 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -44,25 +44,43 @@ } .documentLinksButton { - background-color: black; + background-color: $dark-gray; + color: $white; font-weight: bold; + width: 80%; + height: 80%; + font-size: 100%; + transition: 0.2s ease all; &:hover { - transform: scale(1.05); - cursor: pointer; + background-color: $black; + } +} + +.documentLinksButton.startLink { + background-color: $medium-blue; + color: $white; + font-weight: bold; + width: 80%; + height: 80%; + font-size: 100%; + transition: 0.2s ease all; + + &:hover { + background-color: $black; } } .documentLinksButton-endLink { border: $medium-blue 2px dashed; color: $medium-blue; + background-color: none !important; + width: 80%; + height: 80%; + font-size: 100%; + transition: 0.2s ease all; + &:hover { - background: $light-gray; - transform: scale(1.05); - cursor: pointer; + background-color: $light-blue; } -} - -.documentLinksButton-startLink { - background-color: $medium-blue; } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index cec06d2d4..482f551b5 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -68,6 +68,40 @@ export class DocumentLinksButton extends React.Component { + setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { + if (doubleTap) { + const rootDoc = this.props.View.rootDoc; + const docid = Doc.CurrentUserEmail + Doc.GetProto(rootDoc)[Id] + "-pivotish"; + DocServer.GetRefField(docid).then(async docx => { + const rootAlias = () => { + const rootAlias = Doc.MakeAlias(rootDoc); + rootAlias.x = rootAlias.y = 0; + return rootAlias; + }; + let wid = rootDoc[WidthSym](); + const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid); + const docs = await DocListCastAsync(Doc.GetProto(target).data); + if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target); + DocListCast(rootDoc.links).forEach(link => { + const other = LinkManager.getOppositeAnchor(link, rootDoc); + const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other; + if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) { + const alias = Doc.MakeAlias(otherdoc); + alias.x = wid; + alias.y = 0; + alias._lockedPosition = false; + wid += otherdoc[WidthSym](); + Doc.AddDocToList(Doc.GetProto(target), "data", alias); + } + }); + LightboxView.SetLightboxDoc(target); + }); + } + else DocumentLinksButton.LinkEditorDocView = this.props.View; + })); + } + @undoBatch onLinkButtonDown = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { @@ -80,37 +114,7 @@ export class DocumentLinksButton extends React.Component { - const rootAlias = () => { - const rootAlias = Doc.MakeAlias(rootDoc); - rootAlias.x = rootAlias.y = 0; - return rootAlias; - }; - let wid = rootDoc[WidthSym](); - const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid); - const docs = await DocListCastAsync(Doc.GetProto(target).data); - if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target); - DocListCast(rootDoc.links).forEach(link => { - const other = LinkManager.getOppositeAnchor(link, rootDoc); - const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other; - if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) { - const alias = Doc.MakeAlias(otherdoc); - alias.x = wid; - alias.y = 0; - alias._lockedPosition = false; - wid += otherdoc[WidthSym](); - Doc.AddDocToList(Doc.GetProto(target), "data", alias); - } - }); - LightboxView.SetLightboxDoc(target); - }); - } - else DocumentLinksButton.LinkEditorDocView = this.props.View; - } + }; })); } @@ -126,7 +130,6 @@ export class DocumentLinksButton extends React.Component Doc.BrushDoc(this.props.View.Document)); } else if (!this.props.InMenu) { DocumentLinksButton.LinkEditorDocView = this.props.View; @@ -247,17 +250,19 @@ export class DocumentLinksButton extends React.Component; - + const isActive = (DocumentLinksButton.StartLink === this.props.View.props.Document) && this.props.StartLink; return (!this.props.InMenu ? -
: -
+
{this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node
DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}> - {this.props.StartLink ? - - : link} +
: (null) } { - this.props.InMenu ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again -
- {this.props.StartLink ? - - : link} + this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again +
+
- : (null)} + : + (null) + }
) } diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index ebdf030e7..ac6ec9b30 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -23,6 +23,7 @@ .topBar-icon { cursor: pointer; font-size: 12px; + font-family: 'Roboto'; width: fit-content; display: flex; justify-content: center; @@ -91,7 +92,7 @@ gap: 5px; .topBar-icon:hover { - background-color: $logout-red; + background-color: $close-red; } .topbar-lozenge-user, diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index bd9935333..05edb975c 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -12,7 +12,6 @@ import { Borders, Colors } from "../global/globalEnums"; import "./TopBar.scss"; /** - * REACT TYPE: FUNCTIONAL * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. */ -- cgit v1.2.3-70-g09d2