From f0ea76a3cecf8d3587040908a13021878f32c04c Mon Sep 17 00:00:00 2001
From: Poornima Nayar <poornimakrishnav@gmail.com>
Date: Wed, 16 Oct 2019 20:38:41 +0100
Subject: [PATCH] Move all inline styles in the logviewer search screen to a
 stylesheet

---
 .../src/less/components/umb-logviewer.less    | 100 +++++++++++++++++-
 .../src/views/logviewer/search.html           |  44 ++++----
 2 files changed, 118 insertions(+), 26 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
index 7b8845542e..76223589e4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
@@ -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;
+            }
+        }
+    }
+}
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 b84ca3d779..810984c04a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
@@ -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&hellip;" />
+                                <input class="form-control search-input" type="text" ng-model="vm.logOptions.filterExpression" placeholder="Search logs&hellip;" />
 
                                 <!-- 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;">&nbsp;</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;">&nbsp;</ins>
+                                <ins class="icon-rate" ng-show="vm.checkForSavedSearch()" ng-click="vm.addToSavedSearches()">&nbsp;</ins>
+                                <ins class="icon-wrong" ng-show="vm.logOptions.filterExpression" ng-click="vm.resetSearch()">&nbsp;</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'}">&nbsp;</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>