Move all inline styles in the logviewer search screen to a stylesheet
This commit is contained in:
Poornima Nayar
committed by
Sebastiaan Janssen
Sebastiaan Janssen
parent
1de9ec3259
commit
f0ea76a3ce
@@ -1,5 +1,3 @@
|
||||
/* PACKAGE DETAILS */
|
||||
|
||||
.umb-logviewer {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
@@ -41,7 +39,7 @@
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.umb-logviewer__sidebar {
|
||||
@@ -49,3 +47,99 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-logviewer-search {
|
||||
.filter-name {
|
||||
margin-left: 5px;
|
||||
margin-right: 3px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 20px 8px 16px;
|
||||
}
|
||||
|
||||
.filter {
|
||||
position: relative;
|
||||
|
||||
a.btn-link {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
|
||||
.flex-auto {
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding-right: 160px;
|
||||
}
|
||||
|
||||
.icon-rate {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 32px;
|
||||
right: 140px;
|
||||
color: #fdb45c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-wrong {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 32px;
|
||||
right: 120px;
|
||||
color: #bbbabf;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__toggle {
|
||||
top: 1px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
|
||||
.icon-navigation-down {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.saved-searches {
|
||||
width: 100%;
|
||||
max-height: 250px;
|
||||
overflow-y: scroll;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-items {
|
||||
.table {
|
||||
table-layout: fixed;
|
||||
|
||||
thead th:first-child, thead th:nth-child(3) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
thead th:nth-child(2) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
tr td:nth-child(3) {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.exception {
|
||||
border-left: 4px solid #D42054;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-shadow: rgba(0,0,0,0.07) 2px 2px 10px;
|
||||
|
||||
.exception-message {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div data-element="editor-logs" ng-controller="Umbraco.Editors.LogViewer.SearchController as vm" class="clearfix">
|
||||
<div data-element="editor-logs" ng-controller="Umbraco.Editors.LogViewer.SearchController as vm" class="clearfix umb-logviewer-search">
|
||||
|
||||
<umb-editor-view footer="false">
|
||||
|
||||
@@ -22,14 +22,14 @@
|
||||
<umb-editor-sub-header-content-left class="flex-auto flex-wrap">
|
||||
|
||||
<!-- Log Level filter -->
|
||||
<div class="flex" style="position: relative;">
|
||||
<div class="flex filter">
|
||||
<a class="btn btn-link dropdown-toggle flex mb2" href="" ng-click="vm.page.showLevelFilter = !vm.page.showLevelFilter">
|
||||
<span>Log Levels:</span>
|
||||
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.logLevels) }}</span>
|
||||
<span class="bold truncate dib filter-name">{{ vm.getFilterName(vm.logLevels) }}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<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" style="padding: 8px 20px 8px 16px;">
|
||||
<umb-dropdown-item ng-repeat="level in vm.logLevels" class="dropdown-item">
|
||||
<div class="flex items-center">
|
||||
<umb-checkbox input-id="loglevel-{{$index}}" name="loglevel" model="level.selected" on-change="vm.setLogLevelFilter(level)" />
|
||||
<label for="loglevel-{{$index}}">
|
||||
@@ -40,23 +40,23 @@
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="width:100%;">
|
||||
<div class="flex-auto" style="position:relative;">
|
||||
<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" style="width:100%; padding-right: 160px;" placeholder="Search logs…" />
|
||||
<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()" style="position: absolute; top: 0; line-height: 32px; right: 140px; color: #fdb45c; cursor: pointer;"> </ins>
|
||||
<ins class="icon-wrong" ng-show="vm.logOptions.filterExpression" ng-click="vm.resetSearch()" style="position: absolute; top: 0; line-height: 32px; right: 120px; color: #bbbabf; cursor: pointer;"> </ins>
|
||||
<ins class="icon-rate" ng-show="vm.checkForSavedSearch()" ng-click="vm.addToSavedSearches()"> </ins>
|
||||
<ins class="icon-wrong" ng-show="vm.logOptions.filterExpression" ng-click="vm.resetSearch()"> </ins>
|
||||
|
||||
<!-- Saved Searches -->
|
||||
<a class="umb-variant-switcher__toggle ng-scope" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen" style="top: 1px; right: 0; position: absolute;">
|
||||
<a class="umb-variant-switcher__toggle ng-scope" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
|
||||
<span class="ng-binding">Saved Searches</span>
|
||||
<ins class="umb-variant-switcher__expand icon-navigation-down" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}" style="margin-top: 0;"></ins>
|
||||
<ins class="umb-variant-switcher__expand icon-navigation-down" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}"></ins>
|
||||
</a>
|
||||
|
||||
<!-- Saved Searches Dropdown -->
|
||||
<umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: -10px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
|
||||
<umb-dropdown ng-if="vm.dropdownOpen" class="saved-searches" on-close="vm.dropdownOpen = false" umb-keyboard-list>
|
||||
<umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active}" ng-repeat="search in vm.searches">
|
||||
<a href="" class="umb-variant-switcher__name-wrapper" ng-click="vm.selectSearch(search)" prevent-default>
|
||||
<span class="umb-variant-switcher__name">{{search.name}}</span>
|
||||
@@ -79,9 +79,7 @@
|
||||
</umb-editor-sub-header>
|
||||
</form>
|
||||
|
||||
<div ng-if="!vm.loading">
|
||||
|
||||
<div>
|
||||
<div ng-if="!vm.loading" class="log-items">
|
||||
|
||||
<!-- Loader for the main logs content when paging -->
|
||||
<umb-load-indicator ng-if="vm.logsLoading"></umb-load-indicator>
|
||||
@@ -99,15 +97,15 @@
|
||||
Total Items: {{ vm.logItems.totalItems }}
|
||||
</div>
|
||||
|
||||
<table class="table table-hover" style="table-layout: fixed;" ng-if="vm.logItems.totalItems > 0">
|
||||
<table class="table table-hover" ng-if="vm.logItems.totalItems > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 20%;" ng-click="vm.toggleOrderBy()">
|
||||
<th ng-click="vm.toggleOrderBy()">
|
||||
Timestamp
|
||||
<ins class="icon-navigation-down" ng-class="{'icon-navigation-down': vm.logOptions.orderDirection === 'Descending', 'icon-navigation-up': vm.logOptions.orderDirection !== 'Descending'}"> </ins>
|
||||
</th>
|
||||
<th style="width: 15%;">Level</th>
|
||||
<th style="width: 20%;">Machine</th>
|
||||
<th>Level</th>
|
||||
<th>Machine</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -116,15 +114,15 @@
|
||||
<td>{{ log.Timestamp | date:'medium' }}</td>
|
||||
<td><umb-badge size="s" color="{{ log.logTypeColor }}">{{ log.Level }}</umb-badge></td>
|
||||
<td><small>{{ log.Properties.MachineName.Value }}</small></td>
|
||||
<td style="word-break: break-word;">{{ log.RenderedMessage }}</td>
|
||||
<td>{{ log.RenderedMessage }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Log Details (Exception & Properties) -->
|
||||
<tr ng-repeat-end ng-if="log.open">
|
||||
<td colspan="4">
|
||||
<div ng-if="log.Exception" style="border-left:4px solid #D42054; padding:0 10px 10px 10px; box-shadow:rgba(0,0,0,0.07) 2px 2px 10px">
|
||||
<div ng-if="log.Exception"class="exception">
|
||||
<h3 class="text-error">Exception</h3>
|
||||
<p style="white-space: pre-wrap;">{{ log.Exception }}</p>
|
||||
<p class="exception-message">{{ log.Exception }}</p>
|
||||
</div>
|
||||
|
||||
<h3>Properties</h3>
|
||||
@@ -213,7 +211,7 @@
|
||||
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
Reference in New Issue
Block a user