From 75a7c44f9615c4ac024403011a968f8b3038c500 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 18 Jul 2023 01:00:46 -0400 Subject: added number inputs to right hand side --- src/Utils.ts | 16 ++++ src/client/util/SharingManager.scss | 1 + src/client/util/SharingManager.tsx | 16 +++- src/client/views/DashboardView.tsx | 4 +- src/client/views/PropertiesButtons.tsx | 46 ----------- src/client/views/PropertiesView.scss | 2 +- src/client/views/PropertiesView.tsx | 90 +++++++++++++++------- src/client/views/UndoStack.tsx | 6 +- src/client/views/nodes/FontIconBox/FontIconBox.tsx | 5 +- src/client/views/pdf/AnchorMenu.tsx | 52 +++++++------ src/client/views/selectedDoc/SelectedDocView.tsx | 2 +- src/client/views/topbar/TopBar.tsx | 15 +--- 12 files changed, 136 insertions(+), 119 deletions(-) (limited to 'src') 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 (
{GroupManager.Instance?.currentGroup ? (GroupManager.Instance.currentGroup = undefined))} /> : null} -
+

window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')}> 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 ; + return ; } } 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 />
{ // ); } - @computed - get perspectiveButton() { - return !this.selectedDoc ? null : ( - Choose view perspective
} placement="top"> -
-
- -
e.stopPropagation()}> - -
- -
-
Perspective
-
- - ); - } - - @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<{}, {}> {
); } - @computed - get onPerspectiveFlyout() { - const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear]; - const makeLabel = (value: string, label: string) => ( -
- -
- ); - return ( -
- {Object.values(CollectionViewType) - .filter(type => !excludedViewTypes.includes(type)) - .map(type => makeLabel(type, type))} -
- ); - } 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' : '' })}
); } 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 { } @computed get type() { - const type = StrCast(this.selectedDoc?.type); + const type = Utils.cleanDocumentType(StrCast(this.selectedDoc?.type) as DocumentType); return ( - - Pin to Presentation}> - - - Show Linked Trail}> - - - make target visibility toggle on click}> - - + {this.Delete !== returnFalse && } + color={StrCast(Doc.UserDoc().userColor)} + />} + {this.PinToPres !== returnFalse && } + color={StrCast(Doc.UserDoc().userColor)} + />} + {this.ShowTargetTrail !== returnFalse && } + color={StrCast(Doc.UserDoc().userColor)} + />} + {this.IsTargetToggler !== returnFalse && } + 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 { onClick: () => {DocumentManager.Instance.showDocument(doc, options, finished);} } })} - color={Colors.WHITE} + color={StrCast(Doc.UserDoc().userColor)} /> } 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); }} /> -