diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.scss | 24 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.tsx | 106 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 1 |
4 files changed, 67 insertions, 69 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 4c357cf45..758e70508 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -67,6 +67,7 @@ export interface DocumentViewProps extends FieldViewSharedProps { hideCaptions?: boolean; contentPointerEvents?: Property.PointerEvents | undefined; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents dontCenter?: 'x' | 'y' | 'xy'; + showTags?: boolean; childHideDecorationTitle?: boolean; childHideResizeHandles?: boolean; childDragAction?: dropActionType; // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar. @@ -1126,6 +1127,10 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { @observable public static CurrentlyPlaying: DocumentView[] = []; // audio or video media views that are currently playing @observable public TagPanelHeight = 0; + @computed get showTags() { + return this.Document._layout_showTags || this._props.showTags; + } + @computed private get shouldNotScale() { return (this.layout_fitWidth && !this.nativeWidth) || this.ComponentView?.isUnstyledView?.(); } diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss index 211a961c1..90cc06092 100644 --- a/src/client/views/nodes/IconTagBox.scss +++ b/src/client/views/nodes/IconTagBox.scss @@ -2,23 +2,25 @@ .card-button-container { display: flex; - padding: 3px; - position: absolute; + position: relative; pointer-events: none; - background-color: rgb(218, 218, 218); + background-color: rgb(218, 218, 218); border-radius: 50px; - transform: translateY(25px); - align-items: center; - justify-content: start; + align-items: center; + gap: 5px; + padding-left: 5px; + padding-right: 5px; + padding-top: 2px; + padding-bottom: 2px; button { pointer-events: auto; - transform: translateY(-7.5px); - width: 30px; - height: 30px; + width: 20px; + height: 20px; + margin: auto; + padding: 0; 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 index f86372ec0..3d021fd73 100644 --- a/src/client/views/nodes/IconTagBox.tsx +++ b/src/client/views/nodes/IconTagBox.tsx @@ -6,18 +6,18 @@ 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 { StrCast } from '../../../fields/Types'; import { SnappingManager } from '../../util/SnappingManager'; import { undoable } from '../../util/UndoManager'; import { MainView } from '../MainView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { PropertiesView } from '../PropertiesView'; +import { DocumentView } from './DocumentView'; import './IconTagBox.scss'; export interface IconTagProps { - doc: Doc; + Views: DocumentView[]; + IsEditing: boolean; } /** @@ -26,59 +26,16 @@ export interface IconTagProps { */ @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; + @computed get View() { + return this._props.Views.lastElement(); + } + @computed get currentScale() { + return this.View?.screenToLocalScale(); } - - /** - * 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 @@ -93,13 +50,13 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> { }; /** - * 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); + setIconTag = undoable((icon: string, state: boolean) => { + this._props.Views.forEach(view => { + view.dataDoc[icon] = state; + }); }, 'toggle card tag'); /** @@ -112,10 +69,43 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> { const isActive = doc[icon.toString()]; const color = isActive ? '#4476f7' : '#323232'; - return <FontAwesomeIcon icon={icon} style={{ color, height: '30px', width: '30px' }} />; + return <FontAwesomeIcon icon={icon} style={{ color, height: '20px', width: '20px' }} />; }; + /** + * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups + */ render() { - return <>{this.renderButtons(this._props.doc)}</>; + const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length + 1; + + const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); + + const iconMap = (buttonID: number) => { + return StrCast(Doc.UserDoc()[keys[buttonID]]) as IconProp; + }; + const buttons = numberRange(amButtons - 1) + .filter(i => this._props.IsEditing || this.View.Document[iconMap(i).toString()] || (DocumentView.Selected.length === 1 && this.View.IsSelected)) + .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={() => { + const state = this.View.Document[iconMap(i).toString()]; + this.setIconTag(iconMap(i), !state); + }}> + {this.getButtonIcon(this.View.Document, iconMap(i))} + </button> + </Tooltip> + )); + return !buttons.length ? null : ( + <div + className="card-button-container" + style={{ + fontSize: '50px', + }}> + {buttons} + </div> + ); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 343e255dc..e0331a422 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -275,6 +275,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB ele.append(contents); } this._selectionHTML = ele?.innerHTML; + // eslint-disable-next-line @typescript-eslint/no-unused-vars } catch (e) { /* empty */ } |