Merge pull request #5226 from umbraco/v8/bugfix/ui-sharpen-look-of-umb-tags

Accessibility and UI update of umb-tags

src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js

@@ -41,6 +41,7 @@
         vm.removeTag = removeTag;
         vm.showPrompt = showPrompt;
         vm.hidePrompt = hidePrompt;
+        vm.onKeyUpOnTag = onKeyUpOnTag;
 
         vm.htmlId = "t" + String.CreateGuid();
         vm.isLoading = true;
@@ -272,6 +273,12 @@
             vm.promptIsVisible = "-1";
         }
         
+        function onKeyUpOnTag(tag, $event) {
+            if ($event.keyCode === 8 || $event.keyCode === 46) {
+                removeTag(tag);
+            }
+        }
+        
         // helper method to remove current tags
         function removeCurrentTagsFromSuggestions(suggestions) {
             return $.grep(suggestions, function (suggestion) {

src/Umbraco.Web.UI.Client/src/less/main.less

@@ -118,7 +118,6 @@ h5.-black {
 .umb-control-group {
   border-bottom: 1px solid @gray-11;
   padding-bottom: 20px;
-  margin-bottom: 15px !important;
 }
 
 .umb-control-group.-no-border {

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -852,9 +852,10 @@
 //
 // Tags
 // --------------------------------------------------
-.umb-tags{
+.umb-tags {
     border: @inputBorder solid 1px;
-    padding: 10px;
+    padding: 5px;
+    min-height: 54px;
     font-size: 13px;
     text-shadow: none;
     box-sizing: border-box;
@@ -862,17 +863,19 @@
 
     .tag {
         cursor: default;
-        margin: 7px;
-        padding: 10px;
-        background: @blueDark;
+        margin: 10px;
+        padding: 10px 15px;
+        background: @blueExtraDark;
         position: relative;
-
-        .icon-trash{
-            cursor: pointer;
-            padding: 2px;
-            font-size: 12px;
+        user-select: all;
+        
+        .icon-trash {
             position: relative;
-            right: -6px;
+            cursor: pointer;
+            padding-left: 2px;
+            font-size: 15px;
+            right: -5px;
+            bottom: -1px;
         }
 
         .umb_confirm-action__overlay.-left{
@@ -882,10 +885,19 @@
         }
     }
 
-    input{
+    input {
         border: none;
         background: @white;
     }
+    
+    .twitter-typeahead {
+        margin: 10px;
+        margin-top: 16px;
+        vertical-align: top;
+        input {
+            padding-left: 0;
+        }
+    }
 }
 
 //

src/Umbraco.Web.UI.Client/src/less/typeahead.less

@@ -31,8 +31,8 @@
   padding: 8px 0;
   background-color: @white;
   border: 1px solid @gray-8;
-  border-radius: 8px;
-  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  border-radius: 3px;
+  box-shadow: 0 3px 6px rgba(0,0,0,.16);
 }
 
 .tt-suggestion {
@@ -44,7 +44,7 @@
 
 .tt-suggestion.tt-cursor {
   color: @white;
-  background-color: @turquoise;
+  background-color: @ui-selected-type-hover;
 }
 
 .tt-suggestion p {

src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html

@@ -8,7 +8,7 @@
 
             <input type="hidden" name="tagCount" ng-model="vm.viewModel.length" val-property-validator="vm.validateMandatory" />
 
-            <span ng-repeat="tag in vm.viewModel track by $index" class="label label-primary tag">
+            <span ng-repeat="tag in vm.viewModel track by $index" class="label label-primary tag" ng-keyup="vm.onKeyUpOnTag(tag, $event)" tabindex="0">
                 <span ng-bind-html="tag"></span>
 
                 <i class="icon-trash" ng-click="vm.showPrompt($index, tag)" localize="title" title="@buttons_deleteTag"></i>