diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 27 | ||||
| -rw-r--r-- | src/client/views/DocumentButtonBar.scss | 4 | ||||
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 42 | ||||
| -rw-r--r-- | src/client/views/FilterPanel.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/global/globalScripts.ts | 201 | ||||
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.scss | 23 | ||||
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.tsx | 277 |
10 files changed, 356 insertions, 226 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 80e13875c..380d16686 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -676,7 +676,7 @@ pie title Minerals in my tap water { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "AI Sort", icon:"robot", toolTip:"Have Chat GPT sort your cards for you !", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Pile", icon:"layer-group", toolTip:"View the cards as a pile in the free form view !", btnType: ButtonType.ClickButton, expertMode: false, toolType:"pile", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Chat Popup", icon:"lightbulb", toolTip:"Toggle the chat popup's visibility!", width: 50,btnType: ButtonType.ToggleButton, expertMode: false, toolType:"toggle-chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} }, + { title: "Chat Popup", icon:"lightbulb", toolTip:"Toggle the chat popup's visibility!", width: 45 ,btnType: ButtonType.ToggleButton, expertMode: false, toolType:"toggle-chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} }, { title: "Sort", toolTip: "Manage sort order / lock status", icon: "sort" , btnType: ButtonType.MultiToggleButton, toolType:"alignment", ignoreClick: true, subMenu: [ @@ -684,7 +684,8 @@ pie title Minerals in my tap water { title: "Descending", toolTip: "Sort the cards in descending order",btnType: ButtonType.ToggleButton, icon: "sort-down",toolType:"down",ignoreClick: true, scripts: {onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} }, ]}, - { title: "Filter", icon:"Filter", toolTip:"Filter cards by tags", width: 150, subMenu: this.cardGroupTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, + // { title: "Filter", icon:"Filter", toolTip:"Filter cards by tags", width: 150, subMenu: this.cardGroupTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, + @@ -711,12 +712,13 @@ pie title Minerals in my tap water // { title: "3rd", icon:"3rd", toolTip:"Filter ideas", width: 80, subMenu: this.cardGroupTools("cloud"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("idea", true)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // ] // } - static cardGroupTools(): Button[] { + static tagGroupTools(): Button[] { return [ - { title: "Star", icon: "star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return showFreeform(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 showFreeform(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 showFreeform(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 showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Star", 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", 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_);}'}}, // { 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_);}'}}, @@ -847,7 +849,16 @@ pie title Minerals in my tap water // { title: "Visibility", icon:"Visibility", toolTip:"Filter stars", width: 80, subMenu: this.cardGroupTools("star"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("star", true)`, width: 100, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // // { title: "Custom", icon:"cloud", toolTip:"Add Idea labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"idea", funcs: {hidden:`showFreeform ("idea", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "Visibility", icon:"Visibility", toolTip:"Filter ideas", width: 80, subMenu: this.cardGroupTools("cloud"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("idea", true)`,width: 100, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, - + { title: "Filter", icon:"=", toolTip:"Filter cards by tags", btnType: ButtonType.MultiToggleButton, width: 150, ignoreClick: true,toolType:DocumentType.COL, + subMenu: this.tagGroupTools(), funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'}, + // [ + // { title: "Star", icon: "star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return showFreeform(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 showFreeform(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 showFreeform(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 showFreeform(this.toolType, _readOnly_);}'}}, + + // ] + }, { title: "Card", icon: "Card", toolTip: "Card View Tools", subMenu: CurrentUserUtils.cardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available // { title: "Create", icon: "Create", toolTip: "Assign card labels", subMenu: CurrentUserUtils.labelTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 11614d627..374d6ecd3 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -153,6 +153,10 @@ $linkGap: 3px; &:hover { background-color: $black; + + .documentButtonBar-pinTypes { + display: flex; + } } } diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index a75c7098c..3d6436cb5 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -286,6 +286,42 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( @computed get keywordButton() { const targetDoc = this.view0?.Document; + + const metaBtn = (name: string, icon: IconProp) => { + const tooltip = `Show ${name}`; + return ( + <Tooltip title={<div className="dash-tooltip">{tooltip}</div>}> + <div className="documentButtonBar-pinIcon"> + <FontAwesomeIcon + className="documentdecorations-icon" + style={{ width: 20 }} + 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 === 'keywords' ? targetDoc && (targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels) : 'hi' + + + }} + /> + </div> + </Tooltip> + ); + }; + + + + return !targetDoc ? null : ( <Tooltip title={<div className="dash-keyword-button">Open keyword menu</div>}> <div @@ -294,6 +330,12 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( onClick={() => { targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels; }}> + + <div className="documentButtonBar-pinTypes"> + {/* {pinBtn(true, false, 'window-maximize')} + {pinBtn(false, true, 'address-card')} + {pinBtn(true, true, 'id-card')} */} + </div> <FontAwesomeIcon className="documentdecorations-icon" icon="tag" /> </div> </Tooltip> diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index c97edd7f0..5db627d23 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -222,7 +222,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { <div className="filterBox-treeView"> <div className="filterBox-select"> <div style={{ width: '100%' }}> - <FieldsDropdown Document={this.Document} selectFunc={this.facetClick} showPlaceholder placeholder="add a filter" addedFields={['acl_Guest', LinkedTo]} /> + <FieldsDropdown Document={this.Document} selectFunc={this.facetClick} showPlaceholder placeholder="add a filter" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} /> </div> {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */} {/* <div className="filterBox-select-bool"> diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 0d42f4099..f552540b8 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -90,7 +90,7 @@ export class MainView extends ObservableReactComponent<{}> { @observable private _windowWidth: number = 0; @observable private _windowHeight: number = 0; - @observable private _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row) + @observable _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row) @observable private _dashUIHeight: number = 0; // height of entire main dashboard region including top menu buttons @observable private _panelContent: string = 'none'; @observable private _sidebarContent: any = Doc.MyLeftSidebarPanel; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 024db82a4..58bb67120 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -58,7 +58,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps private _widthUndo?: UndoManager.Batch; // eslint-disable-next-line no-use-before-define - public static Instance: PropertiesView | undefined; + public static Instance: PropertiesView; constructor(props: any) { super(props); makeObservable(this); diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 907a5a343..410ddc355 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -516,7 +516,7 @@ export class CollectionCardView extends CollectionSubView() { */ openChatPopup = async () => { GPTPopup.Instance.setVisible(true); - GPTPopup.Instance.setMode(GPTPopupMode.SORT); + GPTPopup.Instance.setMode(GPTPopupMode.CARD); const sortDesc = await this.childPairStringList(); // Await the promise to get the string result GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded GPTPopup.Instance.setSortDesc(sortDesc.join()); diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 616633bc1..a48e3f9d9 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -1,10 +1,9 @@ import { Colors } from 'browndash-components'; import { action, runInAction } from 'mobx'; import { aggregateBounds } from '../../../Utils'; -import { Doc, DocListCast, NumListCast, Opt } from '../../../fields/Doc'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { InkTool } from '../../../fields/InkField'; -import { List } from '../../../fields/List'; import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { Gestures } from '../../../pen-gestures/GestureTypes'; @@ -42,7 +41,9 @@ import { CollectionViewType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { CollectionSubView } from '../collections/CollectionSubView'; import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; - +import { PropertiesView } from '../PropertiesView'; +import { MainView } from '../MainView'; +import { SnappingManager } from '../../util/SnappingManager'; // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function IsNoneSelected() { return DocumentView.Selected().length <= 0; @@ -145,7 +146,7 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines' } // prettier-ignore - const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'heart' | 'star' | 'cloud' | 'bolt' | 'chat' | '1' | '2' | '3' | '4' | 'up' | 'down' | 'pile' | 'toggle-chat', + const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down' | 'pile' | 'toggle-chat', { waitForRender?: boolean; checkResult: (doc: Doc) => any; @@ -192,34 +193,34 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines' checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "color", setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort === "color" ? doc.cardSort = '' : doc.cardSort = 'color', }], - ['heart', { - checkResult: (doc: Doc) => isAttrFiltered('heart'), - setDoc: (doc: Doc, dv: DocumentView) => { - isAttrFiltered('heart') ? Doc.setDocFilter(doc, 'heart', true, 'remove') : Doc.setDocFilter(doc, 'heart', true, 'match'); - - } - }], - ['star', { - checkResult: (doc: Doc) => isAttrFiltered('star'), - - setDoc: (doc: Doc, dv: DocumentView) => { - isAttrFiltered('star') ? Doc.setDocFilter(doc, 'star', true, 'remove') : Doc.setDocFilter(doc, 'star', true, 'match'); - } - }], - ['bolt', { - checkResult: (doc: Doc) => isAttrFiltered('bolt'), - setDoc: (doc: Doc, dv: DocumentView) => { - isAttrFiltered('bolt') ? Doc.setDocFilter(doc, 'bolt', true, 'remove') : Doc.setDocFilter(doc, 'bolt', true, 'match'); - - } - }], - ['cloud', { - checkResult: (doc: Doc) => isAttrFiltered('cloud'), - setDoc: (doc: Doc, dv: DocumentView) => { - isAttrFiltered('cloud') ? Doc.setDocFilter(doc, 'cloud', true, 'remove') : Doc.setDocFilter(doc, 'cloud', true, 'match'); - - } - }], + // ['heart', { + // checkResult: (doc: Doc) => isAttrFiltered('heart'), + // setDoc: (doc: Doc, dv: DocumentView) => { + // isAttrFiltered('heart') ? Doc.setDocFilter(doc, 'heart', true, 'remove') : Doc.setDocFilter(doc, 'heart', true, 'match'); + + // } + // }], + // ['star', { + // checkResult: (doc: Doc) => isAttrFiltered('star'), + + // setDoc: (doc: Doc, dv: DocumentView) => { + // isAttrFiltered('star') ? Doc.setDocFilter(doc, 'star', true, 'remove') : Doc.setDocFilter(doc, 'star', true, 'match'); + // } + // }], + // ['bolt', { + // checkResult: (doc: Doc) => isAttrFiltered('bolt'), + // setDoc: (doc: Doc, dv: DocumentView) => { + // isAttrFiltered('bolt') ? Doc.setDocFilter(doc, 'bolt', true, 'remove') : Doc.setDocFilter(doc, 'bolt', true, 'match'); + + // } + // }], + // ['cloud', { + // checkResult: (doc: Doc) => isAttrFiltered('cloud'), + // setDoc: (doc: Doc, dv: DocumentView) => { + // isAttrFiltered('cloud') ? Doc.setDocFilter(doc, 'cloud', true, 'remove') : Doc.setDocFilter(doc, 'cloud', true, 'match'); + + // } + // }], ['chat', { checkResult: (doc: Doc) => { @@ -275,20 +276,9 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines' } } - // if (doc.type == DocumentType.COL ) { newCol && dv.ComponentView?.addDocument?.(newCol); - // dv.ComponentView?._props.focus(newCol, {willPan: true , willZoomCentered: true, zoomScale: 200} ) DocumentView.showDocument(newCol, { willZoomCentered: true }) - // } - // doc as CollectionFreeFormView - // doc as typeof CollectionSubView - - // doc._props - - // CollectionFreeFormView.addDocumemnt - - // doc?.addDocument; //this._props.addDocument(newCol) }, }], ]); @@ -306,11 +296,40 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines' return undefined; }); -ScriptingGlobals.add(function cardHasLabel(label: string) { + +ScriptingGlobals.add(function handleTags(value?: any, checkResult?: boolean) { const selected = DocumentView.SelectedDocs().lastElement(); - const labelNum = Number(label) - 1; - return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.cardSort_customField)] == labelNum)); -}, ''); + + function isAttrFiltered(attr: string) { + return StrListCast(selected._childFilters).some(filter => filter.includes(attr)); + } + + if (checkResult) { + return value=== 'opts' ? PropertiesView.Instance.openFilters : isAttrFiltered(value) + } + + if (value != 'opts'){ + isAttrFiltered(value) ? Doc.setDocFilter(selected, value, true, 'remove') : Doc.setDocFilter(selected, value, true, 'match'); + } + else { + 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 + } + + + return undefined; + }, ''); + + + +// ScriptingGlobals.add(function cardHasLabel(label: string) { +// const selected = DocumentView.SelectedDocs().lastElement(); +// const labelNum = Number(label) - 1; +// return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.cardSort_customField)] == labelNum)); +// }, ''); // ScriptingGlobals.add(function setCardSort(attr: "Time" | "Type"| "Color"| "ChatGPT"| "Custom 1"| "Custom 2"| "Custom 3", value?: any, checkResult?: boolean) { // // const editorView = RichTextMenu.Instance?.TextView?.EditorView; @@ -400,55 +419,53 @@ ScriptingGlobals.add(function cardHasLabel(label: string) { // // return undefined; // }); -ScriptingGlobals.add(function setCardSort(value?: any, checkResult?: boolean) { - // const editorView = RichTextMenu.Instance?.TextView?.EditorView; - const selected = DocumentView.SelectedDocs().lastElement(); - - if (checkResult) { - // console.log(attr + "attricute") - // console.log(map.get(attr)?.checkResult(selected) + "check result") - console.log(StrCast(selected?.cardSort) + 'check'); - const hi = StrCast(selected?.cardSort); - return StrCast(selected?.cardSortForDropDown) ?? 'Time'; - } - - function docFields(doc: Doc): void { - switch (value) { - case 'Custom 1': - doc.cardSort_customField = 'like'; - break; - case 'Custom 2': - doc.cardSort_customField = 'star'; - break; - case 'Custom 3': - doc.cardSort_customField = 'idea'; - break; - case 'Chat GPT': - doc.cardSort = 'custom'; - doc.cardSort_customField = 'chat'; - break; - default: - break; - } - - doc.cardSort_visibleSortGroups = new List<number>(); - } +// ScriptingGlobals.add(function setCardSort(value?: any, checkResult?: boolean) { +// // const editorView = RichTextMenu.Instance?.TextView?.EditorView; +// const selected = DocumentView.SelectedDocs().lastElement(); +// if (checkResult) { +// // console.log(attr + "attricute") +// // console.log(map.get(attr)?.checkResult(selected) + "check result") +// console.log(StrCast(selected?.cardSort) + 'check'); +// const hi = StrCast(selected?.cardSort); +// return StrCast(selected?.cardSortForDropDown) ?? 'Time'; +// } +// function docFields(doc: Doc): void { +// switch (value) { +// case 'Custom 1': +// doc.cardSort_customField = 'like'; +// break; +// case 'Custom 2': +// doc.cardSort_customField = 'star'; +// break; +// case 'Custom 3': +// doc.cardSort_customField = 'idea'; +// break; +// case 'Chat GPT': +// doc.cardSort = 'custom'; +// doc.cardSort_customField = 'chat'; +// break; +// default: +// break; +// } + +// doc.cardSort_visibleSortGroups = new List<number>(); +// } - // const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} }; - DocumentView.Selected().map(dv => { - dv.Document.cardSortForDropDown = value; +// // const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} }; +// DocumentView.Selected().map(dv => { +// dv.Document.cardSortForDropDown = value; - if (value != 'Chat GPT') { - dv.Document.cardSort = value.trim().split(/\s+/)[0].toLowerCase(); - } - docFields(dv.Document); - }); +// if (value != 'Chat GPT') { +// dv.Document.cardSort = value.trim().split(/\s+/)[0].toLowerCase(); +// } +// docFields(dv.Document); +// }); - return undefined; +// return undefined; - // map.get(attr)?.setDoc?.(); - // return undefined; -}); +// // map.get(attr)?.setDoc?.(); +// // return undefined; +// }); // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) { // // const editorView = RichTextMenu.Instance?.TextView?.EditorView; diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss index 291f272ce..57973ef34 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.scss +++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss @@ -71,10 +71,12 @@ $highlightedText: #82e0ff; } .btns-wrapper-gpt { - height: 50px; + height: 100%; display: flex; justify-content: center; align-items: center; + flex-direction: column; + transform: translateY(30px); @@ -93,17 +95,20 @@ $highlightedText: #82e0ff; } - } - button { - font-size: 9px; - padding: 10px; - color: #ffffff; - width: 100%; - background-color: $button; - border-radius: 5px; + } + // button { + // font-size: 9px; + // padding: 10px; + // color: #ffffff; + // width: 100%; + // background-color: $button; + // border-radius: 5px; + + // } + .text-btn { &:hover { background-color: $button; diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index 71d437c3d..bbd5ea630 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -4,7 +4,7 @@ import { Button, IconButton, Type } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { CgClose } from 'react-icons/cg'; +import { CgClose, CgPathBack, CgArrowLeftO, CgCornerUpLeft } from 'react-icons/cg'; import ReactLoading from 'react-loading'; import { TypeAnimation } from 'react-type-animation'; import { ClientUtils } from '../../../../ClientUtils'; @@ -33,6 +33,10 @@ export enum GPTPopupMode { } + + + + interface GPTPopupProps {} @observer @@ -166,6 +170,15 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { this.chatSortPrompt = e.target.value; }); + + @observable quizAnswer: string = "" + + quizAnswerChanged = action((e: React.ChangeEvent<HTMLInputElement>) => { + this.quizAnswer = e.target.value; + }); + + + @observable private regenerateCallback: (() => Promise<void>) | null = null; @action public setRegenerateCallback(callback: () => Promise<void>) { @@ -359,81 +372,133 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { <Button tooltip="Have ChatGPT sort your cards for you!" text="Sort Cards!" - onClick={this.generateSort} + onClick={() => this.setMode(GPTPopupMode.SORT)} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} style={{ - width: '90%', + width: '100%', + height: '40%', textAlign: 'center', color: '#ffffff', fontSize: '16px', + marginBottom: '10px' }} /> <Button tooltip="Test your knowledge with ChatGPT!" text="Quiz Cards!" - onClick={this.generateSort} + onClick={() => this.setMode(GPTPopupMode.QUIZ)} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} style={{ - width: '90%', + width: '100%', textAlign: 'center', color: '#ffffff', fontSize: '16px', + height: '40%', + }} /> </div> - ) + + cardActual = (opt: GPTPopupMode) => { + if (opt === GPTPopupMode.SORT) { + return ( + !this.sortDone ? ( + <> + <div className="btns-wrapper-gpt"> + <input + className="searchBox-input" + defaultValue="" + autoComplete="off" + onChange={this.sortPromptChanged} + onKeyDown={e => { + if (e.key === 'Enter') { + this.generateSort(); + } + e.stopPropagation(); + }} + type="text" + placeholder="How do you want to sort your cards?" + id="search-input" + style={{ width: '100%' }} + /> + {/* </div> + <div className="btns-wrapper-gpt"> */} + <Button + tooltip="Have ChatGPT sort your cards for you!" + text="Sort!" + onClick={this.generateSort} + color={StrCast(Doc.UserDoc().userVariantColor)} + type={Type.TERT} + style={{ + width: '100%', + textAlign: 'center', + color: '#ffffff', + fontSize: '16px', + height: '40%', - cardActual = (opt: string) => { - const isSort = opt === 'sort' - - if (opt === 'sort'){ + }} + /> + </div> + </> + ) : ( + <div> + <div className="content-wrapper"> + <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p> + <IconButton + tooltip="Generate Again" + onClick={() => this.setSortDone(false)} + icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} + color={StrCast(Doc.UserDoc().userVariantColor)} + /> + </div> + </div> + ) + ); + } else if (opt === GPTPopupMode.QUIZ) { return ( <> - <div className="btns-wrapper-gpt"> - <input - className="searchBox-input" - defaultValue="" - autoComplete="off" - onChange={this.sortPromptChanged} - onKeyDown={e => { - if (e.key === 'Enter') { - this.generateSort(); - } - e.stopPropagation(); - }} - type="text" - placeholder= {`How do you want to sort your cards ?` } - id="search-input" - style={{ width: '100%' }} - /> - </div> - <div className="btns-wrapper-gpt"> - <Button - tooltip="Have ChatGPT sort your cards for you!" - text="Sort!" - onClick={this.generateSort} - color={StrCast(Doc.UserDoc().userVariantColor)} - type={Type.TERT} - style={{ - width: '90%', - textAlign: 'center', - color: '#ffffff', - fontSize: '16px', - }} - /> - </div> - </> - ) - + <div className="btns-wrapper-gpt"> + <input + className="searchBox-input" + defaultValue="" + autoComplete="off" + onChange={this.quizAnswerChanged} + onKeyDown={e => { + if (e.key === 'Enter') { + this.generateSort(); + } + e.stopPropagation(); + }} + type="text" + placeholder="What is the selected card?" + id="search-input" + style={{ width: '100%' }} + /> + </div> + <div className="btns-wrapper-gpt"> + <Button + tooltip="See how close you got to the right answer!" + text="Check!" + onClick={this.generateSort} + color={StrCast(Doc.UserDoc().userVariantColor)} + type={Type.TERT} + style={{ + width: '90%', + textAlign: 'center', + color: '#ffffff', + fontSize: '16px', + }} + /> + </div> + </> + ); } - -} - + }; + sortBox = () => ( - <> <div> {this.heading('SORTING')} <> @@ -445,62 +510,13 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { </div> </div> ) : ( - !this.sortDone && ( - <> - <div className="btns-wrapper-gpt"> - <input - className="searchBox-input" - defaultValue="" - autoComplete="off" - onChange={this.sortPromptChanged} - onKeyDown={e => { - if (e.key === 'Enter') { - this.generateSort(); - } - e.stopPropagation(); - }} - type="text" - placeholder="How do you want to sort your cards ?" - id="search-input" - style={{ width: '100%' }} - /> - </div> - <div className="btns-wrapper-gpt"> - <Button - tooltip="Have ChatGPT sort your cards for you!" - text="Sort!" - onClick={this.generateSort} - color={StrCast(Doc.UserDoc().userVariantColor)} - type={Type.TERT} - style={{ - width: '90%', - textAlign: 'center', - color: '#ffffff', - fontSize: '16px', - }} - /> - </div> - </> - ) - )} - - {this.sortDone && ( - <div> - <div className="content-wrapper"> - <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p> - <IconButton - tooltip="Generate Again" - onClick={() => this.setSortDone(false)} - icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} - color={StrCast(Doc.UserDoc().userVariantColor)} - /> - </div> - </div> + (this.mode === GPTPopupMode.CARD ? this.cardMenu() : this.cardActual(this.mode)) // Call the functions to render JSX )} </> </div> - </> -); + ); + + imageBox = () => ( <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> @@ -647,25 +663,60 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { heading = (headingText: string) => ( <div className="summary-heading"> <label className="summary-text">{headingText}</label> - {this.loading ? <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> : <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} />} + {this.loading ? ( + <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> + ) : ( + <> + {(this.mode === GPTPopupMode.SORT || this.mode === GPTPopupMode.QUIZ) && ( + <IconButton + color={StrCast(SettingsManager.userVariantColor)} + tooltip="back" + icon={<CgCornerUpLeft size="16px" />} + onClick={() => this.mode = GPTPopupMode.CARD} + style = {{right: '-55px'}} + /> + )} + <IconButton + color={StrCast(SettingsManager.userVariantColor)} + tooltip="close" + icon={<CgClose size="16px" />} + onClick={() => this.setVisible(false)} + /> + + </> + )} </div> ); + render() { + let content; + + switch (this.mode) { + case GPTPopupMode.SUMMARY: + content = this.summaryBox(); + break; + case GPTPopupMode.DATA: + content = this.dataAnalysisBox(); + break; + case GPTPopupMode.IMAGE: + content = this.imageBox(); + break; + case GPTPopupMode.SORT: + case GPTPopupMode.CARD: + case GPTPopupMode.QUIZ: + content = this.sortBox(); + break; + default: + content = null; + } + return ( <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }} > - {this.mode === GPTPopupMode.SUMMARY - ? this.summaryBox() - : this.mode === GPTPopupMode.DATA - ? this.dataAnalysisBox() - : this.mode === GPTPopupMode.IMAGE - ? this.imageBox() - : this.mode === GPTPopupMode.SORT - ? this.sortBox() - : null} + {content} <div className="resize-handle" /> </div> ); |