Skip to content

Commit

Permalink
Merge pull request #936 from weaveworks/915-highlight-topology
Browse files Browse the repository at this point in the history 
Highlight selected topology
  • Loading branch information
@davkal
davkal committed Feb 8, 2016
2 parents 279871c + 88fb9fe commit d932373
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 61 deletions.
17 changes: 11 additions & 6 deletions client/app/scripts/components/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export default class App extends React.Component {
render() {
const showingDetails = this.state.nodeDetails.size > 0;
const showingTerminal = this.state.controlPipe;
const footer = `Version ${this.state.version} on ${this.state.hostname}`;
// width of details panel blocking a view
const detailsWidth = showingDetails ? 450 : 0;
const topMargin = 100;
Expand Down Expand Up @@ -100,17 +99,23 @@ export default class App extends React.Component {
topologyId={this.state.currentTopologyId} />

<Sidebar>
<TopologyOptions options={this.state.currentTopologyOptions}
topologyId={this.state.currentTopologyId}
activeOptions={this.state.activeTopologyOptions} />
<Status errorUrl={this.state.errorUrl} topology={this.state.currentTopology}
topologiesLoaded={this.state.topologiesLoaded}
websocketClosed={this.state.websocketClosed} />
<TopologyOptions options={this.state.currentTopologyOptions}
topologyId={this.state.currentTopologyId}
activeOptions={this.state.activeTopologyOptions} />
</Sidebar>

<div className="footer">
{footer}&nbsp;&nbsp;
<a href="https://gitreports.com/issue/weaveworks/scope" target="_blank">Report an issue</a>
<span className="footer-label">Version</span>
{this.state.version}
<span className="footer-label">on</span>
{this.state.hostname}
&nbsp;&nbsp;
<a className="footer-label" href="https://gitreports.com/issue/weaveworks/scope" target="_blank">
Report an issue
</a>
</div>
</div>
);
Expand Down
121 changes: 66 additions & 55 deletions client/app/styles/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,17 @@

@primary-color: @weave-charcoal-blue;
@background-color: lighten(@primary-color, 66%);
@background-secondary-color: lighten(@background-color, 8%);
@background-lighter-color: lighten(@background-color, 8%);
@background-darker-color: darken(@background-color, 8%);
@background-darker-secondary-color: darken(@background-color, 4%);
@background-dark-color: @primary-color;
@background-medium-color: lighten(@background-dark-color, 55%);
@text-color: lighten(@primary-color, 10%);
@text-secondary-color: lighten(@primary-color, 33%);
@text-secondary-color: lighten(@primary-color, 27%);
@text-tertiary-color: lighten(@primary-color, 50%);
@border-light-color: lighten(@primary-color, 66%);
@text-darker-color: @primary-color;
@white: @background-secondary-color;
@white: @background-lighter-color;

@details-window-width: 420px;
@details-window-padding-left: 36px;
Expand All @@ -50,8 +52,7 @@
}

.palable {
transition: opacity .2s ease-in-out;
transition: border-color .2s ease-in-out;
transition: all .2s ease-in-out;
}

.hideable {
Expand All @@ -74,6 +75,17 @@
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
}

.btn-opacity {
.palable;
opacity: 0.8;
&-selected {
opacity: 0.9;
}
&:hover {
opacity: 1;
}
}

* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Expand All @@ -95,7 +107,7 @@ body {

/* Space out content a bit */
body {
background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
background: linear-gradient(30deg, @background-color 0%, @background-lighter-color 100%);
color: @text-color;
line-height: 150%;
font-family: @base-font;
Expand Down Expand Up @@ -135,6 +147,7 @@ h2 {
width: 100%;
height: 80px;
z-index: 20;
display: flex;
}

.footer {
Expand All @@ -143,81 +156,82 @@ h2 {
right: 48px;
z-index: 20;
color: @text-tertiary-color;
font-size: 85%;
font-size: 0.7rem;
opacity: 0.8;

a {
color: @text-secondary-color;
.btn-opacity;
text-decoration: none;
font-weight: bold;
font-size: 90%;
}

&:hover {
color: @text-color;
}
&-label {
text-transform: uppercase;
margin: 0 0.25em;
}
}

.logo {
margin: -8px 0 0 64px;
height: 64px;
width: 250px;
float: left;
}

.topologies {
float: left;
margin: 4px 64px;
margin: 4px 0 0 128px;
display: flex;

.topologies-item {
margin: 0px 16px;
float: left;
margin: 0px 8px;

&-label {
color: @text-secondary-color;
font-size: 16px;
font-size: .8rem;
text-transform: uppercase;
}

}

.topologies-sub {
margin-top: 4px;

&-item {
&-label {
color: @text-secondary-color;
font-size: 12px;
font-size: .7rem;
text-transform: uppercase;
}
}
}

.topologies-item-main,
.topologies-sub-item {
// border: 1px solid @background-darker-secondary-color;
color: @text-secondary-color;
.palable;
cursor: pointer;
padding: 4px 8px;
opacity: 0.7;
border-radius: 4px;
opacity: 0.8;
margin-bottom: 3px;

&-active, &:hover {
.topologies-sub-item-label,
.topologies-item-label {
color: @text-color;
}
color: @text-color;
background-color: @background-darker-secondary-color;
}

}

}

.topology-options {
margin-top: -16px;
}
&-active {
opacity: 0.85;
}

.status {
&-icon {
font-size: 16px;
position: relative;
top: 1px;
&:hover {
opacity: 1;
}
}

&-label {
margin-left: 0.5em;
.topologies-sub-item {
padding: 2px 8px;
}

}

.nodes-chart {
Expand Down Expand Up @@ -322,7 +336,7 @@ h2 {

circle.shadow {
stroke: none;
fill: @background-secondary-color;
fill: @background-lighter-color;
}

circle.node {
Expand Down Expand Up @@ -877,36 +891,33 @@ h2 {
.sidebar {
position: fixed;
bottom: 16px;
left: 20px;
width: 18em;
font-size: 85%;
left: 24px;
font-size: .7rem;

&-item {
background-color: darken(@background-color, 8%);
border-radius: 2px;
padding: 4px 8px;
width: 100%;
margin-top: 2px;
color: @text-secondary-color;
margin-top: 4px;

&.status {
background-color: darken(@background-color, 4%);
color: @text-secondary-color;
}
&.status-loading {
animation: status-loading 2.0s infinite ease-in-out;
}

&-action {
float: right;
.btn-opacity;
text-transform: uppercase;
font-weight: bold;
color: darken(@weave-orange, 25%);
cursor: pointer;
font-size: 90%;
margin-left: 0.5em;
}
}
}

.status {
text-transform: uppercase;
}

@keyframes blinking {
0%, 100% {
opacity: 1.0;
Expand All @@ -917,10 +928,10 @@ h2 {

@keyframes status-loading {
0%, 100% {
background-color: darken(@background-color, 4%);
background-color: @background-darker-secondary-color;
color: @text-secondary-color;
} 50% {
background-color: darken(@background-color, 8%);
background-color: @background-darker-color;
color: @text-color;
}
}
Expand Down

0 comments on commit d932373

Please sign in to comment.