"YANGMAN_DELETE_OPTIONS": "Delete options",
"YANGMAN_SELECT_OPTIONS": "Select options",
"YANGMAN_SELECT_ALL": "Select All",
- "YANGMAN_DESELECT_ALL": "Deselect All"
+ "YANGMAN_DESELECT_ALL": "Deselect All",
+ "YANGMAN_IS_AUGMENT": "Augment's Group"
}
// methods
yangChoice.isActionMenu = isActionMenu;
- yangChoice.isNodeInfo = isNodeInfo;
$scope.caseShowing = caseShowing;
yangChoice.toggleExpanded = toggleExpanded;
* @returns {boolean|*}
*/
function isActionMenu() {
- return $scope.node.getChildren('description', null, null, 'label').length > 0 ||
- ($scope.node.augmentionGroups && $scope.node.augmentionGroups.length);
- }
-
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId;
+ return $scope.node.augmentionGroups && $scope.node.augmentionGroups.length;
}
}
});
// methods
yangContainer.isActionMenu = isActionMenu;
- yangContainer.isNodeInfo = isNodeInfo;
yangContainer.toggleExpanded = toggleExpanded;
/**
* @returns {boolean|*}
*/
function isActionMenu() {
- return $scope.node.getChildren('description', null, null, 'label').length > 0 ||
- ($scope.node.augmentionGroups && $scope.node.augmentionGroups.length);
- }
-
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId;
+ return $scope.node.augmentionGroups && $scope.node.augmentionGroups.length;
}
}
});
// methods
yangInput.isActionMenu = isActionMenu;
- yangInput.isNodeInfo = isNodeInfo;
yangInput.toggleExpanded = toggleExpanded;
/**
* @returns {boolean|*}
*/
function isActionMenu() {
- return $scope.node.getChildren('description', null, null, 'label').length > 0 ||
- ($scope.node.augmentionGroups && $scope.node.augmentionGroups.length);
- }
-
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId;
+ return $scope.node.augmentionGroups && $scope.node.augmentionGroups.length;
}
}
});
yangLeafList.addListElem = addListElem;
yangLeafList.changed = changed;
yangLeafList.isActionMenu = isActionMenu;
- yangLeafList.isNodeInfo = isNodeInfo;
yangLeafList.removeListElem = removeListElem;
yangLeafList.toggleExpanded = toggleExpanded;
function isActionMenu() {
return true;
}
-
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId;
- }
}
});
'uint8',
'union',
],
- yanfLeaf = this;
+ yangLeaf = this;
- yanfLeaf.infoBox = false;
- yanfLeaf.infoBoxSection = '';
+ yangLeaf.infoBox = false;
+ yangLeaf.infoBoxSection = '';
// methods
- yanfLeaf.isActionMenu = isActionMenu;
- yanfLeaf.isNodeInfo = isNodeInfo;
- yanfLeaf.getLeafType = getLeafType;
- yanfLeaf.displayValue = displayValue;
+ yangLeaf.displayValue = displayValue;
+ yangLeaf.getLeafCentering = getLeafCentering;
+ yangLeaf.getLeafType = getLeafType;
+ yangLeaf.isActionMenu = isActionMenu;
+
+
+ function getLeafCentering(){
+ return ['union', 'bits', 'empty'].indexOf(getLeafType()) > -1 ? 'start' : 'center';
+ }
/**
* Get leaf type
* @returns {boolean|*}
*/
function isActionMenu() {
- return $scope.node.getChildren('description', null, null, 'label').length > 0;
- }
-
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId || $scope.node.isKey();
+ return false;
}
}
});
yangList.getListName = getListName;
yangList.init = init;
yangList.isActionMenu = isActionMenu;
- yangList.isNodeInfo = isNodeInfo;
yangList.removeListElem = removeListElem;
yangList.shiftDisplayNext = shiftDisplayNext;
yangList.shiftDisplayPrev = shiftDisplayPrev;
function isActionMenu() {
return true;
}
-
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId;
- }
}
});
// methods
yangOutput.isActionMenu = isActionMenu;
- yangOutput.isNodeInfo = isNodeInfo;
yangOutput.toggleExpanded = toggleExpanded;
/**
* @returns {boolean|*}
*/
function isActionMenu() {
- return $scope.node.getChildren('description', null, null, 'label').length > 0 ||
- ($scope.node.augmentionGroups && $scope.node.augmentionGroups.length);
- }
-
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId;
+ return $scope.node.augmentionGroups && $scope.node.augmentionGroups.length;
}
}
});
// methods
yangRpc.toggleExpanded = toggleExpanded;
yangRpc.isActionMenu = isActionMenu;
- yangRpc.isNodeInfo = isNodeInfo;
/**
* Show hide node
* @returns {boolean|*}
*/
function isActionMenu() {
- return $scope.node.getChildren('description', null, null, 'label').length > 0;
+ return false;
}
- /**
- * Show hide node info
- * @returns {*}
- */
- function isNodeInfo(){
- return $scope.node.augmentationId;
- }
}
});
'app/yangman/controllers/form/type-empty.controller',
'app/yangman/controllers/form/type-enum.controller',
'app/yangman/directives/yang-form-menu.directive',
+ 'app/yangman/directives/ym-info-box.directive',
], function () {
'use strict';
main.leftPanelShowModule = leftPanelShowModule;
main.modulesTreeDisplayed = modulesTreeDisplayed;
-
// scope global methods
$scope.buildRootRequest = buildRootRequest;
$scope.broadcastFromRoot = broadcastFromRoot;
function init(){
YangmanDesignService.hideMainMenu();
YangmanDesignService.setDraggableLeftPanel();
+ YangmanDesignService.setJsonSplitter(forceCMsRefresh);
EventDispatcherService.registerHandler(constants.EV_FILL_PATH, fillPathIdentifiersByKey);
EventDispatcherService.registerHandler(constants.EV_LIST_CHANGED, fillPathIdentifiersByListData);
main.jsonView.received = received;
main.jsonView.sent = sent;
forceCMsRefresh();
+ YangmanDesignService.setJsonSplitter(forceCMsRefresh);
}
/**
augmentations: '=',
allowItems: '=',
isActionMenu: '&',
- isNodeInfo: '&',
addListItemFunc: '&',
addListItem: '=',
yangForm: '=',
--- /dev/null
+define(['angular'], function (angular) {
+ 'use strict';
+
+ angular.module('app.yangman').directive('ymInfoBox', infoBoxDirective);
+
+ infoBoxDirective.$inject = [];
+
+ function infoBoxDirective() {
+ return {
+ restrict: 'A',
+ templateUrl: 'src/app/yangman/views/directives/ym-info-box.tpl.html',
+ transclude: true,
+ scope: {
+ node: '=',
+ },
+ link: function (scope, element) {
+ element.addClass('info-box-container');
+ },
+ controller: function ($scope) {
+ var description = $scope.node.getChildren('description', null, null, 'label')[0];
+
+ $scope.description = description ? description : '';
+ $scope.infoBox = false;
+
+ // methods
+ $scope.dividerCheck = dividerCheck;
+ $scope.executeInfoBox = executeInfoBox;
+ $scope.showBoxCheck = showBoxCheck;
+
+ /**
+ * Set info box value - true, false
+ * @param value
+ */
+ function executeInfoBox(value){
+ $scope.infoBox = value;
+ }
+
+ /**
+ * Check if box info could be shown
+ * @returns {boolean|*}
+ */
+ function showBoxCheck(){
+ return $scope.infoBox && ($scope.description.length || $scope.node.augmentationId);
+ }
+
+ /**
+ * Check for showing divider between different shown info
+ * @param key
+ * @returns {*}
+ */
+ function dividerCheck(key){
+ return key ? $scope.description.length || $scope.node.augmentationId : $scope.description.length;
+ }
+ },
+ };
+ }
+});
angular.module('app.yangman').service('YangmanDesignService', YangmanDesignService);
- function YangmanDesignService(){
+ YangmanDesignService.$inject = ['$timeout'];
+
+ function YangmanDesignService($timeout){
var service = {
+ disableMdMenuItem: disableMdMenuItem,
+ enableMdMenuItem: enableMdMenuItem,
hideMainMenu: hideMainMenu,
setDraggableLeftPanel: setDraggableLeftPanel,
+ setJsonSplitter: setJsonSplitter,
setModuleDetailHeight: setModuleDetailHeight,
- disableMdMenuItem: disableMdMenuItem,
- enableMdMenuItem: enableMdMenuItem,
};
return service;
$('#left-panel').width(localStorage.getItem('yangman__left-panel-width'));
}
- $('.resizable-e').resizable({
+ $('.ym-resizable-e').resizable({
handles: 'e',
minWidth: 300,
stop: function(event, ui) {
});
}
+ function setJsonSplitter(cbk){
+ $timeout(function () {
+ $('.ym-resizable-s').resizable({
+ handles: 's',
+ minHeight: 200,
+ stop: function(event, ui) {
+ cbk();
+ }
+ });
+ });
+ }
+
/**
* Set module detail height
* .yangmanModule__module-detail .tabs
function finishExecuting(response){
// finish track time response
time.finished = new Date().getMilliseconds();
+ var spentRequestTime = time.finished - time.started;
return {
status: response.status,
statusText: response.statusText,
- time: (time.finished - time.started),
+ time: spentRequestTime < 0 ? -(spentRequestTime) : spentRequestTime,
requestData: allPreparedData.reqData,
requestSrcData: allPreparedData.srcData,
};
-<md-menu ng-if="isActionMenu() || isNodeInfo()" class="menu-container">
+<md-menu ng-if="isActionMenu()" class="menu-container">
<!-- open menu button -->
<md-button class="md-icon-button" ng-click="$mdOpenMenu($event); hideInfoBox();">
<md-icon md-font-set="material-icons">reorder</md-icon>
<md-icon md-font-set="material-icons">reorder</md-icon>
</h5>
<md-menu-divider></md-menu-divider>
- <!-- node info -->
- <section class="text-left icon-wrapper" ng-show="isNodeInfo()">
- <md-icon md-font-set="material-icons" class="pointer" ng-show="node.isKey()">
- vpn_key
- <md-tooltip md-direction="top">
- {{'key of '+node.parent.label+' list'}}
- </md-tooltip>
- </md-icon>
-
- <md-icon class="svg-icon pointer"
- md-svg-src="src/app/yangman/assets/images/icon-augment.svg"
- ng-show="node.augmentationId">
- <md-tooltip md-direction="top">
- {{ 'YANGUI_IS_AUGMENT' | translate }} {{ node.augmentationId }}
- </md-tooltip>
- </md-icon>
- </section>
- <md-menu-divider ng-if="isActionMenu() && isNodeInfo()"></md-menu-divider>
-
- <!-- description menu item -->
- <md-menu-item ng-if="node.getChildren('description', null, null, 'label').length > 0">
- <md-button ng-click="switchSection('description')" md-prevent-menu-close>
- <md-icon md-font-set="material-icons">info</md-icon>
- <span md-menu-align-target>{{'YANGMAN_EXPLAIN' | translate}}</span>
- </md-button>
- </md-menu-item>
<!-- add list item -->
<md-menu-item ng-if="addListItem">
</md-list>
</div>
- <!-- Description box -->
- <div ng-switch-when="description" class="info-box__padding">
- {{node.getChildren('description', null, null, 'label')[0]}}
- </div>
-
<!-- yang list items -->
<div ng-switch-when="items">
<md-list>
--- /dev/null
+<span ng-mouseenter="executeInfoBox(true)" ng-mouseleave="executeInfoBox(false)" class="info-box-container__hover-wrapper">
+ <span ng-transclude></span>
+
+ <div class="md-whiteframe-z2 info-box" ng-show="showBoxCheck()">
+ <div class="info-box__padding">
+ <!-- key -->
+ <span ng-show="node.isKey()">
+ {{'Key of ' + node.parent.label + ' list'}}
+ <md-menu-divider ng-show="dividerCheck(true)"></md-menu-divider>
+ </span>
+ <!-- augment -->
+ <span ng-show="node.augmentationId">
+ {{ 'YANGMAN_IS_AUGMENT' | translate }} "{{ node.augmentationId }}"
+ <md-menu-divider ng-show="dividerCheck()"></md-menu-divider>
+ </span>
+ <!-- description -->
+ <span ng-show="description.length">{{description}}</span>
+ </div>
+ </div>
+</span>
<section class="yangmanModule" id="yangmanModule" layout="row">
<!-- LEFT SIDE -->
- <md-content layout="column" style="width: 400px; height: 100%;" class="yangmanModule__left-panel resizable-e" id="left-panel">
+ <md-content layout="column" style="width: 400px; height: 100%;" class="yangmanModule__left-panel ym-resizable-e" id="left-panel">
<!-- module arrow button -->
<md-icon md-font-set="material-icons "
class="arrow-switcher"
<div ng-controller="RequestDataCtrl as requestData"
ng-show="main.jsonView.sent"
ng-init="requestData.init('SENT')"
- ng-class="{'half-size': main.jsonView.received && main.jsonView.sent}">
+ ng-class="{'half-size': main.jsonView.received && main.jsonView.sent}"
+ class="ym-resizable-s">
<h5>{{'YANGMAN_SENT_DATA' | translate}}</h5>
<div md-whiteframe="2" ng-include src="globalViewPath + 'rightpanel/request-data.tpl.html'"></div>
<div ng-controller="RequestDataCtrl as requestData"
ng-show="main.jsonView.received"
ng-init="requestData.init('RECEIVED')"
- ng-class="{'half-size': main.jsonView.received && main.jsonView.sent}">
+ ng-class="{'half-size': main.jsonView.received && main.jsonView.sent}"
+ class="ym-resizable-s">
<h5>{{'YANGMAN_RECEIVED_DATA' | translate}}</h5>
<div md-whiteframe="2" ng-include src="globalViewPath + 'rightpanel/request-data.tpl.html'"></div>
</md-icon>
<!-- Choice label -->
- <p class="top-element" ng-click="yangChoice.toggleExpanded()"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node" ng-click="yangChoice.toggleExpanded()"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangChoice.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangChoice.isNodeInfo()"
node="node"></yang-form-menu>
<!-- Choice select -->
</md-icon>
<!-- Container label -->
- <p class="top-element pointer" ng-click="yangContainer.toggleExpanded()">
+ <p class="top-element pointer"
+ ng-click="yangContainer.toggleExpanded()" ym-info-box node="node">
+
{{yangForm.getNodeName(node.localeLabel, node.label)}}
</p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangContainer.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangContainer.isNodeInfo()"
node="node"></yang-form-menu>
</div>
</md-icon>
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangInput.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangInput.isNodeInfo()"
node="node"></yang-form-menu>
</div>
</md-icon>
<!-- Container label -->
- <p class="top-element" ng-click="yangLeafList.toggleExpanded()"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ng-click="yangLeafList.toggleExpanded()" ym-info-box node="node">
+ {{yangForm.getNodeName(node.localeLabel, node.label)}}
+ </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangLeafList.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangLeafList.isNodeInfo()"
add-list-item-func="yangLeafList.addListElem()"
add-list-item="true"
node="node"></yang-form-menu>
-<div ng-controller="LeafCtrl as yanfLeaf"
+<div ng-controller="LeafCtrl as yangLeaf"
layout="row"
- layout-align="start {{yanfLeaf.getLeafType() === 'union' ? 'start' : 'center'}}"
- class="yangmanModule__right-panel__form__leaf-container">
+ layout-align="start {{yangLeaf.getLeafCentering()}}"
+ class="yangmanModule__right-panel__form__leaf-container {{yangLeaf.getLeafType()}}">
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
- <yang-form-menu is-action-menu="yanfLeaf.isActionMenu()"
+ <yang-form-menu is-action-menu="yangLeaf.isActionMenu()"
augmentations="augmentations"
- is-node-info="yanfLeaf.isNodeInfo()"
node="node"></yang-form-menu>
<!-- Empty placeholder for better look -->
- <div class="menu-placeholder" ng-if="!yanfLeaf.isActionMenu() && !yanfLeaf.isNodeInfo()"></div>
+ <div class="menu-placeholder" ng-if="!yangLeaf.isActionMenu() && !yangLeaf.isNodeInfo()"></div>
<div ng-controller="TypeCtrl as yangType"
ng-repeat="type in node.getChildren('type')"
- ng-include="yangForm.viewPath + '/config/types/' + yanfLeaf.getLeafType() + '.tpl.html'"
- {{yanfLeaf.getLeafType() === 'union' ? 'flex="grow"' : ''}}
+ ng-include="yangForm.viewPath + '/config/types/' + yangLeaf.getLeafType() + '.tpl.html'"
+ {{yangLeaf.getLeafType() === 'union' ? 'flex="grow"' : ''}}
layout="row">
</div>
</div>
\ No newline at end of file
</md-icon>
<!-- list label -->
- <p class="top-element pointer list-label" ng-click="yangList.toggleExpanded()">
+ <p class="top-element pointer list-label" ng-click="yangList.toggleExpanded()" ym-info-box node="node">
{{yangForm.getNodeName(node.localeLabel, node.label)}}
</p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangList.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangList.isNodeInfo()"
add-list-item-func="yangList.addListElem()"
add-list-item="!yangList.disableAddingListElement"
yang-form="yangForm"
</md-icon>
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangOutput.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangOutput.isNodeInfo()"
node="node"></yang-form-menu>
</div>
</md-icon>
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangRpc.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangRpc.isNodeInfo()"
node="node"></yang-form-menu>
</div>
-<section ng-controller="TypeBitCtrl as yangTypeBit" layout="column">
+<section ng-controller="TypeBitCtrl as yangTypeBit"
+ layout="row"
+ flex="50"
+ class="md-whiteframe-z2 box-container"
+ layout-wrap
+ layout-padding>
+
<md-checkbox ng-model="type.bitsValues[$index]"
ng-repeat="bit in type.getChildren('bit')"
ng-true-value="1"
-<section ng-controller="TypeEmptyCtrl as yangTypeEmpty">
+<section ng-controller="TypeEmptyCtrl as yangTypeEmpty"
+ layout="row"
+ flex="50"
+ class="md-whiteframe-z2 box-container"
+ layout-wrap
+ layout-padding>
+
<md-checkbox ng-model="type.emptyValue"
ng-true-value="1"
ng-false-value="0"
-<md-content flex="nogrow" md-whiteframe="2">
+<md-content flex="nogrow" md-whiteframe="2" class="box-container union">
<md-tabs md-dynamic-height
md-border-bottom
md-no-pagination
</md-icon>
<!-- Choice label -->
- <p class="top-element" ng-click="yangChoice.toggleExpanded()"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node" ng-click="yangChoice.toggleExpanded()">
+ {{yangForm.getNodeName(node.localeLabel, node.label)}}
+ </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangChoice.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangChoice.isNodeInfo()"
node="node"></yang-form-menu>
<!-- Choice select -->
</md-icon>
<!-- Container label -->
- <p class="top-element pointer" ng-click="yangContainer.toggleExpanded()">
+ <p class="top-element pointer" ng-click="yangContainer.toggleExpanded()" ym-info-box node="node">
{{yangForm.getNodeName(node.localeLabel, node.label)}}
</p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangContainer.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangContainer.isNodeInfo()"
node="node"></yang-form-menu>
</div>
</md-icon>
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangInput.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangInput.isNodeInfo()"
node="node"></yang-form-menu>
</div>
</md-icon>
<!-- Container label -->
- <p class="top-element" ng-click="yangLeafList.toggleExpanded()"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node" ng-click="yangLeafList.toggleExpanded()">
+ {{yangForm.getNodeName(node.localeLabel, node.label)}}
+ </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangLeafList.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangLeafList.isNodeInfo()"
node="node"></yang-form-menu>
</div>
ng-show="node.isFilled()">
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yanfLeaf.isActionMenu()"
augmentations="augmentations"
- is-node-info="yanfLeaf.isNodeInfo()"
node="node"></yang-form-menu>
<!-- Empty placeholder for better look -->
</md-icon>
<!-- list label -->
- <p class="top-element pointer list-label" ng-click="yangList.toggleExpanded()">
+ <p class="top-element pointer list-label" ng-click="yangList.toggleExpanded()" ym-info-box node="node">
{{yangForm.getNodeName(node.localeLabel, node.label)}}
</p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangList.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangList.isNodeInfo()"
yang-form="yangForm"
yang-list="yangList"
node="node"></yang-form-menu>
</md-icon>
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangOutput.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangOutput.isNodeInfo()"
node="node"></yang-form-menu>
</div>
</md-icon>
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangRpc.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangRpc.isNodeInfo()"
node="node"></yang-form-menu>
</div>
</md-icon>
<!-- Container label -->
- <p class="top-element"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
+ <p class="top-element" ym-info-box node="node"> {{yangForm.getNodeName(node.localeLabel, node.label)}} </p>
<!-- Action menu -->
<yang-form-menu is-action-menu="yangRpc.isActionMenu()"
augmentations="augmentations"
- is-node-info="yangRpc.isNodeInfo()"
node="node"></yang-form-menu>
</div>
right: 0;
}
+.info-box-container{
+ position: relative;
+
+ &__hover-wrapper{
+ display: inline-block;
+ width: 100%;
+ }
+
+ .info-box{
+ position: absolute;
+ left: 90%;
+ top: 0;
+ margin-left: 10px;
+ min-width: 300px;
+ padding: 0;
+ z-index: 10;
+ background: #fff;
+ -webkit-transition: all 150ms linear;
+ -moz-transition: all 150ms linear;
+ -ms-transition: all 150ms linear;
+ -o-transition: all 150ms linear;
+ transition: all 150ms linear;
+ opacity: 1;
+ max-height: 300px;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ &__padding{
+ padding: 16px;
+ }
+
+ &.ng-hide{
+ opacity: 0;
+ }
+
+ span{
+ color: @fontColor;
+ }
+ }
+
+ md-menu-divider{
+ margin-top: 4px;
+ margin-bottom: 4px;
+ height: 1px;
+ min-height: 1px;
+ max-height: 1px;
+ width: 100%;
+ background-color: @dataStoreListBorderColor;
+ display: block;
+ }
+}
+
// yangman
.yangmanModule{
background-color: @appBackColor;
color: @fontColor;
height: 100%;
+ .ui-resizable-s{
+ height: 13px;
+ }
+
+ .box-container{
+ padding: 16px;
+ margin: 8px 0;
+ }
/*.md-input{
color: @inputColor;
position: relative;
- > div {
+ > div:not(.ui-resizable-handle) {
height: calc(~'100% - 25px');
overflow-y: auto;
}
}
&__form{
+
+ .box-container.union{
+ padding: 0;
+ }
+
.union-tabs{
+ margin: 8px 0;
+
md-content{
min-width: 250px;
}