From 72a88f21cb620ea66e4a9d161ca17b46e50eabd7 Mon Sep 17 00:00:00 2001 From: Eike Kettner Date: Sun, 17 May 2020 21:42:16 +0200 Subject: [PATCH] Use cards for viewing items --- .../webapp/src/main/elm/Comp/ItemCardList.elm | 123 +++++++++--------- .../webapp/src/main/elm/Comp/ItemDetail.elm | 7 +- modules/webapp/src/main/elm/Data/Icons.elm | 41 ++++++ modules/webapp/src/main/elm/Util/String.elm | 6 + modules/webapp/src/main/webjar/docspell.css | 10 +- 5 files changed, 118 insertions(+), 69 deletions(-) create mode 100644 modules/webapp/src/main/elm/Data/Icons.elm diff --git a/modules/webapp/src/main/elm/Comp/ItemCardList.elm b/modules/webapp/src/main/elm/Comp/ItemCardList.elm index 6ac01407..cf97719f 100644 --- a/modules/webapp/src/main/elm/Comp/ItemCardList.elm +++ b/modules/webapp/src/main/elm/Comp/ItemCardList.elm @@ -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) + ] ] ] ] diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail.elm b/modules/webapp/src/main/elm/Comp/ItemDetail.elm index c093e023..3eab2894 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail.elm +++ b/modules/webapp/src/main/elm/Comp/ItemDetail.elm @@ -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 ", " diff --git a/modules/webapp/src/main/elm/Data/Icons.elm b/modules/webapp/src/main/elm/Data/Icons.elm new file mode 100644 index 00000000..96ddbecb --- /dev/null +++ b/modules/webapp/src/main/elm/Data/Icons.elm @@ -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 ] [] diff --git a/modules/webapp/src/main/elm/Util/String.elm b/modules/webapp/src/main/elm/Util/String.elm index e96888bc..c5d637f3 100644 --- a/modules/webapp/src/main/elm/Util/String.elm +++ b/modules/webapp/src/main/elm/Util/String.elm @@ -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 diff --git a/modules/webapp/src/main/webjar/docspell.css b/modules/webapp/src/main/webjar/docspell.css index 9453556b..2c9c204d 100644 --- a/modules/webapp/src/main/webjar/docspell.css +++ b/modules/webapp/src/main/webjar/docspell.css @@ -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 {