mirror of https://github.com/docker/docs.git
Refactoring front end.
This commit is contained in:
Sean Li
parent
c43a8d5a69
commit
bb98625da0
|
|
@ -94,8 +94,7 @@ var Header = React.createClass({
|
|||
});
|
||||
accountActions.verify();
|
||||
},
|
||||
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;
|
||||
renderWindowButtons: function () {
|
||||
let buttons;
|
||||
if (this.state.fullscreen) {
|
||||
buttons = (
|
||||
|
|
@ -114,6 +113,10 @@ var Header = React.createClass({
|
|||
</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;
|
||||
if (this.props.hideLogin) {
|
||||
|
|
@ -140,12 +143,18 @@ var Header = React.createClass({
|
|||
|
||||
return (
|
||||
<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">
|
||||
{updateWidget}
|
||||
</div>
|
||||
<div className="login">
|
||||
{username}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.header {
|
||||
min-height: 50px;
|
||||
min-height: 40px;
|
||||
-webkit-app-region: drag;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&.bordered {
|
||||
border-bottom: 1px solid #E7E7E7;
|
||||
border-bottom: 1px solid @color-divider;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
|
|
@ -12,6 +12,12 @@
|
|||
.no-drag {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.left-header {
|
||||
display: flex;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.updates {
|
||||
flex: 1 auto;
|
||||
display: flex;
|
||||
|
|
@ -26,13 +32,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
flex: 1 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.login {
|
||||
flex: 0 auto;
|
||||
display: flex;
|
||||
color: #88919C;
|
||||
color: @gray-light;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: 13px;
|
||||
border-left: 1px solid @color-divider;
|
||||
border-right: 1px solid @color-divider;
|
||||
padding: 0 1rem 0 0.6rem;
|
||||
|
||||
&:active {
|
||||
img, span {
|
||||
|
|
@ -47,8 +60,7 @@
|
|||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-left: 14px;
|
||||
|
||||
margin: 0 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/* Sidebar */
|
||||
|
||||
.sidebar {
|
||||
padding-top: 10px;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
border-right: 1px solid @color-divider;
|
||||
|
|
@ -13,7 +12,7 @@
|
|||
.sidebar-header {
|
||||
flex: 0 auto;
|
||||
min-width: 240px;
|
||||
min-height: 47px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-bottom 0.25s;
|
||||
|
|
@ -23,8 +22,7 @@
|
|||
}
|
||||
h4 {
|
||||
align-self: flex-start;
|
||||
padding-left: 26px;
|
||||
margin: 14px 0 0;
|
||||
padding: 0.2rem 0 0 1.4rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -32,8 +30,9 @@
|
|||
display: flex;
|
||||
flex: 1 auto;
|
||||
justify-content: flex-end;
|
||||
margin-right: 20px;
|
||||
margin-top: 3px;
|
||||
margin: 0.6rem 1rem 0 0;
|
||||
//margin-right: 20px;
|
||||
//margin-top: 3px;
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
|
@ -88,13 +87,18 @@
|
|||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
&:first-child {
|
||||
li {
|
||||
border-top: 1px solid @color-divider;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.active {
|
||||
background: @brand-action;
|
||||
li {
|
||||
height: 57px;
|
||||
height: 45px;
|
||||
border-bottom: none;
|
||||
.brand-gradient();
|
||||
.name {
|
||||
|
|
@ -136,25 +140,25 @@
|
|||
}
|
||||
li {
|
||||
vertical-align: middle;
|
||||
padding: 10px 16px 10px 26px;
|
||||
padding: 0.7rem 1rem 0.7rem 1.4rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 57px;
|
||||
height: 45px;
|
||||
border-bottom: 1px solid @color-divider;
|
||||
.info {
|
||||
font-size: 13px;
|
||||
margin-left: 16px;
|
||||
margin-left: 1rem;
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 140px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: @gray-darkest;
|
||||
}
|
||||
.image {
|
||||
color: @gray-light;
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 140px;
|
||||
|
|
@ -166,9 +170,8 @@
|
|||
display: none;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
top: 0.2rem;
|
||||
text-align: right;
|
||||
margin-right: 4px;
|
||||
.btn-delete {
|
||||
font-size: 24px;
|
||||
color: @gray-lighter;
|
||||
|
|
@ -177,7 +180,7 @@
|
|||
}
|
||||
}
|
||||
.state {
|
||||
margin-top: 9px;
|
||||
margin-top: 0.6rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-width: 20px;
|
||||
|
|
|
|||
|
|
@ -63,32 +63,30 @@ input[type="text"] {
|
|||
|
||||
// Mixin for generating new styles
|
||||
.btn-styles(@btn-color: @gray-normal) {
|
||||
transition: all 0.25s;
|
||||
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
|
||||
transition: all 100ms;
|
||||
background: transparent;
|
||||
border-color: @btn-color;
|
||||
color: @btn-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: darken(@btn-color, 15%);
|
||||
color: darken(@btn-color, 15%);
|
||||
&:hover {
|
||||
background-color: fade(@btn-color, 3%);
|
||||
border-color: darken(@btn-color, 5%);
|
||||
color: darken(@btn-color, 5%);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: @btn-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten(@btn-color, 45%);
|
||||
border-color: darken(@btn-color, 15%);
|
||||
color: darken(@btn-color, 15%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: @btn-color;
|
||||
color: white;
|
||||
box-shadow: none;
|
||||
box-shadow: none;
|
||||
background-color: fade(@btn-color, 5%);
|
||||
border-color: darken(@btn-color, 5%);
|
||||
box-shadow: 0 0 0 3px fade(@btn-color, 25%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
|
|
@ -129,7 +127,7 @@ input[type="text"] {
|
|||
background-color: transparent;
|
||||
color: @gray-normal;
|
||||
border: 1px solid @gray-normal;
|
||||
border-radius: 40px;
|
||||
border-radius: @border-radius;
|
||||
box-shadow: none;
|
||||
font-weight: 400;
|
||||
text-shadow: none;
|
||||
|
|
@ -169,7 +167,6 @@ input[type="text"] {
|
|||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
|
|
@ -193,16 +190,6 @@ input[type="text"] {
|
|||
}
|
||||
.btn-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-primary { .btn-styles(@btn-primary-bg); }
|
||||
|
|
|
|||
|
|
@ -13,14 +13,16 @@
|
|||
@traffic-light-gray-border: #D3D3D3;
|
||||
|
||||
@gray-darkest: #233137;
|
||||
@gray-darker: #556473;
|
||||
@gray-normal: #7A8491;
|
||||
@gray-light: #9AA7BB;
|
||||
@gray-lighter: #C4CDDA;
|
||||
@gray-lightest: #E1E8EF;
|
||||
@gray-darker: #3f5167;
|
||||
@gray-normal: #556473;
|
||||
@gray-light: #7a8491;
|
||||
@gray-lighter: #c4cdda;
|
||||
@gray-lightest: #e6edf4;
|
||||
|
||||
@color-divider: @gray-lightest;
|
||||
@color-divider: #EDF0F4;
|
||||
@color-background: #FCFCFC;
|
||||
|
||||
@font-regular: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
@font-code: Menlo;
|
||||
|
||||
@border-radius: 0.2rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue