diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js index 40def728ed..7d1def43a8 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js +++ b/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) { diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index c666a69166..9f9bbce310 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/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 { diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index a75c73df60..435b64ad34 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/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; + } + } } // diff --git a/src/Umbraco.Web.UI.Client/src/less/typeahead.less b/src/Umbraco.Web.UI.Client/src/less/typeahead.less index 884f44974a..4822605200 100644 --- a/src/Umbraco.Web.UI.Client/src/less/typeahead.less +++ b/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 { diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html index 804a3516f8..9de5726341 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html @@ -8,7 +8,7 @@ - +