Merge pull request #438 from eikek/item-card-fixes

Item card fixes

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
+            if not isConfirmed then
-                "purple"
-
-            else 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
@@ -152,16 +168,21 @@ 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
+            [ selectedDimmer
-        , mainContent cardAction cardColor isConfirmed settings cfg 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
@@ -306,21 +327,11 @@ 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
+        [ if fieldHidden Data.Fields.Direction then
-            Data.ItemSelection.Active ids ->
-                div [ class "header" ]
-                    [ Util.Html.checkbox (Set.member item.id ids)
-                    , dirIcon
-                    , Util.String.underscoreToSpace item.name
-                        |> text
-                    ]
-
-            Data.ItemSelection.Inactive ->
-                if fieldHidden Data.Fields.Direction then
             div [ class "header" ]
                 [ Util.String.underscoreToSpace item.name |> text
                 ]
@@ -376,20 +387,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,51 +409,72 @@ 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
+
+        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
-    div
+    if pageCount == 0 || (item.fileCount == 1 && pageCount == 1) then
-        [ classList
+        div [ class "card-attachment-nav" ]
-            [ ( "card-attachment-nav top", True )
+            [ gotoFileBtn
-            , ( "invisible", pageCount == 0 || (item.fileCount == 1 && pageCount == 1) )
+            ]
+
+    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."
                     ]
                 ]
-        [ 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 "card-attachment-nav" ]
-                [ div [ class "ui basic right pointing mini label" ]
+            [ div [ class "ui small top attached basic icon buttons" ]
-                    [ currentPosition model item
+                [ gotoFileBtn
-                        |> String.fromInt
-                        |> text
-                    , text "/"
-                    , text (String.fromInt item.fileCount)
-                    , text " p."
-                    , text (String.fromInt pageCount)
-                    ]
                 , 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."
+                ]
             ]
 
 

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

@@ -96,16 +96,11 @@
 .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;
-    z-index: 10;
+    top: 4px;
-}
+    z-index: 8;
-.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;
 }