Log viewer: Filter toggle (#6863)

This commit is contained in:
Jan Skovgaard
2019-10-29 22:44:22 +01:00
committed by Sebastiaan Janssen
parent c563d617fb
commit c7af35937c
3 changed files with 39 additions and 13 deletions

View File

@@ -77,6 +77,7 @@
@import "listview.less";
@import "gridview.less";
@import "footer.less";
@import "filter-toggle.less";
@import "forms/umb-validation-label.less";

View File

@@ -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;
}

View File

@@ -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>