Use more prominent indication when an item is selected

Downside to this approach is that the item card is not accessible when
selected.
This commit is contained in:
Eike Kettner 2020-11-13 01:54:19 +01:00
parent 8950cc4dc9
commit 2f9e0a8214
2 changed files with 38 additions and 31 deletions

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
@ -156,7 +172,8 @@ view cfg settings model item =
[]
else
[ previewMenu model item (currentAttachment model item)
[ selectedDimmer
, previewMenu model item (currentAttachment model item)
, previewImage settings cardAction model item
]
)
@ -310,35 +327,25 @@ 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
]
[ if fieldHidden Data.Fields.Direction then
div [ class "header" ]
[ Util.String.underscoreToSpace item.name |> text
]
Data.ItemSelection.Inactive ->
if fieldHidden Data.Fields.Direction then
div [ class "header" ]
[ Util.String.underscoreToSpace item.name |> text
]
else
div
[ class "header"
, Data.Direction.labelFromMaybe item.direction
|> title
]
[ dirIcon
, Util.String.underscoreToSpace item.name
|> text
]
else
div
[ class "header"
, Data.Direction.labelFromMaybe item.direction
|> title
]
[ dirIcon
, Util.String.underscoreToSpace item.name
|> text
]
, div
[ classList
[ ( "ui right corner label", True )

View File

@ -100,7 +100,7 @@
position: absolute;
left: 4px;
top: 4px;
z-index: 10;
z-index: 8;
}
.default-layout .image.ds-card-image {
overflow: auto;