Improve item card

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

@@ -152,16 +152,20 @@ view cfg settings model item =
          ]
             ++ DD.draggable ItemDDMsg item.id
         )
-        [ if fieldHidden Data.Fields.PreviewImage then
+        ((if fieldHidden Data.Fields.PreviewImage then
-            span [ class "invisible" ] []
+            []
 
           else
-            previewImage settings model item
+            [ previewMenu model item (currentAttachment model item)
-        , mainContent cardAction cardColor isConfirmed settings cfg item
+            , previewImage settings cardAction model item
-        , notesContent settings item
+            ]
-        , metaDataContent settings item
+         )
-        , fulltextResultsContent item
+            ++ [ mainContent cardAction cardColor isConfirmed settings cfg item
-        ]
+               , notesContent settings item
+               , metaDataContent settings item
+               , fulltextResultsContent item
+               ]
+        )
 
 
 fulltextResultsContent : ItemLight -> Html Msg
@@ -376,20 +380,21 @@ mainContent cardAction cardColor isConfirmed settings cfg item =
         ]
 
 
-previewImage : UiSettings -> Model -> ItemLight -> Html Msg
+previewImage : UiSettings -> Attribute Msg -> Model -> ItemLight -> Html Msg
-previewImage settings model item =
+previewImage settings cardAction model item =
     let
+        mainAttach =
+            currentAttachment model item
+
         previewUrl =
             Maybe.map .id mainAttach
                 |> Maybe.map Api.attachmentPreviewURL
                 |> Maybe.withDefault (Api.itemBasePreviewURL item.id)
-
-        mainAttach =
-            currentAttachment model item
     in
-    div
+    a
         [ class "image ds-card-image"
         , Data.UiSettings.cardPreviewSize settings
+        , cardAction
         ]
         [ img
             [ class "preview-image"
@@ -397,52 +402,73 @@ previewImage settings model item =
             , Data.UiSettings.cardPreviewSize settings
             ]
             []
-        , pageCountLabel model item mainAttach
         ]
 
 
-pageCountLabel : Model -> ItemLight -> Maybe AttachmentLight -> Html Msg
+previewMenu : Model -> ItemLight -> Maybe AttachmentLight -> Html Msg
-pageCountLabel model item mainAttach =
+previewMenu model item mainAttach =
     let
         pageCount =
             Maybe.andThen .pageCount mainAttach
                 |> Maybe.withDefault 0
-    in
-    div
-        [ classList
-            [ ( "card-attachment-nav top", True )
-            , ( "invisible", pageCount == 0 || (item.fileCount == 1 && pageCount == 1) )
-            ]
-        ]
-        [ if item.fileCount == 1 then
-            div
-                [ class "ui secondary basic mini label"
-                , title "Number of pages"
-                ]
-                [ text "p."
-                , text (String.fromInt pageCount)
-                ]
 
-          else
+        attachUrl =
-            div [ class "ui left labeled mini button" ]
+            Maybe.map .id mainAttach
-                [ div [ class "ui basic right pointing mini label" ]
+                |> Maybe.map ((++) "/api/v1/sec/attachment/")
-                    [ currentPosition model item
+                |> Maybe.withDefault "/api/v1/sec/attachment/none"
-                        |> String.fromInt
+
-                        |> text
+        gotoFileBtn =
-                    , text "/"
+            a
-                    , text (String.fromInt item.fileCount)
+                [ class "ui compact basic icon button"
-                    , text " p."
+                , href attachUrl
-                    , text (String.fromInt pageCount)
+                , target "_self"
+                ]
+                [ i [ class "eye icon" ] []
+                ]
+    in
+    if pageCount == 0 || (item.fileCount == 1 && pageCount == 1) then
+        div [ class "card-attachment-nav" ]
+            [ gotoFileBtn
+            ]
+
+    else if item.fileCount == 1 then
+        div [ class "card-attachment-nav" ]
+            [ div [ class "ui small top attached basic icon buttons" ]
+                [ gotoFileBtn
+                ]
+            , div [ class "ui attached basic fitted center aligned blue segment" ]
+                [ span
+                    [ title "Number of pages"
                     ]
+                    [ text (String.fromInt pageCount)
+                    , text "p."
+                    ]
+                ]
+            ]
+
+    else
+        div [ class "card-attachment-nav" ]
+            [ div [ class "ui small top attached basic icon buttons" ]
+                [ gotoFileBtn
                 , a
-                    [ class "ui mini icon secondary button"
+                    [ class "ui compact icon button"
                     , href "#"
                     , onClick (CyclePreview item)
                     ]
                     [ i [ class "arrow right icon" ] []
                     ]
                 ]
-        ]
+            , div [ class "ui attached basic blue fitted center aligned segment" ]
+                [ currentPosition model item
+                    |> String.fromInt
+                    |> text
+                , text "/"
+                , text (String.fromInt item.fileCount)
+                , text ", "
+                , text (String.fromInt pageCount)
+                , text "p."
+                ]
+            ]
 
 
 renderHighlightEntry : HighlightEntry -> Html Msg

modules/webapp/src/main/webjar/docspell.css

@@ -96,17 +96,12 @@
 .default-layout .ui.card .link.content:hover {
     box-shadow: 0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
 }
-.default-layout .image .card-attachment-nav {
+.default-layout .card .card-attachment-nav {
     position: absolute;
-    right: 2px;
+    left: 4px;
+    top: 4px;
     z-index: 10;
 }
-.default-layout .image .card-attachment-nav.bottom {
-    bottom: 2px;
-}
-.default-layout .image .card-attachment-nav.top {
-    top: 2px;
-}
 .default-layout .image.ds-card-image {
     overflow: auto;
 }
@@ -123,13 +118,13 @@
     margin-left: auto;
     margin-right: auto;
 }
-.default-layout img.preview-image.small {
+.default-layout .image.ds-card-image img.preview-image.small {
     max-width: 80px;
 }
-.default-layout img.preview-image.medium {
+.default-layout .image.ds-card-image img.preview-image.medium {
     max-width: 160px;
 }
-.default-layout img.preview-image.large {
+.default-layout .image.ds-card-image img.preview-image.large {
     max-width: none;
 }