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

@ -5,6 +5,7 @@ module Comp.FolderManage exposing
, init
, update
, view
, view2
)
import Api
@ -15,11 +16,13 @@ import Api.Model.User exposing (User)
import Api.Model.UserList exposing (UserList)
import Comp.FolderDetail
import Comp.FolderTable
import Comp.MenuBar as MB
import Data.Flags exposing (Flags)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onCheck, onClick, onInput)
import Http
import Styles as S
type alias Model =
@ -235,3 +238,77 @@ viewTable model =
[ div [ class "ui loader" ] []
]
]
--- View2
view2 : Flags -> Model -> Html Msg
view2 flags model =
case model.detailModel of
Just dm ->
viewDetail2 flags dm
Nothing ->
viewTable2 model
viewDetail2 : Flags -> Comp.FolderDetail.Model -> Html Msg
viewDetail2 flags model =
div []
[ if model.folder.id == "" then
h3 [ class S.header2 ]
[ text "Create new Folder"
]
else
h3 [ class S.header2 ]
[ text model.folder.name
, div [ class "opacity-50 text-sm" ]
[ text "Id: "
, text model.folder.id
]
]
, Html.map DetailMsg (Comp.FolderDetail.view2 flags model)
]
viewTable2 : Model -> Html Msg
viewTable2 model =
div [ class "flex flex-col" ]
[ MB.view
{ start =
[ MB.TextInput
{ tagger = SetQuery
, value = model.query
, placeholder = "Search"
, icon = Just "fa fa-search"
}
, MB.Checkbox
{ tagger = \_ -> ToggleOwningOnly
, label = "Show owning folders only"
, value = model.owningOnly
, id = "folder-toggle-owner"
}
]
, end =
[ MB.PrimaryButton
{ tagger = InitNewFolder
, title = "Create a new folder"
, icon = Just "fa fa-plus"
, label = "New Folder"
}
]
, rootClasses = "mb-4"
}
, Html.map TableMsg (Comp.FolderTable.view2 model.tableModel model.folders)
, div
[ classList
[ ( "ui dimmer", True )
, ( "active", model.loading )
]
]
[ div [ class "ui loader" ] []
]
]