nifi-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From joew...@apache.org
Subject [3/3] nifi git commit: NIFI-3010 - This closes #1348. applied styling changes
Date Tue, 14 Feb 2017 03:39:36 GMT
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 <yolanda.m.davis@gmail.com>
Authored: Mon Jan 23 00:17:48 2017 -0500
Committer: joewitt <joewitt@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>&nbsp;&nbsp;&nbsp;</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>
 				&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>
-            </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">
                 &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>
+
         <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">
                     &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>
+            </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">&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>

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);
+}


Mime
View raw message