From 4b700fb2492349e493ab832d5396d0ebb9a9dc6f Mon Sep 17 00:00:00 2001
From: Eike Kettner <eike.kettner@posteo.de>
Date: Sat, 14 Nov 2020 11:03:22 +0100
Subject: [PATCH] Indicate on a card that multi-select mode is active

---
 .../webapp/src/main/elm/Comp/ItemCardList.elm | 21 ++++++++++++++++++-
 modules/webapp/src/main/webjar/docspell.css   |  9 +++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/modules/webapp/src/main/elm/Comp/ItemCardList.elm b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
index e963c842..220bb692 100644
--- a/modules/webapp/src/main/elm/Comp/ItemCardList.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
@@ -148,7 +148,12 @@ type alias ViewConfig =
 
 view : ViewConfig -> UiSettings -> Model -> Html Msg
 view cfg settings model =
-    div [ class "ui container" ]
+    div
+        [ classList
+            [ ( "ui container", True )
+            , ( "multi-select-mode", isMultiSelectMode cfg )
+            ]
+        ]
         (List.map (viewGroup model cfg settings) model.results.groups)
 
 
@@ -185,3 +190,17 @@ viewItem model cfg settings item =
             Comp.ItemCard.view vvcfg settings cardModel item
     in
     Html.map (ItemCardMsg item) cardHtml
+
+
+
+--- Helpers
+
+
+isMultiSelectMode : ViewConfig -> Bool
+isMultiSelectMode cfg =
+    case cfg.selection of
+        Data.ItemSelection.Active _ ->
+            True
+
+        Data.ItemSelection.Inactive ->
+            False
diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css
index ddc5ab3d..3c3ccd00 100644
--- a/modules/webapp/src/main/webjar/docspell.css
+++ b/modules/webapp/src/main/webjar/docspell.css
@@ -93,15 +93,18 @@
     padding: 0.8em;
 }
 
-.default-layout .ui.card .link.content:hover {
-    box-shadow: 0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
-}
 .default-layout .card .card-attachment-nav {
     position: absolute;
     left: 4px;
     top: 4px;
     z-index: 8;
 }
+.default-layout .multi-select-mode .ui.card {
+    border: 1px dashed rgba(34,36,38, .8);
+}
+.default-layout .ui.card:hover {
+    box-shadow: 0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
+}
 .default-layout .image.ds-card-image {
     overflow: auto;
 }