From c0d7aba5d572985a324fe05e6aa3119978687b20 Mon Sep 17 00:00:00 2001 From: Eike Kettner Date: Fri, 8 Jan 2021 22:06:55 +0100 Subject: [PATCH] Improve selecting attachments of an item Use a list of small thumbnails instead of just names. Closes: #396 --- .../elm/Comp/ItemDetail/AttachmentTabMenu.elm | 61 +++++++++++++------ .../src/main/elm/Comp/ItemDetail/Update.elm | 2 + .../src/main/elm/Comp/ItemDetail/View.elm | 5 +- modules/webapp/src/main/webjar/docspell.css | 10 ++- 4 files changed, 55 insertions(+), 23 deletions(-) diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/AttachmentTabMenu.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/AttachmentTabMenu.elm index 15062d27..9f7765fb 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail/AttachmentTabMenu.elm +++ b/modules/webapp/src/main/elm/Comp/ItemDetail/AttachmentTabMenu.elm @@ -1,10 +1,11 @@ module Comp.ItemDetail.AttachmentTabMenu exposing (view) +import Api import Api.Model.Attachment exposing (Attachment) import Comp.ItemDetail.Model exposing (Model, Msg(..)) import Comp.SentMails -import Html exposing (Html, a, div, i, text) -import Html.Attributes exposing (class, classList, href, title) +import Html exposing (Html, a, div, i, img, text) +import Html.Attributes exposing (class, classList, href, src, title) import Html.Events exposing (onClick) import Html5.DragDrop as DD import Util.List @@ -12,13 +13,23 @@ import Util.Maybe import Util.String -view : Model -> Html Msg +view : Model -> List (Html Msg) view model = - div [ class "ui top attached tabular menu" ] + [ div [ class "ui top attached tabular menu" ] (activeAttach model :: selectMenu model ++ sentMailsTab model ) + , div + [ classList + [ ( "ui attached segment", model.attachMenuOpen ) + , ( "invisible hidden", not model.attachMenuOpen ) + ] + ] + [ div [ class "ui doubling small cards" ] + (List.indexedMap (menuItem model) model.item.attachments) + ] + ] activeAttach : Model -> Html Msg @@ -94,14 +105,6 @@ selectMenu model = ] ] [] - , div - [ classList - [ ( "menu transition", True ) - , ( "visible", model.attachMenuOpen ) - , ( "hidden", not model.attachMenuOpen ) - ] - ] - (List.indexedMap (menuItem model) model.item.attachments) ] ] @@ -109,7 +112,7 @@ selectMenu model = menuItem : Model -> Int -> Attachment -> Html Msg menuItem model pos attach = let - highlight el = + highlight = let dropId = DD.getDropId model.attachDD @@ -118,25 +121,45 @@ menuItem model pos attach = DD.getDragId model.attachDD enable = - Just el.id == dropId && dropId /= dragId + Just attach.id == dropId && dropId /= dragId in [ ( "current-drop-target", enable ) ] + + active = + model.visibleAttach == pos in a ([ classList <| - [ ( "item", True ) + [ ( "ui card", True ) + , ( "blue", pos == 0 ) ] - ++ highlight attach + ++ highlight , href "#" , onClick (SetActiveAttachment pos) ] ++ DD.draggable AttachDDMsg attach.id ++ DD.droppable AttachDDMsg attach.id ) - [ Maybe.map (Util.String.ellipsis 60) attach.name - |> Maybe.withDefault "No Name" - |> text + [ div + [ classList [ ( "invisible hidden", not active ) ] + , class "ui corner icon label" + ] + [ i [ class "check icon" ] [] + ] + , div [ class "image" ] + [ img + [ src (Api.attachmentPreviewURL attach.id) + ] + [] + ] + , div [ class "content" ] + [ div [ class "description" ] + [ Maybe.map (Util.String.ellipsis 60) attach.name + |> Maybe.withDefault "No Name" + |> text + ] + ] ] diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm index 00813cea..fb58201e 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm +++ b/modules/webapp/src/main/elm/Comp/ItemDetail/Update.elm @@ -88,6 +88,7 @@ update key flags inav settings msg model = , dueDatePicker = dp , itemMail = im , visibleAttach = 0 + , attachMenuOpen = False , customFieldsModel = cm } , Cmd.batch @@ -274,6 +275,7 @@ update key flags inav settings msg model = resultModel { model | visibleAttach = pos + , attachMenuOpen = False , sentMailsOpen = False , attachRename = Nothing } diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm index 8e5229e1..efd531c4 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm +++ b/modules/webapp/src/main/elm/Comp/ItemDetail/View.elm @@ -84,8 +84,7 @@ view inav settings model = else [] - , [ renderAttachmentsTabMenu model - ] + , renderAttachmentsTabMenu model , renderAttachmentsTabBody settings model , renderIdInfo model , if settings.itemDetailNotesPosition == Data.UiSettings.Bottom then @@ -319,7 +318,7 @@ attachmentVisible model pos = ) -renderAttachmentsTabMenu : Model -> Html Msg +renderAttachmentsTabMenu : Model -> List (Html Msg) renderAttachmentsTabMenu model = Comp.ItemDetail.AttachmentTabMenu.view model diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css index fdf3cf4f..74862274 100644 --- a/modules/webapp/src/main/webjar/docspell.css +++ b/modules/webapp/src/main/webjar/docspell.css @@ -225,9 +225,17 @@ textarea.markdown-editor { background: rgba(240,248,255,0.4); } -.default-layout .ui.dropdown .menu .item.current-drop-target, .header.current-drop-target, .item.current-drop-target { +.default-layout .ui.dropdown .menu .current-drop-target, .header.current-drop-target, .current-drop-target { background: rgba(0,0,0,0.2) !important; } +.default-layout .ui.cards.small > .ui.card { + max-width: 180px; +} +.default-layout .ui.cards.small > .ui.card .image { + max-width: 100px; + margin-left: auto; + margin-right: auto; +} .default-layout .search-menu { box-shadow: 2px 1px 3px rgba(216, 223, 229, 1);