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

Fixed #7989 - Converted table heading icons in People to CSS glyphs

app/Presenters/UserPresenter.php

@@ -171,21 +171,22 @@ class UserPresenter extends Presenter
                 "formatter" => "usersLinkObjFormatter"
             ],
             [
-                "field" => "assets_count",
+                'field' => 'assets_count',
-                "searchable" => false,
+                'searchable' => false,
-                "sortable" => true,
+                'sortable' => true,
-                "switchable" => true,
+                'switchable' => true,
-                "title" => ' <span class="hidden-md hidden-lg">Assets</span>'
+                'escape' => true,
-                            .'<span class="hidden-xs"><i class="fa fa-barcode fa-lg"></i></span>',
+                'class' => 'css-barcode',
-                "visible" => true,
+                'title' => 'Assets',
+                'visible' => true,
             ],
             [
                 "field" => "licenses_count",
                 "searchable" => false,
                 "sortable" => true,
                 "switchable" => true,
-                "title" => ' <span class="hidden-md hidden-lg">Licenses</span>'
+                'class' => 'css-license',
-                    .'<span class="hidden-xs"><i class="fa fa-floppy-o fa-lg"></i></span>',
+                "title" => 'License',
                 "visible" => true,
             ],
             [
@@ -193,8 +194,8 @@ class UserPresenter extends Presenter
                 "searchable" => false,
                 "sortable" => true,
                 "switchable" => true,
-                "title" => ' <span class="hidden-md hidden-lg">Consumables</span>'
+                'class' => 'css-consumable',
-                    .'<span class="hidden-xs"><i class="fa fa-tint fa-lg"></i></span>',
+                "title" => 'Consumables',
                 "visible" => true,
             ],
             [
@@ -202,8 +203,8 @@ class UserPresenter extends Presenter
                 "searchable" => false,
                 "sortable" => true,
                 "switchable" => true,
-                "title" => ' <span class="hidden-md hidden-lg">Accessories</span>'
+                'class' => 'css-accessory',
-                    .'<span class="hidden-xs"><i class="fa fa-keyboard-o fa-lg"></i></span>',
+                "title" => 'Accessories',
                 "visible" => true,
             ],
             [

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 @@
 @stop
 
 @section('moar_scripts')
+
+
 @include ('partials.bootstrap-table')