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

@ -1,40 +1,70 @@
module Data.Icons exposing
( addFiles
, addFiles2
, addFilesIcon
, addFilesIcon2
, concerned
, concerned2
, concernedIcon
, concernedIcon2
, correspondent
, correspondent2
, correspondentIcon
, correspondentIcon2
, customField
, customField2
, customFieldIcon
, customFieldIcon2
, customFieldType
, customFieldType2
, customFieldTypeIcon
, customFieldTypeIconString
, customFieldTypeIconString2
, date
, date2
, dateIcon
, dateIcon2
, direction
, direction2
, directionIcon
, directionIcon2
, dueDate
, dueDate2
, dueDateIcon
, dueDateIcon2
, editNotes
, editNotesIcon
, equipment
, equipment2
, equipmentIcon
, equipmentIcon2
, folder
, folder2
, folderIcon
, folderIcon2
, itemDatesIcon
, organization
, organization2
, organizationIcon
, organizationIcon2
, person
, person2
, personIcon
, personIcon2
, search
, searchIcon
, source
, source2
, sourceIcon
, sourceIcon2
, tag
, tag2
, tagIcon
, tagIcon2
, tags
, tags2
, tagsIcon
, tagsIcon2
)
import Data.CustomFieldType exposing (CustomFieldType)
@ -47,11 +77,21 @@ source =
"upload icon"
source2 : String
source2 =
"fa fa-upload"
sourceIcon : String -> Html msg
sourceIcon classes =
i [ class (source ++ " " ++ classes) ] []
sourceIcon2 : String -> Html msg
sourceIcon2 classes =
i [ class (source2 ++ " " ++ classes) ] []
customFieldType : CustomFieldType -> String
customFieldType ftype =
case ftype of
@ -71,12 +111,37 @@ customFieldType ftype =
"money bill icon"
customFieldType2 : CustomFieldType -> String
customFieldType2 ftype =
case ftype of
Data.CustomFieldType.Text ->
"fa fa-stream"
Data.CustomFieldType.Numeric ->
"fa fa-hashtag"
Data.CustomFieldType.Date ->
"fa fa-calendar"
Data.CustomFieldType.Boolean ->
"fa fa-marker"
Data.CustomFieldType.Money ->
"fa fa-money-bill"
customFieldTypeIcon : String -> CustomFieldType -> Html msg
customFieldTypeIcon classes ftype =
i [ class (customFieldType ftype ++ " " ++ classes) ]
[]
customFieldTypeIcon2 : String -> CustomFieldType -> Html msg
customFieldTypeIcon2 classes ftype =
i [ class (customFieldType2 ftype ++ " " ++ classes) ]
[]
customFieldTypeIconString : String -> String -> Html msg
customFieldTypeIconString classes ftype =
Data.CustomFieldType.fromString ftype
@ -84,16 +149,33 @@ customFieldTypeIconString classes ftype =
|> Maybe.withDefault (i [ class "question circle outline icon" ] [])
customFieldTypeIconString2 : String -> String -> Html msg
customFieldTypeIconString2 classes ftype =
Data.CustomFieldType.fromString ftype
|> Maybe.map (customFieldTypeIcon2 classes)
|> Maybe.withDefault (i [ class "question circle outline icon" ] [])
customField : String
customField =
"highlighter icon"
customField2 : String
customField2 =
"fa fa-highlighter"
customFieldIcon : String -> Html msg
customFieldIcon classes =
i [ class (customField ++ " " ++ classes) ] []
customFieldIcon2 : String -> Html msg
customFieldIcon2 classes =
i [ class (customField2 ++ " " ++ classes) ] []
search : String
search =
"search icon"
@ -109,11 +191,21 @@ folder =
"folder outline icon"
folder2 : String
folder2 =
"fa fa-folder font-thin "
folderIcon : String -> Html msg
folderIcon classes =
i [ class (folder ++ " " ++ classes) ] []
folderIcon2 : String -> Html msg
folderIcon2 classes =
i [ class (folder2 ++ " " ++ classes) ] []
concerned : String
concerned =
"crosshairs icon"
@ -124,6 +216,20 @@ concernedIcon =
i [ class concerned ] []
concerned2 : String
concerned2 =
"fa fa-crosshairs"
concernedIcon2 : String -> Html msg
concernedIcon2 classes =
i
[ class concerned2
, class classes
]
[]
correspondent : String
correspondent =
"address card outline icon"
@ -134,6 +240,16 @@ correspondentIcon classes =
i [ class (correspondent ++ " " ++ classes) ] []
correspondent2 : String
correspondent2 =
"fa fa-address-card font-thin"
correspondentIcon2 : String -> Html msg
correspondentIcon2 classes =
i [ class (correspondent2 ++ " " ++ classes) ] []
itemDates : String
itemDates =
"calendar alternate outline icon"
@ -158,6 +274,16 @@ dateIcon classes =
i [ class (date ++ " " ++ classes) ] []
date2 : String
date2 =
"fa fa-calendar font-thin"
dateIcon2 : String -> Html msg
dateIcon2 classes =
i [ class (date2 ++ " " ++ classes) ] []
dueDate : String
dueDate =
"bell icon"
@ -168,6 +294,16 @@ dueDateIcon classes =
i [ class (dueDate ++ " " ++ classes) ] []
dueDate2 : String
dueDate2 =
"fa fa-bell"
dueDateIcon2 : String -> Html msg
dueDateIcon2 classes =
i [ class (dueDate2 ++ " " ++ classes) ] []
editNotes : String
editNotes =
"comment alternate outline icon"
@ -183,21 +319,41 @@ addFiles =
"file plus icon"
addFiles2 : String
addFiles2 =
"fa fa-file-upload"
addFilesIcon : Html msg
addFilesIcon =
i [ class addFiles ] []
addFilesIcon2 : String -> Html msg
addFilesIcon2 classes =
i [ class addFiles2, class classes ] []
tag : String
tag =
"tag icon"
tag2 : String
tag2 =
"fa fa-tag"
tagIcon : String -> Html msg
tagIcon classes =
i [ class (tag ++ " " ++ classes) ] []
tagIcon2 : String -> Html msg
tagIcon2 classes =
i [ class (tag2 ++ " " ++ classes) ] []
tags : String
tags =
"tags icon"
@ -208,6 +364,16 @@ tagsIcon classes =
i [ class (tags ++ " " ++ classes) ] []
tags2 : String
tags2 =
"fa fa-tags"
tagsIcon2 : String -> Html msg
tagsIcon2 classes =
i [ class (tags2 ++ " " ++ classes) ] []
direction : String
direction =
"exchange icon"
@ -218,31 +384,71 @@ directionIcon classes =
i [ class (direction ++ " " ++ classes) ] []
direction2 : String
direction2 =
"fa fa-exchange-alt"
directionIcon2 : String -> Html msg
directionIcon2 classes =
i [ class (direction2 ++ " " ++ classes) ] []
person : String
person =
"user icon"
person2 : String
person2 =
"fa fa-user"
personIcon : String -> Html msg
personIcon classes =
i [ class (person ++ " " ++ classes) ] []
personIcon2 : String -> Html msg
personIcon2 classes =
i [ class (person2 ++ " " ++ classes) ] []
organization : String
organization =
"factory icon"
organization2 : String
organization2 =
"fa fa-industry"
organizationIcon : String -> Html msg
organizationIcon classes =
i [ class (organization ++ " " ++ classes) ] []
organizationIcon2 : String -> Html msg
organizationIcon2 classes =
i [ class (organization2 ++ " " ++ classes) ] []
equipment : String
equipment =
"box icon"
equipment2 : String
equipment2 =
"fa fa-box"
equipmentIcon : String -> Html msg
equipmentIcon classes =
i [ class (equipment ++ " " ++ classes) ] []
equipmentIcon2 : String -> Html msg
equipmentIcon2 classes =
i [ class (equipment2 ++ " " ++ classes) ] []