roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-17 10:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix unsafe roles being usable, begin work on role/server editor

Browse source
This commit is contained in:
Katalina / stardust 2017-12-24 03:22:41 -06:00
parent d1f556b0f0
commit bd15a812e5
20 changed files with 343 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

82
UI/src/components/role/Role.sass
View file

@ -11,42 +11,32 @@
justify-content: center
font-size: 16px
vertical-align: baseline
transition: border-color 0.2s ease-in-out
transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out
transform: translateZ(0)
&:hover
&.role__button
.role__option
transform: translateY(-1px) translateZ(0px)
box-shadow: 0 1px 1px var(--c-dark)
border-color: var(--role-color-hover)
background-color: transparent
&:active
&:hover
cursor: inherit
&:hover:not(.disabled)
.role__option
transform: translateY(-1px) translateZ(0px)
box-shadow: 0 1px 1px var(--c-dark)
border-color: var(--role-color-hover)
background-color: transparent
&:active
box-shadow: none
&:active .role__option
box-shadow: none
&:active .role__option
box-shadow: none
&__option
border-radius: 50%
height: 22px
margin-right: 6px
width: 22px
box-sizing: border-box
/* display: inline-block */
background-color: transparent
overflow: hidden
transform: translateZ(0px)
border: 1px solid var(--role-color-hex)
transition: background-color 0.1s ease-in-out, border-left-width 0.3s ease-in-out, border-color 0.1s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-out
&.selected
// background-color: var(--role-color-hex)
// This **must** be width-1, otherwise blink adds width to the boundaries.
border-left-width: 21px
&:hover
cursor: pointer
&.disabled
.role__option
border-color: var(--c-7)
transition: none
transform: translateZ(0)
&:hover
cursor: default
&__name
@ -57,5 +47,33 @@
white-space: nowrap
user-select: none
&__option
border-radius: 50%
height: 22px
margin-right: 6px
width: 22px
box-sizing: border-box
/* display: inline-block */
background-color: transparent
overflow: hidden
transform: translateZ(0)
border: 1px solid var(--role-color-hex)
transition: background-color 0.1s ease-in-out, border-left-width 0.3s ease-in-out, border-color 0.1s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-out
&.selected
// This **must** be width-1, otherwise blink adds width to the boundaries.
border-left-width: 21px
&.role__drag
box-shadow: none
&:hover
transform: translateZ(0) translateY(-1px)
box-shadow: 0 1px 2px rgba(0,0,0,0.3)
background-color: rgba(#ccc,0.03)
cursor: grab
&:active
cursor: grabbing
.role__option:active, .role:active .role__option:not(:active)
transform: translateY(0) translateZ(0px) !important

15
UI/src/components/role/index.js
View file

@ -10,11 +10,13 @@ class Role extends Component {
role: PropTypes.object.isRequired,
onToggle: PropTypes.func,
type: PropTypes.string,
selected: PropTypes.bool.isRequired
selected: PropTypes.bool,
disabled: PropTypes.bool
}
render () {
let { role, selected } = this.props
let { role, selected, disabled, type, provided } = this.props
type = type || 'button'
let color = Color(role.get('color'))
@ -26,8 +28,13 @@ class Role extends Component {
let hc = color.lighten(0.1)
return <div
onClick={this.props.onToggle.bind(null, !selected, selected)}
className='role font-sans-serif'
onClick={() => {
if (!disabled && this.props.onToggle != null) {
this.props.onToggle(!selected, selected) }
}
}
{...((disabled) ? { 'uk-tooltip': '', title: "I don't have permissions to grant this." } : {})}
className={`role font-sans-serif ${(disabled) ? 'disabled' : ''} role__${type}`}
style={{
'--role-color-hex': c.string(),
'--role-color-hover': hc.string(),