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

@ -4,11 +4,13 @@ module Comp.PasswordInput exposing
, init
, update
, view
, view2
)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)
import Styles as S
import Util.Maybe
@ -72,3 +74,58 @@ view pw model =
]
[]
]
--- View2
view2 : Maybe String -> Bool -> Model -> Html Msg
view2 pw isError model =
div [ class "relative" ]
[ div [ class S.inputIcon ]
[ i
[ class "fa"
, if model.show then
class "fa-lock-open"
else
class "fa-lock"
]
[]
]
, input
[ type_ <|
if model.show then
"text"
else
"password"
, name "passw1"
, autocomplete False
, onInput SetPassword
, Maybe.withDefault "" pw |> value
, class ("pl-10 pr-10 py-2 rounded" ++ S.textInput)
, class <|
if isError then
S.inputErrorBorder
else
""
, placeholder "Password"
]
[]
, a
[ class S.inputLeftIconLink
, class <|
if isError then
S.inputErrorBorder
else
""
, onClick (ToggleShow pw)
, href "#"
]
[ i [ class "fa fa-eye" ] []
]
]