aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts1
-rw-r--r--src/client/util/SettingsManager.scss15
-rw-r--r--src/client/util/SettingsManager.tsx2
-rw-r--r--src/client/views/DocumentDecorations.tsx6
-rw-r--r--src/client/views/InkingStroke.tsx2
-rw-r--r--src/client/views/MainView.scss6
-rw-r--r--src/client/views/MainView.tsx20
-rw-r--r--src/client/views/PropertiesButtons.scss7
-rw-r--r--src/client/views/PropertiesButtons.tsx83
-rw-r--r--src/client/views/collections/CollectionMenu.tsx227
-rw-r--r--src/client/views/globalCssVariables.scss4
-rw-r--r--src/client/views/nodes/formattedText/RichTextMenu.tsx39
12 files changed, 243 insertions, 169 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a094ac5a6..c27290e74 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -49,6 +49,7 @@ export class CurrentUserUtils {
@observable public static searchStack: any | undefined;
@observable public static selectedPanel: string = "none";
+ @observable public static propertiesWidth: number = 0;
// sets up the default User Templates - slideView, queryView, descriptionView
static setupUserTemplateButtons(doc: Doc) {
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index c1627e69f..6923fe879 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -7,7 +7,7 @@
height: 300px;
button {
- background: $lighter-alt-accent;
+ background: #315a96;
outline: none;
border-radius: 5px;
border: 0px;
@@ -29,8 +29,12 @@
button {
width: 100%;
align-self: center;
- background: $darker-alt-accent;
+ background: #252b33;
margin-top: 4px;
+
+ &:hover {
+ background: $main-accent;
+ }
}
.delete-button {
@@ -102,11 +106,12 @@
}
h1 {
- color: $dark-color;
+ color: #121721;
text-transform: uppercase;
letter-spacing: 2px;
- font-size: 120%;
+ font-size: 19;
margin-top: 0;
+ font-weight: bold;
}
.container {
@@ -151,7 +156,7 @@
.settings-interface button {
width: 100%;
font-size: 30px;
- background: #b2cef8;
+ background: #315a96;
}
.settings-interface .settings-heading {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 207c78964..6276fae96 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -136,7 +136,7 @@ export default class SettingsManager extends React.Component<{}> {
{this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
{this.successText ? <div className="success-text">{this.successText}</div> : undefined}
<button onClick={this.dispatchRequest}>submit</button>
- <a href="/forgotPassword">forgot password?</a>
+ <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
</div>
: undefined}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b8670a1af..f16cb273b 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -619,9 +619,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
</div>}
</> :
<>
- {/* {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
- <FontAwesomeIcon size="lg" icon="bars" />
- </div></Tooltip>} */}
+ {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
+ <FontAwesomeIcon size="lg" icon="cog" />
+ </div></Tooltip>}
<div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
<span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
</div>
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 5892e8346..8e3f72cee 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -178,7 +178,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
if (cm) {
!Doc.UserDoc().noviceMode && cm.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" });
cm.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" });
- cm.addItem({ description: "Format Shape...", event: this.formatShape, icon: "paint-brush" });
+ //cm.addItem({ description: "Format Shape...", event: this.formatShape, icon: "paint-brush" });
}
}}
><defs>
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 054a409df..a57d22afd 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -105,7 +105,7 @@
.mainView-propertiesDragger {
background-color: rgb(140, 139, 139);
height: 55px;
- width: 15.5px;
+ width: 17px;
position: absolute;
top: 55%;
border: 1px black solid;
@@ -119,7 +119,7 @@
width: 10px;
height: 10px;
float: left;
- margin-left: 3px;
+ margin-left: 5.5px;
padding-top: 19px;
}
@@ -297,7 +297,7 @@
position: absolute;
z-index: 2;
touch-action: none;
- cursor: ew-resize;
+ cursor: grab;
.mainView-libraryHandle-icon {
width: 10px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c83aeee25..fdf4c1626 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -91,8 +91,7 @@ export class MainView extends React.Component {
} else { return undefined; }
}
- @observable _propertiesWidth: number = 0;
- propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth));
+ propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth));
@computed get propertiesIcon() {
if (this.propertiesWidth() < 10) {
@@ -141,6 +140,9 @@ export class MainView extends React.Component {
MainView.Instance = this;
this._urlState = HistoryUtil.parseUrl(window.location) || {} as any;
// causes errors to be generated when modifying an observable outside of an action
+
+ CurrentUserUtils.propertiesWidth = 0;
+
configure({ enforceActions: "observed" });
if (window.location.pathname !== "/home") {
const pathname = window.location.pathname.substr(1).split("/");
@@ -172,7 +174,7 @@ export class MainView extends React.Component {
fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript,
fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper,
fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle,
- fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH);
+ fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft);
this.initEventListeners();
this.initAuthenticationRouters();
}
@@ -376,9 +378,9 @@ export class MainView extends React.Component {
@action
onPropertiesPointerDown = (e: React.PointerEvent) => {
setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
- this._propertiesWidth = this._panelWidth - e.clientX;
+ CurrentUserUtils.propertiesWidth = this._panelWidth - e.clientX;
return false;
- }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
+ }), returnFalse, action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
}
@action
@@ -419,7 +421,7 @@ export class MainView extends React.Component {
<div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
{this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
onPointerDown={this.closeFlyout}>
- <FontAwesomeIcon icon="times" color="black" size="sm" />
+ <FontAwesomeIcon icon="times" color="black" size="lg" />
</div> : null}
<DocumentView
@@ -527,7 +529,7 @@ export class MainView extends React.Component {
@action @undoBatch
closeProperties = () => {
- this._propertiesWidth = 0;
+ CurrentUserUtils.propertiesWidth = 0;
}
@computed get propertiesView() {
@@ -553,7 +555,7 @@ export class MainView extends React.Component {
<div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
{this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
onPointerDown={this.onFlyoutPointerDown}
- style={{ backgroundColor: this.defaultBackgroundColors(undefined) }}>
+ style={{ backgroundColor: 'lightgrey' }}>
<span title="library View Dragger" style={{
width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
//height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
@@ -576,7 +578,7 @@ export class MainView extends React.Component {
{this.dockingContent}
{this.showProperties ? (null) :
<div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onPropertiesPointerDown}
- style={{ right: rightFlyout, top: "45%" }}>
+ style={{ right: rightFlyout, top: "50%" }}>
<div className="mainView-propertiesDragger-icon">
<FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
</div>
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index b3a317a6b..1cba252de 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -45,13 +45,13 @@ $linkGap : 3px;
}
.propertiesButtons {
- margin-top: $linkGap;
+ margin-top: 3px;
grid-column: 1/4;
- width: max-content;
+ width: 100%;
height: auto;
display: flex;
flex-direction: row;
- overflow-x: visible;
+ flex-wrap: wrap;
}
.onClickFlyout-editScript {
@@ -69,6 +69,7 @@ $linkGap : 3px;
width: 25px;
border-radius: 5px;
margin-right: 18px;
+ margin-bottom: 8px;
}
.propertiesButtons-linker {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d3f056a34..68969b413 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -29,6 +29,7 @@ import { ImageField } from '../../fields/URLField';
import { undoBatch, UndoManager } from '../util/UndoManager';
import { DocumentType } from '../documents/DocumentTypes';
import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView';
+import { InkField } from '../../fields/InkField';
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -524,6 +525,32 @@ export class PropertiesButtons extends React.Component<{}, {}> {
</Tooltip>;
}
+ @undoBatch
+ @action
+ private makeMask = () => {
+ if (this.selectedDoc) {
+ this.selectedDoc._backgroundColor = "rgba(0,0,0,0.7)";
+ this.selectedDoc.mixBlendMode = "hard-light";
+ this.selectedDoc.color = "#9b9b9bff";
+ this.selectedDoc.stayInCollection = true;
+ this.selectedDoc.isInkMask = true;
+ }
+ }
+
+ @computed
+ get maskButton() {
+ const targetDoc = this.selectedDoc;
+ return !targetDoc ? (null) : <Tooltip
+ title={<><div className="dash-tooltip">Make Mask</div></>}>
+ <div className={"propertiesButtons-linkButton-empty"}
+ onPointerDown={this.makeMask}>
+ {<FontAwesomeIcon className="documentdecorations-icon"
+ color="white" icon="paint-brush" size="sm" />}
+ </div>
+ </Tooltip>;
+ }
+
+
// @computed
// get importButton() {
// const targetDoc = this.selectedDoc;
@@ -549,6 +576,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const considerPull = isText && this.considerGoogleDocsPull;
const considerPush = isText && this.considerGoogleDocsPush;
const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField;
+ const isInk = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof InkField;
const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false;
const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false;
@@ -571,39 +599,40 @@ export class PropertiesButtons extends React.Component<{}, {}> {
<div className="propertiesButtons-button">
{this.downloadButton}
</div>
- </div>
- <div className="propertiesButtons">
- <div className="propertiesButtons-button">
- {this.deleteButton}
- </div>
- <div className="propertiesButtons-button">
- {this.onClickButton}
- </div>
- <div className="propertiesButtons-button">
- {this.sharingButton}
- </div>
- <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
- {this.considerGoogleDocsPush}
- </div>
- <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
- {this.considerGoogleDocsPull}
- </div>
- <div className="propertiesButtons-button" style={{ display: !isImage ? "none" : "" }}>
- {this.googlePhotosButton}
- </div>
- {/* <div className="propertiesButtons-button" style={{ display: !isCollection ? "none" : "" }}>
+ <div className="propertiesButtons-button">
+ {this.deleteButton}
+ </div>
+ <div className="propertiesButtons-button">
+ {this.onClickButton}
+ </div>
+ <div className="propertiesButtons-button">
+ {this.sharingButton}
+ </div>
+ <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
+ {this.considerGoogleDocsPush}
+ </div>
+ <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
+ {this.considerGoogleDocsPull}
+ </div>
+ <div className="propertiesButtons-button" style={{ display: !isImage ? "none" : "" }}>
+ {this.googlePhotosButton}
+ </div>
+ {/* <div className="propertiesButtons-button" style={{ display: !isCollection ? "none" : "" }}>
{this.importButton}
</div> */}
- <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
- {this.clustersButton}
- </div>
+ <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+ {this.clustersButton}
+ </div>
- <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
- {this.fitContentButton}
- </div>
+ <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+ {this.fitContentButton}
+ </div>
+ <div className="propertiesButtons-button" style={{ display: !isInk ? "none" : "" }}>
+ {this.maskButton}
</div>
+ </div>
</div>;
}
}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 59e6ac7ff..0a3f77888 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -30,6 +30,8 @@ import { RichTextField } from "../../../fields/RichTextField";
import { ScriptField } from "../../../fields/ScriptField";
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { DocUtils } from "../../documents/Documents";
+import { Tooltip } from "@material-ui/core";
+import { CurrentUserUtils } from "../../util/CurrentUserUtils";
@observer
export default class CollectionMenu extends AntimodeMenu {
@@ -65,16 +67,38 @@ export default class CollectionMenu extends AntimodeMenu {
}
}
+ @action
+ toggleProperties = () => {
+ if (CurrentUserUtils.propertiesWidth > 0) {
+ CurrentUserUtils.propertiesWidth = 0;
+ } else {
+ CurrentUserUtils.propertiesWidth = 250;
+ }
+ }
+
render() {
- const button = <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
- <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
- </button>;
+ const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} placement="bottom">
+ <button className="antimodeMenu-button" key="pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
+ <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
+ </button>
+ </Tooltip>;
+
+ const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left";
+ const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel";
+
+ const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} placement="bottom">
+ <button className="antimodeMenu-button" key="properties"
+ onPointerDown={this.toggleProperties}>
+ <FontAwesomeIcon icon={propIcon} size="lg" />
+ </button>
+ </Tooltip>;
return this.getElement(!this.SelectedCollection ? [button] :
[<CollectionViewBaseChrome key="chrome"
docView={this.SelectedCollection}
fieldKey={Doc.LayoutFieldKey(this.SelectedCollection?.props.Document)}
type={StrCast(this.SelectedCollection?.props.Document._viewType, CollectionViewType.Invalid) as CollectionViewType} />,
+ prop,
button]);
}
}
@@ -271,43 +295,47 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
@computed get templateChrome() {
return <div className="collectionViewBaseChrome-template" ref={this.createDropTarget} >
- <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._commandRef} onPointerDown={this.dragCommandDown}>
- <button className={"antimodeMenu-button"} >
- <FontAwesomeIcon icon="bullseye" size="lg" />
- </button>
- <select
- className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}>
- <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} />
- {this._buttonizableCommands.map(cmd =>
- <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={cmd.title} value={cmd.title}>{cmd.title}</option>
- )}
- </select>
- </div>
+ <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
+ <div className="commandEntry-outerDiv" ref={this._commandRef} onPointerDown={this.dragCommandDown}>
+ <button className={"antimodeMenu-button"} >
+ <FontAwesomeIcon icon="bullseye" size="lg" />
+ </button>
+ <select
+ className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} />
+ {this._buttonizableCommands.map(cmd =>
+ <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={cmd.title} value={cmd.title}>{cmd.title}</option>
+ )}
+ </select>
+ </div>
+ </Tooltip>
</div>;
}
@computed get viewModes() {
return <div className="collectionViewBaseChrome-viewModes" >
- <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._viewRef} onPointerDown={this.dragViewDown}>
- <button className={"antimodeMenu-button"}>
- <FontAwesomeIcon icon="bullseye" size="lg" />
- </button>
- <select
- className="collectionViewBaseChrome-viewPicker"
- onPointerDown={stopPropagation}
- onChange={this.viewChanged}
- value={StrCast(this.props.type)}>
- {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (
- <option
- key={Utils.GenerateGuid()}
- className="collectionViewBaseChrome-viewOption"
- onPointerDown={stopPropagation}
- value={type}>
- {type[0].toUpperCase() + type.substring(1)}
- </option>
- ))}
- </select>
- </div>
+ <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
+ <div className="commandEntry-outerDiv" ref={this._viewRef} onPointerDown={this.dragViewDown}>
+ <button className={"antimodeMenu-button"}>
+ <FontAwesomeIcon icon="bullseye" size="lg" />
+ </button>
+ <select
+ className="collectionViewBaseChrome-viewPicker"
+ onPointerDown={stopPropagation}
+ onChange={this.viewChanged}
+ value={StrCast(this.props.type)}>
+ {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (
+ <option
+ key={Utils.GenerateGuid()}
+ className="collectionViewBaseChrome-viewOption"
+ onPointerDown={stopPropagation}
+ value={type}>
+ {type[0].toUpperCase() + type.substring(1)}
+ </option>
+ ))}
+ </select>
+ </div>
+ </Tooltip>
</div>;
}
@@ -332,18 +360,23 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
{this.props.type === CollectionViewType.Invalid ||
this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes}
{this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome}
- {Doc.UserDoc().noviceMode ? (null) : <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}>
- <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
- <FontAwesomeIcon icon="filter" size="lg" />
- </button>
- </div>}
-
- {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : <button className={"antimodeMenu-button"} key="float"
- style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
- title="Toggle Overlay Layer"
- onClick={() => DocumentView.FloatDoc(this.props.docView)}>
- <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
- </button>}
+ {Doc.UserDoc().noviceMode ? (null) :
+ <Tooltip title={<div className="dash-tooltip">filter documents to show</div>} placement="bottom">
+ <div className="collectionViewBaseChrome-viewSpecs" style={{ display: "grid" }}>
+ <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
+ <FontAwesomeIcon icon="filter" size="lg" />
+ </button>
+ </div>
+ </Tooltip>}
+
+ {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
+ <Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
+ <button className={"antimodeMenu-button"} key="float"
+ style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
+ onClick={() => DocumentView.FloatDoc(this.props.docView)}>
+ <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
+ </button>
+ </Tooltip>}
</div>
{this.subChrome}
</div>
@@ -491,22 +524,26 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
});
return <div className="btn-draw" key="draw">
{this._draw.map((icon, i) =>
- <button className="antimodeMenu-button" title={this._title[i]} key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
- style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
- {/* {this._draw[i]} */}
- <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
-
- </button>)}
+ <Tooltip title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
+ <button className="antimodeMenu-button" key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
+ style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
+ {/* {this._draw[i]} */}
+ <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
+
+ </button>
+ </Tooltip>)}
</div>;
}
toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps["icon"], ele: JSX.Element | null) => {
- return <button className="antimodeMenu-button" key={key} title={key}
- onPointerDown={action(e => setter())}
- style={{ backgroundColor: value ? "121212" : "" }}>
- <FontAwesomeIcon icon={icon} size="lg" />
- {ele}
- </button>;
+ return <Tooltip title={<div className="dash-tooltip">{key}</div>} placement="bottom">
+ <button className="antimodeMenu-button" key={key}
+ onPointerDown={action(e => setter())}
+ style={{ backgroundColor: value ? "121212" : "" }}>
+ <FontAwesomeIcon icon={icon} size="lg" />
+ {ele}
+ </button>
+ </Tooltip>;
}
@computed get widthPicker() {
@@ -515,11 +552,13 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
<div className="btn2-group" key="width">
{widthPicker}
{this._width.map((wid, i) =>
- <button className="antimodeMenu-button" key={wid} title="change width"
- onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
- style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}>
- •
- </button>)}
+ <Tooltip title={<div className="dash-tooltip">change width</div>} placement="bottom">
+ <button className="antimodeMenu-button" key={wid}
+ onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
+ style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}>
+ •
+ </button>
+ </Tooltip>)}
</div>;
}
@@ -554,43 +593,42 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
</div>;
}
- @computed get formatPane() {
- // return <button className="antimodeMenu-button" key="format" title="toggle foramatting pane"
- // onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
- // style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
- // <FontAwesomeIcon icon="angle-double-right" size="lg" />
- // </button>;
- return null;
- }
-
render() {
return !this.props.docView.layoutDoc ? (null) : <div className="collectionFreeFormMenu-cont">
- {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
- <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}>
+ {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : <Tooltip title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
+ <div key="map" className="backKeyframe" onClick={this.miniMap}>
<FontAwesomeIcon icon={"map"} size={"lg"} />
</div>
+ </Tooltip>
}
- {!!!this.isText ? <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}>
- <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
- </div> : null}
- {!!!this.isText ? <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
- onClick={action(() => this.document.editing = !this.document.editing)} >
- {NumCast(this.document.currentFrame)}
- </div> : null}
- {!!!this.isText ? <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}>
- <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
- </div> : null}
+ {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
+ <div key="back" className="backKeyframe" onClick={this.prevKeyframe}>
+ <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
+ </div>
+ </Tooltip> : null}
+ {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
+ <div key="num" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
+ onClick={action(() => this.document.editing = !this.document.editing)} >
+ {NumCast(this.document.currentFrame)}
+ </div>
+ </Tooltip> : null}
+ {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
+ <div key="fwd" className="fwdKeyframe" onClick={this.nextKeyframe}>
+ <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
+ </div>
+ </Tooltip> : null}
{!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
- <button className={"antimodeMenu-button"} key="hypothesis"
- style={{
- backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
- borderRight: "1px solid gray"
- }}
- title="Use Hypothesis"
- onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
- <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
- </button>
+ <Tooltip title={<div className="dash-tooltip">Use Hypothesis</div>} placement="bottom">
+ <button className={"antimodeMenu-button"} key="hypothesis"
+ style={{
+ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
+ borderRight: "1px solid gray"
+ }}
+ onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
+ <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
+ </button>
+ </Tooltip>
}
{(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ?
<>
@@ -598,7 +636,6 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
{this.widthPicker}
{this.colorPicker}
{this.fillPicker}
- {this.formatPane}
</> :
(null)
}
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 3e54d001b..4c79a7c2f 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -9,10 +9,10 @@ $main-accent: #aaaaa3;
//$alt-accent: #59dff7;
$alt-accent: #c2c2c5;
$lighter-alt-accent: rgb(207, 220, 240);
-$darker-alt-accent: rgb(178, 206, 248);
+$darker-alt-accent: #b2cef8;
$intermediate-color: #9c9396;
$dark-color: #121721;
-$link-color: lightBlue;
+$link-color: #add8e6;
$antimodemenu-height: 35px;
// fonts
$sans-serif: "Noto Sans",
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 85cc5c1a1..d7eb73bb4 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -617,8 +617,11 @@ export default class RichTextMenu extends AntimodeMenu {
label = "No marks are currently stored";
}
+ //onPointerDown={onBrushClick}
+
const button = <Tooltip title={<div className="dash-tooltip">style brush</div>} placement="bottom">
- <button className="antimodeMenu-button" onPointerDown={onBrushClick} style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
+
+ <button className="antimodeMenu-button" style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
<FontAwesomeIcon icon="paint-roller" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.brushMarks?.size > 0 ? 45 : 0}deg)` }} />
</button>
</Tooltip>;
@@ -631,7 +634,7 @@ export default class RichTextMenu extends AntimodeMenu {
</div>;
return (
- <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} dropdownContent={dropdownContent} />
+ <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
);
}
@@ -690,8 +693,9 @@ export default class RichTextMenu extends AntimodeMenu {
self.TextView.EditorView!.focus();
}
+ // onPointerDown={onColorClick}
const button = <Tooltip title={<div className="dash-tooltip">set font color</div>} placement="bottom">
- <button className="antimodeMenu-button color-preview-button" onPointerDown={onColorClick}>
+ <button className="antimodeMenu-button color-preview-button">
<FontAwesomeIcon icon="palette" size="lg" />
<div className="color-preview" style={{ backgroundColor: this.activeFontColor }}></div>
</button>
@@ -712,7 +716,7 @@ export default class RichTextMenu extends AntimodeMenu {
</div>;
return (
- <ButtonDropdown view={this.view} key={"color dropdown"} button={button} dropdownContent={dropdownContent} />
+ <ButtonDropdown view={this.view} key={"color dropdown"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
);
}
@@ -744,8 +748,9 @@ export default class RichTextMenu extends AntimodeMenu {
UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highlighter");
}
+ //onPointerDown={onHighlightClick}
const button = <Tooltip title={<div className="dash-tooltip">set highlight color</div>} placement="bottom">
- <button className="antimodeMenu-button color-preview-button" key="highilghter-button" onPointerDown={onHighlightClick}>
+ <button className="antimodeMenu-button color-preview-button" key="highilghter-button" >
<FontAwesomeIcon icon="highlighter" size="lg" />
<div className="color-preview" style={{ backgroundColor: this.activeHighlightColor }}></div>
</button>
@@ -766,7 +771,7 @@ export default class RichTextMenu extends AntimodeMenu {
</div>;
return (
- <ButtonDropdown view={this.view} key={"highlighter"} button={button} dropdownContent={dropdownContent} />
+ <ButtonDropdown view={this.view} key={"highlighter"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
);
}
@@ -789,7 +794,7 @@ export default class RichTextMenu extends AntimodeMenu {
const link = this.currentLink ? this.currentLink : "";
const button = <Tooltip title={<div className="dash-tooltip">set hyperlink</div>} placement="bottom">
- <div><FontAwesomeIcon icon="link" size="lg" /> </div>
+ <div style={{ marginTop: 8 }}><FontAwesomeIcon icon="link" size="lg" /> </div>
</Tooltip>;
const dropdownContent =
@@ -801,7 +806,8 @@ export default class RichTextMenu extends AntimodeMenu {
<button className="remove-button" onPointerDown={e => this.deleteLink()}>Remove link</button>
</div>;
- return <ButtonDropdown view={this.view} key={"link button"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />;
+ return <ButtonDropdown view={this.view} key={"link button"} button={button} dropdownContent={dropdownContent}
+ openDropdownOnButton={true} link={true} />;
}
async getTextLinkTargetTitle() {
@@ -1001,6 +1007,7 @@ interface ButtonDropdownProps {
button: JSX.Element;
dropdownContent: JSX.Element;
openDropdownOnButton?: boolean;
+ link?: boolean;
}
@observer
@@ -1043,18 +1050,10 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
render() {
return (
<div className="button-dropdown-wrapper" ref={node => this.ref = node}>
- {this.props.openDropdownOnButton ?
- <button className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
- {this.props.button}
- <FontAwesomeIcon icon="caret-down" size="sm" />
- </button> :
- <>
- {this.props.button}
- <button className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}>
- <FontAwesomeIcon icon="caret-down" size="sm" />
- </button>
- </>}
-
+ <button className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
+ {this.props.button}
+ <div style={{ marginTop: this.props.link ? "4.5" : "-8.5" }}><FontAwesomeIcon icon="caret-down" size="sm" /></div>
+ </button>
{this.showDropdown ? this.props.dropdownContent : (null)}
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 22:12:07 +0000