yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 02:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move click action to wrapper and update styles

Browse Source 
Move click action to wrapper (parent) to allow clicks on
whole area of checkbox. Also update the highlighting and
visibility on hover of configuration wheel for better
usability. This way the user learns that clicking on the
item or wheel opens the configuration and clicking on
the text or checkbox toggles the checkbox.

Signed-off-by: Christos Malliaridis <c.malliaridis@gmail.com>
This commit is contained in:
Christos Malliaridis 2020-06-14 05:05:09 +02:00
parent c2243af4b1
commit 52a54de2a3
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/Components.js
View File

@ -30,13 +30,16 @@ const Wrapper = styled.div`
}
}}
&:hover {
background-color: #e9eaeb;
}
&.highlighted {
border-radius: 3px;
background-color: #e9eaeb;
font-weight: 600;
}
&.highlighted,
&.is-checked:hover {
&:hover {
> i,
> svg {
display: block;

4
packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js
View File

@ -59,7 +59,7 @@ function InputCheckboxPlugin({
};
return (
<Wrapper className="col-md-4">
<Wrapper className="col-md-4" onClick={handleClick}>
<div
className={`form-check ${
isSelected && policiesShown ? 'highlighted' : ''
@ -79,7 +79,7 @@ function InputCheckboxPlugin({
/>
{label}
</Label>
<i className="fa fa-cog" onClick={handleClick} />
<i className="fa fa-cog" />
</div>
</Wrapper>
);