Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Miscellaneous MUI styling fixes #24

Merged
merged 11 commits into from
Jun 19, 2024
Merged

Miscellaneous MUI styling fixes #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d66e014
dev-tv/fix-offscreen-entity: Fixes #7 caused by UpdateDimensions() wr…
villagrat-ncb Jun 11, 2024
2a5d2a5
dev-tv/fix-comment-warnings: partially fixes #5 , sticky note warnings
villagrat-ncb Jun 11, 2024
5759665
dev-tv/fix-comment-warnings: fixes #5 , applied styled wrapper to rem…
villagrat-ncb Jun 11, 2024
942370d
Merge branch 'dev-vertex/nodejs-18-upgrade' into dev-tv/fix-offscreen…
villagrat Jun 11, 2024
478aea5
dev-tv/fix-offscreen-entity: apply styled util to ViewMain container
villagrat-ncb Jun 14, 2024
a2b5cc9
dev-tv/fix-comment-warnings: fix focus being lost when writing
villagrat-ncb Jun 18, 2024
df544a0
Merge branch 'dev' into dev-tv/fix-comment-warnings
villagrat Jun 18, 2024
6047d86
Merge remote-tracking branch 'origin/dev' into dev-tv/fix-offscreen-e…
Sakelun Jun 18, 2024
94083aa
Merge pull request #17 from theRAPTLab/dev-tv/fix-offscreen-entity
Sakelun Jun 18, 2024
11dfa87
Merge pull request #18 from theRAPTLab/dev-tv/fix-comment-warnings
Sakelun Jun 18, 2024
36880bd
dev-tv/fix-comment-warnings: match CSS style of text input
villagrat-ncb Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app-web/components/MEMEStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const styles = theme => {
},
appBarToolbar: {
minHeight: `${m_navbarHeight}px`,
paddingLeft: '0',
paddingLeft: '140px',
paddingRight: '0'
},
appBarRight: {
Expand Down
134 changes: 93 additions & 41 deletions src/app-web/components/StickyNote.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import SaveIcon from '@mui/icons-material/Save';

// Material UI Theming
import { withTheme } from 'styled-components';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';

/// COMPONENTS ////////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Expand All @@ -72,6 +72,25 @@ import ASET from '../modules/adm-settings';
import MDReactComponent from 'react-markdown';
import EvidenceNotes from './EvidenceNotes';

/// CONSTANTS /////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Styled Components
const StyledTypographyAuthor = styled(Typography)(({ classes }) => classes.stickynoteCardAuthor);
const StyledTypographyLabel = styled(Typography)(({ classes }) => classes.stickynoteCardLabel);
const StyledInputLabel = styled(InputLabel)(({ classes }) => classes.stickynoteCardLabel);
const StyledIconButton = styled(IconButton)(({ classes }) => classes.stickynoteCardEditBtn);
const StyledPaper = styled(Paper)(({ theme, classes, hasbeenread }) => ({
...theme.overrides?.MuiPaper,
...(hasbeenread ? classes.stickynoteCardRead : classes.stickynoteCard),
}));
const StyledDeleteIcon = styled(DeleteIcon)(({ classes }) => classes.stickynoteCardAuthor);
const StyledSaveIcon = styled(SaveIcon)(({ classes }) => classes.stickynoteCardAuthor);
const StyledEditIcon = styled(EditIcon)(({ classes }) => classes.stickynoteCardAuthor);
const StyledDivLabel = styled('div')(({ classes }) => classes.stickynoteCardLabel);
const StyledDivCriteria = styled('div')(({ classes }) => classes.stickynoteCardCriteria);
const StyledInput = styled(Input)(({ classes }) => classes.stickynoteCardInput);

/// CLASS DECLARATION /////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Expand Down Expand Up @@ -342,8 +361,8 @@ class StickyNote extends React.Component {
<option value="" key="empty">
Select one...
</option>
{criteria.map(crit => (
<option value={crit.id} key={crit.id} className={classes.criteriaSelectorMenu}>
{criteria.map((crit) => (
<option value={crit.id} key={crit.id} className={`${classes.criteriaSelectorMenu}`}>
{crit.label}
</option>
))}
Expand All @@ -354,50 +373,68 @@ class StickyNote extends React.Component {
}
return (
<ClickAwayListener onClickAway={this.OnClickAway}>
<Paper
className={hasBeenRead ? classes.stickynoteCardRead : classes.stickynoteCard}
<StyledPaper
theme={theme}
classes={classes}
hasbeenread={hasBeenRead}
className={hasBeenRead ? `${classes.stickynoteCardRead}` : `${classes.stickynoteCard}`}
onMouseEnter={this.OnMouseEnter}
onMouseLeave={this.OnMouseLeave}
>
<Grid container>
<Grid item xs={3}>
<Typography variant="subtitle2" className={classes.stickynoteCardAuthor}>
{`${ADM.GetStudentName(comment.author)} ${ADM.GetGroupNameByStudent(
comment.author
)}`}
</Typography>
<Typography variant="caption" className={classes.stickynoteCardLabel}>
<StyledTypographyAuthor
classes={classes}
variant="subtitle2"
className={`${classes.stickynoteCardAuthor}`}
>
{`${ADM.GetStudentName(comment.author)} ${ADM.GetGroupNameByStudent(comment.author)}`}
</StyledTypographyAuthor>
<StyledTypographyLabel
classes={classes}
variant="caption"
className={`${classes.stickynoteCardLabel}`}
>
{`${timestring}`}
<br />
{`${datestring}`}
</Typography>
</StyledTypographyLabel>
</Grid>
<Grid item xs={9}>
<div style={{ float: 'right' }} className={classes.stickynoteCardLabel}>
<StyledDivLabel
classes={classes}
style={{ float: 'right' }}
className={`${classes.stickynoteCardLabel}`}
>
#{comment.id}
</div>
</StyledDivLabel>
<div hidden={!showCriteria}>
<InputLabel className={classes.stickynoteCardLabel}>CRITERIA:&nbsp;</InputLabel>
<div className={classes.stickynoteCardCriteria} title={criteriaDescription}>
<StyledInputLabel classes={classes} className={`${classes.stickynoteCardLabel}`}>
CRITERIA:&nbsp;
</StyledInputLabel>{' '}
<StyledDivCriteria
classes={classes}
className={`${classes.stickynoteCardCriteria}`}
title={criteriaDescription}
>
{criteriaDisplay}
</div>
</StyledDivCriteria>
<div hidden={!isBeingEdited}>
<MDReactComponent
className={classes.stickynoteCardCriteriaDescription}
>
<MDReactComponent className={`${classes.stickynoteCardCriteriaDescription}`}>
{criteriaDescription}
</MDReactComponent>
</div>
</div>
<ThemeProvider theme={theme}>
<Input
className={classes.stickynoteCardInput}
<StyledInput
classes={classes}
className={`${classes.stickynoteCardInput}`}
value={comment.text}
placeholder={comment.placeholder}
onChange={e => this.OnCommentTextChange(e.target.value)}
onMouseDown={e => e.stopPropagation()}
variant="filled"
rowsMax="4"
onChange={(e) => this.OnCommentTextChange(e.target.value)}
onMouseDown={(e) => e.stopPropagation()}
maxRows={4}
sx={{ backgroundColor: 'rgba(255,255,255,0.8)' }}
multiline
disableUnderline
inputProps={{
Expand All @@ -407,46 +444,61 @@ class StickyNote extends React.Component {
inputRef={this.textInput}
/>
</ThemeProvider>
<div className={classes.stickynoteCardLabel}>
<StyledDivLabel classes={classes} className={`${classes.stickynoteCardLabel}`}>
<EvidenceNotes comment={comment} isBeingEdited={isBeingEdited} />
</div>
</StyledDivLabel>
</Grid>
</Grid>
<Grid container style={{ alignItems: 'flex-end', marginTop: '3px', height: '20px' }}>
<Grid item style={{ flexGrow: '1' }}>
<IconButton
<StyledIconButton
classes={classes}
size="small"
hidden={!showEditButtons || !allowedToDelete}
onClick={this.OnDeleteClick}
className={classes.stickynoteCardEditBtn}
className={`${classes.stickynoteCardEditBtn}`}
>
<DeleteIcon fontSize="small" className={classes.stickynoteCardAuthor} />
</IconButton>
<StyledDeleteIcon
classes={classes}
fontSize="small"
className={`${classes.stickynoteCardAuthor}`}
/>
</StyledIconButton>
</Grid>
<Grid item xs={1}>
{isBeingEdited ? ( // Render the Save button when in edit mode
<IconButton
<StyledIconButton
classes={classes}
size="small"
hidden={!(allowedToEdit && isBeingEdited) || selectedCriteria === undefined}
onClick={this.OnSaveClick}
className={classes.stickynoteCardEditBtn}
className={`${classes.stickynoteCardEditBtn}`}
>
<SaveIcon fontSize="small" className={classes.stickynoteCardAuthor} />
</IconButton>
<StyledSaveIcon
classes={classes}
fontSize="small"
className={`${classes.stickynoteCardAuthor}`}
/>
</StyledIconButton>
) : (
// Render the Edit button when not in edit mode
<IconButton
<StyledIconButton
classes={classes}
size="small"
hidden={!showEditButtons || !allowedToEdit || isBeingEdited}
onClick={this.OnEditClick}
className={classes.stickynoteCardEditBtn}
className={`${classes.stickynoteCardEditBtn}`}
>
<EditIcon fontSize="small" className={classes.stickynoteCardAuthor} />
</IconButton>
<StyledEditIcon
classes={classes}
fontSize="small"
className={`${classes.stickynoteCardAuthor}`}
/>
</StyledIconButton>
)}
</Grid>
</Grid>
</Paper>
</StyledPaper>
</ClickAwayListener>
);
}
Expand Down
28 changes: 20 additions & 8 deletions src/app-web/views/ViewMain/ViewMain.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import clsx from 'clsx';
import { Switch, Route } from 'react-router-dom';
// Material UI Theming
import { withTheme } from 'styled-components';
import { styled } from '@mui/material/styles';
import { yellow } from '@mui/material/colors';

/// COMPONENTS ////////////////////////////////////////////////////////////////
Expand Down Expand Up @@ -67,6 +68,17 @@ import { cssreact, cssdraw, cssalert } from '../../modules/console-styles';
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
const DBG = false;
const PKG = 'ViewMain:';
// Styled components
const StyledMain = styled('main')(({ theme }) => ({
paddingLeft: '140px',
paddingTop: '64px',
flexGrow: 1,
backgroundColor: 'rgb(250, 250, 250)',
}));
const StyledViewDiv = styled('div')(({ theme }) => ({
backgroundColor: '#f0f0ff',
flex: 1
}))

/// CLASS DECLARATION /////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Expand Down Expand Up @@ -213,7 +225,7 @@ class ViewMain extends React.Component {
console.log('%cUpdateDimensions Fired', cssdraw);
this.setState({
viewWidth: Math.min(viewWidth, innerWidth),
viewHeight: Math.min(viewHeight, innerHeight)
viewHeight: Math.max(viewHeight, innerHeight),
});
}

Expand Down Expand Up @@ -639,12 +651,12 @@ class ViewMain extends React.Component {
toggleOpen={this.OnToolsPanelToggle}
/>

<main
<StyledMain
className={clsx(classes.content, { [classes.toolsPanelClosedShift]: !toolsPanelIsOpen })}
ref={this.refMain}
>
<div className={classes.toolbar} ref={this.refToolbar} />
<div
<StyledViewDiv
className={classes.view}
ref={this.refView}
style={{ height: this.state.viewHeight }}
Expand Down Expand Up @@ -673,28 +685,28 @@ class ViewMain extends React.Component {
</Switch>
<ZoomInMapIcon
onClick={() => UR.Publish('SVG_PANZOOM_RESET')}
style={{ position: 'absolute', left: '110px', bottom: '60px' }}
style={{ position: 'absolute', left: '140px', bottom: '60px' }}
/>
<ZoomOutMapIcon
onClick={() => UR.Publish('SVG_PANZOOM_OUT')}
style={{ position: 'absolute', left: '110px', bottom: '10px' }}
style={{ position: 'absolute', left: '140px', bottom: '10px' }}
/>
<Typography
variant="caption"
style={{ position: 'absolute', left: '160px', bottom: '12px' }}
style={{ position: 'absolute', left: '190px', bottom: '12px' }}
>
{' '}
{/* STATUS LABEL */}
{viewStatus}
</Typography>
</div>
</StyledViewDiv>

<StickyNoteCollection />
<RatingsDialog />
<MechDialog />
<DescriptionView />
<ScreenshotView />
</main>
</StyledMain>

{/* Resource Library */}
<Drawer variant="persistent" anchor="right" open={resourceLibraryIsOpen}>
Expand Down