Merge pull request #44 from BatJan/feature/dataeditor-config-view-cle…

…anup ConfigurationEditorOverlay: Make use of Umbraco directives and change <a> to <button>
leekelleher · Dec 22, 2020 · efa4ff1 · efa4ff1
2 parents 457e62c + 6d4f3ec
commit efa4ff1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 15 deletions.
diff --git a/...o.Community.Contentment/DataEditors/ConfigurationEditor/configuration-editor.overlay.html b/...o.Community.Contentment/DataEditors/ConfigurationEditor/configuration-editor.overlay.html
@@ -19,20 +19,17 @@
 
                 <umb-box ng-if="vm.items.length > 0">
                     <umb-box-content>
-                        <div class="form-search" ng-if="vm.enableFilter">
-                            <i class="icon-search"></i>
-                            <input type="text"
-                                   ng-model="vm.searchTerm"
-                                   class="umb-search-field search-query input-block-level -full-width-input"
-                                   localize="placeholder"
-                                   placeholder="@placeholders_filter"
-                                   umb-auto-focus
-                                   no-dirty-check />
-                        </div>
+                        <umb-search-filter ng-if="!vm.enableFilter"
+                                           input-id="contentment-config-search"
+                                           model="vm.searchTerm"
+                                           label-key="placeholders_filter"
+                                           umb-auto-focus="true">
+                        </umb-search-filter>
+
                         <ul class="umb-actions umb-actions-child">
                             <li class="umb-action" ng-repeat="item in vm.items | orderBy:vm.orderBy | filter:vm.searchTerm">
                                 <button type="button" class="btn-reset umb-action-link" ng-click="vm.select(item)">
-                                    <i class="large icon" ng-class="item.icon"></i>
+                                    <umb-icon icon="{{item.icon}}" class="large icon {{item.icon}}"></umb-icon>
                                     <span class="menu-label">
                                         <span ng-bind="item.name"></span>
                                         <small ng-bind="item.description"></small>

diff --git a/src/Umbraco.Community.Contentment/Web/UI/backoffice-ui-shim.css b/src/Umbraco.Community.Contentment/Web/UI/backoffice-ui-shim.css
@@ -25,10 +25,6 @@
     background-size: cover;
 }
 
-.umb-action-link .icon-umbraco {
-    height: 30px;
-}
-
 /* Anchor links within `.alert-form` are rendered as white, (appearing invisible) */
 .alert-form a {
     color: #1b264f;