From dc942e6228e003caa3754a72c0e126d64332a004 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 1 Nov 2022 18:29:11 -0400 Subject: fixes for goldenlayout to initialize more cleanly. updated all old ReactDOM.render() to ReactDom.createRoot(). fixes for PDF/Web sidebar sizing. added text from pdf selection anchors to sidebar notes. fixed PDF text selection to align properly. --- src/client/views/DocumentDecorations.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 4e0b061a6..fe1190e27 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -250,8 +250,8 @@ $resizeHandler: 8px; .documentDecorations-lock { position: absolute; background: black; - right: 11; - top: 30px; + right: 23px; + top: 3px; color: gray; height: 14; width: 14; @@ -260,6 +260,7 @@ $resizeHandler: 8px; display: flex; align-items: center; flex-direction: column; + border-radius: 15%; } .documentDecorations-rotationPath { -- cgit v1.2.3-70-g09d2 From dcc1c3cb204f5ffe506860daf772f2e978371738 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 2 Nov 2022 09:57:16 -0400 Subject: made decorations semi transparent until hover to make ui less noisy --- src/client/views/DocumentDecorations.scss | 31 +++++++++++++------ src/client/views/DocumentDecorations.tsx | 51 ++++++++++++++++--------------- src/client/views/nodes/VideoBox.tsx | 3 +- 3 files changed, 51 insertions(+), 34 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index fe1190e27..b41962c73 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -25,6 +25,10 @@ $resizeHandler: 8px; align-items: center; text-align: center; font-size: 30px; + opacity: 0.1; + &:hover { + opacity: 1; + } } .documentDecorations-rotationCenter { position: absolute; @@ -72,10 +76,12 @@ $resizeHandler: 8px; height: 20px; min-width: 20px; border-radius: 100%; + opacity: 0.5; cursor: pointer; &:hover { color: #02600d; + opacity: 1; } } @@ -93,10 +99,12 @@ $resizeHandler: 8px; height: 20px; min-width: 20px; border-radius: 100%; + opacity: 0.5; cursor: pointer; &:hover { color: #a94442; + opacity: 1; } > svg { @@ -120,10 +128,12 @@ $resizeHandler: 8px; height: 20px; min-width: 20px; border-radius: 100%; + opacity: 0.5; cursor: pointer; &:hover { color: #a94442; + opacity: 1; } > svg { @@ -144,6 +154,10 @@ $resizeHandler: 8px; border-radius: 8px; outline: none; border: none; + opacity: 0.3; + &:hover { + opacity: 1; + } .documentDecorations-titleSpan, .documentDecorations-titleSpan-Dark { @@ -206,7 +220,7 @@ $resizeHandler: 8px; .documentDecorations-rightResizer { pointer-events: auto; background: $medium-gray; - opacity: 0.1; + opacity: 0.2; &:hover { opacity: 1; } @@ -248,10 +262,8 @@ $resizeHandler: 8px; } .documentDecorations-lock { - position: absolute; + position: relative; background: black; - right: 23px; - top: 3px; color: gray; height: 14; width: 14; @@ -261,6 +273,7 @@ $resizeHandler: 8px; align-items: center; flex-direction: column; border-radius: 15%; + cursor: default; } .documentDecorations-rotationPath { @@ -277,7 +290,6 @@ $resizeHandler: 8px; .documentDecorations-bottomRightResizer { cursor: nwse-resize; background: unset; - opacity: 1; transform: scale(2); } @@ -317,7 +329,6 @@ $resizeHandler: 8px; .documentDecorations-bottomRightResizer { cursor: nwse-resize; background: unset; - opacity: 1; } .documentDecorations-topLeftResizer { @@ -333,7 +344,6 @@ $resizeHandler: 8px; .documentDecorations-topLeftResizer:hover, .documentDecorations-bottomRightResizer:hover { opacity: 1; - background: black; } .documentDecorations-bottomRightResizer { @@ -344,7 +354,6 @@ $resizeHandler: 8px; .documentDecorations-bottomLeftResizer { cursor: nesw-resize; background: unset; - opacity: 1; transform: scale(2); } @@ -360,7 +369,6 @@ $resizeHandler: 8px; .documentDecorations-topRightResizer:hover, .documentDecorations-bottomLeftResizer:hover { - background: black; opacity: 1; } @@ -414,6 +422,11 @@ $resizeHandler: 8px; gap: 5px; top: 4px; background: $light-gray; + opacity: 0.2; + pointer-events: all; + &:hover { + opacity: 1; + } } .linkButtonWrapper { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8e0686038..47347284c 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -755,24 +755,6 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P ); const colorScheme = StrCast(Doc.ActiveDashboard?.colorScheme); - const titleArea = this._editingTitle ? ( - !hideTitle && this.titleBlur()} - onChange={action(e => !hideTitle && (this._accumulatedTitle = e.target.value))} - onKeyDown={hideTitle ? emptyFunction : this.titleEntered} - onPointerDown={e => e.stopPropagation()} - /> - ) : ( -
- {`${hideTitle ? '' : this.selectionTitle}`} -
- ); const leftBounds = this.props.boundsLeft; const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop; @@ -782,7 +764,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth)); bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight)); - const useLock = bounds.r - bounds.x > 120; + const useLock = bounds.r - bounds.x > 135 && seldocview.props.CollectionFreeFormDocumentView; const useRotation = seldocview.rootDoc.type !== DocumentType.EQUATION; // when do we want an object to not rotate? const rotation = NumCast(seldocview.rootDoc._rotation); @@ -795,6 +777,32 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2); const radiusHandle = (borderRadius / docMax) * maxDist; const radiusHandleLocation = Math.min(radiusHandle, maxDist); + + const titleArea = this._editingTitle ? ( + !hideTitle && this.titleBlur()} + onChange={action(e => !hideTitle && (this._accumulatedTitle = e.target.value))} + onKeyDown={hideTitle ? emptyFunction : this.titleEntered} + onPointerDown={e => e.stopPropagation()} + /> + ) : ( +
+ {`${hideTitle ? '' : this.selectionTitle}`} + {!useLock ? null : ( + toggle ability to interact with document
} placement="top"> +
e.preventDefault()}> + +
+ + )} + + ); return (
e.preventDefault()} /> )} - {!useLock ? null : ( -
e.preventDefault()}> - -
- )} {hideDocumentButtonBar ? null : (
Date: Wed, 2 Nov 2022 10:42:25 -0400 Subject: select docs when title header is edited. fixed doc decoration top border. sort sidebar annos by y coord --- src/client/views/DocumentDecorations.scss | 4 +++- src/client/views/SidebarAnnos.tsx | 9 ++++++++- src/client/views/collections/CollectionStackingView.tsx | 12 ++++++++---- src/client/views/nodes/DocumentView.tsx | 5 ++++- 4 files changed, 23 insertions(+), 7 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index b41962c73..ccac5ffe4 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,7 +1,7 @@ @import 'global/globalCssVariables'; $linkGap: 3px; -$headerHeight: 25px; +$headerHeight: 20px; $resizeHandler: 8px; .documentDecorations-Dark, @@ -424,7 +424,9 @@ $resizeHandler: 8px; background: $light-gray; opacity: 0.2; pointer-events: all; + transition: opacity 1s; &:hover { + transition: unset; opacity: 1; } } diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index df1eb72ce..869caabd1 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; import { Doc, DocListCast, StrListCast } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; -import { NumCast, StrCast } from '../../fields/Types'; +import { DocCast, NumCast, StrCast } from '../../fields/Types'; import { emptyFunction, OmitKeys, returnAll, returnOne, returnTrue, returnZero } from '../../Utils'; import { Docs, DocUtils } from '../documents/Documents'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; @@ -66,6 +66,7 @@ export class SidebarAnnos extends React.Component { _height: 50, _fitWidth: true, _autoHeight: true, + _isLinkButton: true, _fontSize: StrCast(Doc.UserDoc().fontSize), _fontFamily: StrCast(Doc.UserDoc().fontFamily), }); @@ -133,6 +134,11 @@ export class SidebarAnnos extends React.Component { docFilters = () => [...StrListCast(this.props.layoutDoc._docFilters), ...StrListCast(this.props.layoutDoc[this.filtersKey])]; showTitle = () => 'title'; setHeightCallback = (height: number) => this.props.setHeight?.(height + this.filtersHeight()); + sortByLinkAnchorY = (a: Doc, b: Doc) => { + const ay = DocListCast(a.links).length && DocCast(DocListCast(a.links)[0].anchor1).y; + const by = DocListCast(b.links).length && DocCast(DocListCast(b.links)[0].anchor1).y; + return NumCast(ay) - NumCast(by); + }; render() { const renderTag = (tag: string) => { const active = StrListCast(this.props.rootDoc[this.filtersKey]).includes(`${tag}:${tag}:check`); @@ -184,6 +190,7 @@ export class SidebarAnnos extends React.Component { PanelWidth={this.panelWidth} docFilters={this.docFilters} scaleField={this.sidebarKey + '-scale'} + sortFunc={this.sortByLinkAnchorY} setHeight={this.setHeightCallback} isAnnotationOverlay={false} select={emptyFunction} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 77b47ed82..175051d5c 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -3,12 +3,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CursorProperty } from 'csstype'; import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import { DataSym, Doc, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; +import { DataSym, Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; -import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; @@ -33,6 +33,7 @@ import { CollectionSubView } from './CollectionSubView'; const _global = (window /* browser */ || global) /* node */ as any; export type collectionStackingViewProps = { + sortFunc?: (a: Doc, b: Doc) => number; chromeHidden?: boolean; // view type is stacking viewType?: CollectionViewType; @@ -73,7 +74,9 @@ export class CollectionStackingView extends CollectionSubView pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout); + const children = this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout); + if (this.props.sortFunc) children.sort(this.props.sortFunc); + return children; } // how much margin we give the header @computed get headerMargin() { @@ -305,6 +308,7 @@ export class CollectionStackingView extends CollectionSubView this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined; + isChildButtonContentActive = () => (this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined); // this is what renders the document that you see on the screen // called in Children: this actually adds a document to our children list getDisplayDoc(doc: Doc, width: () => number) { @@ -326,7 +330,7 @@ export class CollectionStackingView extends CollectionSubView (showTitle.split(';').length === 1 ? showTitle + '=' + Field.toString(targetDoc[showTitle.split(';')[0]] as any as Field) : '#' + showTitle)} + GetValue={() => { + this.props.select(false); + return showTitle.split(';').length === 1 ? showTitle + '=' + Field.toString(targetDoc[showTitle.split(';')[0]] as any as Field) : '#' + showTitle; + }} SetValue={undoBatch((input: string) => { if (input?.startsWith('#')) { if (this.props.showTitle) { -- cgit v1.2.3-70-g09d2