aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Utils.ts16
-rw-r--r--src/client/util/SharingManager.scss1
-rw-r--r--src/client/util/SharingManager.tsx16
-rw-r--r--src/client/views/DashboardView.tsx4
-rw-r--r--src/client/views/PropertiesButtons.tsx46
-rw-r--r--src/client/views/PropertiesView.scss2
-rw-r--r--src/client/views/PropertiesView.tsx90
-rw-r--r--src/client/views/UndoStack.tsx6
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.tsx5
-rw-r--r--src/client/views/pdf/AnchorMenu.tsx52
-rw-r--r--src/client/views/selectedDoc/SelectedDocView.tsx2
-rw-r--r--src/client/views/topbar/TopBar.tsx15
12 files changed, 136 insertions, 119 deletions
diff --git a/src/Utils.ts b/src/Utils.ts
index 2e06b5631..e03632c8b 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -6,6 +6,7 @@ import { Socket } from 'socket.io';
import { Colors } from './client/views/global/globalEnums';
import { Message } from './server/Message';
import Color = require('color');
+import { DocumentType } from './client/documents/DocumentTypes';
export namespace Utils {
export let CLICK_TIME = 300;
@@ -15,6 +16,21 @@ export namespace Utils {
return Date.now() - downTime < Utils.CLICK_TIME && Math.abs(x - downX) < Utils.DRAG_THRESHOLD && Math.abs(y - downY) < Utils.DRAG_THRESHOLD;
}
+ export function cleanDocumentType(type: DocumentType) {
+ switch(type) {
+ case DocumentType.IMG:
+ return "Image"
+ case DocumentType.AUDIO:
+ return "Audio"
+ case DocumentType.COL:
+ return "Collection"
+ case DocumentType.RTF:
+ return "Text"
+ default:
+ return type.charAt(0).toUpperCase() + type.slice(1)
+ }
+ }
+
export function readUploadedFileAsText(inputFile: File) {
const temporaryFileReader = new FileReader();
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index 05401e2cd..b11e694ff 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -12,6 +12,7 @@
}
.sharing-contents {
+ padding: 10px;
display: flex;
flex-direction: column;
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 8e5ae7bc0..33c9992d0 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -551,7 +551,12 @@ export class SharingManager extends React.Component<{}> {
return (
<div className="sharing-interface">
{GroupManager.Instance?.currentGroup ? <GroupMemberView group={GroupManager.Instance.currentGroup} onCloseButtonClick={action(() => (GroupManager.Instance.currentGroup = undefined))} /> : null}
- <div className="sharing-contents">
+ <div className="sharing-contents"
+ style={{
+ background: StrCast(Doc.UserDoc().userBackgroundColor),
+ color: StrCast(Doc.UserDoc().userColor)
+ }}
+ >
<p className="share-title">
<div className="share-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')}>
<FontAwesomeIcon icon={'question-circle'} size={'sm'} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')} />
@@ -652,6 +657,13 @@ export class SharingManager extends React.Component<{}> {
}
render() {
- return <MainViewModal contents={this.sharingInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.close} />;
+ return <MainViewModal
+ contents={this.sharingInterface}
+ isDisplayed={this.isOpen}
+ interactive={true}
+ dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+ overlayDisplayedOpacity={this.overlayOpacity}
+ closeOnExternalClick={this.close}
+ />;
}
}
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index e574d68de..cf746bbb3 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -180,7 +180,7 @@ export class DashboardView extends React.Component {
fillWidth
/>
<Button
- text={'Shared Dashboards' + '(' + this.getDashboards(DashboardGroup.SharedDashboards).length + ')'}
+ text={'Shared Dashboards' + ' (' + this.getDashboards(DashboardGroup.SharedDashboards).length + ')'}
active={this.selectedDashboardGroup === DashboardGroup.SharedDashboards}
color={this.getDashboards(DashboardGroup.SharedDashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'lightgreen' : color}
align={'flex-start'}
@@ -226,7 +226,7 @@ export class DashboardView extends React.Component {
e.stopPropagation();
this.onContextMenu(dashboard, e);
}}>
- <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} size="lg" icon="bars" />} />
+ <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} />
</div>
</div>
<div className={`background`} style={{
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 3148d9ddd..b0f9d5a7e 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -301,32 +301,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
// </Tooltip>
);
}
- @computed
- get perspectiveButton() {
- return !this.selectedDoc ? null : (
- <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
- <div>
- <div className="propertiesButtons-linkFlyout">
- <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
- <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
- <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
- </div>
- </Flyout>
- </div>
- <div className="propertiesButtons-title"> Perspective </div>
- </div>
- </Tooltip>
- );
- }
-
- @undoBatch
- handlePerspectiveChange = (e: any) => {
- this.selectedDoc && (this.selectedDoc._type_collection = e.target.value);
- SelectionManager.Views()
- .filter(dv => dv.docView)
- .map(dv => dv.docView!)
- .forEach(docView => (docView.layoutDoc._type_collection = e.target.value));
- };
@undoBatch
@action
@@ -406,26 +380,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
</div>
);
}
- @computed
- get onPerspectiveFlyout() {
- const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear];
- const makeLabel = (value: string, label: string) => (
- <div className="radio" key={label}>
- <label>
- <input type="radio" value={value} checked={(this.selectedDoc?._type_collection ?? 'invalid') === value} onChange={this.handlePerspectiveChange} />
- {label}
- </label>
- </div>
- );
- return (
- <form>
- {Object.values(CollectionViewType)
- .filter(type => !excludedViewTypes.includes(type))
- .map(type => makeLabel(type, type))}
- </form>
- );
- }
render() {
const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
@@ -466,7 +421,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
{toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
{toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
- {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })}
</div>
);
}
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index b195afbd8..6dbc11d29 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -23,7 +23,7 @@
.propertiesView-name,
.propertiesView-type {
- padding: 0px 10px;
+ padding: 5px 10px;
}
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index a61a14536..ae6f6afe2 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -7,7 +7,7 @@ import { concat, intersection } from 'lodash';
import { Lambda, action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import { ColorState, SketchPicker } from 'react-color';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
+import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
import { Doc, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
import { AclAdmin, DocAcl, DocData, Height, Width } from '../../fields/DocSymbols';
import { Id } from '../../fields/FieldSymbols';
@@ -32,7 +32,7 @@ import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector
import { PropertiesDocContextSelector } from './PropertiesDocContextSelector';
import './PropertiesView.scss';
import { DefaultStyleProvider } from './StyleProvider';
-import { Button, Colors, EditableText, NumberDropdown, Size, Slider, Type } from 'browndash-components';
+import { Button, Colors, EditableText, NumberDropdown, Size, Slider, Type, NumberInput } from 'browndash-components';
import { PropertiesSection } from './PropertiesSection';
import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView';
import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
@@ -548,11 +548,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@computed get type() {
- const type = StrCast(this.selectedDoc?.type);
+ const type = Utils.cleanDocumentType(StrCast(this.selectedDoc?.type) as DocumentType);
return (
<Button
formLabel={"Type"}
text={type}
+ type={Type.SEC}
color={this.color}
align='flex-start'
fillWidth
@@ -992,35 +993,68 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
);
}
+ getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any) => {
+ return <div>
+ <NumberInput
+ formLabel={label}
+ formLabelPlacement={'left'}
+ type={Type.SEC}
+ unit={unit}
+ fillWidth
+ color={this.color}
+ number={number}
+ setNumber={setNumber}
+ />
+ <Slider
+ multithumb={false}
+ color={this.color}
+ size={Size.XSMALL}
+ min={min}
+ max={max}
+ unit={unit}
+ number={number}
+ setNumber={setNumber}
+ fillWidth
+ />
+ </div>
+ }
+
@computed get transformEditor() {
return (
<div className="transform-editor">
{this.isInk ? this.controlPointsButton : null}
- <Slider
- formLabel={'Height'}
- multithumb={false}
- color={this.color}
- size={Size.XSMALL}
- min={0}
- max={1000}
- number={Number(this.shapeHgt)}
- setNumber={undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height')}
- fillWidth
- />
- <Slider
- formLabel={'Width'}
- multithumb={false}
- color={this.color}
- size={Size.XSMALL}
- min={0}
- max={1000}
- number={Number(this.shapeWid)}
- setNumber={undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width')}
- fillWidth
- />
-
- {this.hgtInput}
- {this.XpsInput}
+ {this.getNumber(
+ "Height",
+ " px",
+ 0,
+ 1000,
+ Number(this.shapeHgt),
+ undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height')
+ )}
+ {this.getNumber(
+ "Width",
+ " px",
+ 0,
+ 1000,
+ Number(this.shapeWid),
+ undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width')
+ )}
+ {this.getNumber(
+ "X Coordinate",
+ " px",
+ -2000,
+ 2000,
+ Number(this.shapeXps),
+ undoable((val: string) => !isNaN(Number(val)) && (this.shapeXps = val), 'set x coord')
+ )}
+ {this.getNumber(
+ "Y Coordinate",
+ " px",
+ -2000,
+ 2000,
+ Number(this.shapeYps),
+ undoable((val: string) => !isNaN(Number(val)) && (this.shapeYps = val), 'set y coord')
+ )}
</div>
);
}
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
index 28f1b8bd9..aaca7110e 100644
--- a/src/client/views/UndoStack.tsx
+++ b/src/client/views/UndoStack.tsx
@@ -25,7 +25,11 @@ export class UndoStack extends React.Component<UndoStackProps> {
placement={`top-start`}
type={Type.TERT}
popup={
- <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} style={{ background: UndoManager.batchCounter.get() ? 'yellow' : undefined }}>
+ <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })}
+ style={{
+ background: UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userBackgroundColor),
+ color: StrCast(Doc.UserDoc().userColor)
+ }}>
{UndoManager.undoStackNames.map((name, i) => (
<div className="undoStack-resultContainer" key={i}>
<div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 2958fa737..e98faf2a0 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -20,6 +20,7 @@ import { OpenWhere } from '../DocumentView';
import { RichTextMenu } from '../formattedText/RichTextMenu';
import './FontIconBox.scss';
import { SelectedDocView } from '../../selectedDoc';
+import { Utils } from '../../../../Utils';
export enum ButtonType {
TextButton = 'textBtn',
@@ -214,9 +215,9 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
console.log("doc selected", selected.title);
dropdown = false;
if (selectedDocs.length > 1) {
- text = selectedDocs.length + " documents selected"
+ text = selectedDocs.length + " selected"
} else {
- text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
+ text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
icon = Doc.toIcon(selected);
}
return <Popup
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 64ea4f52c..07b2afd91 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -15,7 +15,7 @@ import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
import { LightboxView } from '../LightboxView';
import { EditorView } from 'prosemirror-view';
import './AnchorMenu.scss';
-import { ColorPicker, Group, IconButton, Popup, Size, Type } from 'browndash-components';
+import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
import { StrCast } from '../../../fields/Types';
@observer
@@ -371,29 +371,33 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
</>
) : (
<>
- <Tooltip key="trash" title={<div className="dash-tooltip">Remove Link Anchor</div>}>
- <button className="antimodeMenu-button" style={{ display: this.Delete === returnFalse ? 'none' : undefined }} onPointerDown={this.Delete}>
- <FontAwesomeIcon icon="trash-alt" size="lg" />
- </button>
- </Tooltip>
- <Tooltip key="Pin" title={<div className="dash-tooltip">Pin to Presentation</div>}>
- <button className="antimodeMenu-button" style={{ display: this.PinToPres === returnFalse ? 'none' : undefined }} onPointerDown={this.PinToPres}>
- <FontAwesomeIcon icon="map-pin" size="lg" />
- </button>
- </Tooltip>
- <Tooltip key="trail" title={<div className="dash-tooltip">Show Linked Trail</div>}>
- <button className="antimodeMenu-button" style={{ display: this.ShowTargetTrail === returnFalse ? 'none' : undefined }} onPointerDown={this.ShowTargetTrail}>
- <FontAwesomeIcon icon="taxi" size="lg" />
- </button>
- </Tooltip>
- <Tooltip key="toggle" title={<div className="dash-tooltip">make target visibility toggle on click</div>}>
- <button
- className="antimodeMenu-button"
- style={{ display: this.IsTargetToggler === returnFalse ? 'none' : undefined, color: this.IsTargetToggler() ? 'black' : 'white', backgroundColor: this.IsTargetToggler() ? 'white' : 'black' }}
- onPointerDown={this.MakeTargetToggle}>
- <FontAwesomeIcon icon="thumbtack" size="lg" />
- </button>
- </Tooltip>
+ {this.Delete !== returnFalse && <IconButton
+ tooltip={'Remove Link Anchor'}
+ onPointerDown={this.Delete}
+ icon={<FontAwesomeIcon icon="trash-alt" />}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />}
+ {this.PinToPres !== returnFalse && <IconButton
+ tooltip={'Pin to Presentation'}
+ onPointerDown={this.PinToPres}
+ icon={<FontAwesomeIcon icon="map-pin" />}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />}
+ {this.ShowTargetTrail !== returnFalse && <IconButton
+ tooltip={'Show Linked Trail'}
+ onPointerDown={this.ShowTargetTrail}
+ icon={<FontAwesomeIcon icon="taxi" />}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />}
+ {this.IsTargetToggler !== returnFalse && <Toggle
+ tooltip={'Make target visibility toggle on click'}
+ type={Type.PRIM}
+ toggleType={ToggleType.BUTTON}
+ toggleStatus={this.IsTargetToggler()}
+ onClick={this.MakeTargetToggle}
+ icon={<FontAwesomeIcon icon="thumbtack" />}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />}
</>
);
diff --git a/src/client/views/selectedDoc/SelectedDocView.tsx b/src/client/views/selectedDoc/SelectedDocView.tsx
index 1c9e124a2..955a4a174 100644
--- a/src/client/views/selectedDoc/SelectedDocView.tsx
+++ b/src/client/views/selectedDoc/SelectedDocView.tsx
@@ -40,7 +40,7 @@ export class SelectedDocView extends React.Component<SelectedDocViewProps> {
onClick: () => {DocumentManager.Instance.showDocument(doc, options, finished);}
}
})}
- color={Colors.WHITE}
+ color={StrCast(Doc.UserDoc().userColor)}
/>
</div>
}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index b9d5ed924..5c5547180 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -119,14 +119,6 @@ export class TopBar extends React.Component {
dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
}}
/>
- <Button
- text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
- onClick={() => {
- SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
- }}
- color={this.color}
- size={Size.SMALL}
- />
{!Doc.noviceMode && (
<IconButton
tooltip="Work on a copy of the dashboard layout"
@@ -152,15 +144,14 @@ export class TopBar extends React.Component {
@computed get topbarRight() {
return (
<div className="topbar-right">
- {Doc.ActiveDashboard && <Button
- text={GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'View Original'}
+ <Button
+ text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
type={Type.TERT}
color={this.variantColor}
onClick={() => {
SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
}}
- size={Size.SMALL}
- />}
+ />
<IconButton tooltip={"Server ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={ServerStats.Instance.open} icon={<FaStamp />} />
<IconButton tooltip={"Issue Reporter ⌘I"} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
<IconButton tooltip={"Documentation ⌘D"} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:01:02 +0000