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/DataVizBox/components/PieChart.tsx16
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.tsx54
-rw-r--r--src/client/views/nodes/LinkDocPreview.scss2
3 files changed, 42 insertions, 30 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 4bd476bf3..561f39141 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -52,7 +52,6 @@ export class PieChart extends React.Component<PieChartProps> {
// organized by specified number percentages/ratios if one column is selected and it contains numbers
// otherwise, assume data is organized by categories
@computed get byCategory() {
- if (this.props.layoutDoc.dataViz_pie_asHistogram==undefined) this.props.layoutDoc.dataViz_pie_asHistogram = false;
return !/\d/.test(this.props.records[0][this.props.axes[0]]) || this.props.layoutDoc.dataViz_pie_asHistogram;
}
// filters all data to just display selected data if brushed (created from an incoming link)
@@ -324,9 +323,9 @@ export class PieChart extends React.Component<PieChartProps> {
};
@action changeHistogramCheckBox = () => {
- this.props.layoutDoc.dataViz_pie_asHistogram = !this.props.layoutDoc.dataViz_pie_asHistogram
- this.drawChart(this._pieChartData, this.width, this.height)
- }
+ this.props.layoutDoc.dataViz_pie_asHistogram = !this.props.layoutDoc.dataViz_pie_asHistogram;
+ this.drawChart(this._pieChartData, this.width, this.height);
+ };
render() {
var titleAccessor: any = '';
@@ -367,13 +366,12 @@ export class PieChart extends React.Component<PieChartProps> {
fillWidth
/>
</div>
- { (this.props.axes.length === 1 && /\d/.test(this.props.records[0][this.props.axes[0]]))?
- <div className={"asHistogram-checkBox"} style={{width: this.props.width}}>
+ {this.props.axes.length === 1 && /\d/.test(this.props.records[0][this.props.axes[0]]) ? (
+ <div className={'asHistogram-checkBox'} style={{ width: this.props.width }}>
<Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this.props.layoutDoc.dataViz_pie_asHistogram as boolean} />
Organize data as histogram
- </div>
- : null
- }
+ </div>
+ ) : null}
<div ref={this._piechartRef} />
{selected != 'none' ? (
<div className={'selected-data'}>
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index fc66d40db..64f289cf7 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -10,6 +10,7 @@ import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields
import { Utils } from '../../../../Utils';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { SelectionManager } from '../../../util/SelectionManager';
+import { SettingsManager } from '../../../util/SettingsManager';
import { undoable, UndoManager } from '../../../util/UndoManager';
import { ContextMenu } from '../../ContextMenu';
import { DocComponent } from '../../DocComponent';
@@ -126,11 +127,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
// Script for checking the outcome of the toggle
const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
- const label = !Doc.GetShowIconLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
return (
<NumberDropdown
color={color}
+ background={SettingsManager.userBackgroundColor}
numberDropdownType={type}
showPlusMinus={false}
tooltip={this.label}
@@ -154,7 +155,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
return (
<div
className={`menuButton ${this.type} ${active}`}
- style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+ style={{ color, backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
onClick={action(() => {
this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
this.noTooltip = this.rootDoc.dropDownOpen;
@@ -179,10 +180,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
* Dropdown list
*/
@computed get dropdownListButton() {
- const active: string = StrCast(this.rootDoc.dropDownOpen);
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
- const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-
const script = ScriptCast(this.rootDoc.script);
let noviceList: string[] = [];
@@ -206,11 +204,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
icon = Doc.toIcon(selected);
}
- return <Popup icon={<FontAwesomeIcon size={'1x'} icon={icon} />} text={text} type={Type.TERT} color={color} popup={<SelectedDocView selectedDocs={selectedDocs} />} fillWidth />;
+ return (
+ <Popup
+ icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
+ text={text}
+ type={Type.TERT}
+ color={SettingsManager.userColor}
+ background={SettingsManager.userVariantColor}
+ popup={<SelectedDocView selectedDocs={selectedDocs} />}
+ fillWidth
+ />
+ );
}
} else {
dropdown = false;
- return <Button text={`None Selected`} type={Type.TERT} color={color} fillWidth inactive />;
+ return <Button text="None Selected" type={Type.TERT} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} fillWidth inactive />;
}
noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
} else {
@@ -235,16 +243,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
}));
return (
- <Dropdown
- selectedVal={text}
- setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
- color={color}
- type={isViewDropdown ? Type.TERT : Type.PRIM}
- dropdownType={DropdownType.SELECT}
- items={list}
- tooltip={this.label}
- fillWidth
- />
+ <div style={{ color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}>
+ <Dropdown
+ selectedVal={text}
+ setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
+ color={SettingsManager.userColor}
+ background={isViewDropdown ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+ type={Type.TERT}
+ dropdownType={DropdownType.SELECT}
+ items={list}
+ tooltip={this.label}
+ fillWidth
+ />
+ </div>
);
}
@@ -276,6 +287,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
selectedColor={curColor}
type={Type.PRIM}
color={color}
+ background={SettingsManager.userBackgroundColor}
icon={this.Icon(color)!}
tooltip={tooltip}
label={this.label}
@@ -296,6 +308,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
tooltip={`Toggle ${tooltip}`}
type={Type.PRIM}
color={color}
+ background={SettingsManager.userBackgroundColor}
label={this.label}
items={DocListCast(this.rootDoc.data).map(item => ({
icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />,
@@ -330,6 +343,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
toggleStatus={toggleStatus}
text={buttonText}
color={color}
+ background={SettingsManager.userBackgroundColor}
icon={this.Icon(color)!}
label={this.label}
onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
@@ -386,8 +400,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
case ButtonType.ToggleButton: return this.toggleButton;
case ButtonType.ClickButton:
case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />;
- case ButtonType.TextButton: return <Button {...btnProps} text={StrCast(this.rootDoc.buttonText)}/>;
- case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />;
+ case ButtonType.TextButton: return <Button {...btnProps} color={color}
+ background={SettingsManager.userBackgroundColor} text={StrCast(this.rootDoc.buttonText)}/>;
+ case ButtonType.MenuButton: return <IconButton {...btnProps} color={color}
+ background={SettingsManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />;
}
return this.defaultButton;
}
diff --git a/src/client/views/nodes/LinkDocPreview.scss b/src/client/views/nodes/LinkDocPreview.scss
index c68e55f73..28216394d 100644
--- a/src/client/views/nodes/LinkDocPreview.scss
+++ b/src/client/views/nodes/LinkDocPreview.scss
@@ -1,7 +1,6 @@
.linkDocPreview {
position: absolute;
pointer-events: all;
- background-color: lightblue;
border: 8px solid white;
border-radius: 7px;
box-shadow: 3px 3px 1.5px grey;
@@ -11,7 +10,6 @@
cursor: pointer;
.linkDocPreview-inner {
- background-color: white;
width: 100%;
height: 100%;
pointer-events: none;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-26 05:26:47 +0000