diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbminisearch.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbminisearch.component.js index 6c65cb6e23..c22a56f0d0 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbminisearch.component.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbminisearch.component.js @@ -11,17 +11,20 @@ model: "=", onStartTyping: "&?", onSearch: "&?", - onBlur: "&?" + onBlur: "&?", + labelKey: "@?", + inputId: "@?" } }); - function UmbMiniSearchController($scope) { - + function UmbMiniSearchController($scope, localizationService) { + var vm = this; vm.onKeyDown = onKeyDown; vm.onChange = onChange; - + vm.$onInit = onInit; + var searchDelay = _.debounce(function () { $scope.$apply(function () { if (vm.onSearch) { @@ -29,7 +32,7 @@ } }); }, 500); - + function onKeyDown(evt) { //13: enter switch (evt.keyCode) { @@ -40,7 +43,7 @@ break; } } - + function onChange() { if (vm.onStartTyping) { vm.onStartTyping(); @@ -48,6 +51,21 @@ searchDelay(); } + function onInit() { + vm.inputId = vm.inputId || "search_" + String.CreateGuid(); + setText(); + } + + function setText() { + var keyToLocalize = vm.labelKey || 'general_search'; + + localizationService.localize(keyToLocalize).then(function (data) { + // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [ + if(data.indexOf('[') === -1){ + vm.text = data; + } + }); + } } })(); diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less index e4eb8f8235..bdcc0055dd 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less @@ -1,24 +1,23 @@ .umb-mini-search { position: relative; - display: block; + display: flex; + justify-content: center; + align-items: center; .icon { position: absolute; - display: flex; - justify-content: center; - align-items: center; - font-size: 20px; - margin: 5px; - padding: 1px; + left: 9px; + width: 1em; + height: 1em; pointer-events: none; color: @ui-action-discreet-type; transition: color .1s linear; } input { - width: 0px; + width: 0; padding-left: 24px; - margin-bottom: 0px; + margin-bottom: 0; background-color: transparent; border-color: @ui-action-discreet-border; transition: background-color .1s linear, border-color .1s linear, color .1s linear, width .1s ease-in-out, padding-left .1s ease-in-out; @@ -42,9 +41,9 @@ border-color: @ui-action-discreet-border-hover; cursor: unset; } - + input:focus, &:focus-within input, &.--has-value input { width: 190px; - padding-left: 30px; + padding-left:30px; } } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html index b69071d4e4..57048d8b5c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html @@ -1,6 +1,10 @@ +