From 8950cc4dc9a57c7efef5dcb6e4e490d6008bad4d Mon Sep 17 00:00:00 2001 From: Eike Kettner Date: Fri, 13 Nov 2020 01:18:22 +0100 Subject: [PATCH] Improve item card --- modules/webapp/src/main/elm/Comp/ItemCard.elm | 114 +++++++++++------- modules/webapp/src/main/webjar/docspell.css | 17 +-- 2 files changed, 76 insertions(+), 55 deletions(-) diff --git a/modules/webapp/src/main/elm/Comp/ItemCard.elm b/modules/webapp/src/main/elm/Comp/ItemCard.elm index a1e00fbd..53c4fe70 100644 --- a/modules/webapp/src/main/elm/Comp/ItemCard.elm +++ b/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 - span [ class "invisible" ] [] + ((if fieldHidden Data.Fields.PreviewImage then + [] else - previewImage settings model item - , mainContent cardAction cardColor isConfirmed settings cfg item - , notesContent settings item - , metaDataContent settings item - , fulltextResultsContent item - ] + [ previewMenu model item (currentAttachment model item) + , previewImage settings cardAction model 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 settings model item = +previewImage : UiSettings -> Attribute Msg -> Model -> ItemLight -> Html Msg +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 -pageCountLabel model item mainAttach = +previewMenu : Model -> ItemLight -> Maybe AttachmentLight -> Html Msg +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 - div [ class "ui left labeled mini button" ] - [ div [ class "ui basic right pointing mini label" ] - [ currentPosition model item - |> String.fromInt - |> text - , text "/" - , text (String.fromInt item.fileCount) - , text " p." - , text (String.fromInt pageCount) + attachUrl = + Maybe.map .id mainAttach + |> Maybe.map ((++) "/api/v1/sec/attachment/") + |> Maybe.withDefault "/api/v1/sec/attachment/none" + + gotoFileBtn = + a + [ class "ui compact basic icon button" + , href attachUrl + , 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 diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css index 1fbaa215..3768136a 100644 --- a/modules/webapp/src/main/webjar/docspell.css +++ b/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; }