diff options
Diffstat (limited to 'catalog-ui/src/app/directives/inputs-and-properties')
6 files changed, 243 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts new file mode 100644 index 0000000000..221c20d08f --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts @@ -0,0 +1,43 @@ +/** + * Created by obarda on 1/8/2017. + */ +'use strict'; + +export interface IInputRowDirective extends ng.IScope { + showDeleteIcon:boolean; +} + + +export class InputRowDirective implements ng.IDirective { + + constructor() { + + } + + scope = { + instanceInputsMap: '=', + input: '=', + instanceName: '=', + instanceId: '=', + isViewOnly: '=', + deleteInput: '&', + onNameClicked: '&', + onCheckboxClicked: '&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./input-row-view.html'); + }; + + link = (scope:IInputRowDirective, element:any, $attr:any) => { + scope.showDeleteIcon = $attr.deleteInput ? true : false; + }; + + public static factory = ()=> { + return new InputRowDirective(); + }; +} + +InputRowDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html new file mode 100644 index 0000000000..872a26bc27 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html @@ -0,0 +1,43 @@ +<div class="input-row"> + <div class="title-text" ng-click="onNameClicked(input)" data-tests-id="inputName_{{input.name}}"> + {{input.name}} + </div> + <div class="flex-container"> + <div class="expand-collapse-inputs-table-icon"></div> + <div class="flex-item"> + <div class="no-overflow"> + <span class="title-text">Description:</span> + <span tooltips tooltip-content="{{input.description}}" data-tests-id="inputDescription_{{input.name}}">{{input.description}}</span> + </div> + <div class="text" tooltips tooltip-content="{{input.defaultValue}}"> + <span class="title-text">Default Value:</span> + <span data-tests-id="inputDefaultValue_{{input.name}}">{{input.defaultValue}}</span> + </div> + </div> + <div class="flex-item "> + <div class="text"> + <span class="title-text">VF Instance:</span> + <span tooltips tooltip-content="{{instanceName}}" data-tests-id="inputInstanceName_{{input.name}}">{{instanceName}}</span> + </div> + <div class="text"> + <span class="title-text">Type:</span> + <span tooltips tooltip-content="{{input.type}}" data-tests-id="inputType_{{input.name}}">{{input.type}} </span> + </div> + </div> + <sdc-checkbox ng-if="instanceInputsMap" + class="input-check-box" + disabled="input.isAlreadySelected || isViewOnly" + sdc-checklist-model="instanceInputsMap[instanceId]" + sdc-checklist-value="input" + sdc-checklist-change="onCheckboxClicked()" + data-tests-id="inputsCheckbox_{{input.name}}" + data-ng-click=" $event.stopPropagation()"></sdc-checkbox> + + <div class="delete" ng-if="showDeleteIcon"> + <span class="sprite-new delete-icon remove-input-icon" + data-ng-class="{'disabled': isViewOnly || input.isDeleteDisabled}" + data-ng-click="deleteInput(input); $event.stopPropagation();" + data-tests-id="deleteInput_{{input.name}}"></span> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less new file mode 100644 index 0000000000..fa79b45c3c --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less @@ -0,0 +1,54 @@ +&.expanded { + .input-row { + background-color: @tlv_color_v; + } +} + +.input-row { + padding-left: 45px; + background: @tlv_color_t; + border: @main_color_o solid 1px; + align-items: center; + .hand; + margin: 1px 0px 1px 0px; + + &.selected { + background-color: @tlv_color_v; + } + .flex-item { + min-height: 60px; + padding: 0 15px; + } + .input-check-box { + padding-right: 10px; + margin-top: 9px; + } + & > .title-text { + text-align: start; + padding: 4px 35px 0 35px; + } + + .expand-collapse-inputs-table-icon { + margin-top: 15px; + } + + .delete { + width: 50px; + padding: 0; + position: relative; + } + + .remove-input-icon { + position: absolute; + top: 12px; + right: 18px; + } + + .remove-input-icon:hover { + .delete-icon-hover; + } +} + +.input-row:hover { + .bg_j; +} 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; + } + } +} |