From b1f189ffc7dfe558d5895c8f0cb103ab3e5c17d7 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Mon, 10 Jul 2023 19:10:34 -0400 Subject: filters and better ui --- src/client/util/reportManager/ReportManager.scss | 473 +++++++++++++++++++++++ 1 file changed, 473 insertions(+) create mode 100644 src/client/util/reportManager/ReportManager.scss (limited to 'src/client/util/reportManager/ReportManager.scss') diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss new file mode 100644 index 000000000..81af41cb0 --- /dev/null +++ b/src/client/util/reportManager/ReportManager.scss @@ -0,0 +1,473 @@ +@import '../../views/global/globalCssVariables'; + +// header + +$text-gray: #64748b; +$outline-gray: #cbd5e1; + +.report-header { + display: flex; + justify-content: space-between; + align-items: center; + + h2 { + margin: 0; + padding: 0; + font-size: 24px; + } +} + +.report-header-vertical { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + + h2 { + margin: 0; + padding: 0; + padding-bottom: 8px; + font-size: 24px; + } +} + +// Report + +.report-issue { + width: 450px; + min-width: 300px; + padding: 16px; + padding-top: 32px; + display: flex; + flex-direction: column; + gap: 16px; + background-color: #ffffff; + text-align: left; + position: relative; + + .report-label { + font-size: 14px; + font-weight: 400; + color: $text-gray; + } + + .report-section { + display: flex; + flex-direction: column; + } + + .report-textarea { + width: 100%; + height: 80px; + padding: 8px; + resize: vertical; + // resize: none; + } + + .report-selects { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 16px; + + .report-select { + padding: 8px; + border-color: $outline-gray; + + .report-opt { + padding: 8px; + } + } + } +} + +.report-input { + border: none; + outline: none; + border-bottom: 1px solid $outline-gray; + padding: 8px; + padding-left: 0; + transition: all 0.2s ease; + + &:hover { + border-bottom-color: $text-gray; + } + &:focus { + border-bottom-color: #4476f7; + } +} + +// View issues + +.view-issues { + width: 75vw; + min-width: 500px; + display: flex; + gap: 16px; + height: 100%; + overflow-x: auto; + + video::-webkit-media-controls { + display: flex !important; + } + + .left { + flex: 1; + height: 100%; + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + background-color: #ffffff; + text-align: left; + position: relative; + + .issues { + padding-top: 24px; + position: relative; + flex-grow: 1; + overflow-y: auto; + overflow-x: hidden; + display: flex; + flex-direction: column; + gap: 16px; + } + } + + .right { + position: relative; + flex: 1; + padding: 16px; + min-width: 300px; + height: 100%; + overflow-y: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + +// Issue + +.issue-card { + cursor: pointer; + padding: 16px; + background-color: #ffffff; + border: 1px solid $outline-gray; + transition: all 0.1s ease; + display: flex; + flex-direction: column; + gap: 8px; + border-radius: 8px; + transition: all 0.2s ease; + + .issue-top { + display: flex; + align-items: center; + gap: 16px; + padding-bottom: 8px; + } + + .issue-label { + cursor: pointer; + font-size: 14px; + font-weight: 400; + color: $text-gray; + padding: 0; + margin: 0; + } + + .issue-title { + font-size: 16px; + font-weight: 500; + padding: 0; + margin: 0; + color: #4476f7; + } + + &:hover { + background-color: #4476f7; + border-color: #4476f7; + color: #ffffff; + + .issue-label { + color: #ffffff; + } + + .issue-title { + color: #ffffff; + } + } +} + +// Dropzone + +.dropzone { + padding: 2rem; + border-radius: 0.5rem; + border: 2px dashed #f1f5f9; + + .dropzone-instructions { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + color: $text-gray; + + p { + text-align: center; + } + } +} + +.file-list { + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: 14px; + color: $text-gray; + width: 100%; + overflow-x: auto; + list-style-type: none; + display: flex; + align-items: center; + gap: 16px; + + .file-name { + padding: 8px 12px; + display: flex; + align-items: center; + gap: 16px; + white-space: nowrap; + } +} + +// Detailed issue view + +.issue-view { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + background-color: #ffffff; + text-align: left; + position: relative; + overflow: auto; + + .issue-label { + color: $text-gray; + + .issue-link { + cursor: pointer; + color: #4476f7; + } + } + + .issue-title { + font-size: 24px; + margin: 0; + padding: 0; + } + + .issue-date { + font-size: 14px; + color: $text-gray; + } + + .issue-content { + font-size: 14px; + color: $text-gray; + } +} + +// tags flex lists + +.issues-filters { + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + + .issues-filter { + display: flex; + gap: 8px; + align-items: center; + white-space: nowrap; + overflow-x: auto; + } +} + +.issue-tags { + display: flex; + gap: 8px; + align-items: center; + white-space: nowrap; + overflow-x: auto; +} + +// Media previews + +.report-media-wrapper { + position: relative; + cursor: pointer; + + .close-btn { + position: absolute; + top: 2px; + right: 2px; + opacity: 0; + } + + .report-media-content { + position: relative; + display: inline block; + + video::-webkit-media-controls { + display: flex !important; + } + } + + .report-media-content::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as desired */ + opacity: 0; + transition: opacity 0.3s ease; /* Transition for smooth effect */ + pointer-events: none; + + video::-webkit-media-controls { + pointer-events: all; + } + } + + &:hover { + .report-media-content::after { + opacity: 1; + } + + .close-btn { + opacity: 1; + } + } +} + +.report-audio-wrapper { + display: flex; + align-items: center; + gap: 8px; +} + +@media (max-width: 1100px) { + .report-header { + flex-direction: column; + align-items: stretch; + gap: 2rem; + } +} + +// Tag styling + +.report-tag { + box-sizing: border-box; + padding: 4px 10px; + font-size: 10px; + border-radius: 32px; + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; +} + +// Old code + +// <----------------------------------------------------------------------------> + +// .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%; +// } + +// .report-issue-fab { +// position: fixed; +// bottom: 20px; +// right: 20px; +// display: flex; +// align-items: center; +// justify-content: center; +// cursor: pointer; +// } + +// .loading-center { +// margin: auto 0; +// } + +// .settings-content label { +// margin-top: 10px; +// } + +// .report-disclaimer { +// font-size: 8px; +// color: grey; +// padding-right: 50px; +// font-style: italic; +// text-align: left; +// } + +// .flex-select { +// display: flex; +// align-items: center; +// justify-content: center; +// gap: 10px; +// } -- cgit v1.2.3-70-g09d2 From e332c268c013efbc7409bf0072b66e8bf646dfef Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Tue, 18 Jul 2023 13:32:49 -0400 Subject: theming --- package-lock.json | 2 +- src/client/theme.ts | 31 ------ src/client/util/reportManager/ReportManager.scss | 32 ++++--- src/client/util/reportManager/ReportManager.tsx | 100 +++++++++++-------- .../util/reportManager/reportManagerUtils.ts | 4 +- src/client/views/pdf/AnchorMenu.tsx | 106 ++++++--------------- 6 files changed, 111 insertions(+), 164 deletions(-) (limited to 'src/client/util/reportManager/ReportManager.scss') diff --git a/package-lock.json b/package-lock.json index 932008e73..54493e5a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24834,7 +24834,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" }, "to-object-path": { "version": "0.3.0", diff --git a/src/client/theme.ts b/src/client/theme.ts index 0ef2e5e2c..e69de29bb 100644 --- a/src/client/theme.ts +++ b/src/client/theme.ts @@ -1,31 +0,0 @@ -import '@mui/material/styles'; -import { createTheme } from '@mui/material/styles'; - -export const theme = createTheme({ - palette: { - primary: { - main: '#4476f7', - }, - }, - components: { - MuiButton: { - styleOverrides: { - root: { - fontSize: '14px', - boxShadow: 'none', - '&:hover': { - boxShadow: 'none', - }, - }, - }, - }, - - MuiTooltip: { - styleOverrides: { - tooltip: { - fontSize: '12px', - }, - }, - }, - }, -}); diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index 81af41cb0..f1ae6c387 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -2,8 +2,8 @@ // header -$text-gray: #64748b; -$outline-gray: #cbd5e1; +$text-gray: #555555; +$outline-gray: #9c9c9c; .report-header { display: flex; @@ -41,14 +41,14 @@ $outline-gray: #cbd5e1; display: flex; flex-direction: column; gap: 16px; - background-color: #ffffff; + // background-color: #ffffff; text-align: left; position: relative; .report-label { font-size: 14px; font-weight: 400; - color: $text-gray; + // color: $text-gray; } .report-section { @@ -61,6 +61,7 @@ $outline-gray: #cbd5e1; height: 80px; padding: 8px; resize: vertical; + background: transparent; // resize: none; } @@ -69,10 +70,12 @@ $outline-gray: #cbd5e1; flex-direction: column; align-items: stretch; gap: 16px; + background-color: transparent; .report-select { padding: 8px; border-color: $outline-gray; + background-color: transparent; .report-opt { padding: 8px; @@ -88,6 +91,7 @@ $outline-gray: #cbd5e1; padding: 8px; padding-left: 0; transition: all 0.2s ease; + background: transparent; &:hover { border-bottom-color: $text-gray; @@ -118,7 +122,7 @@ $outline-gray: #cbd5e1; display: flex; flex-direction: column; gap: 16px; - background-color: #ffffff; + // background-color: #ffffff; text-align: left; position: relative; @@ -153,7 +157,7 @@ $outline-gray: #cbd5e1; .issue-card { cursor: pointer; padding: 16px; - background-color: #ffffff; + // background-color: #ffffff; border: 1px solid $outline-gray; transition: all 0.1s ease; display: flex; @@ -173,7 +177,7 @@ $outline-gray: #cbd5e1; cursor: pointer; font-size: 14px; font-weight: 400; - color: $text-gray; + // color: $text-gray; padding: 0; margin: 0; } @@ -206,14 +210,14 @@ $outline-gray: #cbd5e1; .dropzone { padding: 2rem; border-radius: 0.5rem; - border: 2px dashed #f1f5f9; + border: 2px dashed $outline-gray; .dropzone-instructions { display: flex; flex-direction: column; align-items: center; gap: 16px; - color: $text-gray; + // color: $text-gray; p { text-align: center; @@ -226,7 +230,7 @@ $outline-gray: #cbd5e1; margin: 0; padding: 0; font-size: 14px; - color: $text-gray; + // color: $text-gray; width: 100%; overflow-x: auto; list-style-type: none; @@ -251,13 +255,13 @@ $outline-gray: #cbd5e1; display: flex; flex-direction: column; gap: 16px; - background-color: #ffffff; + // background-color: #ffffff; text-align: left; position: relative; overflow: auto; .issue-label { - color: $text-gray; + // color: $text-gray; .issue-link { cursor: pointer; @@ -273,12 +277,12 @@ $outline-gray: #cbd5e1; .issue-date { font-size: 14px; - color: $text-gray; + // color: $text-gray; } .issue-content { font-size: 14px; - color: $text-gray; + // color: $text-gray; } } diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index b65ada7ec..7599b8949 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -14,15 +14,19 @@ import { MainViewModal } from '../../views/MainViewModal'; import { Octokit } from '@octokit/core'; import { Button, IconButton, OrientationType, Type } from 'browndash-components'; import Dropzone from 'react-dropzone'; -import { theme } from '../../theme'; import ReactLoading from 'react-loading'; import v4 = require('uuid/v4'); import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils'; import { IssueCard, IssueView, Tag } from './ReportManagerComponents'; +import { StrCast } from '../../../fields/Types'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; +// StrCast(Doc.UserDoc().userColor); +// StrCast(Doc.UserDoc().userBackgroundColor); +// StrCast(Doc.UserDoc().userVariantColor); + /** * Class for reporting and viewing Github issues within the app. */ @@ -185,19 +189,19 @@ export class ReportManager extends React.Component<{}> { } const formattedLinks = (links ?? []).map(this.fileLinktoServerLink); - const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', { - owner: 'brown-dash', - repo: 'Dash-Web', - title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail), - body: `${this.bugDescription} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`, - labels: ['from-dash-app', this.bugType, this.bugPriority], - }); + // const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', { + // owner: 'brown-dash', + // repo: 'Dash-Web', + // title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail), + // body: `${this.bugDescription} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`, + // labels: ['from-dash-app', this.bugType, this.bugPriority], + // }); - // 201 status means success - if (req.status !== 201) { - alert('Error creating issue on github.'); - return; - } + // // 201 status means success + // if (req.status !== 201) { + // alert('Error creating issue on github.'); + // return; + // } // Reset fields this.setBugTitle(''); @@ -365,13 +369,14 @@ export class ReportManager extends React.Component<{}> { */ private viewIssuesComponent = () => { return ( -
+
-

Open Issues

+

Open Issues

}> @@ -338,66 +330,30 @@ export class AnchorMenu extends AntimodeMenu { mode={this.GPTMode} /> {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : ( - } - color={StrCast(Doc.UserDoc().userColor)} - /> - )} - {this.canEdit() && ( - } - color={StrCast(Doc.UserDoc().userColor)} - /> + } color={StrCast(Doc.UserDoc().userColor)} /> )} - } - popup={} - color={StrCast(Doc.UserDoc().userColor)} - /> + {this.canEdit() && } color={StrCast(Doc.UserDoc().userColor)} />} + } popup={} color={StrCast(Doc.UserDoc().userColor)} /> {AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : ( - } - color={StrCast(Doc.UserDoc().userColor)} - /> + } color={StrCast(Doc.UserDoc().userColor)} /> )} ) : ( <> - {this.Delete !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} - {this.PinToPres !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} - {this.ShowTargetTrail !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} - {this.IsTargetToggler !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} + {this.Delete !== returnFalse && } color={StrCast(Doc.UserDoc().userColor)} />} + {this.PinToPres !== returnFalse && } color={StrCast(Doc.UserDoc().userColor)} />} + {this.ShowTargetTrail !== returnFalse && } color={StrCast(Doc.UserDoc().userColor)} />} + {this.IsTargetToggler !== returnFalse && ( + } + color={StrCast(Doc.UserDoc().userColor)} + /> + )} ); -- cgit v1.2.3-70-g09d2 From e0c100ecb1fe2b16209e955911f7e8267a2535ef Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Wed, 19 Jul 2023 14:16:35 -0400 Subject: ui changes --- src/client/util/reportManager/ReportManager.scss | 131 +-------------------- src/client/util/reportManager/ReportManager.tsx | 49 +++++--- .../util/reportManager/ReportManagerComponents.tsx | 29 ++++- .../util/reportManager/reportManagerUtils.ts | 44 +++++-- 4 files changed, 99 insertions(+), 154 deletions(-) (limited to 'src/client/util/reportManager/ReportManager.scss') diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index f1ae6c387..4e80cbeeb 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -2,9 +2,6 @@ // header -$text-gray: #555555; -$outline-gray: #9c9c9c; - .report-header { display: flex; justify-content: space-between; @@ -48,7 +45,6 @@ $outline-gray: #9c9c9c; .report-label { font-size: 14px; font-weight: 400; - // color: $text-gray; } .report-section { @@ -74,7 +70,6 @@ $outline-gray: #9c9c9c; .report-select { padding: 8px; - border-color: $outline-gray; background-color: transparent; .report-opt { @@ -87,17 +82,17 @@ $outline-gray: #9c9c9c; .report-input { border: none; outline: none; - border-bottom: 1px solid $outline-gray; + border-bottom: 1px solid; padding: 8px; padding-left: 0; transition: all 0.2s ease; background: transparent; &:hover { - border-bottom-color: $text-gray; + // border-bottom-color: $text-gray; } &:focus { - border-bottom-color: #4476f7; + // border-bottom-color: #4476f7; } } @@ -122,7 +117,6 @@ $outline-gray: #9c9c9c; display: flex; flex-direction: column; gap: 16px; - // background-color: #ffffff; text-align: left; position: relative; @@ -157,8 +151,7 @@ $outline-gray: #9c9c9c; .issue-card { cursor: pointer; padding: 16px; - // background-color: #ffffff; - border: 1px solid $outline-gray; + border: 1px solid; transition: all 0.1s ease; display: flex; flex-direction: column; @@ -177,7 +170,6 @@ $outline-gray: #9c9c9c; cursor: pointer; font-size: 14px; font-weight: 400; - // color: $text-gray; padding: 0; margin: 0; } @@ -187,21 +179,6 @@ $outline-gray: #9c9c9c; font-weight: 500; padding: 0; margin: 0; - color: #4476f7; - } - - &:hover { - background-color: #4476f7; - border-color: #4476f7; - color: #ffffff; - - .issue-label { - color: #ffffff; - } - - .issue-title { - color: #ffffff; - } } } @@ -210,14 +187,13 @@ $outline-gray: #9c9c9c; .dropzone { padding: 2rem; border-radius: 0.5rem; - border: 2px dashed $outline-gray; + border: 2px dashed; .dropzone-instructions { display: flex; flex-direction: column; align-items: center; gap: 16px; - // color: $text-gray; p { text-align: center; @@ -230,7 +206,6 @@ $outline-gray: #9c9c9c; margin: 0; padding: 0; font-size: 14px; - // color: $text-gray; width: 100%; overflow-x: auto; list-style-type: none; @@ -255,14 +230,11 @@ $outline-gray: #9c9c9c; display: flex; flex-direction: column; gap: 16px; - // background-color: #ffffff; text-align: left; position: relative; overflow: auto; .issue-label { - // color: $text-gray; - .issue-link { cursor: pointer; color: #4476f7; @@ -277,12 +249,10 @@ $outline-gray: #9c9c9c; .issue-date { font-size: 14px; - // color: $text-gray; } .issue-content { font-size: 14px; - // color: $text-gray; } } @@ -384,94 +354,3 @@ $outline-gray: #9c9c9c; border-radius: 32px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } - -// Old code - -// <----------------------------------------------------------------------------> - -// .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%; -// } - -// .report-issue-fab { -// position: fixed; -// bottom: 20px; -// right: 20px; -// display: flex; -// align-items: center; -// justify-content: center; -// cursor: pointer; -// } - -// .loading-center { -// margin: auto 0; -// } - -// .settings-content label { -// margin-top: 10px; -// } - -// .report-disclaimer { -// font-size: 8px; -// color: grey; -// padding-right: 50px; -// font-style: italic; -// text-align: left; -// } - -// .flex-select { -// display: flex; -// align-items: center; -// justify-content: center; -// gap: 10px; -// } diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index e15d3fdae..be46ba0a8 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; +import v4 = require('uuid/v4'); import '.././SettingsManager.scss'; import './ReportManager.scss'; +import Dropzone from 'react-dropzone'; +import ReactLoading from 'react-loading'; import { action, observable } from 'mobx'; import { BsX, BsArrowsAngleExpand, BsArrowsAngleContract } from 'react-icons/bs'; import { CgClose } from 'react-icons/cg'; @@ -13,10 +16,7 @@ import { Networking } from '../../Network'; import { MainViewModal } from '../../views/MainViewModal'; import { Octokit } from '@octokit/core'; import { Button, IconButton, OrientationType, Type } from 'browndash-components'; -import Dropzone from 'react-dropzone'; -import ReactLoading from 'react-loading'; -import v4 = require('uuid/v4'); -import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils'; +import { BugType, FileData, Priority, ViewState, darkColors, isLightText, lightColors } from './reportManagerUtils'; import { IssueCard, IssueView, Tag } from './ReportManagerComponents'; import { StrCast } from '../../../fields/Types'; const higflyout = require('@hig/flyout'); @@ -352,14 +352,19 @@ export class ReportManager extends React.Component<{}> { * @returns the component that dispays all issues */ private viewIssuesComponent = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const colors = darkMode ? darkColors : lightColors; + const isTagDarkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor)); + const activeTagTextColor = isTagDarkMode ? darkColors.text : lightColors.text; + return ( -
+
-

Open Issues

+

Open Issues

); @@ -476,11 +482,15 @@ export class ReportManager extends React.Component<{}> { * @returns the form component for submitting issues */ private reportIssueComponent = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const colors = darkMode ? darkColors : lightColors; + return ( -
+
); diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx index 576c3c3a1..651442030 100644 --- a/src/client/util/reportManager/ReportManagerComponents.tsx +++ b/src/client/util/reportManager/ReportManagerComponents.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import { Issue } from './reportManagerSchema'; -import { getLabelColors } from './reportManagerUtils'; +import { darkColors, getLabelColors, isLightText, lightColors } from './reportManagerUtils'; import ReactMarkdown from 'react-markdown'; import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; +import { StrCast } from '../../../fields/Types'; +import { Doc } from '../../../fields/Doc'; /** * Mini components to render issues. @@ -16,8 +18,31 @@ interface IssueCardProps { // Component for the issue cards list on the left export const IssueCard = ({ issue, onSelect }: IssueCardProps) => { + const [textColor, setTextColor] = React.useState(''); + const [bgColor, setBgColor] = React.useState(''); + const [borderColor, setBorderColor] = React.useState(''); + + const resetColors = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const colors = darkMode ? darkColors : lightColors; + setTextColor(colors.text); + setBorderColor(colors.border); + setBgColor('transparent'); + }; + + const handlePointerOver = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor)); + setTextColor(darkMode ? darkColors.text : lightColors.text); + setBorderColor(StrCast(Doc.UserDoc().userVariantColor)); + setBgColor(StrCast(Doc.UserDoc().userVariantColor)); + }; + + React.useEffect(() => { + resetColors(); + }, []); + return ( -
+
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts index 66394a0ca..682113a89 100644 --- a/src/client/util/reportManager/reportManagerUtils.ts +++ b/src/client/util/reportManager/reportManagerUtils.ts @@ -18,11 +18,16 @@ export enum BugType { ENHANCEMENT = 'enhancement', } +export interface FileData { + _id: string; + file: File; +} + // [bgColor, color] export const priorityColors: { [key: string]: string[] } = { 'priority-low': ['#d4e0ff', '#000000'], 'priority-medium': ['#6a91f6', '#ffffff'], - 'priority-high': ['#0f4ce7', '#ffffff'], + 'priority-high': ['#003cd5', '#ffffff'], }; // [bgColor, color] @@ -45,10 +50,35 @@ export const getLabelColors = (label: string): string[] => { return ['#0f73f6', '#ffffff']; }; -export interface FileData { - _id: string; - file: File; -} +const hexToRgb = (hex: string) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : { + r: 0, + g: 0, + b: 0, + }; +}; + +// function that returns whether text should be light on the given bg color +export const isLightText = (bgHex: string): boolean => { + const { r, g, b } = hexToRgb(bgHex); + return r * 0.299 + g * 0.587 + b * 0.114 <= 186; +}; -export const inactiveBorderColor = '#b8b8b8'; -export const inactiveColor = '#808080'; +export const lightColors = { + text: '#000000', + textGrey: '#5c5c5c', + border: '#b8b8b8', +}; + +export const darkColors = { + text: '#ffffff', + textGrey: '#d6d6d6', + border: '#717171', +}; -- cgit v1.2.3-70-g09d2 From ea217200f1c42e4d4b142abc9abd55ca49535c49 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Wed, 19 Jul 2023 19:11:06 -0400 Subject: lots of changes, just need server endpoint before pull --- package-lock.json | 18 +- src/client/Network.ts | 3 +- src/client/util/reportManager/ReportManager.scss | 10 +- src/client/util/reportManager/ReportManager.tsx | 382 +++++---------------- .../util/reportManager/ReportManagerComponents.tsx | 137 +++++++- .../util/reportManager/reportManagerUtils.ts | 181 +++++++++- src/client/views/PropertiesButtons.tsx | 90 ++--- 7 files changed, 454 insertions(+), 367 deletions(-) (limited to 'src/client/util/reportManager/ReportManager.scss') diff --git a/package-lock.json b/package-lock.json index aa59ef2eb..1f3255512 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,15 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@ampproject/remapping": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", + "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==", + "requires": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, "@azure/abort-controller": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.1.0.tgz", @@ -119,15 +128,6 @@ "tslib": "^2.2.0" } }, - "@babel/code-frame": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", - "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", - "requires": { - "@jridgewell/gen-mapping": "^0.3.0", - "@jridgewell/trace-mapping": "^0.3.9" - } - }, "@babel/code-frame": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz", diff --git a/src/client/Network.ts b/src/client/Network.ts index 70b51d036..39bf69e32 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -38,6 +38,7 @@ export namespace Networking { * with the mapping of guid to files as parameters. * * @param fileguidpairs the files and corresponding guids to be uploaded to the server + * @param browndash whether the endpoint should be invoked on the browndash server * @returns the response as a json from the server */ export async function UploadFilesToServer(fileguidpairs: FileGuidPair | FileGuidPair[], browndash?: boolean): Promise[]> { @@ -68,7 +69,7 @@ export namespace Networking { body: formData, }; - const endpoint = browndash ? 'http://10.38.71.246:1050/uploadFormData' : '/uploadFormData'; + const endpoint = browndash ? '[insert endpoint allowing local => browndash]' : '/uploadFormData'; const response = await fetch(endpoint, parameters); return response.json(); } diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index 4e80cbeeb..cd6a1d934 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -7,6 +7,12 @@ justify-content: space-between; align-items: center; + .header-btns { + display: flex; + align-items: center; + gap: 0.5rem; + } + h2 { margin: 0; padding: 0; @@ -53,12 +59,14 @@ } .report-textarea { + border: none; + outline: none; width: 100%; height: 80px; padding: 8px; resize: vertical; background: transparent; - // resize: none; + transition: border 0.3s ease; } .report-selects { diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index be46ba0a8..f20c2baaa 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -12,21 +12,17 @@ import { HiOutlineArrowLeft } from 'react-icons/hi'; import { Issue } from './reportManagerSchema'; import { observer } from 'mobx-react'; import { Doc } from '../../../fields/Doc'; -import { Networking } from '../../Network'; import { MainViewModal } from '../../views/MainViewModal'; import { Octokit } from '@octokit/core'; -import { Button, IconButton, OrientationType, Type } from 'browndash-components'; -import { BugType, FileData, Priority, ViewState, darkColors, isLightText, lightColors } from './reportManagerUtils'; -import { IssueCard, IssueView, Tag } from './ReportManagerComponents'; +import { Button, Dropdown, DropdownType, IconButton, Type } from 'browndash-components'; +import { BugType, FileData, Priority, ReportForm, ViewState, bugDropdownItems, darkColors, emptyReportForm, formatTitle, getAllIssues, isDarkMode, lightColors, passesTagFilter, priorityDropdownItems, uploadFilesToServer } from './reportManagerUtils'; +import { Filter, FormInput, FormTextArea, IssueCard, IssueView, Tag } from './ReportManagerComponents'; import { StrCast } from '../../../fields/Types'; +import { MdRefresh } from 'react-icons/md'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -// StrCast(Doc.UserDoc().userColor); -// StrCast(Doc.UserDoc().userBackgroundColor); -// StrCast(Doc.UserDoc().userVariantColor); - /** * Class for reporting and viewing Github issues within the app. */ @@ -85,44 +81,28 @@ export class ReportManager extends React.Component<{}> { }); // Form state - - @observable private bugTitle = ''; - @action setBugTitle = action((title: string) => { - this.bugTitle = title; - }); - @observable private bugDescription = ''; - @action setBugDescription = action((description: string) => { - this.bugDescription = description; + @observable private formData: ReportForm = emptyReportForm; + @action setFormData = action((newData: ReportForm) => { + this.formData = newData; }); - @observable private bugType = ''; - @action setBugType = action((type: string) => { - this.bugType = type; - }); - @observable private bugPriority = ''; - @action setBugPriority = action((priortiy: string) => { - this.bugPriority = priortiy; - }); - - @observable private mediaFiles: FileData[] = []; - @action private setMediaFiles = (files: FileData[]) => { - this.mediaFiles = files; - }; public close = action(() => (this.isOpen = false)); public open = action(async () => { this.isOpen = true; if (this.shownIssues.length === 0) { - this.setFetchingIssues(true); - try { - // load in the issues if not already loaded - const issues = (await this.getAllIssues()) as Issue[]; - // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's? - this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request)); - } catch (err) { - console.log(err); - } - this.setFetchingIssues(false); + this.updateIssues(); + } + }); + + @action updateIssues = action(async () => { + this.setFetchingIssues(true); + try { + const issues = (await getAllIssues(this.octokit)) as Issue[]; + this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request)); + } catch (err) { + console.log(err); } + this.setFetchingIssues(false); }); constructor(props: {}) { @@ -135,169 +115,54 @@ export class ReportManager extends React.Component<{}> { }); } - /** - * Fethches issues from Github. - * @returns array of all issues - */ - public async getAllIssues(): Promise { - const res = await this.octokit.request('GET /repos/{owner}/{repo}/issues', { - owner: 'brown-dash', - repo: 'Dash-Web', - per_page: 80, - }); - - // 200 status means success - if (res.status === 200) { - return res.data; - } else { - throw new Error('Error getting issues'); - } - } - /** * Sends a request to Github to report a new issue with the form data. * @returns nothing */ public async reportIssue(): Promise { - if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') { + if (this.formData.title === '' || this.formData.description === '') { alert('Please fill out all required fields to report an issue.'); return; } + let formattedLinks: string[] = []; this.setSubmitting(true); - - const links = await this.uploadFilesToServer(); - console.log(links); - if (!links) { - // error uploading files to the server - return; + if (this.formData.mediaFiles.length > 0) { + const links = await uploadFilesToServer(this.formData.mediaFiles); + console.log(links); + if (!links) { + return; + } + formattedLinks = links; } - const formattedLinks = (links ?? []).map(this.fileLinktoServerLink); - // const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', { - // owner: 'brown-dash', - // repo: 'Dash-Web', - // title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail), - // body: `${this.bugDescription} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`, - // labels: ['from-dash-app', this.bugType, this.bugPriority], - // }); + const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', { + owner: 'brown-dash', + repo: 'Dash-Web', + title: formatTitle(this.formData.title, Doc.CurrentUserEmail), + body: `${this.formData.description} ${formattedLinks.length > 0 ? `\n\nFiles:\n${formattedLinks.join('\n')}` : ''}`, + labels: ['from-dash-app', this.formData.type, this.formData.priority], + }); - // // 201 status means success - // if (req.status !== 201) { - // alert('Error creating issue on github.'); - // return; - // } + // 201 status means success + if (req.status !== 201) { + alert('Error creating issue on github.'); + return; + } // Reset fields - this.setBugTitle(''); - this.setBugDescription(''); - this.setMediaFiles([]); - this.setBugType(''); - this.setBugPriority(''); + this.setFormData(emptyReportForm); this.setSubmitting(false); - this.setFetchingIssues(true); - try { - // load in the issues if not already loaded - const issues = (await this.getAllIssues()) as Issue[]; - // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's? - this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request)); - } catch (err) { - console.log(err); - } - this.setFetchingIssues(false); + await this.updateIssues(); alert('Successfully submitted issue.'); } - /** - * Formats issue title. - * - * @param title title of issue - * @param userEmail email of issue submitter - * @returns formatted title - */ - private formatTitle = (title: string, userEmail: string): string => `${title} - ${userEmail.replace('@brown.edu', '')}`; - - // turns an upload link -> server link - // ex: - // C: /Users/dash/Documents/GitHub/Dash-Web/src/server/public/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2.png - // -> https://browndash.com/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2_l.png - private fileLinktoServerLink = (fileLink: string) => { - const serverUrl = 'https://browndash.com/'; - - const regex = 'public'; - const publicIndex = fileLink.indexOf(regex) + regex.length; - - const finalUrl = `${serverUrl}${fileLink.substring(publicIndex + 1).replace('.', '_l.')}`; - return finalUrl; - }; - - /** - * Gets the server file path. - * - * @param link response from file upload - * @returns server file path - */ - private getServerPath = (link: any): string => { - return link.result.accessPaths.agnostic.server as string; - }; - - /** - * Uploads media files to the server. - * @returns the server paths or undefined on error - */ - private uploadFilesToServer = async (): Promise => { - try { - // need to always upload to browndash - const links = await Networking.UploadFilesToServer( - this.mediaFiles.map(file => ({ file: file.file })), - true - ); - return (links ?? []).map(this.getServerPath); - } catch (err) { - if (err instanceof Error) { - alert(err.message); - } else { - alert(err); - } - } - }; - /** * Handles file upload. * * @param files uploaded files */ private onDrop = (files: File[]) => { - this.setMediaFiles([...this.mediaFiles, ...files.map(file => ({ _id: v4(), file }))]); - }; - - /** - * Returns when the issue passes the current filters. - * - * @param issue issue to check - * @returns boolean indicating whether the issue passes the current filters - */ - private passesTagFilter = (issue: Issue) => { - let passesPriority = true; - let passesBug = true; - if (this.priorityFilter) { - passesPriority = issue.labels.some(label => { - if (typeof label === 'string') { - return label === this.priorityFilter; - } else { - return label.name === this.priorityFilter; - } - }); - } - if (this.bugFilter) { - passesBug = issue.labels.some(label => { - if (typeof label === 'string') { - return label === this.bugFilter; - } else { - return label.name === this.bugFilter; - } - }); - } - return passesPriority && passesBug; + this.setFormData({ ...this.formData, mediaFiles: [...this.formData.mediaFiles, ...files.map(file => ({ _id: v4(), file }))] }); }; /** @@ -317,7 +182,7 @@ export class ReportManager extends React.Component<{}> { {`Preview
- } onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} /> + } onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
); @@ -331,7 +196,7 @@ export class ReportManager extends React.Component<{}> {
- } onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} /> + } onClick={() => this.setFormData({ ...this.formData, mediaFiles: this.formData.mediaFiles.filter(f => f._id !== fileData._id) })} />
); @@ -340,7 +205,7 @@ export class ReportManager extends React.Component<{}> {
); @@ -352,94 +217,31 @@ export class ReportManager extends React.Component<{}> { * @returns the component that dispays all issues */ private viewIssuesComponent = () => { - const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)); const colors = darkMode ? darkColors : lightColors; - const isTagDarkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor)); - const activeTagTextColor = isTagDarkMode ? darkColors.text : lightColors.text; return (

Open Issues

-
- { - this.setQuery(e.target.value); - }} - required - /> -
-
- { - this.setPriorityFilter(null); - }} - fontSize="12px" - backgroundColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'} - color={this.priorityFilter === null ? activeTagTextColor : colors.textGrey} - border - borderColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : colors.border} - /> - {Object.values(Priority).map(p => { - return ( - { - this.setPriorityFilter(p); - }} - fontSize="12px" - backgroundColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'} - color={this.priorityFilter === p ? activeTagTextColor : colors.textGrey} - border - borderColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : colors.border} - /> - ); - })} -
-
- + } onClick={this.updateIssues} /> +
+ +
+ this.setPriorityFilter(p)} /> + this.setBugFilter(b)} /> +
{this.fetchingIssues ? (
@@ -448,7 +250,7 @@ export class ReportManager extends React.Component<{}> { ) : ( this.shownIssues .filter(issue => issue.title.toLowerCase().includes(this.query)) - .filter(issue => this.passesTagFilter(issue)) + .filter(issue => passesTagFilter(issue, this.priorityFilter, this.bugFilter)) .map(issue => ( { * @returns the form component for submitting issues */ private reportIssueComponent = () => { - const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor)); const colors = darkMode ? darkColors : lightColors; return ( @@ -502,38 +304,37 @@ export class ReportManager extends React.Component<{}> {
- this.setBugTitle(e.target.value)} required /> + this.setFormData({ ...this.formData, title: val })} />
-