3364 - Suggestion: Make use of confirm action directive on repeatable textstring when deleting (#3365)

src/Umbraco.Web.UI.Client/src/less/components/umb-multiple-textbox.less

@@ -1,4 +1,17 @@
-.umb-multiple-textbox .textbox-wrapper {
+.umb-multiple-textbox{
+    &__confirm{
+        position: relative;
+
+        &-action{
+            margin: 0;
+            padding: 2px;
+            background: transparent;
+            border: 0 none;
+        }
+    }
+}
+
+.umb-multiple-textbox .textbox-wrapper {
     align-items: center;
     margin-bottom: 15px;
 }
@@ -7,7 +20,7 @@
     margin-bottom: 0;
 }
 
-.umb-multiple-textbox .textbox-wrapper i {
+.umb-multiple-textbox .textbox-wrapper i:not(.icon-delete, .icon-check) {
     margin-right: 5px;
 }
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js

@@ -2,6 +2,9 @@
 
     var backspaceHits = 0;
 
+    // Set the visible prompt to -1 to ensure it will not be visible
+    $scope.promptIsVisible = "-1";
+
     $scope.sortableOptions = {
         axis: 'y',
         containment: 'parent',
@@ -89,6 +92,9 @@
     };
 
     $scope.remove = function (index) {
+        // Make sure not to trigger other prompts when remove is triggered
+        $scope.hidePrompt();
+
         var remainder = [];
         for (var x = 0; x < $scope.model.value.length; x++) {
             if (x !== index) {
@@ -98,6 +104,20 @@
         $scope.model.value = remainder;
     };
 
+    $scope.showPrompt = function (idx, item){
+
+        var i = $scope.model.value.indexOf(item);
+
+        // Make the prompt visible for the clicked tag only
+        if (i === idx) {
+            $scope.promptIsVisible = i;
+        }
+    }
+
+    $scope.hidePrompt = function(){
+        $scope.promptIsVisible = "-1";
+    }
+
 }
 
-angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController);
+angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController);

src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html

@@ -5,11 +5,20 @@
       <input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-editor umb-textstring textstring"
              ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/>
       <i class="icon icon-navigation handle" localize="title" title="@general_move"></i>
-      <a prevent-default href="" class="remove" localize="title" title="@content_removeTextBox"
-         ng-show="model.value.length > model.config.min"
-         ng-click="remove($index)">
-        <i class="icon icon-remove"></i>
-      </a>
+
+    <div class="umb-multiple-textbox__confirm" ng-show="model.value.length > model.config.min">
+        <button class="umb-multiple-textbox__confirm-action" type="button" prevet-default ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
+            <i class="icon-trash"></i>
+        </button>
+
+        <umb-confirm-action
+            ng-if="promptIsVisible === $index"
+            direction="left"
+            on-confirm="remove($index)"
+            on-cancel="hidePrompt()">
+        </umb-confirm-action>
+    </div>
+
     </div>
   </div>
   <a prevent-default href="" class="add-link" localize="title" title="@content_addTextBox"