Merge pull request #7993 from snipe/fixes/7989_column_selector

Fixed #7989 - Converted table heading icons in People to CSS glyphs
snipe · Apr 24, 2020 · 7eb70e1 · 7eb70e1
2 parents 5bb4f27 + 3dfcb46
commit 7eb70e1
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 13 deletions.
diff --git a/app/Presenters/UserPresenter.php b/app/Presenters/UserPresenter.php
@@ -171,39 +171,40 @@ public static function dataTableLayout()
                 "formatter" => "usersLinkObjFormatter"
             ],
             [
-                "field" => "assets_count",
-                "searchable" => false,
-                "sortable" => true,
-                "switchable" => true,
-                "title" => ' <span class="hidden-md hidden-lg">Assets</span>'
-                            .'<span class="hidden-xs"><i class="fa fa-barcode fa-lg"></i></span>',
-                "visible" => true,
+                'field' => 'assets_count',
+                'searchable' => false,
+                'sortable' => true,
+                'switchable' => true,
+                'escape' => true,
+                'class' => 'css-barcode',
+                'title' => 'Assets',
+                'visible' => true,
             ],
             [
                 "field" => "licenses_count",
                 "searchable" => false,
                 "sortable" => true,
                 "switchable" => true,
-                "title" => ' <span class="hidden-md hidden-lg">Licenses</span>'
-                    .'<span class="hidden-xs"><i class="fa fa-floppy-o fa-lg"></i></span>',
+                'class' => 'css-license',
+                "title" => 'License',
                 "visible" => true,
             ],
             [
                 "field" => "consumables_count",
                 "searchable" => false,
                 "sortable" => true,
                 "switchable" => true,
-                "title" => ' <span class="hidden-md hidden-lg">Consumables</span>'
-                    .'<span class="hidden-xs"><i class="fa fa-tint fa-lg"></i></span>',
+                'class' => 'css-consumable',
+                "title" => 'Consumables',
                 "visible" => true,
             ],
             [
                 "field" => "accessories_count",
                 "searchable" => false,
                 "sortable" => true,
                 "switchable" => true,
-                "title" => ' <span class="hidden-md hidden-lg">Accessories</span>'
-                    .'<span class="hidden-xs"><i class="fa fa-keyboard-o fa-lg"></i></span>',
+                'class' => 'css-accessory',
+                "title" => 'Accessories',
                 "visible" => true,
             ],
             [

diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
@@ -14,6 +14,67 @@
 @stop
 
 @section('header_right')
+
+<style>
+    /**
+    This is kind of weird, but it is necessary to prevent the column-selector code from barfing, since
+    any HTML used in the UserPresenter "title" attribute breaks the column selector HTML.
+
+    Instead, we use CSS to add the icon into the table header, which leaves the column selector
+    "title" text as-is.
+
+    See https://github.com/snipe/snipe-it/issues/7989
+
+     */
+    th.css-barcode > .th-inner,
+    th.css-license > .th-inner,
+    th.css-consumable > .th-inner,
+    th.css-accessory > .th-inner
+    {
+        font-size: 0px;
+        line-height: 4!important;
+        text-align: left;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+
+    th.css-barcode > .th-inner::before,
+    th.css-license > .th-inner::before,
+    th.css-consumable > .th-inner::before,
+    th.css-accessory > .th-inner::before
+
+    {
+        display: inline-block;
+        font: normal normal normal 14px/1 FontAwesome;
+        font-size: 20px;
+    }
+
+
+    th.css-barcode > .th-inner::before
+    {
+        content: "\f02a";
+    }
+
+    th.css-license > .th-inner::before
+    {
+        content: "\f0c7";
+    }
+
+    th.css-consumable > .th-inner::before
+    {
+        content: "\f043";
+    }
+
+    th.css-accessory > .th-inner::before
+    {
+        content: "\f11c";
+    }
+
+
+</style>
+
     @can('create', \App\Models\User::class)
       @if ($snipeSettings->ldap_enabled == 1)
       <a href="{{ route('ldap/user') }}" class="btn btn-default pull-right"><span class="fa fa-sitemap"></span> LDAP Sync</a>
@@ -91,6 +152,8 @@ class="table table-striped snipe-table"
 @stop
 
 @section('moar_scripts')
+
+
 @include ('partials.bootstrap-table')