TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-06-21 18:08:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Display search highlighting in webapp

Browse Source
This commit is contained in:
Eike Kettner
2020-06-22 23:44:51 +02:00
parent ffbb16db45
commit a3e16e57de
2 changed files with 55 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
modules/webapp/src/main/elm/Comp/ItemCardList.elm
View File

@ -8,6 +8,7 @@ module Comp.ItemCardList exposing
, view
)
import Api.Model.HighlightEntry exposing (HighlightEntry)
import Api.Model.ItemLight exposing (ItemLight)
import Api.Model.ItemLightGroup exposing (ItemLightGroup)
import Api.Model.ItemLightList exposing (ItemLightList)
@ -19,6 +20,7 @@ import Data.UiSettings exposing (UiSettings)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import Markdown
import Ports
import Util.List
import Util.String
@ -247,4 +249,41 @@ viewItem settings item =
]
]
]
, div
[ classList
[ ( "content search-highlight", True )
, ( "invisible hidden", item.highlighting == [] )
]
]
[ div [ class "ui list" ]
(List.map renderHighlightEntry item.highlighting)
]
]
renderHighlightEntry : HighlightEntry -> Html Msg
renderHighlightEntry entry =
let
stripWhitespace str =
String.trim str
|> String.replace "```" ""
|> String.replace "\t" " "
|> String.replace "\n\n" "\n"
|> String.lines
|> List.map String.trim
|> String.join "\n"
in
div [ class "item" ]
[ div [ class "content" ]
(div [ class "header" ]
[ i [ class "caret right icon" ] []
, text (entry.name ++ ":")
]
:: List.map
(\str ->
Markdown.toHtml [ class "description" ] <|
(stripWhitespace str ++ "…")
)
entry.lines
)
]

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

@ -88,6 +88,22 @@
right: -8px;
}
.default-layout .ui.cards .ui.card .content.search-highlight {
background: rgba(246, 255, 158, 0.15);
font-size: smaller;
max-height: 25em;
overflow: auto;
}
.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .header {
}
.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .description {
color: rgba(0,0,0,.55);
margin-left: 0.75em;
}
.default-layout .ui.cards .ui.card .content.search-highlight .ui.list .item .content .description strong > em {
color: rgba(0,0,0,.65);
}
.markdown-preview {
overflow: auto;
max-height: 300px;