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

Merge branch 'application-mgt-new' into 'application-mgt-new'

Browse Source 
Publisher: Add responsive layout for release view

See merge request entgra/carbon-device-mgt!101
merge-requests/102/head
Dharmakeerthi Lasantha 6 years ago
parent 8096322ff8 e59ed1d807
commit 8071d9262c
7 changed files with 118 additions and 88 deletions
Show Stats Download Patch File Download Diff File

59
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
Unescape View File

@ -1,37 +1,44 @@
.App { .ant-upload.ant-upload-drag {
text-align: center; height: 170px;
} }
.App-logo { .release .release-icon{
animation: App-logo-spin infinite 20s linear; margin-right: 15px;
height: 40vmin;
pointer-events: none;
} }
.App-header { .release .release-icon img{
background-color: #282c34; width: 100%;
min-height: 100vh; border-radius: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
} }
.App-link { .release .release-title{
color: #61dafb; margin-left: 15px;
} }
@keyframes App-logo-spin { .release .release-screenshot img{
from { width: 100%;
transform: rotate(0deg); border-radius: 15px;
} padding: 5px;
to {
transform: rotate(360deg);
}
} }
.ant-upload.ant-upload-drag { .logo {
height: 170px; width: 120px;
height: 31px;
margin: 0 0 16px 20px;
float: left;
}
.logo img{
height: 35px;
}
.main-container{
background: #f0f2f5;
min-height: 780px
}
@media only screen and (min-width: 768px) {
.main-container{
padding: 24px;
}
} }

3
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js vendored
Unescape View File

@ -33,7 +33,8 @@ class ConnectedLifecycleModal extends React.Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps !== this.props) { if (nextProps !== this.props) {
this.setState({ this.setState({
visible: nextProps.visible visible: nextProps.visible,
loading: false
}) })
} }
} }

34
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js vendored
Unescape View File

@ -1,29 +1,43 @@
import React from "react"; import React from "react";
import {Avatar, Row, Col, Typography} from "antd"; import {Avatar, Row, Col, Typography, Button} from "antd";
import "../../../App.css";
const {Title, Text} = Typography; const {Title, Text} = Typography;
class ReleaseView extends React.Component { class ReleaseView extends React.Component {
render() { render() {
const release = this.props.release; const release = this.props.release;
console.log(release);
return ( return (
<div> <div className="release">
<Row> <Row>
<Col span={4}> <Col xl={4} sm={6} xs={8} className="release-icon">
<Avatar size={128} shape="square" <img src={release.iconPath} alt="icon"/>
src={release.iconPath}/>
</Col> </Col>
<Col span={18}> <Col xl={10} sm={11} className="release-title">
<Title level={2}>App Name</Title> <Title level={2}>App Name</Title>
<Text>{release.version}</Text><br/> <Text>{release.version}</Text><br/>
<Text type="secondary">{release.description}</Text> <Text type="secondary">{release.description}</Text><br/>
</Col>
<Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
<div>
<Button.Group style={{float: "right"}}>
<Button htmlType="button" icon="shop">Open in store</Button>
<Button htmlType="button" type="primary" icon="edit">edit</Button>
</Button.Group>
</div>
</Col> </Col>
</Row> </Row>
<br/> <br/>
<Row> <Row>
<Col span={6}> {release.screenshots.map((screenshotUrl)=>{
<img style={{width:"100%"}} src={release.screenshotPath1}/> return (
</Col> <Col key={"col-"+screenshotUrl} lg={6} md={8} xs={8} className="release-screenshot">
<img key={screenshotUrl} src={screenshotUrl}/>
</Col>
)
})}
</Row> </Row>
</div> </div>
); );

9
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.html
Unescape View File

@ -1 +1,8 @@
<div id="root"></div> <!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
<title>Entgra App Publisher</title>
</head>
<div id="root"></div>
</html>

19
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js vendored
Unescape View File

@ -96,20 +96,17 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-publisher/v1.0/applications/life-cycle/" + uuid; const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-publisher/v1.0/applications/life-cycle/" + uuid;
console.log(request);
return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => { ).then(res => {
if (res.status === 200) { if (res.status === 201) {
if(res.data.data.hasOwnProperty("release")) { let release = res.data.data;
let release = res.data.data; dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release}); }else {
}else{ alert("error");
alert("error"); dispatch({
dispatch({ type: ActionTypes.CLOSE_LIFECYCLE_MODAL
type: ActionTypes.CLOSE_LIFECYCLE_MODAL });
});
}
} }
}).catch(function (error) { }).catch(function (error) {

71
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js vendored
Unescape View File

@ -3,12 +3,11 @@ import {Layout, Menu, Icon} from 'antd';
const {Header, Content, Footer} = Layout; const {Header, Content, Footer} = Layout;
import styles from './Dashboard.less';
import Logo from "../../../public/images/logo.svg"; import Logo from "../../../public/images/logo.svg";
import {Link, NavLink} from "react-router-dom"; import {Link, NavLink} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
import { Switch, Redirect } from 'react-router' import {Switch, Redirect} from 'react-router'
import "../../App.css";
class Dashboard extends React.Component { class Dashboard extends React.Component {
constructor(props) { constructor(props) {
@ -20,36 +19,42 @@ class Dashboard extends React.Component {
render() { render() {
return ( return (
<Layout className="layout"> <div>
<Header> <Layout className="layout">
<div className={styles.logo}> <Header>
<img src={Logo}/> <div className="logo">
</div> <img src={Logo}/>
<Menu </div>
theme="light" <Menu
mode="horizontal" theme="light"
defaultSelectedKeys={['2']} mode="horizontal"
style={{lineHeight: '64px'}} defaultSelectedKeys={['2']}
> style={{lineHeight: '64px'}}
<Menu.Item key="1"><Link to="/publisher/apps"><Icon type="appstore"/>Apps</Link></Menu.Item> >
<Menu.Item key="2"><Link to="/publisher/apps"><Icon type="line-chart"/>Apps</Link></Menu.Item> <Menu.Item key="1"><Link to="/publisher/apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
<Menu.Item key="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New App</Link></Menu.Item> <Menu.Item key="2"><Link to="/publisher/apps"><Icon
</Menu> type="line-chart"/>Apps</Link></Menu.Item>
</Header> <Menu.Item key="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New
<Content style={{padding: '0 0'}}> App</Link></Menu.Item>
<Switch> </Menu>
<Redirect exact from="/publisher" to="/publisher/apps"/> </Header>
{this.state.routes.map((route) => ( </Layout>
<RouteWithSubRoutes key={route.path} {...route} /> <Layout>
))} <Content style={{padding: '0 0'}}>
<Switch>
</Switch> <Redirect exact from="/publisher" to="/publisher/apps"/>
{this.state.routes.map((route) => (
</Content> <RouteWithSubRoutes key={route.path} {...route} />
<Footer style={{textAlign: 'center'}}> ))}
©2019 entgra.io
</Footer> </Switch>
</Layout>
</Content>
<Footer style={{textAlign: 'center'}}>
©2019 entgra.io
</Footer>
</Layout>
</div>
); );
} }
} }

11
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js vendored
Unescape View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import '../../../../App.css';
import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "antd"; import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "antd";
import {connect} from "react-redux"; import {connect} from "react-redux";
import ReleaseView from "../../../../components/apps/release/ReleaseView"; import ReleaseView from "../../../../components/apps/release/ReleaseView";
@ -62,17 +63,15 @@ class ConnectedRelease extends React.Component {
<PageHeader <PageHeader
breadcrumb={{routes}} breadcrumb={{routes}}
/> />
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}> <div className="main-container">
<Row style={{padding: 10}}> <Row style={{padding: 10}}>
<Col span={16}> <Col lg={16} md={24} style={{padding: 3}}>
<Card> <Card>
<ReleaseView release={release}/> <ReleaseView release={release}/>
</Card> </Card>
</Col> </Col>
</Row> <Col lg={8} md={24} style={{padding: 3}}>
<Row style={{padding: 10}}> <Card lg={8} md={24}>
<Col>
<Card>
<LifeCycle currentStatus={release.currentStatus.toUpperCase()}/> <LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
</Card> </Card>
</Col> </Col>

Write Preview
Loading…
Cancel
Save