Merge pull request #637 from eikek/ui-cleanup

UI cleanup

modules/webapp/src/main/elm/App/View2.elm

@@ -84,12 +84,12 @@ topNavAnon model =
 headerNavItem : Model -> Html Msg
 headerNavItem model =
     a
-        [ class "font-bold hover:bg-blue-200 dark:hover:bg-bluegray-800 w-40 inline-flex items-center px-4"
+        [ class "inline-flex font-bold hover:bg-blue-200 dark:hover:bg-bluegray-800 items-center px-4"
         , Page.href HomePage
         ]
         [ img
             [ src (model.flags.config.docspellAssetPath ++ "/img/logo-96.png")
-            , class "h-full inline-block py-2 pr-2"
+            , class "w-9 h-9 mr-2 block"
             ]
             []
         , div [ class "" ]

modules/webapp/src/main/elm/Comp/ItemCard.elm

@@ -604,7 +604,7 @@ view2 cfg settings model item =
     in
     div
         ([ class cfg.extraClasses
-         , class "ds-item-card relative hover:shadow-lg rounded-lg flex flex-col"
+         , class "ds-item-card relative hover:shadow-lg rounded-lg flex flex-col break-all"
          , classList
             [ ( "border border-gray-400 dark:border-bluegray-600 dark:hover:border-bluegray-500", not (isMultiSelectMode cfg) )
             , ( "border-2 border-gray-800 border-dashed dark:border-lightblue-500", isMultiSelectMode cfg )

modules/webapp/src/main/elm/Comp/ItemDetail/EditForm.elm

@@ -425,5 +425,5 @@ tabState settings allNames model =
     in
     FTabState.tabState settings
         openTabs
-        model.customFieldsModel
+        Nothing
         (.title >> ToggleAkkordionTab)

modules/webapp/src/main/elm/Comp/ItemDetail/FieldTabState.elm

@@ -10,7 +10,7 @@ import Set exposing (Set)
 tabState :
     UiSettings
     -> Set String
-    -> Comp.CustomFieldMultiInput.Model
+    -> Maybe Comp.CustomFieldMultiInput.Model
     -> (TB.Tab msg -> msg)
     -> TB.Tab msg
     -> ( TB.State, msg )
@@ -35,7 +35,9 @@ tabState settings openTabs cfmodel toggle tab =
 
                 "Custom Fields" ->
                     isHidden Data.Fields.CustomFields
-                        || Comp.CustomFieldMultiInput.isEmpty cfmodel
+                        || (Maybe.map Comp.CustomFieldMultiInput.isEmpty cfmodel
+                                |> Maybe.withDefault False
+                           )
 
                 "Date" ->
                     isHidden Data.Fields.Date

modules/webapp/src/main/elm/Comp/ItemDetail/ItemInfoHeader.elm

@@ -149,16 +149,14 @@ view settings model =
                 ]
                 |> List.map Tuple.first
             )
-        , div [ class "font-semibold mb-2 mt-3 pr-3" ]
+        , renderTagsAndFields settings model
-            (renderTagsAndFields settings model)
         ]
 
 
-renderTagsAndFields : UiSettings -> Model -> List (Html Msg)
+renderTagsAndFields : UiSettings -> Model -> Html Msg
 renderTagsAndFields settings model =
-    [ div [ class "flex flex-row flex-wrap items-center sm:justify-end" ]
+    div [ class "flex flex-row flex-wrap items-center font-semibold sm:justify-end mt-1 min-h-7" ]
         (renderTags settings model ++ renderCustomValues settings model)
-    ]
 
 
 renderTags : UiSettings -> Model -> List (Html Msg)
@@ -167,7 +165,7 @@ renderTags settings model =
         tagView t =
             Comp.LinkTarget.makeTagLink
                 (IdName t.id t.name)
-                [ ( "label inline-flex ml-2 hover:opacity-90 mt-1 items-center", True )
+                [ ( "label md:text-sm inline-flex ml-2 hover:opacity-90 mt-1 items-center", True )
                 , ( Data.UiSettings.tagColorString2 t settings, True )
                 ]
                 SetLinkTarget
@@ -185,7 +183,7 @@ renderCustomValues settings model =
         fieldView cv =
             Comp.LinkTarget.makeCustomFieldLink2
                 cv
-                [ ( "ml-2 hover:opacity-90 mt-1 " ++ S.basicLabel, True ) ]
+                [ ( "ml-2 md:text-sm hover:opacity-90 mt-1 " ++ S.basicLabel, True ) ]
                 SetLinkTarget
 
         labelThenName cv =

modules/webapp/src/main/elm/Comp/ItemDetail/MultiEditMenu.elm

@@ -1149,7 +1149,7 @@ tabState : UiSettings -> Model -> TB.Tab Msg -> ( TB.State, Msg )
 tabState settings model tab =
     FTabState.tabState settings
         model.openTabs
-        model.customFieldModel
+        (Just model.customFieldModel)
         (.title >> ToggleAkkordionTab)
         tab
 

modules/webapp/src/main/elm/Comp/ItemDetail/SingleAttachment.elm

@@ -312,7 +312,7 @@ menuItem model pos attach =
             , ( "dark:border-bluegray-600", pos /= 0 )
             ]
                 ++ highlight
-         , class "block flex-col relative border rounded px-1 py-1 mr-2"
+         , class "flex flex-col relative border rounded px-1 py-1 mr-2"
          , class " hover:shadow dark:hover:border-bluegray-500"
          , href "#"
          , onClick (SetActiveAttachment pos)
@@ -328,7 +328,7 @@ menuItem model pos attach =
             ]
             [ i [ class "fa fa-check-circle ml-1" ] []
             ]
-        , div [ class "" ]
+        , div [ class "flex-grow" ]
             [ img
                 [ src (Api.attachmentPreviewURL attach.id)
                 , class "block w-20 mx-auto"

modules/webapp/src/main/elm/Comp/SearchStatsView.elm

@@ -152,7 +152,10 @@ view2 classes stats =
                     }
                 ]
             , div [ class "flex-grow" ]
-                [ table [ class "w-full text-sm" ]
+                [ table
+                    [ class "w-full text-sm"
+                    , classList [ ( "hidden", List.isEmpty fields ) ]
+                    ]
                     [ thead []
                         [ tr [ class "" ]
                             [ th [ class "py-2 text-left" ] []

modules/webapp/src/main/elm/Page/Queue/View2.elm

@@ -18,6 +18,26 @@ import Util.Time exposing (formatDateTime, formatIsoDateTime)
 viewSidebar : Bool -> Flags -> UiSettings -> Model -> Html Msg
 viewSidebar visible _ _ model =
     let
+        count v =
+            case v of
+                CurrentJobs ->
+                    List.length model.state.progress
+
+                QueueAll ->
+                    List.length model.state.queued
+                        + List.length model.state.completed
+
+                QueueWaiting ->
+                    List.length model.state.queued
+
+                QueueSuccess ->
+                    filterJobDetails model.state.completed "success"
+                        |> List.length
+
+                QueueError ->
+                    filterJobDetails model.state.completed "failed"
+                        |> List.length
+
         tabLink cls v icon label =
             a
                 [ href "#"
@@ -28,9 +48,12 @@ viewSidebar visible _ _ model =
                 ]
                 [ i [ class icon ]
                     []
-                , span
+                , div
                     [ class "ml-3" ]
                     [ text label ]
+                , div [ class "ml-auto bg-gray-200 border rounded-full h-6 w-6 flex items-center justify-center text-xs dark:bg-bluegray-800 dark:text-bluegray-200 dark:border-bluegray-800 dark:bg-opacity-50" ]
+                    [ count v |> String.fromInt |> text
+                    ]
                 ]
     in
     div
@@ -60,9 +83,6 @@ viewContent _ _ model =
         gridStyle =
             "grid gap-4 grid-cols-1 md:grid-cols-2"
 
-        isState state job =
-            state == job.state
-
         message str =
             div [ class "h-28 flex flex-col items-center justify-center w-full" ]
                 [ div [ class S.header2 ]
@@ -110,7 +130,7 @@ viewContent _ _ model =
             QueueError ->
                 let
                     items =
-                        List.filter (isState "failed") model.state.completed
+                        filterJobDetails model.state.completed "failed"
                 in
                 if List.isEmpty items then
                     message "No failed jobs to display."
@@ -122,7 +142,7 @@ viewContent _ _ model =
             QueueSuccess ->
                 let
                     items =
-                        List.filter (isState "success") model.state.completed
+                        filterJobDetails model.state.completed "success"
                 in
                 if List.isEmpty items then
                     message "No succesfull jobs to display."
@@ -133,6 +153,15 @@ viewContent _ _ model =
         ]
 
 
+filterJobDetails : List JobDetail -> String -> List JobDetail
+filterJobDetails list state =
+    let
+        isState job =
+            state == job.state
+    in
+    List.filter isState list
+
+
 renderJobLog : JobDetail -> Html Msg
 renderJobLog job =
     div

modules/webapp/src/main/styles/index.css

@@ -120,6 +120,13 @@
         z-index: 35;
     }
 
+    @variants responsive {
+        .min-h-7 {
+            min-height: 1.75rem;
+        }
+
+    }
+
     .scrollbar-none {
         -ms-overflow-style: none;  /* IE and Edge */
         scrollbar-width: none;  /* Firefox */