You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by jo...@apache.org on 2017/02/14 03:39:36 UTC
[3/3] nifi git commit: NIFI-3010 - This closes #1348. applied styling
changes
NIFI-3010 - This closes #1348. applied styling changes
Project: http://git-wip-us.apache.org/repos/asf/nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/f1d0a6b3
Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/f1d0a6b3
Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/f1d0a6b3
Branch: refs/heads/master
Commit: f1d0a6b36b86b8ad4b86f77e4341be5723cb4b8c
Parents: 8d082d1
Author: Yolanda M. Davis <yo...@gmail.com>
Authored: Mon Jan 23 00:17:48 2017 -0500
Committer: joewitt <jo...@apache.org>
Committed: Mon Feb 13 22:38:54 2017 -0500
----------------------------------------------------------------------
.../src/main/webapp/WEB-INF/jsp/index.jsp | 4 +-
.../app/transformjson/transformjson.view.html | 84 +++++------
.../transformjson/variable-dialog-template.html | 39 +++--
.../src/main/webapp/css/main.css | 145 ++++++++++++++++---
4 files changed, 193 insertions(+), 79 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/nifi/blob/f1d0a6b3/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/WEB-INF/jsp/index.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/WEB-INF/jsp/index.jsp b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/WEB-INF/jsp/index.jsp
index b14c818..3b63d1f 100644
--- a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -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>
http://git-wip-us.apache.org/repos/asf/nifi/blob/f1d0a6b3/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/transformjson.view.html
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/transformjson.view.html b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/transformjson.view.html
index 53cec3e..e236449 100644
--- a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/transformjson.view.html
+++ b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/transformjson.view.html
@@ -13,40 +13,42 @@
limitations under the License.
-->
<div layout="column">
- <div layout> </div>
<div layout="column" layout>
- <md-toolbar>
- <div class="md-toolbar-tools large-label">
- <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>
+
+ <div class="md-toolbar-tools large-label">
+ <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>
- <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>
- </div>
- <div class="md-toolbar-tools large-label">
+ </span>
+ </div>
+
+ <div class="md-toolbar-tools large-label">
+ <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
</span>
- <span flex></span>
+ <span flex></span>
<span class="info">
- <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>
+
<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,29 +80,29 @@
<div layout="row">
<div flex="45">
- <md-toolbar>
- <div class="md-toolbar-tools large-label">
+
+ <div class="md-toolbar-tools large-label">
<span>
JSON Input
</span>
- <span flex></span>
+ <span flex></span>
<span class="info">
- <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>
+ </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 class="md-toolbar-tools large-label">
+ JSON Output
+ </div>
+
<div id="outputJson" ng-model="jsonOutput" ui-refresh="true" ui-codemirror="outputProperties" class="code-mirror-editor"></div>
</div>
http://git-wip-us.apache.org/repos/asf/nifi/blob/f1d0a6b3/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/variable-dialog-template.html
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/variable-dialog-template.html b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/variable-dialog-template.html
index 8cf2eb1..1ba0335 100644
--- a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/variable-dialog-template.html
+++ b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/app/transformjson/variable-dialog-template.html
@@ -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"> </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"> </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>
http://git-wip-us.apache.org/repos/asf/nifi/blob/f1d0a6b3/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/css/main.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/css/main.css
index c5bc0ac..3ad38c4 100644
--- a/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/css/main.css
+++ b/nifi-nar-bundles/nifi-standard-bundle/nifi-jolt-transform-json-ui/src/main/webapp/css/main.css
@@ -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,10 +58,129 @@ 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%;
}
#variableList {
word-wrap: break-word;
-}
\ No newline at end of file
+}
+
+.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);
+}