mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
More restylin
This commit is contained in:
parent
57d6b16d5c
commit
d3c41b38f7
@ -19,20 +19,44 @@ RED.palette = (function() {
|
|||||||
var exclusion = ['config','unknown','deprecated'];
|
var exclusion = ['config','unknown','deprecated'];
|
||||||
var core = ['subflows', 'input', 'output', 'function', 'social', 'storage', 'analysis', 'advanced'];
|
var core = ['subflows', 'input', 'output', 'function', 'social', 'storage', 'analysis', 'advanced'];
|
||||||
|
|
||||||
|
var categoryContainers = {};
|
||||||
|
|
||||||
function createCategoryContainer(category, label){
|
function createCategoryContainer(category, label){
|
||||||
label = label || category.replace("_", " ");
|
label = label || category.replace("_", " ");
|
||||||
var catDiv = $("#palette-container").append('<div id="palette-container-'+category+'" class="palette-category hide">'+
|
var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close hide">'+
|
||||||
'<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
|
'<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
|
||||||
'<div class="palette-content" id="palette-base-category-'+category+'">'+
|
'<div class="palette-content" id="palette-base-category-'+category+'">'+
|
||||||
'<div id="palette-'+category+'-input"></div>'+
|
'<div id="palette-'+category+'-input"></div>'+
|
||||||
'<div id="palette-'+category+'-output"></div>'+
|
'<div id="palette-'+category+'-output"></div>'+
|
||||||
'<div id="palette-'+category+'-function"></div>'+
|
'<div id="palette-'+category+'-function"></div>'+
|
||||||
'</div>'+
|
'</div>'+
|
||||||
'</div>');
|
'</div>').appendTo("#palette-container");
|
||||||
|
|
||||||
|
categoryContainers[category] = {
|
||||||
|
container: catDiv,
|
||||||
|
close: function() {
|
||||||
|
catDiv.removeClass("palette-open");
|
||||||
|
catDiv.addClass("palette-closed");
|
||||||
|
$("#palette-base-category-"+category).slideUp();
|
||||||
|
$("#palette-header-"+category+" i").removeClass("expanded");
|
||||||
|
},
|
||||||
|
open: function() {
|
||||||
|
catDiv.addClass("palette-open");
|
||||||
|
catDiv.removeClass("palette-closed");
|
||||||
|
$("#palette-base-category-"+category).slideDown();
|
||||||
|
$("#palette-header-"+category+" i").addClass("expanded");
|
||||||
|
},
|
||||||
|
toggle: function() {
|
||||||
|
if (catDiv.hasClass("palette-open")) {
|
||||||
|
categoryContainers[category].close();
|
||||||
|
} else {
|
||||||
|
categoryContainers[category].open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
$("#palette-header-"+category).on('click', function(e) {
|
$("#palette-header-"+category).on('click', function(e) {
|
||||||
$(this).next().slideToggle();
|
categoryContainers[category].toggle();
|
||||||
$(this).children("i").toggleClass("expanded");
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -196,10 +220,7 @@ RED.palette = (function() {
|
|||||||
|
|
||||||
var categoryNode = $("#palette-container-"+category);
|
var categoryNode = $("#palette-container-"+category);
|
||||||
if (categoryNode.find(".palette_node").length === 1) {
|
if (categoryNode.find(".palette_node").length === 1) {
|
||||||
if (!categoryNode.find("i").hasClass("expanded")) {
|
categoryContainers[category].open();
|
||||||
categoryNode.find(".palette-content").slideToggle();
|
|
||||||
categoryNode.find("i").toggleClass("expanded");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -269,6 +290,18 @@ RED.palette = (function() {
|
|||||||
$(this).hide();
|
$(this).hide();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
for (var category in categoryContainers) {
|
||||||
|
if (categoryContainers.hasOwnProperty(category)) {
|
||||||
|
if (categoryContainers[category].container
|
||||||
|
.find(".palette_node")
|
||||||
|
.filter(function() { return $(this).css('display') !== 'none'}).length === 0) {
|
||||||
|
categoryContainers[category].close();
|
||||||
|
} else {
|
||||||
|
categoryContainers[category].open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
@ -307,6 +340,23 @@ RED.palette = (function() {
|
|||||||
$("#palette-search-input").blur();
|
$("#palette-search-input").blur();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$("#palette-collapse-all").on("click", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
for (var cat in categoryContainers) {
|
||||||
|
if (categoryContainers.hasOwnProperty(cat)) {
|
||||||
|
categoryContainers[cat].close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$("#palette-expand-all").on("click", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
for (var cat in categoryContainers) {
|
||||||
|
if (categoryContainers.hasOwnProperty(cat)) {
|
||||||
|
categoryContainers[cat].open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -100,7 +100,6 @@ RED.sidebar = (function() {
|
|||||||
var newChartRight = 7;
|
var newChartRight = 7;
|
||||||
$("#sidebar").addClass("closing");
|
$("#sidebar").addClass("closing");
|
||||||
$("#workspace").css("right",newChartRight);
|
$("#workspace").css("right",newChartRight);
|
||||||
$("#chart-zoom-controls").css("right",newChartRight+20);
|
|
||||||
$("#sidebar").width(0);
|
$("#sidebar").width(0);
|
||||||
RED.menu.setSelected("menu-item-sidebar",true);
|
RED.menu.setSelected("menu-item-sidebar",true);
|
||||||
RED.events.emit("sidebar:resize");
|
RED.events.emit("sidebar:resize");
|
||||||
@ -139,7 +138,6 @@ RED.sidebar = (function() {
|
|||||||
|
|
||||||
var newChartRight = sidebarSeparator.chartRight-d;
|
var newChartRight = sidebarSeparator.chartRight-d;
|
||||||
$("#workspace").css("right",newChartRight);
|
$("#workspace").css("right",newChartRight);
|
||||||
$("#chart-zoom-controls").css("right",newChartRight+20);
|
|
||||||
$("#sidebar").width(newSidebarWidth);
|
$("#sidebar").width(newSidebarWidth);
|
||||||
|
|
||||||
sidebar_tabs.resize();
|
sidebar_tabs.resize();
|
||||||
@ -152,7 +150,6 @@ RED.sidebar = (function() {
|
|||||||
if ($("#sidebar").width() < 180) {
|
if ($("#sidebar").width() < 180) {
|
||||||
$("#sidebar").width(180);
|
$("#sidebar").width(180);
|
||||||
$("#workspace").css("right",187);
|
$("#workspace").css("right",187);
|
||||||
$("#chart-zoom-controls").css("right",210);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$("#sidebar-separator").css("left","auto");
|
$("#sidebar-separator").css("left","auto");
|
||||||
|
@ -52,12 +52,7 @@ RED.tabs = (function() {
|
|||||||
if (options.onchange) {
|
if (options.onchange) {
|
||||||
options.onchange(tabs[link.attr('href').slice(1)]);
|
options.onchange(tabs[link.attr('href').slice(1)]);
|
||||||
}
|
}
|
||||||
if (options.hasOwnProperty("minimumActiveTabWidth")) {
|
updateTabWidths();
|
||||||
ul.children().css({"width":currentTabWidth+"%"});
|
|
||||||
if (currentActiveTabWidth !== 0) {
|
|
||||||
link.parent().css({"width":currentActiveTabWidth});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
ul.children().css({"transition": ""});
|
ul.children().css({"transition": ""});
|
||||||
},100);
|
},100);
|
||||||
@ -68,14 +63,14 @@ RED.tabs = (function() {
|
|||||||
var tabs = ul.find("li.red-ui-tab");
|
var tabs = ul.find("li.red-ui-tab");
|
||||||
var width = ul.width();
|
var width = ul.width();
|
||||||
var tabCount = tabs.size();
|
var tabCount = tabs.size();
|
||||||
var tabWidth = (width-10-(tabCount*6))/tabCount;
|
var tabWidth = (width-12-(tabCount*6))/tabCount;
|
||||||
currentTabWidth = 100*tabWidth/width;
|
currentTabWidth = 100*tabWidth/width;
|
||||||
currentActiveTabWidth = currentTabWidth+"%";
|
currentActiveTabWidth = currentTabWidth+"%";
|
||||||
|
|
||||||
if (options.hasOwnProperty("minimumActiveTabWidth")) {
|
if (options.hasOwnProperty("minimumActiveTabWidth")) {
|
||||||
if (tabWidth < options.minimumActiveTabWidth) {
|
if (tabWidth < options.minimumActiveTabWidth) {
|
||||||
tabCount -= 1;
|
tabCount -= 1;
|
||||||
tabWidth = (width-10-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
|
tabWidth = (width-12-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
|
||||||
currentTabWidth = 100*tabWidth/width;
|
currentTabWidth = 100*tabWidth/width;
|
||||||
currentActiveTabWidth = options.minimumActiveTabWidth+"px";
|
currentActiveTabWidth = options.minimumActiveTabWidth+"px";
|
||||||
} else {
|
} else {
|
||||||
@ -83,9 +78,16 @@ RED.tabs = (function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
tabs.css({width:currentTabWidth+"%"});
|
tabs.css({width:currentTabWidth+"%"});
|
||||||
|
if (tabWidth < 50) {
|
||||||
|
ul.find(".red-ui-tab-close").hide();
|
||||||
|
} else {
|
||||||
|
ul.find(".red-ui-tab-close").show();
|
||||||
|
}
|
||||||
if (currentActiveTabWidth !== 0) {
|
if (currentActiveTabWidth !== 0) {
|
||||||
ul.find("li.red-ui-tab.active").css({"width":options.minimumActiveTabWidth});
|
ul.find("li.red-ui-tab.active").css({"width":options.minimumActiveTabWidth});
|
||||||
|
ul.find("li.red-ui-tab.active .red-ui-tab-close").show();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
|
ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
|
||||||
|
@ -66,9 +66,16 @@
|
|||||||
|
|
||||||
.editor-button {
|
.editor-button {
|
||||||
@include workspace-button;
|
@include workspace-button;
|
||||||
height: 30px;
|
height: 34px;
|
||||||
line-height: 28px;
|
line-height: 30px;
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
.editor-button-small {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
@ -149,14 +149,12 @@ input[type="color"],
|
|||||||
.uneditable-input {
|
.uneditable-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
padding: 4px 6px;
|
padding: 6px 6px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -239,13 +237,13 @@ input[type="checkbox"] {
|
|||||||
|
|
||||||
select,
|
select,
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
height: 30px;
|
height: 34px;
|
||||||
/* In IE7, the height of the select element cannot be changed by height, only font-size */
|
/* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||||
|
|
||||||
*margin-top: 4px;
|
*margin-top: 4px;
|
||||||
/* For IE7, add top margin to align select with labels */
|
/* For IE7, add top margin to align select with labels */
|
||||||
|
|
||||||
line-height: 30px;
|
line-height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
@ -56,3 +56,23 @@
|
|||||||
background: $workspace-button-background-active;
|
background: $workspace-button-background-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@mixin component-footer {
|
||||||
|
border-top: 1px solid $primary-border-color;
|
||||||
|
background: #f3f3f3;
|
||||||
|
text-align: right;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 23px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin component-footer-button {
|
||||||
|
@include workspace-button;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 17px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
@ -43,58 +43,3 @@
|
|||||||
.notification-error {
|
.notification-error {
|
||||||
border-color: #AD1625;
|
border-color: #AD1625;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
.notification {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
padding: 12px 20px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
|
|
||||||
color: #f0f0f0;
|
|
||||||
background-color: #5AAAFA;
|
|
||||||
border: 1px solid #325C80;
|
|
||||||
border-left-width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-success {
|
|
||||||
background: #5AA700;
|
|
||||||
border-color: #4B8400;
|
|
||||||
}
|
|
||||||
.notification-warning {
|
|
||||||
background:#FF7832;
|
|
||||||
border-color: #D74108;
|
|
||||||
}
|
|
||||||
.notification-error {
|
|
||||||
background: #FF5050;
|
|
||||||
border-color: #AD1625;
|
|
||||||
}
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
.notification {
|
|
||||||
position: relative;
|
|
||||||
padding: 12px 20px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.15);
|
|
||||||
color: #325C80;
|
|
||||||
background-color: #C0E6FF;
|
|
||||||
border: 1px solid #325C80;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-success {
|
|
||||||
color: #4B8400;
|
|
||||||
background-color: #C8F08F;
|
|
||||||
border-color: #4B8400;
|
|
||||||
}
|
|
||||||
.notification-warning {
|
|
||||||
color:#D74108;
|
|
||||||
border-color: #D74108;
|
|
||||||
background-color:#FFD791;
|
|
||||||
}
|
|
||||||
.notification-error {
|
|
||||||
color: #AD1625;
|
|
||||||
background-color: #FFD2DD;
|
|
||||||
border-color: #AD1625;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
#palette {
|
#palette {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
bottom: 10px;
|
bottom: 0px;
|
||||||
left:0px;
|
left:0px;
|
||||||
background: #f3f3f3;
|
background: #f3f3f3;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
@ -32,7 +32,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 35px;
|
top: 35px;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0px;
|
bottom: 25px;
|
||||||
left:0;
|
left:0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@ -56,23 +56,28 @@
|
|||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
}
|
}
|
||||||
#palette-search i {
|
#palette-search i {
|
||||||
|
font-size: 10px;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
#palette-search i.fa-search {
|
#palette-search i.fa-search {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
left: 5px;
|
left: 12px;
|
||||||
top: 11px;
|
top: 12px;
|
||||||
}
|
}
|
||||||
#palette-search i.fa-times {
|
#palette-search i.fa-times {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 7px;
|
right: 7px;
|
||||||
top: 11px;
|
top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#palette-search-clear {
|
#palette-search-clear {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 20px;
|
||||||
display: none;
|
display: none;
|
||||||
color: #000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#palette-search input {
|
#palette-search input {
|
||||||
@ -81,7 +86,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
padding: 3px 17px;
|
padding: 3px 17px 3px 22px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
@ -92,6 +97,13 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
}
|
}
|
||||||
|
#palette-footer {
|
||||||
|
@include component-footer;
|
||||||
|
}
|
||||||
|
.palette-button {
|
||||||
|
@include component-footer-button;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.palette-category {
|
.palette-category {
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
bottom: 10px;
|
bottom: 0px;
|
||||||
width: 315px;
|
width: 315px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -35,7 +35,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 35px;
|
top: 35px;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 1px;
|
bottom: 25px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@ -54,7 +54,6 @@
|
|||||||
.sidebar-closed > #sidebar { display: none; }
|
.sidebar-closed > #sidebar { display: none; }
|
||||||
.sidebar-closed > #sidebar-separator { right: 0px !important; }
|
.sidebar-closed > #sidebar-separator { right: 0px !important; }
|
||||||
.sidebar-closed > #workspace { right: 7px !important; }
|
.sidebar-closed > #workspace { right: 7px !important; }
|
||||||
.sidebar-closed > #chart-zoom-controls { right: 30px !important; }
|
|
||||||
|
|
||||||
#sidebar .button {
|
#sidebar .button {
|
||||||
@include workspace-button;
|
@include workspace-button;
|
||||||
@ -63,3 +62,7 @@
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sidebar-footer {
|
||||||
|
@include component-footer;
|
||||||
|
}
|
||||||
|
@ -68,3 +68,43 @@ i.spinner {
|
|||||||
background: url(images/spin.svg) no-repeat 50% 50%;
|
background: url(images/spin.svg) no-repeat 50% 50%;
|
||||||
background-size: contain
|
background-size: contain
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code, pre {
|
||||||
|
padding: 0 3px 2px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 0px 4px;
|
||||||
|
color: #AD1625;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: #f7f7f9;
|
||||||
|
border: 1px solid #e1e1e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
padding: 9.5px;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
white-space: pre;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
padding: 0;
|
||||||
|
color: inherit;
|
||||||
|
white-space: pre;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
@ -58,27 +58,46 @@ ul.red-ui-tabs li {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.red-ui-tabs li a.red-ui-tab-close {
|
.red-ui-tab-close {
|
||||||
background: rgba(227,227,227,0.8);
|
background: $tab-background-inactive;
|
||||||
|
opacity: 0.8;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 2px;
|
right: 0px;
|
||||||
top: 2px;
|
top: 0px;
|
||||||
display: block;
|
display: block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 30px;
|
||||||
line-height: 20px;
|
line-height: 28px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
border-radius: 5px;
|
color: #aaa;
|
||||||
color: #666;
|
&:hover {
|
||||||
|
background: $workspace-button-background-hover !important;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
ul.red-ui-tabs li a.red-ui-tab-close:hover {
|
|
||||||
background: #bbb !important;
|
|
||||||
}
|
}
|
||||||
ul.red-ui-tabs li a:hover {
|
ul.red-ui-tabs li:not(.active) a:hover+a.red-ui-tab-close {
|
||||||
text-decoration: none;
|
|
||||||
background: $tab-background-hover;
|
background: $tab-background-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul.red-ui-tabs li.active a.red-ui-tab-close {
|
||||||
|
color: #aaa;
|
||||||
|
background: $tab-background-active;
|
||||||
|
&:hover {
|
||||||
|
background: $workspace-button-background-hover !important;
|
||||||
|
color: $workspace-button-color-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.red-ui-tabs li a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.red-ui-tabs li:not(.active) a:hover {
|
||||||
|
color: $workspace-button-color-hover;
|
||||||
|
background: $tab-background-hover;
|
||||||
|
}
|
||||||
|
|
||||||
ul.red-ui-tabs li a:focus {
|
ul.red-ui-tabs li a:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
@ -91,16 +110,3 @@ ul.red-ui-tabs li.active {
|
|||||||
ul.red-ui-tabs li.active a {
|
ul.red-ui-tabs li.active a {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
ul.red-ui-tabs li.active a.red-ui-tab-close {
|
|
||||||
background: rgba(255,255,255,0.8);
|
|
||||||
}
|
|
||||||
ul.red-ui-tabs li.active a.red-ui-tab-label:hover {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
ul.red-ui-tabs li.red-ui-add-tab {
|
|
||||||
width: 25px;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
ul.red-ui-tabs li.red-ui-add-tab a {
|
|
||||||
padding: 2px 4px;
|
|
||||||
}
|
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: #e3e3e3;
|
background: #e3e3e3;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom:0px;
|
bottom:25px;
|
||||||
top: 35px;
|
top: 35px;
|
||||||
left:0px;
|
left:0px;
|
||||||
right:0px;
|
right:0px;
|
||||||
@ -34,44 +34,41 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
top:0px;
|
top:0px;
|
||||||
left:179px;
|
left:179px;
|
||||||
bottom: 10px;
|
bottom: 0px;
|
||||||
right: 322px;
|
right: 322px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@include component-border;
|
@include component-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chart-zoom-controls {
|
.workspace-footer-button {
|
||||||
position: absolute;
|
@include component-footer-button;
|
||||||
bottom:30px;
|
|
||||||
right: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-zoom-button {
|
|
||||||
@include workspace-button;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 17px;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspace-tabs {
|
#workspace-tabs {
|
||||||
margin-right: 28px;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspace-add-tab {
|
#workspace-add-tab {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 34px;
|
height: 35px;
|
||||||
width: 28px;
|
width: 40px;
|
||||||
|
background: #fff;
|
||||||
border-bottom: 1px solid $primary-border-color;
|
border-bottom: 1px solid $primary-border-color;
|
||||||
border-left: 1px solid $primary-border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#btn-workspace-add-tab {
|
#btn-workspace-add-tab {
|
||||||
@include workspace-button;
|
@include workspace-button;
|
||||||
border: none;
|
line-height: 32px;
|
||||||
width: 100%;
|
height: 32px;
|
||||||
height: 100%;
|
width: 32px;
|
||||||
line-height: 35px;
|
margin-top: 3px;
|
||||||
|
margin-right:8px;
|
||||||
|
border: 1px solid $primary-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
#workspace-footer {
|
||||||
|
@include component-footer;
|
||||||
}
|
}
|
||||||
|
@ -47,6 +47,11 @@
|
|||||||
<i class="fa fa-search"></i><input id="palette-search-input" type="text" data-i18n="[placeholder]palette.filter"><a href="#" id="palette-search-clear"><i class="fa fa-times"></i></a></input>
|
<i class="fa fa-search"></i><input id="palette-search-input" type="text" data-i18n="[placeholder]palette.filter"><a href="#" id="palette-search-clear"><i class="fa fa-times"></i></a></input>
|
||||||
</div>
|
</div>
|
||||||
<div id="palette-container" class="palette-scroll"></div>
|
<div id="palette-container" class="palette-scroll"></div>
|
||||||
|
<div id="palette-footer">
|
||||||
|
<a class="palette-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
|
||||||
|
<a class="palette-button" id="palette-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div><!-- /palette -->
|
</div><!-- /palette -->
|
||||||
|
|
||||||
<div id="workspace">
|
<div id="workspace">
|
||||||
@ -59,17 +64,16 @@
|
|||||||
<a class="button" id="workspace-subflow-add-output" href="#" data-i18n="[append]subflow.output"><i class="fa fa-plus"></i> </a>
|
<a class="button" id="workspace-subflow-add-output" href="#" data-i18n="[append]subflow.output"><i class="fa fa-plus"></i> </a>
|
||||||
<a class="button" id="workspace-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>
|
<a class="button" id="workspace-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="workspace-footer">
|
||||||
|
<a class="workspace-footer-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>
|
||||||
|
<a class="workspace-footer-button" id="btn-zoom-zero" href="#"><i class="fa fa-circle-o"></i></a>
|
||||||
|
<a class="workspace-footer-button" id="btn-zoom-in" href="#"><i class="fa fa-plus"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="chart-zoom-controls">
|
|
||||||
<a class="chart-zoom-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>
|
|
||||||
<a class="chart-zoom-button" id="btn-zoom-zero" href="#"><i class="fa fa-circle-o"></i></a>
|
|
||||||
<a class="chart-zoom-button" id="btn-zoom-in" href="#"><i class="fa fa-plus"></i></a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="sidebar">
|
<div id="sidebar">
|
||||||
<ul id="sidebar-tabs"></ul>
|
<ul id="sidebar-tabs"></ul>
|
||||||
<div id="sidebar-content"></div>
|
<div id="sidebar-content"></div>
|
||||||
|
<div id="sidebar-footer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="sidebar-separator"></div>
|
<div id="sidebar-separator"></div>
|
||||||
|
50
editor/vendor/bootstrap/css/bootstrap.css
vendored
50
editor/vendor/bootstrap/css/bootstrap.css
vendored
@ -860,56 +860,6 @@ address {
|
|||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
|
||||||
pre {
|
|
||||||
padding: 0 3px 2px;
|
|
||||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #333333;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
padding: 2px 4px;
|
|
||||||
color: #d14;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: #f7f7f9;
|
|
||||||
border: 1px solid #e1e1e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
display: block;
|
|
||||||
padding: 9.5px;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 20px;
|
|
||||||
word-break: break-all;
|
|
||||||
word-wrap: break-word;
|
|
||||||
white-space: pre;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre.prettyprint {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
padding: 0;
|
|
||||||
color: inherit;
|
|
||||||
white-space: pre;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pre-scrollable {
|
.pre-scrollable {
|
||||||
max-height: 340px;
|
max-height: 340px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<a href="#" class="editor-button" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
|
<a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<select id="node-input-checkall" style="width:100%; margin-right:5px;">
|
<select id="node-input-checkall" style="width:100%; margin-right:5px;">
|
||||||
@ -102,7 +102,7 @@
|
|||||||
var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
|
var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
|
||||||
finalspan.append(' → <span class="node-input-rule-index">'+i+'</span> ');
|
finalspan.append(' → <span class="node-input-rule-index">'+i+'</span> ');
|
||||||
|
|
||||||
var deleteButton = $('<a/>',{href:"#",class:"editor-button", style:"margin-left: 5px;"}).appendTo(finalspan);
|
var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
|
||||||
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
|
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
|
||||||
|
|
||||||
selectField.change(function() {
|
selectField.change(function() {
|
||||||
|
@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<a href="#" class="editor-button" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
|
<a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -121,7 +121,7 @@
|
|||||||
|
|
||||||
|
|
||||||
var finalspan = $('<span/>',{style:"float: right; margin-right: 10px;"}).appendTo(row1);
|
var finalspan = $('<span/>',{style:"float: right; margin-right: 10px;"}).appendTo(row1);
|
||||||
var deleteButton = $('<a/>',{href:"#",class:"editor-button", style:"margin-left: 5px;"}).appendTo(finalspan);
|
var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
|
||||||
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
|
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user