diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 24 | ||||
| -rw-r--r-- | src/client/views/DocumentButtonBar.scss | 5 | ||||
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 43 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/FilterPanel.scss | 64 | ||||
| -rw-r--r-- | src/client/views/FilterPanel.tsx | 285 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.tsx | 38 |
8 files changed, 380 insertions, 91 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 67f8dafc4..0d8955ced 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -44,6 +44,7 @@ export interface Button { title?: string; toolTip?: string; icon?: string; + isSystem?: boolean; btnType?: ButtonType; numBtnMin?: number; numBtnMax?: number; @@ -713,14 +714,14 @@ pie title Minerals in my tap water // ] // } static tagGroupTools(): Button[] { - return [ - { title: "Star", icon: StrCast(Doc.UserDoc().myFilterHotKeyIcons) ?? "Star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Heart", icon: "heart", toolTip:"Click to toggle the heart group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Bolt", icon: "bolt", toolTip:"Click to toggle the bolt group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Options", icon: "gear", toolTip:"Click to customize your filter panel", btnType: ButtonType.ClickButton, expertMode: false, toolType:"opts", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - - + // hack: if there's no dashboard, create default filters. otherwise, just make sure that the Options button is preserved + return (Doc.UserDoc().activeDashboard ? [] : [ + { title: "Star", isSystem: false, icon: "star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + { title: "Heart", isSystem: false,icon: "heart", toolTip:"Click to toggle the heart group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + { title: "Bolt", isSystem: false,icon: "bolt", toolTip:"Click to toggle the bolt group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + { title: "Cloud", isSystem: false,icon: "cloud", toolTip:"Click to toggle the cloud group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + + // { title: "Group 1", icon, toolTip:"Click to toggle group 1's visibility", btnType: ButtonType.ToggleButton, width: 40, expertMode: false, toolType:"1", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "Group 2", icon, toolTip:"Click to toggle group 2's visibility", btnType: ButtonType.ToggleButton, width: 40, expertMode: false, toolType:"2", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "Group 3", icon, toolTip:"Click to toggle group 3's visibility", btnType: ButtonType.ToggleButton, width: 40, expertMode: false, toolType:"3", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, @@ -728,7 +729,9 @@ pie title Minerals in my tap water // { title: "", icon, toolTip:"Click to toggle group 5's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"5", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "", icon, toolTip:"Click to toggle group 6's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"6", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "", icon, toolTip:"Click to toggle group 7's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"7", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - ] + ]).concat([ + { title: "Options", isSystem: true,icon: "gear", toolTip:"Click to customize your filter panel", btnType: ButtonType.ClickButton, expertMode: false, toolType:"opts", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}} + ]) } static viewTools(): Button[] { return [ @@ -871,8 +874,9 @@ pie title Minerals in my tap water /// initializes a context menu button for the top bar context menu static setupContextMenuButton(params:Button, btnDoc?:Doc, btnContainer?:Doc) { const reqdOpts:DocumentOptions = { + isSystem: true, ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, - color: Colors.WHITE, isSystem: true, + color: Colors.WHITE, _nativeWidth: params.width ?? 30, _width: params.width ?? 30, _height: 30, _nativeHeight: 30, linearBtnWidth: params.linearBtnWidth, toolType: params.toolType, expertMode: params.expertMode, diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 374d6ecd3..ede277aae 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -29,6 +29,11 @@ $linkGap: 3px; background: black; height: 20px; align-items: center; + + .tags { + width: 40px; + + } } .documentButtonBar-followTypes { width: 20px; diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c8df66535..c61ebfb4c 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -288,7 +288,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( const targetDoc = this.view0?.Document; const metaBtn = (name: string, icon: IconProp) => { - const tooltip = `Show ${name}`; + const tooltip = `Toggle ${name}`; return ( <Tooltip title={<div className="dash-tooltip">{tooltip}</div>}> <div className="documentButtonBar-pinIcon"> @@ -298,18 +298,16 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( key={icon.toString()} size="sm" icon={icon} - // onPointerEnter={action(() => { - // this.subPin = - // (pinLayoutView ? 'Layout' : '') + - // (pinLayoutView && pinContentView ? ' &' : '') + - // (pinContentView ? ' Content View' : '') + - // (pinLayoutView && pinContentView ? '(shift+alt)' : pinLayoutView ? '(shift)' : pinContentView ? '(alt)' : ''); - // })} - // onPointerLeave={action(() => { - // this.subPin = ''; - // })} onClick={e => { - name === 'tags' ? targetDoc && (targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags) : 'hi' + // console.log('wtfff') + // name === 'tags' ?? + if (name === 'tags'){ + (targetDoc && (targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags)) + } else { + (targetDoc && (targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels)) + } + + }} @@ -323,24 +321,27 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( return !targetDoc ? null : ( + <div className='documentButtonBar-icon'> + <div className="documentButtonBar-pinTypes" style = {{width: '40px'}}> + {metaBtn('tags', 'star')} + {metaBtn("keywords", 'id-card')} + </div> + <Tooltip title={<div className="dash-keyword-button">Open keyword menu</div>}> <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={() => { - targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels; - }}> + // targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags; + }} + > - <div className="documentButtonBar-pinTypes"> - { - metaBtn('tags', "tag") - /* {pinBtn(true, false, 'window-maximize')} - {pinBtn(false, true, 'address-card')} - {pinBtn(true, true, 'id-card')} */} - </div> + <FontAwesomeIcon className="documentdecorations-icon" icon="tag" /> </div> </Tooltip> + </div> + ); } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b5d819b97..f3b4013f7 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -703,6 +703,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2); const radiusHandle = (borderRadius / docMax) * maxDist; const radiusHandleLocation = Math.min(radiusHandle, maxDist); + const sharingMenu = Doc.IsSharingEnabled && docShareMode ? ( @@ -765,6 +766,12 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora const centery = hideTitle ? 0 : this._titleHeight; const transformOrigin = `${50}% calc(50% + ${centery / 2}px)`; const freeformDoc = DocumentView.Selected().some(v => CollectionFreeFormDocumentView.from(v)); + + + const keyWordTrans = doc[DocData].showLabels ? NumCast(doc[DocData].keywordHeight) : 0 + const tagTrans = doc[DocData].showIconTags ? NumCast(doc[DocData].tagHeight) : 0 + + return ( <div className="documentDecorations" style={{ display: this._showNothing && !freeformDoc ? 'none' : undefined }}> <div @@ -832,7 +839,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora <div className="link-button-container" style={{ - top: `${(doc[DocData].showLabels || doc[DocData].showIconTags) ? 4 + (doc._keywordHeight as number) : 4}px`, + top: `${ keyWordTrans + tagTrans + 4}px`, transform: `translate(${-this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `, }}> <DocumentButtonBar views={() => DocumentView.Selected()} /> diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss index d6d2956aa..1877cc78b 100644 --- a/src/client/views/FilterPanel.scss +++ b/src/client/views/FilterPanel.scss @@ -1,3 +1,4 @@ + .filterBox-flyout { display: block; text-align: left; @@ -228,6 +229,69 @@ vertical-align: middle; } +.filterHotKey-button { + pointer-events: auto; + // padding-right: 8px; //5px; + width: 100%; //width: 25px; + border-radius: 5px; + // margin-right: 20px; + margin-bottom: 8px; + border-color: #d3d3d3; + border-style: solid; + border-width: thin; + transition: all 0.3s ease-out; + + &:hover{ + border-color: #e9e9e9; + background-color: #878484 + } + + + + &.active { + background-color: #878484; + + + + .icon-panel{ + display: flex + } + } +} + +.hotKeyButtons { + position: relative; + width: 100%; + // margin-top: 3px; + // // grid-column: 1/4; + // width: 100%; + // height: auto; + // display: flex; + // // flex-direction: row; + // // flex-wrap: wrap; + // padding-bottom: 5.5px; +} + +.hotKey-icon-button { + // pointer-events: auto; /* Re-enable pointer events for the buttons */ + + // width: 30px; + // height: 30px; + // border-color: $medium-blue; + background-color: transparent; + &.active{ + + + } + +} + +.icon-panel { + bottom: -14px; + + + +} // .sliderBox-outerDiv { // width: 30%;// width: calc(100% - 14px); // 14px accounts for handles that are at the max value of the slider that would extend outside the box // height: 40; // height: 100%; diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index 332a89a96..e5f9fdb51 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -28,6 +28,19 @@ import { CurrentUserUtils } from '../util/CurrentUserUtils'; import { DocumentOptions } from '../documents/Documents'; import { DocUtils } from '../documents/DocUtils'; import { dropActionType } from '../util/DropActionTypes'; +import { Toggle } from 'browndash-components'; +import { SettingsManager } from '../util/SettingsManager'; +import { StrCast } from '../../fields/Types'; +import { ToggleType } from 'browndash-components'; +import { MultiToggle } from 'browndash-components'; +import { Type } from 'browndash-components'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { DocData } from '../../fields/DocSymbols'; +import { DocumentType } from '../documents/DocumentTypes'; +import { Tooltip } from '@mui/material'; +import { useLocalObservable } from 'mobx-react'; +import { useRef } from 'react'; +import { useEffect } from 'react'; interface filterProps { @@ -228,11 +241,14 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { }; addHotkey() { - const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); - const filter = buttons['Filter'] - const filter2 = DocCast(filter) - const but2 = Doc.UserDoc().myContextMenuBtns + const filter = DocCast(buttons.Filter); + const filter2 = DocCast(filter); + const but2 = Doc.UserDoc().myContextMenuBtns; + + console.log(DocCast(filter).data); + + //[idToDoc("0bec0963-95ac-4978-8606-8af4c7b9badd"),idToDoc("f740e910-bf83-4ee3-b13a-1e63c49dd254"),idToDoc("61db82b0-025a-4cb9-937b-97b1290e8f1a"),idToDoc("1046859f-34ac-4421-bc07-ee2f2cf812e2"),idToDoc("badaff47-3c3a-4b78-a7d6-f2cbc8e45ba0")] // const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), { // _width: 250, @@ -251,59 +267,135 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { // DocumentView.getDocumentView(DocCast(buttons['Card']))?.ComponentView?.addDocument?.(hm) - const hi = CurrentUserUtils.contextMenuTools() - - const newKey: Button = { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}} - - - const heyy = [...hi, newKey] - - Doc.UserDoc().myFilterHotKeyIcons = "palette" - Doc.UserDoc().myFilterHotKeyTitles = "hi" - - CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc()); - - - - Doc.UserDoc().hi = Docs.Create.FontIconDocument( - { title: '', - icon: 'map-pin', - - backgroundColor: '#ACCEF7', - layout_hideAllLinks: true, - _width: 15, - _height: 15, - _xPadding: 0, - } - ) - - - // buttons['Filter'] + // const hi = CurrentUserUtils.contextMenuTools() + + const newKey: Button = { + title: 'Bob', + icon: 'cloud', + toolTip: "Click to toggle the cloud group's visibility", + btnType: ButtonType.ToggleButton, + expertMode: false, + toolType: 'cloud', + funcs: {}, + scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' }, + }; + + // const heyy = [...hi, newKey] + + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(['hi hi', 'supppp']) + + Doc.UserDoc()['hi hi'] = 'heart' + Doc.UserDoc()['supppp'] = 'star' + + // CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc()); + + // Doc.UserDoc().hi = Docs.Create.FontIconDocument( + // { title: '', + // icon: 'map-pin', + + // backgroundColor: '#ACCEF7', + // layout_hideAllLinks: true, + // _width: 15, + // _height: 15, + // _xPadding: 0, + // } + // ) + + // // buttons['Filter'] + + // const reqdCtxtOpts: DocumentOptions = { + // title: 'Filter', + // undoIgnoreFields: new List<string>(['width', 'linearView_IsOpen']), + // flexGap: 0, + // childDragAction: dropActionType.embed, + // childDontRegisterViews: true, + // linearView_IsOpen: true, + // ignoreClick: true, + // linearView_Expandable: false, + // _height: 35, + // }; + const ctxtMenuBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter); + ctxtMenuBtn.isSystem = ctxtMenuBtn[DocData].isSystem = undefined; + Doc.AddDocToList(filter, 'data', ctxtMenuBtn); + // // // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns); + + // DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]); + // newCol && dv.ComponentView?.addDocument?.(newCol); + // console.log(but2 + "omgg") + // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]); - const reqdCtxtOpts:DocumentOptions = { title: "hi", undoIgnoreFields:new List<string>(['width', "linearView_IsOpen"]), flexGap: 0, childDragAction: dropActionType.embed, childDontRegisterViews: true, linearView_IsOpen: true, ignoreClick: true, linearView_Expandable: false, _height: 35 }; - const ctxtMenuBtns = CurrentUserUtils.setupContextMenuBtn(newKey, buttons); - // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns); + // Doc.UserDoc().myContextMenuBtns = new List<Doc>([...buttons, newKey as Doc]) + } + hotKeyButtons() { + const selected = DocumentView.SelectedDocs().lastElement(); - DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]); + function isAttrFiltered(attr: string) { + if (selected && selected._childFilters != undefined && selected.type === DocumentType.COL) { + return StrListCast(selected._childFilters).some(filter => filter.includes(attr)); + } else { + return false; + } + // return selected._childFilters ? StrListCast(selected._childFilters).some(filter => filter.includes(attr)) : false; + } + const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); - // newCol && dv.ComponentView?.addDocument?.(newCol); + console.log(hotKeys + 'hiihihi'); - // console.log(but2 + "omgg") + const hi = ['star', 'heart', 'bolt']; + - // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]); + //selecting a button should make t so that the the icon on the top filter panel becomes said icon + const buttons = hotKeys.map((hotKey, i) => ( + // <div key={i} className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` } + + // onClick={undoable((e: React.MouseEvent) => { + // // if (e.target === e.currentTarget){ + // isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); + // // } + // }, hotKey)} - // Doc.UserDoc().myContextMenuBtns = new List<Doc>([...buttons, newKey as Doc]) + // // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}} + + + // > + {/* <Toggle + toggleStatus={isAttrFiltered(hotKey)} + tooltip={'toggle filter'} + text={hotKey} + color={SettingsManager.userColor} + icon={<FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any}/>} + iconPlacement="left" + align="flex-start" + fillWidth + toggleType={ToggleType.BUTTON} + onClick={undoable(() => { + isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); + }, hotKey)} + /> */} + <> + + <Tooltip key={i} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> + <HotKeyIconButton hotKey = {hotKey} /> + + </Tooltip> + + </> + )); + + return buttons; } + // @observable iconPanelMap: Map<string, number> = new Map(); + render() { return ( <div className="filterBox-treeView"> @@ -376,8 +468,9 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} /> </div> </div> - </div> + + <div>{this.hotKeyButtons()}</div> </div> ); } @@ -486,3 +579,113 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { return undefined; } } + + + +interface HotKeyButtonProps { + hotKey: string; + selected?: Doc +} + +const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, selected}) => { + const state = useLocalObservable(() => ({ + isActive: false, + toggleActive() { + this.isActive = !this.isActive; + }, + deactivate() { + this.isActive = false; + } + })); + + const panelRef = useRef<HTMLDivElement>(null); + + const handleClick = () => { + state.toggleActive(); + + console.log(state.isActive + "hmmm") + }; + + const handleClickOutside = (event: MouseEvent) => { + if (panelRef.current && !panelRef.current.contains(event.target as Node)) { + state.deactivate(); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const iconOpts = ['star', 'heart', 'bolt']; + + const iconPanel = iconOpts.map((icon, i) => ( + <button key={i} onClick={() => Doc.UserDoc()[hotKey] = icon}> + <FontAwesomeIcon icon={icon as any} /> + </button> + )); + + const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + + return ( + <> + + <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` } + + onClick={undoable((e: React.MouseEvent) => { + + // if (e.target === e.currentTarget){ + isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); + // } + }, hotKey)} + + // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}} + + + > + <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}> + <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> + <button + type="button" + onClick={(e: React.MouseEvent) => { + console.log('hiii') + e.stopPropagation(); + handleClick(); + + }} + + > + <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl"/> + </button> + </Tooltip> + {state.isActive && ( + <div className="icon-panel" > + {iconPanel} + </div> + )} + + + </div> + + <p> {hotKey.toUpperCase()} </p> + + + <button onClick={(e: React.MouseEvent) => { + e.stopPropagation(); + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); + }}> + <FontAwesomeIcon icon={'x' as any} /> + </button> + + </div> + + + </> + + + ); +}); + + diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f552540b8..9da359e1b 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -551,7 +551,8 @@ export class MainView extends ObservableReactComponent<{}> { fa.faStar, fa.faCloud, fa.faBolt, - fa.faLightbulb + fa.faLightbulb, + fa.faX ] ); } diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx index 9a2273c3a..73360b684 100644 --- a/src/client/views/nodes/IconTagBox.tsx +++ b/src/client/views/nodes/IconTagBox.tsx @@ -41,24 +41,24 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> { this.ref = React.createRef(); } - componentDidMount(): void { - this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; - this._props.doc._keywordHeight = this.height; - - reaction( - () => this.currentScale, - () => { - if (this.currentScale < 1) { - this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; - this._props.doc._keywordHeight = this.height; - } - } - ); - } + // componentDidMount(): void { + // this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; + // this._props.doc._keywordHeight = this.height; + + // reaction( + // () => this.currentScale, + // () => { + // if (this.currentScale < 1) { + // this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; + // this._props.doc._keywordHeight = this.height; + // } + // } + // ); + // } componentDidUpdate(prevProps: Readonly<IconTagProps>): void { - this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; - this._props.doc._keywordHeight = this.height; + // this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; + this._props.doc[DocData].tagHeight = 36*this.currentScale; } /** @@ -93,12 +93,16 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> { 3: 'bolt' }; + + return ( <div className="card-button-container" style={{ transformOrigin: 'top left', - transform: `scale(${1 / this.currentScale}) translateY(${doc[DocData].showLabels ? doc._keywordHeight as number : 0}px)`, + transform: `scale(${1 / this.currentScale}) + translateY(${doc[DocData].showLabels ? ((NumCast(doc[DocData].keywordHeight)*(1-this.currentScale))) : 0}px) + `, width: `${totalWidth}px`, fontSize: '50px' }} |