Permalink
Browse files

fix(ZNTA-2143) WIP: refactoring of css in style.less

  • Loading branch information...
kgough
kgough committed Sep 7, 2017
1 parent 3553aa7 commit a420f3367867d934822481fc9da414253b8ea6fa
Showing with 300 additions and 324 deletions.
  1. +2 −2 server/zanata-frontend/src/frontend/app/components/Badge/Badge.story.js
  2. +1 −1 server/zanata-frontend/src/frontend/app/components/Modal/Modal.story.js
  3. +2 −2 server/zanata-frontend/src/frontend/app/components/Notification/component.js
  4. +3 −3 server/zanata-frontend/src/frontend/app/components/VersionTMMergeModal/VersionTMMergeModal.story.js
  5. +2 −2 server/zanata-frontend/src/frontend/app/containers/Admin/index.js
  6. +2 −2 server/zanata-frontend/src/frontend/app/containers/Explore/GroupTeaser.jsx
  7. +4 −4 server/zanata-frontend/src/frontend/app/containers/Explore/LanguageTeamTeaser.jsx
  8. +2 −2 server/zanata-frontend/src/frontend/app/containers/Explore/ProjectTeaser.jsx
  9. +2 −2 server/zanata-frontend/src/frontend/app/containers/Explore/TeaserList.jsx
  10. +3 −3 server/zanata-frontend/src/frontend/app/containers/Explore/TeaserListHeader.jsx
  11. +3 −3 server/zanata-frontend/src/frontend/app/containers/Explore/UserTeaser.jsx
  12. +1 −1 server/zanata-frontend/src/frontend/app/containers/Explore/index.js
  13. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/DeleteAllEntriesModal.jsx
  14. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/DeleteEntryModal.jsx
  15. +3 −3 server/zanata-frontend/src/frontend/app/containers/Glossary/Entry.js
  16. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/EntryModal.js
  17. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/ExportModal.js
  18. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/ImportModal.js
  19. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/NewEntryModal.js
  20. +3 −3 server/zanata-frontend/src/frontend/app/containers/Glossary/ViewHeader.js
  21. +1 −1 server/zanata-frontend/src/frontend/app/containers/Glossary/index.js
  22. +4 −4 server/zanata-frontend/src/frontend/app/containers/Languages/NewLanguageModal.js
  23. +3 −3 server/zanata-frontend/src/frontend/app/containers/Languages/index.js
  24. +1 −1 server/zanata-frontend/src/frontend/app/containers/Project/index.js
  25. +1 −1 server/zanata-frontend/src/frontend/app/containers/ProjectVersion/TMMergeModal.js
  26. +1 −1 server/zanata-frontend/src/frontend/app/containers/ProjectVersion/TMMergeProjectSources.js
  27. +1 −1 server/zanata-frontend/src/frontend/app/containers/ProjectVersion/index.js
  28. +1 −1 server/zanata-frontend/src/frontend/app/containers/UserProfile/CalendarMonthMatrix.jsx
  29. +1 −1 server/zanata-frontend/src/frontend/app/containers/UserProfile/CalendarPeriodHeading.jsx
  30. +5 −5 server/zanata-frontend/src/frontend/app/containers/UserProfile/RecentContributions.jsx
  31. +10 −9 server/zanata-frontend/src/frontend/app/containers/UserProfile/index.jsx
  32. +1 −1 server/zanata-frontend/src/frontend/app/editor/components/CommentBox/index.js
  33. +2 −2 server/zanata-frontend/src/frontend/app/editor/components/GlossaryTermModal/component.js
  34. +2 −2 server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css
  35. +1 −1 server/zanata-frontend/src/frontend/app/editor/containers/SidebarContent.js
  36. +1 −1 server/zanata-frontend/src/frontend/app/editor/containers/SidebarSettings.js
  37. +1 −1 server/zanata-frontend/src/frontend/app/editor/containers/SuggestionDetailsModal/index.js
  38. +223 −248 server/zanata-frontend/src/frontend/app/styles/style.less
  39. +1 −1 server/zanata-frontend/src/frontend/build/messages/app/editor/components/ActivityFeedItem/index.json
@@ -9,12 +9,12 @@ storiesOf('Badge', module)
.add('in nav item', () => (
<Nav bsStyle='pills' stacked className='sg-nav-pills'>
<NavItem className='active'>
<Badge className='pull-right'>42</Badge>
<Badge className='u-pullRight'>42</Badge>
Home
</NavItem>
<NavItem>Profile</NavItem>
<NavItem>
<Badge className='pull-right'>3</Badge>
<Badge className='u-pullRight'>3</Badge>
Messages
</NavItem>
</Nav>
@@ -75,7 +75,7 @@ storiesOf('Modal', module)
<Lorem />
</Modal.Body>
<Modal.Footer>
<span className='bootstrap pull-right'>
<span className='bootstrap u-pullRight'>
<Row>
<Button bsStyle='link'
className='btn-left'
@@ -74,9 +74,9 @@ class Notification extends Component {
</div>)}
</Modal.Body>
<Modal.Footer>
<span className='pull-right'>
<span className='u-pullRight'>
<Row>
<ButtonGroup className='pull-right'>
<ButtonGroup className='u-pullRight'>
<Button bsStyle='primary'
id='btn-notification-close'
type='button' onClick={this.clearMessage}>
@@ -332,7 +332,7 @@ storiesOf('VersionTMMergeModal', module)
</Modal.Body>
<Modal.Footer>
<span className='bootstrap pull-right'>
<span className='bootstrap u-pullRight'>
<Row>
<Button bsStyle='link'
className='btn-left link-danger'
@@ -603,7 +603,7 @@ storiesOf('VersionTMMergeModal', module)
</Modal.Body>
<Modal.Footer>
<span className='bootstrap pull-right'>
<span className='bootstrap u-pullRight'>
<Row>
<Button bsStyle='link'
className='btn-left link-danger'
@@ -874,7 +874,7 @@ storiesOf('VersionTMMergeModal', module)
</Modal.Body>
<Modal.Footer>
<span className='bootstrap pull-right'>
<span className='bootstrap u-pullRight'>
<Row>
<Button bsStyle='link'
className='btn-left link-danger'
@@ -41,15 +41,15 @@ class Admin extends Component {
if (!isAdmin) {
return (
<div className='page wideView' id='admin'>
<div className='center-block'>
<div className='u-centerBlock'>
<p>You are not authorised to access to this page</p>
</div>
</div>
)
}
return (
<div className='page wideView' id='admin'>
<div className='center-block'>
<div className='u-centerBlock'>
<TMXExportModal />
</div>
</div>
@@ -25,7 +25,7 @@ const GroupTeaser = ({
<em>Group : {details.id}</em>
</div>)
const metaData = details.owner ? (
<div className='meta-info'>
<div className='metaInfo'>
<Icon name='user' className='n1 iconUser-muted' />
<Link to={details.owner}>{details.owner}</Link>
<Icon name='users' className='iconUsers-muted n1' />
@@ -36,7 +36,7 @@ const GroupTeaser = ({
? 'text-muted-bold'
: 'text-bold'
return (
<div className='teaser-view-theme' name={name}>
<div className='teaserView' name={name}>
{/* <View className='Mend(rh)'>
TODO: Statistics Donut here
</View> */}
@@ -13,15 +13,15 @@ const LanguageTeamTeaser = ({
}) => {
const link = getLanguageUrl(details.id)
return (
<div className='team-teaser-view' name={name}>
<div className='flex-row'>
<div className='teamTeaser' name={name}>
<div className='u-flexRow'>
<Link link={link} useHref className='text-bold'>
{details.localeDetails.displayName}
</Link>
<span className='u-textMuted langteam-teaser-view-id '>
<span className='u-textMuted languageTeamTeaser-id '>
{details.id}
</span>
<div className='langteam-teaser-view-members'>
<div className='languageTeamTeaser-members'>
<Icon name='users' className='s1 iconUsers-muted' />
{details.memberCount}
</div>
@@ -25,7 +25,7 @@ const ProjectTeaser = ({
<em>Project: {details.id}</em>
</div>)
const metaData = details.owner && (
<div className='meta-info'>
<div className='metaInfo'>
<Icon name='user' className='n1 iconUser-muted' />
<Link to={details.owner}>{details.owner}</Link>
<Icon name='users' className='iconUsers-muted n1' />
@@ -43,7 +43,7 @@ const ProjectTeaser = ({
? ''
: 'This project is currently read only'
return (
<div className='teaser-view-theme' name={name}>
<div className='teaserView' name={name}>
<div className='teaser-inner'>
<div>
<Link link={link} useHref className={className} title={tooltip}>
@@ -43,11 +43,11 @@ const TeaserList = ({
}
return (
<div className='teaser-list-theme'>
<div className='teaserList'>
<TeaserListHeader title={title} type={type}
sizePerPage={sizePerPage} page={page}
totalCount={totalCount} updatePage={updatePage} loading={loading} />
<span className='list-theme' id={'explore_' + type + '_result'}>
<span className='listTheme' id={'explore_' + type + '_result'}>
{!items || items.length <= 0
? (<p className='u-textMuted'>No Results</p>)
: (items.map((item, key) => (
@@ -25,12 +25,12 @@ const TeaserListHeader = ({
const totalPage = Math.floor(totalCount / sizePerPage) +
(totalCount % sizePerPage > 0 ? 1 : 0)
const headerIcon = type
? <Icon name={icons[type]} className='header-icons s1' /> : null
? <Icon name={icons[type]} className='iconsHeader s1' /> : null
const currentPage = page ? parseInt(page) : 1
/* eslint-disable react/jsx-no-bind */
return (
<div className='teaser-header-view-theme'>
<div className='teaserHeader'>
{headerIcon}
<h2 className='u-textDark u-textUppercase'>
{title}
@@ -39,7 +39,7 @@ const TeaserListHeader = ({
</span>
</h2>
{totalPage > 1 && (
<div className='teaser-header-inner'>
<div className='teaserHeader-inner'>
<Button bsStyle='link' disabled={currentPage === 1}
onClick={() => { updatePage(type, currentPage, totalPage, false) }}>
<Icon className='iconsHeader s1' name='chevron-left' />
@@ -12,14 +12,14 @@ const UserTeaser = ({
...props
}) => {
const wordsTranslated = details.wordsTranslated &&
(<div className='words-translated-view'>
(<div className='wordsTranslatedView'>
<Icon className='iconTranslate-muted' />
{details.wordsTranslated}
</div>)
const url = getProfileUrl(details.id)
return (
<div className='teaser-view-theme' name={name}>
<div className='user-teaser-inner'>
<div className='teaserView' name={name}>
<div className='userTeaser-inner'>
<img
src={details.avatarUrl}
alt={details.id}
@@ -138,7 +138,7 @@ class Explore extends Component {
return (
<div className='page scrollView' id='explore'>
<Helmet title='Search' />
<div className='header-classes'>
<div className='headerClasses'>
<h1 className='hidden'>Search</h1>
<div className='searchView'>
<Icon name='search' className='s1 listInline' />
@@ -25,7 +25,7 @@ class DeleteAllEntriesModal extends Component {
/* eslint-disable react/jsx-no-bind */
return (
<div className='block'>
<div className='u-block'>
<Overlay
placement='bottom'
target={() => ReactDOM.findDOMNode(this)}
@@ -37,7 +37,7 @@ class DeleteEntryModal extends Component {
) : (<p>Are you sure you want to delete this term?</p>)
/* eslint-disable react/jsx-no-bind */
return (
<div className='block'>
<div className='u-block'>
<Overlay
placement='top'
target={() => ReactDOM.findDOMNode(this)}
@@ -72,7 +72,7 @@ class Entry extends Component {
return (
<tr>
<td>
<div className='lineclamp'>Loading…</div>
<div className='lineClamp'>Loading…</div>
</td>
</tr>
)
@@ -97,7 +97,7 @@ class Entry extends Component {
)
const loadingDiv = (
<div className='lineclamp'>Loading…</div>
<div className='lineClamp'>Loading…</div>
)
let secondColumnContent
@@ -116,7 +116,7 @@ class Entry extends Component {
</EditableText>
} else {
secondColumnContent =
<div className='lineclamp'>
<div className='lineClamp'>
{entry.termsCount}
</div>
}
@@ -155,7 +155,7 @@ class EntryModal extends Component {
}
</Modal.Body>
<Modal.Footer>
<ButtonGroup className='pull-right'>
<ButtonGroup className='u-pullRight'>
<Button bsStyle='link'
onClick={
() => {
@@ -78,7 +78,7 @@ class ExportModal extends Component {
</p>
</Modal.Body>
<Modal.Footer>
<ButtonGroup className='pull-right'>
<ButtonGroup className='u-pullRight'>
<Button bsStyle='link'
disabled={isExporting}
onClick={() => handleExportFileDisplay(false)}>
@@ -117,7 +117,7 @@ class ImportModal extends Component {
</p>
</Modal.Body>
<Modal.Footer>
<ButtonGroup className='pull-right'>
<ButtonGroup className='u-pullRight'>
<Button bsStyle='link'
disabled={isUploading}
onClick={() => handleImportFileDisplay(false)}>
@@ -124,7 +124,7 @@ class NewEntryModal extends Component {
</div>
</Modal.Body>
<Modal.Footer>
<ButtonGroup className='pull-right'>
<ButtonGroup className='u-pullRight'>
<Button bsStyle='link'
disabled={isSaving}
onClick={() => this.handleCancel()}>
@@ -149,9 +149,9 @@ class ViewHeader extends Component {
<Header className='header-glossary' title={title} icon={icon}
extraHeadingElements={projectLink}
extraElements={(
<div className='flex-row-center'>
<div className='u-flexRowCenter'>
<TextInput
className='textInput glossary-search'
className='textInput glossarySearch'
ref={(ref) => this.searchInput = ref}
type='search'
placeholder='Search Terms…'
@@ -268,7 +268,7 @@ class ViewHeader extends Component {
? <Icon name='chevron-down' className='s1' />
: <Icon name='chevron-up' className='s1' />
: ''}
<span className='left-rq'>
<span className='u-marginL--rq'>
Part of Speech
</span>
</Row>
@@ -224,7 +224,7 @@ class Glossary extends Component {
</Row>
}
{displayPaging &&
<div className='pull-right glossaryPaging'>
<div className='u-pullRight glossaryPaging'>
<Button bsStyle='link' disabled={currentPage <= 1}
title='First page'
onClick={() => { gotoFirstPage(currentPage, totalPage) }}>
@@ -117,10 +117,10 @@ class NewLanguageModal extends Component {
renderSuggestion = (suggestion) => {
return (
<span name='new-language-displayName'>
<span className='text-light'>
<span className='u-textLight'>
{suggestion.displayName}
</span>
<span className='text-suggestion'>
<span className='u-textSuggestion'>
{suggestion.localeId}
</span>
</span>
@@ -204,7 +204,7 @@ class NewLanguageModal extends Component {
<Icon name='info' className='s0 iconInfo' title='Help' />
</a>
{showPluralFormsWarning &&
<div className='small-text'
<div className='u-textSmall'
id='new-language-pluralforms-warning'>
No plural information available. Assuming no plurals.
</div>
@@ -233,7 +233,7 @@ class NewLanguageModal extends Component {
</div>
</Modal.Body>
<Modal.Footer>
<span className='bootstrap pull-right'>
<span className='bootstrap u-pullRight'>
<Row>
<Button bsStyle='link'
id='btn-new-language-cancel' className='btn-left'
@@ -110,7 +110,7 @@ class Languages extends Component {
)
}
<Helmet title='Languages' />
<div className='center-block'>
<div className='u-centerBlock'>
<div className='clearfix'
id='languages-form'>
<h2>
@@ -154,15 +154,15 @@ class Languages extends Component {
<div className='sort-items
col-xs-6 col-sm-4 col-md-4 col-lg-3'>
<FormControl componentClass='select'
className='pull-right' id='sort-options'
className='u-pullRight' id='sort-options'
onChange={handleOnUpdateSort} value={sort.value}>
{sortOption.map(function (sort, i) {
return <option key={i} value={sort.value}>
{sort.display}</option>
})}
</FormControl>
</div>
<div className='showItems pull-right col-xs-5
<div className='showItems u-pullRight col-xs-5
col-sm-3 col-md-2 col-lg-2'>
<span>Show</span>
<FormControl componentClass='select'
@@ -43,7 +43,7 @@ class Project extends Component {
const { params } = this.props
return (
<div className='page wideView' id='version'>
<div className='center-block'>
<div className='u-centerBlock'>
<TMXExportModal project={params.project} />
</div>
</div>
@@ -120,7 +120,7 @@ const MergeOptions = (
</Col>
<Col xs={12} className='vmerge-row'>
<p className="lead">For every potential translation:</p>
<div className="vmerge-title text-new-blue">
<div className="vmerge-title u-textNewBlue">
If text is less than
<SelectableDropdown title={mergeOptions.matchPercentage + '%'}
id='percent-dropdown-basic' className='vmerge-ddown'
@@ -170,7 +170,7 @@ class TMMergeProjectSources extends Component {
<Col xs={12}>
<Well>
<p>Translations which satisfy all conditions will copy as
<span className="text-bold text-success"> translated</span>.
<span className="u-textBold u-textSuccess"> translated</span>.
</p>
</Well>
</Col>
Oops, something went wrong.

0 comments on commit a420f33

Please sign in to comment.