User Management: Styling pass
Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
diff --git a/skyquake/framework/widgets/form_controls/formControls.scss b/skyquake/framework/widgets/form_controls/formControls.scss
index fcc08de..54d69a8 100644
--- a/skyquake/framework/widgets/form_controls/formControls.scss
+++ b/skyquake/framework/widgets/form_controls/formControls.scss
@@ -32,7 +32,7 @@
color:$darker-gray;
text-transform:uppercase;
}
- input, .readonly, textarea {
+ input, textarea {
height: 35px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
font-size: 1rem;
@@ -49,6 +49,7 @@
.readonly {
line-height: 35px;
box-shadow:none;
+ background:none !important;
}
textarea {
-ms-flex-align: stretch;
@@ -78,4 +79,19 @@
}
}
+.sqCheckBox {
+ display:-ms-flexbox;
+ display:flex;
+ label {
+ display:-ms-flexbox;
+ display:flex;
+ -ms-flex-align: center;
+ align-items: center;
+ input {
+ box-shadow: none;
+ height: auto;
+ margin: 0 0.25rem;
+ }
+ }
+}
diff --git a/skyquake/framework/widgets/form_controls/input.jsx b/skyquake/framework/widgets/form_controls/input.jsx
index b758242..370afcc 100644
--- a/skyquake/framework/widgets/form_controls/input.jsx
+++ b/skyquake/framework/widgets/form_controls/input.jsx
@@ -59,14 +59,23 @@
onChange={props.onChange}
/>
break;
+ case 'radiogroup':
+ inputType = buildRadioButtons(this.props);
+ break;
default:
inputType = <input key={props.key} type={props.type} {...inputProperties} onChange={props.onChange} placeholder={props.placeholder}/>;
}
+ let displayedValue;
+ if(value === null) {
+ displayedValue = null;
+ } else {
+ displayedValue = value.toString();
+ }
let html = (
<label className={className} style={props.style}>
<span> { label } {isRequired}</span>
{
- !props.readonly ? inputType : <div className="readonly">{value}</div>
+ !props.readonly ? inputType : <div className="readonly">{displayedValue}</div>
}
</label>
@@ -76,8 +85,26 @@
}
-function buildDropDown() {
+function buildRadioButtons(props) {
+ let className = 'sqCheckBox';
+ if (props.className) {
+ className = `${className} ${props.className}`;
+ }
+ return(
+ <div className={className}>
+ {
+ props.options.map((o,i) => {
+ return (
+ <label key={i}>
+ {o.label}
+ <input type="radio" checked={props.value == o.value} value={o.value} onChange={props.onChange} />
+ </label>
+ )
+ })
+ }
+ </div>
+ )
}
Input.defaultProps = {
diff --git a/skyquake/framework/widgets/form_controls/selectOption.jsx b/skyquake/framework/widgets/form_controls/selectOption.jsx
index 81a3860..21d4a0a 100644
--- a/skyquake/framework/widgets/form_controls/selectOption.jsx
+++ b/skyquake/framework/widgets/form_controls/selectOption.jsx
@@ -47,11 +47,19 @@
html = (
<label key={this.props.key}>
{this.props.label}
- <select className={this.props.className} onChange={this.handleOnChange} defaultValue={JSON.stringify(defaultValue)} >
- {
- options
- }
- </select>
+ {
+ this.props.readonly ? defaultValue
+ : (
+ <select
+ className={this.props.className}
+ onChange={this.handleOnChange}
+ defaultValue={JSON.stringify(defaultValue)}>
+ {
+ options
+ }
+ </select>
+ )
+ }
</label>
);
return html;
@@ -67,6 +75,7 @@
console.log(e.target.value)
console.dir(e)
},
+ readonly: false,
/**
* Selected or default value
diff --git a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
index fdac58b..df28d21 100644
--- a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
@@ -72,6 +72,12 @@
viewUser = (un, index) => {
this.actions.viewUser(un, index);
}
+ editUser = () => {
+ this.actions.editUser(false);
+ }
+ cancelEditUser = () => {
+ this.actions.editUser(true)
+ }
closePanel = () => {
this.actions.handleCloseUserPanel();
}
@@ -118,11 +124,60 @@
this.actions.handleHideColumns(e);
console.log('transition end')
}
+ disableChange = (e) => {
+ let value = e.target.value;
+ value = value.toUpperCase();
+ if (value=="TRUE") {
+ value = true;
+ } else {
+ value = false;
+ }
+ console.log(value)
+ }
render() {
let self = this;
let html;
let props = this.props;
let state = this.state;
+ let passwordSectionHTML = null;
+ let formButtonsHTML = (
+ <ButtonGroup className="buttonGroup">
+ <Button label="EDIT" type="submit" onClick={this.editUser} />
+ </ButtonGroup>
+ );
+ if(!this.state.isReadOnly) {
+ passwordSectionHTML = ( this.state.isEdit ?
+ (
+ <FormSection title="PASSWORD CHANGE">
+ <Input label="OLD PASSWORD" type="password" value={state['old-password']} onChange={this.updateInput.bind(null, 'old-password')} />
+ <Input label="NEW PASSWORD" type="password" value={state['new-password']} onChange={this.updateInput.bind(null, 'new-password')}/>
+ <Input label="REPEAT NEW PASSWORD" type="password" value={state['confirm-password']} onChange={this.updateInput.bind(null, 'confirm-password')}/>
+ </FormSection>
+ ) :
+ (
+ <FormSection title="CREATE PASSWORD">
+ <Input label="CREATE PASSWORD" type="password" value={state.newPassword} onChange={this.updateInput.bind(null, 'new-password')}/>
+ <Input label="REPEAT PASSWORD" type="password" value={state.repeatNewPassword} onChange={this.updateInput.bind(null, 'confirm-password')}/>
+ </FormSection>
+ )
+ );
+ formButtonsHTML = (
+ state.isEdit ?
+ (
+ <ButtonGroup className="buttonGroup">
+ <Button label="Update" type="submit" onClick={this.updateUser} />
+ <Button label="Delete" onClick={this.deleteUser} />
+ <Button label="Cancel" onClick={this.cancelEditUser} />
+ </ButtonGroup>
+ )
+ : (
+ <ButtonGroup className="buttonGroup">
+ <Button label="Create" type="submit" onClick={this.createUser} />
+ </ButtonGroup>
+ )
+ )
+ }
+
html = (
<PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
<PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
@@ -171,20 +226,22 @@
{
this.state.isEdit ?
null
- : <Input label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+ : <Input readonly={state.isReadOnly} label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
}
- <Input label="Domain" value={state['user-domain']} onChange={this.updateInput.bind(null, 'user-domain')}></Input>
- <Input label="Disabled" onChange={this.disabledChange} checked={state.disabled} type="checkbox" />
+ <Input readonly={true} label="Domain" value={state['user-domain']} onChange={this.updateInput.bind(null, 'user-domain')}></Input>
+
+ <Input type="radiogroup" readonly={state.isReadOnly} label="Disabled" value={state.disabled} options={[{value: true, label: 'YES'}, {value: false, label: 'NO'}]} onChange={this.disableChange} />
</FormSection>
- <FormSection title="PLATFORM ROLES">
+ <FormSection title="PLATFORM ROLES" style={{display:'none'}}>
<Input label="Super Admin" onChange={this.platformChange.bind(null, 'super_admin')} checked={state.platformRoles.super_admin} type="checkbox" />
<Input label="Platform Admin" onChange={this.platformChange.bind(null, 'platform_admin')} checked={state.platformRoles.platform_admin} type="checkbox" />
<Input label="Platform Oper" onChange={this.platformChange.bind(null, 'platform_oper')} checked={state.platformRoles.platform_oper} type="checkbox" />
</FormSection>
- <FormSection title="PROJECT ROLES">
+ <FormSection title="PROJECT ROLES" style={{display:'none'}}>
<InputCollection
inital={true}
type='select'
+ readonly={state.isReadOnly}
options={state.projectRolesOptions}
collection={state.projectRoles}
onChange={this.updateProjectRole}
@@ -192,40 +249,14 @@
RemoveItemFn={this.removeProjectRole}
/>
</FormSection>
- { this.state.isEdit ?
- (
- <FormSection title="PASSWORD CHANGE">
- <Input label="OLD PASSWORD" type="password" value={state['old-password']} onChange={this.updateInput.bind(null, 'old-password')} />
- <Input label="NEW PASSWORD" type="password" value={state['new-password']} onChange={this.updateInput.bind(null, 'new-password')}/>
- <Input label="REPEAT NEW PASSWORD" type="password" value={state['confirm-password']} onChange={this.updateInput.bind(null, 'confirm-password')}/>
- </FormSection>
- ) :
- (
- <FormSection title="CREATE PASSWORD">
- <Input label="CREATE PASSWORD" type="password" value={state.newPassword} onChange={this.updateInput.bind(null, 'new-password')}/>
- <Input label="REPEAT PASSWORD" type="password" value={state.repeatNewPassword} onChange={this.updateInput.bind(null, 'confirm-password')}/>
- </FormSection>
- )
- }
+ {passwordSectionHTML}
</Panel>
+ {formButtonsHTML}
- {
- state.isEdit ?
- (
- <ButtonGroup className="buttonGroup">
- <Button label="Update" type="submit" onClick={this.updateUser} />
- <Button label="Delete" onClick={this.deleteUser} />
- </ButtonGroup>
- )
- : (
- <ButtonGroup className="buttonGroup">
- <Button label="Create" type="submit" onClick={this.createUser} />
- </ButtonGroup>
- )
- }
</PanelWrapper>
+
</PanelWrapper>
);
return html;
@@ -256,6 +287,18 @@
}
+// isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange}
+
+class isDisabled extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ let props = this.props;
+ return (<div/>)
+ }
+}
+
/**
* AddItemFn:
*/
@@ -267,6 +310,7 @@
buildTextInput(onChange, v, i) {
return (
<Input
+ readonly={this.props.readonly}
style={{flex: '1 1'}}
key={i}
value={v}
@@ -277,6 +321,7 @@
buildSelectOption(initial, options, onChange, v, i) {
return (
<SelectOption
+ readonly={this.props.readonly}
key={`${i}-${v.replace(' ', '_')}`}
intial={initial}
defaultValue={v}
@@ -306,11 +351,12 @@
return (
<div key={i} className={className} >
{inputType(v, i)}
- <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>
+ {
+ props.readonly ? null : <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>}
</div>
)
})}
- <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>
+ { props.readonly ? null : <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>}
</div>
);
return html;
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmt.scss b/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
index f107686..cf384e2 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmt.scss
@@ -6,6 +6,11 @@
@import "style/_colors.scss";
.userManagement {
+ max-width: 900px;
+ -ms-flex-item-align:center;
+ -ms-grid-row-align:center;
+ align-self:center;
+
.skyquakePanel-wrapper {
overflow-x: hidden;
}
@@ -64,8 +69,8 @@
}
.userAdmin {
- -ms-flex: 0 1 450px;
- flex: 0 1 450px;
+ -ms-flex: 1 1;
+ flex: 1 1;
width:auto;
opacity:1;
}
@@ -163,12 +168,16 @@
font-weight:bold;
}
&--data {
+ &:hover:not(&-active) {
+ background:$neutral-dark-1;
+ }
&:hover, .activeUser, &-active{
cursor:pointer;
- background:$neutral-dark-1;
color:white;
}
-
+ .activeUser, &-active{
+ background: #00acee;
+ }
}
}
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js b/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js
index 8430f35..a0a34d9 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmtActions.js
@@ -8,6 +8,7 @@
'handleRemoveProjectItem',
'handleUpdateProjectRole',
'viewUser',
+ 'editUser',
'handleCloseUserPanel',
'handleHideColumns',
'getUsersSuccess',
diff --git a/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js b/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
index 419a40a..5883995 100644
--- a/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
+++ b/skyquake/plugins/user-management/src/dashboard/userMgmtStore.js
@@ -11,7 +11,7 @@
this.registerAsync(UserManagementSource);
this.users = [];
this['user-name'] = '';
- this['user-domain'] = '';
+ this['user-domain'] = 'system';
this.disabled = false;
this.platformRoles = {
super_admin: false,
@@ -26,6 +26,7 @@
this['confirm-password'] = '';
this.activeIndex = null;
+ this.isReadOnly = true;
this.userOpen = false;
this.hideColumns = false;
this.isEdit = false;
@@ -75,14 +76,21 @@
let state = _.merge({
activeIndex: userIndex,
userOpen: true,
- isEdit: true
+ isEdit: true,
+ isReadOnly: true
}, ActiveUser);
this.setState(state)
}
+ editUser(isEdit) {
+ this.setState({
+ isReadOnly: isEdit
+ })
+ }
handleCloseUserPanel() {
this.setState({
userOpen: false,
- isEdit: false
+ isEdit: false,
+ isReadOnly: true
})
}
handleHideColumns(e) {
@@ -112,7 +120,7 @@
}
resetUser() {
let username = '';
- let domain = '';
+ let domain = 'system';
let disabled = false;
let platformRoles = {
super_admin: false,
@@ -149,7 +157,14 @@
}
}
handleAddUser() {
- this.setState(_.merge( this.resetUser() ,{ isEdit: false, userOpen: true, activeIndex: null }))
+ this.setState(_.merge( this.resetUser() ,
+ {
+ isEdit: false,
+ userOpen: true,
+ activeIndex: null,
+ isReadOnly: false
+ }
+ ))
}
handleCreateUser() {
@@ -188,9 +203,14 @@
'user-domain': this['user-domain'],
platformRoles: this.platformRoles,
disabled: this.disabled,
- projectRoles: this.projectRoles
+ projectRoles: this.projectRoles,
});
- let newState = {users, isEdit: true, activeIndex: users.length - 1};
+ let newState = {
+ users,
+ isEdit: true,
+ isReadOnly: true,
+ activeIndex: users.length - 1
+ };
_.merge(newState, this.resetPassword())
this.setState(newState);
}