Merge pull request #286 from eikek/attachment-tabs

Attachment tabs

modules/webapp/src/main/elm/App/Update.elm

@@ -342,9 +342,13 @@ updateManageData lmsg model =
 
 
 initPage : Model -> Page -> ( Model, Cmd Msg, Sub Msg )
-initPage model page =
+initPage model_ page =
+    let
+        model =
+            { model_ | page = page }
+    in
     case page of
-        HomePage mid ->
+        HomePage _ ->
             Util.Update.andThen2
                 [ updateHome Page.Home.Data.Init
                 , updateQueue Page.Queue.Data.StopRefresh

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,95 +303,18 @@ 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 =
-    let
+    Comp.ItemDetail.AttachmentTabMenu.view model
-        mailTab =
-            if Comp.SentMails.isEmpty model.sentMails then
-                []
-
-            else
-                [ div
-                    [ classList
-                        [ ( "right item", True )
-                        , ( "active", model.sentMailsOpen )
-                        ]
-                    , onClick ToggleSentMails
-                    ]
-                    [ text "E-Mails"
-                    ]
-                ]
-
-        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
-    div [ class "ui top attached tabular menu" ]
-        (List.indexedMap
-            (\pos ->
-                \el ->
-                    if attachmentVisible model pos then
-                        a
-                            ([ classList <|
-                                [ ( "active item", True )
-                                ]
-                                    ++ highlight el
-                             , title (Maybe.withDefault "No Name" el.name)
-                             , href ""
-                             ]
-                                ++ DD.draggable AttachDDMsg el.id
-                                ++ DD.droppable AttachDDMsg el.id
-                            )
-                            [ Maybe.map (Util.String.ellipsis 30) el.name
-                                |> Maybe.withDefault "No Name"
-                                |> text
-                            , a
-                                [ class "right-tab-icon-link"
-                                , href "#"
-                                , onClick (EditAttachNameStart el.id)
-                                ]
-                                [ i [ class "grey edit link icon" ] []
-                                ]
-                            ]
-
-                    else
-                        a
-                            ([ classList <|
-                                [ ( "item", True )
-                                ]
-                                    ++ highlight el
-                             , title (Maybe.withDefault "No Name" el.name)
-                             , href ""
-                             , onClick (SetActiveAttachment pos)
-                             ]
-                                ++ DD.draggable AttachDDMsg el.id
-                                ++ DD.droppable AttachDDMsg el.id
-                            )
-                            [ Maybe.map (Util.String.ellipsis 20) el.name
-                                |> Maybe.withDefault "No Name"
-                                |> text
-                            ]
-            )
-            model.item.attachments
-            ++ mailTab
-        )
 
 
 renderAttachmentView : UiSettings -> Model -> Int -> Attachment -> Html Msg

modules/webapp/src/main/elm/Page/Home/Data.elm

@@ -98,7 +98,7 @@ type Msg
     | KeyUpMsg (Maybe KeyCode)
     | SetContentOnly String
     | ScrollResult (Result Dom.Error ())
-    | ClearItemDetailId
+    | ClearItemDetailId (Maybe String)
 
 
 type SearchType

modules/webapp/src/main/elm/Page/Home/Update.elm

@@ -26,7 +26,7 @@ update mId key flags settings msg model =
         Init ->
             Util.Update.andThen2
                 [ update mId key flags settings (SearchMenuMsg Comp.SearchMenu.Init)
-                , doSearch flags settings
+                , scrollToCard mId
                 ]
                 model
 
@@ -251,12 +251,18 @@ update mId key flags settings msg model =
         ScrollResult _ ->
             let
                 cmd =
-                    Process.sleep 350 |> Task.perform (always ClearItemDetailId)
+                    Process.sleep 800 |> Task.perform (always (ClearItemDetailId mId))
             in
             withSub ( model, cmd )
 
-        ClearItemDetailId ->
+        ClearItemDetailId id ->
-            withSub ( model, Page.set key (HomePage Nothing) )
+            -- if user clicks quickly away (e.g. on another item), the
+            -- deferred command should be ignored
+            if mId == id then
+                noSub ( model, Page.set key (HomePage Nothing) )
+
+            else
+                noSub ( model, Cmd.none )
 
 
 
@@ -328,3 +334,8 @@ withSub ( m, c ) =
         (Time.every 500 (\_ -> UpdateThrottle))
         m.throttle
     )
+
+
+noSub : ( Model, Cmd Msg ) -> ( Model, Cmd Msg, Sub Msg )
+noSub ( m, c ) =
+    ( m, c, Sub.none )

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 {