aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts2
-rw-r--r--src/client/views/ContextMenu.scss23
-rw-r--r--src/client/views/ContextMenu.tsx3
-rw-r--r--src/client/views/ContextMenuItem.tsx13
-rw-r--r--src/client/views/StyleProvider.tsx11
-rw-r--r--src/client/views/UndoStack.tsx10
-rw-r--r--src/client/views/collections/TreeView.scss23
-rw-r--r--src/client/views/collections/TreeView.tsx30
8 files changed, 89 insertions, 26 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 39137462a..2e4fb0f1c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -602,7 +602,7 @@ export class CurrentUserUtils {
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: "Undo ⌘Z" }},
- { scripts: { onClick: "redo()"}, opts: { title: "Redo", icon: "redo-alt", toolTip: "Redo ⌘R" }},
+ { scripts: { onClick: "redo()"}, opts: { title: "Redo", icon: "redo-alt", toolTip: "Redo ⌘⇧Z" }},
{ 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/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 1361d99fc..588eff1d1 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -52,13 +52,29 @@
user-select: none;
transition: all 0.1s;
border-style: none;
- // padding: 10px 0px 10px 0px;
+ position: relative;
white-space: nowrap;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
padding-right: 30px;
+ .contextMenu-item-background {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ filter: opacity(0);
+ }
+
+ &:hover {
+ .contextMenu-item-background {
+ filter: opacity(0.2) !important;
+ }
+ }
+
.contextMenu-item-icon-background {
pointer-events: all;
background-color: transparent;
@@ -133,11 +149,6 @@
// border-top: solid 1px; //TODO:glr clean
}
-.contextMenu-item:hover {
- transition: all 0.1s ease;
- background: $light-blue;
-}
-
.contextMenu-description {
margin-left: 5px;
text-align: left;
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index d54d4dc7b..1fffb3dbc 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -221,7 +221,8 @@ export class ContextMenu extends React.Component {
})}
style={{
left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }),
- background: StrCast(Doc.UserDoc().userBackgroundColor)
+ background: StrCast(Doc.UserDoc().userBackgroundColor),
+ color: StrCast(Doc.UserDoc().userColor)
}}>
{!this.itemsNeedSearch ? null : (
<span className={'search-icon'}>
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 33f250986..daa2c152a 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -4,6 +4,8 @@ import { observer } from 'mobx-react';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { UndoManager } from '../util/UndoManager';
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
export interface OriginalMenuProps {
description: string;
@@ -90,6 +92,11 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
</span>
) : null}
<div className="contextMenu-description">{this.props.description.replace(':', '')}</div>
+ <div className={`contextMenu-item-background`}
+ style={{
+ background: StrCast(Doc.UserDoc().userColor)
+ }}
+ />
</div>
);
} else if ('subitems' in this.props) {
@@ -103,6 +110,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
style={{
marginLeft: window.innerHeight - this._overPosX - 50 > 0 ? '90%' : '20%',
marginTop,
+ background: StrCast(Doc.UserDoc().userBackgroundColor)
}}>
{this._items.map(prop => (
<ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
@@ -133,6 +141,11 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
{this.props.description}
<FontAwesomeIcon icon={'angle-right'} size="lg" style={{ position: 'absolute', right: '10px' }} />
</div>
+ <div className={`contextMenu-item-background`}
+ style={{
+ background: StrCast(Doc.UserDoc().userColor)
+ }}
+ />
{submenu}
</div>
);
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index c7616a9ba..bbbad3690 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -22,6 +22,7 @@ import { DocumentViewProps } from './nodes/DocumentView';
import { FieldViewProps } from './nodes/FieldView';
import { KeyValueBox } from './nodes/KeyValueBox';
import { SliderBox } from './nodes/SliderBox';
+import { BsArrowDown, BsArrowUp, BsArrowDownUp } from 'react-icons/bs'
import './StyleProvider.scss';
import React = require('react');
@@ -109,11 +110,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
}
return Doc.toIcon(doc, isEmpty ? undefined : isOpen);
case StyleProp.TreeViewSortings:
- const allSorts: { [key: string]: { color: string; label: string } | undefined } = {};
- allSorts[TreeSort.Down] = { color: 'blue', label: '↓' };
- allSorts[TreeSort.Up] = { color: 'crimson', label: '↑' };
- if (doc?._type_collection === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: 'green', label: 'z' };
- allSorts[TreeSort.None] = { color: 'darkgray', label: '\u00A0\u00A0\u00A0' };
+ const allSorts: { [key: string]: { color: string; icon: JSX.Element | string } | undefined } = {};
+ allSorts[TreeSort.Down] = { color: Colors.MEDIUM_BLUE, icon: <BsArrowDown/> };
+ allSorts[TreeSort.Up] = { color: 'crimson', icon: <BsArrowUp/> };
+ if (doc?._type_collection === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: 'green', icon: 'Z' };
+ allSorts[TreeSort.None] = { color: 'darkgray', icon: <BsArrowDownUp/> };
return allSorts;
case StyleProp.Highlighting:
if (doc && (Doc.IsSystem(doc) || doc.type === DocumentType.FONTICON)) return undefined;
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
index aaca7110e..caf04cc1b 100644
--- a/src/client/views/UndoStack.tsx
+++ b/src/client/views/UndoStack.tsx
@@ -5,7 +5,8 @@ import { UndoManager } from '../util/UndoManager';
import './UndoStack.scss';
import { StrCast } from '../../fields/Types';
import { Doc } from '../../fields/Doc';
-import { Popup, Type } from 'browndash-components';
+import { Popup, Type, isDark } from 'browndash-components';
+import { Colors } from './global/globalEnums';
interface UndoStackProps {
width?: number;
@@ -17,18 +18,19 @@ export class UndoStack extends React.Component<UndoStackProps> {
@observable static HideInline: boolean;
@observable static Expand: boolean;
render() {
+ const background = UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userBackgroundColor)
return this.props.inline && UndoStack.HideInline ? null : (
<div className="undoStack-outerContainer">
<Popup
text={'Undo/Redo Stack'}
- color={StrCast(Doc.UserDoc().userVariantColor)}
+ color={UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userVariantColor)}
placement={`top-start`}
type={Type.TERT}
popup={
<div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })}
style={{
- background: UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userBackgroundColor),
- color: StrCast(Doc.UserDoc().userColor)
+ background: background,
+ color: isDark(background) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY
}}>
{UndoManager.undoStackNames.map((name, i) => (
<div className="undoStack-resultContainer" key={i}>
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index cfa658944..d22e85880 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -47,6 +47,7 @@
color: $medium-gray;
border: #80808030 1px solid;
border-radius: 5px;
+ z-index: 1;
}
}
@@ -54,9 +55,6 @@
position: absolute;
height: max-content;
pointer-events: none;
- color: white;
- border-radius: 4px;
- font-size: 10px;
}
.treeView-container-active {
@@ -104,10 +102,26 @@
align-items: center;
width: max-content;
border-radius: 5px;
+ overflow: hidden;
+ position: relative;
+ z-index: 1;
+
+ .treeView-background {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ filter: opacity(0);
+ }
&:hover {
- background-color: #bdddf5;
+ .treeView-background {
+ filter: opacity(0.2) !important;
+ }
}
+
//align-items: center;
::-webkit-scrollbar {
@@ -140,6 +154,7 @@
opacity: 0.75;
pointer-events: all;
cursor: pointer;
+ z-index: 1;
> svg {
margin-left: 0.25rem;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 9158508fc..d904749b1 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -539,7 +539,7 @@ export class TreeView extends React.Component<TreeViewProps> {
@computed get renderContent() {
TraceMobx();
const expandKey = this.treeViewExpandedView;
- const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; label: string } }) ?? {};
+ const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {};
const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color)
console.log("tree view", color, this.doc.title, Doc.IsSystem(this.doc))
if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) {
@@ -585,8 +585,23 @@ export class TreeView extends React.Component<TreeViewProps> {
color: color
}}>
{!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
- <div className={'treeView-sorting'} style={{ background: sortings[sorting]?.color }}>
- {sortings[sorting]?.label}
+ <div className={'treeView-sorting'}>
+ <IconButton
+ color={sortings[sorting]?.color}
+ size={Size.XSMALL}
+ icon={sortings[sorting]?.icon}
+ onPointerDown={e => {
+ downX = e.clientX;
+ downY = e.clientY;
+ e.stopPropagation();
+ }}
+ onClick={undoable(e => {
+ if (this.props.isContentActive() && Math.abs(e.clientX - downX) < 3 && Math.abs(e.clientY - downY) < 3) {
+ !this.props.treeView.outlineMode && (this.doc.treeViewSortCriterion = sortKeys[(curSortIndex + 1) % sortKeys.length]);
+ e.stopPropagation();
+ }
+ }, 'sort order')}
+ />
</div>
)}
<ul
@@ -689,7 +704,7 @@ export class TreeView extends React.Component<TreeViewProps> {
@computed get renderBullet() {
TraceMobx();
const iconType = this.props.treeView.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question';
- const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color)
+ const color = StrCast(Doc.UserDoc().userColor);
const checked = this.onCheckedClick ? this.doc.treeViewChecked ?? 'unchecked' : undefined;
return (
<div
@@ -757,7 +772,7 @@ export class TreeView extends React.Component<TreeViewProps> {
@observable headerEleWidth = 0;
@computed get titleButtons() {
const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations);
- const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color);
+ const color = StrCast(Doc.UserDoc().userColor);
return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
<>
{customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
@@ -1000,6 +1015,11 @@ export class TreeView extends React.Component<TreeViewProps> {
onPointerEnter={this.onPointerEnter}
onPointerLeave={this.onPointerLeave}>
{contents}
+ <div className={`treeView-background`}
+ style={{
+ background: StrCast(Doc.UserDoc().userColor)
+ }}
+ />
</div>
{this.renderBorder}
</>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:06:47 +0000