TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-04-02 09:05:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make notes below the files view and always visible

Browse Source 
It looks similiar to github's readme. If there are no notes, the form
is displayed.
This commit is contained in:
Eike Kettner 2020-08-05 19:15:34 +02:00
parent 1662e1e2c8
commit 0453494cc6
6 changed files with 271 additions and 221 deletions
modules/webapp/src/main
elm
App
View.elm
Comp
ItemDetail
Model.elmUpdate.elmView.elm
MarkdownInput.elm
webjar
docspell.css

20
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 ")"
]
]
]

4
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 =

25
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 )

295
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"
]
]
]
]

139
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 ]

9
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