diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/FontIconBox/FontIconBox.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.scss | 30 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.tsx | 142 |
3 files changed, 173 insertions, 1 deletions
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 7a09ad9e2..0fe112634 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -192,7 +192,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { } else { text = script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result as string; // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); - getStyle = (val: string) => ({ fontFamily: val }); + // getStyle = (val: string) => ({ fontFamily: val }); } // Get items to place into the list diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss new file mode 100644 index 000000000..8c0f92c90 --- /dev/null +++ b/src/client/views/nodes/IconTagBox.scss @@ -0,0 +1,30 @@ +@import '../global/globalCssVariables.module.scss'; + +.card-button-container { + display: flex; + padding: 3px; + position: absolute; + // width: 300px; + // height:100px; + pointer-events: none; /* This ensures the container does not capture hover events */ + + background-color: rgb(218, 218, 218); /* Background color of the container */ + border-radius: 50px; /* Rounds the corners of the container */ + transform: translateY(25px); + // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */ + align-items: center; /* Centers buttons vertically */ + justify-content: start; /* Centers buttons horizontally */ + + button { + pointer-events: auto; /* Re-enable pointer events for the buttons */ + transform: translateY(-7.5px); + + width: 30px; + height: 30px; + border-radius: 50%; + background-color: $dark-gray; + // border-color: $medium-blue; + margin: 5px; // transform: translateY(-50px); + background-color: transparent; + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx new file mode 100644 index 000000000..370ce51d1 --- /dev/null +++ b/src/client/views/nodes/IconTagBox.tsx @@ -0,0 +1,142 @@ +import React from "react"; +import { observer } from "mobx-react"; +import { computed } from "mobx"; +import { ObservableReactComponent } from "../ObservableReactComponent"; +import { NumCast } from "../../../fields/Types"; +import { Doc } from "../../../fields/Doc"; +import { numberRange } from "../../../Utils"; +import { Tooltip } from "@mui/material"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { undoable } from "../../util/UndoManager"; +import { BoolCast } from "../../../fields/Types"; +import { DocCast } from "../../../fields/Types"; +import './IconTagBox.scss'; +import {DocData } from '../../../fields/DocSymbols'; +import { StrListCast } from "../../../fields/Doc"; +import { StrCast } from "../../../fields/Types"; +import { CollectionViewType } from "../../documents/DocumentTypes"; +import { SnappingManager } from "../../util/SnappingManager"; +import { MainView } from "../MainView"; +import { PropertiesView } from "../PropertiesView"; + + +export interface IconTagProps { + doc: Doc; +} + +/** + * Renders the icon tags that rest under the document. The icons rendered are determined by the values of + * each icon in the userdoc. + */ +@observer +export class IconTagBox extends ObservableReactComponent<IconTagProps> { + @computed + get currentScale() { + return NumCast((this._props.doc.embedContainer as Doc)?._freeform_scale, 1); + + } + + constructor(props: any) { + super(props); + } + + componentDidUpdate(prevProps: Readonly<IconTagProps>): void { + this._props.doc[DocData].tagHeight = 36*this.currentScale; + } + + + /** + * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups + * @param doc + * @param cardSort + * @returns + */ + renderButtons = (doc: Doc): JSX.Element | null => { + const amButtons = (StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length) + 1 + + const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + + const totalWidth = (amButtons -1) * 35 + (amButtons -1) * 2 * 5 + 6; + + const iconMap = (buttonID: number) => { + return StrCast(Doc.UserDoc()[keys[buttonID]]) + + }; + + const isCard = DocCast(this._props.doc.embedContainer).type_collection === CollectionViewType.Card + + + + return ( + <div + className="card-button-container" + style={{ + transformOrigin: 'top left', + transform: `scale(${ isCard ? 2 : 0.6 / this.currentScale}) + translateY(${doc[DocData].showLabels ? ((NumCast(doc[DocData].keywordHeight)*(1-this.currentScale))) : 0}px) + `, + width: `${totalWidth}px`, + fontSize: '50px' + }} + > + {numberRange(amButtons-1).map(i => ( + <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap(i)} group</div>}> + <button key = {i} type="button" onClick={() => this.toggleButton(doc, iconMap(i) )}> + {this.getButtonIcon(doc, iconMap(i))} + </button> + </Tooltip> + ))} + </div> + ); + }; + + /** + * Opens the filter panel in the properties menu + */ + + openHotKeyMenu = () => { + SnappingManager.PropertiesWidth < 5 && SnappingManager.SetPropertiesWidth(0); + SnappingManager.SetPropertiesWidth(MainView.Instance.propertiesWidth() < 15 ? Math.min(MainView.Instance._dashUIWidth - 50, 250) : 0); + + PropertiesView.Instance.CloseAll() + PropertiesView.Instance.openFilters = true + } + + /** + * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt + * @param childPairIndex + * @param buttonID + * @param doc + */ + toggleButton = undoable((doc: Doc, icon: string) => { + BoolCast(doc[icon]) ? doc[icon] = false : doc[icon] = true + + }, 'toggle card tag'); + + + /** + * Determines whether or not the given icon is active depending on the doc's data + * @param doc + * @param icon + * @returns + */ + getButtonIcon = (doc: Doc, icon: any): JSX.Element => { + const isActive = doc[icon] + const color = isActive ? '#4476f7' : '#323232'; + + return <FontAwesomeIcon icon={icon} style={{ color , height: '30px', width: '30px'}} />; + }; + + render (){ + return ( + <> + {this.renderButtons(this._props.doc)} + + </> + ) + + } + +} + + |