From 661c1367d27fa23c3aeb62369e92cd36eb5edabd Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 21 Oct 2023 00:41:23 -0400 Subject: change to doc decorations to be more "lightweight". made linkBox render links in a freeform view as a DocView. added an auto-reset view option for freeforms. fixed highlighting ink strokes. Made groups behave better for selecting things 'inside' the group bounding box that aren't in the group. Added vertically centered text option. --- src/client/views/DocumentDecorations.scss | 42 ++++++++++++++++--------------- 1 file changed, 22 insertions(+), 20 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index ca3610cc0..2764339e6 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -19,13 +19,13 @@ $resizeHandler: 8px; position: absolute; pointer-events: all; cursor: pointer; - background: white; + background: transparent; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 30px; - opacity: 0.1; + opacity: 0.6; &:hover { opacity: 1; } @@ -227,20 +227,19 @@ $resizeHandler: 8px; &:hover { opacity: 1; } - - .checkbox{ + .checkbox { display: inline; - .checkbox-box{ + .checkbox-box { display: inline; position: relative; top: -2.5; left: 35; - zoom: .7; + zoom: 0.7; } - & .checkbox-text{ + & .checkbox-text { display: inline; position: relative; top: 1.5; @@ -248,7 +247,7 @@ $resizeHandler: 8px; } } - .documentDecorations-shareNone{ + .documentDecorations-shareNone { width: calc(100% + 10px); background: grey; color: rgb(71, 71, 71); @@ -256,29 +255,28 @@ $resizeHandler: 8px; border: 2px solid rgb(71, 71, 71); } .documentDecorations-shareEdit, - .documentDecorations-shareAdmin{ + .documentDecorations-shareAdmin { width: calc(100% + 10px); background: rgb(254, 254, 199); color: rgb(75, 75, 5); border-radius: 8px; border: 2px solid rgb(75, 75, 5); } - .documentDecorations-shareAugment{ + .documentDecorations-shareAugment { width: calc(100% + 10px); background: rgb(208, 255, 208); - color:rgb(19, 80, 19); + color: rgb(19, 80, 19); border-radius: 8px; border: 2px solid rgb(19, 80, 19); - } - .documentDecorations-shareView{ + .documentDecorations-shareView { width: calc(100% + 10px); background: rgb(213, 213, 255); color: rgb(25, 25, 101); border-radius: 8px; border: 2px solid rgb(25, 25, 101); } - .documentDecorations-shareNot-Shared{ + .documentDecorations-shareNot-Shared { width: calc(100% + 10px); background: rgb(255, 207, 207); color: rgb(146, 58, 58); @@ -320,8 +318,8 @@ $resizeHandler: 8px; .documentDecorations-bottomResizer, .documentDecorations-rightResizer { pointer-events: auto; - background: $medium-gray; - opacity: 0.2; + background: $medium-gray-dim; + //opacity: 0.2; &:hover { opacity: 1; } @@ -354,7 +352,7 @@ $resizeHandler: 8px; position: absolute; border-radius: 100%; left: 7px; - top: 27px; + top: 7px; background: $medium-gray; height: 10; width: 10; @@ -447,9 +445,9 @@ $resizeHandler: 8px; opacity: 1; } - .documentDecorations-bottomRightResizer { - grid-row: 4; - } + // .documentDecorations-bottomRightResizer { + // grid-row: 4; + // } .documentDecorations-topRightResizer, .documentDecorations-bottomLeftResizer { @@ -488,6 +486,10 @@ $resizeHandler: 8px; } } +.documentDecorations-container.showNothing { + margin-top: $headerHeight; + grid-template-rows: $resizeHandler 1fr $resizeHandler; +} .documentDecorations-background { background: lightblue; position: absolute; -- cgit v1.2.3-70-g09d2 From 3141c62397071efee60510ef90df69ff04701757 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 21 Oct 2023 14:26:33 -0400 Subject: change doc decorations rotation icon to bottom right. cleaned up lock icon. fixed autoresetview of collections to not fire when dragging. --- src/client/views/DocumentDecorations.scss | 17 +++++++++++------ src/client/views/DocumentDecorations.tsx | 8 +++----- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- 3 files changed, 15 insertions(+), 12 deletions(-) (limited to 'src/client/views/DocumentDecorations.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 2764339e6..f41cf1385 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -14,8 +14,9 @@ $resizeHandler: 8px; border-radius: 100%; height: 30; width: 30; - right: -30; - top: calc(50% - 15px); + right: -40; + bottom: -40; + //top: calc(50% - 15px); position: absolute; pointer-events: all; cursor: pointer; @@ -364,15 +365,19 @@ $resizeHandler: 8px; position: relative; background: black; color: rgb(145, 144, 144); - height: 14; - width: 14; + height: 20; + width: 20; pointer-events: all; margin: auto; display: flex; align-items: center; - flex-direction: column; - border-radius: 15%; + border-radius: 100%; cursor: default; + svg { + width: 10; + height: 10; + margin: auto; + } } .documentDecorations-rotationPath { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8b8b7fa4d..f40d2ae8b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -845,9 +845,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P   */} - ) : ( -
- ); + ) : null; const titleArea = this._editingTitle ? ( {this._isRotating ? null : ( tap to set rotate center, drag to rotate
}> -
e.preventDefault()}> +
e.preventDefault()}> } color={SettingsManager.userColor} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 5eff6b8e0..6c1308c0a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1631,7 +1631,7 @@ export class CollectionFreeFormView extends CollectionSubView this.isContentActive(), // if autoreset is on, then whenever the view is selected, it will be restored to it default pan/zoom positions - active => this.rootDoc[this.autoResetFieldKey] && active && this.resetView() + active => !SnappingManager.GetIsDragging() && this.rootDoc[this.autoResetFieldKey] && active && this.resetView() ); this._disposers.fitContent = reaction( -- cgit v1.2.3-70-g09d2