aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts107
-rw-r--r--src/client/util/SettingsManager.scss30
-rw-r--r--src/client/util/SettingsManager.tsx85
-rw-r--r--src/client/views/PropertiesButtons.scss18
-rw-r--r--src/client/views/PropertiesButtons.tsx17
-rw-r--r--src/client/views/collections/CollectionView.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.scss66
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.tsx44
-rw-r--r--src/client/views/nodes/DocumentView.tsx13
-rw-r--r--src/client/views/nodes/FontIconBox.scss2
-rw-r--r--src/client/views/nodes/FontIconBox.tsx5
-rw-r--r--src/client/views/nodes/PresBox.tsx3
12 files changed, 271 insertions, 121 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c205acb99..ccd0b4ef3 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -426,30 +426,85 @@ 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, noviceMode: true },
- { 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, noviceMode: true },
- { 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, noviceMode: true },
- { 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, noviceMode: true },
- { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true },
-
- { 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, noviceMode: true },
- { 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,
+ };
+ 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,
+ };
+ 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,
+ };
+ const mobile = {
+ toolTip: "Drag a mobile view", title: "Phone",
+ icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)',
+ drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc,
+ };
+ 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,
+ };
+ 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" })',
+ };
+
+ // novice : [collection, web, compare, audio, button, pres]
+ return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
}
@@ -485,7 +540,9 @@ export class CurrentUserUtils {
if (dragCreatorSet === undefined) {
doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {
- title: "Basic Item Creators", _showTitle: "title", _xMargin: 0,
+ title: "Basic Item Creators",
+ hidden: ComputedField.MakeFunction("!self.target.noviceMode") as any,
+ _showTitle: "title", _xMargin: 0,
_autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
}));
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.scss b/src/client/views/PropertiesButtons.scss
index 6199d34d0..8d9d56c9e 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,8 +20,8 @@ $linkGap : 3px;
.propertiesButtons-linkButton-empty,
.propertiesButtons-linkButton-nonempty {
- height: 30px;
- width: 32px;
+ height: 25px;
+ width: 29px;
border-radius: 6px;
pointer-events: auto;
background-color: #121721;
@@ -35,7 +35,7 @@ $linkGap : 3px;
justify-content: center;
align-items: center;
margin-right: 10px;
- margin-left: 3.5px;
+ margin-left: 4px;
&:hover {
background: $main-accent;
@@ -68,7 +68,7 @@ $linkGap : 3px;
padding-right: 5px;
width: 25px;
border-radius: 5px;
- margin-right: 22px;
+ margin-right: 20px;
margin-bottom: 8px;
}
@@ -76,9 +76,9 @@ $linkGap : 3px;
background: #121721;
color: white;
font-size: 6px;
- width: 40px;
+ width: 37px;
padding: 3px;
- height: 13px;
+ height: 12px;
border-radius: 7px;
text-transform: uppercase;
text-align: center;
@@ -86,8 +86,8 @@ $linkGap : 3px;
}
.propertiesButtons-linker {
- height: 30px;
- width: 32px;
+ height: 25px;
+ width: 29px;
text-align: center;
border-radius: 6px;
pointer-events: auto;
@@ -96,7 +96,7 @@ $linkGap : 3px;
transition: 0.2s ease all;
margin-right: 5px;
padding-top: 5px;
- margin-left: 3.5px;
+ margin-left: 4px;
&:hover {
background: $main-accent;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 5c584d270..4255e5caa 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;
@@ -258,7 +259,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
}
}}>
<FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" />
- <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div>
+ <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -28px)', color: 'rgba(250,250,250,0.55)' }}>V</div>
</div>
<div className="propertiesButtons-title">{"View"}</div>
@@ -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 15900aa33..487adf950 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -52,7 +52,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@computed get selectedDocumentView() {
if (SelectionManager.SelectedDocuments().length) {
return SelectionManager.SelectedDocuments()[0];
- } else if (PresBox.Instance?._selectedArray.length) {
+ } else if (PresBox.Instance && PresBox.Instance._selectedArray.length) {
return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc);
} else { return undefined; }
}
@@ -645,16 +645,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>;
}
@@ -699,8 +702,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>;
}
@@ -826,7 +829,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
@@ -931,11 +934,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">
@@ -962,12 +963,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.scss b/src/client/views/nodes/FontIconBox.scss
index 9709e1dbd..6a540269e 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -60,7 +60,7 @@
.menuButton-icon-square {
width: auto;
- height: 32px;
+ height: 29px;
padding: 4px;
}
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index c0eb78d98..a6b1678b5 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -64,7 +64,10 @@ 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"} />}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 502fd51f3..b7af4683e 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -34,7 +34,8 @@ const PresBoxDocument = makeInterface(documentSchema);
@observer
export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>(PresBoxDocument) {
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); }
- static Instance: PresBox;
+
+ public static Instance: PresBox;
@observable _isChildActive = false;
@observable _moveOnFromAudio: boolean = true;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 13:23:48 +0000