From 2f9e0a8214caf1e713ee6f4455c1f7f42a70fd6a Mon Sep 17 00:00:00 2001
From: Eike Kettner <eike.kettner@posteo.de>
Date: Fri, 13 Nov 2020 01:54:19 +0100
Subject: [PATCH] Use more prominent indication when an item is selected

Downside to this approach is that the item card is not accessible when
selected.
---
 modules/webapp/src/main/elm/Comp/ItemCard.elm | 67 ++++++++++---------
 modules/webapp/src/main/webjar/docspell.css   |  2 +-
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/modules/webapp/src/main/elm/Comp/ItemCard.elm b/modules/webapp/src/main/elm/Comp/ItemCard.elm
index 53c4fe70..b449bcb7 100644
--- a/modules/webapp/src/main/elm/Comp/ItemCard.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemCard.elm
@@ -122,10 +122,7 @@ view cfg settings model item =
             item.state /= "created"
 
         cardColor =
-            if isSelected cfg item.id then
-                "purple"
-
-            else if not isConfirmed then
+            if not isConfirmed then
                 "blue"
 
             else
@@ -141,6 +138,25 @@ view cfg settings model item =
 
                 Data.ItemSelection.Active ids ->
                     onClick (ToggleSelectItem ids item.id)
+
+        selectedDimmer =
+            div
+                [ classList
+                    [ ( "ui light dimmer", True )
+                    , ( "active", isSelected cfg item.id )
+                    ]
+                ]
+                [ div [ class "content" ]
+                    [ a
+                        [ cardAction
+                        ]
+                        [ i [ class "huge icons purple" ]
+                            [ i [ class "big circle outline icon" ] []
+                            , i [ class "check icon" ] []
+                            ]
+                        ]
+                    ]
+                ]
     in
     div
         ([ classList
@@ -156,7 +172,8 @@ view cfg settings model item =
             []
 
           else
-            [ previewMenu model item (currentAttachment model item)
+            [ selectedDimmer
+            , previewMenu model item (currentAttachment model item)
             , previewImage settings cardAction model item
             ]
          )
@@ -310,35 +327,25 @@ mainContent cardAction cardColor isConfirmed settings cfg item =
             Data.UiSettings.fieldHidden settings f
     in
     a
-        [ class "link content"
+        [ class "content"
         , href "#"
         , cardAction
         ]
-        [ case cfg.selection of
-            Data.ItemSelection.Active ids ->
-                div [ class "header" ]
-                    [ Util.Html.checkbox (Set.member item.id ids)
-                    , dirIcon
-                    , Util.String.underscoreToSpace item.name
-                        |> text
-                    ]
+        [ if fieldHidden Data.Fields.Direction then
+            div [ class "header" ]
+                [ Util.String.underscoreToSpace item.name |> text
+                ]
 
-            Data.ItemSelection.Inactive ->
-                if fieldHidden Data.Fields.Direction then
-                    div [ class "header" ]
-                        [ Util.String.underscoreToSpace item.name |> text
-                        ]
-
-                else
-                    div
-                        [ class "header"
-                        , Data.Direction.labelFromMaybe item.direction
-                            |> title
-                        ]
-                        [ dirIcon
-                        , Util.String.underscoreToSpace item.name
-                            |> text
-                        ]
+          else
+            div
+                [ class "header"
+                , Data.Direction.labelFromMaybe item.direction
+                    |> title
+                ]
+                [ dirIcon
+                , Util.String.underscoreToSpace item.name
+                    |> text
+                ]
         , div
             [ classList
                 [ ( "ui right corner label", True )
diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css
index 3768136a..ddc5ab3d 100644
--- a/modules/webapp/src/main/webjar/docspell.css
+++ b/modules/webapp/src/main/webjar/docspell.css
@@ -100,7 +100,7 @@
     position: absolute;
     left: 4px;
     top: 4px;
-    z-index: 10;
+    z-index: 8;
 }
 .default-layout .image.ds-card-image {
     overflow: auto;