aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/PropertiesButtons.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/PropertiesButtons.tsx')
-rw-r--r--src/client/views/PropertiesButtons.tsx53
1 files changed, 34 insertions, 19 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index dcab9bc1e..4fde1124f 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -15,6 +15,7 @@ import { InkingStroke } from './InkingStroke';
import { DocumentView } from './nodes/DocumentView';
import './PropertiesButtons.scss';
import React = require("react");
+import { Colors } from "./global/globalEnums";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -128,11 +129,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@undoBatch
@action
- handleOptionChange = (e: any) => {
- this.selectedDoc && (this.selectedDoc.onClickBehavior = e.target.value);
+ handleOptionChange = (onClick: string) => {
+ this.selectedDoc && (this.selectedDoc.onClickBehavior = onClick);
SelectionManager.Views().filter(dv => dv.docView).map(dv => dv.docView!).forEach(docView => {
docView.noOnClick();
- switch (e.target.value) {
+ switch (onClick) {
case "enterPortal": docView.makeIntoPortal(); break;
case "toggleDetail": docView.setToggleDetail(); break;
case "linkInPlace": docView.toggleFollowLink("inPlace", true, false); break;
@@ -149,20 +150,34 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@computed
get onClickFlyout() {
- const makeLabel = (value: string, label: string) => <div className="radio">
- <label>
- <input type="radio" value={value} checked={(this.selectedDoc?.onClickBehavior ?? "nothing") === value} onChange={this.handleOptionChange} />
- {label}
- </label>
- </div>;
+ const buttonList = [
+ ["nothing", "Select Document"],
+ ["enterPortal", "Enter Portal"],
+ ["toggleDetail", "Toggle Detail"],
+ ["linkInPlace", "Follow Link"],
+ ["linkOnRight", "Open Link on Right"]
+ ]
+ const currentSelection = this.selectedDoc.onClickBehavior;
+ // Get items to place into the list
+
+ const list = buttonList.map((value) => {
+ const click = () => {
+ this.handleOptionChange(value[0]);
+ };
+ return <div className="list-item" key={`${value}`}
+ style={{
+ backgroundColor: value[0] === currentSelection ? Colors.LIGHT_BLUE : undefined
+ }}
+ onClick={click}>
+ {value[1]}
+ </div>;
+ });
return <div>
- <form>
- {makeLabel("nothing", "Select Document")}
- {makeLabel("enterPortal", "Enter Portal")}
- {makeLabel("toggleDetail", "Toggle Detail")}
- {makeLabel("linkInPlace", "Follow Link")}
- {makeLabel("linkOnRight", "Open Link on Right")}
- </form>
+ <div>
+ <div className="propertiesButton-dropdownList">
+ {list}
+ </div>
+ </div>
{Doc.UserDoc().noviceMode ? (null) : <div onPointerDown={this.editOnClickScript} className="onClickFlyout-editScript"> Edit onClick Script</div>}
</div>;
}
@@ -190,7 +205,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const isFreeForm = this.selectedDoc?._viewType === CollectionViewType.Freeform;
const isTree = this.selectedDoc?._viewType === CollectionViewType.Tree;
const toggle = (ele: JSX.Element | null, style?: React.CSSProperties) => <div className="propertiesButtons-button" style={style}> {ele} </div>;
-
+ const isNovice = Doc.UserDoc().noviceMode;
return !this.selectedDoc ? (null) :
<div className="propertiesButtons">
{toggle(this.titleButton)}
@@ -198,7 +213,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{toggle(this.lockButton)}
{toggle(this.dictationButton)}
{toggle(this.onClickButton)}
- {toggle(this.fitWidthButton)}
+ {toggle(this.fitWidthButton, { display: isNovice ? "none" : "" })}
{toggle(this.fitContentButton, { display: !isFreeForm ? "none" : "" })}
{toggle(this.autoHeightButton, { display: !isText && !isStacking && !isTree ? "none" : "" })}
{toggle(this.maskButton, { display: !isInk ? "none" : "" })}
@@ -207,7 +222,7 @@ 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 ? "none" : "" })}
+ {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? "none" : "" })}
</div>;
}
} \ No newline at end of file