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/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/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/css/common-ui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
@ -62,7 +64,7 @@
<script type="text/javascript" src="app/transformjson/transformjson.service.js"></script>
<div ui-view>
<div ui-view id="mainView">
</div>

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

@ -13,27 +13,29 @@
limitations under the License.
-->
<div layout="column">
<div layout>&nbsp;&nbsp;&nbsp;</div>
<div layout="column" layout>
<md-toolbar>
<div class="md-toolbar-tools large-label">
<span>
Jolt Transformation DSL
</span>
<span>Jolt Transformation DSL</span>
<span flex></span>
<span ng-show="(jsonSpec || transform == 'jolt-transform-sort') && !validObj.valid && !error">{{validObj.message}}</span>
<span ng-show="jsonSpec && validObj.valid && !error">Specification is Valid</span>
<span ng-show="error">{{error}}</span>
<span>
&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
</button>
</span>
</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>
<md-select flex="30" ng-model="transform" ng-change="toggleEditor(specEditor,transform,true)" class="md-no-underline">
<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>
Jolt Specification
@ -41,12 +43,12 @@
<span flex></span>
<span class="info">
&nbsp;&nbsp;
<button ng-click="formatEditor(specEditor)" ng-disabled="!jsonSpec || transform == 'jolt-transform-sort'">
Format
<button class="small-button" ng-click="formatEditor(specEditor)" ng-disabled="!jsonSpec || transform == 'jolt-transform-sort'">
<i class="fa fa-align-left" aria-hidden="true" title="Format"></i>
</button>
</span>
</div>
</md-toolbar>
<div id="specEditor" ui-refresh="true" ng-model="jsonSpec" ui-codemirror="editorProperties" class="code-mirror-editor {{disableCSS}}" >
</div>
</div>
@ -60,13 +62,13 @@
<br/>
<span ng-show="error" class="info">{{error}}</span>
<span ng-show="saveStatus && !error" class="info">{{saveStatus}}</span>
<span class="large-label">
<button ng-click="showVariableDialog()">
Add Attributes
<span>
<button class="primary-button" ng-click="showVariableDialog()">
Attributes
</button>
</span>
<span class="large-label">
<button ng-click="saveSpec(jsonInput,getSpec(transform,jsonSpec),transform,processorId,clientId,revisionId)" ng-disabled="(!jsonSpec && transform != 'jolt-transform-sort') || !editable || !specUpdated">
<span>
<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
</button>
</span>
@ -78,7 +80,7 @@
<div layout="row">
<div flex="45">
<md-toolbar>
<div class="md-toolbar-tools large-label">
<span>
JSON Input
@ -86,21 +88,21 @@
<span flex></span>
<span class="info">
&nbsp;&nbsp;
<button ng-click="formatEditor(inputEditor)" ng-disabled="!(jsonInput) || (!jsonSpec && transform != 'jolt-transform-sort')">
Format
<button class="small-button" ng-click="formatEditor(inputEditor)" ng-disabled="!(jsonInput) || (!jsonSpec && transform != 'jolt-transform-sort')">
<i class="fa fa-align-left" aria-hidden="true" title="Format"></i>
</button>
</span>
</div>
</md-toolbar>
<div id="inputJson" ng-model="jsonInput" ui-refresh="true" ui-codemirror="inputProperties" class="code-mirror-editor"></div>
</div>
<div flex="10" layout="column" layout-align="center center">
<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
</button>
</div>
@ -108,11 +110,11 @@
</div>
<div flex="45">
<md-toolbar>
<div class="md-toolbar-tools large-label">
JSON Output
</div>
</md-toolbar>
<div id="outputJson" ng-model="jsonOutput" ui-refresh="true" ui-codemirror="outputProperties" class="code-mirror-editor"></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-toolbar>
<div class="md-toolbar-tools">
<div class="large-label">Attributes</div>
<div class="modal-header-label">Attributes</div>
<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>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content">
<p>
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:
<p class="modal-label">
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>
<md-content>
<div layout-gt-sm="row" layout-align="center center">
<div layout-gt-sm="row" layout-align="center">
<md-input-container flex="45">
<label>Key</label>
<label>Attribute</label>
<input ng-model="key"/>
</md-input-container>
@ -41,11 +38,12 @@
<input ng-model="value"/>
</md-input-container>
<md-input-container flex="10">
<md-button id="addButton" class="md-icon-button" ng-click="dialogCtl.parent.addVariable(dialogCtl.parent.variables,key,value)">
<span flex="5">&nbsp;</span>
<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>
</md-button>
<div class="md-errors-spacer"></div>
</button>
</md-input-container>
</div>
@ -53,16 +51,17 @@
<md-content>
<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">
<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 flex="45">{{key}}</div>
<div flex="45">{{value}}</div>
<div flex="10">
<md-button class="md-icon-button" ng-click="dialogCtl.parent.deleteVariable(dialogCtl.parent.variables,key)">
<span flex="5">&nbsp;</span>
<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>
</md-button>
</button>
</div>
</div>
</md-list-item>
@ -73,12 +72,12 @@
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button ng-click="dialogCtl.parent.cancelDialog()">
<button class="secondary-button" ng-click="dialogCtl.parent.cancelDialog()">
Cancel
</md-button>
<md-button ng-click="dialogCtl.parent.saveVariables(dialogCtl.parent.variables)">
</button>
<button class="primary-button" ng-click="dialogCtl.parent.saveVariables(dialogCtl.parent.variables)">
Save
</md-button>
</button>
</md-dialog-actions>
</md-dialog>

143
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;
}
div.code-mirror-editor {
border: 1px solid rgba(79, 70, 70, 0.13);
}
div.code-mirror-editor.trans {
opacity: 0.4;
@ -29,19 +27,16 @@ div.code-mirror-editor.trans {
}
.large-label {
color: #FFFFFF;
font-size: 13px;
color: #728e9b;
font-size: 12pt;
font-family: 'Roboto Slab';
font-style: normal;
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 {
border: 1px solid #eee;
@ -53,9 +48,6 @@ md-toolbar {
font-size: 75%;
}
.md-subheader .md-subheader-inner {
padding: 0px;
}
div.scrollable{
overflow-x: hidden;
@ -66,6 +58,15 @@ div.scrollable{
border-width: 1px 0 1px 0;
}
#mainView{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 22px;
}
#addButton {
font-size: 60%;
}
@ -73,3 +74,113 @@ div.scrollable{
#variableList {
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);
}