diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/documents/Documents.ts | 1 | ||||
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 144 | ||||
| -rw-r--r-- | src/client/util/SettingsManager.scss | 30 | ||||
| -rw-r--r-- | src/client/util/SettingsManager.tsx | 85 | ||||
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.scss | 66 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 42 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 13 | ||||
| -rw-r--r-- | src/client/views/nodes/FontIconBox.tsx | 7 |
10 files changed, 281 insertions, 124 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index a06b4a581..50b7368d3 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -205,6 +205,7 @@ export interface DocumentOptions { audioEnd?: number; // the time frame where the audio should stop playing border?: string; //for searchbox hovercolor?: string; + developerFeature?: boolean; } class EmptyBox { diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 37ffcb78e..c5d3fffc7 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -387,7 +387,8 @@ export class CurrentUserUtils { static creatorBtnDescriptors(doc: Doc): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, - click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any, + developerFeature?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(), @@ -426,30 +427,90 @@ export class CurrentUserUtils { if (doc.activeMobileMenu === undefined) { this.setupActiveMobileMenu(doc); } - return [ - { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc }, - { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc }, - { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, - { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, - { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, - // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, - { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc }, - { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc }, - - { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc }, - { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc }, - { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc }, - // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, - { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc }, - // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, - // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc }, - // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, - { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc }, - { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, - ]; + + // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, + // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc }, + // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, + // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, + // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, + + const collection = { + toolTip: "Drag a collection", title: "Col", + icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc + }; + const web = { + toolTip: "Drag a web page", title: "Web", + icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc + }; + const cat = { + toolTip: "Drag a cat image", title: "Image", + icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc + }; + const compare = { + toolTip: "Drag a comparison box", title: "Compare", + icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc + } + const screen = { + toolTip: "Drag a screengrabber", title: "Grab", + icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc, + developerFeature: true, + }; + const audio = { + toolTip: "Drag a audio recorder", title: "Audio", + icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc + }; + const button = { + toolTip: "Drag a button", title: "Button", + icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc + }; + const pres = { + toolTip: "Drag a presentation view", title: "Pres", icon: "tv", + click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', + drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, + dragFactory: doc.emptyPresentation as Doc + }; + const search = { + toolTip: "Drag a search box", title: "Query", icon: "search", + click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', + dragFactory: doc.emptySearch as Doc, developerFeature: true, + }; + const script = { + toolTip: "Drag a scripting box", title: "Script", + icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc, + developerFeature: true, + }; + const mobile = { + toolTip: "Drag a mobile view", title: "Phone", + icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', + drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc, + developerFeature: true, + }; + const preview = { + toolTip: "Drag a document previewer", title: "Prev", + icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc, + developerFeature: true, + }; + const repl = { + toolTip: "Toggle a Calculator REPL", title: "repl", + icon: "calculator", + click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })', + developerFeature: true, + }; + + // novice : [collection, web, compare, audio, button, pres] + return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; } @@ -465,21 +526,24 @@ export class CurrentUserUtils { } } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); - const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ - _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, - icon, - title, - toolTip, - ignoreClick, - dropAction: "copy", - onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, - onClick: click ? ScriptField.MakeScript(click) : undefined, - ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, - activeInkPen, - backgroundColor, - removeDropProperties: new List<string>(["dropAction"]), - dragFactory, - })); + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, + click, ischecked, activeInkPen, backgroundColor, dragFactory, + developerFeature }) => Docs.Create.FontIconDocument({ + _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, + icon, + title, + toolTip, + ignoreClick, + dropAction: "copy", + onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, + onClick: click ? ScriptField.MakeScript(click) : undefined, + ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, + activeInkPen, + backgroundColor, + removeDropProperties: new List<string>(["dropAction"]), + dragFactory, + developerFeature, + })); if (dragCreatorSet === undefined) { doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, { diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 41bce8a1b..2d0fb4e95 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -30,10 +30,36 @@ } .settings-username { - font-size: 14px; + font-size: 12px; padding-right: 15px; color: black; - margin-top: 10px; + margin-top: 4px; + /* right: 135; */ + position: absolute; + left: 235; +} + +.grey-submit { + width: 71.1875px; + align-self: center; + background: #75787c; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 10px; + transition: transform 0.2s; + margin: 2px; + margin-left: 85px; + height: 32px; + + &:hover { + cursor: not-allowed; + } + } .settings-section { diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 68ed32c0f..1a419b7c6 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -39,6 +39,9 @@ export default class SettingsManager extends React.Component<{}> { private new_password_ref = React.createRef<HTMLInputElement>(); private new_confirm_ref = React.createRef<HTMLInputElement>(); + @observable private curr_password: string = ""; + @observable private new_password: string = ""; + @observable private new_confirm: string = ""; @computed get backgroundColor() { return Doc.UserDoc().defaultColor; } @@ -142,25 +145,44 @@ export default class SettingsManager extends React.Component<{}> { return true; } - private get settingsInterface() { + @computed get allowSubmit() { + return this.curr_password.length > 3 && + this.new_password.length > 3 && + this.new_confirm.length > 3 && this.new_confirm === this.new_password && + this.new_password !== this.curr_password ? true : false; + } + @action + changeVal = (e: any, pass: string) => { + if (pass === "curr") { + this.curr_password = e.target.value; + } else if (pass === "new") { + this.new_password = e.target.value; + } else if (pass === "conf") { + this.new_confirm = e.target.value; + } + } - const passwordContent = <div className="password-content"> + @computed get passwordContent() { + return <div className="password-content"> <div className="password-content-inputs"> - <input className="password-inputs" type="password" placeholder="current password" ref={this.curr_password_ref} /> - <input className="password-inputs" type="password" placeholder="new password" ref={this.new_password_ref} /> - <input className="password-inputs" type="password" placeholder="confirm new password" ref={this.new_confirm_ref} /> + <input className="password-inputs" type="password" placeholder="current password" onChange={e => this.changeVal(e, "curr")} ref={this.curr_password_ref} /> + <input className="password-inputs" type="password" placeholder="new password" onChange={e => this.changeVal(e, "new")} ref={this.new_password_ref} /> + <input className="password-inputs" type="password" placeholder="confirm new password" onChange={e => this.changeVal(e, "conf")} ref={this.new_confirm_ref} /> </div> <div className="password-content-buttons"> {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined} {this.successText ? <div className="success-text">{this.successText}</div> : undefined} - <button className="password-submit" onClick={this.dispatchRequest}>submit</button> + {this.allowSubmit ? <button className="password-submit" + onClick={this.dispatchRequest}>submit</button> : <div className="grey-submit"> submit </div>} <a className="password-forgot" style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a> </div> </div>; + } - const modesContent = <div className="modes-content"> + @computed get modesContent() { + return <div className="modes-content"> <select className="modes-select" onChange={e => this.changeMode(e)}> <option key={"Novice"} value={"Novice"} selected={BoolCast(Doc.UserDoc().noviceMode)}> @@ -177,22 +199,31 @@ export default class SettingsManager extends React.Component<{}> { /><div className="playground-text">Playground Mode</div> </div> </div>; + } - const accountsContent = <div className="accounts-content"> - <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button> - <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button> - <button onClick={() => GroupManager.Instance.open()}>Manage groups</button> + @computed get accountsContent() { + return <div className="accounts-content"> + <button onClick={this.googleAuthorize} + style={{ paddingLeft: 20, paddingRight: 20, marginRight: 35 }} + value="data">{`Link to Google`}</button> + {/* <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button> */} + <button onClick={() => GroupManager.Instance.open()} + style={{ paddingLeft: 20, paddingRight: 20 }}>Manage groups</button> </div>; + } - const colorBox = <SketchPicker onChange={this.switchColor} + @computed get colorBox() { + return <SketchPicker onChange={this.switchColor} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} color={StrCast(this.backgroundColor)} />; + } - const colorFlyout = <div className="colorFlyout"> + @computed get colorFlyout() { + return <div className="colorFlyout"> <Flyout anchorPoint={anchorPoints.LEFT_TOP} - content={colorBox}> + content={this.colorBox}> <div> <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()} > @@ -201,13 +232,15 @@ export default class SettingsManager extends React.Component<{}> { </div> </Flyout> </div>; + } + @computed get preferencesContent() { const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; const preferencesContent = <div className="preferences-content"> <div className="preferences-color"> - <div className="preferences-color-text">Background Color</div> {colorFlyout} + <div className="preferences-color-text">Background Color</div> {this.colorFlyout} </div> <div className="preferences-font"> <div className="preferences-font-text">Default Font</div> @@ -230,12 +263,22 @@ export default class SettingsManager extends React.Component<{}> { </div> </div>; + return preferencesContent; + } + + + @computed private get settingsInterface() { + return (<div className="settings-interface"> <div className="settings-top"> <div className="settings-title">Settings</div> - <div className="settings-username">{Doc.CurrentUserEmail}</div> + <div className="settings-username"> + <div style={{ fontSize: 9 }}> Signed in as: </div> + <div> {Doc.CurrentUserEmail}</div> + </div> <button onClick={() => window.location.assign(Utils.prepend("/logout"))} - style={{ right: 35, position: "absolute" }} > + //style={{ right: 35, position: "absolute" }} > + style={{ left: 137, position: "absolute" }} > {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"} </button> <div className="close-button" onClick={this.close}> @@ -245,19 +288,19 @@ export default class SettingsManager extends React.Component<{}> { <div className="settings-content"> <div className="settings-section"> <div className="settings-section-title">Password</div> - <div className="settings-section-context">{passwordContent}</div> + <div className="settings-section-context">{this.passwordContent}</div> </div> <div className="settings-section"> <div className="settings-section-title">Modes</div> - <div className="settings-section-context">{modesContent}</div> + <div className="settings-section-context">{this.modesContent}</div> </div> <div className="settings-section"> <div className="settings-section-title">Accounts</div> - <div className="settings-section-context">{accountsContent}</div> + <div className="settings-section-context">{this.accountsContent}</div> </div> <div className="settings-section" style={{ paddingBottom: 4 }}> <div className="settings-section-title">Preferences</div> - <div className="settings-section-context">{preferencesContent}</div> + <div className="settings-section-context">{this.preferencesContent}</div> </div> </div> </div>); diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 5c584d270..a905dc1e7 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -3,7 +3,7 @@ import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faChec import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast } from "../../fields/Doc"; +import { Doc, DocListCast, AclEdit, AclAdmin } from "../../fields/Doc"; import { RichTextField } from '../../fields/RichTextField'; import { Cast, NumCast, BoolCast } from "../../fields/Types"; import { emptyFunction, setupMoveUpEvents, Utils } from "../../Utils"; @@ -30,6 +30,7 @@ import { undoBatch, UndoManager } from '../util/UndoManager'; import { DocumentType } from '../documents/DocumentTypes'; import { InkField } from '../../fields/InkField'; import { PresBox } from './nodes/PresBox'; +import { GetEffectiveAcl } from "../../fields/util"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -428,7 +429,19 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch @action deleteDocument = () => { + const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; + const selected = SelectionManager.SelectedDocuments().slice(); + + selected.map(dv => { + const effectiveAcl = GetEffectiveAcl(dv.props.Document); + if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete + recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true); + dv.props.removeDocument?.(dv.props.Document); + } + }); + this.selectedDoc && (this.selectedDoc.deleted = true); this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document); + SelectionManager.DeselectAll(); } @computed diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 4d1cb670c..837ae7e86 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -594,7 +594,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus ""))} {(Doc.UserDoc()?.noviceMode || !this.props.isSelected() && !this.props.Document.forceActive) || this.props.Document.hideFilterView ? (null) : <div className="collectionView-filterDragger" title="library View Dragger" onPointerDown={this.onPointerDown} - style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} /> + style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "60%" }} /> } {Doc.UserDoc()?.noviceMode || this.facetWidth() < 10 ? (null) : this.filterView} </div>); diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 5e0c9fcbb..aee28366a 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -23,8 +23,9 @@ height: 20px; padding-left: 38px; margin-top: -5px; - right: 19; - position: absolute; + align-items: flex-end; + margin-left: auto; + margin-right: 10px; &:hover { color: grey; @@ -66,9 +67,9 @@ .propertiesView-settings-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -104,9 +105,9 @@ .propertiesView-sharing-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -154,9 +155,9 @@ .propertiesView-appearance-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -191,9 +192,9 @@ .propertiesView-transform-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -285,9 +286,8 @@ .propertiesView-sharingTable-item-permission { display: flex; - right: 34; - float: right; - position: absolute; + align-items: flex-end; + margin-left: auto; .permissions-select { z-index: 1; @@ -326,25 +326,18 @@ cursor: pointer; } - .propertiesView-fields-title-name { - font-size: 12.5px; - font-weight: bold; - white-space: nowrap; - width: 35px; - display: flex; - } - .propertiesView-fields-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { cursor: pointer; } } + } .propertiesView-fields-checkbox { @@ -407,9 +400,9 @@ .propertiesView-layout-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -444,9 +437,9 @@ .propertiesView-presTrails-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -730,4 +723,9 @@ &:hover { border: 0.75px solid rgb(122, 28, 28); } +} + + +.properties-flyout { + grid-column: 2/4; }
\ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 1a8ee3ea1..2d76e109c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -632,16 +632,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } colorButton(value: string, type: string, setter: () => {}) { - return <Flyout anchorPoint={anchorPoints.LEFT_TOP} - content={type === "fill" ? this.fillPicker : this.linePicker}> - <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}> - <div className="color-button-preview" style={{ - backgroundColor: value ?? "121212", width: 15, height: 15, - display: value === "" || value === "transparent" ? "none" : "" - }} /> - {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""} - </div> - </Flyout>; + // return <div className="properties-flyout" onPointerEnter={e => this.changeScrolling(false)} + // onPointerLeave={e => this.changeScrolling(true)}> + // <Flyout anchorPoint={anchorPoints.LEFT_TOP} + // content={type === "fill" ? this.fillPicker : this.linePicker}> + return <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}> + <div className="color-button-preview" style={{ + backgroundColor: value ?? "121212", width: 15, height: 15, + display: value === "" || value === "transparent" ? "none" : "" + }} /> + {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14 }}>☒</p> : ""} + </div>; + // </Flyout> + // </div>; } @@ -686,8 +689,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="stroke-button">{this.lineButton}</div> </div> </div> - {/* {this._fillBtn ? this.fillPicker : ""} - {this._lineBtn ? this.linePicker : ""} */} + {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} </div>; } @@ -813,7 +816,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { if (this.selectedDoc && !this.isPres) { return <div className="propertiesView" style={{ width: this.props.width, - // overflowY: this.inActions ? "visible" : "scroll" + //overflowY: this.scrolling ? "scroll" : "visible" }} > <div className="propertiesView-title" style={{ width: this.props.width }}> Properties @@ -918,11 +921,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="propertiesView-fields-title" onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })} style={{ backgroundColor: this.openFields ? "black" : "" }}> - <div className="propertiesView-fields-title-name"> - Fields {"&"} Tags + Fields {"&"} Tags <div className="propertiesView-fields-title-icon"> - <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" /> - </div> + <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" /> </div> </div> {!novice && this.openFields ? <div className="propertiesView-fields-checkbox"> @@ -949,12 +950,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } if (this.isPres) { const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; - return <div className="propertiesView" style={{ width: this.props.width }} > - <div className="propertiesView-title" style={{ width: this.props.width }}> + return <div className="propertiesView"> + <div className="propertiesView-title"> Presentation - <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}> - <FontAwesomeIcon icon="times" color="black" size="sm" /> - </div> </div> <div className="propertiesView-name"> {this.editableTitle} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 444583af3..47e1b2715 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -565,12 +565,23 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu } } - @undoBatch + @undoBatch @action deleteClicked = (): void => { if (Doc.UserDoc().activeWorkspace === this.props.Document) { alert("Can't delete the active workspace"); } else { + const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; + const selected = SelectionManager.SelectedDocuments().slice(); SelectionManager.DeselectAll(); + + selected.map(dv => { + const effectiveAcl = GetEffectiveAcl(dv.props.Document); + if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete + recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true); + dv.props.removeDocument?.(dv.props.Document); + } + }); + this.props.Document.deleted = true; this.props.removeDocument?.(this.props.Document); } diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index c0eb78d98..95faabb48 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -64,14 +64,17 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>( const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); const shape = StrCast(this.layoutDoc.iconShape, "round"); const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu} - style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "" }}> + style={{ + boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, + backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "", + }}> <div className="menuButton-wrap"> {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />} {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>} </div> </button>; - return !this.layoutDoc.toolTip ? button : + return (this.layoutDoc.developerFeature && Doc.UserDoc().noviceMode) ? (null) : !this.layoutDoc.toolTip ? button : <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}> {button} </Tooltip>; |