Make notes below the files view and always visible

It looks similiar to github's readme. If there are no notes, the form
is displayed.

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

@@ -305,6 +305,7 @@ loginInfo model =
 footer : Model -> Html Msg
 footer model =
     div [ class "ui footer" ]
+        [ div [ class "ui center aligned container" ]
             [ a [ href "https://github.com/eikek/docspell" ]
                 [ i [ class "ui github icon" ] []
                 ]
@@ -316,3 +317,4 @@ footer model =
                 , text ")"
                 ]
             ]
+        ]

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

@@ -79,7 +79,6 @@ type alias Model =
 type NotesField
     = ViewNotes
     | EditNotes Comp.MarkdownInput.Model
-    | HideNotes
 
 
 type alias AttachmentRename =
@@ -97,9 +96,6 @@ isEditNotes field =
         ViewNotes ->
             False
 
-        HideNotes ->
-            False
-
 
 emptyModel : Model
 emptyModel =

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

@@ -46,6 +46,7 @@ import Util.Folder exposing (mkFolderOption)
 import Util.Http
 import Util.List
 import Util.Maybe
+import Util.String
 
 
 type Msg
@@ -67,7 +68,6 @@ type Msg
     | SetName String
     | SaveName
     | SetNotes String
-    | ToggleNotes
     | ToggleEditNotes
     | NotesEditMsg Comp.MarkdownInput.Msg
     | SaveNotes
@@ -249,7 +249,12 @@ update key flags next msg model =
                 | item = item
                 , nameModel = item.name
                 , notesModel = item.notes
-                , notesField = ViewNotes
+                , notesField =
+                    if Util.String.isNothingOrBlank item.notes then
+                        EditNotes Comp.MarkdownInput.init
+
+                    else
+                        ViewNotes
                 , itemDate = item.itemDate
                 , dueDate = item.dueDate
                 , visibleAttach = 0
@@ -437,19 +442,6 @@ update key flags next msg model =
                 , Cmd.none
                 )
 
-        ToggleNotes ->
-            noSub
-                ( { model
-                    | notesField =
-                        if model.notesField == ViewNotes then
-                            HideNotes
-
-                        else
-                            ViewNotes
-                  }
-                , Cmd.none
-                )
-
         ToggleEditNotes ->
             noSub
                 ( { model
@@ -475,9 +467,6 @@ update key flags next msg model =
                         , Cmd.none
                         )
 
-                HideNotes ->
-                    noSub ( model, Cmd.none )
-
                 ViewNotes ->
                     noSub ( model, Cmd.none )
 

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

@@ -39,13 +39,54 @@ view inav settings model =
     div []
         [ Html.map ModalEditMsg (Comp.DetailEdit.viewModal settings model.modalEdit)
         , renderItemInfo settings model
+        , renderDetailMenu inav model
+        , renderMailForm settings model
+        , renderAddFilesForm model
+        , div [ class "ui grid" ]
+            [ Html.map DeleteItemConfirm (Comp.YesNoDimmer.view model.deleteItemConfirm)
             , div
+                [ classList
+                    [ ( "sixteen wide mobile six wide tablet five wide computer column", True )
+                    , ( "invisible", not model.menuOpen )
+                    ]
+                ]
+                (if model.menuOpen then
+                    renderEditMenu settings model
+
+                 else
+                    []
+                )
+            , div
+                [ classList
+                    [ ( "sixteen wide mobile ten wide tablet eleven wide computer column", model.menuOpen )
+                    , ( "sixteen", not model.menuOpen )
+                    , ( "wide column", True )
+                    ]
+                ]
+              <|
+                List.concat
+                    [ [ renderAttachmentsTabMenu model
+                      ]
+                    , renderAttachmentsTabBody settings model
+                    , [ renderNotes model ]
+                    , renderIdInfo model
+                    ]
+            ]
+        ]
+
+
+
+--- Helper
+
+
+renderDetailMenu : { prev : Maybe String, next : Maybe String } -> Model -> Html Msg
+renderDetailMenu inav model =
+    div
         [ classList
             [ ( "ui ablue-comp menu", True )
             , ( "top attached"
               , model.mailOpen
                     || model.addFilesOpen
-                        || isEditNotes model.notesField
               )
             ]
         ]
@@ -96,21 +137,6 @@ view inav settings model =
             ]
             [ i [ class "mail outline icon" ] []
             ]
-            , a
-                [ classList
-                    [ ( "toggle item", True )
-                    , ( "active", isEditNotes model.notesField )
-                    ]
-                , if isEditNotes model.notesField then
-                    title "Cancel editing"
-
-                  else
-                    title "Edit Notes"
-                , onClick ToggleEditNotes
-                , href "#"
-                ]
-                [ Icons.editNotesIcon
-                ]
         , a
             [ classList
                 [ ( "toggle item", True )
@@ -127,43 +153,6 @@ view inav settings model =
             [ Icons.addFilesIcon
             ]
         ]
-        , renderMailForm settings model
-        , renderAddFilesForm model
-        , renderNotes model
-        , div [ class "ui grid" ]
-            [ Html.map DeleteItemConfirm (Comp.YesNoDimmer.view model.deleteItemConfirm)
-            , div
-                [ classList
-                    [ ( "sixteen wide mobile six wide tablet five wide computer column", True )
-                    , ( "invisible", not model.menuOpen )
-                    ]
-                ]
-                (if model.menuOpen then
-                    renderEditMenu settings model
-
-                 else
-                    []
-                )
-            , div
-                [ classList
-                    [ ( "sixteen wide mobile ten wide tablet eleven wide computer column", model.menuOpen )
-                    , ( "sixteen", not model.menuOpen )
-                    , ( "wide column", True )
-                    ]
-                ]
-              <|
-                List.concat
-                    [ [ renderAttachmentsTabMenu model
-                      ]
-                    , renderAttachmentsTabBody settings model
-                    , renderIdInfo model
-                    ]
-            ]
-        ]
-
-
-
---- Helper
 
 
 actionInputDatePicker : DatePicker.Settings
@@ -194,43 +183,77 @@ renderIdInfo model =
 renderNotes : Model -> Html Msg
 renderNotes model =
     case model.notesField of
-        HideNotes ->
-            case model.item.notes of
-                Nothing ->
-                    span [ class "invisible hidden" ] []
-
-                Just _ ->
-                    div [ class "ui segment" ]
-                        [ a
-                            [ class "ui top left attached label"
-                            , onClick ToggleNotes
-                            , href "#"
-                            ]
-                            [ i [ class "eye icon" ] []
-                            , text "Show notes…"
-                            ]
-                        ]
-
         ViewNotes ->
-            case model.item.notes of
+            div [ class "ui segments" ]
-                Nothing ->
+                [ div [ class "ui segment" ]
-                    span [ class "hidden invisible" ] []
+                    [ div [ class "ui two column grid" ]
-
+                        [ div [ class "column" ]
-                Just str ->
+                            [ p [ class "ui header" ]
-                    div [ class "ui raised segment item-notes-display" ]
+                                [ text "Notes"
-                        [ Markdown.toHtml [ class "item-notes" ] str
+                                ]
-                        , a
+                            ]
-                            [ class "ui left corner label"
+                        , div [ class "right aligned column" ]
-                            , onClick ToggleNotes
+                            [ a
+                                [ class "ui basic icon link"
+                                , onClick ToggleEditNotes
                                 , href "#"
                                 ]
-                            [ i [ class "eye slash icon" ] []
+                                [ i [ class "edit icon" ] []
+                                ]
+                            ]
+                        ]
+                    ]
+                , div [ class "ui segment" ]
+                    [ Markdown.toHtml [] (Maybe.withDefault "" model.item.notes)
                     ]
                 ]
 
         EditNotes mm ->
-            div [ class "ui bottom attached segment" ]
+            let
-                [ Html.map NotesEditMsg (Comp.MarkdownInput.view (Maybe.withDefault "" model.notesModel) mm)
+                classes act =
+                    classList
+                        [ ( "item", True )
+                        , ( "active", act )
+                        ]
+            in
+            div [ class "ui segments" ]
+                [ div [ class "ui segment" ]
+                    [ div [ class "ui grid" ]
+                        [ div [ class "two wide column" ]
+                            [ p [ class "ui header" ]
+                                [ text "Notes"
+                                ]
+                            ]
+                        , div [ class "twelve wide center aligned column" ]
+                            [ div [ class "ui horizontal bulleted link list" ]
+                                [ Html.map NotesEditMsg
+                                    (Comp.MarkdownInput.viewEditLink classes mm)
+                                , Html.map NotesEditMsg
+                                    (Comp.MarkdownInput.viewPreviewLink classes mm)
+                                , Html.map NotesEditMsg
+                                    (Comp.MarkdownInput.viewSplitLink classes mm)
+                                ]
+                            ]
+                        , div [ class "right aligned two wide column" ]
+                            [ a
+                                [ classList
+                                    [ ( "ui basic icon link", True )
+                                    , ( "invisible hidden", Util.String.isNothingOrBlank model.item.notes )
+                                    ]
+                                , onClick ToggleEditNotes
+                                , href "#"
+                                ]
+                                [ i [ class "cancel icon" ] []
+                                ]
+                            ]
+                        ]
+                    ]
+                , div [ class "ui segment" ]
+                    [ Html.map NotesEditMsg
+                        (Comp.MarkdownInput.viewContent
+                            (Maybe.withDefault "" model.notesModel)
+                            mm
+                        )
                     , div [ class "ui secondary menu" ]
                         [ a
                             [ class "link item"
@@ -241,7 +264,10 @@ renderNotes model =
                             , text "Save"
                             ]
                         , a
-                        [ class "link item"
+                            [ classList
+                                [ ( "link item", True )
+                                , ( "invisible hidden", Util.String.isNothingOrBlank model.item.notes )
+                                ]
                             , href "#"
                             , onClick ToggleEditNotes
                             ]
@@ -250,6 +276,7 @@ renderNotes model =
                             ]
                         ]
                     ]
+                ]
 
 
 attachmentVisible : Model -> Int -> Bool

modules/webapp/src/main/elm/Comp/MarkdownInput.elm

@@ -4,6 +4,11 @@ module Comp.MarkdownInput exposing
     , init
     , update
     , view
+    , viewCheatLink
+    , viewContent
+    , viewEditLink
+    , viewPreviewLink
+    , viewSplitLink
     )
 
 import Html exposing (..)
@@ -26,7 +31,7 @@ type alias Model =
 
 init : Model
 init =
-    { display = Split
+    { display = Edit
     , cheatSheetUrl = "https://www.markdownguide.org/cheat-sheet"
     }
 
@@ -46,51 +51,9 @@ update txt msg model =
             ( { model | display = dsp }, txt )
 
 
-view : String -> Model -> Html Msg
+viewContent : String -> Model -> Html Msg
-view txt model =
+viewContent txt model =
-    div []
+    case model.display of
-        [ div [ class "ui top attached tabular mini menu" ]
-            [ a
-                [ classList
-                    [ ( "ui link item", True )
-                    , ( "active", model.display == Edit )
-                    ]
-                , onClick (SetDisplay Edit)
-                , href "#"
-                ]
-                [ text "Edit"
-                ]
-            , a
-                [ classList
-                    [ ( "ui link item", True )
-                    , ( "active", model.display == Preview )
-                    ]
-                , onClick (SetDisplay Preview)
-                , href "#"
-                ]
-                [ text "Preview"
-                ]
-            , a
-                [ classList
-                    [ ( "ui link item", True )
-                    , ( "active", model.display == Split )
-                    ]
-                , onClick (SetDisplay Split)
-                , href "#"
-                ]
-                [ text "Split"
-                ]
-            , a
-                [ class "ui right floated help-link link item"
-                , target "_new"
-                , href model.cheatSheetUrl
-                ]
-                [ i [ class "ui help icon" ] []
-                , text "Supports Markdown"
-                ]
-            ]
-        , div [ class "ui bottom attached segment" ]
-            [ case model.display of
         Edit ->
             editDisplay txt
 
@@ -99,6 +62,85 @@ view txt model =
 
         Split ->
             splitDisplay txt
+
+
+viewEditLink : (Bool -> Attribute Msg) -> Model -> Html Msg
+viewEditLink classes model =
+    a
+        [ onClick (SetDisplay Edit)
+        , classes (model.display == Edit)
+        , href "#"
+        ]
+        [ text "Edit"
+        ]
+
+
+viewPreviewLink : (Bool -> Attribute Msg) -> Model -> Html Msg
+viewPreviewLink classes model =
+    a
+        [ onClick (SetDisplay Preview)
+        , classes (model.display == Preview)
+        , href "#"
+        ]
+        [ text "Preview"
+        ]
+
+
+viewSplitLink : (Bool -> Attribute Msg) -> Model -> Html Msg
+viewSplitLink classes model =
+    a
+        [ onClick (SetDisplay Split)
+        , classes (model.display == Split)
+        , href "#"
+        ]
+        [ text "Split"
+        ]
+
+
+viewCheatLink : String -> Model -> Html msg
+viewCheatLink classes model =
+    a
+        [ class classes
+        , target "_new"
+        , href model.cheatSheetUrl
+        ]
+        [ i [ class "ui help icon" ] []
+        , text "Supports Markdown"
+        ]
+
+
+view : String -> Model -> Html Msg
+view txt model =
+    div []
+        [ div [ class "ui top attached tabular mini menu" ]
+            [ viewEditLink
+                (\act ->
+                    classList
+                        [ ( "ui link item", True )
+                        , ( "active", act )
+                        ]
+                )
+                model
+            , viewPreviewLink
+                (\act ->
+                    classList
+                        [ ( "ui link item", True )
+                        , ( "active", act )
+                        ]
+                )
+                model
+            , viewSplitLink
+                (\act ->
+                    classList
+                        [ ( "ui link item", True )
+                        , ( "active", act )
+                        ]
+                )
+                model
+            , viewCheatLink "ui right floated help-link link item" model
+            ]
+        , div [ class "ui bottom attached segment" ]
+            [ viewContent txt model
             ]
         ]
 
@@ -108,6 +150,7 @@ editDisplay txt =
     textarea
         [ class "markdown-editor"
         , onInput SetText
+        , placeholder "Add notes here…"
         ]
         [ text txt ]
 

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

@@ -42,6 +42,7 @@
 
 .default-layout .main-content {
     margin-top: 45px;
+    padding-bottom: 2em;
 }
 
 .default-layout .top-menu {
@@ -67,13 +68,6 @@
     width: auto;
 }
 
-.default-layout .ui.segment .item-notes {
-    padding: 0 1em;
-}
-.default-layout .ui.segment.item-notes-display {
-    background: rgba(246, 255, 158, 0.4);
-}
-
 .default-layout .extracted-text {
     font-family: monospace;
     white-space: pre-wrap;
@@ -265,7 +259,6 @@ label span.muted {
 }
 
 
-
 /* Datepicker
    From: https://github.com/CurrySoftware/elm-datepicker/blob/3.1.0/css/elm-datepicker.css
    License: BSD-3-Clause