From c51176f2ccc60d6783dd1d73b41c336ac20a63fe Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Thu, 4 Apr 2019 10:09:49 +0530 Subject: [PATCH 1/4] fixed logo --- .../react-app/src/pages/dashboard/Dashboard.js | 4 +++- .../react-app/src/pages/dashboard/Dashboard.less | 7 +++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js index 02815546af..fb791526c7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js @@ -23,7 +23,9 @@ class Dashboard extends React.Component { return (
-
+
+ +
Date: Thu, 4 Apr 2019 10:32:43 +0530 Subject: [PATCH 2/4] completed designing apps page --- .../react-app/src/index.css | 4 ++++ .../react-app/src/pages/dashboard/Dashboard.less | 5 +++++ .../react-app/src/pages/dashboard/apps/Apps.js | 14 +++++++++++++- 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css index 36d26ff0fb..fa1cc5934e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css @@ -20,4 +20,8 @@ .steps-action { margin-top: 24px; +} + +.ant-input-affix-wrapper .ant-input{ + min-height: 0; } \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less index 86035d91f1..dc7904b51b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less @@ -7,4 +7,9 @@ img{ height: 35px; } +} + + +input{ + min-height: 0; } \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js index 8df73c4db0..3a2994b184 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js @@ -1,9 +1,10 @@ import React from "react"; import "antd/dist/antd.css"; -import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon} from "antd"; +import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon, Row, Col} from "antd"; import Highlighter from 'react-highlight-words'; const Paragraph = Typography; +const Search = Input.Search; const routes = [ { @@ -189,7 +190,18 @@ class Apps extends React.Component { breadcrumb={{routes}} />
+ + + + console.log(value)} + style={{ width: 200}} + /> + + + From b5dc76d0058d414a14125851d2e59eba9afa37a0 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Thu, 4 Apr 2019 11:32:17 +0530 Subject: [PATCH 3/4] removed unused imports --- .../react-app/src/pages/dashboard/Dashboard.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js index fb791526c7..7e963d7ef9 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js @@ -5,8 +5,6 @@ const { Header, Content, Footer } = Layout; import styles from './Dashboard.less'; import Logo from "../../../public/images/logo.svg"; -import Login from "../Login"; -import {renderRoutes} from "react-router-config"; import {Link, NavLink} from "react-router-dom"; import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" From ae1d0cbff25b51085f1d07a75754dd7f82c19138 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Thu, 4 Apr 2019 22:14:10 +0530 Subject: [PATCH 4/4] created the step one --- .../pages/dashboard/add-new-app/AddNewApp.js | 73 +++++---- .../src/pages/dashboard/add-new-app/Step1.js | 153 ++++++++++++++++++ .../src/pages/dashboard/add-new-app/Step2.js | 12 ++ .../src/pages/dashboard/add-new-app/Step3.js | 12 ++ .../pages/dashboard/add-new-app/Style.less | 4 + 5 files changed, 222 insertions(+), 32 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step2.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step3.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Style.less diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js index f91b642adc..49283784f9 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js @@ -1,6 +1,9 @@ import React from "react"; import "antd/dist/antd.css"; -import {PageHeader, Typography, Card, Steps, Button, message} from "antd"; +import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd"; +import Step1 from "./Step1" +import Step2 from "./Step2" +import Step3 from "./Step3" const Paragraph = Typography; @@ -23,13 +26,13 @@ const Step = Steps.Step; const steps = [{ title: 'First', - content: 'First-content', + content: Step1 }, { title: 'Second', - content: 'Second-content', + content: Step2, }, { title: 'Last', - content: 'Last-content', + content: Step3, }]; @@ -54,7 +57,8 @@ class AddNewApp extends React.Component { render() { - const { current } = this.state; + const {current} = this.state; + const Content = steps[current].content; return (
- -
- - {steps.map(item => )} - -
{steps[current].content}
-
- { - current < steps.length - 1 - && - } - { - current === steps.length - 1 - && - } - { - current > 0 - && ( - - ) - } -
-
- + +
+ +
+ + {steps.map(item => )} + + +
+ { + current < steps.length - 1 + && + } + { + current === steps.length - 1 + && + } + { + current > 0 + && ( + + ) + } +
+
+ + + + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js new file mode 100644 index 0000000000..24d7194431 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js @@ -0,0 +1,153 @@ +import React from "react"; +import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd"; +import styles from './Style.less'; + +const { Option } = Select; +const { TextArea } = Input; +const InputGroup = Input.Group; + +const formItemLayout = { + labelCol: { + span: 8, + }, + wrapperCol: { + span: 16, + }, +}; + +class EditableTagGroup extends React.Component { + state = { + tags: [], + inputVisible: false, + inputValue: '', + }; + + handleClose = (removedTag) => { + const tags = this.state.tags.filter(tag => tag !== removedTag); + console.log(tags); + this.setState({ tags }); + } + + showInput = () => { + this.setState({ inputVisible: true }, () => this.input.focus()); + } + + handleInputChange = (e) => { + this.setState({ inputValue: e.target.value }); + } + + handleInputConfirm = () => { + const { inputValue } = this.state; + let { tags } = this.state; + if (inputValue && tags.indexOf(inputValue) === -1) { + tags = [...tags, inputValue]; + } + console.log(tags); + this.setState({ + tags, + inputVisible: false, + inputValue: '', + }); + } + + saveInputRef = input => this.input = input + + render() { + const { tags, inputVisible, inputValue } = this.state; + return ( +
+ {tags.map((tag, index) => { + const isLongTag = tag.length > 20; + const tagElem = ( + this.handleClose(tag)}> + {isLongTag ? `${tag.slice(0, 20)}...` : tag} + + ); + return isLongTag ? {tagElem} : tagElem; + })} + {inputVisible && ( + + )} + {!inputVisible && ( + + New Tag + + )} +
+ ); + } +} + +class Step1 extends React.Component { + render() { + console.log("hhhoohh"); + return ( +
+
+ + + + + + + + + + + +