roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 20:19:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

optimize role down to two s-c classes.

Browse source
This commit is contained in:
41666 2019-03-21 11:02:15 -05:00
parent a41ec5d807
commit e4fd9fec12
2 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/components/role/index.js
View file

@ -5,6 +5,10 @@ import Color from 'color'
import RoleStyled from './role.styled' import RoleStyled from './role.styled'
import Tooltip from '../tooltip' import Tooltip from '../tooltip'
const fromColors = (colors) => Object.entries(colors).reduce(
(acc, [v, val]) => ({ ...acc, [`--role-color-${v}`]: val })
, {})
export type RoleData = { export type RoleData = {
color: string, color: string,
name: string, name: string,
@ -58,10 +62,10 @@ export default class Role extends React.Component<RoleProps, RoleState> {
} }
const roleColors = { const roleColors = {
outline: Color(color).alpha(0.7).hsl().string(), 'outline': Color(color).alpha(0.7).hsl().string(),
outlineAlt: Color(color).alpha(0.4).hsl().string(), 'outline-alt': Color(color).alpha(0.4).hsl().string(),
active: Color(color).lighten(0.1).hsl().string(), 'active': Color(color).lighten(0.1).hsl().string(),
base: Color(color).hsl().string() 'base': Color(color).hsl().string()
} }
const name = (this.props.role.name !== '') ? this.props.role.name : <>&nbsp;</> const name = (this.props.role.name !== '') ? this.props.role.name : <>&nbsp;</>
@ -69,10 +73,10 @@ export default class Role extends React.Component<RoleProps, RoleState> {
return <RoleStyled return <RoleStyled
active={this.props.active} active={this.props.active}
disabled={this.props.disabled} disabled={this.props.disabled}
onClick={this.onToggle} onClick={(this.props.disabled) ? null : this.onToggle}
onTouchStart={this.onMouseOver} onTouchStart={(this.props.disabled) ? this.onMouseOver : null}
onTouchEnd={this.onMouseOut} onTouchEnd={(this.props.disabled) ? this.onMouseOut : null}
colors={roleColors} style={fromColors(roleColors)}
title={(this.props.disabled) ? 'This role has unsafe permissions.' : null} title={(this.props.disabled) ? 'This role has unsafe permissions.' : null}
> >
{name} {name}

16
ui/components/role/role.styled.js
View file

@ -2,7 +2,7 @@ import styled from 'styled-components'
import MediaQuery from '../../kit/media' import MediaQuery from '../../kit/media'
export default styled.div` export default styled.div`
border: solid 1px ${(props: any) => props.colors.outline}; border: solid 1px var(--role-color-outline);
border-radius: 1.2em; border-radius: 1.2em;
box-sizing: border-box; box-sizing: border-box;
@ -34,7 +34,7 @@ export default styled.div`
transform: rotateZ(0); transform: rotateZ(0);
${(props: any) => (props.active) ? ` ${(props: any) => (props.active) ? `
box-shadow: inset 0 0 0 3em ${props.colors.outlineAlt}; box-shadow: inset 0 0 0 3em var(--role-color-outline-alt);
` : ` ` : `
`} `}
@ -49,7 +49,7 @@ export default styled.div`
&:hover::after { &:hover::after {
transform: translateY(-1px) rotateZ(0); transform: translateY(-1px) rotateZ(0);
box-shadow: 0 0 1px rgba(0,0,0,0.75); box-shadow: 0 0 1px rgba(0,0,0,0.75);
border-color: ${(props: any) => props.colors.active}; border-color: var(--role-color-active);
clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */ clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
} }
@ -70,7 +70,7 @@ export default styled.div`
width: 22px; width: 22px;
height: 22px; height: 22px;
border: 1px solid ${(props: any) => props.colors.base}; border: 1px solid var(--role-color-base);
border-radius: 100%; border-radius: 100%;
clip-path: border-box circle(50.2% at 50% 50%); /* firefox fix */ clip-path: border-box circle(50.2% at 50% 50%); /* firefox fix */
@ -91,18 +91,18 @@ export default styled.div`
padding-left: 32px; padding-left: 32px;
${(props.active) ? `box-shadow: none;` : ''} ${(props.active) ? `box-shadow: none;` : ''}
&::after { &::after {
${(props.active) ? `background-color: ${props.colors.base};` : ''} ${(props.active) ? `background-color: var(--role-color-base);` : ''}
display: block; display: block;
} }
` `
})} })}
${(props: any) => (props.disabled) ? ` &[disabled] {
border-color: hsl(0,0%,40%); border-color: hsl(0,0%,40%);
color: hsla(0,0%,40%,0.7); color: hsla(0,0%,40%,0.7);
cursor: default; cursor: default;
box-shadow: none; box-shadow: none;
${(props.active) ? `box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);` : ''} ${(props: any) => (props.active) ? `box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);` : ``};
&::after { &::after {
border-color: hsl(0,0%,40%); border-color: hsl(0,0%,40%);
@ -113,5 +113,5 @@ export default styled.div`
transform: none; transform: none;
box-shadow: none; box-shadow: none;
} }
` : ''} }
` `