github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 18:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enabled back some CSS transitions.

Browse Source
This commit is contained in:
Filip Barl
2017-08-07 17:13:00 +01:00
parent d180437411
commit d105e7471c
2 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/app/scripts/charts/nodes-chart-elements.js
View File

@@ -190,13 +190,13 @@ class NodesChartElements extends React.Component {
}
renderElement(element) {
if (element.get('overlay')) {
const className = classNames('nodes-overlay', { active: element.get('active') });
if (element.get('isOverlay')) {
const className = classNames('nodes-overlay', { active: element.get('isActive') });
return (
<rect
className={className}
x={-1} y={-1} width={2} height={2}
transform="scale(1000000)"fill="#fff"
transform="scale(1000000)" fill="#fff"
/>
);
}
@@ -229,7 +229,7 @@ class NodesChartElements extends React.Component {
const orderedElements = makeList([
edges.get(BLURRED_EDGES_LAYER, makeList()),
nodes.get(BLURRED_NODES_LAYER, makeList()),
fromJS([{ overlay: true, active: !!nodes.get(BLURRED_NODES_LAYER) }]),
fromJS([{ isOverlay: true, isActive: !!nodes.get(BLURRED_NODES_LAYER) }]),
edges.get(NORMAL_EDGES_LAYER, makeList()),
nodes.get(NORMAL_NODES_LAYER, makeList()),
edges.get(HIGHLIGHTED_EDGES_LAYER, makeList()),

29
client/app/styles/_base.scss
View File

@@ -27,18 +27,15 @@
}
.colorable {
transition: none;
// transition: background-color .3s $base-ease;
transition: background-color .3s $base-ease;
}
.palable {
transition: none;
// transition: all .2s $base-ease;
transition: all .2s $base-ease;
}
.hideable {
transition: none;
// transition: opacity .5s $base-ease;
transition: opacity .5s $base-ease;
}
.blinkable {
@@ -262,7 +259,7 @@
margin-bottom: 15px;
z-index: 2001;
// transition: all .15s $base-ease;
transition: all .15s $base-ease;
overflow: hidden;
height: 0;
@@ -415,7 +412,7 @@
}
.nodes-overlay {
// transition: opacity 2.5s $base-ease;
transition: all .5s $base-ease;
pointer-events: none;
opacity: 0;
@@ -481,7 +478,6 @@
}
.nodes-chart-elements .node {
// transition: opacity .2s $base-ease;
text-align: center;
.node-label {
@@ -635,7 +631,6 @@
fill: none;
stroke-opacity: 1;
stroke-width: $node-border-stroke-width;
// transition: stroke-opacity 0.333s $base-ease, fill 0.333s $base-ease;
}
&.metrics .border {
@@ -707,7 +702,7 @@
right: $details-window-padding-left;
top: 100px;
bottom: 48px;
// transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s $base-ease;
transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s $base-ease;
}
}
@@ -1244,7 +1239,7 @@
left: 10px;
bottom: 10px;
right: 0;
// transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
@extend .shadow-2;
}
@@ -1625,7 +1620,7 @@
display: inline-block;
position: relative;
width: 10em;
// transition: width 0.3s 0s $base-ease;
transition: width 0.3s 0s $base-ease;
&-wrapper {
flex: 0 1 20%;
@@ -1645,7 +1640,7 @@
color: $text-tertiary-color;
top: 0;
opacity: 0;
// transition: transform 0.3s 0s $base-ease, opacity 0.3s 0s $base-ease;
transition: transform 0.3s 0s $base-ease, opacity 0.3s 0s $base-ease;
text-align: left;
}
@@ -1672,7 +1667,7 @@
&-hint {
font-size: 0.8rem;
text-transform: uppercase;
// transition: opacity 0.3s 0.5s $base-ease;
transition: opacity 0.3s 0.5s $base-ease;
opacity: 1;
}
}
@@ -1710,7 +1705,7 @@
&-focused &-label-hint,
&-pinned &-label-hint,
&-filled &-label-hint {
// transition: opacity 0.1s 0s $base-ease;
transition: opacity 0.1s 0s $base-ease;
opacity: 0;
}
@@ -1719,7 +1714,7 @@
&-pinned &-hint {
opacity: 1;
transform: translate3d(0, 2.75em, 0);
// transition: transform 0.3s 0.3s $base-ease, opacity 0.3s 0.3s $base-ease;
transition: transform 0.3s 0.3s $base-ease, opacity 0.3s 0.3s $base-ease;
}
&-focused &-input-field,