Skip to content

Commit

Permalink
Merge pull request #285 from m2ms/allfunctionality
Browse files Browse the repository at this point in the history 
Fix design for #763
  • Loading branch information
@rsanchezgarc
rsanchezgarc authored Feb 4, 2022
2 parents c5d1b82 + 2bbde5a commit dbe8b2e
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 69 deletions.
47 changes: 32 additions & 15 deletions js/components/preview/tags/details/tagDetailRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,16 @@ import TagView from '../tagView';
import { getDefaultTagDiscoursePostText } from '../utils/tagUtils';
import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
import { updateTagProp, selectTag, unselectTag, removeSelectedTag, addSelectedTag } from '../redux/dispatchActions';
import { Tooltip, makeStyles, Button, Typography, IconButton } from '@material-ui/core';
import { Edit } from '@material-ui/icons';
import { Tooltip, makeStyles, Button, Typography, IconButton, Fab } from '@material-ui/core';
import { Edit, Forum } from '@material-ui/icons';
import { isURL } from '../../../../utils/common';
import classNames from 'classnames';
import { createTagPost, isDiscourseAvailableNotSignedIn, isDiscourseAvailable } from '../../../../utils/discourse';
import { setTagToEdit, appendToMolListToEdit, removeFromMolListToEdit } from '../../../../reducers/selection/actions';

const useStyles = makeStyles(theme => ({
contColButton: {
height: 16,
minWidth: 'fit-content',
padding: '0 1px',
fontWeight: 'bold',
Expand Down Expand Up @@ -45,6 +46,9 @@ const useStyles = makeStyles(theme => ({
}
},
editButton: {
width: 16,
height: 16,
padding: 0,
backgroundColor: theme.palette.success.light,
color: theme.palette.success.contrastText,
'&:hover': {
Expand All @@ -53,8 +57,21 @@ const useStyles = makeStyles(theme => ({
}
},
editButtonIcon: {
width: '0.75em',
height: '0.75em'
width: '0.6em',
height: '0.6em'
},
discourseButton: {
color: theme.palette.white,
width: 16,
height: 16,
minHeight: 'unset'
},
discourseButtonIcon: {
width: '0.55em',
height: '0.55em'
},
text: {
lineHeight: 1.2
}
}));

Expand Down Expand Up @@ -138,7 +155,7 @@ const TagDetailRow = memo(({ tag, moleculesToEditIds, moleculesToEdit }) => {
></TagView>
{/* category */}
<Tooltip title={CATEGORY_TYPE_BY_ID[tag.category_id]}>
<Typography variant="body2" noWrap>
<Typography className={classes.text} variant="body2" noWrap>
{CATEGORY_TYPE_BY_ID[tag.category_id]}
</Typography>
</Tooltip>
Expand All @@ -158,12 +175,10 @@ const TagDetailRow = memo(({ tag, moleculesToEditIds, moleculesToEdit }) => {
</Tooltip>
{/* discourse button */}
<Tooltip title="Discourse link">
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: false,
[classes.contColButtonHalfSelected]: false
})}
<Fab
color="secondary"
size="small"
className={classes.discourseButton}
onClick={() => {
if (isURL(tag.discourse_url)) {
window.open(tag.discourse_url, '_blank');
Expand All @@ -178,13 +193,15 @@ const TagDetailRow = memo(({ tag, moleculesToEditIds, moleculesToEdit }) => {
}}
disabled={!(isDiscourseAvailable() || (isDiscourseAvailableNotSignedIn() && tag.discourse_url))}
>
Discourse
</Button>
<Forum className={classes.discourseButtonIcon} />
</Fab>
</Tooltip>
{/* user */}
<Typography variant="body2">{tag.user_id}</Typography>
<Typography className={classes.text} variant="body2">
{tag.user_id}
</Typography>
{/* date */}
<Typography variant="body2" noWrap>
<Typography className={classes.text} variant="body2" noWrap>
{navigator.language
? new Date(tag.create_date).toLocaleDateString(navigator.language)
: new Date(tag.create_date).toLocaleDateString()}
Expand Down
14 changes: 9 additions & 5 deletions js/components/preview/tags/details/tagDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,24 @@ const useStyles = makeStyles(theme => ({
},
container: {
display: 'grid',
gridTemplateColumns: '1fr 75px 75px min-content 20px min-content min-content',
gridTemplateColumns: '1fr 35px 75px min-content 20px min-content auto',
alignItems: 'center',
gap: theme.spacing(),
gap: 1,
overflow: 'auto'
},
columnLabel: {
display: 'flex',
marginLeft: theme.spacing(2)
},
categoryLabel: {
justifySelf: 'flex-end'
},
creatorLabel: {
gridColumn: '4 / span 2',
gridColumn: '5',
justifySelf: 'flex-end'
},
dateLabel: {
gridColumn: '6 / span 2'
gridColumn: '6'
},
search: {
width: 140
Expand Down Expand Up @@ -288,7 +291,7 @@ const TagDetails = memo(({ handleHeightChange }) => {
</div>

{/* category */}
<div className={classes.columnLabel}>
<div className={classNames(classes.columnLabel, classes.categoryLabel)}>
<Typography variant="subtitle1">Category</Typography>
<IconButton size="small" onClick={() => handleHeaderSort('category')}>
<Tooltip title="Sort" className={classes.sortButton}>
Expand Down Expand Up @@ -340,6 +343,7 @@ const TagDetails = memo(({ handleHeightChange }) => {
</Tooltip>
</IconButton>
</div>
<div />

{filteredTagList &&
filteredTagList.map((tag, idx) => {
Expand Down
136 changes: 87 additions & 49 deletions js/components/preview/tags/tagView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,17 @@ import { Edit, Check } from '@material-ui/icons';
import { useDispatch } from 'react-redux';
import { getFontColorByBackgroundColor } from '../../../utils/colors';
import { TagEditModal } from './modal/tagEditModal';
import classNames from 'classnames';

const useStyles = makeStyles(theme => ({
tagItem: {
paddingBottom: 0
},
tagDetailsItem: {
alignSelf: 'stretch',
display: 'grid',
placeContent: 'stretch flex-start'
},
chip: {
// maxWidth: '100%',
margin: '2px', //theme.spacing(1),
Expand Down Expand Up @@ -49,6 +55,15 @@ const useStyles = makeStyles(theme => ({
marginLeft: '0px'
}
},
tagDetailsChip: {
height: '100% !important',
margin: '0 !important',
padding: '0 !important',
borderRadius: '0 !important',
'& .MuiChip-labelSmall': {
textAlign: 'left !important'
}
},
chipSelected: {
'& .MuiChip-iconSmall': {
width: '18px'
Expand All @@ -61,6 +76,10 @@ const useStyles = makeStyles(theme => ({
display: 'block'
}
}
},
check: {
width: '0.6em',
height: '0.6em'
}
}));

Expand Down Expand Up @@ -129,77 +148,96 @@ const TagView = memo(
};

const generateProps = () => {
if (selected && isTagEditor) {
return {
size: 'small',
className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`,
label: tagData.tag,
clickable: true,
color: bgColor,
style: style,
onClick: () => {
handleClick && handleClick(selected, tag, allTags);
},
deleteIcon: getDeleteIcon(),
onDelete: getDeleteAction(),
disabled: determineDisabled(),
icon: (
<Avatar style={{ backgroundColor: bgColor }}>
<Check style={{ color: color }} />
</Avatar>
)
};
} else {
if (selected || isTagEditor) {
return {
size: 'small',
className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`,
label: tagData.tag,
clickable: true,
color: bgColor,
borderColor: bgColor,
style: style,
onClick: () => {
handleClick && handleClick(selected, tag, allTags);
},
deleteIcon: getDeleteIcon(),
onDelete: getDeleteAction(),
disabled: determineDisabled(),
icon: (
<Avatar style={{ backgroundColor: bgColor, borderRadius: '9px' }}>
<Check style={{ color: bgColor }} />
</Avatar>
)
};
} else {
// If in Tag Details
if (isTagEditor) {
if (selected) {
return {
size: 'small',
className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`,
className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null} ${
classes.tagDetailsChip
}`,
label: tagData.tag,
clickable: true,
color: bgColor,
borderColor: bgColor,
style: style,
variant: 'outlined',
onClick: () => {
handleClick && handleClick(selected, tag, allTags);
},
deleteIcon: getDeleteIcon(),
onDelete: getDeleteAction(),
disabled: determineDisabled(),
icon: (
<Avatar style={{ backgroundColor: bgColor, borderRadius: '9px' }}>
<Check style={{ color: bgColor }} />
<Avatar style={{ backgroundColor: bgColor }}>
<Check className={classes.check} style={{ color: color }} />
</Avatar>
)
};
}

return {
size: 'small',
className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null} ${
classes.tagDetailsChip
}`,
label: tagData.tag,
clickable: true,
color: bgColor,
borderColor: bgColor,
style: style,
onClick: () => {
handleClick && handleClick(selected, tag, allTags);
},
deleteIcon: getDeleteIcon(),
onDelete: getDeleteAction(),
disabled: determineDisabled(),
icon: (
<Avatar style={{ backgroundColor: bgColor, borderRadius: '9px' }}>
<Check className={classes.check} style={{ color: bgColor }} />
</Avatar>
)
};
}

// If in Hit List Filter
if (selected) {
return {
size: 'small',
className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`,
label: tagData.tag,
clickable: true,
color: bgColor,
borderColor: bgColor,
style: style,
onClick: () => {
handleClick && handleClick(selected, tag, allTags);
},
deleteIcon: getDeleteIcon(),
onDelete: getDeleteAction(),
disabled: determineDisabled()
};
}

return {
size: 'small',
className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`,
label: tagData.tag,
clickable: true,
color: bgColor,
borderColor: bgColor,
style: style,
variant: 'outlined',
onClick: () => {
handleClick && handleClick(selected, tag, allTags);
},
deleteIcon: getDeleteIcon(),
onDelete: getDeleteAction(),
disabled: determineDisabled()
};
};

return (
<>
<Grid className={classes.tagItem}>
<Grid className={classNames(classes.tagItem, { [classes.tagDetailsItem]: isTagEditor })}>
<Tooltip title={tagData.tag} placement="top">
<Chip {...generateProps()} />
</Tooltip>
Expand Down

0 comments on commit dbe8b2e

Please sign in to comment.