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

Resdesign issues #900

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

Resdesign issues #900

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4bda6e1
replace moment with dayjs
ishpaul777 May 2, 2023
b02fca4
fix layout of profile page
ishpaul207 May 10, 2023
752806a
fix for alert and alignment issues
tejveer777 May 12, 2023
d7e5fb9
FIX FOR SEARCH BAR auto CLOSING and spacing and template collapse not…
tejveer777 May 13, 2023
e1b2ad8
fix create button and search vertical spacing
ishpaul207 May 18, 2023
d01c9a7
fix formatting
tejveer777 May 18, 2023
828b56a
Merge branch 'develop' into resdesign-issues
tejveer777 May 18, 2023
c012fc4
Delete setupConfig.sh
tejveer777 May 18, 2023
d284183
Merge pull request #2 from ishpaul207/categories
tejveer777 May 18, 2023
14f1c0c
sidebar-formItems-alignment-issue
ishpaul777 Jun 28, 2023
837d4ac
Update SlugInput.js
ishpaul777 Jun 28, 2023
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 studio/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ RUN npm install --legacy-peer-deps
COPY . ./

# start app
CMD ["npm", "start"]
CMD ["npm", "start"]
22 changes: 11 additions & 11 deletions studio/src/components/GlobalNav/MobileSidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
children.map((route, childIndex) => {
return resource.includes(route.title.toLowerCase()) ? (
['Events', 'Permissions'].indexOf(route.title) !== -1 &&
route.isAdmin !== superOrg.is_admin ? null : (
route.isAdmin !== superOrg.is_admin ? null : (
<Menu.Item key={route.menuKey}>
<Link to={route.path} onClick={onClose}>
<span>{route.title}</span>
Expand Down Expand Up @@ -165,7 +165,7 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
<Avatar
src={
details[selected]?.fav_icon?.url?.[
window.REACT_APP_ENABLE_IMGPROXY ? 'proxy' : 'raw'
window.REACT_APP_ENABLE_IMGPROXY ? 'proxy' : 'raw'
] || degaImg
}
/>
Expand Down Expand Up @@ -209,7 +209,7 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
}}
>
<div>
<Link style={{ ...buttonStyle, color: '#1E1E1E' }} to='/settings' onClick={onClose}>
<Link style={{ ...buttonStyle, color: '#1E1E1E' }} to="/settings" onClick={onClose}>
<SettingOutlined />
</Link>
{applications.length > 0 ? (
Expand Down Expand Up @@ -279,14 +279,14 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
return menu.title === 'CORE' && !showCoreMenu
? null
: !menu.isService
? !menu.isAdmin
? getSubMenuItems(menu, index, Icon)
: permission.filter((each) => each.resource === 'admin').length > 0
? getSubMenuItems(menu, index, Icon)
: null
: services?.includes(maker(menu.title))
? getSubMenuItems(menu, index, Icon)
: null;
? !menu.isAdmin
? getSubMenuItems(menu, index, Icon)
: permission.filter((each) => each.resource === 'admin').length > 0
? getSubMenuItems(menu, index, Icon)
: null
: services?.includes(maker(menu.title))
? getSubMenuItems(menu, index, Icon)
: null;
})}
</Menu>
</Drawer>
Expand Down
2 changes: 1 addition & 1 deletion studio/src/components/List/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ function PostList({ actions, format, filters, onPagination, data, fetchPosts, qu
icon={<ThreeDotIcon style={{ color: '#858585' }} />}
onClick={(e) => {
e.stopPropagation();
alert('this do nothing');
// alert('this do nothing');
}}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions studio/src/components/Template/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function Template({ format }) {
};

const genExtra = () => (
<div onClick={(e) => e.stopPropagation()}>
<div>
<Button
onClick={() => {
setShow(!show);
Expand Down Expand Up @@ -81,7 +81,7 @@ function Template({ format }) {
if (posts.length === 0) return null;

return (
<Collapse defaultActiveKey={[]} style={{ marginBottom: '0.75rem' }}>
<Collapse defaultActiveKey={[]} style={{ marginBottom: '0.75rem' }} className="template-list">
<Panel header="Templates" key="1" extra={genExtra()}>
<List
grid={{ gutter: 16, column: 5 }}
Expand Down
5 changes: 5 additions & 0 deletions studio/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,8 @@ code {
.edit-form .ant-collapse-header {
font-weight: 600 !important;
}

.template-list .ant-collapse-header {
font-weight: 600 !important;
align-items: center !important;
}
30 changes: 16 additions & 14 deletions studio/src/pages/categories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,26 +140,28 @@ function Categories({ permission }) {
</Col>
<Col>
{searchFieldExpand ? (
<Row>
<Form.Item name="q">
<Input placeholder="Search categories" />
</Form.Item>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
<Row gutter={8}>
<Col>
<Form.Item name="q">
<Input placeholder="Search categories" />
{/**/}
</Form.Item>
</Col>
<Col>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
</Col>
</Row>
) : (
<Tooltip title="search">
<Button
type="text"
shape="circle"
onFocus={() => {
onClick={() => {
setSearchFieldExpand(true);
setTimeout(() => {
form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
}, 10000);
}}
icon={<SearchOutlined />}
/>
Expand All @@ -177,7 +179,7 @@ function Categories({ permission }) {
disabled={!(actions.includes('admin') || actions.includes('create'))}
type="primary"
icon={<PlusOutlined />}
style={{ marginBottom: '1.5rem' }}
style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
>
Create
</Button>
Expand Down
30 changes: 16 additions & 14 deletions studio/src/pages/claimants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,26 +139,28 @@ function Claimants({ permission }) {
</Col>
<Col>
{searchFieldExpand ? (
<Row>
<Form.Item name="q">
<Input placeholder="Search pages" />
</Form.Item>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
<Row gutter={8}>
<Col>
<Form.Item name="q">
<Input placeholder="Search claimants" />
{/**/}
</Form.Item>
</Col>
<Col>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
</Col>
</Row>
) : (
<Tooltip title="search">
<Button
shape="circle"
style={{ border: 'none' }}
onFocus={() => {
onClick={() => {
setSearchFieldExpand(true);
setTimeout(() => {
form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
}, 10000);
}}
icon={<SearchOutlined />}
/>
Expand All @@ -176,7 +178,7 @@ function Claimants({ permission }) {
disabled={!(actions.includes('admin') || actions.includes('create'))}
type="primary"
icon={<PlusOutlined />}
style={{ marginBottom: 16 }}
style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
>
Create
</Button>
Expand Down
30 changes: 16 additions & 14 deletions studio/src/pages/claims/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,26 +154,28 @@ function Claims({ permission }) {
</Col>
<Col>
{searchFieldExpand ? (
<Row>
<Form.Item name="q">
<Input placeholder="Search pages" />
</Form.Item>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
<Row gutter={8}>
<Col>
<Form.Item name="q">
<Input placeholder="Search claims" />
{/**/}
</Form.Item>
</Col>
<Col>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
</Col>
</Row>
) : (
<Tooltip title="search">
<Button
shape="circle"
type="text"
onFocus={() => {
onClick={() => {
setSearchFieldExpand(true);
setTimeout(() => {
form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
}, 10000);
}}
icon={<SearchOutlined />}
/>
Expand All @@ -191,7 +193,7 @@ function Claims({ permission }) {
disabled={!(actions.includes('admin') || actions.includes('create'))}
type="primary"
icon={<PlusOutlined />}
style={{ marginBottom: 16 }}
style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
>
Create
</Button>
Expand Down
30 changes: 16 additions & 14 deletions studio/src/pages/episodes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,27 +158,29 @@ function Episodes({ permission }) {
</Col>
<Col>
{searchFieldExpand ? (
<Row>
<Form.Item name="q">
<Input placeholder="Search podcasts" />
</Form.Item>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
<Row gutter={8}>
<Col>
<Form.Item name="q">
<Input placeholder="Search episodes" />
{/**/}
</Form.Item>
</Col>
<Col>
<Form.Item>
<Button htmlType="submit" icon={<SearchOutlined />}>
Search
</Button>
</Form.Item>
</Col>
</Row>
) : (
<Tooltip title="search">
<Button
shape="circle"
// style={{ border: 'none' }}
type="text"
onFocus={() => {
onClick={() => {
setSearchFieldExpand(true);
setTimeout(() => {
form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
}, 10000);
}}
icon={<SearchOutlined />}
/>
Expand All @@ -196,7 +198,7 @@ function Episodes({ permission }) {
disabled={!(actions.includes('admin') || actions.includes('create'))}
type="primary"
icon={<PlusOutlined />}
style={{ marginBottom: 16 }}
style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
>
Create
</Button>
Expand Down
49 changes: 28 additions & 21 deletions studio/src/pages/fact-checks/components/FactCheckForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
setClaimCreatedFlag(false);
}

useEffect(() => {}, [details, loading]);
useEffect(() => { }, [details, loading]);

const [drawerVisible, setDrawerVisible] = useState(false);
const showDrawer = () => {
Expand Down Expand Up @@ -135,8 +135,8 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
values.status = status;
values.status === 'publish'
? (values.published_date = values.published_date
? dayjs(values.published_date).format('YYYY-MM-DDTHH:mm:ssZ')
: getCurrentDate())
? dayjs(values.published_date).format('YYYY-MM-DDTHH:mm:ssZ')
: getCurrentDate())
: (values.published_date = null);
onCreate(values);
};
Expand Down Expand Up @@ -299,8 +299,8 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
</p>
) : null}
{form.getFieldValue('claims') &&
form.getFieldValue('claims').length > 0 &&
!loading ? (
form.getFieldValue('claims').length > 0 &&
!loading ? (
<Form.Item name="claimOrder">
<ClaimList
ids={form.getFieldValue('claims')}
Expand All @@ -318,7 +318,7 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
initialValue={data.description_html}
/>
<Drawer
title={<h4 style={{ fontWeight: 'bold' }}>Post Settings</h4>}
title={<h4 style={{ fontWeight: 'bold', marginTop: "0.5rem" }}>Post Settings</h4>}
placement="right"
closable={true}
onClose={onClose}
Expand All @@ -329,8 +329,9 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
<Form.Item name="featured_medium_id" label="Featured Image">
<MediaSelector />
</Form.Item>
<Form.Item name="claims" label="Claims" key={!visible}>
<Selector mode="multiple" display={'claim'} action="Claims" />
<Form.Item name="claims" key={!visible}>
<label>Claims</label>
<Selector mode="multiple" display={'claim'} action="Claims" style={{ width: '100%', marginTop: "0.5rem" }} />
</Form.Item>
<Form.Item>
<Button type="primary" onClick={showModal}>
Expand All @@ -339,26 +340,32 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
</Form.Item>
<Form.Item
name="excerpt"
label="Excerpt"
rules={[{ max: 5000, message: 'Excerpt must be a maximum of 5000 characters.' }]}
>
<Input.TextArea rows={4} placeholder="Excerpt" style={{ fontSize: 'medium' }} />
<label>Excerpt</label>
<Input.TextArea rows={4} placeholder="Excerpt"
style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
</Form.Item>
<Form.Item name="subtitle" label="Subtitle">
<Input placeholder="Subtitle" style={{ fontSize: 'medium' }} />
<Form.Item name="subtitle">
<label>Subtitle</label>
<Input placeholder="Subtitle" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
</Form.Item>
<SlugInput />
<Form.Item name="published_date" label="Published Date">
<DatePicker />
<SlugInput style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }}/>
<Form.Item name="published_date" >
<label>Publish Date</label>
<DatePicker style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
</Form.Item>
<Form.Item name="categories" label="Categories">
<Selector mode="multiple" action="Categories" createEntity="Category" />
<Form.Item name="categories">
<label>Categories</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://ant.design/components/form . cant we use the layout prop instead of manually adding labels .

Screenshot 2023-06-28 at 4 58 34 PM

Copy link
Contributor

@ishpaul777 ishpaul777 Jun 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/ishpaul207/dega/blob/resdesign-issues/studio/src/pages/fact-checks/components/FactCheckForm.js#L225C7-L242

used already but not working

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it an issue on antd or on our end ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Faced this issue quite a few times couldn't figure out reason,

<Selector mode="multiple" action="Categories" createEntity="Category" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
</Form.Item>
<Form.Item name="tags" label="Tags">
<Selector mode="multiple" action="Tags" createEntity="Tag" />
<Form.Item name="tags">
<label>Tags</label>
<Selector mode="multiple" action="Tags" createEntity="Tag" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
</Form.Item>
<Form.Item name="authors" label="Authors">
<Selector mode="multiple" display={'display_name'} action="Authors" />
<Form.Item name="authors">
<label>Authors</label>
<Selector mode="multiple" display={'display_name'} action="Authors" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
</Form.Item>
<Form.Item>
<Button style={{ width: '100%' }} onClick={() => setMetaDrawer(true)}>
Expand Down
Loading