From 9c04c2b18dc92f878ba89540170c443c35447b0a Mon Sep 17 00:00:00 2001
From: Stanislav Jamrich <sjamrich@cisco.com>
Date: Mon, 28 Nov 2016 18:14:20 +0100
Subject: [PATCH] Yangman - bugfixes and improvements

- do not consider 'Fill form with ...' checkbox in json view
- prevent loosing data when toggling current view
- stretch up receive data height in JSON view if height of sent data has been
  reduced in order to fill up empty space
- request menu in History and Collections tab has contained request id -
  probably mistake during merge
- request date now correctly respects the time zone in History tab
- enable copy of data from RPC output in Form view & color of output no so
  gray
- strech up Received data height to full available height, in case Sent
  data won't be shown
- show execution time in request tooltip in history tab
- width of input fields adjusted to 100%

Change-Id: I0693df6bcab9456f6162fda3eef2269dc94e1566
Signed-off-by: Stanislav Jamrich <sjamrich@cisco.com>
---
 .../controllers/request-header.controller.js  | 11 ++++--
 .../yangman/controllers/yangman.controller.js |  1 +
 .../directives/height-watcher.directive.js    | 39 +++++++++++++++++++
 .../yangman/models/historylist.model.js       |  2 +-
 .../views/leftpanel/request-item.tpl.html     |  6 ++-
 .../yangman/views/rightpanel/detail.tpl.html  |  4 ++
 .../rightpanel/form/config/leaf-list.tpl.html |  4 +-
 .../rightpanel/form/config/leaf.tpl.html      |  3 +-
 .../form/config/types/binary.tpl.html         |  7 ++--
 .../form/config/types/bits.tpl.html           |  2 +-
 .../form/config/types/boolean.tpl.html        |  4 +-
 .../form/config/types/decimal64.tpl.html      |  7 ++--
 .../form/config/types/default.tpl.html        |  6 +--
 .../form/config/types/empty.tpl.html          |  2 +-
 .../form/config/types/enumeration.tpl.html    |  2 +-
 .../form/config/types/identityref.tpl.html    |  7 ++--
 .../config/types/instance-identifier.tpl.html |  7 ++--
 .../form/config/types/int16.tpl.html          |  7 ++--
 .../form/config/types/int32.tpl.html          |  7 ++--
 .../form/config/types/int64.tpl.html          |  7 ++--
 .../form/config/types/int8.tpl.html           |  7 ++--
 .../form/config/types/leafref.tpl.html        |  7 ++--
 .../form/config/types/string.tpl.html         |  7 ++--
 .../form/config/types/uint16.tpl.html         |  7 ++--
 .../form/config/types/uint32.tpl.html         |  7 ++--
 .../form/config/types/uint64.tpl.html         |  7 ++--
 .../form/config/types/uint8.tpl.html          |  7 ++--
 .../form/operational/leaf-list.tpl.html       |  2 +-
 .../src/main/resources/yangman/yangman.less   | 16 ++++++++
 29 files changed, 141 insertions(+), 61 deletions(-)
 create mode 100644 modules/yangman-resources/src/main/resources/yangman/directives/height-watcher.directive.js

diff --git a/modules/yangman-resources/src/main/resources/yangman/controllers/request-header.controller.js b/modules/yangman-resources/src/main/resources/yangman/controllers/request-header.controller.js
index 7b0d995e..c7bb91bc 100644
--- a/modules/yangman-resources/src/main/resources/yangman/controllers/request-header.controller.js
+++ b/modules/yangman-resources/src/main/resources/yangman/controllers/request-header.controller.js
@@ -20,6 +20,7 @@ define([
         requestHeader.constants = constants;
         requestHeader.urlChanged = false;
         requestHeader.executedOperation = null;
+
         requestHeader.selectedOperationsList = [];
         requestHeader.selectedOperation = null;
         requestHeader.requestUrl = '';
@@ -193,11 +194,13 @@ define([
                     },
                     default: function (){
                         var dataType;
-                        if(requestHeader.executedOperation) {
-                            dataType = requestHeader.executedOperation === constants.OPERATION_GET ? constants.REQUEST_DATA_TYPE_RECEIVED : 'SENT';
+                        if (requestHeader.executedOperation) {
+                            dataType = requestHeader.executedOperation === constants.OPERATION_GET ?
+                                constants.REQUEST_DATA_TYPE_RECEIVED :
+                                'SENT';
                         }
                         else {
-                            dataType = requestHeader.selectedOperation === constants.OPERATION_GET ? constants.REQUEST_DATA_TYPE_RECEIVED : 'SENT';
+                            dataType = 'SENT';
                         }
 
                         $scope.rootBroadcast(constants.YANGMAN_GET_CODEMIRROR_DATA + dataType, params);
@@ -422,7 +425,7 @@ define([
 
                 var preparedReceivedData = {};
 
-                if (requestHeader.fillFormWithReceivedData) {
+                if (requestHeader.fillFormWithReceivedData || requestHeader.selectedShownDataType === constants.DISPLAY_TYPE_REQ_DATA ) {
                     preparedReceivedData = YangmanService.prepareReceivedData(
                         $scope.node,
                         requestHeader.selectedOperation,
diff --git a/modules/yangman-resources/src/main/resources/yangman/controllers/yangman.controller.js b/modules/yangman-resources/src/main/resources/yangman/controllers/yangman.controller.js
index d0ab09cf..1ef55eeb 100644
--- a/modules/yangman-resources/src/main/resources/yangman/controllers/yangman.controller.js
+++ b/modules/yangman-resources/src/main/resources/yangman/controllers/yangman.controller.js
@@ -15,6 +15,7 @@ define([
     'app/yangman/services/history-settings.services',
     'app/yangman/directives/ui-codemirror.directive',
     'app/yangman/directives/read_file.directive',
+    'app/yangman/directives/height-watcher.directive',
 ], function () {
     'use strict';
 
diff --git a/modules/yangman-resources/src/main/resources/yangman/directives/height-watcher.directive.js b/modules/yangman-resources/src/main/resources/yangman/directives/height-watcher.directive.js
new file mode 100644
index 00000000..4ba54c31
--- /dev/null
+++ b/modules/yangman-resources/src/main/resources/yangman/directives/height-watcher.directive.js
@@ -0,0 +1,39 @@
+define([], function () {
+    'use strict';
+
+    angular.module('app.yangman').directive('heightWatcher', heightWatcherDirective);
+
+    function heightWatcherDirective() {
+    return {
+        restrict: 'A',
+        link: function (scope, element, attrs) {
+            scope.$watch(function () {
+                return element.css(attrs['watchAttribute']);
+            },  heightChangedCallBack,
+            true);
+
+            scope.heightTotal = null;
+
+            function heightChangedCallBack(newHeight, oldHeight) {
+                var heightReceivedData, heightSentData;
+
+                if (newHeight !== oldHeight) {
+                    // set total available height
+                    scope.heightTotal = angular.element('#jsonSection')[0].offsetHeight;
+
+                    // set full height of ReceiveData (if there will be no sent data)
+                    angular.element('#ReceiveData').css('height', scope.heightTotal + 'px');
+
+                    heightSentData = angular.element('#sentData')[0].offsetHeight;
+                    heightReceivedData = angular.element('#ReceiveData')[0].offsetHeight;
+
+                    // set ReceiveData height to fill up bottom
+                    if ((heightSentData + heightReceivedData) < scope.heightTotal) {
+                        angular.element('#ReceiveData').css('height', scope.heightTotal - heightSentData + 'px');
+                    }
+                }
+            }
+        }
+    };
+    }
+});
diff --git a/modules/yangman-resources/src/main/resources/yangman/models/historylist.model.js b/modules/yangman-resources/src/main/resources/yangman/models/historylist.model.js
index 659ebbd7..0d94b058 100644
--- a/modules/yangman-resources/src/main/resources/yangman/models/historylist.model.js
+++ b/modules/yangman-resources/src/main/resources/yangman/models/historylist.model.js
@@ -78,8 +78,8 @@ define(['app/yangman/models/baselist.model'], function (BaseListModel){
          * @returns {number|*}
          */
         function roundTimestampToDate(timeStamp){
-            timeStamp -= timeStamp % (24 * 60 * 60 * 1000);//subtract amount of time since midnight
             timeStamp += new Date().getTimezoneOffset() * 60 * 1000;//add on the timezone offset
+            timeStamp -= timeStamp % (24 * 60 * 60 * 1000);//subtract amount of time since midnight
             return timeStamp;
         }
 
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/leftpanel/request-item.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/leftpanel/request-item.tpl.html
index b0e52b6c..90758bef 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/leftpanel/request-item.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/leftpanel/request-item.tpl.html
@@ -8,7 +8,10 @@
 
     <div flex="15" class="yangmanModule__requests-list__group__item__method" layout-align="center center">
         <p id="{{itemId}}-operation" class="{{request.status === 'success' || !request.status ? request.method : 'error'}}"> {{request.method === vm.constants.OPERATION_DELETE ? 'DEL' : request.method }} </p>
-        <md-tooltip ng-show="request.status.length" md-direction="bottom" ng-show="request.status">{{request.status | uppercase }}</md-tooltip>
+        <md-tooltip ng-show="request.status.length" md-direction="bottom" ng-show="request.status">
+            Status: {{request.status | uppercase }} <br />
+            Run at: {{request.timestamp | date: 'medium' }}
+        </md-tooltip>
     </div>
 
     <div flex class="yangmanModule__requests-list__group__item__path" layout="column">
@@ -37,7 +40,6 @@
                 {{'YANGMAN_REQ_RUN'| translate}}
             </md-button>
         </md-menu-item>
-                       id="{{itemId}}-show-sent-data"
         <md-menu-item ng-if="request.collection.length">
             <md-button aria-label="{{'YANGMAN_REQ_DUPLICATE'| translate}}"
                        id="{{itemId}}-duplicate"
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/detail.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/detail.tpl.html
index 6fd9194e..65bc804c 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/detail.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/detail.tpl.html
@@ -18,6 +18,7 @@
 
 <!-- JSON section -->
 <section class="yangmanModule__right-panel__req-data bottom-content"
+         id="jsonSection"
          ng-cloak
          ng-show="rightPanelSection === main.constants.DISPLAY_TYPE_REQ_DATA">
 
@@ -27,6 +28,8 @@
          ng-show="main.jsonView.sent"
          ng-init="requestData.init('SENT')"
          ng-class="{'half-size': main.jsonView.received && main.jsonView.sent}"
+         height-watcher watch-attribute="height"
+         id="sentData"
          class="yangmanModule__right-panel__req-data__cm-SENT ym-resizable-s">
 
         <section class="yangmanModule__right-panel__req-data__header" layout="row">
@@ -54,6 +57,7 @@
          ng-show="main.jsonView.received"
          ng-init="requestData.init(main.constants.REQUEST_DATA_TYPE_RECEIVED)"
          ng-class="{'half-size': main.jsonView.received && main.jsonView.sent}"
+         id="ReceiveData"
          class="yangmanModule__right-panel__req-data__cm-RECEIVED ym-resizable-s">
 
         <section class="yangmanModule__right-panel__req-data__header" layout="row">
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf-list.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf-list.tpl.html
index 49d5d8e7..d43769d3 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf-list.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf-list.tpl.html
@@ -28,9 +28,9 @@
 
     <div ng-repeat="elem in node.value" ng-show="node.expanded">
         <!-- Leaf list values -->
-        <md-input-container md-no-float  class="input-icon-container">
+        <md-input-container md-no-float  class="input-icon-container full_width">
             <!-- input -->
-            <input  ng-change="yangLeafList.changed()" ng-model="elem.value" aria-label="{{elem.value}}">
+            <input  ng-change="yangLeafList.changed()" ng-model="elem.value" aria-label="{{elem.value}}" class="full_width">
 
             <!-- remove Icon -->
             <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-click="yangLeafList.removeListElem(elem)">
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf.tpl.html
index 78f410ea..7ec13abf 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/leaf.tpl.html
@@ -18,6 +18,7 @@
          ng-repeat="type in node.getChildren('type')"
          ng-include="yangForm.viewPath + '/config/types/' + yangLeaf.getLeafType() + '.tpl.html'"
          {{yangLeaf.getLeafType() === 'union' ? 'flex="grow"' : ''}}
-         layout="row">
+         layout="row"
+         class="full_width">
     </div>
 </div>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/binary.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/binary.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/binary.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/binary.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/bits.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/bits.tpl.html
index 382b1198..8606099e 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/bits.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/bits.tpl.html
@@ -10,7 +10,7 @@
                  ng-true-value="1"
                  ng-false-value="0"
                  ng-change="yangTypeBit.valueChanged()"
-                 ng-disabled="{{ yangOutput.notEditable }}"
+                 ng-readonly="{{ yangOutput.notEditable }}"
                  aria-label="{{bit.label}}">
         {{bit.label}}
     </md-checkbox>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/boolean.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/boolean.tpl.html
index fd564b4a..d7008531 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/boolean.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/boolean.tpl.html
@@ -1,9 +1,9 @@
-<section ng-controller="YMTypeBooleanCtrl as yangTypeBolean" layout="row" class="layout-row flex-center" flex>
+<section ng-controller="YMTypeBooleanCtrl as yangTypeBolean" layout="row" class="layout-row flex-center">
 	<span class="mr8">F</span>
     <md-switch ng-model="node.value"
                id="{{ node.label + node.id }}"
                aria-label="Boolean"
-               ng-disabled="{{ yangOutput.notEditable }}">
+               ng-readonly="{{ yangOutput.notEditable }}">
     </md-switch>
     <span>T</span>
 </section>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/decimal64.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/decimal64.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/decimal64.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/decimal64.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/default.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/default.tpl.html
index 6029668b..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/default.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/default.tpl.html
@@ -1,5 +1,6 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
@@ -7,4 +8,3 @@
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
 </md-icon>
-
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/empty.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/empty.tpl.html
index b4fa1241..090f20f1 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/empty.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/empty.tpl.html
@@ -9,6 +9,6 @@
                  ng-true-value="1"
                  ng-false-value="0"
                  ng-change="yangTypeEmpty.valueChanged()"
-                 ng-disabled="{{ yangOutput.notEditable }}"
+                 ng-readonly="{{ yangOutput.notEditable }}"
                  aria-label="{{type.label}}"></md-checkbox>
 </section>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/enumeration.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/enumeration.tpl.html
index 4a1826fb..ba4fc7a1 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/enumeration.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/enumeration.tpl.html
@@ -1,5 +1,5 @@
 <md-input-container ng-controller="YMTypeEnumCtrl as yangTypeEnum">
-    <md-select ng-model="type.selEnum" md-on-close="yangTypeEnum.valueChanged()" ng-disabled="{{ yangOutput.notEditable }}">
+    <md-select ng-model="type.selEnum" md-on-close="yangTypeEnum.valueChanged()" ng-readonly="{{ yangOutput.notEditable }}">
         <md-option ng-repeat="enum in type.getChildren('enum')" ng-value="enum">
             {{enum.label}}
         </md-option>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/identityref.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/identityref.tpl.html
index d40379e6..732bfe7b 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/identityref.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/identityref.tpl.html
@@ -1,4 +1,5 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
-</md-input-container>
\ No newline at end of file
+</md-input-container>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/instance-identifier.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/instance-identifier.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/instance-identifier.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/instance-identifier.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int16.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int16.tpl.html
index e0d57ae2..58fdc5b6 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int16.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int16.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+    ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int32.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int32.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int32.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int32.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int64.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int64.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int64.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int64.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int8.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int8.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int8.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/int8.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/leafref.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/leafref.tpl.html
index d40379e6..732bfe7b 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/leafref.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/leafref.tpl.html
@@ -1,4 +1,5 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
-</md-input-container>
\ No newline at end of file
+</md-input-container>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/string.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/string.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/string.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/string.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint16.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint16.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint16.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint16.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint32.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint32.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint32.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint32.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint64.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint64.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint64.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint64.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint8.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint8.tpl.html
index e0d57ae2..5d9a220d 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint8.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/config/types/uint8.tpl.html
@@ -1,9 +1,10 @@
-<md-input-container md-no-float>
-    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}" ng-disabled="{{ yangOutput.notEditable }}">
+<md-input-container md-no-float class="full_width">
+    <input ng-change="yangType.valueChanged()" ng-model="node.value" aria-label="{{node.value}}" placeholder="{{type.label}}"
+           ng-readonly="{{ yangOutput.notEditable }}" class="full_width">
     <md-tooltip md-direction="top">{{type.label}}</md-tooltip>
 </md-input-container>
 
 <md-icon md-font-set="material-icons" class="top-icon top-element pointer" ng-show="type.errors.length > 0">
     <md-tooltip md-direction="top">{{type.errors.join('\n')}}</md-tooltip>
     error_outline
-</md-icon>
\ No newline at end of file
+</md-icon>
diff --git a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/operational/leaf-list.tpl.html b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/operational/leaf-list.tpl.html
index b2bba793..64f1c823 100644
--- a/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/operational/leaf-list.tpl.html
+++ b/modules/yangman-resources/src/main/resources/yangman/views/rightpanel/form/operational/leaf-list.tpl.html
@@ -27,7 +27,7 @@
 
     <div ng-repeat="elem in node.value" ng-show="node.expanded">
         <!-- Leaf list values -->
-        <md-input-container md-no-float  class="input-icon-container">
+        <md-input-container md-no-float  class="input-icon-container full_width">
             <!-- input -->
             <input ng-model="elem.value" aria-label="{{elem.value}}" ng-disabled="true">
         </md-input-container>
diff --git a/modules/yangman-resources/src/main/resources/yangman/yangman.less b/modules/yangman-resources/src/main/resources/yangman/yangman.less
index 3ef3009b..6d0ad75c 100644
--- a/modules/yangman-resources/src/main/resources/yangman/yangman.less
+++ b/modules/yangman-resources/src/main/resources/yangman/yangman.less
@@ -1308,3 +1308,19 @@ md-dialog{
 .mb0{
     margin-bottom: 0;
 }
+
+input:-moz-read-only {
+    color: rgba(140, 140, 140, 0.87);
+}
+
+input:read-only {
+    color: rgba(140, 140, 140, 0.87);
+}
+
+md-tooltip .md-content {
+    height: auto;
+}
+
+.full_width {
+    width: 100%;
+}
-- 
2.36.6