Skip to content

Commit

Permalink
transition tab display and css issue fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Shital Raut committed Oct 8, 2020
1 parent dcac1b2 commit db20b73
Show file tree
Hide file tree
Showing 9 changed files with 220 additions and 3 deletions.
2 changes: 1 addition & 1 deletion apps/st2-history/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"dependencies": {
"@stackstorm/module-action-reporter": "^2.4.3",
"@stackstorm/module-api": "^2.4.3",
"@stackstorm/module-auto-form": "^2.4.3",
"@stackstorm/module-auto-form": "^2.4.4",
"@stackstorm/module-filter": "^2.4.3",
"@stackstorm/module-filter-expandable": "^2.4.3",
"@stackstorm/module-flex-table": "^2.4.3",
Expand Down
93 changes: 93 additions & 0 deletions modules/st2-auto-form/fields/color-string.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
// Copyright 2020 Extreme Networks, Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React from 'react';
import PropTypes from 'prop-types';
import StringField from './string';
import { Label, Icon, ErrorMessage, Description, Title } from '../wrappers';
export default class ColorStringField extends StringField {
static icon = 'V';

static propTypes = {
name: PropTypes.string,
spec: PropTypes.object,
value: PropTypes.any,
invalid: PropTypes.string,
disabled: PropTypes.bool,
icon: PropTypes.string,
labelClass: PropTypes.string,
options: PropTypes.array,
}
render() {
const { icon } = this.constructor;
const { invalid, open, value } = this.state;
const { spec={}, options } = this.props;

const wrapperProps = Object.assign({}, this.props);

if (invalid) {
wrapperProps.invalid = invalid;
}

const inputProps = {
className: 'st2-auto-form__field',
placeholder: this.toStateValue(spec.default),
disabled: this.props.disabled,
value: value,
onChange: (e) => this.handleChange(e, e.target.value || ''),
'data-test': this.props['data-test'],
style: { paddingLeft: 23 }, // extra padding so the color block can show up in the field
};

if (this.state.invalid) {
inputProps.className += ' ' + 'st2-auto-form__field--invalid';
}

return (
<div className="st2-auto-form__select">
<div className='st2-auto-form__line'>
<Label className={this.props.labelClass || 'st2-auto-form__text-field'}>
{options && (
<Icon name={icon} style={{pointerEvents:'initial'}} />
)}
<Title {...this.props} />
<span className="st2-auto-form__field-color-block" style={{backgroundColor: value}}>&nbsp;</span>
<input {...inputProps} onClick={() => this.setState({ open: !open })} />
{ options && open && (
<div className="st2-auto-form__field-options" onClick={() => this.setState({open: false})}>
<div className="st2-auto-form__field-options-menu">
{options.map(color => (
<div key={`color-${color.replace(/^[A-Z0-9]/ig, '')}`} className="st2-auto-form__field-options-menu-item">
<button
className="st2-auto-form__field-options-menu-item-button"
onClick={(e) => {
this.handleChange(e, color);
this.setState({open: false});
}}
>
<div style={{backgroundColor: color}}>&nbsp;</div>
</button>
</div>
))}
</div>
</div>
)}
<ErrorMessage>{ this.props.invalid }</ErrorMessage>
</Label>
<Description {...this.props} />
</div>
</div>
);
}
}
4 changes: 4 additions & 0 deletions modules/st2-auto-form/fields/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import NumberField from './number';
import ObjectField from './object';
import PasswordField from './password';
import StringField from './string';
import SelectField from './select';
import ColorStringField from './color-string';

export {
ArrayField,
Expand All @@ -30,4 +32,6 @@ export {
ObjectField,
PasswordField,
StringField,
SelectField,
ColorStringField,
};
67 changes: 67 additions & 0 deletions modules/st2-auto-form/fields/select.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
// Copyright 2020 Extreme Networks, Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import _ from 'lodash';
import React from 'react';
import { BaseTextField } from './base';

export default class SelectField extends BaseTextField {
static icon = 'V'

fromStateValue(v) {
return v !== '' ? v : void 0;
}

toStateValue(v) {
return v || '';
}

validate(v, spec={}) {
const invalid = super.validate(v, spec);
if (invalid !== void 0) {
return invalid;
}

return v && !spec.options.find(o => o.value === v) && `'${v}' is not a valid item`;
}

render() {
const { spec={} } = this.props;
const { value } = this.state;

const selectProps = {
className: 'st2-auto-form__field',
disabled: this.props.disabled,
value,
onChange: (e) => this.handleChange(e, e.target.value),
};

if (this.state.invalid) {
selectProps.className += ' ' + 'st2-auto-form__field--invalid';
}

return (
<div className="st2-auto-form__select">
<select {...selectProps}>
{ spec.default ? null : (
<option value='' />
) }
{ _.map(spec.options, (o) => (
<option key={o.value} value={o.value}>{ o.text }</option>
) ) }
</select>
</div>
);
}
}
48 changes: 48 additions & 0 deletions modules/st2-auto-form/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,44 @@
&:hover {
background-color: rgba(117, 117, 117, .7);
}
}
&-color-block {
width: 1em;
position: absolute;
left: 5px;
top: 9px;
}

&-options {
position: absolute;
background-color: white;
z-index: 1;

&-menu {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
width: 140px;

&-item {
flex-basis: 25%;
text-align: center;
margin-bottom: 5px;
max-width: 35px;

&-button {
width: 25px;
height: 25px;
border-radius: 0;
padding: 5px;
border: none;

&:hover {
border: 1px solid gray;
}
}
}
}
}
}

Expand Down Expand Up @@ -436,3 +474,13 @@
.st2-manual-form {
position: relative;
}
.icon-T {
&:before {
content: 'T';
font-family: Garamond, Georgia, Times New Roman, serif !important;;
}
}




2 changes: 1 addition & 1 deletion modules/st2flow-details/orquesta-transition.js
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ export default class OrquestaTransition extends Component<TransitionProps, {
</div>,
]);
})}
<div className={this.style.transitionButton}>
<div className={`icon-plus-class ${this.style.transitionButton}`}>
<i className="icon-plus2" />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion modules/st2flow-details/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"access": "public"
},
"dependencies": {
"@stackstorm/module-auto-form": "2.0.0",
"@stackstorm/module-auto-form": "2.4.4",
"@stackstorm/module-forms": "2.0.0",
"@stackstorm/st2flow-editor": "1.0.0",
"classnames": "^2.2.6",
Expand Down
2 changes: 2 additions & 0 deletions modules/st2flow-details/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ limitations under the License.

:root {
--token-color: #eee;
--yellow-lighten-5: #fff5e9;
--yellow-base: #FF9E1B;
}

.component {
Expand Down
3 changes: 3 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,6 @@ html, body, .wrapper {
.palette-chevron-icon:before {
font-size: 10px;
}
.icon-plus-class i{
display: none !important;
}

0 comments on commit db20b73

Please sign in to comment.