mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Move edit tray buttons to top
This commit is contained in:
Nick O'Leary
parent
8080ebceb4
commit
ce25fc658b
@ -15,6 +15,8 @@
|
||||
**/
|
||||
RED.editor = (function() {
|
||||
|
||||
|
||||
var editStack = [];
|
||||
var editing_node = null;
|
||||
var editing_config_node = null;
|
||||
var subflowEditor;
|
||||
@ -417,19 +419,86 @@ RED.editor = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
function getEditStackTitle() {
|
||||
|
||||
var title = '<ul class="editor-tray-breadcrumbs">';
|
||||
for (var i=0;i<editStack.length;i++) {
|
||||
var node = editStack[i];
|
||||
var label = node.type;
|
||||
if (node.type === 'subflow') {
|
||||
label = RED._("subflow.editSubflow",{name:node.name})
|
||||
} else if (node.type.indexOf("subflow:")===0) {
|
||||
var subflow = RED.nodes.subflow(node.type.substring(8));
|
||||
label = RED._("subflow.editSubflow",{name:subflow.name})
|
||||
} else {
|
||||
if (typeof node._def.paletteLabel !== "undefined") {
|
||||
try {
|
||||
label = (typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"";
|
||||
} catch(err) {
|
||||
console.log("Definition error: "+node.type+".paletteLabel",err);
|
||||
}
|
||||
}
|
||||
if (i === editStack.length-1) {
|
||||
if (RED.nodes.node(node.id)) {
|
||||
label = RED._("editor.editNode",{type:label});
|
||||
} else {
|
||||
label = RED._("editor.addNewConfig",{type:label});
|
||||
}
|
||||
}
|
||||
}
|
||||
title += '<li>'+label+'</li>';
|
||||
}
|
||||
title += '</ul>';
|
||||
return title;
|
||||
}
|
||||
|
||||
function showEditDialog(node) {
|
||||
var editing_node = node;
|
||||
editStack.push(node);
|
||||
RED.view.state(RED.state.EDITING);
|
||||
var type = node.type;
|
||||
if (node.type.substring(0,8) == "subflow:") {
|
||||
type = "subflow";
|
||||
}
|
||||
var trayOptions = {
|
||||
title: "Edit "+type+" node",
|
||||
title: getEditStackTitle(),
|
||||
buttons: [
|
||||
{
|
||||
id: "node-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
if (editing_node._def) {
|
||||
if (editing_node._def.oneditcancel) {
|
||||
editing_node._def.oneditcancel.call(editing_node);
|
||||
}
|
||||
|
||||
for (var d in editing_node._def.defaults) {
|
||||
if (editing_node._def.defaults.hasOwnProperty(d)) {
|
||||
var def = editing_node._def.defaults[d];
|
||||
if (def.type) {
|
||||
var configTypeDef = RED.nodes.getType(def.type);
|
||||
if (configTypeDef && configTypeDef.exclusive) {
|
||||
var input = $("#node-input-"+d).val()||"";
|
||||
if (input !== "" && !editing_node[d]) {
|
||||
// This node has an exclusive config node that
|
||||
// has just been added. As the user is cancelling
|
||||
// the edit, need to delete the just-added config
|
||||
// node so that it doesn't get orphaned.
|
||||
RED.nodes.remove(input);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-ok",
|
||||
text: RED._("common.label.ok"),
|
||||
text: RED._("common.label.done"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
var changes = {};
|
||||
var changed = false;
|
||||
@ -556,38 +625,6 @@ RED.editor = (function() {
|
||||
RED.view.redraw(true);
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
if (editing_node._def) {
|
||||
if (editing_node._def.oneditcancel) {
|
||||
editing_node._def.oneditcancel.call(editing_node);
|
||||
}
|
||||
|
||||
for (var d in editing_node._def.defaults) {
|
||||
if (editing_node._def.defaults.hasOwnProperty(d)) {
|
||||
var def = editing_node._def.defaults[d];
|
||||
if (def.type) {
|
||||
var configTypeDef = RED.nodes.getType(def.type);
|
||||
if (configTypeDef && configTypeDef.exclusive) {
|
||||
var input = $("#node-input-"+d).val()||"";
|
||||
if (input !== "" && !editing_node[d]) {
|
||||
// This node has an exclusive config node that
|
||||
// has just been added. As the user is cancelling
|
||||
// the edit, need to delete the just-added config
|
||||
// node so that it doesn't get orphaned.
|
||||
RED.nodes.remove(input);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
RED.tray.close();
|
||||
}
|
||||
}
|
||||
],
|
||||
resize: function(dimensions) {
|
||||
@ -631,26 +668,6 @@ RED.editor = (function() {
|
||||
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
|
||||
prepareEditDialog(node,node._def,"node-input");
|
||||
dialogForm.i18n();
|
||||
|
||||
// var minWidth = $(this).dialog('option','minWidth');
|
||||
// if ($(this).outerWidth() < minWidth) {
|
||||
// $(this).dialog('option','width',minWidth);
|
||||
// } else {
|
||||
// $(this).dialog('option','width',$(this).outerWidth());
|
||||
// }
|
||||
// if (editing_node) {
|
||||
// var size = $(this).dialog('option','sizeCache-'+editing_node.type);
|
||||
// if (size) {
|
||||
// $(this).dialog('option','width',size.width);
|
||||
// $(this).dialog('option','height',size.height);
|
||||
// }
|
||||
// if (editing_node._def.oneditresize) {
|
||||
// setTimeout(function() {
|
||||
// var form = $("#dialog-form");
|
||||
// editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
|
||||
// },0);
|
||||
// }
|
||||
// }
|
||||
},
|
||||
close: function() {
|
||||
RED.keyboard.enable();
|
||||
@ -661,6 +678,7 @@ RED.editor = (function() {
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
}
|
||||
RED.workspaces.refresh();
|
||||
editStack.pop();
|
||||
},
|
||||
show: function() {
|
||||
if (editing_node) {
|
||||
@ -668,14 +686,6 @@ RED.editor = (function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
/*).parent().on('keydown', function(evt) {
|
||||
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
|
||||
$("#node-dialog-cancel").click();
|
||||
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
|
||||
$("#node-dialog-ok").click();
|
||||
}
|
||||
});
|
||||
*/
|
||||
if (editTrayWidthCache[type]) {
|
||||
trayOptions.width = editTrayWidthCache[type];
|
||||
}
|
||||
@ -683,7 +693,7 @@ RED.editor = (function() {
|
||||
if (type === 'subflow') {
|
||||
var id = editing_node.type.substring(8);
|
||||
trayOptions.buttons.unshift({
|
||||
class: 'leftButton',
|
||||
class: 'leftButton primary',
|
||||
text: RED._("subflow.edit"),
|
||||
click: function() {
|
||||
RED.workspaces.show(id);
|
||||
@ -730,9 +740,11 @@ RED.editor = (function() {
|
||||
}
|
||||
editing_config_node["_"] = node_def._;
|
||||
}
|
||||
editStack.push(editing_config_node);
|
||||
|
||||
RED.view.state(RED.state.EDITING);
|
||||
var trayOptions = {
|
||||
title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
|
||||
title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
|
||||
resize: function() {
|
||||
if (editing_config_node && editing_config_node._def.oneditresize) {
|
||||
var form = $("#node-config-dialog-edit-form");
|
||||
@ -745,7 +757,7 @@ RED.editor = (function() {
|
||||
var trayFooter = tray.find(".editor-tray-footer");
|
||||
|
||||
trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
|
||||
trayHeader.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
|
||||
trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
|
||||
|
||||
RED.keyboard.disable();
|
||||
|
||||
@ -822,6 +834,7 @@ RED.editor = (function() {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
RED.workspaces.refresh();
|
||||
editStack.pop();
|
||||
},
|
||||
show: function() {
|
||||
if (editing_config_node) {
|
||||
@ -830,9 +843,33 @@ RED.editor = (function() {
|
||||
}
|
||||
}
|
||||
trayOptions.buttons = [
|
||||
{
|
||||
id: "node-config-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
var configType = type;
|
||||
var configId = editing_config_node.id;
|
||||
var configAdding = adding;
|
||||
var configTypeDef = RED.nodes.getType(configType);
|
||||
|
||||
if (configTypeDef.oneditcancel) {
|
||||
// TODO: what to pass as this to call
|
||||
if (configTypeDef.oneditcancel) {
|
||||
var cn = RED.nodes.node(configId);
|
||||
if (cn) {
|
||||
configTypeDef.oneditcancel.call(cn,false);
|
||||
} else {
|
||||
configTypeDef.oneditcancel.call({id:configId},true);
|
||||
}
|
||||
}
|
||||
}
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-config-dialog-ok",
|
||||
text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
var configProperty = name;
|
||||
var configId = editing_config_node.id;
|
||||
@ -931,36 +968,13 @@ RED.editor = (function() {
|
||||
updateConfigNodeSelect(configProperty,configType,editing_config_node.id,prefix);
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-config-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
var configType = type;
|
||||
var configId = editing_config_node.id;
|
||||
var configAdding = adding;
|
||||
var configTypeDef = RED.nodes.getType(configType);
|
||||
|
||||
if (configTypeDef.oneditcancel) {
|
||||
// TODO: what to pass as this to call
|
||||
if (configTypeDef.oneditcancel) {
|
||||
var cn = RED.nodes.node(configId);
|
||||
if (cn) {
|
||||
configTypeDef.oneditcancel.call(cn,false);
|
||||
} else {
|
||||
configTypeDef.oneditcancel.call({id:configId},true);
|
||||
}
|
||||
}
|
||||
}
|
||||
RED.tray.close();
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
if (!adding) {
|
||||
trayOptions.buttons.unshift({
|
||||
class: 'leftButton',
|
||||
text: RED._("editor.configDelete"),
|
||||
text: RED._("editor.configDelete"), //'<i class="fa fa-trash"></i>',
|
||||
click: function() {
|
||||
var configProperty = name;
|
||||
var configId = editing_config_node.id;
|
||||
@ -1067,15 +1081,24 @@ RED.editor = (function() {
|
||||
|
||||
function showEditSubflowDialog(subflow) {
|
||||
var editing_node = subflow;
|
||||
editStack.push(subflow);
|
||||
RED.view.state(RED.state.EDITING);
|
||||
var subflowEditor;
|
||||
|
||||
var trayOptions = {
|
||||
title: RED._("subflow.editSubflow",{name:subflow.name}),
|
||||
title: getEditStackTitle(),
|
||||
buttons: [
|
||||
{
|
||||
id: "node-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-ok",
|
||||
text: RED._("common.label.ok"),
|
||||
class: "primary",
|
||||
text: RED._("common.label.done"),
|
||||
click: function() {
|
||||
var i;
|
||||
var changes = {};
|
||||
@ -1133,13 +1156,6 @@ RED.editor = (function() {
|
||||
editing_node.dirty = true;
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
RED.tray.close();
|
||||
}
|
||||
}
|
||||
],
|
||||
resize: function() {
|
||||
@ -1189,7 +1205,7 @@ RED.editor = (function() {
|
||||
});
|
||||
|
||||
$("#subflow-input-name").val(subflow.name);
|
||||
subflowEditor.getSession().setValue(subflow.info,-1);
|
||||
subflowEditor.getSession().setValue(subflow.info||"",-1);
|
||||
var userCount = 0;
|
||||
var subflowType = "subflow:"+editing_node.id;
|
||||
|
||||
@ -1209,6 +1225,7 @@ RED.editor = (function() {
|
||||
}
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
RED.workspaces.refresh();
|
||||
editStack.pop();
|
||||
editing_node = null;
|
||||
},
|
||||
show: function() {
|
||||
@ -1222,6 +1239,15 @@ RED.editor = (function() {
|
||||
return {
|
||||
init: function() {
|
||||
RED.tray.init();
|
||||
$(window).on('keydown', function(evt) {
|
||||
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
|
||||
$("#node-dialog-cancel").click();
|
||||
$("#node-config-dialog-cancel").click();
|
||||
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
|
||||
$("#node-dialog-ok").click();
|
||||
$("#node-config-dialog-ok").click();
|
||||
}
|
||||
});
|
||||
},
|
||||
edit: showEditDialog,
|
||||
editConfig: showEditConfigNodeDialog,
|
||||
|
||||
@ -17,7 +17,7 @@ RED.sidebar.config = (function() {
|
||||
|
||||
|
||||
var content = document.createElement("div");
|
||||
content.className = "sidebar-node-config"
|
||||
content.className = "sidebar-node-config";
|
||||
|
||||
$('<div class="button-group sidebar-header">'+
|
||||
'<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
|
||||
@ -35,6 +35,9 @@ RED.sidebar.config = (function() {
|
||||
var flowCategories = $("<div>").appendTo(content);
|
||||
var subflowCategories = $("<div>").appendTo(content);
|
||||
|
||||
|
||||
var shade = $('<div class="sidebar-node-config-shade hide"></div>').appendTo(content);
|
||||
|
||||
var showUnusedOnly = false;
|
||||
|
||||
var categories = {};
|
||||
@ -288,6 +291,12 @@ RED.sidebar.config = (function() {
|
||||
return {
|
||||
init:init,
|
||||
show:show,
|
||||
refresh:refreshConfigNodeList
|
||||
refresh:refreshConfigNodeList,
|
||||
disable: function() {
|
||||
shade.show();
|
||||
},
|
||||
enable: function() {
|
||||
shade.hide();
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
@ -22,23 +22,26 @@ RED.tray = (function() {
|
||||
}
|
||||
function showTray(options) {
|
||||
var el = $('<div class="editor-tray"></div>');
|
||||
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
|
||||
var header = $('<div class="editor-tray-header"></div>').appendTo(el);
|
||||
var body = $('<div class="editor-tray-body"></div>').appendTo(el);
|
||||
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
|
||||
var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
|
||||
var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
|
||||
var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
|
||||
|
||||
// var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
|
||||
// var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
|
||||
if (options.title) {
|
||||
$('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
|
||||
}
|
||||
var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
|
||||
if (options.buttons) {
|
||||
for (var i=0;i<options.buttons.length;i++) {
|
||||
var button = options.buttons[i];
|
||||
|
||||
var b = $('<button>').appendTo(footer);
|
||||
var b = $('<button>').appendTo(buttonBar);
|
||||
if (button.id) {
|
||||
b.attr('id',button.id);
|
||||
}
|
||||
if (button.text) {
|
||||
b.text(button.text);
|
||||
b.html(button.text);
|
||||
}
|
||||
if (button.click) {
|
||||
b.click(button.click);
|
||||
@ -56,6 +59,8 @@ RED.tray = (function() {
|
||||
footer: footer,
|
||||
options: options
|
||||
};
|
||||
stack.push(tray);
|
||||
|
||||
el.draggable({
|
||||
handle: resizer,
|
||||
axis: "x",
|
||||
@ -88,6 +93,7 @@ RED.tray = (function() {
|
||||
|
||||
$("#header-shade").show();
|
||||
$("#editor-shade").show();
|
||||
RED.sidebar.config.disable();
|
||||
|
||||
tray.preferredWidth = el.width();
|
||||
if (options.width) {
|
||||
@ -103,8 +109,6 @@ RED.tray = (function() {
|
||||
});
|
||||
$("#workspace").scrollLeft(0);
|
||||
|
||||
stack.push(tray);
|
||||
|
||||
var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
|
||||
body.height(trayHeight-40);
|
||||
|
||||
@ -123,27 +127,27 @@ RED.tray = (function() {
|
||||
el.css({right:0});
|
||||
},0);
|
||||
|
||||
growButton.click(function(e) {
|
||||
e.preventDefault();
|
||||
tray.lastWidth = tray.width;
|
||||
tray.width = $("#editor-stack").position().left-8;
|
||||
el.width(tray.width);
|
||||
if (options.resize) {
|
||||
options.resize({width:tray.width});
|
||||
}
|
||||
});
|
||||
shrinkButton.click(function(e) {
|
||||
e.preventDefault();
|
||||
if (tray.lastWidth && tray.width > tray.lastWidth) {
|
||||
tray.width = tray.lastWidth;
|
||||
} else if (tray.width > tray.preferredWidth) {
|
||||
tray.width = tray.preferredWidth;
|
||||
}
|
||||
el.width(tray.width);
|
||||
if (options.resize) {
|
||||
options.resize({width:tray.width});
|
||||
}
|
||||
});
|
||||
// growButton.click(function(e) {
|
||||
// e.preventDefault();
|
||||
// tray.lastWidth = tray.width;
|
||||
// tray.width = $("#editor-stack").position().left-8;
|
||||
// el.width(tray.width);
|
||||
// if (options.resize) {
|
||||
// options.resize({width:tray.width});
|
||||
// }
|
||||
// });
|
||||
// shrinkButton.click(function(e) {
|
||||
// e.preventDefault();
|
||||
// if (tray.lastWidth && tray.width > tray.lastWidth) {
|
||||
// tray.width = tray.lastWidth;
|
||||
// } else if (tray.width > tray.preferredWidth) {
|
||||
// tray.width = tray.preferredWidth;
|
||||
// }
|
||||
// el.width(tray.width);
|
||||
// if (options.resize) {
|
||||
// options.resize({width:tray.width});
|
||||
// }
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
@ -212,6 +216,8 @@ RED.tray = (function() {
|
||||
if (stack.length === 0) {
|
||||
$("#header-shade").hide();
|
||||
$("#editor-shade").hide();
|
||||
RED.sidebar.config.enable();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,3 +52,8 @@ $workspace-button-color-focus-outline: rgba(85,150,230,0.2);
|
||||
$typedInput-button-background: #efefef;
|
||||
$typedInput-button-background-hover: #ddd;
|
||||
$typedInput-button-background-active: #e3e3e3;
|
||||
|
||||
$editor-button-color-primary: #666;
|
||||
$editor-button-color-secondary: #999;
|
||||
|
||||
$shade-color: rgba(220,220,220,0.5);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Copyright 2015 IBM Corp.
|
||||
* Copyright 2015, 2016 IBM Corp.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@ -15,88 +15,139 @@
|
||||
**/
|
||||
|
||||
|
||||
#editor-stack {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
bottom: 0px;
|
||||
right: 323px;
|
||||
width: 0;
|
||||
}
|
||||
.editor-tray {
|
||||
position:absolute;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
min-width: 500px;
|
||||
width: auto;
|
||||
right: -1000px;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-left: 1px solid $secondary-border-color;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.editor-tray.open {
|
||||
right: 0;
|
||||
}
|
||||
.editor-tray-body {
|
||||
width: auto;
|
||||
padding: 20px;
|
||||
min-width: 500px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.editor-tray-header {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
background: $palette-header-background;
|
||||
}
|
||||
.editor-tray-footer {
|
||||
@include component-footer;
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
button {
|
||||
@include workspace-button;
|
||||
padding: 0.4em 1em;
|
||||
margin-right: 8px;
|
||||
#editor-stack {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
bottom: 0px;
|
||||
right: 323px;
|
||||
width: 0;
|
||||
}
|
||||
.editor-tray {
|
||||
position:absolute;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
min-width: 500px;
|
||||
width: auto;
|
||||
right: -1000px;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-left: 1px solid $secondary-border-color;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.editor-tray.open {
|
||||
right: 0;
|
||||
}
|
||||
.editor-tray-body {
|
||||
width: auto;
|
||||
padding: 20px;
|
||||
min-width: 500px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.editor-tray-header {
|
||||
@include disable-selection;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
background: $palette-header-background;
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&.leftButton {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.editor-tray-resize-handle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 7px;
|
||||
left: -9px;
|
||||
background: $background-color url(images/grip.png) no-repeat 50% 50%;
|
||||
cursor: col-resize;
|
||||
border-left: 1px solid $primary-border-color;
|
||||
box-shadow: -1px 0 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
.editor-tray-footer {
|
||||
@include component-footer;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.editor-tray-toolbar {
|
||||
text-align: right;
|
||||
padding: 8px;
|
||||
|
||||
button {
|
||||
@include workspace-button;
|
||||
padding: 0.4em 1em;
|
||||
margin-right: 8px;
|
||||
color: $editor-button-color-primary;
|
||||
&.leftButton {
|
||||
float: left;
|
||||
margin-top: 1px;
|
||||
}
|
||||
&:not(.leftButton):not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&:not(.primary) {
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
color: $editor-button-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-tray-titlebar {
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
padding: 8px;
|
||||
}
|
||||
.editor-tray-breadcrumbs {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding:0;
|
||||
margin:0;
|
||||
|
||||
&:not(:last-child) {
|
||||
color: $editor-button-color-secondary;
|
||||
font-weight: normal;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: '>';
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.editor-tray-resize-handle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 7px;
|
||||
left: -9px;
|
||||
background: $background-color url(images/grip.png) no-repeat 50% 50%;
|
||||
cursor: col-resize;
|
||||
border-left: 1px solid $primary-border-color;
|
||||
box-shadow: -1px 0 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
.editor-tray-resize-button {
|
||||
@include workspace-button;
|
||||
display: block;
|
||||
height: 20px;
|
||||
height: 37px;
|
||||
line-height: 35px;
|
||||
border: none;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
margin: 0;
|
||||
background: $background-color;
|
||||
color: $workspace-button-color-disabled;
|
||||
color: $workspace-button-color;
|
||||
}
|
||||
#editor-shade, #header-shade {
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
background: $shade-color;
|
||||
}
|
||||
#editor-shade, #header-shade {
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
background: rgba(220,220,220,0.5);
|
||||
}
|
||||
|
||||
|
||||
.dialog-form,#dialog-form, #dialog-config-form {
|
||||
@ -164,6 +215,7 @@
|
||||
cursor: auto;
|
||||
float: right;
|
||||
font-size: 12px !important;
|
||||
line-height: 35px;
|
||||
}
|
||||
#node-config-dialog-scope-warning {
|
||||
display: inline-block;
|
||||
@ -175,13 +227,14 @@
|
||||
margin: 1px 0 0 0;
|
||||
padding: 0;
|
||||
height: 22px;
|
||||
width: 110px;
|
||||
width: 150px;
|
||||
|
||||
}
|
||||
#node-config-dialog-user-count {
|
||||
vertical-align: middle;
|
||||
display:inline-block;
|
||||
margin-top: 10px;
|
||||
margin-right: 20px;
|
||||
float:left;
|
||||
font-size: 12px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
@ -15,11 +15,21 @@
|
||||
**/
|
||||
|
||||
.sidebar-node-config {
|
||||
position: relative;
|
||||
background: #f3f3f3;
|
||||
height: 100%;
|
||||
overflow-y:auto;
|
||||
@include disable-selection;
|
||||
}
|
||||
.sidebar-node-config-shade {
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
background: $shade-color;
|
||||
}
|
||||
|
||||
|
||||
.config-node-list {
|
||||
margin: 0;
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"label": {
|
||||
"name": "Name",
|
||||
"ok": "Ok",
|
||||
"done":"Done",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete",
|
||||
"close": "Close"
|
||||
@ -128,6 +129,7 @@
|
||||
"nodesUse": "__count__ node uses this config",
|
||||
"nodesUse_plural": "__count__ nodes use this config",
|
||||
"addNewConfig": "Add new __type__ config node",
|
||||
"editNode": "Edit __type__ node",
|
||||
"editConfig": "Edit __type__ config node",
|
||||
"addNewType": "Add new __type__...",
|
||||
"errors": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user