Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-2053] update open/close palettes. This closes #775

This commit is contained in:
Scott Aslan 2016-08-03 15:31:38 -04:00 committed by Matt Gilman
parent fa4c6ab03c
commit ed5c44ba53
6 changed files with 49 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp
View File

@ -23,17 +23,15 @@
</nf-breadcrumbs> </nf-breadcrumbs>
<div id="graph-controls"> <div id="graph-controls">
<div id="navigation-control" class="graph-control"> <div id="navigation-control" class="graph-control">
<div class="graph-control-docked pointer" title="Navigate" <div class="graph-control-docked pointer fa fa-compass" title="Navigate"
ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)"> ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)">
<div class="graph-control-icon fa fa-compass"></div>
</div> </div>
<div class="graph-control-header-container hidden"> <div class="graph-control-header-container hidden pointer"
<div class="graph-control-header-icon"> ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
<div class="graph-control-icon fa fa-compass"></div> <div class="graph-control-header-icon fa fa-compass">
</div> </div>
<div class="graph-control-header">Navigate</div> <div class="graph-control-header">Navigate</div>
<div class="graph-control-header-action" <div class="graph-control-header-action">
ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
<div class="graph-control-expansion fa fa-plus-square-o pointer"></div> <div class="graph-control-expansion fa fa-plus-square-o pointer"></div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
@ -65,17 +63,15 @@
</div> </div>
</div> </div>
<div id="operation-control" class="graph-control"> <div id="operation-control" class="graph-control">
<div class="graph-control-docked pointer" title="Operate" <div class="graph-control-docked pointer fa fa-hand-o-up" title="Operate"
ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)"> ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)">
<div class="graph-control-icon fa fa-hand-o-up"></div>
</div> </div>
<div class="graph-control-header-container hidden"> <div class="graph-control-header-container hidden pointer"
<div class="graph-control-header-icon"> ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
<div class="graph-control-icon fa fa-hand-o-up"></div> <div class="graph-control-header-icon fa fa-hand-o-up">
</div> </div>
<div class="graph-control-header">Operate</div> <div class="graph-control-header">Operate</div>
<div class="graph-control-header-action" <div class="graph-control-header-action">
ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
<div class="graph-control-expansion fa fa-plus-square-o pointer"></div> <div class="graph-control-expansion fa fa-plus-square-o pointer"></div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
View File

@ -37,7 +37,7 @@
#bulletin-board-refresh-container { #bulletin-board-refresh-container {
position: absolute; position: absolute;
right: 20px; right: 20px;
bottom: 40px; bottom: 0px;
left: 20px; left: 20px;
} }

41
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css
View File

@ -53,9 +53,9 @@
margin-left: -1px; margin-left: -1px;
} }
#graph-controls .graph-control-icon { .graph-control-header-icon.fa {
font-size: 15px;
color: #004849; /*link-color*/ color: #004849; /*link-color*/
margin-left: 7px !important;
} }
div.graph-control { div.graph-control {
@ -64,10 +64,28 @@ div.graph-control {
border-top: 1px solid #aabbc3; border-top: 1px solid #aabbc3;
border-right: 1px solid #aabbc3; border-right: 1px solid #aabbc3;
border-bottom: 1px solid #aabbc3; border-bottom: 1px solid #aabbc3;
padding: 10px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.graph-control-content {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.docked {
height: 32px;
width: 32px;
}
div.graph-control-docked {
height: 100%;
width: 100%;
text-align: center;
line-height: 34px;
color: #004849;
}
.docked:hover { .docked:hover {
border-top: 1px solid #004849; /*tint base-color 60%*/ border-top: 1px solid #004849; /*tint base-color 60%*/
border-right: 1px solid #004849; /*tint base-color 60%*/ border-right: 1px solid #004849; /*tint base-color 60%*/
@ -92,12 +110,14 @@ div.graph-control button:disabled {
} }
div.graph-control div.graph-control-expansion { div.graph-control div.graph-control-expansion {
color: #004849; /*link-color*/ color: #728E9B;
line-height: 34px;
margin-left: 9px !important;
} }
div.graph-control-header-icon { div.graph-control-header-icon {
float: left; float: left;
padding: 0 5px 0 0; margin: 8px 10px 0px 0px;
} }
div.graph-control-header { div.graph-control-header {
@ -106,12 +126,17 @@ div.graph-control-header {
font-family: 'Roboto Slab'; font-family: 'Roboto Slab';
color: #262626; color: #262626;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
line-height: 15px; margin: 10px 0px;
} }
div.graph-control-header-action { div.graph-control-header-action {
float: right; float: right;
font-size: 15px; height: 32px;
width: 32px;
}
.graph-control-header-container:hover {
background: linear-gradient(90deg, rgba(227,232,235,0) 254px, rgba(227,232,235,1) 32px);
} }
/* navigate buttons */ /* navigate buttons */
@ -210,7 +235,7 @@ div.button-spacer-large {
} }
#birdseye { #birdseye {
width: 248px; width: 264px;
height: 150px; height: 150px;
background: #fff; background: #fff;
z-index: 1001; z-index: 1001;

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
View File

@ -112,10 +112,6 @@ div.relationship-description {
outline: none; outline: none;
} }
#run-duration-labels {
font-family: sans-serif;
}
#run-duration-zero { #run-duration-zero {
float: left; float: left;
} }
@ -156,7 +152,6 @@ div.relationship-description {
#run-duration-explanation { #run-duration-explanation {
margin-top: 5px; margin-top: 5px;
color: #9F6000;
font-size: 9px; font-size: 9px;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css
View File

@ -102,20 +102,14 @@ classes should alter those!
border-right: 0px !important; border-right: 0px !important;
} }
.grid-canvas *:last-child .fa{
float: left;
}
.grid-canvas *:last-child .icon{
float: left;
}
.slick-viewport .fa { .slick-viewport .fa {
color: #004849; color: #004849;
line-height: 22px; line-height: 22px;
margin-top: 0px !important; margin-top: 0px !important;
width: 12px; width: 12px;
height: 12px; height: 12px;
float: left;
margin-right: 3px !important;
} }
.slick-viewport .icon { .slick-viewport .icon {
@ -125,6 +119,7 @@ classes should alter those!
width: 12px; width: 12px;
height: 12px; height: 12px;
float: left; float: left;
margin-right: 3px !important;
} }
.slick-header.ui-state-default, .slick-headerrow.ui-state-default { .slick-header.ui-state-default, .slick-headerrow.ui-state-default {

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
View File

@ -134,7 +134,7 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
* @param {jQuery} $event * @param {jQuery} $event
*/ */
undock: function ($event) { undock: function ($event) {
openGraphControl($($event.target).parent().parent()); openGraphControl($($event.target).parent());
}, },
/** /**
@ -143,7 +143,7 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
*/ */
expand: function ($event) { expand: function ($event) {
var icon = $($event.target); var icon = $($event.target);
if (icon.hasClass('fa-plus-square-o')) { if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) {
openGraphControl(icon.closest('div.graph-control')); openGraphControl(icon.closest('div.graph-control'));
} else { } else {
hideGraphControl(icon.closest('div.graph-control')); hideGraphControl(icon.closest('div.graph-control'));