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.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
-rw-r--r--src/client/views/nodes/FontIconBox/ButtonInterface.ts12
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBadge.scss11
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBadge.tsx37
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.scss (renamed from src/client/views/nodes/button/FontIconBox.scss)0
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.tsx (renamed from src/client/views/nodes/button/FontIconBox.tsx)77
7 files changed, 115 insertions, 28 deletions
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index e954d0484..7e8eef0a5 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,7 @@ import { SearchBox } from '../search/SearchBox';
import { DashWebRTCVideo } from '../webcam/DashWebRTCVideo';
import { YoutubeBox } from './../../apis/youtube/YoutubeBox';
import { AudioBox } from './AudioBox';
-import { FontIconBox } from './button/FontIconBox';
+import { FontIconBox } from './FontIconBox/FontIconBox';
import { ColorBox } from './ColorBox';
import { ComparisonBox } from './ComparisonBox';
import { DataVizBox } from './DataVizBox/DataVizBox';
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8a35ca2a4..0b8ea1150 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1111,8 +1111,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
);
const targetDoc = layout_showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc;
const background = StrCast(
- SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.userColor,
- Doc.UserDoc().layout_showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().userColor) : 'rgba(0,0,0,0.4)'
+ SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor,
+ Doc.UserDoc().layout_showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().headingColor) : 'rgba(0,0,0,0.4)'
);
const layout_sidebarWidthPercent = +StrCast(this.layoutDoc.layout_sidebarWidthPercent).replace('%', '');
const titleView = !layout_showTitle ? null : (
diff --git a/src/client/views/nodes/FontIconBox/ButtonInterface.ts b/src/client/views/nodes/FontIconBox/ButtonInterface.ts
new file mode 100644
index 000000000..0aa2ac8e1
--- /dev/null
+++ b/src/client/views/nodes/FontIconBox/ButtonInterface.ts
@@ -0,0 +1,12 @@
+import { Doc } from "../../../../fields/Doc";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { ButtonType } from "./FontIconBox";
+
+export interface IButtonProps {
+ type: string | ButtonType;
+ rootDoc: Doc;
+ label: any;
+ icon: IconProp;
+ color: string;
+ backgroundColor: string;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox/FontIconBadge.scss b/src/client/views/nodes/FontIconBox/FontIconBadge.scss
new file mode 100644
index 000000000..78f506e57
--- /dev/null
+++ b/src/client/views/nodes/FontIconBox/FontIconBadge.scss
@@ -0,0 +1,11 @@
+.fontIconBadge {
+ background: red;
+ width: 15px;
+ height: 15px;
+ top: 8px;
+ display: block;
+ position: absolute;
+ right: 5;
+ border-radius: 50%;
+ text-align: center;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox/FontIconBadge.tsx b/src/client/views/nodes/FontIconBox/FontIconBadge.tsx
new file mode 100644
index 000000000..b50588ce2
--- /dev/null
+++ b/src/client/views/nodes/FontIconBox/FontIconBadge.tsx
@@ -0,0 +1,37 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import './FontIconBadge.scss';
+
+interface FontIconBadgeProps {
+ value: string | undefined;
+}
+
+@observer
+export class FontIconBadge extends React.Component<FontIconBadgeProps> {
+ _notifsRef = React.createRef<HTMLDivElement>();
+
+ // onPointerDown = (e: React.PointerEvent) => {
+ // setupMoveUpEvents(this, e,
+ // (e: PointerEvent) => {
+ // const dragData = new DragManager.DocumentDragData([this.props.collection!]);
+ // DragManager.StartDocumentDrag([this._notifsRef.current!], dragData, e.x, e.y);
+ // return true;
+ // },
+ // returnFalse, emptyFunction, false);
+ // }
+
+ render() {
+ if (this.props.value === undefined) return null;
+ return (
+ <div className="fontIconBadge-container" ref={this._notifsRef}>
+ <div
+ className="fontIconBadge"
+ style={{ display: 'initial' }}
+ // onPointerDown={this.onPointerDown}
+ >
+ {this.props.value}
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss
index 9d9fa26b0..9d9fa26b0 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index e31407f4b..2958fa737 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -1,10 +1,10 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, ColorPicker, Dropdown, DropdownType, EditableText, IconButton, IListItemProps, NumberDropdown, NumberDropdownType, Size, Toggle, ToggleType, Type } from 'browndash-components';
+import { Button, ColorPicker, Dropdown, DropdownType, EditableText, IconButton, IListItemProps, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
-import { Doc, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
import { ScriptField } from '../../../../fields/ScriptField';
import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
@@ -15,21 +15,22 @@ import { DocComponent } from '../../DocComponent';
import { EditableView } from '../../EditableView';
import { Colors } from '../../global/globalEnums';
import { StyleProp } from '../../StyleProvider';
-import { FieldView, FieldViewProps } from '.././FieldView';
+import { FieldView, FieldViewProps } from '../FieldView';
import { OpenWhere } from '../DocumentView';
import { RichTextMenu } from '../formattedText/RichTextMenu';
import './FontIconBox.scss';
+import { SelectedDocView } from '../../selectedDoc';
export enum ButtonType {
TextButton = 'textBtn',
MenuButton = 'menuBtn',
- DropdownList = 'drpdownList',
- DropdownButton = 'drpdownBtn',
+ DropdownList = 'dropdownList',
+ DropdownButton = 'dropdownBtn',
ClickButton = 'clickBtn',
- DoubleButton = 'dblBtn',
- ToggleButton = 'tglBtn',
+ ToggleButton = 'toggleBtn',
ColorButton = 'colorBtn',
ToolButton = 'toolBtn',
+ MultiToggleButton = 'multiToggleBtn',
NumberSliderButton = 'numSliderBtn',
NumberDropdownButton = 'numDropdownBtn',
NumberInlineButton = 'numInlineBtn',
@@ -144,10 +145,13 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
color={color}
numberDropdownType={type}
showPlusMinus={false}
+ tooltip={this.label}
+ type={Type.PRIM}
min={NumCast(this.rootDoc.numBtnMin, 0)}
max={NumCast(this.rootDoc.numBtnMax, 100)}
number={checkResult}
setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}
+ fillWidth
/>
}
@@ -195,29 +199,50 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
let noviceList: string[] = [];
let text: string | undefined;
let dropdown = true;
+ let getStyle: (val: string) => any = () => {};
let icon: IconProp = 'caret-down';
+ let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView')
try {
- if (script?.script.originalScript.startsWith('setView')) {
+ if (isViewDropdown) {
+ const selectedDocs: Doc[] = SelectionManager.Docs();
const selected = SelectionManager.Docs().lastElement();
console.log('selected')
if (selected) {
if (StrCast(selected.type) === DocumentType.COL) {
text = StrCast(selected._type_collection);
} else {
- console.log("doc selected", selected.title)
+ console.log("doc selected", selected.title);
dropdown = false;
- text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
- icon = Doc.toIcon(selected);
- return <div>Hi!</div>
+ if (selectedDocs.length > 1) {
+ text = selectedDocs.length + " documents selected"
+ } else {
+ text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
+ icon = Doc.toIcon(selected);
+ }
+ return <Popup
+ icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
+ text={text}
+ type={Type.TERT}
+ color={color}
+ popup={<SelectedDocView selectedDocs={selectedDocs}/>}
+ fillWidth
+ />
}
} else {
dropdown = false;
- icon = 'globe-asia';
- text = 'User Default';
- return <div>Hi!</div>
+ return <Button
+ text={`None Selected`}
+ type={Type.TERT}
+ color={color}
+ fillWidth
+ inactive
+ />
}
noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
- } else text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+ } else {
+ text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+ getStyle = (val: string) => { return { fontFamily: val } }
+ }
} catch (e) {
console.log(e);
}
@@ -229,9 +254,9 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
.filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
.map(value => (
{
- text: value,
+ text: value.charAt(0).toUpperCase() + value.slice(1),
val: value,
- style: { fontFamily: value },
+ style: getStyle(value),
onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
// shortcut: '#',
}
@@ -242,11 +267,12 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
<Dropdown
selectedVal={text}
setSelectedVal={undoable((val) => script.script.run({ self: this.rootDoc, val }), `dropdown select ${this.label}`)}
- color={Colors.WHITE}
- type={Type.PRIM}
+ color={color}
+ type={isViewDropdown ? Type.TERT : Type.PRIM}
dropdownType={DropdownType.SELECT}
items={list}
tooltip={this.label}
+ fillWidth
/>
)
}
@@ -283,17 +309,18 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
@computed get toggleButton() {
// Determine the type of toggle button
- const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);
const buttonText: string = StrCast(this.rootDoc.buttonText);
const tooltip: string = StrCast(this.rootDoc.toolTip);
-
+
+ const script = ScriptCast(this.rootDoc.onClick);
+ const toggleStatus = script ? script.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
// Colors
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
- console.log(buttonText, tooltip);
+ console.log(tooltip, toggleStatus);
return (
- <Toggle tooltip={`Toggle + ${tooltip}`} toggleType={ToggleType.BUTTON} type={Type.PRIM} toggleStatus={switchToggle} text={buttonText} color={color} icon={this.Icon(color)!} label={this.label}/>
+ <Toggle tooltip={`Toggle ${tooltip}`} toggleType={ToggleType.BUTTON} type={Type.PRIM} toggleStatus={toggleStatus} text={buttonText} color={color} icon={this.Icon(color)!} label={this.label}/>
)
}
@@ -319,7 +346,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
return <EditableText
- editing={false} onEdit={() => {}} setEditing={(editing: boolean) => {}}
+ editing={false} setEditing={(editing: boolean) => {}}
/>
return (
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-27 16:10:50 +0000