diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/ReportManager.scss | 55 | ||||
| -rw-r--r-- | src/client/util/ReportManager.tsx | 47 |
2 files changed, 92 insertions, 10 deletions
diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss new file mode 100644 index 000000000..1f008a426 --- /dev/null +++ b/src/client/util/ReportManager.scss @@ -0,0 +1,55 @@ +@import '../views/global/globalCssVariables'; + +.issue-list-wrapper { + position: relative; + min-width: 250px; + background-color: $light-blue; + overflow-y: scroll; +} + +.issue-list { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px; + margin: 5px; + border-radius: 5px; + border: 1px solid grey; + background-color: lightgoldenrodyellow; +} + +// issue should pop up when the user hover over the issue +.issue-list:hover { + box-shadow: 2px; + cursor: pointer; + border: 3px solid #252b33; +} + +.issue-content { + background-color: white; + padding: 10px; + flex: 1 1 auto; + overflow-y: scroll; +} + +.issue-title { + font-size: 20px; + font-weight: 600; + color: black; +} + +.issue-body { + padding: 0 10px; + width: 100%; + text-align: left; +} + +.issue-body > * { + margin-top: 5px; +} + +.issue-body img, +.issue-body video { + display: block; + max-width: 100%; +} diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx index be58da29a..fa9a0513b 100644 --- a/src/client/util/ReportManager.tsx +++ b/src/client/util/ReportManager.tsx @@ -15,9 +15,14 @@ import { FontIconBox } from '../views/nodes/button/FontIconBox'; import { DragManager } from './DragManager'; import { GroupManager } from './GroupManager'; import './SettingsManager.scss'; +import './ReportManager.scss'; import { undoBatch } from './UndoManager'; import { Octokit } from "@octokit/core"; import { CheckBox } from '../views/search/CheckBox'; +import ReactLoading from 'react-loading'; +import ReactMarkdown from 'react-markdown'; +import rehypeRaw from 'rehype-raw'; +import remarkGfm from 'remark-gfm'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -31,6 +36,9 @@ export class ReportManager extends React.Component<{}> { @observable public issues: any[] = []; @action setIssues = action((issues: any[]) => { this.issues = issues; }); + + @observable public selectedIssue: any = null; + @action setSelectedIssue = action((issue: any) => { this.selectedIssue = issue; }); @observable public shownIssues = this.issues.filter(issue => issue.state === 'open'); @@ -118,24 +126,43 @@ export class ReportManager extends React.Component<{}> { this.close(); } + private renderIssue = (issue: any) => { + const { title, body, number, html_url } = issue; + + return ( + <div className='issue-container'> + <h5 style={{'textAlign': "left"}}><a href={html_url} target="_blank">Issue #{number}</a></h5> + <div className='issue-title'> + {title} + </div> + <ReactMarkdown children={body} className='issue-body' linkTarget={"_blank"} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} /> + </div> + ); + } + private get reportInterface() { return ( <div className="settings-interface"> - <div className="settings-panel"> - <input type="text" placeholder='issue name' onChange={(e => this.updateIssueSearch(e.target.value))}></input> - <h3>Previous Issues</h3> - {this.issues.length === 0 ? <div>loading</div> : this.shownIssues.map(issue => <div key={issue.number}>{issue.title}</div>)} + <div className='issue-list-wrapper'> + <h3>Current Issues</h3> + <input type="text" placeholder='search issues' onChange={(e => this.updateIssueSearch(e.target.value))}></input><br /> + {this.issues.length === 0 ? <ReactLoading/> : this.shownIssues.map(issue => <div className='issue-list' key={issue.number} onClick={() => this.setSelectedIssue(issue)}>{issue.title}</div>)} - <div className="settings-user"> + {/* <div className="settings-user"> <button onClick={() => this.getAllIssues().then(issues => this.issues = issues)}>Poll Issues</button> - </div> + </div> */} </div> + <div className="close-button" onClick={this.close}> <FontAwesomeIcon icon={'times'} color="black" size={'lg'} /> </div> - <div className="settings-content"> + <div className="issue-content"> + {this.selectedIssue === null ? "no issue selected" : this.renderIssue(this.selectedIssue)} + </div> + + {/* <div className="settings-content"> <h3 style={{ 'textDecoration': 'underline'}}>Report an Issue</h3> <label>Please leave a title for the bug.</label><br /> <input type="text" placeholder='title' onChange={(e) => this.bugTitle = e.target.value} /> @@ -145,9 +172,9 @@ export class ReportManager extends React.Component<{}> { <br /><br /> {/* <label>Send to github issues? </label> <input type="checkbox" onChange={(e) => this.toGithub = e.target.checked} /> - <br /> */} + <br /> } <button onClick={() => this.reportIssue()}>Submit</button> - </div> + </div> */} </div> @@ -161,7 +188,7 @@ export class ReportManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - dialogueBoxStyle={{ width: '500px', height: '500px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }} + dialogueBoxStyle={{ width: 'auto', height: '500px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }} /> ); } |