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" item.state /= "created"
cardColor = cardColor =
if isSelected cfg item.id then if not isConfirmed then
"purple"
else if not isConfirmed then
"blue" "blue"
else else
@ -141,6 +138,25 @@ view cfg settings model item =
Data.ItemSelection.Active ids -> Data.ItemSelection.Active ids ->
onClick (ToggleSelectItem ids item.id) 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 in
div div
([ classList ([ classList
@ -156,7 +172,8 @@ view cfg settings model item =
[] []
else else
[ previewMenu model item (currentAttachment model item) [ selectedDimmer
, previewMenu model item (currentAttachment model item)
, previewImage settings cardAction model item , previewImage settings cardAction model item
] ]
) )
@ -310,35 +327,25 @@ mainContent cardAction cardColor isConfirmed settings cfg item =
Data.UiSettings.fieldHidden settings f Data.UiSettings.fieldHidden settings f
in in
a a
[ class "link content" [ class "content"
, href "#" , href "#"
, cardAction , cardAction
] ]
[ case cfg.selection of [ if fieldHidden Data.Fields.Direction then
Data.ItemSelection.Active ids -> div [ class "header" ]
div [ class "header" ] [ Util.String.underscoreToSpace item.name |> text
[ Util.Html.checkbox (Set.member item.id ids) ]
, dirIcon
, Util.String.underscoreToSpace item.name
|> text
]
Data.ItemSelection.Inactive -> else
if fieldHidden Data.Fields.Direction then div
div [ class "header" ] [ class "header"
[ Util.String.underscoreToSpace item.name |> text , Data.Direction.labelFromMaybe item.direction
] |> title
]
else [ dirIcon
div , Util.String.underscoreToSpace item.name
[ class "header" |> text
, Data.Direction.labelFromMaybe item.direction ]
|> title
]
[ dirIcon
, Util.String.underscoreToSpace item.name
|> text
]
, div , div
[ classList [ classList
[ ( "ui right corner label", True ) [ ( "ui right corner label", True )

View File

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