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

NIFI-3010 - This closes #1348. applied styling changes

This commit is contained in:
Yolanda M. Davis 2017-01-23 00:17:48 -05:00 committed by joewitt
parent 8d082d1aca
commit f1d0a6b36b
4 changed files with 193 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/WEB-INF/jsp/index.jsp
View File

@ -21,7 +21,9 @@
<link rel="stylesheet" type="text/css" href="../nifi/js/codemirror/lib/codemirror.css"/> <link rel="stylesheet" type="text/css" href="../nifi/js/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" type="text/css" href="../nifi/js/codemirror/addon/lint/lint.css"> <link rel="stylesheet" type="text/css" href="../nifi/js/codemirror/addon/lint/lint.css">
<link rel="stylesheet" type="text/css" href="../nifi/assets/angular-material/angular-material.min.css"> <link rel="stylesheet" type="text/css" href="../nifi/assets/angular-material/angular-material.min.css">
<link rel="stylesheet" type="text/css" href="../nifi/fonts/flowfont/flowfont.css" />
<link rel="stylesheet" type="text/css" href="../nifi/assets/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="../nifi/assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../nifi/css/common-ui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
</head> </head>
@ -62,7 +64,7 @@
<script type="text/javascript" src="app/transformjson/transformjson.service.js"></script> <script type="text/javascript" src="app/transformjson/transformjson.service.js"></script>
<div ui-view> <div ui-view id="mainView">
</div> </div>

84
nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/transformjson.view.html
View File

@ -13,40 +13,42 @@
limitations under the License. limitations under the License.
--> -->
<div layout="column"> <div layout="column">
<div layout>&nbsp;&nbsp;&nbsp;</div>
<div layout="column" layout> <div layout="column" layout>
<md-toolbar>
<div class="md-toolbar-tools large-label"> <div class="md-toolbar-tools large-label">
<span> <span>Jolt Transformation DSL</span>
Jolt Transformation DSL <span flex></span>
</span> <span ng-show="(jsonSpec || transform == 'jolt-transform-sort') && !validObj.valid && !error">{{validObj.message}}</span>
<span flex></span> <span ng-show="jsonSpec && validObj.valid && !error">Specification is Valid</span>
<span ng-show="(jsonSpec || transform == 'jolt-transform-sort') && !validObj.valid && !error">{{validObj.message}}</span> <span ng-show="error">{{error}}</span>
<span ng-show="jsonSpec && validObj.valid && !error">Specification is Valid</span> <span>
<span ng-show="error">{{error}}</span>
<span>
&nbsp;&nbsp; &nbsp;&nbsp;
<button ng-click="validateJson(jsonInput,getSpec(transform,jsonSpec),transform)" ng-disabled="!(jsonSpec)"> <button class="primary-button" ng-click="validateJson(jsonInput,getSpec(transform,jsonSpec),transform)" ng-disabled="!(jsonSpec)">
Validate Validate
</button> </button>
</span> </span>
</div> </div>
<div class="md-toolbar-tools large-label">
<select ng-model="transform" ng-options="option.value as option.label for option in transformOptions | orderBy: 'label'" ng-change="toggleEditor(specEditor,transform,true)"></select> <div class="md-toolbar-tools large-label">
</div> <md-select flex="30" ng-model="transform" ng-change="toggleEditor(specEditor,transform,true)" class="md-no-underline">
<div class="md-toolbar-tools large-label"> <md-option ng-repeat="option in transformOptions | orderBy: 'label'" ng-value="option.value">{{option.label}}</md-option>
</md-select>
<span flex></span>
</div>
<div class="md-toolbar-tools large-label">
<span> <span>
Jolt Specification Jolt Specification
</span> </span>
<span flex></span> <span flex></span>
<span class="info"> <span class="info">
&nbsp;&nbsp; &nbsp;&nbsp;
<button ng-click="formatEditor(specEditor)" ng-disabled="!jsonSpec || transform == 'jolt-transform-sort'"> <button class="small-button" ng-click="formatEditor(specEditor)" ng-disabled="!jsonSpec || transform == 'jolt-transform-sort'">
Format <i class="fa fa-align-left" aria-hidden="true" title="Format"></i>
</button> </button>
</span> </span>
</div> </div>
</md-toolbar>
<div id="specEditor" ui-refresh="true" ng-model="jsonSpec" ui-codemirror="editorProperties" class="code-mirror-editor {{disableCSS}}" > <div id="specEditor" ui-refresh="true" ng-model="jsonSpec" ui-codemirror="editorProperties" class="code-mirror-editor {{disableCSS}}" >
</div> </div>
</div> </div>
@ -60,13 +62,13 @@
<br/> <br/>
<span ng-show="error" class="info">{{error}}</span> <span ng-show="error" class="info">{{error}}</span>
<span ng-show="saveStatus && !error" class="info">{{saveStatus}}</span> <span ng-show="saveStatus && !error" class="info">{{saveStatus}}</span>
<span class="large-label"> <span>
<button ng-click="showVariableDialog()"> <button class="primary-button" ng-click="showVariableDialog()">
Add Attributes Attributes
</button> </button>
</span> </span>
<span class="large-label"> <span>
<button ng-click="saveSpec(jsonInput,getSpec(transform,jsonSpec),transform,processorId,clientId,revisionId)" ng-disabled="(!jsonSpec && transform != 'jolt-transform-sort') || !editable || !specUpdated"> <button class="primary-button" ng-click="saveSpec(jsonInput,getSpec(transform,jsonSpec),transform,processorId,clientId,revisionId)" ng-disabled="(!jsonSpec && transform != 'jolt-transform-sort') || !editable || !specUpdated">
Save Save
</button> </button>
</span> </span>
@ -78,29 +80,29 @@
<div layout="row"> <div layout="row">
<div flex="45"> <div flex="45">
<md-toolbar>
<div class="md-toolbar-tools large-label"> <div class="md-toolbar-tools large-label">
<span> <span>
JSON Input JSON Input
</span> </span>
<span flex></span> <span flex></span>
<span class="info"> <span class="info">
&nbsp;&nbsp; &nbsp;&nbsp;
<button ng-click="formatEditor(inputEditor)" ng-disabled="!(jsonInput) || (!jsonSpec && transform != 'jolt-transform-sort')"> <button class="small-button" ng-click="formatEditor(inputEditor)" ng-disabled="!(jsonInput) || (!jsonSpec && transform != 'jolt-transform-sort')">
Format <i class="fa fa-align-left" aria-hidden="true" title="Format"></i>
</button> </button>
</span> </span>
</div> </div>
</md-toolbar>
<div id="inputJson" ng-model="jsonInput" ui-refresh="true" ui-codemirror="inputProperties" class="code-mirror-editor"></div> <div id="inputJson" ng-model="jsonInput" ui-refresh="true" ui-codemirror="inputProperties" class="code-mirror-editor"></div>
</div> </div>
<div flex="10" layout="column" layout-align="center center"> <div flex="10" layout="column" layout-align="center center">
<div class="large-label"> <div class="large-label">
<button ng-click="transformJson(jsonInput,getSpec(transform,jsonSpec),transform)" ng-disabled="!(jsonInput) || (!jsonSpec && transform != 'jolt-transform-sort')"> <button class="primary-button" ng-click="transformJson(jsonInput,getSpec(transform,jsonSpec),transform)" ng-disabled="!(jsonInput) || (!jsonSpec && transform != 'jolt-transform-sort')">
Transform Transform
</button> </button>
</div> </div>
@ -108,11 +110,11 @@
</div> </div>
<div flex="45"> <div flex="45">
<md-toolbar>
<div class="md-toolbar-tools large-label"> <div class="md-toolbar-tools large-label">
JSON Output JSON Output
</div> </div>
</md-toolbar>
<div id="outputJson" ng-model="jsonOutput" ui-refresh="true" ui-codemirror="outputProperties" class="code-mirror-editor"></div> <div id="outputJson" ng-model="jsonOutput" ui-refresh="true" ui-codemirror="outputProperties" class="code-mirror-editor"></div>
</div> </div>

39
nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/variable-dialog-template.html
View File

@ -15,24 +15,21 @@
<md-dialog flex="40" aria-label="Attributes"> <md-dialog flex="40" aria-label="Attributes">
<md-toolbar> <md-toolbar>
<div class="md-toolbar-tools"> <div class="md-toolbar-tools">
<div class="large-label">Attributes</div> <div class="modal-header-label">Attributes</div>
<span flex></span> <span flex></span>
<md-button class="md-icon-button" ng-click="dialogCtl.parent.cancelDialog()">
<i class="fa fa-times" aria-hidden="true"></i>
</md-button>
</div> </div>
</md-toolbar> </md-toolbar>
<md-dialog-content> <md-dialog-content>
<div class="md-dialog-content"> <div class="md-dialog-content">
<p> <p class="modal-label">
Enter attributes (keys) and values to reference within your specification for testing input. These attribute values will only be available for testing and not when executing the actual flow: Enter attributes and values to reference within your specification for testing input. These attribute values will only be available for testing and not when executing the actual flow:
</p> </p>
<md-content> <md-content>
<div layout-gt-sm="row" layout-align="center center"> <div layout-gt-sm="row" layout-align="center">
<md-input-container flex="45"> <md-input-container flex="45">
<label>Key</label> <label>Attribute</label>
<input ng-model="key"/> <input ng-model="key"/>
</md-input-container> </md-input-container>
@ -41,11 +38,12 @@
<input ng-model="value"/> <input ng-model="value"/>
</md-input-container> </md-input-container>
<md-input-container flex="10"> <span flex="5">&nbsp;</span>
<md-button id="addButton" class="md-icon-button" ng-click="dialogCtl.parent.addVariable(dialogCtl.parent.variables,key,value)">
<md-input-container flex="5">
<button class="modal-button" id="addButton" ng-click="dialogCtl.parent.addVariable(dialogCtl.parent.variables,key,value)">
<i class="fa fa-plus" aria-hidden="true"></i> <i class="fa fa-plus" aria-hidden="true"></i>
</md-button> </button>
<div class="md-errors-spacer"></div>
</md-input-container> </md-input-container>
</div> </div>
@ -53,16 +51,17 @@
<md-content> <md-content>
<md-list> <md-list>
<md-subheader class="md-no-sticky">Attribute - Value Pair(s):</md-subheader> <md-subheader class="md-no-sticky modal-label">Attribute - Values:</md-subheader>
<div id="variableList" class="scrollable"> <div id="variableList" class="scrollable">
<md-list-item class="md-2-line" ng-repeat="(key,value) in dialogCtl.parent.variables"> <md-list-item class="md-2-line" ng-repeat="(key,value) in dialogCtl.parent.variables">
<div class="md-list-item-text" layout="row" layout-align="center center"> <div class="md-list-item-text" layout="row" layout-align="center center">
<div flex="45">{{key}}</div> <div flex="45">{{key}}</div>
<div flex="45">{{value}}</div> <div flex="45">{{value}}</div>
<div flex="10"> <span flex="5">&nbsp;</span>
<md-button class="md-icon-button" ng-click="dialogCtl.parent.deleteVariable(dialogCtl.parent.variables,key)"> <div flex="5">
<button class="modal-button" ng-click="dialogCtl.parent.deleteVariable(dialogCtl.parent.variables,key)">
<i class="fa fa-trash-o" aria-hidden="true"></i> <i class="fa fa-trash-o" aria-hidden="true"></i>
</md-button> </button>
</div> </div>
</div> </div>
</md-list-item> </md-list-item>
@ -73,12 +72,12 @@
</md-dialog-content> </md-dialog-content>
<md-dialog-actions layout="row"> <md-dialog-actions layout="row">
<span flex></span> <span flex></span>
<md-button ng-click="dialogCtl.parent.cancelDialog()"> <button class="secondary-button" ng-click="dialogCtl.parent.cancelDialog()">
Cancel Cancel
</md-button> </button>
<md-button ng-click="dialogCtl.parent.saveVariables(dialogCtl.parent.variables)"> <button class="primary-button" ng-click="dialogCtl.parent.saveVariables(dialogCtl.parent.variables)">
Save Save
</md-button> </button>
</md-dialog-actions> </md-dialog-actions>
</md-dialog> </md-dialog>

145
nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/css/main.css
View File

@ -19,9 +19,7 @@ body {
font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Verdana, Arial, Helvetica, sans-serif;
} }
div.code-mirror-editor {
border: 1px solid rgba(79, 70, 70, 0.13);
}
div.code-mirror-editor.trans { div.code-mirror-editor.trans {
opacity: 0.4; opacity: 0.4;
@ -29,19 +27,16 @@ div.code-mirror-editor.trans {
} }
.large-label { .large-label {
color: #FFFFFF; color: #728e9b;
font-size: 13px; font-size: 12pt;
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold; font-weight: bold;
line-height: 19px; padding-bottom: 10px;
text-overflow: ellipsis;
float: left;
} }
div.md-toolbar-tools{
height: 30px;
}
md-toolbar {
min-height: 30px;
}
.CodeMirror { .CodeMirror {
border: 1px solid #eee; border: 1px solid #eee;
@ -53,9 +48,6 @@ md-toolbar {
font-size: 75%; font-size: 75%;
} }
.md-subheader .md-subheader-inner {
padding: 0px;
}
div.scrollable{ div.scrollable{
overflow-x: hidden; overflow-x: hidden;
@ -66,10 +58,129 @@ div.scrollable{
border-width: 1px 0 1px 0; border-width: 1px 0 1px 0;
} }
#mainView{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 22px;
}
#addButton { #addButton {
font-size: 60%; font-size: 60%;
} }
#variableList { #variableList {
word-wrap: break-word; word-wrap: break-word;
} }
.primary-button , .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: 0;
position: relative;
color: #fff;
cursor: pointer;
}
.primary-button{
background: #728e9b;
}
.primary-button:hover:not(.disabled-button){
background: rgb(0,72,73);
}
.secondary-button{
background: rgb(227, 232, 235); color: rgb(0, 72, 73);
}
.secondary-button:hover:not(.disabled-button){
background: rgb(199, 210, 215);
border-color: rgb(199, 210, 215);
color: rgb(0, 72, 73);
}
button.small-button {
height: 100%;
width: 28px;
}
div.md-toolbar-tools{
height: 35px;
padding: 0 0px;
}
.md-subheader .md-subheader-inner{
padding: 0px 0px 16px 0px;
}
md-toolbar {
min-height: 30px;
}
md-list-item.md-2-line{
padding: 0px 0px 16px 0px;
margin-top: 10px;
margin-bottom: 10px;
min-height: 30px;
}
button.modal-button {
width: 28px;
}
.modal-header-label {
color: #fff;
font-size: 18px;
font-family: Roboto Slab;
font-style: normal;
font-weight: bold;
line-height: 56px;
padding-left: 20px;
text-overflow: ellipsis;
}
.modal-label {
font-size: 14px;
font-weight: 500;
font-family: Roboto Slab;
text-transform: capitalize;
padding-bottom: 4px;
color: #262626;
}
md-dialog .md-actions, md-dialog md-dialog-actions {
padding-right: 0px;
min-height: 0px;
}
md-option {
height: 32px;
padding: 0px 10px 0px 10px;
background-color:rgb(255, 255, 255);
border-color: rgb(234, 238, 240)
}
md-select .md-select-value {
font-size: 9pt;
font-style: normal;
font-weight: normal;
background-color:rgb(234, 238, 240);
border-bottom-color: rgb(234, 238, 240);
}
md-option .md-text{
font-size: 9pt;
font-style: normal;
font-weight: normal;
color: rgb(38, 38, 38);
}