aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/client/views/nodes/FontIconBox.scss17
-rw-r--r--src/client/views/nodes/FontIconBox.tsx7
-rw-r--r--src/client/views/nodes/MenuIconBox.scss49
-rw-r--r--src/client/views/nodes/MenuIconBox.tsx33
5 files changed, 18 insertions, 91 deletions
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index dc9b7c98f..5d5a1f7f3 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,6 @@ import { DocHolderBox } from "./DocHolderBox";
import { DocumentViewProps } from "./DocumentView";
import "./DocumentView.scss";
import { FontIconBox } from "./FontIconBox";
-import { MenuIconBox } from "./MenuIconBox";
import { FieldView, FieldViewProps } from "./FieldView";
import { FormattedTextBox, FormattedTextBoxProps } from "./formattedText/FormattedTextBox";
import { ImageBox } from "./ImageBox";
@@ -190,7 +189,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
blacklistedAttrs={[]}
renderInWrapper={false}
components={{
- FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
+ FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox,
ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 75bc90d7a..d7c5e9c92 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -37,9 +37,10 @@
.menuButton-round {
border-radius: 100%;
background-color: black;
+ padding: 0;
.fontIconBox-label {
- margin-left: -10px; // button padding is 10px;
+ //margin-left: -10px; // button padding is 10px;
bottom: 0;
position: absolute;
}
@@ -52,7 +53,6 @@
.menuButton-square {
padding-top: 3px;
padding-bottom: 3px;
- padding-left: 5px;
.fontIconBox-label {
border-radius: 0px;
@@ -64,7 +64,8 @@
.menuButton,
.menuButton-round,
.menuButton-square {
- width: 100%;
+ margin-left: -5%;
+ width: 110%;
height: 100%;
pointer-events: all;
touch-action: none;
@@ -72,6 +73,7 @@
.menuButton-wrap {
touch-action: none;
border-radius: 8px;
+ width: 100%;
// &:hover {
// background: rgb(61, 61, 61);
@@ -89,4 +91,13 @@
width: 95% !important;
height: 95%;
}
+}
+.menuButton-round {
+ width: 100%;
+ svg {
+ width: 50% !important;
+ height: 50%;
+ position: relative;
+ bottom: 2px;
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 87142babd..c55b9d9f2 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -65,10 +65,9 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth)));
const shape = StrCast(this.layoutDoc.iconShape, "round");
const icon = StrCast(this.dataDoc.icon, "user") as any;
- const presTrailsIcon = <img
- style={{ width: shape === 'round' ? 25 : 30, height: shape === 'round' ? 25 : 30, filter: color === 'white' ? 'invert(100%)' : 'invert(0%)', transform: shape === 'round' ? 'translate(-5px, -7px)' : undefined }}
- id={"pres-icon"}
- src={`/assets/${"presTrails.png"}`} />;
+ const presSize = shape === 'round' ? 25 : 30;
+ const presTrailsIcon = <img src={`/assets/${"presTrails.png"}`}
+ style={{ width: presSize, height: presSize, filter: `invert(${color === "white" ? "100%" : "0%"})`, marginBottom: "5px" }} />;
const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
style={{
boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined,
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
deleted file mode 100644
index 1b72f5a8f..000000000
--- a/src/client/views/nodes/MenuIconBox.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.menuButton {
- //padding: 7px;
- padding-left: 7px;
- width: 100%;
- width: 60px;
- height: 70px;
-
- .menuButton-wrap {
- width: 45px;
- /* padding: 5px; */
- touch-action: none;
- background: black;
- transform-origin: top left;
- /* margin-bottom: 5px; */
- margin-top: 5px;
- margin-right: 25px;
- border-radius: 8px;
-
- &:hover {
- background: rgb(61, 61, 61);
- cursor: pointer;
- }
- }
-
- .menuButton-label {
- color: white;
- margin-right: 4px;
- border-radius: 8px;
- width: 42px;
- position: relative;
- text-align: center;
- font-size: 8px;
- margin-top: 1px;
- letter-spacing: normal;
- padding: 3px;
- background-color: inherit;
- }
-
- .menuButton-icon {
- width: auto;
- height: 35px;
- padding: 5px;
- }
-
- svg {
- width: 95% !important;
- height: 95%;
- }
-} \ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
deleted file mode 100644
index 5ed8a9b78..000000000
--- a/src/client/views/nodes/MenuIconBox.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { createSchema, makeInterface } from '../../../fields/Schema';
-import { StrCast } from '../../../fields/Types';
-import { DocComponent } from '../DocComponent';
-import { FieldView, FieldViewProps } from './FieldView';
-import './MenuIconBox.scss';
-const MenuIconSchema = createSchema({
- icon: "string"
-});
-
-type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
-const MenuIconDocument = makeInterface(MenuIconSchema);
-@observer
-export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
- public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
- _ref: React.RefObject<HTMLButtonElement> = React.createRef();
-
- render() {
-
- const color = this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) === "lightgrey" ? "black" : "white";
- const menuBTN = <div className="menuButton" style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) }}>
- <div className="menuButton-wrap"
- style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document, this.props.renderDepth) }} >
- <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
- <div className="menuButton-label" style={{ color: color }}> {this.dataDoc.title} </div>
- </div>
- </div>;
-
- return menuBTN;
- }
-} \ No newline at end of file