mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-04-04 10:29:34 +00:00
Use cards for viewing items
This commit is contained in:
Eike Kettner
parent
98f202b797
commit
72a88f21cb
@ -13,6 +13,7 @@ import Api.Model.ItemLightGroup exposing (ItemLightGroup)
|
||||
import Api.Model.ItemLightList exposing (ItemLightList)
|
||||
import Data.Direction
|
||||
import Data.Flags exposing (Flags)
|
||||
import Data.Icons as Icons
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (onClick)
|
||||
@ -80,10 +81,11 @@ view model =
|
||||
viewGroup : ItemLightGroup -> Html Msg
|
||||
viewGroup group =
|
||||
div [ class "item-group" ]
|
||||
[ div [ class "ui horizontal divider" ]
|
||||
[ text group.name
|
||||
[ div [ class "ui horizontal divider header item-list" ]
|
||||
[ i [ class "calendar alternate outline icon" ] []
|
||||
, text group.name
|
||||
]
|
||||
, div [ class "ui one column grid" ]
|
||||
, div [ class "ui stackable three cards" ]
|
||||
(List.map viewItem group.items)
|
||||
]
|
||||
|
||||
@ -116,81 +118,80 @@ viewItem item =
|
||||
newColor =
|
||||
"blue"
|
||||
in
|
||||
div [ class "column item-list" ]
|
||||
[ a
|
||||
[ classList
|
||||
[ ( "ui fluid card", True )
|
||||
, ( newColor, not isConfirmed )
|
||||
]
|
||||
, href "#"
|
||||
, onClick (SelectItem item)
|
||||
a
|
||||
[ classList
|
||||
[ ( "ui fluid card", True )
|
||||
, ( newColor, not isConfirmed )
|
||||
]
|
||||
[ div [ class "content" ]
|
||||
, href "#"
|
||||
, onClick (SelectItem item)
|
||||
]
|
||||
[ div [ class "content" ]
|
||||
[ div
|
||||
[ class "header"
|
||||
, Data.Direction.labelFromMaybe item.direction
|
||||
|> title
|
||||
]
|
||||
[ dirIcon
|
||||
, Util.String.underscoreToSpace item.name
|
||||
|> text
|
||||
]
|
||||
, span [ class "meta" ]
|
||||
[ div
|
||||
[ class "header"
|
||||
, Data.Direction.labelFromMaybe item.direction
|
||||
|> title
|
||||
]
|
||||
[ dirIcon
|
||||
, Util.String.ellipsis 45 item.name |> text
|
||||
]
|
||||
, span [ class "meta" ]
|
||||
[ div
|
||||
[ classList
|
||||
[ ( "ui ribbon label", True )
|
||||
, ( newColor, True )
|
||||
, ( "invisible", isConfirmed )
|
||||
]
|
||||
]
|
||||
[ i [ class "exclamation icon" ] []
|
||||
, text " New"
|
||||
[ classList
|
||||
[ ( "ui ribbon label", True )
|
||||
, ( newColor, True )
|
||||
, ( "invisible", isConfirmed )
|
||||
]
|
||||
]
|
||||
, span [ class "right floated meta" ]
|
||||
[ Util.Time.formatDateShort item.date |> text
|
||||
[ i [ class "exclamation icon" ] []
|
||||
, text " New"
|
||||
]
|
||||
]
|
||||
, div [ class "content" ]
|
||||
, span [ class "right floated meta" ]
|
||||
[ Util.Time.formatDateShort item.date |> text
|
||||
]
|
||||
]
|
||||
, div [ class "content" ]
|
||||
[ div [ class "ui horizontal list" ]
|
||||
[ div
|
||||
[ class "item"
|
||||
, title "Correspondent"
|
||||
]
|
||||
[ Icons.correspondentIcon
|
||||
, text " "
|
||||
, Util.String.withDefault "-" corr |> text
|
||||
]
|
||||
, div
|
||||
[ class "item"
|
||||
, title "Concerning"
|
||||
]
|
||||
[ Icons.concernedIcon
|
||||
, text " "
|
||||
, Util.String.withDefault "-" conc |> text
|
||||
]
|
||||
]
|
||||
, div [ class "right floated meta" ]
|
||||
[ div [ class "ui horizontal list" ]
|
||||
[ div
|
||||
[ class "item"
|
||||
, title "Correspondent"
|
||||
, title "Source"
|
||||
]
|
||||
[ i [ class "envelope outline icon" ] []
|
||||
, text " "
|
||||
, Util.String.withDefault "-" corr |> text
|
||||
[ text item.source
|
||||
]
|
||||
, div
|
||||
[ class "item"
|
||||
, title "Concerning"
|
||||
, title ("Due on " ++ dueDate)
|
||||
]
|
||||
[ i [ class "comment outline icon" ] []
|
||||
, text " "
|
||||
, Util.String.withDefault "-" conc |> text
|
||||
]
|
||||
]
|
||||
, div [ class "right floated meta" ]
|
||||
[ div [ class "ui horizontal list" ]
|
||||
[ div
|
||||
[ class "item"
|
||||
, title "Source"
|
||||
]
|
||||
[ text item.source
|
||||
]
|
||||
, div
|
||||
[ class "item"
|
||||
, title ("Due on " ++ dueDate)
|
||||
]
|
||||
[ div
|
||||
[ classList
|
||||
[ ( "ui basic grey label", True )
|
||||
, ( "invisible hidden", item.dueDate == Nothing )
|
||||
]
|
||||
]
|
||||
[ i [ class "bell icon" ] []
|
||||
, text (" " ++ dueDate)
|
||||
[ classList
|
||||
[ ( "ui basic grey label", True )
|
||||
, ( "invisible hidden", item.dueDate == Nothing )
|
||||
]
|
||||
]
|
||||
[ Icons.dueDateIcon
|
||||
, text (" " ++ dueDate)
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
@ -31,6 +31,7 @@ import Comp.SentMails
|
||||
import Comp.YesNoDimmer
|
||||
import Data.Direction exposing (Direction)
|
||||
import Data.Flags exposing (Flags)
|
||||
import Data.Icons as Icons
|
||||
import DatePicker exposing (DatePicker)
|
||||
import Dict exposing (Dict)
|
||||
import Html exposing (..)
|
||||
@ -1416,7 +1417,7 @@ renderItemInfo model =
|
||||
[ class "item"
|
||||
, title "Due Date"
|
||||
]
|
||||
[ i [ class "bell icon" ] []
|
||||
[ Icons.dueDateIcon
|
||||
, Maybe.map Util.Time.formatDate model.item.dueDate
|
||||
|> Maybe.withDefault ""
|
||||
|> text
|
||||
@ -1427,7 +1428,7 @@ renderItemInfo model =
|
||||
[ class "item"
|
||||
, title "Correspondent"
|
||||
]
|
||||
[ i [ class "envelope outline icon" ] []
|
||||
[ Icons.correspondentIcon
|
||||
, List.filterMap identity [ model.item.corrOrg, model.item.corrPerson ]
|
||||
|> List.map .name
|
||||
|> String.join ", "
|
||||
@ -1440,7 +1441,7 @@ renderItemInfo model =
|
||||
[ class "item"
|
||||
, title "Concerning"
|
||||
]
|
||||
[ i [ class "comment outline icon" ] []
|
||||
[ Icons.concernedIcon
|
||||
, List.filterMap identity [ model.item.concPerson, model.item.concEquipment ]
|
||||
|> List.map .name
|
||||
|> String.join ", "
|
||||
|
||||
41
modules/webapp/src/main/elm/Data/Icons.elm
Normal file
41
modules/webapp/src/main/elm/Data/Icons.elm
Normal file
@ -0,0 +1,41 @@
|
||||
module Data.Icons exposing
|
||||
( concerned
|
||||
, concernedIcon
|
||||
, correspondent
|
||||
, correspondentIcon
|
||||
, dueDate
|
||||
, dueDateIcon
|
||||
)
|
||||
|
||||
import Html exposing (Html, i)
|
||||
import Html.Attributes exposing (class)
|
||||
|
||||
|
||||
concerned : String
|
||||
concerned =
|
||||
"crosshairs icon"
|
||||
|
||||
|
||||
concernedIcon : Html msg
|
||||
concernedIcon =
|
||||
i [ class concerned ] []
|
||||
|
||||
|
||||
correspondent : String
|
||||
correspondent =
|
||||
"address card outline icon"
|
||||
|
||||
|
||||
correspondentIcon : Html msg
|
||||
correspondentIcon =
|
||||
i [ class correspondent ] []
|
||||
|
||||
|
||||
dueDate : String
|
||||
dueDate =
|
||||
"bell icon"
|
||||
|
||||
|
||||
dueDateIcon : Html msg
|
||||
dueDateIcon =
|
||||
i [ class dueDate ] []
|
||||
@ -1,6 +1,7 @@
|
||||
module Util.String exposing
|
||||
( crazyEncode
|
||||
, ellipsis
|
||||
, underscoreToSpace
|
||||
, withDefault
|
||||
)
|
||||
|
||||
@ -40,3 +41,8 @@ withDefault default str =
|
||||
|
||||
else
|
||||
str
|
||||
|
||||
|
||||
underscoreToSpace : String -> String
|
||||
underscoreToSpace str =
|
||||
String.replace "_" " " str
|
||||
|
||||
@ -132,12 +132,12 @@ textarea.markdown-editor {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.default-layout .ui.grid > .column.item-list:not(.row) {
|
||||
padding-top: 0.8em;
|
||||
padding-bottom: 0;
|
||||
.default-layout .item-group:not(:first-child) > .ui.horizontal.divider.header.item-list {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.default-layout .ui.grid > .column.item-list:not(.row):last-child {
|
||||
padding-bottom: 1.5rem;
|
||||
.default-layout .ui.horizontal.divider.header.item-list {
|
||||
margin-bottom: 1em;
|
||||
background: rgba(240,248,255,0.4);
|
||||
}
|
||||
|
||||
label span.muted {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user