roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 12:19:10 +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 Tooltip from '../tooltip'
const fromColors = (colors) => Object.entries(colors).reduce(
(acc, [v, val]) => ({ ...acc, [`--role-color-${v}`]: val })
, {})
export type RoleData = {
color: string,
name: string,
@ -58,10 +62,10 @@ export default class Role extends React.Component<RoleProps, RoleState> {
}
const roleColors = {
outline: Color(color).alpha(0.7).hsl().string(),
outlineAlt: Color(color).alpha(0.4).hsl().string(),
active: Color(color).lighten(0.1).hsl().string(),
base: Color(color).hsl().string()
'outline': Color(color).alpha(0.7).hsl().string(),
'outline-alt': Color(color).alpha(0.4).hsl().string(),
'active': Color(color).lighten(0.1).hsl().string(),
'base': Color(color).hsl().string()
}
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
active={this.props.active}
disabled={this.props.disabled}
onClick={this.onToggle}
onTouchStart={this.onMouseOver}
onTouchEnd={this.onMouseOut}
colors={roleColors}
onClick={(this.props.disabled) ? null : this.onToggle}
onTouchStart={(this.props.disabled) ? this.onMouseOver : null}
onTouchEnd={(this.props.disabled) ? this.onMouseOut : null}
style={fromColors(roleColors)}
title={(this.props.disabled) ? 'This role has unsafe permissions.' : null}
>
{name}

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

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