docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactoring front end.

This commit is contained in:
Sean Li 2015-06-04 13:44:58 -07:00
parent c43a8d5a69
commit bb98625da0
5 changed files with 82 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Header.react.js
View File

@ -94,8 +94,7 @@ var Header = React.createClass({
}); });
accountActions.verify(); accountActions.verify();
}, },
render: function () { renderWindowButtons: function () {
let updateWidget = this.state.updateAvailable && !this.props.hideLogin ? <a className="btn btn-action small no-drag" onClick={this.handleAutoUpdateClick}>UPDATE NOW</a> : null;
let buttons; let buttons;
if (this.state.fullscreen) { if (this.state.fullscreen) {
buttons = ( buttons = (
@ -114,6 +113,10 @@ var Header = React.createClass({
</div> </div>
); );
} }
return buttons;
},
render: function () {
let updateWidget = this.state.updateAvailable && !this.props.hideLogin ? <a className="btn btn-action small no-drag" onClick={this.handleAutoUpdateClick}>UPDATE NOW</a> : null;
let username; let username;
if (this.props.hideLogin) { if (this.props.hideLogin) {
@ -140,12 +143,18 @@ var Header = React.createClass({
return ( return (
<div className={headerClasses}> <div className={headerClasses}>
{buttons} <div className="left-header">
{this.renderWindowButtons()}
<div className="login-wrapper">
<div className="login">
{username}
</div>
</div>
</div>
<div className="right-header">
<div className="updates"> <div className="updates">
{updateWidget} {updateWidget}
</div> </div>
<div className="login">
{username}
</div> </div>
</div> </div>
); );

26
styles/header.less
View File

@ -1,10 +1,10 @@
.header { .header {
min-height: 50px; min-height: 40px;
-webkit-app-region: drag; -webkit-app-region: drag;
-webkit-user-select: none; -webkit-user-select: none;
&.bordered { &.bordered {
border-bottom: 1px solid #E7E7E7; border-bottom: 1px solid @color-divider;
} }
display: flex; display: flex;
@ -12,6 +12,12 @@
.no-drag { .no-drag {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.left-header {
display: flex;
min-width: 260px;
}
.updates { .updates {
flex: 1 auto; flex: 1 auto;
display: flex; display: flex;
@ -26,13 +32,20 @@
} }
} }
.login-wrapper {
flex: 1 auto;
display: flex;
justify-content: flex-end;
}
.login { .login {
flex: 0 auto; flex: 0 auto;
display: flex; display: flex;
color: #88919C; color: @gray-light;
align-items: center; align-items: center;
justify-content: flex-end; border-left: 1px solid @color-divider;
margin-right: 13px; border-right: 1px solid @color-divider;
padding: 0 1rem 0 0.6rem;
&:active { &:active {
img, span { img, span {
@ -47,8 +60,7 @@
.buttons { .buttons {
display: flex; display: flex;
margin-left: 14px; margin: 0 1.5rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover { &:hover {

35
styles/left-panel.less
View File

@ -1,7 +1,6 @@
/* Sidebar */ /* Sidebar */
.sidebar { .sidebar {
padding-top: 10px;
background-color: white; background-color: white;
margin: 0; margin: 0;
border-right: 1px solid @color-divider; border-right: 1px solid @color-divider;
@ -13,7 +12,7 @@
.sidebar-header { .sidebar-header {
flex: 0 auto; flex: 0 auto;
min-width: 240px; min-width: 240px;
min-height: 47px; min-height: 40px;
display: flex; display: flex;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
transition: border-bottom 0.25s; transition: border-bottom 0.25s;
@ -23,8 +22,7 @@
} }
h4 { h4 {
align-self: flex-start; align-self: flex-start;
padding-left: 26px; padding: 0.2rem 0 0 1.4rem;
margin: 14px 0 0;
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
@ -32,8 +30,9 @@
display: flex; display: flex;
flex: 1 auto; flex: 1 auto;
justify-content: flex-end; justify-content: flex-end;
margin-right: 20px; margin: 0.6rem 1rem 0 0;
margin-top: 3px; //margin-right: 20px;
//margin-top: 3px;
a { a {
display: block; display: block;
text-decoration: none; text-decoration: none;
@ -88,13 +87,18 @@
text-decoration: none; text-decoration: none;
cursor: default; cursor: default;
} }
&:first-child {
li {
border-top: 1px solid @color-divider;
}
}
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
&.active { &.active {
background: @brand-action; background: @brand-action;
li { li {
height: 57px; height: 45px;
border-bottom: none; border-bottom: none;
.brand-gradient(); .brand-gradient();
.name { .name {
@ -136,25 +140,25 @@
} }
li { li {
vertical-align: middle; vertical-align: middle;
padding: 10px 16px 10px 26px; padding: 0.7rem 1rem 0.7rem 1.4rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 57px; height: 45px;
border-bottom: 1px solid @color-divider;
.info { .info {
font-size: 13px; margin-left: 1rem;
margin-left: 16px;
.name { .name {
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 140px; max-width: 140px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: @gray-darkest; color: @gray-darkest;
} }
.image { .image {
color: @gray-light; color: @gray-light;
font-size: 10px; font-size: 9px;
font-weight: 400; font-weight: 400;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 140px; max-width: 140px;
@ -166,9 +170,8 @@
display: none; display: none;
flex: 1; flex: 1;
position: relative; position: relative;
top: 5px; top: 0.2rem;
text-align: right; text-align: right;
margin-right: 4px;
.btn-delete { .btn-delete {
font-size: 24px; font-size: 24px;
color: @gray-lighter; color: @gray-lighter;
@ -177,7 +180,7 @@
} }
} }
.state { .state {
margin-top: 9px; margin-top: 0.6rem;
display: inline-block; display: inline-block;
position: relative; position: relative;
min-width: 20px; min-width: 20px;

45
styles/theme.less
View File

@ -63,32 +63,30 @@ input[type="text"] {
// Mixin for generating new styles // Mixin for generating new styles
.btn-styles(@btn-color: @gray-normal) { .btn-styles(@btn-color: @gray-normal) {
transition: all 0.25s;
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
transition: all 100ms;
background: transparent;
border-color: @btn-color; border-color: @btn-color;
color: @btn-color; color: @btn-color;
&:hover, &:hover {
&:focus { background-color: fade(@btn-color, 3%);
border-color: darken(@btn-color, 15%); border-color: darken(@btn-color, 5%);
color: darken(@btn-color, 15%); color: darken(@btn-color, 5%);
cursor: default; cursor: default;
box-shadow: none; box-shadow: none;
background: none; }
&:focus,
&.focus {
color: @btn-color;
outline: none;
} }
&:active { &:active {
background-color: lighten(@btn-color, 45%); background-color: fade(@btn-color, 5%);
border-color: darken(@btn-color, 15%); border-color: darken(@btn-color, 5%);
color: darken(@btn-color, 15%); box-shadow: 0 0 0 3px fade(@btn-color, 25%);
box-shadow: none;
}
&.active {
background-color: @btn-color;
color: white;
box-shadow: none;
box-shadow: none;
} }
&:disabled, &:disabled,
@ -129,7 +127,7 @@ input[type="text"] {
background-color: transparent; background-color: transparent;
color: @gray-normal; color: @gray-normal;
border: 1px solid @gray-normal; border: 1px solid @gray-normal;
border-radius: 40px; border-radius: @border-radius;
box-shadow: none; box-shadow: none;
font-weight: 400; font-weight: 400;
text-shadow: none; text-shadow: none;
@ -169,7 +167,6 @@ input[type="text"] {
&:active, &:active,
&.active { &.active {
background-image: none; background-image: none;
box-shadow: none;
} }
&:focus, &:focus,
@ -193,16 +190,6 @@ input[type="text"] {
} }
.btn-positive { .btn-positive {
.btn-styles(@brand-positive); .btn-styles(@brand-positive);
&:hover,
&:focus {
border-color: darken(@brand-positive, 7%);
color: darken(@brand-positive, 7%);
}
&:active {
background-color: lighten(@brand-positive, 53%);
border-color: darken(@brand-positive, 7%);
color: darken(@brand-positive, 7%);
}
} }
.btn-default { .btn-styles(@btn-default-bg); } .btn-default { .btn-styles(@btn-default-bg); }
.btn-primary { .btn-styles(@btn-primary-bg); } .btn-primary { .btn-styles(@btn-primary-bg); }

14
styles/variables.less
View File

@ -13,14 +13,16 @@
@traffic-light-gray-border: #D3D3D3; @traffic-light-gray-border: #D3D3D3;
@gray-darkest: #233137; @gray-darkest: #233137;
@gray-darker: #556473; @gray-darker: #3f5167;
@gray-normal: #7A8491; @gray-normal: #556473;
@gray-light: #9AA7BB; @gray-light: #7a8491;
@gray-lighter: #C4CDDA; @gray-lighter: #c4cdda;
@gray-lightest: #E1E8EF; @gray-lightest: #e6edf4;
@color-divider: @gray-lightest; @color-divider: #EDF0F4;
@color-background: #FCFCFC; @color-background: #FCFCFC;
@font-regular: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; @font-regular: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@font-code: Menlo; @font-code: Menlo;
@border-radius: 0.2rem;