diff options
Diffstat (limited to 'src/client/views/collections')
4 files changed, 36 insertions, 18 deletions
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index a963f1cb9..7f62ecaa0 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -1,3 +1,6 @@ +@import "../global/globalCssVariables.scss"; + + input.lm_title:focus, input.lm_title { max-width: unset !important; @@ -57,12 +60,11 @@ input.lm_title { } } -.miniMap-hidden, .miniMap { position: absolute; overflow: hidden; - right: 10; - bottom: 10; + right: 15; + bottom: 15; border: solid 1px; box-shadow: black 0.4vw 0.4vw 0.8vw; width: 100%; @@ -82,17 +84,21 @@ input.lm_title { } .miniMap-hidden { + cursor: pointer; position: absolute; - bottom: 0; - right: 0; - width: 45px; - height: 45px; - transform: translate(20px, 20px) rotate(45deg); - border-radius: 30px; + bottom: 5; + display: flex; + right: 5; + width: 25px; + height: 25px; + border-radius: 3px; padding: 2px; + justify-content: center; + align-items: center; + align-content: center; + background-color: $light-gray; - >svg { - margin-top: 3px; - transform: translate(0px, 7px); + &:hover { + box-shadow: none; } }
\ No newline at end of file diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 00de36400..a999512cc 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -34,6 +34,7 @@ import { CollectionView, CollectionViewType } from './CollectionView'; import "./TabDocView.scss"; import React = require("react"); import Color = require('color'); +import { Colors, Shadows } from '../global/globalEnums'; const _global = (window /* browser */ || global /* node */) as any; interface TabDocViewProps { @@ -386,8 +387,15 @@ export class TabDocView extends React.Component<TabDocViewProps> { background={this.miniMapColor} document={this._document} tabView={this.tabView} /> - <Tooltip style={{ display: this.disableMinimap() ? "none" : undefined }} key="ttip" title={<div className="dash-tooltip">{"toggle minimap"}</div>}> - <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} > + <Tooltip style={{ display: this.disableMinimap() ? "none" : undefined }} key="ttip" title={<div className="dash-tooltip">{this._document.hideMinimap ? "Open minimap" : "Close minimap"}</div>}> + <div className="miniMap-hidden" + style={{ + color: this._document.hideMinimap ? Colors.BLACK : Colors.WHITE, + backgroundColor: this._document.hideMinimap ? Colors.LIGHT_GRAY : Colors.MEDIUM_BLUE, + boxShadow: this._document.hideMinimap ? Shadows.STANDARD_SHADOW : undefined + }} + onPointerDown={e => e.stopPropagation()} + onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} > <FontAwesomeIcon icon={"globe-asia"} size="lg" /> </div> </Tooltip> diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss index 44752e034..24c9bc9cb 100644 --- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss +++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss @@ -89,7 +89,7 @@ padding: 5; border-radius: 2px; height: 25; - + min-width: 25; margin: 0; color: $white; display: flex; diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx index 48f50cf2d..990c2e4b2 100644 --- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx @@ -17,7 +17,7 @@ import { StyleProp } from '../../StyleProvider'; import "./CollectionLinearView.scss"; import { CollectionSubView } from '.././CollectionSubView'; import { CollectionViewType } from '.././CollectionView'; -import { Colors } from '../../global/globalEnums'; +import { Colors, Shadows } from '../../global/globalEnums'; type LinearDocument = makeInterface<[typeof documentSchema,]>; @@ -112,6 +112,8 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not + const floating: boolean = BoolCast(this.props.Document.linearViewFloating); // Specify whether it is expandable or not + const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle @@ -121,7 +123,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { backgroundColor: backgroundColor === color ? "black" : BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.LIGHT_GRAY }} onPointerDown={e => e.stopPropagation()} > - <div className="collectionLinearView-menuOpener"> + <div className="collectionLinearView-menuOpener" + style={{ boxShadow: floating ? Shadows.STANDARD_SHADOW : undefined }} + > {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : "–" : icon ? icon : "+"} </div> </label>; @@ -181,7 +185,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { </div>; })} </div> - {DocumentLinksButton.StartLink ? <span className="bottomPopup-background" style={{ + {DocumentLinksButton.StartLink && StrCast(this.layoutDoc.title) === "docked buttons" ? <span className="bottomPopup-background" style={{ pointerEvents: "all" }} onPointerDown={e => e.stopPropagation()} > |