Skip to content

Commit

Permalink
feat(ZNTA-1865): minor css fixes to draggable fields and descriptive …
Browse files Browse the repository at this point in the history 
…text
  • Loading branch information
kgough committed May 15, 2017
1 parent 324c6e5 commit 8e9e045
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 127 deletions.
253 changes: 128 additions & 125 deletions server/zanata-frontend/src/frontend/app/components/Modal/Modal.story.js
View file
@@ -1,42 +1,44 @@
import React from 'react'
import ReactDOM from 'react-dom'
import Draggable from 'react-draggable'
import { storiesOf } from '@kadira/storybook'
import { action, decorateAction } from '@kadira/storybook-addon-actions'
import { Button, Panel, Row, Table, Well, Checkbox, InputGroup, Col,
import {storiesOf} from '@kadira/storybook'
import {action, decorateAction} from '@kadira/storybook-addon-actions'
import {
Button, Panel, Row, Table, Well, Checkbox, InputGroup, Col,
FormControl, DropdownButton, MenuItem, ListGroup, ListGroupItem, PanelGroup,
OverlayTrigger, Tooltip }
OverlayTrigger, Tooltip
}
from 'react-bootstrap'
import { Icon, Modal } from '../../components'
import {Icon, Modal} from '../../components'
import Lorem from 'react-lorem-component'

const tooltipSort = (
const tooltipSort = (
<Tooltip id='tooltip'>Best match will be chosen based on the priority of
selected projects. Exact matches take precendence.
</Tooltip>
)

const tooltipReadOnly = (
const tooltipReadOnly = (
<Tooltip id='tooltip'>Read only
</Tooltip>
)

const heading1 = <h3><Checkbox checked> Project A</Checkbox></h3>
const heading2 = <h3><Checkbox> Project B
const heading1 = <h3><Checkbox checked> Project A</Checkbox></h3>
const heading2 = <h3><Checkbox> Project B
<OverlayTrigger placement='top' overlay={tooltipReadOnly}>
<Icon name='locked'
className='s0 icon-locked' />
</OverlayTrigger>
className='s0 icon-locked'/>
</OverlayTrigger>
</Checkbox></h3>

const currentProject = 'Current project'
const currentVersion = 'Current version'

storiesOf('Modal', module)
.addDecorator((story) => (
<div className='static-modal'>
{story()}
</div>
<div className='static-modal'>
{story()}
</div>
))
.add('default', () => (
<Modal
Expand All @@ -52,8 +54,8 @@ storiesOf('Modal', module)
<span className='bootstrap pull-right'>
<Row>
<Button bsStyle='link'
className='btn-left'
onClick={action('onClick')}>
className='btn-left'
onClick={action('onClick')}>
Close
</Button>
<Button
Expand All @@ -75,129 +77,130 @@ storiesOf('Modal', module)
</Modal.Header>
<Modal.Body>
<div>
<p>This feature copies existing translations from similar
documents in other projects and versions into this project version.
The translation state will be preserved (
<span className='text-success'>translated</span> or
<span className='text-info'> approved</span>).
</p>
<Well>
<Checkbox>
If metadata matches but source string does not, copy as
<span className='vmerge-fuzzytxt'> fuzzy</span>.
</Checkbox>
</Well>
<p>This feature copies existing translations from similar
documents in other projects and versions into this project
version.
The translation state will be preserved (
<span className='vmerge-transtxt'>translated</span> or
<span className='vmerge-apptxt'> approved</span>).
</p>
<Well>
<Checkbox>
If metadata matches but source string does not, copy as
<span className='vmerge-fuzzytxt'> fuzzy</span>.
</Checkbox>
</Well>
<Col xs={12} className='vmerge-langrow'>
<Col xs={2}>
<span className='vmerge-title text-info'>Language</span>
</Col>
<Col xs={6}>
<DropdownButton bsStyle='default' bsSize='small'
title='Japanese'
id='dropdown-basic'
className='vmerge-ddown' >
<MenuItem onClick={action('onClick')} eventKey='1'>
All</MenuItem>
<MenuItem divider />
<MenuItem onClick={action('onClick')} eventKey='2'>
Korean</MenuItem>
<MenuItem onClick={action('onClick')}eventKey='3' active>
Japanese</MenuItem>
<MenuItem onClick={action('onClick')}eventKey='4'>
Russian</MenuItem>
</DropdownButton>
</Col>
<Col xs={2}>
<span className='vmerge-title text-info'>Language</span>
</Col>
<Col xs={6}>
<DropdownButton bsStyle='default' bsSize='small'
title='Japanese'
id='dropdown-basic'
className='vmerge-ddown'>
<MenuItem onClick={action('onClick')} eventKey='1'>
All</MenuItem>
<MenuItem divider/>
<MenuItem onClick={action('onClick')} eventKey='2'>
Korean</MenuItem>
<MenuItem onClick={action('onClick')} eventKey='3' active>
Japanese</MenuItem>
<MenuItem onClick={action('onClick')} eventKey='4'>
Russian</MenuItem>
</DropdownButton>
</Col>
</Col>
<Col xs={12} className='vmerge-boxes'>
<Panel>
<div className='vmerge-target'>
<div className='vmerge-title'>
<span className='text-info'>To </span>
<span className='text-muted'> Target</span>
</div>
<ul>
<li>
{currentProject}
</li>
<li>
{currentVersion}
</li>
</ul>
</div>
<div className='vmerge-target'>
<div className='vmerge-title'>
<span className='text-info'>To </span>
<span className='text-muted'> Target</span>
</div>
<ul>
<li>
{currentProject}
</li>
<li>
{currentVersion}
</li>
</ul>
</div>
</Panel>
</Col>
<Col xs={12} className='vmerge-boxes'>
<Panel>
<Col xs={3}>
<div className='vmerge-title'>
<span className='text-info'>From </span>
<span className='text-muted'> Source</span>
</div>
</Col>
<Col xs={9} className='vmerge-searchbox'>
<InputGroup>
<InputGroup.Addon>
<Icon name='search'
className='s0'
title='search' />
</InputGroup.Addon>
<FormControl type='text'
value='Project'
className='vmerge-searchinput'
/>
</InputGroup>
</Col>
<Col xs={6}>
<Col xs={3}>
<div className='vmerge-title'>
<span className='text-info'>From </span>
<span className='text-muted'> Source</span>
</div>
</Col>
<Col xs={9} className='vmerge-searchbox'>
<InputGroup>
<InputGroup.Addon>
<Icon name='search'
className='s0'
title='search'/>
</InputGroup.Addon>
<FormControl type='text'
value='Project'
className='vmerge-searchinput'
/>
</InputGroup>
</Col>
<Col xs={6}>
<span className='vmerge-adjtitle
vmerge-title'>Select source project versions to merge
</span>
<PanelGroup defaultActiveKey='1' accordion>
<Panel header={heading1} eventKey='1'>
<ListGroup fill>
<ListGroupItem className='v'><Checkbox checked>2.0
</Checkbox>
</ListGroupItem>
<ListGroupItem className='v'><Checkbox checked>1.0
</Checkbox>
</ListGroupItem>
</ListGroup>
</Panel>
<Panel header={heading2} eventKey='2'>
<ListGroup fill>
<ListGroupItem className='v'><Checkbox>1.0</Checkbox>
</ListGroupItem>
</ListGroup>
</Panel>
</PanelGroup>
</Col>
<Col xs={6}>
<ListGroup>
<div><span className='vmerge-adjtitle
<PanelGroup defaultActiveKey='1' accordion>
<Panel header={heading1} eventKey='1'>
<ListGroup fill>
<ListGroupItem className='v'><Checkbox checked>2.0
</Checkbox>
</ListGroupItem>
<ListGroupItem className='v'><Checkbox checked>1.0
</Checkbox>
</ListGroupItem>
</ListGroup>
</Panel>
<Panel header={heading2} eventKey='2'>
<ListGroup fill>
<ListGroupItem className='v'><Checkbox>1.0</Checkbox>
</ListGroupItem>
</ListGroup>
</Panel>
</PanelGroup>
</Col>
<Col xs={6}>
<ListGroup>
<div><span className='vmerge-adjtitle
vmerge-title'>
Adjust priority of selected versions</span>
<br /><span className='text-muted vmerge-adjsub'>(best first)
<br /><span className='text-muted vmerge-adjsub'>(best first)
</span>
<OverlayTrigger placement='top' overlay={tooltipSort}>
<Icon name='info' className='s0 info-icon' />
</OverlayTrigger>
</div>
<Draggable bounds='parent' axis='y' grid={[36, 36]}>
<ListGroupItem className='v'>
<Button bsStyle='link' className='btn-link-sort'>
<i className='fa fa-sort'></i>
</Button>
2.0
</ListGroupItem>
</Draggable>
<Draggable bounds='parent' axis='y' grid={[36, 36]}>
<ListGroupItem className='v'>
<Button bsStyle='link' className='btn-link-sort'>
<i className='fa fa-sort'></i>
</Button>
1.0</ListGroupItem>
</Draggable>
</ListGroup>
</Col>
<OverlayTrigger placement='top' overlay={tooltipSort}>
<Icon name='info' className='s0 info-icon'/>
</OverlayTrigger>
</div>
<Draggable bounds='parent' axis='y' grid={[57, 57]}>
<ListGroupItem className='v'>
<Button bsStyle='link' className='btn-link-sort'>
<i className='fa fa-sort'></i>
</Button>
2.0
</ListGroupItem>
</Draggable>
<Draggable bounds='parent' axis='y' grid={[57, 57]}>
<ListGroupItem className='v'>
<Button bsStyle='link' className='btn-link-sort'>
<i className='fa fa-sort'></i>
</Button>
1.0</ListGroupItem>
</Draggable>
</ListGroup>
</Col>
</Panel>
</Col>
</div>
Expand Down
14 changes: 12 additions & 2 deletions server/zanata-frontend/src/frontend/app/styles/style.less
View file
Expand Up @@ -1549,6 +1549,17 @@ button.btn-link-sort i.fa.fa-sort {
color: @color-warning;
}

.vmerge-transtxt {
font-weight: 600;
color: @color-success;
}

.vmerge-apptxt {
font-weight: 600;
color: @color-light;
}


.vmerge-boxes .list-group-item:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
Expand Down Expand Up @@ -1617,7 +1628,7 @@ label .s0.icon-locked {
}

.modal-body .dropdown .dropdown-menu > li > a {
font-size: 0.6em;
font-size: 0.75em;
}

.alert {
Expand Down Expand Up @@ -2179,7 +2190,6 @@ span.infotxt {

.checkbox label, .radio label {
font-weight: 400;
min-height: 1.85rem;
margin-bottom: 0;
padding-left: @spacing-re;
cursor: pointer;
Expand Down

0 comments on commit 8e9e045

Please sign in to comment.