Improve selecting attachments of an item

Use a list of small thumbnails instead of just names.

Closes: #396

modules/webapp/src/main/elm/Comp/ItemDetail/AttachmentTabMenu.elm

@@ -1,10 +1,11 @@
 module Comp.ItemDetail.AttachmentTabMenu exposing (view)
 
+import Api
 import Api.Model.Attachment exposing (Attachment)
 import Comp.ItemDetail.Model exposing (Model, Msg(..))
 import Comp.SentMails
-import Html exposing (Html, a, div, i, text)
-import Html.Attributes exposing (class, classList, href, title)
+import Html exposing (Html, a, div, i, img, text)
+import Html.Attributes exposing (class, classList, href, src, title)
 import Html.Events exposing (onClick)
 import Html5.DragDrop as DD
 import Util.List
@@ -12,13 +13,23 @@ import Util.Maybe
 import Util.String
 
 
-view : Model -> Html Msg
+view : Model -> List (Html Msg)
 view model =
-    div [ class "ui top attached tabular menu" ]
+    [ div [ class "ui top attached tabular menu" ]
         (activeAttach model
             :: selectMenu model
             ++ sentMailsTab model
         )
+    , div
+        [ classList
+            [ ( "ui attached segment", model.attachMenuOpen )
+            , ( "invisible hidden", not model.attachMenuOpen )
+            ]
+        ]
+        [ div [ class "ui doubling small cards" ]
+            (List.indexedMap (menuItem model) model.item.attachments)
+        ]
+    ]
 
 
 activeAttach : Model -> Html Msg
@@ -94,14 +105,6 @@ selectMenu model =
                         ]
                     ]
                     []
-                , div
-                    [ classList
-                        [ ( "menu transition", True )
-                        , ( "visible", model.attachMenuOpen )
-                        , ( "hidden", not model.attachMenuOpen )
-                        ]
-                    ]
-                    (List.indexedMap (menuItem model) model.item.attachments)
                 ]
             ]
 
@@ -109,7 +112,7 @@ selectMenu model =
 menuItem : Model -> Int -> Attachment -> Html Msg
 menuItem model pos attach =
     let
-        highlight el =
+        highlight =
             let
                 dropId =
                     DD.getDropId model.attachDD
@@ -118,25 +121,45 @@ menuItem model pos attach =
                     DD.getDragId model.attachDD
 
                 enable =
-                    Just el.id == dropId && dropId /= dragId
+                    Just attach.id == dropId && dropId /= dragId
             in
             [ ( "current-drop-target", enable )
             ]
+
+        active =
+            model.visibleAttach == pos
     in
     a
         ([ classList <|
-            [ ( "item", True )
+            [ ( "ui  card", True )
+            , ( "blue", pos == 0 )
             ]
-                ++ highlight attach
+                ++ highlight
          , href "#"
          , onClick (SetActiveAttachment pos)
          ]
             ++ DD.draggable AttachDDMsg attach.id
             ++ DD.droppable AttachDDMsg attach.id
         )
-        [ Maybe.map (Util.String.ellipsis 60) attach.name
-            |> Maybe.withDefault "No Name"
-            |> text
+        [ div
+            [ classList [ ( "invisible hidden", not active ) ]
+            , class "ui corner icon label"
+            ]
+            [ i [ class "check icon" ] []
+            ]
+        , div [ class "image" ]
+            [ img
+                [ src (Api.attachmentPreviewURL attach.id)
+                ]
+                []
+            ]
+        , div [ class "content" ]
+            [ div [ class "description" ]
+                [ Maybe.map (Util.String.ellipsis 60) attach.name
+                    |> Maybe.withDefault "No Name"
+                    |> text
+                ]
+            ]
         ]
 
 

modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm

@@ -88,6 +88,7 @@ update key flags inav settings msg model =
                     , dueDatePicker = dp
                     , itemMail = im
                     , visibleAttach = 0
+                    , attachMenuOpen = False
                     , customFieldsModel = cm
                   }
                 , Cmd.batch
@@ -274,6 +275,7 @@ update key flags inav settings msg model =
             resultModel
                 { model
                     | visibleAttach = pos
+                    , attachMenuOpen = False
                     , sentMailsOpen = False
                     , attachRename = Nothing
                 }

modules/webapp/src/main/elm/Comp/ItemDetail/View.elm

@@ -84,8 +84,7 @@ view inav settings model =
 
                       else
                         []
-                    , [ renderAttachmentsTabMenu model
-                      ]
+                    , renderAttachmentsTabMenu model
                     , renderAttachmentsTabBody settings model
                     , renderIdInfo model
                     , if settings.itemDetailNotesPosition == Data.UiSettings.Bottom then
@@ -319,7 +318,7 @@ attachmentVisible model pos =
            )
 
 
-renderAttachmentsTabMenu : Model -> Html Msg
+renderAttachmentsTabMenu : Model -> List (Html Msg)
 renderAttachmentsTabMenu model =
     Comp.ItemDetail.AttachmentTabMenu.view model
 

modules/webapp/src/main/webjar/docspell.css

@@ -225,9 +225,17 @@ textarea.markdown-editor {
     background: rgba(240,248,255,0.4);
 }
 
-.default-layout .ui.dropdown .menu .item.current-drop-target, .header.current-drop-target, .item.current-drop-target {
+.default-layout .ui.dropdown .menu .current-drop-target, .header.current-drop-target, .current-drop-target {
     background: rgba(0,0,0,0.2) !important;
 }
+.default-layout .ui.cards.small > .ui.card {
+    max-width: 180px;
+}
+.default-layout .ui.cards.small > .ui.card .image  {
+    max-width: 100px;
+    margin-left: auto;
+    margin-right: auto;
+}
 
 .default-layout .search-menu {
     box-shadow: 2px 1px 3px rgba(216, 223, 229, 1);