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

Fix : Improve UI for Slur Crowdsource Feature #409 #549

Closed
wants to merge 1 commit into from
Closed

Fix : Improve UI for Slur Crowdsource Feature #409 #549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 19 additions & 7 deletions browser-extension/plugin/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,34 @@
"version": "0.1.15",
"author": "tattlemade|cis",
"content_security_policy": {
"extension_pages": "default-src 'none'; connect-src https://ogbv-plugin.tattle.co.in/ https://uli-media.tattle.co.in/; font-src https://fonts.gstatic.com; object-src 'none'; script-src 'self'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; img-src https://uli-media.tattle.co.in/; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; report-uri 'none';"
"extension_pages": "default-src 'none'; connect-src http://localhost:3000 ws://localhost; font-src https://fonts.gstatic.com; object-src 'none'; script-src 'self'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; img-src https://uli-media.tattle.co.in/; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; report-uri 'none';"
},
"permissions": ["storage", "contextMenus"],
"host_permissions": ["https://ogbv-plugin.tattle.co.in/*"],
"permissions": [
"storage",
"contextMenus"
],
"host_permissions": [
"https://ogbv-plugin.tattle.co.in/*"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"matches": [
"<all_urls>"
],
"js": [
"content-script.js"
],
"run_at": "document_end"
}
],
"action": {
"default_popup": "options.html"
},
"icons": { "16": "icon16.png", "48": "icon32.png" }
}
"icons": {
"16": "icon16.png",
"48": "icon32.png"
}
}
26 changes: 13 additions & 13 deletions browser-extension/plugin/src/ui-components/atoms/SlurCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,8 @@ const SlurCard = ({ data }) => {
{data.casual === true
? 'Yes'
: data.casual === false
? 'No'
: ''}
? 'No'
: ''}
</TableCell>
</TableRow>
<TableRow>
Expand All @@ -155,8 +155,8 @@ const SlurCard = ({ data }) => {
{data.appropriated === true
? 'Yes'
: data.appropriated === false
? 'No'
: ''}
? 'No'
: ''}
</TableCell>
</TableRow>
{showMore && (
Expand All @@ -172,9 +172,9 @@ const SlurCard = ({ data }) => {
{data.appropriationContext === true
? 'Community'
: data.appropriationContext ===
false
? 'Others'
: ''}
false
? 'Others'
: ''}
</TableCell>
</TableRow>
<TableRow>
Expand Down Expand Up @@ -242,12 +242,12 @@ const SlurCard = ({ data }) => {
)}
</TableBody>
</Table>
<Box align='center' margin={{top: "small"}}>
<Anchor
label={buttonLabel}
icon={buttonIcon}
onClick={toggleShowMore}
/>
<Box align='center' margin={{ top: "small" }}>
<Anchor
label={buttonLabel}
icon={buttonIcon}
onClick={toggleShowMore}
/>
</Box>
</Box>
</>
Expand Down
104 changes: 96 additions & 8 deletions browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,109 @@
import React from 'react'
import SlurCardBubble from './SlurCardBubble';
import {
Card, CardBody, CardFooter, CardHeader, List,
Text,
Box,
Button,
Anchor,
DataTable,
Text,
Card,
CardBody,
CardFooter,
} from 'grommet';

import { Alert, FormUp, FormDown } from 'grommet-icons';
import SlurCardBubble from './SlurCardBubble';

const SlurCardComponent = ({ data }) => {
const isDataEmpty =
!data.levelOfSeverity ||
data.casual === undefined ||
data.appropriated === undefined ||
data.categories.length === 0;

const [showMore, setShowMore] = React.useState(false);
const toggleShowMore = () => {
setShowMore(!showMore);
};
const buttonLabel = showMore ? 'Contract' : 'Expand';
const buttonIcon = showMore ? <FormUp /> : <FormDown />;



const dataSet = [] ;

if (showMore === true) {

dataSet.push(
{ name: 'Level of Severity', value: data.levelOfSeverity },
{ name: 'Casual', value: data.casual ? 'Yes' : 'No' },
{ name: 'Appropriated', value: data.appropriated ? 'Yes' : 'No' },
{ name: 'If, Appropriated, Is it by Community or Others?', value: data.appropriationContext ? 'Community' : 'Others' },
{ name: 'What Makes it Problematic?', value: data.labelMeaning },
{ name: 'Categories', value: data.categories },
);

}


const columns = [
{
property: 'name',
header: false,
render : data => {
return <Text color="#646464" weight="bolder">
{data.name}
</Text>
}
},
{
property: 'value',
header: false,
render: data => {
return data.name === 'Categories' ? (
<Box direction="row" gap="medium" wrap={true}>
{data.value.map((category, categoryIndex) => (
<Box margin={'xsmall'} key={categoryIndex}>
<SlurCardBubble data={category} />
</Box>
))}
</Box>
) : data.value;
},
},
];


return (
<Card flex={true} background="#FFE5B4">
<CardHeader pad="medium">Header</CardHeader>
<CardBody pad="medium">Body</CardBody>
<CardBody>
{isDataEmpty ? (
<Box
direction="row"
gap="medium"
align="center"
background="status-warning"
width={'fit-content'}
>
<Box margin="medium">
<Alert />
</Box>
<Text margin="small">Add metadata for the slur</Text>
</Box>
) : (
<DataTable
columns={columns}
data={dataSet}
border={false}
/>
)}
</CardBody>
<CardFooter align='center' pad={{horizontal: "medium"}}>
<Anchor
label={buttonLabel}
icon={buttonIcon}
onClick={toggleShowMore}
/>
</CardFooter>
</Card>
)
);
}

export default SlurCardComponent
10 changes: 10 additions & 0 deletions browser-extension/plugin/src/ui-components/atoms/Theme.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,16 @@ const Theme = {
</Text>
)
}
},
dataTable: {
header: {
border: {
color: 'transparent',
},
},
},
card : {
elevation : "none"
}
};

Expand Down
30 changes: 19 additions & 11 deletions browser-extension/plugin/src/ui-components/pages/Slur.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
import Api from './Api';
import { UserContext, NotificationContext } from '../atoms/AppContext';
import SlurCard from '../atoms/SlurCard';
// import SlurCardComponent from '../atoms/SlurCardComponent';
import SlurCardComponent from '../atoms/SlurCardComponent';

const { getSlurAndCategory, deleteSlurAndCategory } = Api;

Expand Down Expand Up @@ -85,8 +85,8 @@ export function Slur() {
onClick={navigateToAddSlur}
/>
</Box>
<Box>
<Text size="small">
<Box margin={{ top : "medium"}}>
<Text size="medium">
No Slurs have been added, click to add slurs
</Text>
</Box>
Expand Down Expand Up @@ -124,19 +124,21 @@ export function Slur() {
pad="medium"
round="medium"
width="medium"
elevation="small"
margin={{ top: 'medium' }}
elevation="medium"
margin={{ top: 'medium' , bottom: 'medium' }}
>
<Box
direction="row"
justify="between"
gap="small"
gap="large"
align="center"
>
<Box width="60%" margin={'small'}>
<Text size="large" truncate>
<strong>{slur.label}</strong>
</Text>


</Box>
<Box
direction="row"
Expand All @@ -146,12 +148,15 @@ export function Slur() {
<Box
width={'fit-content'}
round="medium"
border={{ color: 'brand' }}
pad={"none"}
// border={{ color: 'brand' }}

>
<Button
id="slur-edit-button"
// label="Edit"
icon={<Edit size="medium" />}

onClick={() =>
navigate(`/slur/${slur.id}`)
}
Expand All @@ -160,8 +165,6 @@ export function Slur() {
<Box
width={'fit-content'}
round="medium"
border={{ color: 'brand' }}
// background={"#FFB199"}
>
<Button
id="slur-delete-button"
Expand All @@ -175,15 +178,20 @@ export function Slur() {
onClick={() =>
handleDeleteSlur(slur.id)
}

/>
</Box>
</Box>
</Box>
<Box margin={{ top: 'large' }}>
<SlurCard data={slur} />
<Box margin={{ top: 'large'}}>
<SlurCardComponent data={slur} />
</Box>

</Box>


))}

</>
)}
</Box>
Expand Down
Loading