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

Css refactoring #401

Merged
merged 14 commits into from
Jun 14, 2023
Merged

Css refactoring #401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d2c90f9
gitignore & package-lock
fritzSF May 22, 2023
01c877b
Merge branch 'develop' of https://github.com/superdesk/newsroom-core …
fritzSF May 24, 2023
08fca24
fix
fritzSF May 24, 2023
22e17da
large CSS refactoring
fritzSF May 31, 2023
6561a9b
Merge branch 'css-refactoring' of https://github.com/fritzsf/newsroom…
pavlovicnemanja May 31, 2023
cd1ee88
lint fix
fritzSF May 31, 2023
e1631c1
build fail fix
fritzSF May 31, 2023
f90629f
fixed comments
fritzSF Jun 1, 2023
06070c4
Big CSS refactoring 2
fritzSF Jun 8, 2023
a994c88
Topics management
fritzSF Jun 13, 2023
7528b93
merged with develop
fritzSF Jun 13, 2023
21d8bcc
lint fix
fritzSF Jun 13, 2023
74cc23d
lint-fix 2
fritzSF Jun 13, 2023
898df67
Fixes based on comments
fritzSF Jun 13, 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
10 changes: 5 additions & 5 deletions assets/agenda/components/AgendaCoverageRequest.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ class AgendaCoverageRequest extends React.Component {
render() {
return (<div className='collapsible'>
<a href='#' className='collapsible__link' onClick={this.onRequestClick}>
<i className={classNames('icon-small--arrow-down me-1', {'rotate-90-ccw': this.state.opened})}></i>
{gettext('Coverage inquiries')}
<i className={classNames('icon-small--arrow-down me-1', {'rotate-90-ccw': !this.state.opened})}></i>
<span>{gettext('Coverage inquiries')}</span>
</a>
<div className={classNames({'collapsible__form': !this.state.opened})}>
<div className='form-group'>
Expand All @@ -49,16 +49,16 @@ class AgendaCoverageRequest extends React.Component {
></textarea>
</div>
</div>
<div className='form-group'>
<div className='nh-button__group'>
<input
type='button'
className='btn btn-outline-secondary'
className='nh-button nh-button--secondary'
value={gettext('Cancel')}
onClick={this.reset}
></input>
<input
type='button'
className='btn btn-outline-primary ms-2'
className='nh-button nh-button--primary'
value={gettext('Submit inquiry')}
disabled={!this.state.message}
onClick={this.requestCoverage}
Expand Down
8 changes: 4 additions & 4 deletions assets/agenda/components/AgendaDateButtons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function AgendaDateButtons({selectDate, activeDate, activeGrouping}) {
<button
key='today'
type='button'
className='btn btn-outline-primary btn-sm me-3'
className='nh-button nh-button--secondary nh-button--small me-3'
onClick={() => selectDate(Date.now(), 'day')}>
{gettext('Today')}
</button>,
Expand All @@ -33,21 +33,21 @@ function AgendaDateButtons({selectDate, activeDate, activeGrouping}) {
<button
key='D'
type='button'
className={classnames('btn btn-outline-primary btn-sm me-2', {'active': activeGrouping === 'day'})}
className={classnames('nh-button nh-button--secondary nh-button--small me-2', {'active': activeGrouping === 'day'})}
onClick={() => selectDate(activeDate, 'day')}>
{gettext('D')}
</button>,
<button
key='W'
type='button'
className={classnames('btn btn-outline-primary btn-sm me-2', {'active': activeGrouping === 'week'})}
className={classnames('nh-button nh-button--secondary nh-button--small me-2', {'active': activeGrouping === 'week'})}
onClick={() => selectDate(activeDate, 'week')}>
{gettext('W')}
</button>,
<button
key='M'
type='button'
className={classnames('btn btn-outline-primary btn-sm', {'active': activeGrouping === 'month'})}
className={classnames('nh-button nh-button--secondary nh-button--small', {'active': activeGrouping === 'month'})}
onClick={() => selectDate(activeDate, 'month')}>
{gettext('M')}
</button>]);
Expand Down
5 changes: 2 additions & 3 deletions assets/agenda/components/AgendaFilterButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,14 @@ function AgendaFilterButton({filter, activeFilter, autoToggle, onClick, getFilte
return (<button
id={filter.field}
type='button'
className={classNames('btn btn-outline-primary btn-sm d-flex align-items-center px-2 ms-2',
{'active': isActive})}
className={classNames('nh-dropdown-button ms-2',{' nh-dropdown-button--active': isActive})}
data-bs-toggle={autoToggle ? 'dropdown' : undefined}
aria-haspopup='true'
aria-expanded='false'
onClick={onClick} >
<i className={`${filter.icon} d-md-none`}></i>
<span className='d-none d-md-block'>{filterLabel(filter, activeFilter, isActive)}</span>
<i className={classNames('icon-small--arrow-down ms-1', {'icon--white': isActive})}></i>
<i className='icon-small--arrow-down'></i>
</button>);
}

Expand Down
2 changes: 1 addition & 1 deletion assets/agenda/components/LocationFilter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ export class LocationFilter extends React.Component {
return (
<div
key="location"
className="btn-group"
className="d-inline-flex position-relative"
ref={(ref) => this.dom.container = ref}
>
<DropdownFilterButton
Expand Down
12 changes: 6 additions & 6 deletions assets/cards/components/EditCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,14 @@ class EditCard extends React.Component {
<div className='list-item__preview-footer'>
<input
type='button'
className='btn btn-outline-primary'
value={gettext('Save')}
onClick={this.props.onSave}/>
<input
type='button'
className='btn btn-outline-secondary'
className='nh-button nh-button--secondary'
value={gettext('Delete')}
onClick={this.props.onDelete}/>
<input
type='button'
className='nh-button nh-button--primary'
value={gettext('Save')}
onClick={this.props.onSave}/>
</div>
</form>
</div>
Expand Down
126 changes: 74 additions & 52 deletions assets/companies/components/CompanyPermissions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,30 @@ function CompanyPermissions({
data-test-id="group--general"
className="form-group"
>
<label>{gettext('General')}</label>
<div className="list-item__preview-collapsible list-item__preview-collapsible--read-only list-item__preview-collapsible--small mb-2">
<div className="list-item__preview-collapsible-header">
<i className="icon--arrow-right icon--rotate-90"></i>
<h3>{gettext('General')}</h3>
</div>
</div>
<ul className="list-unstyled">
<li>
<li className="item--min-height-40">
<CheckboxInput
name="archive_access"
label={gettext('Grant Access To Archived {{wire}}', sectionNames)}
value={company.archive_access === true}
onChange={onChange}
/>
</li>
<li>
<li className="item--min-height-40">
<CheckboxInput
name="events_only"
label={gettext('Events Only Access')}
value={company.events_only === true}
onChange={onChange}
/>
</li>
<li className="item--min-height-40">
<CheckboxInput
name="restrict_coverage_info"
label={gettext('Restrict Coverage Info')}
Expand All @@ -61,10 +68,15 @@ function CompanyPermissions({
className="form-group"
key="sections"
>
<label>{gettext('Sections')}</label>
<div className="list-item__preview-collapsible list-item__preview-collapsible--read-only list-item__preview-collapsible--small mb-2">
<div className="list-item__preview-collapsible-header">
<i className="icon--arrow-right icon--rotate-90"></i>
<h3>{gettext('Sections')}</h3>
</div>
</div>
<ul className="list-unstyled">
{sections.map((item) => (
<li key={item._id}>
<li className="item--min-height-40" key={item._id}>
<CheckboxInput
name={item._id}
label={item.name}
Expand All @@ -82,57 +94,67 @@ function CompanyPermissions({
key="products"
>
{sections.filter((section) => (company.sections || {})[section._id] === true).map((section) => (
[<label key={`${section.id}label`}>{gettext('Products')} {`(${section.name})`}</label>,
<ul key={`${section.id}product`} className="list-unstyled">
{products.filter((p) => (p.product_type || 'wire').toLowerCase() === section._id.toLowerCase())
.map((product) => (
<li key={product._id}>
<div className="input-group">
<div className="input-group-text border-0 bg-transparent">
<CheckboxInput
name={product._id}
label={product.name}
value={productsEnabled.includes(product._id)}
onChange={() => {
toggleCompanyProduct(
[<div key={`${section.id}product`} className="list-item__preview-collapsible list-item__preview-collapsible--read-only list-item__preview-collapsible--small mb-2">
<div className="list-item__preview-collapsible-header">
<i className="icon--arrow-right icon--rotate-90"></i>
<h3 key={`${section.id}label`}>{gettext('Products')} {`(${section.name})`}</h3>
</div>
</div>,

<div key={`${section.id}product`} className="products-list__heading d-flex justify-content-between align-items-center">
<span className="item--left">{gettext('Product')}</span>
<span className="item--right">{gettext('Number of seats')}</span>
</div>,
<ul key={`${section.id}product`} className="list-unstyled">
{products.filter((p) => (p.product_type || 'wire').toLowerCase() === section._id.toLowerCase())
.map((product) => (
<li key={product._id}>
<div className="products-list__product">
<div className="products-list__product-select">
<CheckboxInput
name={product._id}
label={product.name}
value={productsEnabled.includes(product._id)}
onChange={() => {
toggleCompanyProduct(
product._id,
section._id,
!productsEnabled.includes(product._id)
);
}}
/>
</div>
{!productsEnabled.includes(product._id) ? null : (
<div className="products-list__value">
<label
className="a11y-only"
htmlFor={`${product._id}_seats`}
>
{gettext('Seats:')}
</label>
<input
data-test-id={`field-${product._id}_seats`}
type="number"
id={`${product._id}_seats`}
name={`${product._id}_seats`}
className="form-control form-control--small form-control--right form-control--compact"
style={{maxWidth: '60px'}}
min="0"
tabIndex="0"
value={(seats[product._id] || 0).toString()}
onChange={(event) => {
updateCompanySeats(
product._id,
section._id,
!productsEnabled.includes(product._id)
parseInt(event.target.value)
);
}}
/>
</div>
{!productsEnabled.includes(product._id) ? null : (
<React.Fragment>
<label
className="input-group-text border-0 bg-transparent ms-auto"
htmlFor={`${product._id}_seats`}
>
{gettext('Seats:')}
</label>
<input
data-test-id={`field-${product._id}_seats`}
type="number"
id={`${product._id}_seats`}
name={`${product._id}_seats`}
className="form-control"
style={{maxWidth: '100px'}}
min="0"
tabIndex="0"
value={(seats[product._id] || 0).toString()}
onChange={(event) => {
updateCompanySeats(
product._id,
parseInt(event.target.value)
);
}}
/>
</React.Fragment>
)}
</div>
</li>
))}
</ul>]
)}
</div>
</li>
))}
</ul>]
))}
</div>

Expand All @@ -141,7 +163,7 @@ function CompanyPermissions({
<input
data-test-id="save-btn"
type='submit'
className='btn btn-outline-primary'
className='nh-button nh-button--primary'
value={gettext('Save')}
/>
</div>
Expand Down
14 changes: 7 additions & 7 deletions assets/companies/components/EditCompanyDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,19 +129,19 @@ export function EditCompanyDetails({company, companyTypes, users, errors, onChan

</div>
<div className='list-item__preview-footer'>
{company._id && <input
type='button'
className='nh-button nh-button--secondary'
value={gettext('Delete')}
onClick={deleteCompany}
/>}
<input
data-test-id="save-btn"
type='button'
className='btn btn-outline-primary'
className='nh-button nh-button--primary'
value={gettext('Save')}
onClick={save}
/>
{company._id && <input
type='button'
className='btn btn-outline-secondary'
value={gettext('Delete')}
onClick={deleteCompany}
/>}
</div>
</form>
);
Expand Down
4 changes: 2 additions & 2 deletions assets/company-admin/components/CompanyAdminProductSeatRequestModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ class CompanyAdminProductSeatRequestModalComponent extends React.Component {
clickOutsideToClose={true}
>
<form onSubmit={(event) => {event.preventDefault();}}>
<div className="tags-list">
<div className="tags-list mb-3">
<button
className="icon-button icon-button--primary icon-button--small icon-button--bordered"
type="button"
Expand All @@ -111,7 +111,7 @@ class CompanyAdminProductSeatRequestModalComponent extends React.Component {
aria-expanded="false"
aria-label="Add Product"
>
<i className="icon--plus">+</i>
<i className="icon--plus"></i>
</button>
<ul className="dropdown-menu">
{sectionProducts.map((section, index) => (
Expand Down
Loading