From 0453494cc69fd684709306343802e419d272870a Mon Sep 17 00:00:00 2001 From: Eike Kettner Date: Wed, 5 Aug 2020 19:15:34 +0200 Subject: [PATCH] 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 | 20 +- .../src/main/elm/Comp/ItemDetail/Model.elm | 4 - .../src/main/elm/Comp/ItemDetail/Update.elm | 25 +- .../src/main/elm/Comp/ItemDetail/View.elm | 295 ++++++++++-------- .../src/main/elm/Comp/MarkdownInput.elm | 139 ++++++--- modules/webapp/src/main/webjar/docspell.css | 9 +- 6 files changed, 271 insertions(+), 221 deletions(-) diff --git a/modules/webapp/src/main/elm/App/View.elm b/modules/webapp/src/main/elm/App/View.elm index e33feb29..6906fd2f 100644 --- a/modules/webapp/src/main/elm/App/View.elm +++ b/modules/webapp/src/main/elm/App/View.elm @@ -305,14 +305,16 @@ loginInfo model = footer : Model -> Html Msg footer model = div [ class "ui footer" ] - [ a [ href "https://github.com/eikek/docspell" ] - [ i [ class "ui github icon" ] [] - ] - , span [] - [ text "Docspell " - , text model.version.version - , text " (#" - , String.left 8 model.version.gitCommit |> text - , text ")" + [ div [ class "ui center aligned container" ] + [ a [ href "https://github.com/eikek/docspell" ] + [ i [ class "ui github icon" ] [] + ] + , span [] + [ text "Docspell " + , text model.version.version + , text " (#" + , String.left 8 model.version.gitCommit |> text + , text ")" + ] ] ] diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/Model.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/Model.elm index 2af30f33..1393e707 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail/Model.elm +++ b/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 = diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm index 842c9052..6dbd807f 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm +++ b/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 ) diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm index c1cc5900..a28bbdc8 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm +++ b/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm @@ -39,97 +39,9 @@ view inav settings model = div [] [ Html.map ModalEditMsg (Comp.DetailEdit.viewModal settings model.modalEdit) , renderItemInfo settings model - , div - [ classList - [ ( "ui ablue-comp menu", True ) - , ( "top attached" - , model.mailOpen - || model.addFilesOpen - || isEditNotes model.notesField - ) - ] - ] - [ a [ class "item", Page.href HomePage ] - [ i [ class "arrow left icon" ] [] - ] - , a - [ classList - [ ( "item", True ) - , ( "disabled", inav.prev == Nothing ) - ] - , Maybe.map ItemDetailPage inav.prev - |> Maybe.map Page.href - |> Maybe.withDefault (href "#") - ] - [ i [ class "caret square left outline icon" ] [] - ] - , a - [ classList - [ ( "item", True ) - , ( "disabled", inav.next == Nothing ) - ] - , Maybe.map ItemDetailPage inav.next - |> Maybe.map Page.href - |> Maybe.withDefault (href "#") - ] - [ i [ class "caret square right outline icon" ] [] - ] - , a - [ classList - [ ( "toggle item", True ) - , ( "active", model.menuOpen ) - ] - , title "Edit Metadata" - , onClick ToggleMenu - , href "" - ] - [ i [ class "edit icon" ] [] - ] - , a - [ classList - [ ( "toggle item", True ) - , ( "active", model.mailOpen ) - ] - , title "Send Mail" - , onClick ToggleMail - , href "#" - ] - [ 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 ) - , ( "active", model.addFilesOpen ) - ] - , if model.addFilesOpen then - title "Close" - - else - title "Add Files" - , onClick AddFilesToggle - , href "#" - ] - [ Icons.addFilesIcon - ] - ] + , renderDetailMenu inav model , renderMailForm settings model , renderAddFilesForm model - , renderNotes model , div [ class "ui grid" ] [ Html.map DeleteItemConfirm (Comp.YesNoDimmer.view model.deleteItemConfirm) , div @@ -156,6 +68,7 @@ view inav settings model = [ [ renderAttachmentsTabMenu model ] , renderAttachmentsTabBody settings model + , [ renderNotes model ] , renderIdInfo model ] ] @@ -166,6 +79,82 @@ view inav settings 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 + ) + ] + ] + [ a [ class "item", Page.href HomePage ] + [ i [ class "arrow left icon" ] [] + ] + , a + [ classList + [ ( "item", True ) + , ( "disabled", inav.prev == Nothing ) + ] + , Maybe.map ItemDetailPage inav.prev + |> Maybe.map Page.href + |> Maybe.withDefault (href "#") + ] + [ i [ class "caret square left outline icon" ] [] + ] + , a + [ classList + [ ( "item", True ) + , ( "disabled", inav.next == Nothing ) + ] + , Maybe.map ItemDetailPage inav.next + |> Maybe.map Page.href + |> Maybe.withDefault (href "#") + ] + [ i [ class "caret square right outline icon" ] [] + ] + , a + [ classList + [ ( "toggle item", True ) + , ( "active", model.menuOpen ) + ] + , title "Edit Metadata" + , onClick ToggleMenu + , href "" + ] + [ i [ class "edit icon" ] [] + ] + , a + [ classList + [ ( "toggle item", True ) + , ( "active", model.mailOpen ) + ] + , title "Send Mail" + , onClick ToggleMail + , href "#" + ] + [ i [ class "mail outline icon" ] [] + ] + , a + [ classList + [ ( "toggle item", True ) + , ( "active", model.addFilesOpen ) + ] + , if model.addFilesOpen then + title "Close" + + else + title "Add Files" + , onClick AddFilesToggle + , href "#" + ] + [ Icons.addFilesIcon + ] + ] + + actionInputDatePicker : DatePicker.Settings actionInputDatePicker = let @@ -194,59 +183,97 @@ 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 - Nothing -> - span [ class "hidden invisible" ] [] - - Just str -> - div [ class "ui raised segment item-notes-display" ] - [ Markdown.toHtml [ class "item-notes" ] str - , a - [ class "ui left corner label" - , onClick ToggleNotes - , href "#" + div [ class "ui segments" ] + [ div [ class "ui segment" ] + [ div [ class "ui two column grid" ] + [ div [ class "column" ] + [ p [ class "ui header" ] + [ text "Notes" + ] ] - [ i [ class "eye slash icon" ] [] + , div [ class "right aligned column" ] + [ a + [ class "ui basic icon link" + , onClick ToggleEditNotes + , href "#" + ] + [ i [ class "edit icon" ] [] + ] ] ] + ] + , div [ class "ui segment" ] + [ Markdown.toHtml [] (Maybe.withDefault "" model.item.notes) + ] + ] EditNotes mm -> - div [ class "ui bottom attached segment" ] - [ Html.map NotesEditMsg (Comp.MarkdownInput.view (Maybe.withDefault "" model.notesModel) mm) - , div [ class "ui secondary menu" ] - [ a - [ class "link item" - , href "#" - , onClick SaveNotes + let + classes act = + classList + [ ( "item", True ) + , ( "active", act ) ] - [ i [ class "save outline icon" ] [] - , text "Save" + 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" ] [] + ] + ] ] - , a - [ class "link item" - , href "#" - , onClick ToggleEditNotes - ] - [ i [ class "cancel icon" ] [] - , text "Cancel" + ] + , div [ class "ui segment" ] + [ Html.map NotesEditMsg + (Comp.MarkdownInput.viewContent + (Maybe.withDefault "" model.notesModel) + mm + ) + , div [ class "ui secondary menu" ] + [ a + [ class "link item" + , href "#" + , onClick SaveNotes + ] + [ i [ class "save outline icon" ] [] + , text "Save" + ] + , a + [ classList + [ ( "link item", True ) + , ( "invisible hidden", Util.String.isNothingOrBlank model.item.notes ) + ] + , href "#" + , onClick ToggleEditNotes + ] + [ i [ class "cancel icon" ] [] + , text "Cancel" + ] ] ] ] diff --git a/modules/webapp/src/main/elm/Comp/MarkdownInput.elm b/modules/webapp/src/main/elm/Comp/MarkdownInput.elm index 4439c0a5..322ec1aa 100644 --- a/modules/webapp/src/main/elm/Comp/MarkdownInput.elm +++ b/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,59 +51,96 @@ update txt msg model = ( { model | display = dsp }, txt ) +viewContent : String -> Model -> Html Msg +viewContent txt model = + case model.display of + Edit -> + editDisplay txt + + Preview -> + previewDisplay txt + + 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" ] - [ 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" - ] + [ 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" ] - [ case model.display of - Edit -> - editDisplay txt - - Preview -> - previewDisplay txt - - Split -> - splitDisplay txt + [ viewContent txt model ] ] @@ -108,6 +150,7 @@ editDisplay txt = textarea [ class "markdown-editor" , onInput SetText + , placeholder "Add notes here…" ] [ text txt ] diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css index 630523c5..901b7d09 100644 --- a/modules/webapp/src/main/webjar/docspell.css +++ b/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