diff options
Diffstat (limited to 'src/client/views/LightboxView.tsx')
| -rw-r--r-- | src/client/views/LightboxView.tsx | 111 |
1 files changed, 68 insertions, 43 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index afb76b9ac..93eaec959 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -1,22 +1,23 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Toggle, ToggleType, Type } from 'browndash-components'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../fields/Doc'; import { InkTool } from '../../fields/InkField'; -import { Cast, NumCast, StrCast } from '../../fields/Types'; +import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../Utils'; import { DocUtils } from '../documents/Documents'; import { DocumentManager } from '../util/DocumentManager'; import { LinkManager } from '../util/LinkManager'; import { SelectionManager } from '../util/SelectionManager'; +import { SettingsManager } from '../util/SettingsManager'; import { Transform } from '../util/Transform'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { CollectionStackedTimeline } from './collections/CollectionStackedTimeline'; import { TabDocView } from './collections/TabDocView'; import { GestureOverlay } from './GestureOverlay'; import './LightboxView.scss'; -import { MainView } from './MainView'; import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider'; @@ -61,7 +62,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { this._childFilters && (this._childFilters.length = 0); this._future = this._history = []; Doc.ActiveTool = InkTool.None; - MainView.Instance._exploreMode = false; + DocumentView.ExploreMode = false; } else { const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); @@ -119,7 +120,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), bottom, }}> - <div className="lightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}> + <div className="lightboxView-navBtn" title={color} style={{ top, color: SettingsManager.userColor, background: undefined }} onClick={click}> <div style={{ height: 10 }}>{color}</div> <FontAwesomeIcon icon={icon as any} size="3x" /> </div> @@ -230,6 +231,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { downx = e.clientX; downy = e.clientY; }} + style={{ background: SettingsManager.userBackgroundColor }} onClick={e => { if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) { LightboxView.SetLightboxDoc(undefined); @@ -243,6 +245,8 @@ export class LightboxView extends React.Component<LightboxViewProps> { width: this.lightboxWidth(), height: this.lightboxHeight(), clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`, + background: SettingsManager.userBackgroundColor, + color: SettingsManager.userColor, }}> {/* <CollectionMenu /> TODO:glr This is where it would go*/} @@ -270,7 +274,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { addDocTab={this.addDocTab} pinToPres={TabDocView.PinDoc} bringToFront={emptyFunction} - onBrowseClick={MainView.Instance.exploreMode} + onBrowseClick={DocumentView.exploreMode} focus={emptyFunction} /> </GestureOverlay> @@ -300,47 +304,68 @@ export class LightboxView extends React.Component<LightboxViewProps> { this.future()?.length.toString() )} <LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} /> - <div - className="lightboxView-navBtn" - title="toggle fit width" - onClick={e => { - e.stopPropagation(); - LightboxView.LightboxDoc!._layout_fitWidth = !LightboxView.LightboxDoc!._layout_fitWidth; - }}> - <FontAwesomeIcon icon={LightboxView.LightboxDoc?._layout_fitWidth ? 'arrows-alt-h' : 'arrows-alt-v'} size="2x" /> + <div className="lightboxView-navBtn"> + <Toggle + tooltip="toggle reading view" + color={SettingsManager.userColor} + background={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth) ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor} + toggleType={ToggleType.BUTTON} + type={Type.TERT} + toggleStatus={BoolCast(LightboxView.LightboxDoc!._layout_fitWidth)} + onClick={e => { + e.stopPropagation(); + LightboxView.LightboxDoc!._layout_fitWidth = !LightboxView.LightboxDoc!._layout_fitWidth; + }} + icon={<FontAwesomeIcon icon={LightboxView.LightboxDoc?._layout_fitWidth ? 'book-open' : 'book'} size="sm" />} + /> </div> - <div - className="lightboxView-tabBtn" - title="open in tab" - onClick={e => { - const lightdoc = LightboxView._docTarget || LightboxView._doc!; - e.stopPropagation(); - Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightdoc); - CollectionDockingView.AddSplit(lightdoc, OpenWhereMod.none); - SelectionManager.DeselectAll(); - LightboxView.SetLightboxDoc(undefined); - }}> - <FontAwesomeIcon icon={'file-download'} size="2x" /> + <div className="lightboxView-tabBtn"> + <Toggle + tooltip="open document in a tab" + color={SettingsManager.userColor} + background={SettingsManager.userBackgroundColor} + toggleType={ToggleType.BUTTON} + type={Type.TERT} + icon={<FontAwesomeIcon icon="file-download" size="sm" />} + onClick={e => { + const lightdoc = LightboxView._docTarget || LightboxView._doc!; + e.stopPropagation(); + Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightdoc); + CollectionDockingView.AddSplit(lightdoc, OpenWhereMod.none); + SelectionManager.DeselectAll(); + LightboxView.SetLightboxDoc(undefined); + }} + /> </div> - <div - className="lightboxView-penBtn" - title="toggle pen annotation" - style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }} - onClick={e => { - e.stopPropagation(); - Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; - }}> - <FontAwesomeIcon color={Doc.ActiveTool === InkTool.Pen ? 'black' : 'white'} icon={'pen'} size="2x" /> + <div className="lightboxView-penBtn"> + <Toggle + tooltip="toggle pen annotation" + color={SettingsManager.userColor} + background={Doc.ActiveTool === InkTool.Pen ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor} + toggleType={ToggleType.BUTTON} + toggleStatus={Doc.ActiveTool === InkTool.Pen} + type={Type.TERT} + icon={<FontAwesomeIcon icon="pen" size="sm" />} + onClick={e => { + e.stopPropagation(); + Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; + }} + /> </div> - <div - className="lightboxView-exploreBtn" - title="toggle explore mode to navigate among documents only" - style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }} - onClick={action(e => { - e.stopPropagation(); - MainView.Instance._exploreMode = !MainView.Instance._exploreMode; - })}> - <FontAwesomeIcon color={MainView.Instance._exploreMode ? 'black' : 'white'} icon={'globe-americas'} size="2x" /> + <div className="lightboxView-exploreBtn"> + <Toggle + tooltip="toggle explore mode to navigate among documents only" + color={SettingsManager.userColor} + background={DocumentView.ExploreMode ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor} + toggleType={ToggleType.BUTTON} + type={Type.TERT} + toggleStatus={DocumentView.ExploreMode} + icon={<FontAwesomeIcon icon="globe-americas" size="sm" />} + onClick={action(e => { + e.stopPropagation(); + DocumentView.ExploreMode = !DocumentView.ExploreMode; + })} + /> </div> </div> ); |