Move attachment tabs into a menu

If multiple attachments are present, the tab menu doesn't show all. So
if there is more than one attachment they can be selected from a menu.

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

@@ -0,0 +1,158 @@
+module Comp.ItemDetail.AttachmentTabMenu exposing (view)
+
+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.Events exposing (onClick)
+import Html5.DragDrop as DD
+import Util.List
+import Util.Maybe
+import Util.String
+
+
+view : Model -> Html Msg
+view model =
+    div [ class "ui top attached tabular menu" ]
+        (activeAttach model
+            :: selectMenu model
+            ++ sentMailsTab model
+        )
+
+
+activeAttach : Model -> Html Msg
+activeAttach model =
+    let
+        attachM =
+            Util.Maybe.or
+                [ Util.List.get model.item.attachments model.visibleAttach
+                    |> Maybe.map (Tuple.pair model.visibleAttach)
+                , List.head model.item.attachments
+                    |> Maybe.map (Tuple.pair 0)
+                ]
+
+        visible =
+            not model.sentMailsOpen
+    in
+    case attachM of
+        Just ( pos, attach ) ->
+            a
+                ([ classList
+                    [ ( "active", visible )
+                    , ( "item", True )
+                    ]
+                 , title (Maybe.withDefault "No Name" attach.name)
+                 , href "#"
+                 ]
+                    ++ (if visible then
+                            []
+
+                        else
+                            [ onClick (SetActiveAttachment pos) ]
+                       )
+                )
+                [ Maybe.map (Util.String.ellipsis 30) attach.name
+                    |> Maybe.withDefault "No Name"
+                    |> text
+                , a
+                    [ classList
+                        [ ( "right-tab-icon-link", True )
+                        , ( "invisible hidden", not visible )
+                        ]
+                    , href "#"
+                    , onClick (EditAttachNameStart attach.id)
+                    ]
+                    [ i [ class "grey edit link icon" ] []
+                    ]
+                ]
+
+        Nothing ->
+            div [] []
+
+
+selectMenu : Model -> List (Html Msg)
+selectMenu model =
+    case model.item.attachments of
+        [] ->
+            []
+
+        [ _ ] ->
+            []
+
+        _ ->
+            [ a
+                [ class "ui dropdown item"
+                , href "#"
+                , onClick ToggleAttachMenu
+                ]
+                [ i
+                    [ classList
+                        [ ( "large ellipsis icon", True )
+                        , ( "horizontal", not model.attachMenuOpen )
+                        , ( "vertical", model.attachMenuOpen )
+                        ]
+                    ]
+                    []
+                , div
+                    [ classList
+                        [ ( "menu transition", True )
+                        , ( "visible", model.attachMenuOpen )
+                        , ( "hidden", not model.attachMenuOpen )
+                        ]
+                    ]
+                    (List.indexedMap (menuItem model) model.item.attachments)
+                ]
+            ]
+
+
+menuItem : Model -> Int -> Attachment -> Html Msg
+menuItem model pos attach =
+    let
+        highlight el =
+            let
+                dropId =
+                    DD.getDropId model.attachDD
+
+                dragId =
+                    DD.getDragId model.attachDD
+
+                enable =
+                    Just el.id == dropId && dropId /= dragId
+            in
+            [ ( "current-drop-target", enable )
+            ]
+    in
+    a
+        ([ classList <|
+            [ ( "item", True )
+            ]
+                ++ highlight attach
+         , 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
+        ]
+
+
+sentMailsTab : Model -> List (Html Msg)
+sentMailsTab model =
+    if Comp.SentMails.isEmpty model.sentMails then
+        []
+
+    else
+        [ div
+            [ classList
+                [ ( "right item", True )
+                , ( "active", model.sentMailsOpen )
+                ]
+            , onClick ToggleSentMails
+            ]
+            [ text "E-Mails"
+            ]
+        ]

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

@@ -47,6 +47,7 @@ import Util.Tag
 type alias Model =
     { item : ItemDetail
     , visibleAttach : Int
+    , attachMenuOpen : Bool
     , menuOpen : Bool
     , tagModel : Comp.Dropdown.Model Tag
     , directionModel : Comp.Dropdown.Model Direction
@@ -115,6 +116,7 @@ emptyModel : Model
 emptyModel =
     { item = Api.Model.ItemDetail.empty
     , visibleAttach = 0
+    , attachMenuOpen = False
     , menuOpen = False
     , tagModel =
         Util.Tag.makeDropdownModel
@@ -269,6 +271,7 @@ type Msg
     | SaveNameResp (Result Http.Error BasicResult)
     | UpdateThrottle
     | KeyInputMsg Comp.KeyInput.Msg
+    | ToggleAttachMenu
 
 
 type SaveNameState

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

@@ -758,7 +758,7 @@ update key flags inav settings msg model =
             noSub ( { model | sentMails = sm }, Cmd.none )
 
         ToggleSentMails ->
-            noSub ( { model | sentMailsOpen = not model.sentMailsOpen, visibleAttach = -1 }, Cmd.none )
+            noSub ( { model | sentMailsOpen = not model.sentMailsOpen }, Cmd.none )
 
         SentMailsResp (Ok list) ->
             let
@@ -1266,6 +1266,9 @@ update key flags inav settings msg model =
                 -- field and requires to activate the throttle
                 withSub ( model_, Cmd.none )
 
+        ToggleAttachMenu ->
+            noSub ( { model | attachMenuOpen = not model.attachMenuOpen }, Cmd.none )
+
 
 
 --- Helper

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

@@ -6,6 +6,7 @@ import Comp.DatePicker
 import Comp.DetailEdit
 import Comp.Dropdown
 import Comp.Dropzone
+import Comp.ItemDetail.AttachmentTabMenu
 import Comp.ItemDetail.Model exposing (Model, Msg(..), NotesField(..), SaveNameState(..))
 import Comp.ItemMail
 import Comp.KeyInput
@@ -302,15 +303,22 @@ renderNotes model =
 
 attachmentVisible : Model -> Int -> Bool
 attachmentVisible model pos =
-    if model.visibleAttach >= List.length model.item.attachments then
+    not model.sentMailsOpen
-        pos == 0
+        && (if model.visibleAttach >= List.length model.item.attachments then
+                pos == 0
 
-    else
+            else
-        model.visibleAttach == pos
+                model.visibleAttach == pos
+           )
 
 
 renderAttachmentsTabMenu : Model -> Html Msg
 renderAttachmentsTabMenu model =
+    Comp.ItemDetail.AttachmentTabMenu.view model
+
+
+renderAttachmentsTabMenuOld : Model -> Html Msg
+renderAttachmentsTabMenuOld model =
     let
         mailTab =
             if Comp.SentMails.isEmpty model.sentMails then

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

@@ -170,8 +170,8 @@ textarea.markdown-editor {
     background: rgba(240,248,255,0.4);
 }
 
-.default-layout .ui.menu .item.current-drop-target, .header.current-drop-target, .item.current-drop-target {
+.default-layout .ui.dropdown .menu .item.current-drop-target, .header.current-drop-target, .item.current-drop-target {
-    background: rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0.2) !important;
 }
 
 .default-layout .search-menu {