Allow labels in item list view

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Have zarr use read-only mode ([#1360](../../pull/1360))
 - Use minified geojs ([#1362](../../pull/1362))
 - Configurable item list grid view ([#1363](../../pull/1363))
+- Allow labels in item list view ([#1366](../../pull/1366))
 
 ### Bug Fixes
 - Default to "None" for the DICOM assetstore limit ([#1359](../../pull/1359))

docs/girder_config_options.rst

@@ -64,7 +64,9 @@ This is used to specify how items appear in item lists.  There are two settings,
         max-width: 250
       # show these columns in order from left to right.  Each column has a
       # "type" and "value".  It optionally has a "title" used for the column
-      # header, and a "format" used for searching and filtering.
+      # header, and a "format" used for searching and filtering.  The "label",
+      # if any, is displayed to the left of the column value.  This is more
+      # useful in an grid view than in a column view.
       columns:
         -
           # The "image" type's value is either "thumbnail" or the name of an
@@ -129,6 +131,7 @@ This is used to specify how items appear in item lists.  There are two settings,
           type: metadata
           value: userstain
           title: User Stain
+          label: User Stain
           edit: true
           # description is used as both a tooltip and as placeholder text
           description: Staining method

girder/girder_large_image/web_client/stylesheets/itemList.styl

@@ -84,6 +84,15 @@ ul.g-item-list
         justify-content center
         width inherit
 
+    span.g-item-list-label
+      font-weight bold
+      font-size 14px
+      color black
+      padding-right 5px
+
+    span.large_image_metadata
+      display inline-block
+
   &.li-item-list[layout_mode="grid"]
     display block
 

girder/girder_large_image/web_client/templates/itemList.pug

@@ -42,6 +42,9 @@ ul.g-item-list.li-item-list(layout_mode=(itemList.layout || {}).mode || '')
               }
             });
           #{divtype}.li-item-list-cell(class=classes.join(' '), g-item-cid=item.cid, href=`#item/${item.id}`, title=colNames[colidx])
+            if !skip && column.label
+              span.g-item-list-label
+                = column.label
             if skip
               //- ignore
             else if column.type === 'record'