Introduce fomantic-ui, replacing semantic-ui

Replaced semantic-ui with the drop-in replacement fomantic-ui [0]
which is a maintained fork. The fomantic-ui used here is a custom
build [1] of the less-version _without_ google-fonts (css-only). The
javascript part of fomantic-ui is not used, and also jquery could be
dropped now.

[0] https://fomantic-ui.com
[1] https://github.com/eikek/fomantic-slim-default

Issue: #349
This commit is contained in:
Eike Kettner 2020-11-05 22:36:28 +01:00
parent d79955d574
commit 59dfae6a49
14 changed files with 157 additions and 84 deletions

View File

@ -138,12 +138,10 @@ object TemplateRoutes {
IndexData( IndexData(
Flags(cfg), Flags(cfg),
Seq( Seq(
"/app/assets" + Webjars.semanticui + "/semantic.min.css", "/app/assets" + Webjars.fomanticslimdefault + "/semantic.min.css",
s"/app/assets/docspell-webapp/${BuildInfo.version}/docspell.css" s"/app/assets/docspell-webapp/${BuildInfo.version}/docspell.css"
), ),
Seq( Seq(
"/app/assets" + Webjars.jquery + "/jquery.min.js",
"/app/assets" + Webjars.semanticui + "/semantic.min.js",
"/app/assets" + Webjars.clipboardjs + "/clipboard.min.js", "/app/assets" + Webjars.clipboardjs + "/clipboard.min.js",
s"/app/assets/docspell-webapp/${BuildInfo.version}/docspell-app.js" s"/app/assets/docspell-webapp/${BuildInfo.version}/docspell-app.js"
), ),

View File

@ -207,6 +207,7 @@ loginInfo model =
[ classList [ classList
[ ( "left menu", True ) [ ( "left menu", True )
, ( "transition visible", model.navMenuOpen ) , ( "transition visible", model.navMenuOpen )
, ( "transition hidden", not model.navMenuOpen )
] ]
] ]
[ menuEntry model [ menuEntry model

View File

@ -83,7 +83,7 @@ type alias Model =
, selectedFiles : List File , selectedFiles : List File
, completed : Set String , completed : Set String
, errored : Set String , errored : Set String
, loading : Set String , loading : Dict String Int
, attachDD : DD.Model String String , attachDD : DD.Model String String
, modalEdit : Maybe Comp.DetailEdit.Model , modalEdit : Maybe Comp.DetailEdit.Model
, attachRename : Maybe AttachmentRename , attachRename : Maybe AttachmentRename
@ -184,7 +184,7 @@ emptyModel =
, selectedFiles = [] , selectedFiles = []
, completed = Set.empty , completed = Set.empty
, errored = Set.empty , errored = Set.empty
, loading = Set.empty , loading = Dict.empty
, attachDD = DD.init , attachDD = DD.init
, modalEdit = Nothing , modalEdit = Nothing
, attachRename = Nothing , attachRename = Nothing

View File

@ -886,7 +886,7 @@ update key flags inav settings msg model =
, addFilesModel = Comp.Dropzone.init Comp.Dropzone.defaultSettings , addFilesModel = Comp.Dropzone.init Comp.Dropzone.defaultSettings
, completed = Set.empty , completed = Set.empty
, errored = Set.empty , errored = Set.empty
, loading = Set.empty , loading = Dict.empty
} }
, Cmd.none , Cmd.none
) )
@ -904,8 +904,12 @@ update key flags inav settings msg model =
( cm2, _, _ ) = ( cm2, _, _ ) =
Comp.Dropzone.update (Comp.Dropzone.setActive False) model.addFilesModel Comp.Dropzone.update (Comp.Dropzone.setActive False) model.addFilesModel
newLoading =
List.map (\fid -> ( fid, 0 )) fileids
|> Dict.fromList
in in
( { model | loading = Set.fromList fileids, addFilesModel = cm2 } ( { model | loading = newLoading, addFilesModel = cm2 }
, uploads , uploads
, tracker , tracker
) )
@ -927,14 +931,18 @@ update key flags inav settings msg model =
model.errored model.errored
load = load =
Set.remove fileid model.loading Dict.remove fileid model.loading
newModel = newModel =
{ model | completed = compl, errored = errs, loading = load } { model
| completed = compl
, errored = errs
, loading = load
}
in in
noSub noSub
( newModel ( newModel
, Ports.setProgress ( fileid, 100 ) , Cmd.none
) )
AddFilesUploadResp fileid (Err _) -> AddFilesUploadResp fileid (Err _) ->
@ -943,7 +951,7 @@ update key flags inav settings msg model =
setErrored model fileid setErrored model fileid
load = load =
Set.remove fileid model.loading Dict.remove fileid model.loading
in in
noSub ( { model | errored = errs, loading = load }, Cmd.none ) noSub ( { model | errored = errs, loading = load }, Cmd.none )
@ -959,14 +967,13 @@ update key flags inav settings msg model =
_ -> _ ->
0 0
updateBars = newLoading =
if percent == 0 then Dict.insert fileid percent model.loading
Cmd.none
else
Ports.setProgress ( fileid, percent )
in in
noSub ( model, updateBars ) noSub
( { model | loading = newLoading }
, Cmd.none
)
AttachDDMsg lm -> AttachDDMsg lm ->
let let

View File

@ -1011,7 +1011,7 @@ isIdle model file =
isLoading : Model -> File -> Bool isLoading : Model -> File -> Bool
isLoading model file = isLoading model file =
Set.member (makeFileId file) model.loading Dict.member (makeFileId file) model.loading
isCompleted : Model -> File -> Bool isCompleted : Model -> File -> Bool

View File

@ -0,0 +1,63 @@
module Comp.Progress exposing
( smallIndicating
, topAttachedIndicating
)
import Html exposing (Html, div, text)
import Html.Attributes exposing (attribute, class, style)
smallIndicating : Int -> Html msg
smallIndicating percent =
progress "small indicating active" percent Nothing Nothing
topAttachedIndicating : Int -> Html msg
topAttachedIndicating percent =
progress "top attached indicating active" percent Nothing Nothing
progress : String -> Int -> Maybe String -> Maybe String -> Html msg
progress classes percent label barText =
if percent <= 0 then
div
[ class ("ui progress " ++ classes)
]
(div [ class "bar" ] (barDiv barText) :: labelDiv label)
else
div
[ class ("ui progress " ++ classes)
, attribute "data-percent" (String.fromInt percent)
]
(div
[ class "bar"
, style "transition-duration" "300ms"
, style "display" "block"
, style "width" (String.fromInt percent ++ "%")
]
(barDiv barText)
:: labelDiv label
)
labelDiv : Maybe String -> List (Html msg)
labelDiv label =
case label of
Just l ->
[ div [ class "label" ] [ text l ]
]
Nothing ->
[]
barDiv : Maybe String -> List (Html msg)
barDiv barText =
case barText of
Just t ->
[ div [ class "progress" ] [ text t ]
]
Nothing ->
[]

View File

@ -29,9 +29,6 @@ update flags msg model =
StateResp (Ok s) -> StateResp (Ok s) ->
let let
progressCmd =
List.map (\job -> Ports.setProgress ( job.id, job.progress )) s.progress
refresh = refresh =
if model.pollingInterval <= 0 || model.stopRefresh then if model.pollingInterval <= 0 || model.stopRefresh then
Cmd.none Cmd.none
@ -42,7 +39,7 @@ update flags msg model =
, getNewTime , getNewTime
] ]
in in
( { model | state = s, stopRefresh = False }, Cmd.batch (refresh :: progressCmd) ) ( { model | state = s, stopRefresh = False }, refresh )
StateResp (Err err) -> StateResp (Err err) ->
( { model | error = Util.Http.errorToString err }, Cmd.none ) ( { model | error = Util.Http.errorToString err }, Cmd.none )

View File

@ -2,6 +2,7 @@ module Page.Queue.View exposing (view)
import Api.Model.JobDetail exposing (JobDetail) import Api.Model.JobDetail exposing (JobDetail)
import Api.Model.JobLogEvent exposing (JobLogEvent) import Api.Model.JobLogEvent exposing (JobLogEvent)
import Comp.Progress
import Comp.YesNoDimmer import Comp.YesNoDimmer
import Data.Priority import Data.Priority
import Html exposing (..) import Html exposing (..)
@ -69,10 +70,7 @@ renderCompleted model =
renderProgressCard : Model -> JobDetail -> Html Msg renderProgressCard : Model -> JobDetail -> Html Msg
renderProgressCard model job = renderProgressCard model job =
div [ class "ui fluid card" ] div [ class "ui fluid card" ]
[ div [ id job.id, class "ui top attached indicating progress" ] [ Comp.Progress.topAttachedIndicating job.progress
[ div [ class "bar" ]
[]
]
, Html.map (DimmerMsg job) (Comp.YesNoDimmer.view2 (model.cancelJobRequest == Just job.id) dimmerSettings model.deleteConfirm) , Html.map (DimmerMsg job) (Comp.YesNoDimmer.view2 (model.cancelJobRequest == Just job.id) dimmerSettings model.deleteConfirm)
, div [ class "content" ] , div [ class "content" ]
[ div [ class "right floated meta" ] [ div [ class "right floated meta" ]

View File

@ -14,6 +14,7 @@ module Page.Upload.Data exposing
import Api.Model.BasicResult exposing (BasicResult) import Api.Model.BasicResult exposing (BasicResult)
import Comp.Dropzone import Comp.Dropzone
import Dict exposing (Dict)
import File exposing (File) import File exposing (File)
import Http import Http
import Set exposing (Set) import Set exposing (Set)
@ -26,7 +27,7 @@ type alias Model =
, files : List File , files : List File
, completed : Set String , completed : Set String
, errored : Set String , errored : Set String
, loading : Set String , loading : Dict String Int
, dropzone : Comp.Dropzone.Model , dropzone : Comp.Dropzone.Model
, skipDuplicates : Bool , skipDuplicates : Bool
} }
@ -55,7 +56,7 @@ emptyModel =
, files = [] , files = []
, completed = Set.empty , completed = Set.empty
, errored = Set.empty , errored = Set.empty
, loading = Set.empty , loading = Dict.empty
, dropzone = Comp.Dropzone.init dropzoneSettings , dropzone = Comp.Dropzone.init dropzoneSettings
, skipDuplicates = True , skipDuplicates = True
} }
@ -74,7 +75,7 @@ type Msg
isLoading : Model -> File -> Bool isLoading : Model -> File -> Bool
isLoading model file = isLoading model file =
Set.member (makeFileId file) model.loading Dict.member (makeFileId file) model.loading
isCompleted : Model -> File -> Bool isCompleted : Model -> File -> Bool

View File

@ -4,6 +4,7 @@ import Api
import Api.Model.ItemUploadMeta import Api.Model.ItemUploadMeta
import Comp.Dropzone import Comp.Dropzone
import Data.Flags exposing (Flags) import Data.Flags exposing (Flags)
import Dict
import Http import Http
import Page.Upload.Data exposing (..) import Page.Upload.Data exposing (..)
import Ports import Ports
@ -64,8 +65,12 @@ update sourceId flags msg model =
( cm2, _, _ ) = ( cm2, _, _ ) =
Comp.Dropzone.update (Comp.Dropzone.setActive False) model.dropzone Comp.Dropzone.update (Comp.Dropzone.setActive False) model.dropzone
nowLoading =
List.map (\fid -> ( fid, 0 )) fileids
|> Dict.fromList
in in
( { model | loading = Set.fromList fileids, dropzone = cm2 }, uploads, tracker ) ( { model | loading = nowLoading, dropzone = cm2 }, uploads, tracker )
SingleUploadResp fileid (Ok res) -> SingleUploadResp fileid (Ok res) ->
let let
@ -85,13 +90,13 @@ update sourceId flags msg model =
load = load =
if fileid == uploadAllTracker then if fileid == uploadAllTracker then
Set.empty Dict.empty
else else
Set.remove fileid model.loading Dict.remove fileid model.loading
in in
( { model | completed = compl, errored = errs, loading = load } ( { model | completed = compl, errored = errs, loading = load }
, Ports.setProgress ( fileid, 100 ) , Cmd.none
, Sub.none , Sub.none
) )
@ -102,10 +107,10 @@ update sourceId flags msg model =
load = load =
if fileid == uploadAllTracker then if fileid == uploadAllTracker then
Set.empty Dict.empty
else else
Set.remove fileid model.loading Dict.remove fileid model.loading
in in
( { model | errored = errs, loading = load }, Cmd.none, Sub.none ) ( { model | errored = errs, loading = load }, Cmd.none, Sub.none )
@ -121,17 +126,17 @@ update sourceId flags msg model =
_ -> _ ->
0 0
updateBars = newLoading =
if percent == 0 then if model.singleItem then
Cmd.none Dict.insert uploadAllTracker percent model.loading
else if model.singleItem then
Ports.setAllProgress ( uploadAllTracker, percent )
else else
Ports.setProgress ( fileid, percent ) Dict.insert fileid percent model.loading
in in
( model, updateBars, Sub.none ) ( { model | loading = newLoading }
, Cmd.none
, Sub.none
)
Clear -> Clear ->
( emptyModel, Cmd.none, Sub.none ) ( emptyModel, Cmd.none, Sub.none )

View File

@ -1,6 +1,8 @@
module Page.Upload.View exposing (view) module Page.Upload.View exposing (view)
import Comp.Dropzone import Comp.Dropzone
import Comp.Progress
import Dict
import File exposing (File) import File exposing (File)
import Html exposing (..) import Html exposing (..)
import Html.Attributes exposing (..) import Html.Attributes exposing (..)
@ -117,6 +119,20 @@ renderUploads model =
] ]
getProgress : Model -> File -> Int
getProgress model file =
let
key =
if model.singleItem then
uploadAllTracker
else
makeFileId file
in
Dict.get key model.loading
|> Maybe.withDefault 0
renderFileItem : Model -> Maybe String -> File -> Html Msg renderFileItem : Model -> Maybe String -> File -> Html Msg
renderFileItem model mtracker file = renderFileItem model mtracker file =
let let
@ -147,16 +163,7 @@ renderFileItem model mtracker file =
[ text size [ text size
] ]
, div [ class "description" ] , div [ class "description" ]
[ div [ Comp.Progress.smallIndicating (getProgress model file)
[ classList
[ ( "ui small indicating progress", True )
, ( uploadAllTracker, Util.Maybe.nonEmpty mtracker )
]
, id (makeFileId file)
]
[ div [ class "bar" ]
[]
]
] ]
] ]
] ]

View File

@ -5,8 +5,6 @@ port module Ports exposing
, onUiSettingsSaved , onUiSettingsSaved
, removeAccount , removeAccount
, setAccount , setAccount
, setAllProgress
, setProgress
, storeUiSettings , storeUiSettings
) )
@ -23,12 +21,6 @@ port setAccount : AuthResult -> Cmd msg
port removeAccount : () -> Cmd msg port removeAccount : () -> Cmd msg
port setProgress : ( String, Int ) -> Cmd msg
port setAllProgress : ( String, Int ) -> Cmd msg
port saveUiSettings : ( AuthResult, StoredUiSettings ) -> Cmd msg port saveUiSettings : ( AuthResult, StoredUiSettings ) -> Cmd msg

View File

@ -1,4 +1,24 @@
/* Docspell JS */ /* Docspell JS */
function forEachIn(obj, fn) {
var index = 0;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
fn(obj[key], key, index++);
}
}
}
function extend() {
var result = {};
for (var i = 0; i < arguments.length; i++) {
forEachIn(arguments[i],
function(obj, key) {
result[key] = obj;
});
}
return result;
}
var elmApp = Elm.Main.init({ var elmApp = Elm.Main.init({
node: document.getElementById("docspell-app"), node: document.getElementById("docspell-app"),
@ -16,21 +36,6 @@ elmApp.ports.removeAccount.subscribe(function() {
localStorage.removeItem("account"); localStorage.removeItem("account");
}); });
elmApp.ports.setProgress.subscribe(function(input) {
var id = input[0];
var percent = input[1];
setTimeout(function () {
$("#"+id).progress({percent: percent});
}, 100);
});
elmApp.ports.setAllProgress.subscribe(function(input) {
var id = input[0];
var percent = input[1];
setTimeout(function () {
$("."+id).progress({percent: percent});
}, 100);
});
elmApp.ports.saveUiSettings.subscribe(function(args) { elmApp.ports.saveUiSettings.subscribe(function(args) {
if (Array.isArray(args) && args.length == 2) { if (Array.isArray(args) && args.length == 2) {
@ -58,7 +63,7 @@ elmApp.ports.requestUiSettings.subscribe(function(args) {
var settings = localStorage.getItem(key); var settings = localStorage.getItem(key);
var data = settings ? JSON.parse(settings) : null; var data = settings ? JSON.parse(settings) : null;
if (data && defaults) { if (data && defaults) {
$.extend(defaults, data); var defaults = extend(defaults, data);
elmApp.ports.receiveUiSettings.send(defaults); elmApp.ports.receiveUiSettings.send(defaults);
} else if (defaults) { } else if (defaults) {
elmApp.ports.receiveUiSettings.send(defaults); elmApp.ports.receiveUiSettings.send(defaults);

View File

@ -35,7 +35,7 @@ object Dependencies {
val TikaVersion = "1.24.1" val TikaVersion = "1.24.1"
val YamuscaVersion = "0.7.0" val YamuscaVersion = "0.7.0"
val SwaggerUIVersion = "3.36.1" val SwaggerUIVersion = "3.36.1"
val SemanticUIVersion = "2.4.1" val FomanticUIVersion = "2.8.7-0.2"
val TwelveMonkeysVersion = "3.6" val TwelveMonkeysVersion = "3.6"
val JQueryVersion = "3.5.1" val JQueryVersion = "3.5.1"
val ViewerJSVersion = "0.5.8" val ViewerJSVersion = "0.5.8"
@ -251,11 +251,10 @@ object Dependencies {
val betterMonadicFor = "com.olegpy" %% "better-monadic-for" % BetterMonadicForVersion val betterMonadicFor = "com.olegpy" %% "better-monadic-for" % BetterMonadicForVersion
val webjars = Seq( val webjars = Seq(
"org.webjars" % "swagger-ui" % SwaggerUIVersion, "org.webjars" % "swagger-ui" % SwaggerUIVersion,
"org.webjars" % "Semantic-UI" % SemanticUIVersion, "com.github.eikek" % "fomantic-slim-default" % FomanticUIVersion,
"org.webjars" % "jquery" % JQueryVersion, "org.webjars" % "viewerjs" % ViewerJSVersion,
"org.webjars" % "viewerjs" % ViewerJSVersion, "org.webjars" % "clipboard.js" % ClipboardJsVersion
"org.webjars" % "clipboard.js" % ClipboardJsVersion
) )
val icu4j = Seq( val icu4j = Seq(