From c7af35937c8a37dc73f344d0fdc2079d2f5bc546 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Tue, 29 Oct 2019 22:44:22 +0100
Subject: [PATCH] Log viewer: Filter toggle (#6863)

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../src/less/filter-toggle.less               | 20 ++++++++++++
 .../src/views/logviewer/search.html           | 31 +++++++++++--------
 3 files changed, 39 insertions(+), 13 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/filter-toggle.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index fdf0f35914..ea889211d4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -77,6 +77,7 @@
 @import "listview.less"; 
 @import "gridview.less";
 @import "footer.less";
+@import "filter-toggle.less";
 
 @import "forms/umb-validation-label.less";
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/filter-toggle.less b/src/Umbraco.Web.UI.Client/src/less/filter-toggle.less
new file mode 100644
index 0000000000..82f9f3f553
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/filter-toggle.less
@@ -0,0 +1,20 @@
+.filter-toggle{
+    margin: 0;
+    padding: 0 8px 0 0;
+    position: relative;
+}
+
+.filter-toggle__level{
+    display: inline-block;
+    font-weight: 700;
+    margin: 0 5px;
+    max-width: 150px;
+}
+
+.filter-toggle__icon{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto 0;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
index 08cd9da41a..c5a1803eed 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
@@ -22,15 +22,20 @@
                     <umb-editor-sub-header-content-left class="flex-auto flex-wrap">
 
                         <!-- Log Level filter -->
-                        <div class="flex filter">
-                            <a class="btn btn-link dropdown-toggle flex mb2" href="" ng-click="vm.page.showLevelFilter = !vm.page.showLevelFilter">
+                        <div class="flex log-viewer-filter" style="position: relative;">
+                            <button 
+                                type="button" 
+                                class="btn-link dropdown-toggle flex mb2 filter-toggle" 
+                                ng-click="vm.page.showLevelFilter = !vm.page.showLevelFilter"
+                                aria-haspopup="true" 
+                                aria-expanded="{{vm.page.showLevelFilter === undefined ? false : vm.page.showLevelFilter}}"
+                                >
                                 <span>
                                     <localize key="logViewer_logLevels">Log Levels</localize>:
                                 </span>
-
-                                <span class="bold truncate dib filter-name">{{ vm.getFilterName(vm.logLevels) }}</span>
-                                <span class="caret"></span>
-                            </a>
+                                <span class="filter-toggle__level truncate">{{ vm.getFilterName(vm.logLevels) }}</span>
+                                <span class="filter-toggle__icon caret" aria-hidden="true"></span>
+                            </button>
                             <umb-dropdown class="pull-left" ng-if="vm.page.showLevelFilter" on-close="vm.page.showLevelFilter = false;">
                                 <umb-dropdown-item ng-repeat="level in vm.logLevels" class="dropdown-item">
                                     <div class="flex items-center">
@@ -46,7 +51,7 @@
                         <div class="flex search-box">
                             <div class="flex-auto">
                                 <!-- Search/expression filter -->
-                                <input class="form-control search-input" type="text" ng-model="vm.logOptions.filterExpression" placeholder="Search logs&hellip;" />
+                                <input class="form-control search-input" type="text" ng-model="vm.logOptions.filterExpression" placeholder="Search logs..." />
 
                                 <!-- Save Search & Clear Search icon buttons -->
                                 <ins class="icon-rate" ng-show="vm.checkForSavedSearch()" ng-click="vm.addToSavedSearches()">&nbsp;</ins>
@@ -163,37 +168,37 @@
                                                 <umb-dropdown ng-if="log.searchDropdownOpen" on-close="log.searchDropdownOpen = false">
                                                     <umb-dropdown-item>
                                                         <a ng-href="https://www.google.com/search?q={{ log.RenderedMessage }}" target="_blank" localize="title" title="@logViewer_searchThisMessageWithGoogle">
-                                                            <img src="https://www.google.com/favicon.ico" width="16" height="16" /> <localize key="logViewer_searchWithGoogle">Search With Google</localize>
+                                                            <img src="https://www.google.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchWithGoogle">Search With Google</localize>
                                                         </a>
                                                     </umb-dropdown-item>
 
                                                     <umb-dropdown-item>
                                                         <a ng-href="https://www.bing.com/search?q={{ log.RenderedMessage }}" target="_blank" localize="title" title="@logViewer_searchThisMessageWithBing">
-                                                            <img src="https://www.bing.com/favicon.ico" width="16" height="16" /> <localize key="logViewer_searchWithBing">Search With Bing</localize>
+                                                            <img src="https://www.bing.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchWithBing">Search With Bing</localize>
                                                         </a>
                                                     </umb-dropdown-item>
 
                                                     <umb-dropdown-item>
                                                         <a ng-href="https://our.umbraco.com/search?q={{ log.RenderedMessage }}&content=wiki,forum,documentation" target="_blank" localize="title" title="@logViewer_searchThisMessageOnOurUmbracoForumsAndDocs">
-                                                            <img src="https://our.umbraco.com/assets/images/app-icons/favicon.png" width="16" height="16" /> <localize key="logViewer_searchOurUmbraco">Search Our Umbraco</localize>
+                                                            <img src="https://our.umbraco.com/assets/images/app-icons/favicon.png" width="16" height="16" alt="" /> <localize key="logViewer_searchOurUmbraco">Search Our Umbraco</localize>
                                                         </a>
                                                     </umb-dropdown-item>
 
                                                     <umb-dropdown-item>
                                                         <a ng-href="https://www.google.co.uk/?q=site:our.umbraco.com {{ log.RenderedMessage }}&safe=off#q=site:our.umbraco.com {{ log.RenderedMessage }} {{ log.Properties['SourceContext'].Value }}&safe=off" target="_blank" localize="title" title="@logViewer_searchOurUmbracoForumsUsingGoogle">
-                                                            <img src="https://www.google.com/favicon.ico" width="16" height="16" /> <localize key="logViewer_searchOurUmbracoWithGoogle">Search Our Umbraco with Google</localize>
+                                                            <img src="https://www.google.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchOurUmbracoWithGoogle">Search Our Umbraco with Google</localize>
                                                         </a>
                                                     </umb-dropdown-item>
 
                                                     <umb-dropdown-item>
                                                         <a ng-href="https://github.com/umbraco/Umbraco-CMS/search?q={{ log.Properties['SourceContext'].Value }}" target="_blank" localize="title" title="@logViewer_searchWithinUmbracoSourceCodeOnGithub">
-                                                            <img src="https://www.github.com/favicon.ico" width="16" height="16" /> <localize key="logViewer_searchUmbracoSource">Search Umbraco Source</localize>
+                                                            <img src="https://www.github.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchUmbracoSource">Search Umbraco Source</localize>
                                                         </a>
                                                     </umb-dropdown-item>
 
                                                     <umb-dropdown-item>
                                                         <a ng-href="https://github.com/umbraco/Umbraco-CMS/issues?q={{ log.Properties['SourceContext'].Value }}" target="_blank" localize="title" title="@logViewer_searchUmbracoIssuesOnGithub">
-                                                            <img src="https://www.github.com/favicon.ico" width="16" height="16" /> <localize key="logViewer_searchUmbracoIssues">Search Umbraco Issues</localize>
+                                                            <img src="https://www.github.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchUmbracoIssues">Search Umbraco Issues</localize>
                                                         </a>
                                                     </umb-dropdown-item>
                                                 </umb-dropdown>