Permalink
Browse files

fix(ZNTA-2143) WIP: covert frontend css to SUITCSS where it won't cau…

…se overrides with react-bootstrap components
  • Loading branch information...
kathryngo committed Sep 7, 2017
1 parent 565bc74 commit 8b4c880ea59b2dbaa27651acd95615daeaf56a6e
Showing with 1,161 additions and 1,192 deletions.
  1. +3 −3 ...zanata-frontend/src/frontend/app/components/DraggableVersionPanels/DraggableVersionPanels.test.js
  2. +3 −3 server/zanata-frontend/src/frontend/app/components/DraggableVersionPanels/index.js
  3. +2 −2 server/zanata-frontend/src/frontend/app/components/EditableText/EditableText.story.js
  4. +2 −2 server/zanata-frontend/src/frontend/app/components/EditableText/index.js
  5. +1 −1 server/zanata-frontend/src/frontend/app/components/LoaderText/index.js
  6. +4 −4 server/zanata-frontend/src/frontend/app/components/LogoLoader/index.js
  7. +1 −1 server/zanata-frontend/src/frontend/app/components/Modal/Modal.story.js
  8. +1 −1 server/zanata-frontend/src/frontend/app/components/Nav/NavItem.jsx
  9. +1 −1 server/zanata-frontend/src/frontend/app/components/Nav/index.jsx
  10. +3 −3 server/zanata-frontend/src/frontend/app/components/Notification/component.js
  11. +6 −6 server/zanata-frontend/src/frontend/app/components/RejectionsForm/index.js
  12. +1 −1 server/zanata-frontend/src/frontend/app/components/Sidebar/Sidebar.story.js
  13. +4 −4 server/zanata-frontend/src/frontend/app/components/Sidebar/index.jsx
  14. +1 −1 server/zanata-frontend/src/frontend/app/components/TMX/TMXExportModal.js
  15. +19 −19 server/zanata-frontend/src/frontend/app/components/VersionTMMergeModal/VersionTMMergeModal.story.js
  16. +22 −22 server/zanata-frontend/src/frontend/app/components/foundation.story.js
  17. +2 −2 server/zanata-frontend/src/frontend/app/containers/Admin/index.js
  18. +1 −1 server/zanata-frontend/src/frontend/app/containers/App.js
  19. +5 −5 server/zanata-frontend/src/frontend/app/containers/Explore/GroupTeaser.jsx
  20. +2 −2 server/zanata-frontend/src/frontend/app/containers/Explore/LanguageTeamTeaser.jsx
  21. +5 −5 server/zanata-frontend/src/frontend/app/containers/Explore/ProjectTeaser.jsx
  22. +1 −1 server/zanata-frontend/src/frontend/app/containers/Explore/TeaserList.jsx
  23. +6 −6 server/zanata-frontend/src/frontend/app/containers/Explore/TeaserListHeader.jsx
  24. +1 −1 server/zanata-frontend/src/frontend/app/containers/Explore/UserTeaser.jsx
  25. +5 −5 server/zanata-frontend/src/frontend/app/containers/Explore/index.js
  26. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/DeleteAllEntriesModal.jsx
  27. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/DeleteEntryModal.jsx
  28. +6 −6 server/zanata-frontend/src/frontend/app/containers/Glossary/Entry.js
  29. +6 −6 server/zanata-frontend/src/frontend/app/containers/Glossary/EntryModal.js
  30. +2 −2 server/zanata-frontend/src/frontend/app/containers/Glossary/ExportModal.js
  31. +7 −7 server/zanata-frontend/src/frontend/app/containers/Glossary/Header.jsx
  32. +5 −5 server/zanata-frontend/src/frontend/app/containers/Glossary/ImportModal.js
  33. +4 −4 server/zanata-frontend/src/frontend/app/containers/Glossary/NewEntryModal.js
  34. +21 −21 server/zanata-frontend/src/frontend/app/containers/Glossary/ViewHeader.js
  35. +12 −12 server/zanata-frontend/src/frontend/app/containers/Glossary/index.js
  36. +2 −2 server/zanata-frontend/src/frontend/app/containers/Languages/DeleteEntry.js
  37. +4 −4 server/zanata-frontend/src/frontend/app/containers/Languages/Entry.js
  38. +1 −1 server/zanata-frontend/src/frontend/app/containers/Languages/NewLanguageModal.js
  39. +7 −7 server/zanata-frontend/src/frontend/app/containers/Languages/index.js
  40. +1 −1 server/zanata-frontend/src/frontend/app/containers/Project/index.js
  41. +6 −6 server/zanata-frontend/src/frontend/app/containers/ProjectVersion/TMMergeModal.js
  42. +4 −4 server/zanata-frontend/src/frontend/app/containers/ProjectVersion/index.css
  43. +1 −1 server/zanata-frontend/src/frontend/app/containers/ProjectVersion/index.js
  44. +1 −1 server/zanata-frontend/src/frontend/app/containers/UserProfile/CalendarMonthMatrix.jsx
  45. +2 −2 server/zanata-frontend/src/frontend/app/containers/UserProfile/CalendarPeriodHeading.jsx
  46. +2 −2 server/zanata-frontend/src/frontend/app/containers/UserProfile/CategoryItemMatrix.jsx
  47. +1 −1 server/zanata-frontend/src/frontend/app/containers/UserProfile/DayMatrix.jsx
  48. +2 −2 server/zanata-frontend/src/frontend/app/containers/UserProfile/FilterableMatrixTable.jsx
  49. +4 −4 server/zanata-frontend/src/frontend/app/containers/UserProfile/RecentContributions.jsx
  50. +9 −9 server/zanata-frontend/src/frontend/app/containers/UserProfile/index.jsx
  51. +17 −17 server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css
  52. +2 −2 ...ata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/LocalProjectDetailPanel.js
  53. +1 −1 server/zanata-frontend/src/frontend/app/jsf/JsfRoot.js
  54. +912 −943 server/zanata-frontend/src/frontend/app/styles/style.less
  55. +1 −1 server/zanata-frontend/src/frontend/index.html
  56. +1 −1 server/zanata-war/src/main/webapp/WEB-INF/template/template.xhtml
  57. +2 −2 server/zanata-war/src/main/webapp/a/index.xhtml
  58. +1 −1 server/zanata-war/src/main/webapp/language/language.xhtml
  59. +1 −1 server/zanata-war/src/main/webapp/project/project.xhtml
  60. +4 −4 server/zanata-war/src/main/webapp/resources/assets/css/style.css
  61. +4 −4 server/zanata-war/src/main/webapp/resources/fontello/demo.html
  62. +1 −1 server/zanata-war/src/main/webapp/version-group/version_group.xhtml
@@ -25,12 +25,12 @@ describe('DraggableVersionPanels', () => {
const expected = ReactDOMServer.renderToStaticMarkup(
<ListGroupItem className='v' >
<DragHandle />
{'ver1'} <span className='text-muted'> {'meikai1'}
{'ver1'} <span className='u-textMuted'> {'meikai1'}
</span> <LockIcon status={'ACTIVE'} />
{" "}
<Button bsSize='xsmall' className='close rm-version-btn'
onClick={callback}>
<Icon name='cross' className='n2 crossicon' title='remove version' />
<Icon name='cross' className='n2 iconCross' title='remove version' />
</Button>
</ListGroupItem>
)
@@ -63,7 +63,7 @@ describe('DraggableVersionPanels', () => {
<span className="vmerge-adjtitle vmerge-title">
Adjust priority of selected versions
</span><br />
<span className="text-muted vmerge-adjsub">(best first)</span>
<span className="u-textMuted vmerge-adjsub">(best first)</span>
<OverlayTrigger placement='top' overlay={tooltipSort}>
<Icon name='info' className='s0 info-icon' />
</OverlayTrigger>
@@ -39,12 +39,12 @@ export class Item extends Component {
const { value: { version, projectSlug } } = this.props
return <ListGroupItem className='v' >
<DragHandle />
{version.id} <span className='text-muted'> {projectSlug}
{version.id} <span className='u-textMuted'> {projectSlug}
</span> <LockIcon status={version.status} />
{" "}
<Button bsSize='xsmall' className='close rm-version-btn'
onClick={this.removeVersion}>
<Icon name='cross' className='n2 crossicon' title='remove version' />
<Icon name='cross' className='n2 iconCross' title='remove version' />
</Button>
</ListGroupItem>
}
@@ -67,7 +67,7 @@ class Items extends Component {
<span className='vmerge-adjtitle vmerge-title'>
Adjust priority of selected versions
</span><br />
<span className='text-muted vmerge-adjsub'>
<span className='u-textMuted vmerge-adjsub'>
(best first)
</span>
<OverlayTrigger placement='top' overlay={tooltipSort}>
@@ -5,7 +5,7 @@ import { EditableText } from '../'
storiesOf('EditableText', module)
.add('editing', () => (
<EditableText
className='editable textInput text-state-classes'
className='editable textInput textState'
maxLength={255}
editable={true}
editing={true}
@@ -16,7 +16,7 @@ storiesOf('EditableText', module)
))
.add('not editing', () => (
<EditableText
className='editable textInput text-state-classes'
className='editable textInput textState'
maxLength={255}
editable={true}
editing={false}
@@ -83,9 +83,9 @@ class EditableText extends Component {
}
const emptyText = editable ? placeholder : emptyReadOnlyText
const content = children ||
<span className='text-muted'>{emptyText}</span>
<span className='u-textMuted'>{emptyText}</span>
return (
<Row className='text-input text-state-classes text'
<Row className='textInput textState text'
onClick={this.handleClick} title={title}>
{content}
</Row>
@@ -9,7 +9,7 @@ const LoaderText = ({
...props
}) => {
return (
<span className='loader-text' {...props}>
<span className='loaderText' {...props}>
{loading
? <span>{loadingText}<Loader /></span>
: children
@@ -31,14 +31,14 @@ class LogoLoader extends React.Component {
/* eslint-disable max-len */
return (
<span className={className} title='Zanata'>
<span className='LogoLoader-logo'>
<svg className='LogoLoader-svg LogoLoader-circle' viewBox='0 0 512 512'>
<span className='logoLoader-logo'>
<svg className='logoLoader-svg LogoLoader-circle' viewBox='0 0 512 512'>
<g><path d='M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z' id='Circle'></path></g>
</svg>
<svg className='LogoLoader-svg LogoLoader-circlePulse' viewBox='0 0 512 512'>
<svg className='logoLoader-svg LogoLoader-circlePulse' viewBox='0 0 512 512'>
<g><path d='M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z' id='Circle'></path></g>
</svg>
<svg className='LogoLoader-svg LogoLoader-z' viewBox='0 0 512 512'>
<svg className='logoLoader-svg logoLoader-z' viewBox='0 0 512 512'>
<g>
<g id='Shadow' transform='translate(26.377192, 25.222456)'>
<mask id='mask-2' fill='white'>
@@ -234,7 +234,7 @@ storiesOf('Modal', module)
</Button>
</OverlayTrigger>
</p>
<p className='text-warning'>* All translations of documents for
<p className='u-textWarning'>* All translations of documents for
the selected source language will be included.
</p>
</span>
@@ -28,7 +28,7 @@ const NavItem = ({
cssClass += (small ? ' small' : '')
cssClass += (isSearchLink ? ' search' : '')
const text = isLogo ? (<span className='nav-logo'>{title}</span>) : title
const text = isLogo ? (<span className='navBar-navLogo'>{title}</span>) : title
const inverted = false
const child = isLogo
@@ -137,7 +137,7 @@ const Nav = ({
{...props}
id='nav'
name={username}
className='nav-bar'>
className='navBar'>
{items.map((item, itemId) => {
if (((item.auth === 'public') || (item.auth === auth) ||
(item.auth === 'loggedin' && admin))) {
@@ -58,8 +58,8 @@ class Notification extends Component {
<Modal.Title>
<Row
bsStyle={severityClass}
className='notify-row'>
<Icon name={icon} className='s2 list-inline' />
className='rowNotify'>
<Icon name={icon} className='s2 listInline' />
<span>Notification</span>
</Row>
</Modal.Title>
@@ -69,7 +69,7 @@ class Notification extends Component {
{message}
</div>
{!isEmpty(details) &&
(<div className='notification-modal-content'>
(<div className='modalNotification-content'>
{details}
</div>)}
</Modal.Body>
@@ -33,7 +33,7 @@ class RejectionsForm extends Component {
<span className={this.props.textState}>{this.props.priority}</span>
)
return (
<Form className='rejections' inline>
<Form className='rejectionsForm' inline>
<FormGroup className='flex-grow1' controlId='formInlineCriteria'>
<ControlLabel>Criteria</ControlLabel><br/>
<TextInput multiline={true} editable={this.props.editable}
@@ -43,18 +43,18 @@ class RejectionsForm extends Component {
<ControlLabel>Priority</ControlLabel><br/>
<DropdownButton bsStyle='default' title={title}
id='dropdown-basic'>
<MenuItem><span className='text-info'>Minor</span></MenuItem>
<MenuItem><span className='text-warning'>Major</span></MenuItem>
<MenuItem><span className='text-danger'>Critical</span></MenuItem>
<MenuItem><span className='u-textInfo'>Minor</span></MenuItem>
<MenuItem><span className='u-textWarning'>Major</span></MenuItem>
<MenuItem><span className='u-textDanger'>Critical</span></MenuItem>
</DropdownButton>
</FormGroup>
<FormGroup controlId='formInlineButtonEdit'>
<ControlLabel>&nbsp;</ControlLabel><br/>
<Button bsStyle='primary' className={this.props.className}>
<Icon name='edit' className='s0 editicon'/>
<Icon name='edit' className='s0 iconEdit'/>
</Button>
<Button bsStyle='danger' className={this.props.className}>
<Icon name='trash' className='s0 editicon'/>
<Icon name='trash' className='s0 iconEdit'/>
</Button>
</FormGroup>
</Form>
@@ -6,7 +6,7 @@ storiesOf('Sidebar', module)
.add('default', () => (
<div>
<Sidebar />
<div className='flextab'>
<div className='flexTab'>
<p>This sidebar example has the active tag applied to both the People
and Languages pages to provide examples of how this design handles
sidebar links.</p>
@@ -78,13 +78,13 @@ class Sidebar extends Component {
<p><span className='percent'>10%</span> translated</p>
</div>
<ProgressBar>
<ProgressBar className='progress-bar-translated'
<ProgressBar className='progressBar-translated'
now={10} key={1} />
<ProgressBar className='progress-bar-fuzzy'
<ProgressBar className='progressBar-fuzzy'
now={7} key={2} />
<ProgressBar className='progress-bar-rejected'
<ProgressBar className='progressBar-rejected'
now={3} key={3} />
<ProgressBar className='progress-bar-approved'
<ProgressBar className='progressBar-approved'
now={10} key={4} />
</ProgressBar>
<Nav className='v-links'
@@ -163,7 +163,7 @@ class TMXExportModal extends Component {
{srcLangRows}
</tbody>
</Table>
<p className='text-warning'>
<p className='u-textWarning'>
{warningText}
</p>
</span>
@@ -54,7 +54,7 @@ storiesOf('VersionTMMergeModal', module)
show={true}
onHide={action('onHide')}>
<Modal.Header>
<Modal.Title><span className="text-new-blue">Version TM Merge</span></Modal.Title>
<Modal.Title><span className="u-textNewBlue">Version TM Merge</span></Modal.Title>
</Modal.Header>
<Modal.Body>
<p className="intro">
@@ -103,7 +103,7 @@ storiesOf('VersionTMMergeModal', module)
</Col>
<Col xs={12} className='vmerge-row'>
<p className="lead">For every potential translation:</p>
<span className="text-new-blue">If text is less than </span>
<span className="u-textNewBlue">If text is less than </span>
<DropdownButton bsStyle='default' title='80%'
id='language-dropdown-basic'
className='vmerge-ddown'>
@@ -113,7 +113,7 @@ storiesOf('VersionTMMergeModal', module)
eventKey='1'>90%</MenuItem>
<MenuItem onClick={action('onClick')}
eventKey='1'>80%</MenuItem>
</DropdownButton><span className="text-new-blue"> &nbsp;similar, don't use it.
</DropdownButton><span className="u-textNewBlue"> &nbsp;similar, don't use it.
</span>
</Col>
<Col xs={12} className='vmerge-boxes'>
@@ -203,7 +203,7 @@ storiesOf('VersionTMMergeModal', module)
<span className="vmerge-adjtitle vmerge-title">
Adjust priority of selected versions
</span><br/>
<span className="text-muted vmerge-adjsub">(best first)
<span className="u-textMuted vmerge-adjsub">(best first)
<OverlayTrigger placement='right' overlay={tooltip2}>
<Button bsStyle="link" className="tooltip-btn">
<Icon name="info" className="s0 info-icon"/>
@@ -214,22 +214,22 @@ storiesOf('VersionTMMergeModal', module)
<ListGroupItem className='v'>
<Icon name='menu' className='n1 drag-handle'/>
Version 1 <Icon name='locked' className='s0 icon-locked'/>
<br/><span className='text-muted'> Project A
<br/><span className='u-textMuted'> Project A
</span>
{" "}
<Button bsSize='xsmall' className='close rm-version-btn'>
<Icon name='cross' className='n2 crossicon'
<Icon name='cross' className='n2 iconCross'
title='remove version'/>
</Button>
</ListGroupItem>
<ListGroupItem className='v'>
<Icon name='menu' className='n1 drag-handle'/>
Version 2 <Icon name='locked' className='s0 icon-locked'/>
<br/><span className='text-muted'> Project A
<br/><span className='u-textMuted'> Project A
</span>
{" "}
<Button bsSize='xsmall' className='close rm-version-btn'>
<Icon name='cross' className='n2 crossicon'
<Icon name='cross' className='n2 iconCross'
title='remove version'/>
</Button>
</ListGroupItem>
@@ -294,7 +294,7 @@ storiesOf('VersionTMMergeModal', module)
<Col xs={12}>
<Well>
<p>Translations which satisfy all conditions will copy as
<span className="text-bold text-success"> translated</span>.
<span className="text-bold u-textSuccess"> translated</span>.
</p>
</Well>
</Col>
@@ -357,7 +357,7 @@ storiesOf('VersionTMMergeModal', module)
show={true}
onHide={action('onHide')}>
<Modal.Header>
<Modal.Title><span className="text-new-blue">Version TM Merge</span></Modal.Title>
<Modal.Title><span className="u-textNewBlue">Version TM Merge</span></Modal.Title>
</Modal.Header>
<Modal.Body>
<p className="intro">
@@ -406,7 +406,7 @@ storiesOf('VersionTMMergeModal', module)
</Col>
<Col xs={12} className='vmerge-row'>
<p className="lead">For every potential translation:</p>
<span className="text-new-blue">If text is less than </span>
<span className="u-textNewBlue">If text is less than </span>
<DropdownButton bsStyle='default' title='80%'
id='language-dropdown-basic'
className='vmerge-ddown'>
@@ -416,7 +416,7 @@ storiesOf('VersionTMMergeModal', module)
eventKey='1'>90%</MenuItem>
<MenuItem onClick={action('onClick')}
eventKey='1'>80%</MenuItem>
</DropdownButton><span className="text-new-blue"> &nbsp;similar, don't use it.
</DropdownButton><span className="u-textNewBlue"> &nbsp;similar, don't use it.
</span>
</Col>
<Col xs={12} className='vmerge-boxes'>
@@ -503,7 +503,7 @@ storiesOf('VersionTMMergeModal', module)
</div>
</Col>
<Col xs={6}>
<span className="no-v text-muted">Please select versions to sort<br/>
<span className="no-v u-textMuted">Please select versions to sort<br/>
<Icon name="version" className="s8"/></span>
</Col>
<Col xs={12} className="validations">
@@ -565,7 +565,7 @@ storiesOf('VersionTMMergeModal', module)
<Col xs={12}>
<Well>
<p>Translations which satisfy all conditions will copy as
<span className="text-bold text-success"> translated</span>.
<span className="text-bold u-textSuccess"> translated</span>.
</p>
</Well>
</Col>
@@ -628,7 +628,7 @@ storiesOf('VersionTMMergeModal', module)
show={true}
onHide={action('onHide')}>
<Modal.Header>
<Modal.Title><span className="text-new-blue">Version TM Merge</span></Modal.Title>
<Modal.Title><span className="u-textNewBlue">Version TM Merge</span></Modal.Title>
</Modal.Header>
<Modal.Body>
<p className="intro">
@@ -677,7 +677,7 @@ storiesOf('VersionTMMergeModal', module)
</Col>
<Col xs={12} className='vmerge-row'>
<p className="lead">For every potential translation:</p>
<span className="text-new-blue">If text is less than </span>
<span className="u-textNewBlue">If text is less than </span>
<DropdownButton bsStyle='default' title='80%'
id='language-dropdown-basic'
className='vmerge-ddown'>
@@ -687,7 +687,7 @@ storiesOf('VersionTMMergeModal', module)
eventKey='1'>90%</MenuItem>
<MenuItem onClick={action('onClick')}
eventKey='1'>80%</MenuItem>
</DropdownButton><span className="text-new-blue"> &nbsp;similar, don't use it.
</DropdownButton><span className="u-textNewBlue"> &nbsp;similar, don't use it.
</span>
</Col>
<Col xs={12} className='vmerge-boxes'>
@@ -774,7 +774,7 @@ storiesOf('VersionTMMergeModal', module)
</div>
</Col>
<Col xs={6}>
<span className="no-v text-muted">Please select versions to sort<br/>
<span className="no-v u-textMuted">Please select versions to sort<br/>
<Icon name="version" className="s8"/></span>
</Col>
<Col xs={12} className="validations">
@@ -836,7 +836,7 @@ storiesOf('VersionTMMergeModal', module)
<Col xs={12}>
<Well>
<p>Translations which satisfy all conditions will copy as
<span className="text-bold text-success"> translated</span>.
<span className="text-bold u-textSuccess"> translated</span>.
</p>
</Well>
</Col>
Oops, something went wrong.

0 comments on commit 8b4c880

Please sign in to comment.