diff options
| -rw-r--r-- | src/client/views/DocumentDecorations.scss | 21 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 10 |
2 files changed, 16 insertions, 15 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index d1b6c5772..4f23681ac 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -221,29 +221,30 @@ $resizeHandler: 8px; pointer-events: auto; min-width: fit-content; text-align: center; - width: 125px; display: flex; height: 21px; opacity: 0.3; &:hover { opacity: 1; } + .checkbox{ - position: fixed; display: inline; - margin-top: -2px; - margin-left: -5px; - font-size: 7px; .checkbox-box{ - transform: scale(.7); + display: inline; + position: relative; + top: -2.5; + left: 35; + zoom: .7; } - .checkbox-text{ - font-size: 7px; - margin-top: 10px; - margin-left: -20px; + & .checkbox-text{ + display: inline; + position: relative; + top: 2; + font-size: 8px; } } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 3b51f8c61..4da6bd697 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -829,8 +829,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P <div className='documentDecorations-share' > <div className={`documentDecorations-share${shareMode}`}> - <span>{shareSymbolIcon + ' ' + shareMode}</span> - + {shareSymbolIcon + ' ' + shareMode} + <div className='checkbox'> <div className='checkbox-box'> <input type="checkbox" checked={this.showLayoutAcl} onChange={action(() => (this.showLayoutAcl = !this.showLayoutAcl))} /> @@ -843,7 +843,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P ) : ( <div /> ); - + const titleArea = this._editingTitle ? ( <input ref={this._keyinput} @@ -859,7 +859,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P /> ) : ( <div className="documentDecorations-title" key="title" onPointerDown={e => {e.stopPropagation}}> - <span className={`documentDecorations-titleSpan${colorScheme}`} onPointerDown={this.onTitleDown}>{`${hideTitle ? '' : this.selectionTitle}`}</span> + { hideTitle ? null : <span className={`documentDecorations-titleSpan${colorScheme}`} onPointerDown={this.onTitleDown}>{this.selectionTitle}</span>} {sharingMenu} {!useLock ? null : ( <Tooltip key="lock" title={<div className="dash-tooltip">toggle ability to interact with document</div>} placement="top"> @@ -903,7 +903,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P <div className="documentDecorations-topbar" style={{ display: hideDeleteButton && hideTitle && hideOpenButton ? 'none' : undefined }} onPointerDown={this.onContainerDown}> {hideDeleteButton ? null : topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')} {hideResizers || hideDeleteButton ? null : topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')} - {hideTitle ? null : titleArea} + {titleArea} {hideOpenButton ? <div /> : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Lightbox (ctrl: as alias, shift: in new collection)')} </div> {hideResizers ? null : ( |