TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-03-25 16:45:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Item card fixes
This commit is contained in:
mergify[bot] 2020-11-13 07:36:47 +00:00 committed by GitHub
commit 98ee813820
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 113 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
modules/webapp/src/main/elm/Comp/ItemCard.elm
View File

@ -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
@ -152,16 +168,21 @@ 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
[ selectedDimmer
, 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
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
[ 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 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,51 +409,72 @@ 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
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
[ classList
[ ( "card-attachment-nav top", True )
, ( "invisible", pageCount == 0 || (item.fileCount == 1 && pageCount == 1) )
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."
]
]
[ 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)
]
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."
]
]

19
modules/webapp/src/main/webjar/docspell.css
View File

@ -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;
z-index: 10;
}
.default-layout .image .card-attachment-nav.bottom {
bottom: 2px;
}
.default-layout .image .card-attachment-nav.top {
top: 2px;
left: 4px;
top: 4px;
z-index: 8;
}
.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;
}