aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/CurrentUserUtils.ts10
-rw-r--r--src/client/views/collections/CollectionMenu.scss2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx20
-rw-r--r--src/client/views/collections/collectionLinear/CollectionLinearView.tsx43
-rw-r--r--src/client/views/nodes/button/FontIconBox.tsx74
5 files changed, 89 insertions, 60 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 3475cab82..736aeceae 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -347,10 +347,10 @@ export class CurrentUserUtils {
{ title: "Files", toolTip: "Files ⌘⇧F", target: this.setupFilesystem(doc, "myFilesystem"), icon: "folder-open", },
{ title: "Tools", toolTip: "Tools ⌘T", target: this.setupToolsBtnPanel(doc, "myTools"), icon: "wrench", funcs: {hidden: "IsNoviceMode()"} },
{ title: "Imports", toolTip: "Imports ⌘I", target: this.setupImportSidebar(doc, "myImports"), icon: "upload", },
- { title: "Recently Closed", toolTip: "Recently Closed ⌘R", target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), icon: "archive", },
- { title: "Shared Docs", toolTip: "Shared Docs ⌘⇧S", target: Doc.MySharedDocs, icon: "users", funcs: {badgeValue:badgeValue}},
+ { title: "Closed", toolTip: "Recently Closed ⌘R", target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), icon: "archive", },
+ { title: "Shared", toolTip: "Shared Docs ⌘⇧S", target: Doc.MySharedDocs, icon: "users", funcs: {badgeValue:badgeValue}},
{ title: "Trails", toolTip: "Trails ⌘⇧", target: Doc.UserDoc(), icon: "pres-trail", funcs: {target: getActiveDashTrails}},
- { title: "User Doc View", toolTip: "User Doc ⌘U", target: this.setupUserDocView(doc, "myUserDocView"), icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
+ { title: "User Doc", toolTip: "User Doc ⌘U", target: this.setupUserDocView(doc, "myUserDocView"), icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(self)'}}));
}
@@ -600,8 +600,8 @@ export class CurrentUserUtils {
CurrentUserUtils.createToolButton(opts), scripts, funcs);
const btnDescs = [// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
- { scripts: { onClick: "undo()"}, opts: { title: "undo", icon: "undo-alt", toolTip: "Click to undo" }},
- { scripts: { onClick: "redo()"}, opts: { title: "redo", icon: "redo-alt", toolTip: "Click to redo" }},
+ { scripts: { onClick: "undo()"}, opts: { title: "Undo", icon: "undo-alt", toolTip: "Undo ⌘Z" }},
+ { scripts: { onClick: "redo()"}, opts: { title: "Redo", icon: "redo-alt", toolTip: "Redo ⌘R" }},
{ scripts: { }, opts: { title: "undoStack", layout: "<UndoStack>", toolTip: "Undo/Redo Stack"}}, // note: layout fields are hacks -- they don't actually run through the JSX parser (yet)
{ scripts: { }, opts: { title: "linker", layout: "<LinkingUI>", toolTip: "link started"}},
{ scripts: { }, opts: { title: "currently playing", layout: "<CurrentlyPlayingUI>", toolTip: "currently playing media"}},
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index c35f088a6..9db8fe532 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -8,7 +8,7 @@
background-color: $dark-gray;
height: 35px;
border-bottom: $standard-border;
- padding-right: 5px;
+ padding: 0 10px;
align-items: center;
.collectionMenu-hardCodedButton {
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 7d71bce13..38692b924 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -42,6 +42,7 @@ import './CollectionMenu.scss';
import { COLLECTION_BORDER_WIDTH } from './CollectionView';
import { TabDocView } from './TabDocView';
import { CollectionFreeFormView } from './collectionFreeForm';
+import { Group, IconButton, Toggle, ToggleType, Type } from 'browndash-components';
interface CollectionMenuProps {
panelHeight: () => number;
@@ -142,12 +143,17 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
const propIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down';
const propTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar';
- const prop = (
- <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="topar" placement="bottom">
- <div className="collectionMenu-hardCodedButton" style={{ backgroundColor: SettingsManager.propertiesWidth > 0 ? Colors.MEDIUM_BLUE : undefined }} onPointerDown={this.toggleTopBar}>
- <FontAwesomeIcon icon={propIcon} size="lg" />
- </div>
- </Tooltip>
+ const hardCodedButtons = (
+ <div className={`hardCodedButtons`}>
+ <Toggle
+ toggleType={ToggleType.BUTTON}
+ type={Type.PRIM}
+ color={Colors.LIGHT_GRAY}
+ onClick={this.toggleTopBar}
+ toggleStatus={SettingsManager.headerBarHeight > 0}
+ icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
+ />
+ </div>
);
// NEW BUTTONS
@@ -155,7 +161,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
const contMenuButtons = (
<div className="collectionMenu-container">
{this.contMenuButtons}
- {prop}
+ {hardCodedButtons}
</div>
);
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 8f90e4444..446e720e8 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -20,6 +20,7 @@ import { UndoStack } from '../../UndoStack';
import { CollectionStackedTimeline } from '../CollectionStackedTimeline';
import { CollectionSubView } from '../CollectionSubView';
import './CollectionLinearView.scss';
+import { Button, Type } from 'browndash-components';
/**
* CollectionLinearView is the class for rendering the horizontal collection
@@ -201,40 +202,22 @@ export class CollectionLinearView extends CollectionSubView() {
const isExpanded = BoolCast(this.layoutDoc.linearView_IsExpanded);
const menuOpener = (
- <label
- className={`collectionlinearView-label${isExpanded ? '-expanded' : ''}`}
- htmlFor={this.Document[Id] + '-input'}
- style={{ boxShadow: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BoxShadow) }}
- onPointerDown={StopEvent}>
- <div className="collectionLinearView-menuOpener">{Cast(this.props.Document.icon, 'string', null) ?? <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}</div>
- </label>
+ <Button
+ text={Cast(this.props.Document.icon, 'string', null)}
+ icon={<FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}
+ type={Type.TERT}
+ onPointerDown={e => e.stopPropagation()}
+ onClick={() => {
+ this.layoutDoc.linearView_IsExpanded = !isExpanded;
+ }}
+ tooltip={isExpanded ? 'Close' : 'Open'}
+ />
);
return (
<div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsExpanded ? undefined : 'transparent' }}>
- <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension() }}>
- {!this.props.Document.linearView_Expandable ? null : (
- <Tooltip title={<div className="dash-tooltip">{isExpanded ? 'Close' : 'Open'}</div>} placement="top">
- {menuOpener}
- </Tooltip>
- )}
- <input
- id={this.Document[Id] + '-input'}
- type="checkbox"
- checked={isExpanded}
- ref={this.addMenuToggle}
- onChange={action(e => {
- ScriptCast(this.Document.onClick)?.script.run({
- this: this.layoutDoc,
- self: this.rootDoc,
- _readOnly_: false,
- scriptContext: this.props.scriptContext,
- documentView: this.props.DocumentView?.(),
- });
- this.layoutDoc.linearView_IsExpanded = this.addMenuToggle.current!.checked;
- })}
- />
-
+ <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension(), pointerEvents: 'all' }}>
+ {!this.props.Document.linearView_Expandable ? null : menuOpener}
{!this.layoutDoc.linearView_IsExpanded ? null : (
<div
className="collectionLinearView-content"
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 7d5c38140..8314f2d86 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -98,8 +98,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
@computed get label() {
return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
}
- Icon = (color: string) => {
- const icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
+ Icon = (color: string, iconFalse?: boolean) => {
+ let icon;
+ if (iconFalse ) {
+ icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any;
+ if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />
+ else return null
+ }
+ icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
};
@@ -309,25 +315,18 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
console.log(e);
}
+ console.log("current item: ", text);
+
// Get items to place into the list
const list: IListItemProps[] = this.buttonList
.filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
.map(value => (
{
text: value,
- style: { fontFamily: value }
+ style: { fontFamily: value },
+ onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
// shortcut: '#',
}
- // <div
- // className="list-item"
- // key={value}
- // style={{
- // fontFamily: script.script.originalScript.startsWith('{ return setFont') ? value : undefined,
- // backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined,
- // }}
- // onClick={undoable(() => script.script.run({ self: this.rootDoc, value }), value)}>
- // {value[0].toUpperCase() + value.slice(1)}
- // </div>
));
const label =
@@ -338,7 +337,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
);
return (
- <Dropdown color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/>
+ <Dropdown selected={{text: text}} color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/>
)
return (
@@ -466,6 +465,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);
const buttonText: string = StrCast(this.rootDoc.buttonText);
const tooltip: string = StrCast(this.rootDoc.toolTip);
+
// Colors
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
@@ -507,6 +507,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
}
render() {
+ // determine dash button metadata
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
const tooltip: string = StrCast(this.rootDoc.toolTip);
@@ -523,7 +524,46 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
// prettier-ignore
switch (this.type) {
case ButtonType.EditableText: return this.editableText;
- case ButtonType.DropdownList: button = this.dropdownListButton; break;
+ case ButtonType.DropdownList:
+ let script = ScriptCast(this.rootDoc.script);
+ let noviceList: string[] = [];
+ let text: string | undefined;
+ let dropdown = true;
+ let icon: IconProp = 'caret-down';
+ try {
+ if (script?.script.originalScript.startsWith('setView')) {
+ const selected = SelectionManager.Docs().lastElement();
+ if (selected) {
+ if (StrCast(selected.type) === DocumentType.COL) {
+ text = StrCast(selected._type_collection);
+ } else {
+ dropdown = false;
+ text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
+ icon = Doc.toIcon(selected);
+ }
+ } else {
+ dropdown = false;
+ icon = 'globe-asia';
+ text = 'User Default';
+ }
+ noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
+ } else text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+ } catch (e) {
+ console.log(e);
+ }
+ // Get items to place into the list
+ const list: IListItemProps[] = this.buttonList
+ .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
+ .map(value => (
+ {
+ text: value,
+ style: { fontFamily: value },
+ onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
+ // shortcut: '#',
+ }
+ ));
+ button = <Dropdown selected={{text: text}} color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/>
+ break;
case ButtonType.ColorButton: button = this.colorButton; break;
case ButtonType.NumberDropdownButton: button = this.numberDropdownButton; break;
case ButtonType.NumberInlineButton: button = this.numberInlineButton; break;
@@ -532,7 +572,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
case ButtonType.ToggleButton: button = this.toggleButton; break;
case ButtonType.TextButton:
// Script for checking the outcome of the toggle
- const script = ScriptCast(this.rootDoc.script);
+ script = ScriptCast(this.rootDoc.script);
const checkResult = script?.script.run({ _readOnly_: true }).result;
button = (
<div className={`menuButton ${this.type}`} style={{ color, backgroundColor:checkResult ?? backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}>
@@ -548,7 +588,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
);
break;
case ButtonType.MenuButton: button = (
- <IconButton tooltip={tooltip} size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+ <IconButton tooltip={tooltip} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
);
break;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 03:19:13 +0000