Skip to content

Commit

Permalink
chore: added react components to project version sidebar (ZNTA-1693)
Browse files Browse the repository at this point in the history
  • Loading branch information
kgough committed Feb 15, 2017
1 parent 06fb6d2 commit a9d12be
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 47 deletions.
48 changes: 32 additions & 16 deletions server/zanata-frontend/src/frontend/app/components/Sidebar/index.jsx
View file
@@ -1,5 +1,5 @@
import React, {Component} from 'react'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import { DropdownButton, MenuItem, ProgressBar } from 'react-bootstrap'
/**
* Root component for Sidebar
*/
Expand Down Expand Up @@ -31,7 +31,7 @@ class Sidebar extends Component {
<div className='sidebar-content'>
<a className='accordion-section-title'
onClick={::this.toggleDisplay}>
<svg className='projicon s2'>
<svg className='projicon'>
<use xlinkHref='#Icon-project'></use>
</svg>
<span>Zanata Server</span>
Expand All @@ -41,25 +41,43 @@ class Sidebar extends Component {
<div id='accordion-1' className={displayAccordion}>
<ul>
<li>
<a href='people.html'>People</a>
<a href='people.html'>
<svg className='s1 sidebar-icon'>
<use xlinkHref='#Icon-users'></use>
</svg>
People</a>
</li>
<li>
<a href='about.html'>About</a>
<a href='about.html'>
<svg className='s1 sidebar-icon'>
<use xlinkHref='#Icon-info'></use>
</svg>
About</a>
</li>
<li>
<a href='settings.html'>Settings</a>
<a href='settings.html'>
<svg className='s1 sidebar-icon'>
<use xlinkHref='#Icon-settings'></use>
</svg>
Settings</a>
</li>
</ul>
<hr />
<div id='version'>
<div>
<span>VERSION</span>
</div>
<DropdownButton title='master'>
<DropdownButton className='btn-sm' title='master'>
<MenuItem eventKey='1'>release</MenuItem>
<MenuItem eventKey='2'>test-1</MenuItem>
</DropdownButton>
<p><a href='vsettings.html'>Version settings</a></p>
<p><span>10%</span> translated</p>
<ProgressBar>
<ProgressBar bsStyle='success' now={35} key={1} />
<ProgressBar bsStyle='warning' now={20} key={2} />
<ProgressBar bsStyle='danger' now={10} key={3} />
</ProgressBar>
<div>
<div></div>
</div>
Expand All @@ -73,17 +91,15 @@ class Sidebar extends Component {
<li>
<a href='groups.html'>Groups</a>
</li>
<li className='collapsed expanded'>
<a href=''>Options</a>
<ul>
<li><a href=''>Copy translations</a></li>
<li><a href=''>Merge tranlations</a></li>
<li><a href=''>Copy to new version</a></li>
<li><a href=''>Download config file</a></li>
<li><a href=''>Export version to TMX</a></li>
</ul>
</li>
</ul>
<DropdownButton title='Options'
className='btn-sm btn-primary'>
<MenuItem eventKey='1'>Copy translations</MenuItem>
<MenuItem eventKey='2'>Merge translations</MenuItem>
<MenuItem eventKey='3'>Copy to new version</MenuItem>
<MenuItem eventKey='4'>Download config file</MenuItem>
<MenuItem eventKey='5'>Export version to TMX</MenuItem>
</DropdownButton>
</div>
</div>
</div>
Expand Down
79 changes: 48 additions & 31 deletions server/zanata-frontend/src/frontend/app/styles/style.less
View file
Expand Up @@ -275,7 +275,9 @@ body.templatestyle {
flex-direction: column;
overflow: hidden;
flex:1;
padding:1em;
}

.flex-chart-container {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -439,7 +441,6 @@ body.templatestyle {
flex-shrink:0;
flex-grow: 1;
/* Px(r1)--sm */
padding-top:@spacing-rh;
padding-bottom:@spacing-rh;
position:relative;
width:100%;
Expand All @@ -450,6 +451,8 @@ body.templatestyle {
display: flex;
flex-direction: column;
flex-shrink:0;
padding-left: 1em;
padding-right: 1em;
}

input.text-input {
Expand Down Expand Up @@ -2799,6 +2802,12 @@ button.btn.btn-danger.dropdown-toggle > span.caret, button.btn.btn-info.dropdown
background-color: @color-dark;
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
color: #fff;
border-color: #ccc;
background-color: @color-dark;
}

// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
Expand Down Expand Up @@ -2826,6 +2835,7 @@ button.btn.btn-danger.dropdown-toggle > span.caret, button.btn.btn-info.dropdown
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
font-size:1em;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
Expand Down Expand Up @@ -2856,7 +2866,7 @@ button.btn.btn-danger.dropdown-toggle > span.caret, button.btn.btn-info.dropdown
// Links within the dropdown menu
> li > a {
display: block;
padding: @border-radius-small @spacing-xxl;
padding: @border-radius-small @spacing-re;
clear: both;
font-weight: normal;
line-height: @line-height-base;
Expand Down Expand Up @@ -3011,7 +3021,7 @@ button.btn.btn-danger.dropdown-toggle > span.caret, button.btn.btn-info.dropdown
// Outer container
.progress {
overflow: hidden;
height: @line-height-computed;
height: 1rem;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @border-radius-base;
Expand Down Expand Up @@ -5946,14 +5956,6 @@ button.close:focus, button.close:hover, button.close:active:focus {
vertical-align: text-bottom;
}

.getinvolved .btn-primary {
background-color: @color-light;
}

.getinvolved .btn-primary:active, .getinvolved .btn-primary:focus, .getinvolved .btn-primary:hover {
background-color: @color-dark;
}

.new-zanata .bg--pop-highest {
border:none;
}
Expand Down Expand Up @@ -6083,9 +6085,44 @@ i.i--left.i--lock, i.i--left.i--trash {x

.tabs__content {
padding-bottom:@spacing-base-and-a-half;
}

.accordion-section-title {
width: 100%;
display: inline-block;
color: #54667a;
padding-top: 20px;
padding-bottom: 10px;
font-size: 2.25em;
line-height: 1.08333em;
letter-spacing: -0.05em;
}

.accordion-section-title svg.projicon {
fill: @color-dark;
height: 30px;
width: 30px;
margin-bottom: 2px;
vertical-align:baseline;
}

.accordion-section-title span {
vertical-align: text-top;
}

.accordion-section-content ul {
line-height:2em;
list-style-type:none;
padding-left:0;
}

svg.sidebar-icon {
fill: @color-dark;
vertical-align:middle;
margin-right: @spacing-re;
}


// @screen-xs variable depreciated
@media (max-width: 29.375rem) {
.view {
Expand Down Expand Up @@ -6637,21 +6674,6 @@ i.i--left.i--lock, i.i--left.i--trash {x
}

/*----- Section Titles -----*/
.accordion-section-title {
width: 100%;
display: inline-block;
color: #54667a;
padding-top: 20px;
padding-bottom: 10px;
font-size: 2.25em;
line-height: 1.08333em;
letter-spacing: -0.05em;
}


.accordion-section-title span {
vertical-align: text-top
}

.hide-desktop {
transition: all linear 0.15s;
Expand Down Expand Up @@ -6727,7 +6749,6 @@ i.i--left.i--lock, i.i--left.i--trash {x
margin-right:10px !important;
margin-left:0px !important;
height:2em;

}

li.active a {
Expand Down Expand Up @@ -6934,10 +6955,6 @@ i.i--left.i--lock, i.i--left.i--trash {x
visibility:hidden;
}

.sidebar ul li.active {
margin-left:-30px;
}

.sidebar {
float:left;
height:100vh;
Expand Down

0 comments on commit a9d12be

Please sign in to comment.