TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-06-23 02:48:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

First version of new ui based on tailwind

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

171
modules/webapp/src/main/elm/Comp/CalEventInput.elm
View File

@ -5,6 +5,7 @@ module Comp.CalEventInput exposing
, initDefault
, update
, view
, view2
)
import Api
@ -17,6 +18,7 @@ import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import Http
import Styles as S
import Util.Http
import Util.Maybe
import Util.Time
@ -124,6 +126,10 @@ update flags ev msg model =
( m, Cmd.none, Unknown event )
--- View
view : String -> CalEvent -> Model -> Html Msg
view extraClasses ev model =
let
@ -265,3 +271,168 @@ view extraClasses ev model =
]
]
]
--- View2
view2 : String -> CalEvent -> Model -> Html Msg
view2 extraClasses ev model =
let
yearLen =
Basics.max 4 (String.length ev.year)
otherLen str =
Basics.max 2 (String.length str)
styleInput =
"border-0 border-b rounded-l-none rounded-r-none text-center px-1"
in
div
[ classList
[ ( extraClasses, True )
]
, class "flex flex-col"
]
[ div
[ class "flex flex-row items-center border px-2 py-2 text-center"
, class S.border
]
[ div [ class "flex flex-col space-y-2 mr-2" ]
[ label
[ class S.inputLabel
]
[ text "Weekday" ]
, input
[ type_ "text"
, class S.textInput
, class styleInput
, size
(Maybe.map otherLen ev.weekday
|> Maybe.withDefault 4
)
, Maybe.withDefault "" ev.weekday
|> value
, onInput SetWeekday
]
[]
]
, div [ class "flex flex-col space-y-2 mr-2" ]
[ label [ class S.inputLabel ]
[ text "Year" ]
, input
[ type_ "text"
, class S.textInput
, class styleInput
, size yearLen
, value ev.year
, onInput SetYear
]
[]
]
, div [ class "mt-6 mr-2" ]
[ text "–"
]
, div [ class "flex flex-col space-y-2 mr-2" ]
[ label [ class S.inputLabel ]
[ text "Month" ]
, input
[ type_ "text"
, class styleInput
, class S.textInput
, size (otherLen ev.month)
, value ev.month
, onInput SetMonth
]
[]
]
, div [ class "mt-6" ]
[ text "–"
]
, div [ class "flex flex-col space-y-2 mr-4 mr-2" ]
[ label [ class S.inputLabel ]
[ text "Day"
]
, input
[ type_ "text"
, class S.textInput
, class styleInput
, size (otherLen ev.day)
, value ev.day
, onInput SetDay
]
[]
]
, div [ class "flex flex-col space-y-2 mr-2" ]
[ label [ class S.inputLabel ]
[ text "Hour" ]
, input
[ type_ "text"
, class styleInput
, class S.textInput
, size (otherLen ev.hour)
, value ev.hour
, onInput SetHour
]
[]
]
, div [ class "mt-6 mr-2" ]
[ text ":"
]
, div [ class "flex flex-col space-y-2" ]
[ label [ class S.inputLabel ]
[ text "Minute"
]
, input
[ type_ "text"
, class S.textInput
, class styleInput
, size (otherLen ev.minute)
, value ev.minute
, onInput SetMinute
]
[]
]
]
, div
[ classList
[ ( "hidden invisible", not (isCheckError model) )
]
, class S.errorMessage
]
[ text "Error: "
, Maybe.map .message model.checkResult
|> Maybe.withDefault ""
|> text
]
, div
[ classList
[ ( "hidden1"
, model.checkResult == Nothing || isCheckError model
)
]
, class "px-2 pt-4 pb-2 border-0 border-l border-b border-r bg-gray-50 dark:bg-bluegray-700"
, class S.border
]
[ div []
[ div [ class S.inputLabel ]
[ text "Schedule: "
]
, div [ class "px-12 font-mono " ]
[ Maybe.andThen .event model.checkResult
|> Maybe.withDefault ""
|> text
]
, div [ class S.inputLabel ]
[ text "Next: "
]
, ul [ class "list-decimal list-inside text-sm" ]
(Maybe.map .next model.checkResult
|> Maybe.withDefault []
|> List.map Util.Time.formatDateTime
|> List.map (\s -> li [ class "" ] [ text s ])
)
]
]
]