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 | 24 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.tsx | 121 |
3 files changed, 146 insertions, 1 deletions
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 7a09ad9e2..f53a7d163 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 }); + if (this.Document.title === 'Font') getStyle = (val: string) => ({ fontFamily: val }); // bcz: major hack to style the font dropdown items --- needs to become part of the dropdown's metadata } // 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..211a961c1 --- /dev/null +++ b/src/client/views/nodes/IconTagBox.scss @@ -0,0 +1,24 @@ +@import '../global/globalCssVariables.module.scss'; + +.card-button-container { + display: flex; + padding: 3px; + position: absolute; + pointer-events: none; + background-color: rgb(218, 218, 218); + border-radius: 50px; + transform: translateY(25px); + align-items: center; + justify-content: start; + + button { + pointer-events: auto; + transform: translateY(-7.5px); + width: 30px; + height: 30px; + border-radius: 50%; + background-color: $dark-gray; + margin: 5px; + 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..f86372ec0 --- /dev/null +++ b/src/client/views/nodes/IconTagBox.tsx @@ -0,0 +1,121 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Tooltip } from '@mui/material'; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; +import React from 'react'; +import { numberRange } from '../../../Utils'; +import { Doc, StrListCast } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; +import { BoolCast, DocCast, NumCast, StrCast } from '../../../fields/Types'; +import { CollectionViewType } from '../../documents/DocumentTypes'; +import { SnappingManager } from '../../util/SnappingManager'; +import { undoable } from '../../util/UndoManager'; +import { MainView } from '../MainView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import { PropertiesView } from '../PropertiesView'; +import './IconTagBox.scss'; + +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: IconTagProps) { + super(props); + } + + componentDidUpdate(): 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]]) as IconProp; + }; + + 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).toString()} 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 ? 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: IconProp): JSX.Element => { + const isActive = doc[icon.toString()]; + const color = isActive ? '#4476f7' : '#323232'; + + return <FontAwesomeIcon icon={icon} style={{ color, height: '30px', width: '30px' }} />; + }; + + render() { + return <>{this.renderButtons(this._props.doc)}</>; + } +} |