frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Move main ui over to font-awesome

Browse Source
This commit is contained in:
Nick O'Leary 2014-08-19 22:58:52 +01:00
parent 7042d87444
commit 1e33843798
7 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
public/index.html
View File

@ -6,7 +6,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<!-- <!--
Copyright 2013 IBM Corp. Copyright 2013, 2014 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -34,45 +34,45 @@
<div class="container-fluid"> <div class="container-fluid">
<a class="brand" href="#"><img src="node-red.png"> <span class="red">Node-RED</span> </a> <a class="brand" href="#"><img src="node-red.png"> <span class="red">Node-RED</span> </a>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <span class="caret"></span></a> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a id="btn-sidebar" tabindex="-1" href="#"><i class="icon-ok pull-right"></i><i class="icon-list-alt"></i> Sidebar</a></li> <li><a id="btn-sidebar" tabindex="-1" href="#"><i class="fa fa-check pull-right"></i><i class="fa fa-columns"></i> Sidebar</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a id="btn-node-status" tabindex="-1" href="#"><i class="icon-ok pull-right"></i><i class="icon-info-sign"></i> Node Status</a></li> <li><a id="btn-node-status" tabindex="-1" href="#"><i class="fa fa-check pull-right"></i><i class="fa fa-info"></i> Node Status</a></li>
<li class="divider"></li> <li class="divider"></li>
<li class="dropdown-submenu pull-left"><a tabindex="-1" href="#"><i class="icon-edit"></i> Import from...</a> <li class="dropdown-submenu pull-left"><a tabindex="-1" href="#"><i class="fa fa-sign-in"></i> Import from...</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a id="btn-import" tabindex="-1" href="#"><i class="icon-edit"></i> Clipboard...</a></li> <li><a id="btn-import" tabindex="-1" href="#"><i class="fa fa-clipboard"></i> Clipboard...</a></li>
<li id="flow-menu-parent" class="dropdown-submenu pull-left"> <li id="flow-menu-parent" class="dropdown-submenu pull-left">
<a tabindex="-1" href="#"><i class="icon-book"></i> Library</a> <a tabindex="-1" href="#"><i class="fa fa-book"></i> Library</a>
<ul class="dropdown-menu"></ul> <ul class="dropdown-menu"></ul>
</li> </li>
</ul> </ul>
</li> </li>
<li id="li-menu-export" class="dropdown-submenu disabled pull-left"><a tabindex="-1" href="#"><i class="icon-share"></i> Export to...</a> <li id="li-menu-export" class="dropdown-submenu disabled pull-left"><a tabindex="-1" href="#"><i class="fa fa-sign-out"></i> Export to...</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li id="li-menu-export-clipboard" class="disabled"><a id="btn-export-clipboard" tabindex="-1" href="#"><i class="icon-share"></i> Clipboard...</a></li> <li id="li-menu-export-clipboard" class="disabled"><a id="btn-export-clipboard" tabindex="-1" href="#"><i class="fa fa-clipboard"></i> Clipboard...</a></li>
<li id="li-menu-export-library" class="disabled"><a id="btn-export-library" tabindex="-1" href="#"><i class="icon-book"></i> Library...</a></li> <li id="li-menu-export-library" class="disabled"><a id="btn-export-library" tabindex="-1" href="#"><i class="fa fa-book"></i> Library...</a></li>
</ul> </ul>
</li> </li>
<li class="divider"></li> <li class="divider"></li>
<li><a id="btn-config-nodes" tabindex="-1" href="#"><i class="icon-th-list"></i> Configuration nodes...</a></li> <li><a id="btn-config-nodes" tabindex="-1" href="#"><i class="fa fa-th-list"></i> Configuration nodes...</a></li>
<li class="divider"></li> <li class="divider"></li>
<li class="dropdown-submenu pull-left"><a tabindex="-1" href="#"><i class="icon-th-large"></i> Workspaces</a> <li class="dropdown-submenu pull-left"><a tabindex="-1" href="#"><i class="fa fa-th-large"></i> Workspaces</a>
<ul id="workspace-menu-list" class="dropdown-menu"> <ul id="workspace-menu-list" class="dropdown-menu">
<li><a id="btn-workspace-add" tabindex="-1" href="#"><i class="icon-plus"></i> Add</a></li> <li><a id="btn-workspace-add" tabindex="-1" href="#"><i class="fa fa-plus"></i> Add</a></li>
<li><a id="btn-workspace-edit" tabindex="-1" href="#"><i class="icon-edit"></i> Rename</a></li> <li><a id="btn-workspace-edit" tabindex="-1" href="#"><i class="fa fa-pencil"></i> Rename</a></li>
<li><a id="btn-workspace-delete" tabindex="-1" href="#"><i class="icon-minus"></i> Delete</a></li> <li><a id="btn-workspace-delete" tabindex="-1" href="#"><i class="fa fa-minus"></i> Delete</a></li>
<li class="divider"></li> <li class="divider"></li>
</ul> </ul>
</li> </li>
<li class="divider"></li> <li class="divider"></li>
<li><a id="btn-keyboard-shortcuts" tabindex="-1" href="#"><i class="icon-question-sign"></i> Keyboard Shortcuts</a></li> <li><a id="btn-keyboard-shortcuts" tabindex="-1" href="#"><i class="fa fa-keyboard-o"></i> Keyboard Shortcuts</a></li>
<li><a id="btn-help" tabindex="-1" href="http://node-red.github.io/docs" target="_blank"><i class="icon-question-sign"></i> Help...</a></li> <li><a id="btn-help" tabindex="-1" href="http://node-red.github.io/docs" target="_blank"><i class="fa fa-question"></i> Help...</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a id="btn-deploy" class="btn action-deploy disabled" href="#"><i id="btn-icn-deploy" class="icon-upload"></i> Deploy</a> <a id="btn-deploy" class="btn action-deploy disabled" href="#"><i id="btn-icn-deploy" class="fa fa-download"></i> Deploy</a>
</div> </div>
</div> </div>
</div> </div>
@ -83,28 +83,28 @@
<div id="palette-container" class="palette-scroll"> <div id="palette-container" class="palette-scroll">
</div> </div>
<div id="palette-search"> <div id="palette-search">
<i class="icon-search"></i><input id="palette-search-input" type="text" placeholder="filter"><a href="#" id="palette-search-clear"><i class="icon-remove"></i></a></input> <i class="fa fa-search"></i><input id="palette-search-input" type="text" placeholder="filter"><a href="#" id="palette-search-clear"><i class="fa fa-times"></i></a></input>
</div> </div>
</div><!-- /palette --> </div><!-- /palette -->
<div id="workspace"> <div id="workspace">
<ul id="workspace-tabs"></ul> <ul id="workspace-tabs"></ul>
<div id="workspace-add-tab"><a id="btn-workspace-add-tab" href="#"><i class="icon-plus"></i></a></div> <div id="workspace-add-tab"><a id="btn-workspace-add-tab" href="#"><i class="fa fa-plus"></i></a></div>
<div id="chart"></div> <div id="chart"></div>
<div id="workspace-toolbar"> <div id="workspace-toolbar">
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-small" href="#"><i class="icon-zoom-out"></i></a> <a class="btn btn-small" href="#"><i class="fa fa-search-minus"></i></a>
<a class="btn btn-small" href="#"><i class="icon-th"></i></a> <a class="btn btn-small" href="#"><i class="fa fa-dot-circle-o"></i></a>
<a class="btn btn-small" href="#"><i class="icon-zoom-in"></i></a> <a class="btn btn-small" href="#"><i class="fa fa-search-plus"></i></a>
</div> </div>
</div> </div>
</div> </div>
<div id="chart-zoom-controls"> <div id="chart-zoom-controls">
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-mini" id="btn-zoom-out" href="#"><i class="icon-zoom-out"></i></a> <a class="btn btn-mini" id="btn-zoom-out" href="#"><i class="fa fa-search-minus"></i></a>
<a class="btn btn-mini" id="btn-zoom-zero" href="#"><i class="icon-th"></i></a> <a class="btn btn-mini" id="btn-zoom-zero" href="#"><i class="fa fa-dot-circle-o"></i></a>
<a class="btn btn-mini" id="btn-zoom-in" href="#"><i class="icon-zoom-in"></i></a> <a class="btn btn-mini" id="btn-zoom-in" href="#"><i class="fa fa-search-plus"></i></a>
</div> </div>
</div> </div>
@ -195,11 +195,11 @@
<div id="node-dialog-library-save" class="hide"> <div id="node-dialog-library-save" class="hide">
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-row"> <div class="form-row">
<label for="node-dialog-library-save-folder"><i class="icon-folder-open"></i> Folder</label> <label for="node-dialog-library-save-folder"><i class="fa fa-folder-open"></i> Folder</label>
<input type="text" id="node-dialog-library-save-folder" placeholder="Folder"> <input type="text" id="node-dialog-library-save-folder" placeholder="Folder">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-dialog-library-save-filename"><i class="icon-file"></i> Filename</label> <label for="node-dialog-library-save-filename"><i class="fa fa-file"></i> Filename</label>
<input type="text" id="node-dialog-library-save-filename" placeholder="Filename"> <input type="text" id="node-dialog-library-save-filename" placeholder="Filename">
</div> </div>
</form> </form>
@ -225,7 +225,7 @@
<div id="node-dialog-rename-workspace" class="hide"> <div id="node-dialog-rename-workspace" class="hide">
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-row"> <div class="form-row">
<label for="node-input-workspace-name" ><i class="icon-tag"></i> Name:</label> <label for="node-input-workspace-name" ><i class="fa fa-tag"></i> Name:</label>
<input type="text" id="node-input-workspace-name"> <input type="text" id="node-input-workspace-name">
</div> </div>
</form> </form>
@ -240,7 +240,7 @@
<script type="text/x-red" data-template-name="export-clipboard-dialog"> <script type="text/x-red" data-template-name="export-clipboard-dialog">
<div class="form-row"> <div class="form-row">
<label for="node-input-export" style="display: block; width:100%;"><i class="icon-share"></i> Nodes:</label> <label for="node-input-export" style="display: block; width:100%;"><i class="fa fa-share"></i> Nodes:</label>
<textarea readonly style="font-family: monospace; font-size: 12px; background:rgb(226, 229, 255); padding-left: 0.5em;" class="input-block-level" id="node-input-export" rows="5"></textarea> <textarea readonly style="font-family: monospace; font-size: 12px; background:rgb(226, 229, 255); padding-left: 0.5em;" class="input-block-level" id="node-input-export" rows="5"></textarea>
</div> </div>
<div class="form-tips"> <div class="form-tips">
@ -249,13 +249,13 @@
</script> </script>
<script type="text/x-red" data-template-name="export-library-dialog"> <script type="text/x-red" data-template-name="export-library-dialog">
<div class="form-row"> <div class="form-row">
<label for="node-input-filename" ><i class="icon-tag"></i> Filename:</label> <label for="node-input-filename" ><i class="fa fa-tag"></i> Filename:</label>
<input type="text" id="node-input-filename" placeholder="Filename"> <input type="text" id="node-input-filename" placeholder="Filename">
</div> </div>
</script> </script>
<script type="text/x-red" data-template-name="import-dialog"> <script type="text/x-red" data-template-name="import-dialog">
<div class="form-row"> <div class="form-row">
<label for="node-input-export"><i class="icon-share"></i>Nodes:</label> <label for="node-input-import"><i class="fa fa-share"></i>Nodes:</label>
<textarea style="font-family: monospace; font-size: 12px; background:rgb(226, 229, 255); padding-left: 0.5em;" class="input-block-level" id="node-input-import" rows="5" placeholder="Paste nodes here, or lookup in the library"></textarea> <textarea style="font-family: monospace; font-size: 12px; background:rgb(226, 229, 255); padding-left: 0.5em;" class="input-block-level" id="node-input-import" rows="5" placeholder="Paste nodes here, or lookup in the library"></textarea>
</div> </div>
</script> </script>

4
public/red/main.js
View File

@ -76,7 +76,7 @@ var RED = (function() {
} }
var nns = RED.nodes.createCompleteNodeSet(); var nns = RED.nodes.createCompleteNodeSet();
$("#btn-icn-deploy").removeClass('icon-upload'); $("#btn-icn-deploy").removeClass('fa-download');
$("#btn-icn-deploy").addClass('spinner'); $("#btn-icn-deploy").addClass('spinner');
RED.view.dirty(false); RED.view.dirty(false);
@ -113,7 +113,7 @@ var RED = (function() {
} }
}).always(function() { }).always(function() {
$("#btn-icn-deploy").removeClass('spinner'); $("#btn-icn-deploy").removeClass('spinner');
$("#btn-icn-deploy").addClass('icon-upload'); $("#btn-icn-deploy").addClass('fa-download');
}); });
} }
} }

2
public/red/ui/editor.js
View File

@ -287,7 +287,7 @@ RED.editor = (function() {
input.replaceWith('<select style="width: 60%;" id="node-input-'+property+'"></select>'); input.replaceWith('<select style="width: 60%;" id="node-input-'+property+'"></select>');
updateConfigNodeSelect(property,type,node[property]); updateConfigNodeSelect(property,type,node[property]);
var select = $("#node-input-"+property); var select = $("#node-input-"+property);
select.after(' <a id="node-input-lookup-'+property+'" class="btn"><i class="icon icon-pencil"></i></a>'); select.after(' <a id="node-input-lookup-'+property+'" class="btn"><i class="fa fa-pencil"></i></a>');
$('#node-input-lookup-'+property).click(function(e) { $('#node-input-lookup-'+property).click(function(e) {
showEditConfigNodeDialog(property,type,select.find(":selected").val()); showEditConfigNodeDialog(property,type,select.find(":selected").val());
e.preventDefault(); e.preventDefault();

4
public/red/ui/library.js
View File

@ -107,7 +107,7 @@ RED.library = (function() {
}); });
} }
})(); })();
li.innerHTML = '<i class="icon-folder-close"></i> '+v+"</i>"; li.innerHTML = '<i class="fa fa-folder"></i> '+v+"</i>";
ul.appendChild(li); ul.appendChild(li);
} else { } else {
// file // file
@ -133,7 +133,7 @@ RED.library = (function() {
$('#node-input-name').addClass('input-append-left').css("width","65%").after( $('#node-input-name').addClass('input-append-left').css("width","65%").after(
'<div class="btn-group" style="margin-left: -5px;">'+ '<div class="btn-group" style="margin-left: -5px;">'+
'<button id="node-input-'+options.type+'-lookup" class="btn input-append-right" data-toggle="dropdown"><i class="icon-book"></i> <span class="caret"></span></button>'+ '<button id="node-input-'+options.type+'-lookup" class="btn input-append-right" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></button>'+
'<ul class="dropdown-menu pull-right" role="menu">'+ '<ul class="dropdown-menu pull-right" role="menu">'+
'<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">Open Library...</a></li>'+ '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">Open Library...</a></li>'+
'<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">Save to Library...</a></li>'+ '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">Save to Library...</a></li>'+

2
public/red/ui/palette.js
View File

@ -22,7 +22,7 @@ RED.palette = (function() {
function createCategoryContainer(category){ function createCategoryContainer(category){
$("#palette-container").append('<div class="palette-category">'+ $("#palette-container").append('<div class="palette-category">'+
'<div id="header-'+category+'" class="palette-header"><i class="expanded icon-chevron-down"></i><span>'+category+'</span></div>'+ '<div id="header-'+category+'" class="palette-header"><i class="expanded fa fa-caret-down"></i><span>'+category+'</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>'+

2
public/red/ui/tabs.js
View File

@ -93,7 +93,7 @@ RED.tabs = (function() {
link.on("dblclick",onTabDblClick); link.on("dblclick",onTabDblClick);
if (tab.closeable) { if (tab.closeable) {
var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li); var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
closeLink.html('<i class="icon-remove" />'); closeLink.html('<i class="fa fa-times" />');
closeLink.on("click",function(event) { closeLink.on("click",function(event) {
removeTab(tab.id); removeTab(tab.id);

31
public/style.css
View File

@ -1,5 +1,5 @@
/** /**
* Copyright 2013 IBM Corp. * Copyright 2013, 2014 IBM Corp.
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
@ -141,20 +141,21 @@ a.brand img {
box-sizing:border-box; box-sizing:border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }
#palette-search i.icon-search { #palette-search i.fa-search {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
left: 3px; left: 4px;
top: 10px; top: 10px;
} }
#palette-search i.icon-remove { #palette-search i.fa-times {
position: absolute; position: absolute;
right: 3px; right: 6px;
top: 10px; top: 10px;
} }
#palette-search-clear { #palette-search-clear {
display: none; display: none;
color: #000;
} }
#palette-search input { #palette-search input {
@ -192,10 +193,10 @@ a.brand img {
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
padding: 3px; padding: 1px;
} }
.palette-header i { .palette-header i {
float: right; margin: 3px 4px 3px 3px;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
@ -612,10 +613,12 @@ div.node-info {
display: none; display: none;
} }
.dropdown-menu * .icon-ok { .dropdown-menu * .fa-check {
display: none; display: none;
margin-right: -15px;
margin-top: 3px;
} }
.dropdown-menu * a.active > .icon-ok { .dropdown-menu * a.active > .fa-check {
display: inline-block; display: inline-block;
} }
.dropdown-menu>li.disabled>a:hover>[class^="icon-"] { .dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
@ -625,8 +628,13 @@ div.node-info {
.dropdown-menu { .dropdown-menu {
width: 200px !important; width: 200px !important;
} }
.dropdown-menu > li > a > i {
width: 10px;
text-align: center;
margin-left: -8px;
}
.dropdown-menu > li > a { .dropdown-menu > li > a {
padding-left: 28px ; padding-left: 38px ;
text-indent: -8px ; text-indent: -8px ;
white-space: normal !important; white-space: normal !important;
} }
@ -722,8 +730,9 @@ div.node-info {
width: 100%; width: 100%;
background: #e3e3e3; background: #e3e3e3;
height: 100%; height: 100%;
line-height: 28px; line-height: 30px;
text-align: center; text-align: center;
color: #000;
} }
#btn-workspace-add-tab:hover { #btn-workspace-add-tab:hover {
background: #efefef; background: #efefef;