diff options
Diffstat (limited to 'catalog-ui/src/app/directives/inputs-and-properties/inputs')
3 files changed, 140 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; +} |