diff options
Diffstat (limited to 'catalog-ui/src/app/directives/inputs-and-properties/properties')
3 files changed, 103 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts new file mode 100644 index 0000000000..a9ff71cda5 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts @@ -0,0 +1,42 @@ +/** + * Created by obarda on 1/8/2017. + */ +'use strict'; + +export interface IPropertyRowDirective extends ng.IScope { + onNameClicked:Function; + isClickable:boolean; +} + +export class PropertyRowDirective implements ng.IDirective { + + constructor() { + + } + + scope = { + property: '=', + instanceName: '=', + instanceId: '=', + instancePropertiesMap: '=', + onNameClicked: '&', + onCheckboxClicked: '&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./property-row-view.html'); + }; + + link = (scope:IPropertyRowDirective, element:any, $attr:any) => { + scope.isClickable = $attr.onNameClicked ? true : false; + }; + + public static factory = ()=> { + return new PropertyRowDirective(); + }; + +} + +PropertyRowDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html new file mode 100644 index 0000000000..ff82a8b685 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html @@ -0,0 +1,26 @@ +<div class="property-row flex-container"> + <div class="flex-item text property-name-container"> + <span class="title-blue-text property-name-text " data-ng-class="{'hand': isClickable}" data-tests-id="propertyName" data-ng-click="onNameClicked(property)" tooltips tooltip-content="{{property.name}}">{{property.name}}</span> + </div> + <div class="flex-item text property-name-container"> + <span class="text instance-name-text" data-tests-id="instanceName" tooltips tooltip-content="{{instanceName}}">{{instanceName}}</span> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltip-content="propertyName_{{property.type}}" data-tests-id="propertyType">{{property.type}}</span> + </div> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltip-content="{{property.schema.property.type}}" data-tests-id="propertySchema">{{property.schema.property.type}} </span> + </div> + </div> + <sdc-checkbox ng-if="instancePropertiesMap" + class="property-check-box" + disabled="property.isAlreadySelected || isViewOnly" + sdc-checklist-model="instancePropertiesMap[instanceId]" + sdc-checklist-value="property" + sdc-checklist-change="onCheckboxClicked()" + data-tests-id="propertyCheckbox_{{property.name}}" + data-ng-click=" $event.stopPropagation()"></sdc-checkbox> +</div> diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less new file mode 100644 index 0000000000..e25427bda2 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less @@ -0,0 +1,35 @@ +.property-row { + border-bottom: 1px solid @border_color_d; + padding-left: 10px; + .property-name-container { + display: flex; + flex-grow: 3; + } + + .type-schema-container { + flex-grow: 2; + border-left: 1px solid @border_color_d; + text-align: left; + line-height: 30px; + text-transform: capitalize; + width: 10px; + } + + .property-check-box { + padding-right: 10px; + margin-top: 9px; + } +} + +.property-row:hover { + background-color: @func_color_r; +} + +&.expanded { + .flex-container { + .expand-collapse-inputs-table-icon { + transform: rotate(180deg); + left: 0px; + } + } +} |