Merge pull request #5023 from umbraco/temp8-ui-unpublished-state-in-list-view

Make unpublished items in list view show with grey text-color on name

src/Umbraco.Web.UI.Client/src/less/components/umb-table.less

@@ -91,12 +91,17 @@ input.umb-table__input {
 .umb-table-body .umb-table-row {
     color: @gray-5;
     border-top: 1px solid @gray-9;
-    cursor: pointer;
     font-size: 14px;
     position: relative;
     min-height: 52px;
+}
+.umb-table-body .umb-table-row.-selectable {
+    
+    cursor: pointer;
+    
     &:hover {
-        background-color: @ui-option-hover;
+        //background-color: @ui-option-hover;
+        
     }
 }
 
@@ -122,7 +127,7 @@ input.umb-table__input {
     margin: 0 auto;
     font-size: 20px;
     line-height: 20px;
-    color: @gray-7;
+    color: @ui-option-type;
 }
 
 .umb-table-body__checkicon,
@@ -135,9 +140,30 @@ input.umb-table__input {
 }
 
 .umb-table-body .umb-table__name {
-    color: @black;
+    color: @ui-option-type;
     font-size: 14px;
     font-weight: bold;
+    a {
+        color: @ui-option-type;
+        &:hover, &:focus {
+            color: @ui-option-type-hover;
+            text-decoration: underline;
+        }
+    }
+}
+.umb-table-body .umb-table-row.-light {
+    .umb-table-body__icon {
+        color: @ui-option-disabled-type;
+    }
+    .umb-table__name {
+        color: @ui-option-disabled-type;
+        a {
+            color: @ui-option-disabled-type;
+            &:hover, &:focus {
+                color: @ui-option-disabled-type-hover;
+            }
+        }
+    }
 }
 
 // Styles of no items in the listview

src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less

@@ -32,17 +32,10 @@
     }
     
     .umb-user-table-row {
-        cursor: default;
         .umb-checkmark {
             visibility: hidden;
         }
     }
-
-    .umb-user-table-row.-selectable {
-        cursor: pointer;
-        
-        
-    }
     
     &.-has-selection {
         .umb-user-table-row.-selectable {

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -130,8 +130,12 @@
 // -------------------------
 
 @ui-option-type:        @blueExtraDark;
-@ui-option-hover:       @sand-7;
 @ui-option-type-hover:  @blueMid;
+@ui-option-hover:       @sand-7;
+
+@ui-option-disabled-type:        @gray-6;
+@ui-option-disabled-type-hover:  @gray-5;
+@ui-option-disabled-hover:       @sand-7;
 
 //@ui-active:           #346ab3;
 @ui-active:             @pinkLight;

src/Umbraco.Web.UI.Client/src/views/components/umb-table.html

@@ -10,7 +10,6 @@
                            ng-checked="vm.isSelectedAll()">
                 </div>
                 <div class="umb-table-cell umb-table__name">
-                    <a class="umb-table-head__link sortable" href="#" ng-click="vm.sort('Name', true, true)" prevent-default>
                         <localize key="general_name">Name</localize>
                         <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
                     </a>
@@ -30,9 +29,9 @@
         </div>
         <!-- Listview body section -->
         <div class="umb-table-body">
-            <div class="umb-table-row"
+            <div class="umb-table-row -selectable"
                  ng-repeat="item in vm.items track by $index"
-                 ng-class="{'umb-table-row--selected':item.selected}"
+                 ng-class="{'umb-table-row--selected':item.selected, '-light':!item.published && item.updater != null}"
                  ng-click="vm.selectItem(item, $index, $event)">
 
                 <div class="umb-table-cell">