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

@@ -7,18 +7,22 @@ module Comp.PersonForm exposing
, update
, view
, view1
, view2
)
import Api.Model.IdName exposing (IdName)
import Api.Model.Person exposing (Person)
import Comp.AddressForm
import Comp.Basic as B
import Comp.ContactField
import Comp.Dropdown
import Data.DropdownStyle as DS
import Data.Flags exposing (Flags)
import Data.UiSettings exposing (UiSettings)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onCheck, onInput)
import Styles as S
type alias Model =
@@ -215,3 +219,94 @@ view1 settings compact model =
[]
]
]
--- View2
view2 : Bool -> UiSettings -> Model -> Html Msg
view2 mobile settings model =
div [ class "flex flex-col" ]
[ div
[ class "mb-4"
]
[ label
[ class S.inputLabel
, for "personname"
]
[ text "Name"
, B.inputRequired
]
, input
[ type_ "text"
, onInput SetName
, placeholder "Name"
, value model.name
, class S.textInput
, classList
[ ( S.inputErrorBorder, not (isValid model) )
]
, name "personname"
]
[]
]
, div [ class "mb-4" ]
[ label
[ class "inline-flex items-center"
, for "concerning"
]
[ input
[ type_ "checkbox"
, checked model.concerning
, onCheck SetConcerning
, class S.checkboxInput
, name "concerning"
, id "concerning"
]
[]
, span [ class "ml-2" ]
[ text "Use for concerning person suggestion only"
]
]
]
, div [ class "mb-4" ]
[ label
[ class S.inputLabel
]
[ text "Organization"
]
, Html.map OrgDropdownMsg
(Comp.Dropdown.view2
DS.mainStyle
settings
model.orgModel
)
]
, div [ class "mb-4" ]
[ h3 [ class "ui dividing header" ]
[ text "Address"
]
, Html.map AddressMsg (Comp.AddressForm.view2 settings model.addressModel)
]
, div [ class "mb-4" ]
[ h3 [ class S.header3 ]
[ text "Contacts"
]
, Html.map ContactMsg
(Comp.ContactField.view2 mobile settings model.contactModel)
]
, div [ class "mb-4" ]
[ h3 [ class S.header3 ]
[ text "Notes"
]
, div [ class "" ]
[ textarea
[ onInput SetNotes
, Maybe.withDefault "" model.notes |> value
, class S.textAreaInput
]
[]
]
]
]