From bc8504151c8b6cb8c427f1f3c97c7f44eebc9426 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 27 Jan 2021 16:33:45 -0500 Subject: updated documentdecorations title display to be more visible on complex backgrounds. fixed link following behavior (espicall from presentations) to timeline annotations. --- src/client/views/DocComponent.tsx | 5 ++- src/client/views/DocumentDecorations.scss | 38 ++++++++++++---------- src/client/views/DocumentDecorations.tsx | 6 ++-- src/client/views/MainView.scss | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 10 +++--- src/client/views/nodes/PresBox.tsx | 7 ++-- 6 files changed, 39 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 8d545c61b..99f13295d 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -131,7 +131,10 @@ export function ViewBoxAnnotatableComponent

effectiveAcl === AclEdit || effectiveAcl === AclAdmin || GetEffectiveAcl(doc) === AclAdmin); if (docs.length) { const docs = doc instanceof Doc ? [doc] : doc; - docs.map(doc => doc.isPushpin = doc.annotationOn = undefined); + docs.map(doc => { + Doc.SetInPlace(doc, "isPushpin", undefined, true); + Doc.SetInPlace(doc, "annotationOn", undefined, true); + }); const targetDataDoc = this.dataDoc; const value = DocListCast(targetDataDoc[annotationKey ?? this.annotationKey]); const toRemove = value.filter(v => docs.includes(v)); diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index f9b8c1940..22e120167 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -79,7 +79,7 @@ $linkGap : 3px; grid-column: 5; grid-row: 4; border-radius: 100%; - background: dimgray; + background: black; height: 8; right: -12; top: 12; @@ -145,7 +145,7 @@ $linkGap : 3px; .documentDecorations-topRightResizer:hover, .documentDecorations-bottomLeftResizer:hover { cursor: nesw-resize; - background: dimGray; + background: black; opacity: 1; } @@ -169,6 +169,14 @@ $linkGap : 3px; cursor: pointer; } + .documentDecorations-titleBackground { + background: #ffffffcf; + border-radius: 8px; + width: 100%; + height: 100%; + position: absolute; + } + .documentDecorations-title { opacity: 1; grid-column-start: 2; @@ -177,26 +185,22 @@ $linkGap : 3px; overflow: hidden; text-align: center; display: flex; - border-bottom: solid 1px; - margin-left: 10px; - width: calc(100% - 10px); + margin-left: 5px; + height: 22px; + position: absolute; + .documentDecorations-titleSpan { + width: 100%; + border-radius: 8px; + background: #ffffffcf; + position: absolute; + display: inline-block; + cursor: move; + } } .focus-visible { margin-left: 0px; } - - .publishBox { - width: 20px; - height: 22px; - grid-column-start: 3; - grid-column-end: 4; - pointer-events: all; - background: darkgray; - display: inline-block; - position: absolute; - right: 0; - } } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 54e0a7ac7..8d8f4cd3b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -577,8 +577,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b const titleArea = this._edtingTitle ? this.titleBlur(true)} onChange={action(e => this._accumulatedTitle = e.target.value)} onKeyPress={this.titleEntered} /> : -

- {`${this.selectionTitle}`} +
+ {`${this.selectionTitle}`}
; let inMainMenuPanel = false; @@ -612,7 +612,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight, }}> {closeIcon} - {bounds.r - bounds.x < 100 ? null : titleArea} + {titleArea} {seldoc.props.hideResizeHandles ? (null) : <> {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index d6a455a22..8ccb64744 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -61,7 +61,7 @@ } .mainView-container { - color: dimgray; + color: black; .lm_title { background: #cacaca; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 73375569f..8c3f0997f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -931,11 +931,13 @@ export class CollectionFreeFormView extends CollectionSubView self._dragArray.splice(0, self._dragArray.length, ...dragViewCache); self._eleArray.splice(0, self._eleArray.length, ...eleViewCache); }); - const openInTab = () => { - collectionDocView ? collectionDocView.props.addDocTab(targetDoc, "") : this.props.addDocTab(targetDoc, ":left"); + const openInTab = (doc: Doc, finished?: () => void) => { + collectionDocView ? collectionDocView.props.addDocTab(doc, "") : this.props.addDocTab(doc, ":left"); this.layoutDoc.presCollection = targetDoc; // this still needs some fixing setTimeout(resetSelection, 500); + doc !== targetDoc && setTimeout(() => finished?.(), 100); /// give it some time to create the targetDoc if we're opening up its context }; // If openDocument is selected then it should open the document for the user if (activeItem.openDocument) { - openInTab(); + openInTab(targetDoc); } else if (curDoc.presMovement === PresMovement.Pan && targetDoc) { await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) { -- cgit v1.2.3-70-g09d2