TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-06-22 10:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

First version of new ui based on tailwind

Browse Source 
This drops fomantic-ui as css toolkit and introduces tailwindcss. With
tailwind there are no predefined components, but it's very easy to
create those. So customizing the look&feel is much simpler, most of
the time no additional css is needed.

This requires a complete rewrite of the markup + styles. Luckily all
logic can be kept as is. The now old ui is not removed, it is still
available by using a request header `Docspell-Ui` with a value of `1`
for the old ui and `2` for the new ui.

Another addition is "dev mode", where docspell serves assets with a
no-cache header, to disable browser caching. This makes developing a
lot easier.
This commit is contained in:
Eike Kettner
2021-01-29 20:48:27 +01:00
parent 442b76c5af
commit dd935454c9
140 changed files with 15077 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
modules/webapp/src/main/elm/Comp/ItemDetail/Notes.elm Normal file
View File

@ -0,0 +1,101 @@
module Comp.ItemDetail.Notes exposing (view)
import Comp.ItemDetail.Model
exposing
( Model
, Msg(..)
, NotesField(..)
, SaveNameState(..)
)
import Comp.MarkdownInput
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import Markdown
import Page exposing (Page(..))
import Styles as S
import Util.String
view : Model -> Html Msg
view model =
case model.notesField of
ViewNotes ->
div [ class "flex flex-col ds-item-detail-notes" ]
[ div [ class "flex flex-row items-center border-b dark:border-bluegray-600" ]
[ div [ class "flex-grow font-bold text-lg" ]
[ text "Notes"
]
, div [ class "" ]
[ a
[ class S.link
, onClick ToggleEditNotes
, href "#"
]
[ i [ class "fa fa-edit mr-2" ] []
, text "Edit"
]
]
]
, div [ class "" ]
[ Markdown.toHtml [ class "markdown-preview" ]
(Maybe.withDefault "" model.item.notes)
]
]
EditNotes mm ->
let
classes act =
classList
[ ( "opacity-100", act )
, ( "opacity-50", not act )
]
in
div [ class "flex flex-col ds-item-detail-notes" ]
[ div [ class "flex flex-col" ]
[ div [ class "flex flex-row items-center" ]
[ div [ class "font-bold text-lg" ]
[ text "Notes"
]
, div [ class "flex flex-grow justify-end text-sm" ]
[ Html.map NotesEditMsg
(Comp.MarkdownInput.viewEditLink2 classes mm)
, span [ class "px-3" ] [ text "•" ]
, Html.map NotesEditMsg
(Comp.MarkdownInput.viewPreviewLink2 classes mm)
]
]
]
, div [ class "flex flex-col h-64" ]
[ Html.map NotesEditMsg
(Comp.MarkdownInput.viewContent2
(Maybe.withDefault "" model.notesModel)
mm
)
, div [ class "text-sm flex justify-end" ]
[ Comp.MarkdownInput.viewCheatLink2 S.link mm
]
, div [ class "flex flex-row mt-1" ]
[ a
[ class S.primaryButton
, href "#"
, onClick SaveNotes
]
[ i [ class "fa fa-save font-thin mr-2" ] []
, text "Save"
]
, a
[ classList
[ ( "invisible hidden", Util.String.isNothingOrBlank model.item.notes )
]
, class S.secondaryButton
, class "ml-2"
, href "#"
, onClick ToggleEditNotes
]
[ i [ class "fa fa-times mr-2" ] []
, text "Cancel"
]
]
]
]