mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Refresh appearance
This commit is contained in:
Nick O'Leary
parent
846ab08661
commit
6bde07b5a0
@ -30,7 +30,8 @@ RED.sidebar = (function() {
|
||||
if (tab.onremove) {
|
||||
tab.onremove.call(tab);
|
||||
}
|
||||
}
|
||||
},
|
||||
minimumActiveTabWidth: 110
|
||||
});
|
||||
|
||||
var knownTabs = {
|
||||
@ -110,7 +111,7 @@ RED.sidebar = (function() {
|
||||
var d = ui.position.left-sidebarSeparator.start;
|
||||
var newSidebarWidth = sidebarSeparator.width-d;
|
||||
if (sidebarSeparator.opening) {
|
||||
newSidebarWidth -= 13;
|
||||
newSidebarWidth -= 3;
|
||||
}
|
||||
|
||||
if (newSidebarWidth > 150) {
|
||||
@ -155,7 +156,7 @@ RED.sidebar = (function() {
|
||||
}
|
||||
}
|
||||
$("#sidebar-separator").css("left","auto");
|
||||
$("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px");
|
||||
$("#sidebar-separator").css("right",($("#sidebar").width()+3)+"px");
|
||||
RED.events.emit("sidebar:resize");
|
||||
}
|
||||
});
|
||||
|
||||
@ -1224,8 +1224,8 @@ RED.view = (function() {
|
||||
.attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
|
||||
.attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
|
||||
nodeButtonGroup.append('rect')
|
||||
.attr("rx",8)
|
||||
.attr("ry",8)
|
||||
.attr("rx",5)
|
||||
.attr("ry",5)
|
||||
.attr("width",32)
|
||||
.attr("height",node_height-4)
|
||||
.attr("fill","#eee");//function(d) { return d._def.color;})
|
||||
@ -1233,8 +1233,8 @@ RED.view = (function() {
|
||||
.attr("class","node_button_button")
|
||||
.attr("x",function(d) { return d._def.align == "right"? 10:5})
|
||||
.attr("y",4)
|
||||
.attr("rx",5)
|
||||
.attr("ry",5)
|
||||
.attr("rx",4)
|
||||
.attr("ry",4)
|
||||
.attr("width",16)
|
||||
.attr("height",node_height-12)
|
||||
.attr("fill",function(d) { return d._def.color;})
|
||||
@ -1256,8 +1256,8 @@ RED.view = (function() {
|
||||
var mainRect = node.append("rect")
|
||||
.attr("class", "node")
|
||||
.classed("node_unknown",function(d) { return d.type == "unknown"; })
|
||||
.attr("rx", 6)
|
||||
.attr("ry", 6)
|
||||
.attr("rx", 5)
|
||||
.attr("ry", 5)
|
||||
.attr("fill",function(d) { return d._def.color;})
|
||||
.on("mouseup",nodeMouseUp)
|
||||
.on("mousedown",nodeMouseDown)
|
||||
|
||||
@ -49,10 +49,6 @@
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#workspace {
|
||||
@include component-border;
|
||||
}
|
||||
|
||||
.node_label_italic {
|
||||
font-style: italic;
|
||||
}
|
||||
@ -90,7 +86,7 @@
|
||||
.node {
|
||||
stroke: #999;
|
||||
cursor: move;
|
||||
stroke-width: 2;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.node_unknown {
|
||||
stroke-dasharray:10,4;
|
||||
@ -116,11 +112,11 @@
|
||||
|
||||
.node_button {
|
||||
fill: inherit;
|
||||
|
||||
|
||||
}
|
||||
.port {
|
||||
stroke: #999;
|
||||
stroke-width: 2;
|
||||
stroke-width: 1;
|
||||
fill: #ddd;
|
||||
cursor: crosshair;
|
||||
}
|
||||
@ -152,17 +148,18 @@
|
||||
pointer-events: none;
|
||||
-webkit-touch-callout: none;
|
||||
@include disable-selection;
|
||||
|
||||
|
||||
}
|
||||
.node_invalid {
|
||||
stroke: #ff0000;
|
||||
}
|
||||
.node_selected {
|
||||
stroke-width: 2;
|
||||
stroke: #ff7f0e !important;
|
||||
}
|
||||
.node_highlighted {
|
||||
stroke: #dd1616;
|
||||
stroke-width: 3;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 10, 4;
|
||||
}
|
||||
.node_hovered {
|
||||
@ -180,7 +177,7 @@
|
||||
|
||||
.drag_line {
|
||||
stroke: #ff7f0e;
|
||||
stroke-width: 5;
|
||||
stroke-width: 4;
|
||||
fill: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -194,7 +191,7 @@
|
||||
|
||||
.link_line {
|
||||
stroke: #7f7f7f;
|
||||
stroke-width: 4;
|
||||
stroke-width: 3;
|
||||
fill: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -202,12 +199,12 @@
|
||||
.link_subflow {
|
||||
stroke: #bbb;
|
||||
stroke-dasharray: 10,5;
|
||||
stroke-width: 3;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.link_outline {
|
||||
stroke: #fff;
|
||||
stroke-width: 6;
|
||||
stroke-width: 4;
|
||||
cursor: crosshair;
|
||||
fill: none;
|
||||
pointer-events: none;
|
||||
@ -215,7 +212,7 @@
|
||||
.link_background {
|
||||
stroke: #fff;
|
||||
opacity: 0;
|
||||
stroke-width: 25;
|
||||
stroke-width: 20;
|
||||
cursor: crosshair;
|
||||
fill: none;
|
||||
}
|
||||
@ -228,4 +225,3 @@ g.link_unknown path.link_line {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 10, 4;
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
}
|
||||
|
||||
@mixin component-border {
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #999;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -17,24 +17,24 @@
|
||||
|
||||
#palette {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
top: 0px;
|
||||
bottom: 10px;
|
||||
left:10px;
|
||||
left:0px;
|
||||
background: #f3f3f3;
|
||||
width: 170px;
|
||||
width: 180px;
|
||||
text-align: center;
|
||||
@include disable-selection;
|
||||
@include component-border;
|
||||
|
||||
|
||||
}
|
||||
.palette-scroll {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
bottom: 35px;
|
||||
bottom: 0;
|
||||
left:0;
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
@ -44,27 +44,30 @@
|
||||
#palette-search {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left:0;
|
||||
right:0;
|
||||
overflow: hidden;
|
||||
background: #f3f3f3;
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
padding: 3px;
|
||||
border-top: 1px solid #999;
|
||||
border-bottom: 1px solid #999;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
#palette-search i {
|
||||
color: #666;
|
||||
}
|
||||
#palette-search i.fa-search {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 4px;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
top: 11px;
|
||||
}
|
||||
#palette-search i.fa-times {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 10px;
|
||||
right: 7px;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
#palette-search-clear {
|
||||
@ -91,25 +94,22 @@
|
||||
}
|
||||
|
||||
.palette-category {
|
||||
border: 1px solid #999;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.palette-content {
|
||||
background: #fff;
|
||||
border-top: 1px solid #aaa;
|
||||
padding-bottom: 3px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.palette-header {
|
||||
background: #f3f3f3;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding: 1px;
|
||||
padding: 9px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.palette-header i {
|
||||
margin: 3px 4px 3px 3px;
|
||||
margin: 3px 10px 3px 3px;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
@ -141,8 +141,8 @@
|
||||
background: #ddd;
|
||||
margin: 10px auto;
|
||||
height: 25px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #999;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #999;
|
||||
background-position: 5% 50%;
|
||||
background-repeat: no-repeat;
|
||||
width: 120px;
|
||||
@ -181,7 +181,7 @@
|
||||
bottom:0;
|
||||
left:0;
|
||||
width: 30px;
|
||||
border-right: 2px solid rgba(0,0,0,0.1);
|
||||
border-right: 1px solid rgba(0,0,0,0.1);
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
.palette_icon_container_right {
|
||||
|
||||
@ -14,14 +14,14 @@
|
||||
* limitations under the License.
|
||||
**/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 10px;
|
||||
width: 305px;
|
||||
width: 315px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
@include component-border;
|
||||
@ -35,10 +35,11 @@
|
||||
|
||||
#sidebar-content {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
bottom: 1px;
|
||||
left: 0px;
|
||||
padding-top: 10px;
|
||||
font-size: 1.2em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -57,4 +58,3 @@
|
||||
.sidebar-closed > #sidebar-separator { right: 0px !important; }
|
||||
.sidebar-closed > #workspace { right: 15px !important; }
|
||||
.sidebar-closed > #chart-zoom-controls { right: 35px !important; }
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
|
||||
|
||||
@import "mixins";
|
||||
|
||||
@import "jquery";
|
||||
@ -46,12 +46,12 @@
|
||||
body {
|
||||
font: 13px "Helvetica" !important;
|
||||
padding-top: 100px;
|
||||
background: url("images/pw_maze_white.png");
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
position: absolute;
|
||||
top:50px; left:0; bottom: 0; right:0;
|
||||
top:40px; left:0; bottom: 0; right:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
@ -65,6 +65,3 @@ i.spinner {
|
||||
background: url(images/spin.svg) no-repeat 50% 50%;
|
||||
background-size: contain
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -16,12 +16,13 @@
|
||||
|
||||
ul.red-ui-tabs {
|
||||
list-style-type: none;
|
||||
padding:5px 2px 0px 5px;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
height: 24px;
|
||||
height: 35px;
|
||||
box-sizing:border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
background: #e3e3e3;
|
||||
background: #fff;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
@ -30,17 +31,16 @@ ul.red-ui-tabs {
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
box-sizing:border-box;
|
||||
display: inline-block;
|
||||
border-left: 1px solid #999;
|
||||
border-top: 1px solid #999;
|
||||
border-right: 1px solid #999;
|
||||
border-bottom: 1px solid #999;
|
||||
background: #e3e3e3;
|
||||
margin: 0 5px 0 0;
|
||||
height: 23px;
|
||||
line-height: 17px;
|
||||
background: #f3f3f3;
|
||||
margin: 3px 3px 0 3px;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
max-width: 200px;
|
||||
width: 14%;
|
||||
overflow: hidden;
|
||||
@ -49,7 +49,9 @@ ul.red-ui-tabs li {
|
||||
|
||||
ul.red-ui-tabs li a.red-ui-tab-label {
|
||||
display: block;
|
||||
padding: 3px 16px;
|
||||
padding: 3px 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
}
|
||||
ul.red-ui-tabs li {
|
||||
@ -75,11 +77,15 @@ ul.red-ui-tabs li a.red-ui-tab-close:hover {
|
||||
}
|
||||
ul.red-ui-tabs li a:hover {
|
||||
text-decoration: none;
|
||||
background: #f0f0f0;
|
||||
background: #ddd;
|
||||
}
|
||||
ul.red-ui-tabs li a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li.active {
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
ul.red-ui-tabs li.active a {
|
||||
@ -93,7 +99,6 @@ ul.red-ui-tabs li.active a.red-ui-tab-label:hover {
|
||||
}
|
||||
ul.red-ui-tabs li.red-ui-add-tab {
|
||||
width: 25px;
|
||||
border-top-right-radius: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
ul.red-ui-tabs li.red-ui-add-tab a {
|
||||
|
||||
@ -20,9 +20,10 @@
|
||||
background: #e3e3e3;
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
top: 30px;
|
||||
top: 35px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
#chart svg:focus {
|
||||
outline: none;
|
||||
@ -31,11 +32,12 @@
|
||||
#workspace {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top:5px;
|
||||
left:190px;
|
||||
top:0px;
|
||||
left:179px;
|
||||
bottom: 10px;
|
||||
right: 330px;
|
||||
overflow: hidden;
|
||||
@include component-border;
|
||||
}
|
||||
|
||||
#chart-zoom-controls {
|
||||
@ -56,21 +58,21 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 29px;
|
||||
height: 34px;
|
||||
width: 28px;
|
||||
border-bottom: 1px solid #999;
|
||||
border-left: 1px solid #999;
|
||||
}
|
||||
|
||||
#btn-workspace-add-tab {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background: #e3e3e3;
|
||||
background: #f3f3f3;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
#btn-workspace-add-tab:hover {
|
||||
background: #efefef;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
|
||||
@ -154,7 +154,7 @@
|
||||
},
|
||||
"palette": {
|
||||
"noInfo": "no information available",
|
||||
"filter": "filter",
|
||||
"filter": "filter nodes",
|
||||
"label": {
|
||||
"subflows": "subflows",
|
||||
"input": "input",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user