[NIFI-2257] [NIFI-2294] refresh updateattribute processor advanced shell and fix connection config setting tab scrolling issue

[NIFI-2270] Update splash screen
This closes #646
This commit is contained in:
Scott Aslan 2016-07-19 14:42:42 -04:00 committed by Matt Gilman
parent 6c7c3c0822
commit 8f23afde50
34 changed files with 839 additions and 788 deletions

View File

@ -585,6 +585,13 @@
<include>${staging.dir}/css/status-history.css</include>
</includes>
</aggregation>
<aggregation>
<insertNewLine>true</insertNewLine>
<output>${project.build.directory}/${project.build.finalName}/css/nf-common-ui.css</output>
<includes>
<include>${staging.dir}/css/common-ui.css</include>
</includes>
</aggregation>
<aggregation>
<insertNewLine>true</insertNewLine>
<output>${project.build.directory}/${project.build.finalName}/css/nf-history-all.css</output>
@ -696,10 +703,14 @@
assets/**/*,
css/reset.css,
css/reset.css.gz,
css/common-ui.css,
css/common-ui.css.gz,
css/message-page.css,
css/message-page.css.gz,
css/message-pane.css,
css/message-pane.css.gz,
css/nf-common-ui.css,
css/nf-common-ui.css.gz,
css/nf-canvas-all.css,
css/nf-canvas-all.css.gz,
css/nf-history-all.css,

View File

@ -15,4 +15,5 @@
nf.bulletin.board.script.tags=<script type="text/javascript" src="js/nf/bulletin-board/nf-bulletin-board-all.js?${project.version}"></script>
nf.bulletin.board.style.tags=<link rel="stylesheet" href="css/nf-bulletin-board-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -25,6 +25,7 @@ nf.bulletin.board.script.tags=<script type="text/javascript" src="js/nf/nf-commo
<script type="text/javascript" src="js/nf/bulletin-board/nf-bulletin-board.js?${project.version}"></script>
nf.bulletin.board.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\

View File

@ -15,4 +15,5 @@
nf.canvas.script.tags=<script type="text/javascript" src="js/nf/canvas/nf-canvas-all.js?${project.version}"></script>
nf.canvas.style.tags=<link rel="stylesheet" href="css/nf-canvas-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -81,4 +81,5 @@ nf.canvas.script.tags=<script type="text/javascript" src="js/nf/nf-client.js?${p
<script type="text/javascript" src="js/nf/canvas/directives/nf-ng-draggable-directive.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/nf-ng-app-controller.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/nf-ng-app-config.js?${project.version}"></script>
nf.canvas.style.tags=<link rel="stylesheet" href="css/canvas.css?${project.version}" type="text/css" />
nf.canvas.style.tags=<link rel="stylesheet" href="css/canvas.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />

View File

@ -15,4 +15,5 @@
nf.cluster.script.tags=<script type="text/javascript" src="js/nf/cluster/nf-cluster-all.js?${project.version}"></script>
nf.cluster.style.tags=<link rel="stylesheet" href="css/nf-cluster-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -25,4 +25,5 @@ nf.cluster.style.tags=<link rel="stylesheet" href="css/reset.css?${project.versi
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/cluster.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/cluster.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />

View File

@ -15,4 +15,5 @@
nf.counters.script.tags=<script type="text/javascript" src="js/nf/counters/nf-counters-all.js?${project.version}"></script>
nf.counters.style.tags=<link rel="stylesheet" href="css/nf-counters-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -22,6 +22,7 @@ nf.counters.script.tags=<script type="text/javascript" src="js/nf/nf-common.js?$
<script type="text/javascript" src="js/nf/counters/nf-counters-table.js?${project.version}"></script>
nf.counters.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\

View File

@ -15,4 +15,5 @@
nf.history.script.tags=<script type="text/javascript" src="js/nf/history/nf-history-all.js?${project.version}"></script>
nf.history.style.tags=<link rel="stylesheet" href="css/nf-history-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -23,6 +23,7 @@ nf.history.script.tags=<script type="text/javascript" src="js/nf/nf-common.js?${
<script type="text/javascript" src="js/nf/history/nf-history-model.js?${project.version}"></script>
nf.history.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\

View File

@ -15,4 +15,5 @@
nf.login.script.tags=<script type="text/javascript" src="js/nf/login/nf-login-all.js?${project.version}"></script>
nf.login.style.tags=<link rel="stylesheet" href="css/nf-login-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -21,6 +21,7 @@ nf.login.script.tags=<script type="text/javascript" src="js/nf/nf-common.js?${pr
<script type="text/javascript" src="js/nf/login/nf-login.js?${project.version}"></script>
nf.login.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\

View File

@ -15,4 +15,5 @@
nf.provenance.script.tags=<script type="text/javascript" src="js/nf/provenance/nf-provenance-all.js?${project.version}"></script>
nf.provenance.style.tags=<link rel="stylesheet" href="css/nf-provenance-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -27,6 +27,7 @@ nf.provenance.script.tags=<script type="text/javascript" src="js/nf/nf-common.js
<script type="text/javascript" src="js/nf/nf-ng-app-config.js?${project.version}"></script>
nf.provenance.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\

View File

@ -15,4 +15,5 @@
nf.summary.script.tags=<script type="text/javascript" src="js/nf/summary/nf-summary-all.js?${project.version}"></script>
nf.summary.style.tags=<link rel="stylesheet" href="css/nf-summary-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -30,6 +30,7 @@ nf.summary.script.tags=<script type="text/javascript" src="js/nf/nf-common.js?${
<script type="text/javascript" src="js/nf/nf-ng-app-config.js?${project.version}"></script>
nf.summary.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/processor-details.css?${project.version}" type="text/css" />\n\

View File

@ -15,4 +15,5 @@
nf.templates.script.tags=<script type="text/javascript" src="js/nf/templates/nf-templates-all.js?${project.version}"></script>
nf.templates.style.tags=<link rel="stylesheet" href="css/nf-templates-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -22,6 +22,7 @@ nf.templates.script.tags=<script type="text/javascript" src="js/nf/nf-common.js?
<script type="text/javascript" src="js/nf/templates/nf-templates-table.js?${project.version}"></script>
nf.templates.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\

View File

@ -15,4 +15,5 @@
nf.users.script.tags=<script type="text/javascript" src="js/nf/users/nf-users-all.js?${project.version}"></script>
nf.users.style.tags=<link rel="stylesheet" href="css/nf-users-all.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/nf-common-ui.css?${project.version}" type="text/css" />

View File

@ -23,6 +23,7 @@ nf.users.script.tags=<script type="text/javascript" src="js/nf/nf-client.js?${pr
<script type="text/javascript" src="js/nf/users/nf-users-table.js?${project.version}"></script>
nf.users.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/common-ui.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/dialog.css?${project.version}" type="text/css" />\n\
<link rel="stylesheet" href="css/message-pane.css?${project.version}" type="text/css" />\n\

View File

@ -85,7 +85,9 @@
</head>
<body ng-controller="ngCanvasAppCtrl" id="canvas-body">
<div id="splash">
<img id="splash-img" src="images/loadAnimation.gif" alt="Loading..."/>
<div id="splash-img" layout="row" layout-align="center center">
<md-progress-circular md-mode="indeterminate" class="md-warn" md-diameter="150"></md-progress-circular>
</div>
</div>
<jsp:include page="/WEB-INF/partials/message-pane.jsp"/>
<jsp:include page="/WEB-INF/partials/banners-main.jsp"/>

View File

@ -23,7 +23,7 @@
Displaying&nbsp;<span id="displayed-counters"></span>&nbsp;of&nbsp;<span id="total-counters"></span>
</div>
<div id="counters-filter-container" class="filter-container">
<input type="text" id="counters-filter" class="filter"/>
<input type="text" id="counters-filter" placeholder="Filter" class="filter"/>
<div id="counters-filter-type" class="filter-type"></div>
</div>
</div>

View File

@ -21,10 +21,9 @@
#bulletin-board {
position: absolute;
top: 0px;
bottom: 0px;
bottom: 40px;
left: 20px;
right: 20px;
height: 100%;
overflow: auto;
}

View File

@ -43,6 +43,7 @@
@import url(settings.css);
@import url(about.css);
@import url(message-pane.css);
@import url(common-ui.css);
@import url(status-history.css);
@import url(../fonts/flowfont/flowfont.css);
@import url(../assets/font-awesome/css/font-awesome.css);

View File

@ -0,0 +1,495 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'),
local('Roboto-Light'),
url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: local('Roboto LightItalic'),
local('Roboto-LightItalic'),
url('../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
src: local('Roboto Regular'),
local('Roboto-Regular'),
url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'),
local('Roboto-Medium'),
url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
src: local('Roboto Bold'),
local('Roboto-Bold'),
url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: normal;
src: local('Roboto Italic'),
local('Roboto-Italic'),
url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: normal;
src: local('RobotoSlab Regular'),
local('RobotoSlab-Regular'),
url('../fonts/Roboto_Slab/RobotoSlab-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
src: local('RobotoSlab Bold'),
local('RobotoSlab-Bold'),
url('../fonts/Roboto_Slab/RobotoSlab-Bold.ttf') format('truetype');
}
/*remove margin from font awesome*/
i[class^="fa-"]:before, i[class*=" fa-"]:before {
margin: -1px;
}
/*remove margin from flowfont*/
i[class^="icon-"]:before, i[class*=" icon-"]:before {
margin: -2px;
}
body {
display: block;
font-family: Roboto, sans-serif;
font-size: 62.5%;
overflow: hidden;
color: #262626;
}
.value-color {
color: #775351;
}
ul.links li {
float: left;
display: block;
margin-left: 10px;
padding: 4px;
text-align: center;
font-size: 11px;
font-weight: normal;
text-decoration: none;
}
ul.links span.header-link-over {
color: #264c58;
text-decoration: underline;
}
/*
General Styles
*/
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clear {
clear: both;
}
.pointer {
cursor: pointer !important;
}
.hidden {
display: none;
}
.blank, .unset, .sensitive {
font-style: italic;
font-weight: normal;
color: #aaa;
}
.required {
font-weight: bold !important;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
input.filter-list {
color: #888;
}
.table-cell {
overflow: hidden;
white-space: nowrap;
line-height: normal;
float: left;
margin-top: 4px;
}
label {
font-family: 'Roboto Slab', serif;
font-size: 12px;
color: #262626; /*base-font-color*/
letter-spacing: 0.05rem;
display: block;
margin-bottom: 2px;
}
input::placeholder {
color: #728e9b; /*base-color*/
}
input[type=text], input[type=password], textarea {
background-color: #eaeef0;
border: 1px solid #eaeef0;
font-family: Roboto, sans-serif;
font-size: 13px;
padding: 0px 0px 0px 10px;
resize: none;
height: 32px;
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
color: #262626;
}
input:focus, textarea:focus {
background-color: #fff;
border: 1px solid #004849; /*link-color*/
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
outline: none;
}
textarea {
overflow: hidden;
padding: 10px 10px;
resize: vertical;
color: #262626;
font-size: 13px !important;
}
ul.property-info {
list-style-type: disc;
margin-left: 10px;
}
ul.property-info li {
padding: 0px 0px;
margin-left: 10px;
}
div.nf-checkbox {
cursor: default;
width: 12px;
height: 12px;
float: left;
margin-right: 4px;
}
div.checkbox-unchecked {
background: transparent url(../images/inputCheckbox.png) no-repeat scroll top left;
}
div.checkbox-checked {
background: transparent url(../images/inputCheckbox.png) no-repeat scroll top right;
}
div.ajax-loading {
background-image: url(../images/iconLoading.gif);
}
div.ajax-complete {
background-image: url(../images/iconCommit.png);
}
div.ajax-error {
background-image: url(../images/iconDelete.png);
}
.refresh-button {
float: left;
}
.ui-draggable .dialog-header {
cursor: move;
}
span.link {
cursor: pointer;
color: #004849; /*link-color*/
font-weight: normal;
display: inline-block;
border-bottom: 1px solid #CCDADB;
font-size: 13px;
font-family: Roboto;
}
span.link-over {
border-bottom: 1px solid #004849;
}
span.link-bold {
font-weight: bold;
border-bottom: none;
}
button {
height: 28px;
width: 28px;
border: 1px solid #CCDADB; /*tint link-color 80%*/
background-color: rgba(249, 250, 251, 0.97);
color: #004849;
}
button.refresh-button {
font-size: 16px;
}
button:hover {
border: 1px solid #004849; /*link-color*/
}
button:disabled {
color: #CCDADB !important; /*tint link-color 80%*/
cursor: not-allowed;
border: 1px solid #CCDADB; /*tint link-color 80%*/
}
/* angular material override */
button:focus {
outline: none;
}
div:focus {
outline: none;
}
input:focus {
background-color: #fff;
border: 1px solid #004849; /*link-color*/
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
outline: none;
}
/* filter controls */
.filter-controls {
position: absolute;
top: 10px;
}
.filter-container {
height: 32px;
width: 318px;
float: left;
}
.filter {
margin-right: 3px;
float: left;
}
input.filter {
width: 173px;
}
.filter-type {
width: 120px;
float: left;
}
.filter-status {
margin-top: 10px;
color: #775351;
font-family: Roboto;
font-size: 13px;
font-weight: 500;
margin-bottom: 5px;
}
/* buttons */
button.fa {
color: #004849;
font-size: 16px;
cursor: pointer;
}
button.icon {
color: #004849;
font-size: 16px;
}
div.button {
height: 32px;
width: 90px;
padding: 0 8px;
text-transform: uppercase;
font-weight: 500;
font-size: 11px;
line-height: 33px;
text-align: center;
border: 0px;
float: right;
position: relative;
background: #728E9B;
color: #fff;
cursor: pointer;
}
div.button:hover {
background-color: #004849;
}
div.secondary-button {
height: 32px;
width: 90px;
padding: 0 8px;
text-transform: uppercase;
font-weight: 500;
font-size: 11px;
line-height: 33px;
text-align: center;
border: 0px;
float: right;
position: relative;
background: #E3E8EB;
color: #004849;
}
div.secondary-button:hover {
background-color: #C7D2D7;
}
/* tooltips */
.qtip-nifi {
border: 0px !important;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.54) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
font-family: Roboto;
font-weight: 500;
font-size: 13px;
color: #fff !important;
}
div.nifi-tooltip {
border: 0px !important;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.80) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
font-family: Roboto;
font-weight: 500;
font-size: 13px;
color: #fff !important;
max-width: 500px;
word-wrap: break-word;
}
.scrollable {
border-bottom: 1px solid #d0dbe0;
}
/* progress bars */
md-progress-linear > div {
background-color: #eaeef0 !important;
}
.setting {
margin-bottom: 15px;
}
.setting-name {
font-size: 12px;
font-weight: 500;
font-family: Roboto Slab;
padding-bottom: 4px;
color: #262626;
}
.setting-name .fa {
color: #004849;
margin-left: 5px;
}
.setting-field .fa {
color: #004849;
margin-left: 5px;
}
.setting-field {
line-height: normal;
width: 100%;
color: #775351;
font-size: 13px;
}
.setting-header{
color: #728e9b;
font-size: 12pt;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
padding-bottom: 20px;
text-overflow: ellipsis;
}

View File

@ -82,10 +82,8 @@ div.undefined {
list-style-type: none;
margin: 0px;
background: #eaeef0;
width: 325px;
min-height: 32px;
margin-bottom: 5px;
width: 100%;
padding: 2px;
}

View File

@ -190,45 +190,6 @@ ul.result li {
padding: 3px 0px;
}
.setting {
margin-bottom: 15px;
}
.setting-name {
font-size: 12px;
font-weight: 500;
font-family: Roboto Slab;
padding-bottom: 4px;
color: #262626;
}
.setting-name .fa {
color: #004849;
margin-left: 5px;
}
.setting-field .fa {
color: #004849;
margin-left: 5px;
}
.setting-field {
line-height: normal;
width: 100%;
color: #775351;
font-size: 13px;
}
.setting-header{
color: #728e9b;
font-size: 12pt;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
padding-bottom: 20px;
text-overflow: ellipsis;
}
.dialog-content div.settings-left {
float: left;
width: 49%;

View File

@ -14,99 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'),
local('Roboto-Light'),
url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: local('Roboto LightItalic'),
local('Roboto-LightItalic'),
url('../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
src: local('Roboto Regular'),
local('Roboto-Regular'),
url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'),
local('Roboto-Medium'),
url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
src: local('Roboto Bold'),
local('Roboto-Bold'),
url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: normal;
src: local('Roboto Italic'),
local('Roboto-Italic'),
url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: normal;
src: local('RobotoSlab Regular'),
local('RobotoSlab-Regular'),
url('../fonts/Roboto_Slab/RobotoSlab-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
src: local('RobotoSlab Bold'),
local('RobotoSlab-Bold'),
url('../fonts/Roboto_Slab/RobotoSlab-Bold.ttf') format('truetype');
}
/*remove margin from font awesome*/
i[class^="fa-"]:before, i[class*=" fa-"]:before {
margin: -1px;
}
/*remove margin from flowfont*/
i[class^="icon-"]:before, i[class*=" icon-"]:before {
margin: -2px;
}
.value-color {
color: #775351;
}
body {
display: block;
font-family: Roboto, sans-serif;
font-size: 62.5%;
overflow: hidden;
color: #262626;
}
#splash {
position: absolute;
@ -119,9 +26,12 @@ body {
}
#splash-img {
display: block;
padding-top: 250px;
margin: 0px auto;
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
background: transparent url(../images/nifi-drop-splash.svg) no-repeat center center;
}
#context-menu {
@ -187,74 +97,6 @@ div.context-menu-provenance {
z-index: 1300;
}
ul.links li {
float: left;
display: block;
margin-left: 10px;
padding: 4px;
text-align: center;
font-size: 11px;
font-weight: normal;
text-decoration: none;
}
ul.links span.header-link-over {
color: #264c58;
text-decoration: underline;
}
/*
General Styles
*/
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clear {
clear: both;
}
.pointer {
cursor: pointer !important;
}
.delete td {
text-decoration: line-through;
}
.hidden {
display: none;
}
.blank, .unset, .sensitive {
font-style: italic;
font-weight: normal;
color: #aaa;
}
.required {
font-weight: bold !important;
}
div.nifi-tooltip {
border: 0px !important;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.80) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
font-family: Roboto;
font-weight: 500;
font-size: 13px;
color: #fff !important;
max-width: 500px;
word-wrap: break-word;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
@ -264,18 +106,6 @@ div.nifi-tooltip {
white-space: normal;
}
input.filter-list {
color: #888;
}
.table-cell {
overflow: hidden;
white-space: nowrap;
line-height: normal;
float: left;
margin-top: 4px;
}
.collapsed {
background: transparent url(../images/iconTwistArrow.png) no-repeat scroll top left;
}
@ -284,49 +114,6 @@ input.filter-list {
background: transparent url(../images/iconTwistArrow.png) no-repeat scroll top right;
}
label {
font-family: 'Roboto Slab', serif;
font-size: 12px;
color: #262626; /*base-font-color*/
letter-spacing: 0.05rem;
display: block;
margin-bottom: 2px;
}
input::placeholder {
color: #728e9b; /*base-color*/
}
input[type=text], input[type=password], textarea {
background-color: #eaeef0;
border: 1px solid #eaeef0;
font-family: Roboto, sans-serif;
font-size: 13px;
padding: 0px 0px 0px 10px;
resize: none;
height: 32px;
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
color: #262626;
}
input:focus, textarea:focus {
background-color: #fff;
border: 1px solid #004849; /*link-color*/
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
outline: none;
}
textarea {
overflow: hidden;
padding: 10px 10px;
resize: vertical;
color: #262626;
font-size: 13px !important;
}
#new-template-description {
position: absolute;
top: 81px;
@ -335,53 +122,6 @@ textarea {
min-height: 32px;
}
ul.property-info {
list-style-type: disc;
margin-left: 10px;
}
ul.property-info li {
padding: 0px 0px;
margin-left: 10px;
}
div.nf-checkbox {
cursor: default;
width: 12px;
height: 12px;
float: left;
margin-right: 4px;
}
div.checkbox-unchecked {
background: transparent url(../images/inputCheckbox.png) no-repeat scroll top left;
}
div.checkbox-checked {
background: transparent url(../images/inputCheckbox.png) no-repeat scroll top right;
}
div.ajax-loading {
background-image: url(../images/iconLoading.gif);
}
div.ajax-complete {
background-image: url(../images/iconCommit.png);
}
div.ajax-error {
/*margin-left: -2px;*/
background-image: url(../images/iconDelete.png);
}
.refresh-button {
float: left;
}
.ui-draggable .dialog-header {
cursor: move;
}
/* processor status styles */
div.disabled {
@ -446,25 +186,6 @@ tr.alt-row {
background: #f5f5f5 none;
}
span.link {
cursor: pointer;
color: #004849; /*link-color*/
font-weight: normal;
display: inline-block;
border-bottom: 1px solid #CCDADB;
font-size: 13px;
font-family: Roboto;
}
span.link-over {
border-bottom: 1px solid #004849;
}
span.link-bold {
font-weight: bold;
border-bottom: none;
}
span.details-title {
font-weight: bold;
font-size: 12px;
@ -489,158 +210,6 @@ span.details-title {
font-size: 13px;
}
button {
height: 28px;
width: 28px;
border: 1px solid #CCDADB; /*tint link-color 80%*/
background-color: rgba(249, 250, 251, 0.97);
color: #004849;
}
button.refresh-button {
font-size: 16px;
}
button:hover {
border: 1px solid #004849; /*link-color*/
}
button:disabled {
color: #CCDADB !important; /*tint link-color 80%*/
cursor: not-allowed;
border: 1px solid #CCDADB; /*tint link-color 80%*/
}
/* angular material override */
button:focus {
outline: none;
}
div:focus {
outline: none;
}
input:focus {
background-color: #fff;
border: 1px solid #004849; /*link-color*/
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
outline: none;
}
/* filter controls */
.filter-controls {
position: absolute;
top: 10px;
}
.filter-container {
height: 32px;
width: 318px;
float: left;
}
.filter {
margin-right: 3px;
float: left;
}
input.filter {
width: 173px;
}
.filter-type {
width: 120px;
float: left;
}
.filter-status {
margin-top: 10px;
color: #775351;
font-family: Roboto;
font-size: 13px;
font-weight: 500;
margin-bottom: 5px;
}
/* buttons */
button.fa {
color: #004849;
font-size: 16px;
cursor: pointer;
}
button.icon {
color: #004849;
font-size: 16px;
}
div.button {
height: 32px;
width: 90px;
padding: 0 8px;
text-transform: uppercase;
font-weight: 500;
font-size: 11px;
line-height: 33px;
text-align: center;
border: 0px;
float: right;
position: relative;
background: #728E9B;
color: #fff;
cursor: pointer;
}
div.button:hover {
background-color: #004849;
}
div.secondary-button {
height: 32px;
width: 90px;
padding: 0 8px;
text-transform: uppercase;
font-weight: 500;
font-size: 11px;
line-height: 33px;
text-align: center;
border: 0px;
float: right;
position: relative;
background: #E3E8EB;
color: #004849;
}
div.secondary-button:hover {
background-color: #C7D2D7;
}
/* tooltips */
.qtip-nifi {
border: 0px !important;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.54) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
font-family: Roboto;
font-weight: 500;
font-size: 13px;
color: #fff !important;
}
.scrollable {
border-bottom: 1px solid #d0dbe0;
}
/* progress bars */
md-progress-linear > div {
background-color: #eaeef0 !important;
}
/* new template */
#new-template-description {

View File

@ -0,0 +1,17 @@
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1364 -753 190 266.533"><defs><style>.a{opacity:0.2;}.b{fill:#fff;}.c{opacity:0.3;}</style></defs><g transform="translate(1364 -753.037)"><g class="a"><path class="b" d="M91.09,258.75A91.09,91.09,0,0,1,0,167.65c0-43.3,33.93-84.81,57.14-115.11A341,341,0,0,0,90.15.59,1.05,1.05,0,0,1,92,.59a340.909,340.909,0,0,0,33,51.95c23.2,30.29,57.15,71.81,57.15,115.12H126.61a2.14,2.14,0,0,0-2.14,2.14V201H93.23a2.14,2.14,0,0,0-2.14,2.14Z"/><path class="b" d="M126.7,236.63V206.89H99.09A2.14,2.14,0,0,0,96.95,209v27.61Z"/><path class="b" d="M96.95,266.35a88.83,88.83,0,0,0,29.75-5.72v-15H99.09a2.14,2.14,0,0,0-2.14,2.14Z"/><path class="b" d="M160.07,203.25V173.51H132.46a2.14,2.14,0,0,0-2.14,2.14v27.6Z"/><path class="b" d="M163.64,240.22h0a6.24,6.24,0,0,0,1.79-4.41V212.27H135.71V242h23.5A6.24,6.24,0,0,0,163.64,240.22Z"/><path class="b" d="M137.73,266.57a89,89,0,0,0,22-13.52h-22Z"/><path class="b" d="M184.06,203.25a88.58,88.58,0,0,0,5.73-29.74h-20.7v29.74Z"/><path class="b" d="M176.49,236.28a88.78,88.78,0,0,0,13.51-22H176.49Z"/><path class="b" d="M176.49,236.28a88.78,88.78,0,0,0,13.51-22H176.49Z"/></g><g class="c"><path class="b" d="M71.05,44.12c-1.68,2.35-3.34,4.71-5,7-5.34,7.36-11,14.51-16.46,21.75q3.24.45,6.49,1c4.59-7.68,9.26-15.32,13.66-23.11,1.23-2.18,2.44-4.39,3.66-6.58C74.33,42.48,72.1,42.66,71.05,44.12Z"/><path class="b" d="M49.33,85.39C50.14,84,51,82.55,51.8,81.14q-3.69-.72-7.39-1.32h0a304.741,304.741,0,0,0-21.33,32.73c-11.45,20.76-19.4,44-15.75,67.92a85.22,85.22,0,0,0,28.4,51.28A83.78,83.78,0,0,0,46,239.38a1.09,1.09,0,0,0,1.34-1.72A91.36,91.36,0,0,1,22.7,196.11c-6.82-25.14-1.15-50.91,8.56-74.49A322.53,322.53,0,0,1,49.33,85.39Z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -231,13 +231,38 @@
}
if (!isBlank(option.description)) {
$('<div style="float: right; line-height: 32px;" class="fa fa-question-circle"></div>').appendTo(optionElement).qtip($.extend({}, nf.Common.config.tooltipConfig, {
content: option.description,
position: {
at: 'top right',
my: 'bottom left'
$('<div style="float: right; line-height: 32px;" class="fa fa-question-circle"></div>').appendTo(optionElement).qtip($.extend({},
{
style: {
classes: 'nifi-tooltip'
},
show: {
solo: true,
effect: function(offset) {
$(this).slideDown(100);
}
},
hide: {
effect: function(offset) {
$(this).slideUp(100);
}
},
position: {
at: 'bottom center',
my: 'top center',
adjust: {
y: 5
}
}
},
{
content: option.description,
position: {
at: 'top right',
my: 'bottom left'
}
}
}));
));
}
actualHeight += 16;

View File

@ -29,8 +29,11 @@
<link rel="stylesheet" href="../nifi/js/codemirror/addon/hint/show-hint.css" type="text/css" />
<link rel="stylesheet" href="../nifi/js/jquery/nfeditor/jquery.nfeditor.css" type="text/css" />
<link rel="stylesheet" href="../nifi/js/jquery/nfeditor/languages/nfel.css" type="text/css" />
<link rel="stylesheet" href="../nifi/fonts/flowfont/flowfont.css" type="text/css" />
<link rel="stylesheet" href="../nifi/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="../nifi/css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="../nifi/css/common-ui.css" type="text/css" />
<script type="text/javascript" src="../nifi/js/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../nifi/js/jquery/jquery.center.js"></script>
<script type="text/javascript" src="../nifi/js/jquery/jquery.each.js"></script>
@ -53,7 +56,6 @@
<script type="text/javascript" src="../nifi/js/jquery/slickgrid/slick.grid.js"></script>
<script type="text/javascript" src="../nifi/js/codemirror/lib/codemirror-compressed.js"></script>
<script type="text/javascript" src="../nifi/js/nf/nf-namespace.js"></script>
<script type="text/javascript" src="../nifi/js/nf/nf-common.js"></script>
<script type="text/javascript" src="../nifi/js/nf/nf-storage.js"></script>
<script type="text/javascript" src="../nifi/js/nf/nf-ajax-setup.js"></script>
<script type="text/javascript" src="../nifi/js/nf/nf-universal-capture.js"></script>
@ -72,14 +74,14 @@
<div id="flowfile-policy-container">
<span id="selected-flowfile-policy" class="hidden"></span>
<div id="flowfile-policy-label" class="large-label">FlowFile Policy</div>
<img class="icon-info" src="images/iconInfo.png" alt="Info" title="Defines the behavior when multiple rules match. Use clone will ensure that each matching rule is executed with a copy of the original flowfile. Use original will execute all matching rules with the original flowfile in the order specified below."/>
<div class="info fa fa-question-circle" title="Defines the behavior when multiple rules match. Use clone will ensure that each matching rule is executed with a copy of the original flowfile. Use original will execute all matching rules with the original flowfile in the order specified below."></div>
<div id="flowfile-policy"></div>
<div class="clear"></div>
</div>
<div id="rule-label-container">
<div id="rules-label" class="large-label">Rules</div>
<img class="icon-info" src="images/iconInfo.png" alt="Info" title="Click and drag to change the order that rules are evaluated."/>
<div id="new-rule" class="new-rule hidden"></div>
<div class="info fa fa-question-circle" title="Click and drag to change the order that rules are evaluated."></div>
<button id="new-rule" class="new-rule hidden fa fa-plus"></button>
<div class="clear"></div>
</div>
<div id="rule-list-container">
@ -88,10 +90,10 @@
<div id="no-rules" class="unset">No rules found.</div>
<div id="rule-filter-controls" class="hidden">
<div id="rule-filter-container">
<input type="text" id="rule-filter"/>
<input type="text" placeholder="Filter" id="rule-filter"/>
<div id="rule-filter-type"></div>
</div>
<div id="rule-filter-stats">
<div id="rule-filter-stats" class="filter-status">
Displaying&nbsp;<span id="displayed-rules"></span>&nbsp;of&nbsp;<span id="total-rules"></span>
</div>
</div>
@ -106,8 +108,8 @@
<div id="selected-rule-conditions-container" class="selected-rule-detail">
<div class="large-label-container">
<div id="conditions-label" class="large-label">Conditions</div>
<img class="icon-info" src="images/iconInfo.png" alt="Info" title="All conditions must be met for this rule to match."/>
<div id="new-condition" title="New Condition" class="new-condition hidden"></div>
<div class="info fa fa-question-circle" title="All conditions must be met for this rule to match."></div>
<button id="new-condition" title="New Condition" class="new-condition hidden fa fa-plus"></button>
<div class="clear"></div>
</div>
<div id="selected-rule-conditions"></div>
@ -115,46 +117,46 @@
<div id="selected-rule-actions-container" class="selected-rule-detail">
<div class="large-label-container">
<div id="actions-label" class="large-label">Actions</div>
<div id="new-action" title="New Action" class="new-action hidden"></div>
<button id="new-action" title="New Action" class="new-action hidden fa fa-plus"></button>
<div class="clear"></div>
</div>
<div id="selected-rule-actions"></div>
</div>
<div style="margin-top: -10px;">
<div id="message"></div>
<div id="selected-rule-save" class="button hidden">Save</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div id="message-and-save-container">
<div id="selected-rule-save" class="button hidden">Save</div>
<div id="message"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="glass-pane"></div>
<div id="ok-dialog">
<div id="ok-dialog" class="small-dialog">
<div id="ok-dialog-content" class="dialog-content"></div>
</div>
<div id="yes-no-dialog">
<div id="yes-no-dialog" class="small-dialog">
<div id="yes-no-dialog-content" class="dialog-content"></div>
</div>
<div id="new-rule-dialog">
<div id="new-rule-dialog" class="small-dialog">
<div class="dialog-content">
<div class="rule-setting">
<div class="label">Rule name</div>
<div class="setting-name">Rule name</div>
<div>
<input id="new-rule-name" type="text" />
</div>
</div>
<div class="rule-setting">
<div class="label">Copy from existing rule (optional)</div>
<div class="setting-name">Copy from existing rule (optional)</div>
<div>
<input id="copy-from-rule-name" type="text" class="search" />
<input id="copy-from-rule-name" placeholder="Search rule name" type="text" class="search" />
</div>
</div>
</div>
</div>
<div id="new-condition-dialog" class="dialog">
<div style="margin-bottom: 32px;">
<div>
<div class="rule-setting">
<div class="label">Expression</div>
<div class="setting-name">Expression</div>
<div>
<div id="new-condition-expression"></div>
</div>
@ -162,20 +164,20 @@
</div>
<div id="new-condition-button-container">
<div id="new-condition-add" class="button button-normal">Add</div>
<div id="new-condition-cancel" class="button button-normal">Cancel</div>
<div id="new-condition-cancel" class="secondary-button button-normal">Cancel</div>
<div class="clear"></div>
</div>
</div>
<div id="new-action-dialog" class="dialog">
<div style="margin-bottom: 32px;">
<div class="rule-setting">
<div class="label">Attribute</div>
<div class="setting-name">Attribute</div>
<div id="new-action-attribute-container">
<input id="new-action-attribute" type="text"></input>
</div>
</div>
<div class="rule-setting" style="margin-top: 36px;">
<div class="label">Value</div>
<div class="rule-setting">
<div class="setting-name">Value</div>
<div>
<div id="new-action-value"></div>
</div>
@ -183,7 +185,7 @@
</div>
<div id="new-action-button-container">
<div id="new-action-add" class="button button-normal">Add</div>
<div id="new-action-cancel" class="button button-normal">Cancel</div>
<div id="new-action-cancel" class="secondary-button button-normal">Cancel</div>
<div class="clear"></div>
</div>
</div>

View File

@ -20,20 +20,14 @@
*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
display: block;
font-family: Roboto, sans-serif;
font-size: 62.5%;
}
textarea, input {
padding: 4px;
border: 1px solid #ccc;
font-family: Verdana;
font-size: 12px;
background: url('../images/bgInputText.png') repeat-x scroll center top white;
overflow: hidden;
color: #262626;
}
#update-attributes-content {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
@ -54,15 +48,9 @@ div.new-rule {
#new-rule-dialog {
display: none;
width: 400px;
height: 205px;
z-index: 1301;
}
#new-rule-dialog input {
width: 370px;
}
#update-attributes-content .ui-autocomplete {
max-height: 400px;
overflow: auto;
@ -77,98 +65,89 @@ div.new-rule {
border-radius: 0;
}
input.search {
font-style: italic;
color: #aaa;
}
/* rule list panel */
#rule-label-container {
margin-bottom: 5px;
height: 19px;
}
#rules-label {
float: left;
line-height: 19px;
line-height: 28px;
}
div.large-label {
color: #527991;
font-size: 13px;
color: #728e9b;
font-size: 12pt;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
margin-bottom: 5px;
line-height: 19px;
padding-bottom: 10px;
text-overflow: ellipsis;
float: left;
}
div.label {
color: #527991;
font-size: 10px;
font-weight: bold;
margin-bottom: 4px;
font-size: 12px;
font-weight: 500;
font-family: Roboto Slab;
padding-bottom: 4px;
color: #262626;
}
#rule-list-panel {
float: left;
margin-right: 20px;
width: 280px;
position: absolute;
top: 5px;
bottom: 5px;
left: 20px;
right: 65%;
}
#rule-list-container {
overflow-y: scroll;
overflow-x: hidden;
height: 437px;
padding: 5px;
border: 1px solid #ccc;
overflow-y: auto;
display: none;
position: absolute;
top: 116px;
bottom: 175px;
left: 0px;
right: 0px;
min-height: 45px;
}
#flowfile-policy-container {
margin-bottom: 20px;
}
#flowfile-policy-label {
float: left;
}
#flowfile-policy {
height: 20px;
line-height: 20px;
float: left;
width: 270px;
}
#rule-list {
width: 253px;
list-style-type: none;
margin: 0;
padding: 0;
background: #eaeef0;
padding: 4px 3px 1px 3px;
}
#rule-list li {
background: transparent url(../../nifi/images/bgButton.png) repeat-x center center;
border-top: 1px solid #d1d1d1;
border-right: 1px solid #a7a7a7;
border-bottom: 1px solid #828282;
border-left: 1px solid #a7a7a7;
color: #666;
position: relative;
background: #fff;
border-top: 1px solid #CCDADB;
border-right: 1px solid #CCDADB;
border-bottom: 1px solid #CCDADB;
border-left: 1px solid #CCDADB;
color: #004849;
font-weight: 500;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
line-height: 32px;
height: 32px;
padding: 0px 10px;
box-shadow: 0 1px 1px rgba(0,0,0,0.4);
margin-bottom: 5px;
padding: 8px;
list-style: none;
height: 12px;
font-size: 12px;
cursor: pointer;
}
#rule-list li.selected {
background: transparent url(../../nifi/images/bgButtonSelected.png) repeat-x center center;
border-top: 1px solid #aac1ce;
border-right: 1px solid #85a6b8;
border-bottom: 1px solid #618ba3;
border-left: 1px solid #85a6b8;
color: #355b6a;
background: #355B6A;
border-top: 1px solid #AAC1CE;
border-right: 1px solid #85A6B8;
border-bottom: 1px solid #618BA3;
border-left: 1px solid #85A6B8;
color: #fff;
font-weight: bold;
line-height: 32px;
height: 32px;
padding: 0px 10px;
}
#rule-list li.unsaved {
@ -179,129 +158,114 @@ div.label {
div.rule-label {
float: left;
width: 200px;
height: 12px;
line-height: 12px;
overflow: hidden;
white-space: nowrap;
}
div.remove-rule {
float: right;
width: 16px;
height: 16px;
background-image: url(../images/iconDelete.png);
cursor: pointer;
margin-top: -2px;
line-height: 32px;
}
#rule-filter-controls {
padding-top: 10px;
width: 280px;
}
#rule-filter-container {
height: 24px;
}
#rule-filter {
padding: 3px 0px 1px 3px;
font-size: 12px;
height: 18px;
line-height: 20px;
width: 173px;
margin-right: 3px;
float: left;
}
input.rule-filter-list {
color: #888;
position: absolute;
bottom: 63px;
left: 0px;
right: 0px;
}
#rule-filter-type {
width: 85px;
height: 18px;
line-height: 18px;
float: left;
}
#rule-filter-stats {
font-size: 9px;
font-weight: bold;
color: #9f6000;
clear: left;
line-height: normal;
margin-left: 5px;
margin-top: 5px;
margin-top: 10px;
}
/* rule details panel */
#rule-details-panel {
overflow: hidden;
overflow: auto;
position: absolute;
top: 5px;
bottom: 42px;
left: 37%;
right: 20px;
}
#no-rule-selected-label {
height: 25px
}
div.selected-rule-detail {
margin-bottom: 20px;
}
#selected-rule-name {
width: 500px;
clear: both;
height: 32px;
line-height: 32px;
}
div.large-label-container {
margin-bottom: 5px;
height: 19px;
margin-top: 10px;
line-height: 28px;
}
#conditions-label {
float: left;
line-height: 19px;
#flowfile-policy {
clear: both;
}
#new-condition {
float: right;
background: url("../images/buttonNew.png") no-repeat scroll left top transparent;
cursor: pointer;
height: 19px;
width: 19px;
position: absolute;
right: 0px;
}
#actions-label {
float: left;
line-height: 19px;
line-height: 28px;
}
#selected-rule-conditions {
height: 200px;
border: 1px solid;
}
#selected-rule-actions-container {
padding-top: 20px;
}
#selected-rule-conditions-container {
padding-top: 68px;
}
#selected-rule-name {
position: absolute;
right: 0px;
top: 26px;
}
#new-action {
float: right;
background: url("../images/buttonNew.png") no-repeat scroll left top transparent;
cursor: pointer;
height: 19px;
width: 19px;
position: absolute;
right: 0px;
}
#new-rule {
float: right;
}
#selected-rule-actions {
height: 200px;
border: 1px solid;
}
#message {
float: left;
color: #ba554a;
margin-left: 20px;
float: right;
margin-right: 20px;
line-height: 28px;
font-size: 13px;
font-weight: bold;
color: #f00;
}
#message-and-save-container {
position: absolute;
right: 0px;
left: 0px;
bottom: 0px;
}
#selected-rule-save {
margin: 0;
margin-right: 20px;
float: right;
}
input.editor-text {
@ -318,30 +282,15 @@ input.editor-text {
#ok-dialog {
display: none;
width: 450px;
height: 300px;
z-index: 1301;
}
#ok-dialog-content {
overflow: auto;
word-wrap: break-word;
height: 200px;
width: 410px;
}
#yes-no-dialog {
display: none;
width: 400px;
height: 200px;
z-index: 1301;
}
#new-condition-dialog {
display: none;
z-index: 1299;
border: 3px solid #365c6a;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.9);
cursor: move;
padding: 10px;
}
@ -357,7 +306,6 @@ input.editor-text {
#new-action-button-container, #new-condition-button-container {
bottom: 0;
left: 0;
padding: 0 8px 10px;
position: absolute;
right: 0;
}
@ -365,32 +313,16 @@ input.editor-text {
#new-action-dialog {
display: none;
z-index: 1299;
border: 3px solid #365c6a;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.9);
cursor: move;
padding: 10px;
}
#new-action-attribute-container {
position: absolute;
left: 10px;
right: 10px;
margin-bottom: 10px;
height: 25px;
padding-right: 10px;
overflow: hidden;
}
#new-action-attribute {
width: 100%;
}
#new-action-dialog .nfel-editor {
margin-bottom: 32px;
}
div.slickgrid-nfel-editor .nfel-editor {
margin-bottom: 30px;
margin-bottom: 37px;
}
div.property-detail .nfel-editor {
@ -418,9 +350,8 @@ div.rule-setting {
cursor: pointer;
}
img.icon-info {
float: left;
position: relative;
left: 5px;
top: 5px;
.info {
color: #004849;
margin-left: 5px;
font-size: 12px;
}

View File

@ -23,7 +23,6 @@ $(document).ready(function () {
});
var ua = {
searchRules: 'Search rule name',
newRuleIndex: 0,
editable: false,
@ -45,15 +44,41 @@ var ua = {
var conditionsGrid = ua.initConditionsGrid();
var actionsGrid = ua.initActionsGrid();
var toggleScrollable = function(element) {
if ($(element).is(':visible')){
if (element.offsetHeight < element.scrollHeight ||
element.offsetWidth < element.scrollWidth) {
// your element has overflow
$(element).addClass('scrollable');
} else {
$(element).removeClass('scrollable');
}
}
};
// enable grid resizing
$(window).resize(function (e) {
if (e.target === window) {
conditionsGrid.resizeCanvas();
actionsGrid.resizeCanvas();
ua.resizeSelectedRuleNameField();
// toggle .scrollable when appropriate
toggleScrollable($('#rule-details-panel').get(0));
// resize dialogs when appropriate
var dialogs = $('.dialog');
for (var i = 0, len = dialogs.length; i < len; i++) {
if ($(dialogs[i]).is(':visible')){
setTimeout(function(dialog){
dialog.modal('resize');
}, 50, $(dialogs[i]));
}
}
}
});
toggleScrollable($('#rule-details-panel').get(0));
// initialize the rule list
ua.initRuleList();
@ -127,15 +152,7 @@ var ua = {
// define the function for filtering the list
$('#rule-filter').keyup(function () {
ua.applyRuleFilter();
}).focus(function () {
if ($(this).hasClass('rule-filter-list')) {
$(this).removeClass('rule-filter-list').val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass('rule-filter-list').val('Filter');
}
}).addClass('rule-filter-list').val('Filter');
});
// filter type
$('#rule-filter-type').combo({
@ -223,19 +240,13 @@ var ua = {
});
}
// add styles for buttons
ua.addHoverEffect('div.button', 'button-normal', 'button-over');
// load the rules
ua.loadRuleList();
// potentionally resize the name field
ua.resizeSelectedRuleNameField();
// initialize the tooltips
$('img.icon-info').qtip({
$('.info').qtip({
style: {
classes: 'ui-tooltip-tipped ui-tooltip-shadow'
classes: 'ui-tooltip-tipped ui-tooltip-shadow nifi-tooltip'
},
show: {
solo: true,
@ -259,10 +270,16 @@ var ua = {
initNewRuleDialog: function () {
// new rule dialog configuration
$('#new-rule-dialog').modal({
headerText: 'New Rule',
headerText: 'Add Rule',
scrollableContentStyle: 'scrollable',
overlayBackground: false,
buttons: [{
buttonText: 'Add',
color: {
base: '#728E9B',
hover: '#004849',
text: '#ffffff'
},
handler: {
click: function () {
var ruleName = $('#new-rule-name').val();
@ -356,6 +373,11 @@ var ua = {
}
}, {
buttonText: 'Cancel',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',
text: '#004849'
},
handler: {
click: function () {
// close the dialog
@ -367,7 +389,7 @@ var ua = {
close: function () {
// reset the content
$('#new-rule-name').val('');
$('#copy-from-rule-name').removeData('copy-from-rule').addClass('search').val(ua.searchRules);
$('#copy-from-rule-name').removeData('copy-from-rule').val('');
}
}
});
@ -381,7 +403,8 @@ var ua = {
},
_resizeMenu: function () {
var ul = this.menu.element;
ul.width(374);
var padding = ($('#copy-from-rule-name').outerWidth()-$('#copy-from-rule-name').width())/2;
ul.width($('#copy-from-rule-name').outerWidth() - padding);
},
_renderMenu: function (ul, items) {
var self = this;
@ -440,12 +463,7 @@ var ua = {
// stop event propagation
return false;
}
}).focus(function () {
// conditionally clear the text for the user to type
if ($(this).val() === ua.searchRules) {
$(this).val('').removeClass('search');
}
}).val(ua.searchRules).addClass('search');
});
},
/**
@ -622,6 +640,11 @@ var ua = {
overlayBackground: false,
buttons: [{
buttonText: 'Ok',
color: {
base: '#728E9B',
hover: '#004849',
text: '#ffffff'
},
handler: {
click: function () {
// close the dialog
@ -657,7 +680,7 @@ var ua = {
initConditionsGrid: function () {
// custom formatter for the actions column
var conditionsActionFormatter = function (row, cell, value, columnDef, dataContext) {
return '<img src="images/iconDelete.png" title="Delete" class="pointer" style="margin-top: 2px" onclick="javascript:ua.deleteRow(\'#selected-rule-conditions\', \'' + row + '\');"/>';
return '<div title="Delete" class="pointer fa fa-close" onclick="javascript:ua.deleteRow(\'#selected-rule-conditions\', \'' + row + '\');"></div>';
};
// initialize the conditions grid
@ -735,7 +758,7 @@ var ua = {
initActionsGrid: function () {
// custom formatter for the actions column
var actionsActionFormatter = function (row, cell, value, columnDef, dataContext) {
return '<img src="images/iconDelete.png" title="Delete" class="pointer" style="margin-top: 2px" onclick="javascript:ua.deleteRow(\'#selected-rule-actions\', \'' + row + '\');"/>';
return '<div title="Delete" class="pointer fa fa-close" onclick="javascript:ua.deleteRow(\'#selected-rule-actions\', \'' + row + '\');"></div>';
};
// initialize the actions grid
@ -869,6 +892,11 @@ var ua = {
$('#yes-no-dialog-content').text('Rule \'' + currentlySelectedRule.name + '\' has unsaved changes. Do you want to save?');
$('#yes-no-dialog').modal('setHeaderText', 'Save Changes').modal('setButtonModel', [{
buttonText: 'Yes',
color: {
base: '#728E9B',
hover: '#004849',
text: '#ffffff'
},
handler: {
click: function () {
// close the dialog
@ -884,6 +912,11 @@ var ua = {
}
}, {
buttonText: 'No',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',
text: '#004849'
},
handler: {
click: function () {
// close the dialog
@ -1153,6 +1186,11 @@ var ua = {
$('#yes-no-dialog-content').text('Delete rule \'' + rule.name + '\'?');
$('#yes-no-dialog').modal('setHeaderText', 'Delete Confirmation').modal('setButtonModel', [{
buttonText: 'Yes',
color: {
base: '#728E9B',
hover: '#004849',
text: '#ffffff'
},
handler: {
click: function () {
// close the dialog
@ -1183,6 +1221,11 @@ var ua = {
}
}, {
buttonText: 'No',
color: {
base: '#E3E8EB',
hover: '#C7D2D7',
text: '#004849'
},
handler: {
click: function () {
// close the dialog
@ -1305,7 +1348,7 @@ var ua = {
var ruleItem = $('<li></li>').attr('id', rule.id).data('rule', rule).append(ruleLabel).appendTo(ruleList);
if (ua.editable) {
$('<div></div>').addClass('remove-rule').appendTo(ruleItem);
$('<div></div>').addClass('remove-rule fa fa-close').appendTo(ruleItem);
} else {
// remove the pointer cursor when not editable
ruleItem.css('cursor', 'default');
@ -1350,12 +1393,7 @@ var ua = {
* @returns {unresolved}
*/
getFilterText: function () {
var filter = '';
var ruleFilter = $('#rule-filter');
if (!ruleFilter.hasClass('rule-filter-list')) {
filter = ruleFilter.val();
}
return filter;
return $('#rule-filter').val();
},
/**
@ -1551,8 +1589,8 @@ var ua = {
'background': 'white',
'padding': '5px',
'overflow': 'hidden',
'border': '3px solid #365C6A',
'box-shadow': '4px 4px 6px rgba(0, 0, 0, 0.9)',
'border-radius': '2px',
'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
'cursor': 'move',
'top': offset.top - 5,
'left': offset.left - 5
@ -1569,14 +1607,10 @@ var ua = {
// create the input field
$('<textarea hidefocus rows="5" readonly="readonly"/>').css({
'background': 'white',
'width': (cellNode.width() - 5) + 'px',
'width': Math.max((cellNode.width() - 5), 202) + 'px',
'height': '80px',
'border-width': '0',
'outline': '0',
'overflow-y': 'auto',
'resize': 'both',
'margin-bottom': '28px'
'margin-bottom': '35px'
}).text(value).on('keydown', function (evt) {
if (evt.which === $.ui.keyCode.ESCAPE) {
cleanUp();
@ -1598,9 +1632,9 @@ var ua = {
// create the editor
editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
languageId: languageId,
width: (cellNode.width() - 5) + 'px',
width: Math.max((cellNode.width() - 5), 200) + 'px',
content: value,
minWidth: 175,
minWidth: 200,
minHeight: 100,
readOnly: true,
resizable: true,
@ -1629,8 +1663,7 @@ var ua = {
'position': 'absolute',
'bottom': '0',
'left': '0',
'right': '0',
'padding': '0 3px 5px'
'right': '0'
}).append(ok).append('<div class="clear"></div>').appendTo(wrapper);
},
@ -1662,8 +1695,8 @@ var ua = {
'background': 'white',
'padding': '5px',
'overflow': 'hidden',
'border': '3px solid #365C6A',
'box-shadow': '4px 4px 6px rgba(0, 0, 0, 0.9)',
'border-radius': '2px',
'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
'cursor': 'move'
}).draggable({
containment: 'parent'
@ -1671,24 +1704,20 @@ var ua = {
// create the input field
input = $('<textarea hidefocus rows="5"/>').css({
'background': 'white',
'width': args.position.width + 'px',
'min-width': '202px',
'height': '80px',
'border-width': '0',
'outline': '0',
'resize': 'both',
'margin-bottom': '28px'
'margin-bottom': '35px'
}).on('keydown', scope.handleKeyDown).appendTo(wrapper);
// create the button panel
var ok = $('<div class="button button-normal">Ok</div>').on('click', scope.save);
var cancel = $('<div class="button button-normal">Cancel</div>').on('click', scope.cancel);
var cancel = $('<div class="secondary-button button-normal">Cancel</div>').on('click', scope.cancel);
$('<div></div>').css({
'position': 'absolute',
'bottom': '0',
'left': '0',
'right': '0',
'padding': '0 3px 5px'
'right': '0'
}).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
// position and focus
@ -1792,12 +1821,13 @@ var ua = {
// create the wrapper
wrapper = $('<div></div>').addClass('slickgrid-nfel-editor').css({
'z-index': 100000,
'min-width': '200px',
'position': 'absolute',
'background': 'white',
'padding': '5px',
'overflow': 'hidden',
'border': '3px solid #365C6A',
'box-shadow': '4px 4px 6px rgba(0, 0, 0, 0.9)',
'border-radius': '2px',
'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
'cursor': 'move'
}).draggable({
cancel: 'input, textarea, pre, .button, div.' + editorClass,
@ -1807,8 +1837,8 @@ var ua = {
// create the editor
editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
languageId: languageId,
width: args.position.width,
minWidth: 175,
width: Math.max(args.position.width, 200),
minWidth: 200,
minHeight: 80,
resizable: true,
escape: function () {
@ -1821,13 +1851,12 @@ var ua = {
// create the button panel
var ok = $('<div class="button button-normal">Ok</div>').on('click', scope.save);
var cancel = $('<div class="button button-normal">Cancel</div>').on('click', scope.cancel);
var cancel = $('<div class="secondary-button button-normal">Cancel</div>').on('click', scope.cancel);
$('<div></div>').css({
'position': 'absolute',
'bottom': '0',
'left': '0',
'right': '0',
'padding': '0 3px 5px'
'right': '0'
}).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
// position and focus
@ -1896,15 +1925,6 @@ var ua = {
this.init();
},
/**
* Adjust the size of the selected rule name field.
*/
resizeSelectedRuleNameField: function () {
var ruleDetailsPanel = $('#rule-details-panel');
var ruleNameField = $('#selected-rule-name');
ruleNameField.width(Math.min(500, ruleDetailsPanel.width() - 10));
},
/**
* Gets the client id.
*