TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-06-23 19:08:26 +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

109
modules/webapp/src/main/elm/Comp/SentMails.elm
View File

@ -6,12 +6,15 @@ module Comp.SentMails exposing
, isEmpty
, update
, view
, view2
)
import Api.Model.SentMail exposing (SentMail)
import Comp.Basic as B
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import Styles as S
import Util.Time
@ -53,6 +56,10 @@ update msg model =
{ model | selected = Just m }
--- View
view : Model -> Html Msg
view model =
case model.selected of
@ -129,3 +136,105 @@ renderLine mail =
]
, td [ class "collapsing" ] [ text mail.sender ]
]
--- View2
view2 : Model -> Html Msg
view2 model =
case model.selected of
Just mail ->
div [ class "flex flex-col" ]
[ div [ class "text-sm flex-flex-col" ]
[ div [ class "flex flex-row" ]
[ span [ class "font-bold" ]
[ text "From:"
]
, div [ class "ml-2" ]
[ text mail.sender
, text " ("
, text mail.connection
, text ")"
]
]
, div [ class "flex flex-row" ]
[ span [ class "font-bold" ]
[ text "Date:"
]
, div [ class "ml-2" ]
[ Util.Time.formatDateTime mail.created |> text
]
]
, div [ class "flex flex-row" ]
[ span [ class "font-bold" ]
[ text "Recipients:"
]
, div [ class "ml-2" ]
[ String.join ", " mail.recipients |> text
]
]
, div [ class "flex flex-row" ]
[ span [ class "font-bold" ]
[ text "Subject:"
]
, div [ class "ml-2" ]
[ text mail.subject
]
]
]
, hr [ class S.border ] []
, div [ class "py-1 whitespace-pre-wrap" ]
[ text mail.body
]
, div [ class "flex flex-row items-center border-t dark:border-bluegray-600 justify-end text-sm " ]
[ a
[ class S.secondaryBasicButton
, onClick Hide
, class "mt-1"
, href "#"
]
[ i [ class "fa fa-times" ] []
]
]
]
Nothing ->
table [ class "border-collapse w-full" ]
[ thead []
[ tr []
[ th [] []
, th [ class "text-left" ] [ text "Recipients" ]
, th [ class "hidden" ] [ text "Subject" ]
, th [ class "hidden text-center xl:table-cell" ] [ text "Sent" ]
, th [ class "hidden" ] [ text "Sender" ]
]
]
, tbody [] <|
List.map
renderLine2
model.mails
]
renderLine2 : SentMail -> Html Msg
renderLine2 mail =
tr [ class S.tableRow ]
[ td []
[ B.linkLabel
{ label = ""
, icon = "fa fa-eye"
, handler = Show mail
, disabled = False
}
]
, td [ class "text-left py-4 md:py-2" ]
[ String.join ", " mail.recipients |> text
]
, td [ class "hidden" ] [ text mail.subject ]
, td [ class "hidden text-center xl:table-cell" ]
[ Util.Time.formatDateTime mail.created |> text
]
, td [ class "hidden" ] [ text mail.sender ]
]