From 8950cc4dc9a57c7efef5dcb6e4e490d6008bad4d Mon Sep 17 00:00:00 2001 From: Eike Kettner Date: Fri, 13 Nov 2020 01:18:22 +0100 Subject: [PATCH 1/2] 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; } From 2f9e0a8214caf1e713ee6f4455c1f7f42a70fd6a Mon Sep 17 00:00:00 2001 From: Eike Kettner Date: Fri, 13 Nov 2020 01:54:19 +0100 Subject: [PATCH 2/2] Use more prominent indication when an item is selected Downside to this approach is that the item card is not accessible when selected. --- modules/webapp/src/main/elm/Comp/ItemCard.elm | 67 ++++++++++--------- modules/webapp/src/main/webjar/docspell.css | 2 +- 2 files changed, 38 insertions(+), 31 deletions(-) diff --git a/modules/webapp/src/main/elm/Comp/ItemCard.elm b/modules/webapp/src/main/elm/Comp/ItemCard.elm index 53c4fe70..b449bcb7 100644 --- a/modules/webapp/src/main/elm/Comp/ItemCard.elm +++ b/modules/webapp/src/main/elm/Comp/ItemCard.elm @@ -122,10 +122,7 @@ view cfg settings model item = item.state /= "created" cardColor = - if isSelected cfg item.id then - "purple" - - else if not isConfirmed then + if not isConfirmed then "blue" else @@ -141,6 +138,25 @@ view cfg settings model item = Data.ItemSelection.Active ids -> onClick (ToggleSelectItem ids item.id) + + selectedDimmer = + div + [ classList + [ ( "ui light dimmer", True ) + , ( "active", isSelected cfg item.id ) + ] + ] + [ div [ class "content" ] + [ a + [ cardAction + ] + [ i [ class "huge icons purple" ] + [ i [ class "big circle outline icon" ] [] + , i [ class "check icon" ] [] + ] + ] + ] + ] in div ([ classList @@ -156,7 +172,8 @@ view cfg settings model item = [] else - [ previewMenu model item (currentAttachment model item) + [ selectedDimmer + , previewMenu model item (currentAttachment model item) , previewImage settings cardAction model item ] ) @@ -310,35 +327,25 @@ mainContent cardAction cardColor isConfirmed settings cfg item = Data.UiSettings.fieldHidden settings f in a - [ class "link content" + [ class "content" , href "#" , cardAction ] - [ case cfg.selection of - Data.ItemSelection.Active ids -> - div [ class "header" ] - [ Util.Html.checkbox (Set.member item.id ids) - , dirIcon - , Util.String.underscoreToSpace item.name - |> text - ] + [ if fieldHidden Data.Fields.Direction then + div [ class "header" ] + [ Util.String.underscoreToSpace item.name |> text + ] - Data.ItemSelection.Inactive -> - if fieldHidden Data.Fields.Direction then - div [ class "header" ] - [ Util.String.underscoreToSpace item.name |> text - ] - - else - div - [ class "header" - , Data.Direction.labelFromMaybe item.direction - |> title - ] - [ dirIcon - , Util.String.underscoreToSpace item.name - |> text - ] + else + div + [ class "header" + , Data.Direction.labelFromMaybe item.direction + |> title + ] + [ dirIcon + , Util.String.underscoreToSpace item.name + |> text + ] , div [ classList [ ( "ui right corner label", True ) diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css index 3768136a..ddc5ab3d 100644 --- a/modules/webapp/src/main/webjar/docspell.css +++ b/modules/webapp/src/main/webjar/docspell.css @@ -100,7 +100,7 @@ position: absolute; left: 4px; top: 4px; - z-index: 10; + z-index: 8; } .default-layout .image.ds-card-image { overflow: auto;