diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 44 |
1 files changed, 19 insertions, 25 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 2a847e51a..8ac0f7d7b 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -11,8 +11,8 @@ import { IReactionDisposer, action, computed, makeObservable, observable, reacti import { observer } from 'mobx-react'; import * as React from 'react'; import { ColorResult, SketchPicker } from 'react-color'; -import * as Icons from 'react-icons/bs'; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" -import { ClientUtils, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../ClientUtils'; +import * as Icons from 'react-icons/bs'; // {BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" +import { ClientUtils, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../ClientUtils'; import { emptyFunction } from '../../Utils'; import { Doc, Field, FieldType, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc'; import { AclAdmin, DocAcl, DocData } from '../../fields/DocSymbols'; @@ -45,6 +45,7 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView'; import { StyleProviderFuncType } from './nodes/FieldView'; import { KeyValueBox } from './nodes/KeyValueBox'; import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; + const _global = (window /* browser */ || global) /* node */ as any; interface PropertiesViewProps { @@ -218,7 +219,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps rows.push( <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: SettingsManager.userBackgroundColor, textAlign: 'center' }}> - <EditableView key="editableView" oneLine contents="add key:value or #tags" height={13} fontSize={10} GetValue={() => ''} SetValue={this.setKeyValue} /> + <EditableView key="editableView" oneLine contents="add key:value or #tags" height={13} fontSize={10} GetValue={returnEmptyString} SetValue={this.setKeyValue} /> </div> ); } @@ -264,13 +265,13 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @observable transform: Transform = Transform.Identity(); getTransform = () => this.transform; propertiesDocViewRef = (ref: HTMLDivElement) => { - const observer = new _global.ResizeObserver( + const resizeObserver = new _global.ResizeObserver( action(() => { const cliRect = ref.getBoundingClientRect(); this.transform = new Transform(-cliRect.x, -cliRect.y, 1); }) ); - ref && observer.observe(ref); + ref && resizeObserver.observe(ref); }; @computed get contexts() { @@ -359,9 +360,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps if (permission === '-multiple-') dropdownValues.unshift(permission); return ( <select className="propertiesView-permissions-select" value={permission} onChange={e => this.changePermissions(e, user)}> - {dropdownValues.map(permission => ( - <option className="propertiesView-permisssions-select" key={permission} value={permission}> - {concat(ReverseHierarchyMap.get(permission)?.image, ' ', permission)} + {dropdownValues.map(permissionVal => ( + <option className="propertiesView-permisssions-select" key={permissionVal} value={permissionVal}> + {concat(ReverseHierarchyMap.get(permissionVal)?.image, ' ', permissionVal)} </option> ))} </select> @@ -404,10 +405,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps /** * @returns a row of the permissions panel */ - sharingItem(name: string, admin: boolean, permission: string, showExpansionIcon?: boolean) { - if (name === ClientUtils.CurrentUserEmail()) { - name = 'Me'; - } + sharingItem(nameIn: string, admin: boolean, permission: string, showExpansionIcon?: boolean) { + const name = nameIn === ClientUtils.CurrentUserEmail() ? 'Me' : nameIn; return ( <div className="propertiesView-sharingTable-item" @@ -466,7 +465,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps const docs = SelectionManager.Views.length < 2 && this.selectedDoc ? [this.selectedDoc] : SelectionManager.Views.map(docView => docView.Document); const target = docs[0]; - const showAdmin = GetEffectiveAcl(target) == AclAdmin; + const showAdmin = GetEffectiveAcl(target) === AclAdmin; const individualTableEntries = []; const usersAdded: string[] = []; // all shared users being added - organized by denormalized email @@ -841,7 +840,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps colorButton(value: string, type: string, setter: () => void) { return ( - <div className="color-button" key="color" onPointerDown={action(e => setter())}> + <div className="color-button" key="color" onPointerDown={action(() => setter())}> <div className="color-button-preview" style={{ @@ -858,9 +857,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps colorPicker(color: string, setter: (color: string) => void) { return ( - // prettier-ignore <SketchPicker - onChange={undoable( action((color: ColorResult) => setter(color.hex)), 'set stroke color property' )} + onChange={undoable( + action((col: ColorResult) => setter(col.hex)), + 'set stroke color property' + )} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} color={color} /> @@ -928,13 +929,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps this.selectedDoc && (this.selectedDoc[DocData].stroke_endMarker = value); } - @computed get stkInput() { - return this.regInput('stk', this.widthStk, (val: string) => { this.widthStk = val; }); // prettier-ignore - } - @computed get markScaleInput() { - return this.regInput('scale', this.markScal.toString(), (val: string) => { this.markScal = Number(val); }); // prettier-ignore - } - regInput = (key: string, value: any, setter: (val: string) => {}) => ( <div className="inputBox"> <input className="inputBox-input" type="text" value={value} style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} onChange={e => setter(e.target.value)} /> @@ -1640,7 +1634,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}> <p>Zoom %</p> <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}> - <input className="presBox-input" style={{ width: '100%', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} readOnly={true} type="number" value={zoom} /> + <input className="presBox-input" style={{ width: '100%', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} readOnly type="number" value={zoom} /> <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}> <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}> <FontAwesomeIcon icon="caret-up" /> @@ -1766,7 +1760,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps color: SettingsManager.userColor, backgroundColor: this.openPresTransitions ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> Transitions + <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> Transitions <div className="propertiesView-presentationTrails-title-icon"> <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" /> </div> |