First version of new ui based on tailwind

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

View File

@ -3,13 +3,16 @@ module Comp.LinkTarget exposing
, makeConcLink
, makeCorrLink
, makeCustomFieldLink
, makeCustomFieldLink2
, makeFolderLink
, makeSourceLink
, makeTagIconLink
, makeTagLink
)
import Api.Model.IdName exposing (IdName)
import Api.Model.ItemFieldValue exposing (ItemFieldValue)
import Api.Model.Tag exposing (Tag)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
@ -30,42 +33,45 @@ type LinkTarget
makeCorrLink :
{ a | corrOrg : Maybe IdName, corrPerson : Maybe IdName }
-> List ( String, Bool )
-> (LinkTarget -> msg)
-> List (Html msg)
makeCorrLink item tagger =
makeCorrLink item linkClasses tagger =
let
makeOrg idname =
makeLink [] (LinkCorrOrg >> tagger) idname
makeLink linkClasses (LinkCorrOrg >> tagger) idname
makePerson idname =
makeLink [] (LinkCorrPerson >> tagger) idname
makeLink linkClasses (LinkCorrPerson >> tagger) idname
in
combine (Maybe.map makeOrg item.corrOrg) (Maybe.map makePerson item.corrPerson)
makeConcLink :
{ a | concPerson : Maybe IdName, concEquipment : Maybe IdName }
-> List ( String, Bool )
-> (LinkTarget -> msg)
-> List (Html msg)
makeConcLink item tagger =
makeConcLink item linkClasses tagger =
let
makePerson idname =
makeLink [] (LinkConcPerson >> tagger) idname
makeLink linkClasses (LinkConcPerson >> tagger) idname
makeEquip idname =
makeLink [] (LinkConcEquip >> tagger) idname
makeLink linkClasses (LinkConcEquip >> tagger) idname
in
combine (Maybe.map makePerson item.concPerson) (Maybe.map makeEquip item.concEquipment)
makeFolderLink :
{ a | folder : Maybe IdName }
-> List ( String, Bool )
-> (LinkTarget -> msg)
-> Html msg
makeFolderLink item tagger =
makeFolderLink item linkClasses tagger =
let
makeFolder idname =
makeLink [] (LinkFolder >> tagger) idname
makeLink linkClasses (LinkFolder >> tagger) idname
in
Maybe.map makeFolder item.folder
|> Maybe.withDefault (text "-")
@ -77,7 +83,17 @@ makeTagLink :
-> (LinkTarget -> msg)
-> Html msg
makeTagLink tagId classes tagger =
makeLink classes (LinkTag >> tagger) tagId
makeIconLink (i [ class "fa fa-tag mr-2" ] []) classes (LinkTag >> tagger) tagId
makeTagIconLink :
Tag
-> Html msg
-> List ( String, Bool )
-> (LinkTarget -> msg)
-> Html msg
makeTagIconLink tagId icon classes tagger =
makeIconLink icon classes (LinkTag >> tagger) tagId
makeCustomFieldLink :
@ -92,6 +108,18 @@ makeCustomFieldLink cv classes tagger =
cv
makeCustomFieldLink2 :
ItemFieldValue
-> List ( String, Bool )
-> (LinkTarget -> msg)
-> Html msg
makeCustomFieldLink2 cv classes tagger =
Util.CustomField.renderValue2
classes
(tagger (LinkCustomField cv) |> Just)
cv
makeSourceLink :
List ( String, Bool )
-> (LinkTarget -> msg)
@ -130,3 +158,22 @@ makeLink classes tagger idname =
]
[ text idname.name
]
makeIconLink :
Html msg
-> List ( String, Bool )
-> (IdName -> msg)
-> { x | id : String, name : String }
-> Html msg
makeIconLink icon classes tagger tag =
a
[ onClick (tagger (IdName tag.id tag.name))
, href "#"
, classList classes
]
[ icon
, span []
[ text tag.name
]
]