community
/
device-mgt-core
12
0
Fork 45
Code Issues Pull Requests 24 Packages Projects Releases Wiki Activity

changed layout of add nuw app in publisher

Browse Source
merge-requests/74/head
Jayasanka 6 years ago
parent 36127ceca5
commit f260dfdc8b
2 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File

65
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js vendored
Unescape View File

@ -14,9 +14,10 @@ import {
Input, Input,
Icon, Icon,
Select, Select,
Checkbox, Switch,
Form, Form,
Upload Upload,
Divider
} from "antd"; } from "antd";
import Step1 from "./Step1"; import Step1 from "./Step1";
import Step2 from "./Step2"; import Step2 from "./Step2";
@ -44,7 +45,7 @@ const routes = [
const props = { const props = {
name: 'file', name: 'file',
multiple: true, multiple: false,
action: '//jsonplaceholder.typicode.com/posts/', action: '//jsonplaceholder.typicode.com/posts/',
onChange(info) { onChange(info) {
const status = info.file.status; const status = info.file.status;
@ -79,13 +80,15 @@ const InputGroup = Input.Group;
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
span: 8, span: 4,
}, },
wrapperCol: { wrapperCol: {
span: 16, span: 20,
}, },
}; };
class EditableTagGroup extends React.Component { class EditableTagGroup extends React.Component {
state = { state = {
tags: [], tags: [],
@ -170,6 +173,12 @@ class AddNewApp extends React.Component {
}; };
} }
tags = [];
addTag(key, value){
this.tags.push(<Option key={key}>{value}</Option>);
}
next() { next() {
const current = this.state.current + 1; const current = this.state.current + 1;
this.setState({current}); this.setState({current});
@ -184,6 +193,8 @@ class AddNewApp extends React.Component {
render() { render() {
const {current} = this.state; const {current} = this.state;
const Content = steps[current].content; const Content = steps[current].content;
this.addTag('1','Lorem');
this.addTag('2','Ipsum');
return ( return (
<div> <div>
<PageHeader <PageHeader
@ -205,7 +216,8 @@ class AddNewApp extends React.Component {
<Row> <Row>
<Col span={12}> <Col span={12}>
<div> <div>
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark> <Form labelAlign="left" layout="horizontal" className={styles.stepForm}
hideRequiredMark>
<Form.Item {...formItemLayout} label="Platform"> <Form.Item {...formItemLayout} label="Platform">
<Select placeholder="ex: android"> <Select placeholder="ex: android">
@ -218,11 +230,11 @@ class AddNewApp extends React.Component {
<Option value="Enterprise" selected>Enterprise</Option> <Option value="Enterprise" selected>Enterprise</Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Name"> <Form.Item {...formItemLayout} label="App Name">
<Input placeholder="App Name"/> <Input placeholder="ex: Lorem App"/>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Description"> <Form.Item {...formItemLayout} label="Description">
<TextArea placeholder="Enter the description" rows={4}/> <TextArea placeholder="Enter the description..." rows={4}/>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Category"> <Form.Item {...formItemLayout} label="Category">
<Select placeholder="Select a category"> <Select placeholder="Select a category">
@ -230,14 +242,21 @@ class AddNewApp extends React.Component {
<Option value="entertainment">Entertainment</Option> <Option value="entertainment">Entertainment</Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Tags">
<EditableTagGroup/>
</Form.Item>
<Form.Item {...formItemLayout} label="Price"> <Form.Item {...formItemLayout} label="Price">
<Input prefix="$" placeholder="00.00"/> <Input prefix="$" placeholder="00.00"/>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Share with all tenents?"> <Form.Item {...formItemLayout} label="Is Sahred?">
<Checkbox> </Checkbox> <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked />
</Form.Item>
<Divider/>
<Form.Item {...formItemLayout} label="Tags">
<Select
mode="tags"
style={{ width: '100%' }}
placeholder="Tags Mode"
>
{this.tags}
</Select>,
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Meta Daa"> <Form.Item {...formItemLayout} label="Meta Daa">
<InputGroup> <InputGroup>
@ -257,18 +276,21 @@ class AddNewApp extends React.Component {
</Form> </Form>
</div> </div>
</Col> </Col>
<Col span={12} style={{paddingTop:40}}> <Col span={12} style={{paddingTop: 40, paddingLeft: 20}}>
<p>Application</p> <p>Application</p>
<div style={{height:170}}> <div style={{height: 170}}>
<Dragger {...props}> <Dragger {...props}>
<p className="ant-upload-drag-icon"> <p className="ant-upload-drag-icon">
<Icon type="inbox" /> <Icon type="inbox"/>
</p> </p>
<p className="ant-upload-text">Click or drag file to this area to upload</p> <p className="ant-upload-text">Click or drag file to this area to
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> upload</p>
<p className="ant-upload-hint">Support for a single or bulk upload.
Strictly prohibit from uploading company data or other band
files</p>
</Dragger> </Dragger>
</div> </div>
<Row style={{marginTop:40}}> <Row style={{marginTop: 40}}>
<Col span={12}> <Col span={12}>
<p>Icon</p> <p>Icon</p>
<IconImage/> <IconImage/>
@ -280,7 +302,7 @@ class AddNewApp extends React.Component {
</Row> </Row>
<Row style={{marginTop:40}}> <Row style={{marginTop: 40}}>
<Col span={24}> <Col span={24}>
<p>Screenshots</p> <p>Screenshots</p>
<UploadScreenshots/> <UploadScreenshots/>
@ -288,6 +310,7 @@ class AddNewApp extends React.Component {
</Row> </Row>
</Col> </Col>
</Row> </Row>
</Card> </Card>
</Col> </Col>

13
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/UploadScreenshots.js vendored
Unescape View File

@ -6,24 +6,19 @@ class UploadScreenshots extends React.Component {
state = { state = {
previewVisible: false, previewVisible: false,
previewImage: '', previewImage: '',
fileList: [{ fileList: [],
uid: '-1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
}; };
handleCancel = () => this.setState({ previewVisible: false }) handleCancel = () => this.setState({ previewVisible: false });
handlePreview = (file) => { handlePreview = (file) => {
this.setState({ this.setState({
previewImage: file.url || file.thumbUrl, previewImage: file.url || file.thumbUrl,
previewVisible: true, previewVisible: true,
}); });
} };
handleChange = ({ fileList }) => this.setState({ fileList }) handleChange = ({ fileList }) => this.setState({ fileList });
render() { render() {
const { previewVisible, previewImage, fileList } = this.state; const { previewVisible, previewImage, fileList } = this.state;

Write Preview
Loading…
Cancel
Save