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 {
text-align: center;
.ant-upload.ant-upload-drag {
height: 170px;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
.release .release-icon{
margin-right: 15px;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
.release .release-icon img{
width: 100%;
border-radius: 100%;
}
.App-link {
color: #61dafb;
.release .release-title{
margin-left: 15px;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.release .release-screenshot img{
width: 100%;
border-radius: 15px;
padding: 5px;
}
.ant-upload.ant-upload-drag {
height: 170px;
.logo {
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) {
if (nextProps !== this.props) {
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 {Avatar, Row, Col, Typography} from "antd";
import {Avatar, Row, Col, Typography, Button} from "antd";
import "../../../App.css";
const {Title, Text} = Typography;
class ReleaseView extends React.Component {
render() {
const release = this.props.release;
console.log(release);
return (
<div>
<div className="release">
<Row>
<Col span={4}>
<Avatar size={128} shape="square"
src={release.iconPath}/>
<Col xl={4} sm={6} xs={8} className="release-icon">
<img src={release.iconPath} alt="icon"/>
</Col>
<Col span={18}>
<Col xl={10} sm={11} className="release-title">
<Title level={2}>App Name</Title>
<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>
</Row>
<br/>
<Row>
<Col span={6}>
<img style={{width:"100%"}} src={release.screenshotPath1}/>
</Col>
{release.screenshots.map((screenshotUrl)=>{
return (
<Col key={"col-"+screenshotUrl} lg={6} md={8} xs={8} className="release-screenshot">
<img key={screenshotUrl} src={screenshotUrl}/>
</Col>
)
})}
</Row>
</div>
);

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

@ -1 +1,8 @@
<!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;
console.log(request);
return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
if(res.data.data.hasOwnProperty("release")) {
let release = res.data.data;
dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
}else{
alert("error");
dispatch({
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
});
}
if (res.status === 201) {
let release = res.data.data;
dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
}else {
alert("error");
dispatch({
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
});
}
}).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;
import styles from './Dashboard.less';
import Logo from "../../../public/images/logo.svg";
import {Link, NavLink} from "react-router-dom";
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 {
constructor(props) {
@ -20,36 +19,42 @@ class Dashboard extends React.Component {
render() {
return (
<Layout className="layout">
<Header>
<div className={styles.logo}>
<img src={Logo}/>
</div>
<Menu
theme="light"
mode="horizontal"
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="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New App</Link></Menu.Item>
</Menu>
</Header>
<Content style={{padding: '0 0'}}>
<Switch>
<Redirect exact from="/publisher" to="/publisher/apps"/>
{this.state.routes.map((route) => (
<RouteWithSubRoutes key={route.path} {...route} />
))}
</Switch>
</Content>
<Footer style={{textAlign: 'center'}}>
©2019 entgra.io
</Footer>
</Layout>
<div>
<Layout className="layout">
<Header>
<div className="logo">
<img src={Logo}/>
</div>
<Menu
theme="light"
mode="horizontal"
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="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New
App</Link></Menu.Item>
</Menu>
</Header>
</Layout>
<Layout>
<Content style={{padding: '0 0'}}>
<Switch>
<Redirect exact from="/publisher" to="/publisher/apps"/>
{this.state.routes.map((route) => (
<RouteWithSubRoutes key={route.path} {...route} />
))}
</Switch>
</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 '../../../../App.css';
import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "antd";
import {connect} from "react-redux";
import ReleaseView from "../../../../components/apps/release/ReleaseView";
@ -62,17 +63,15 @@ class ConnectedRelease extends React.Component {
<PageHeader
breadcrumb={{routes}}
/>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
<div className="main-container">
<Row style={{padding: 10}}>
<Col span={16}>
<Col lg={16} md={24} style={{padding: 3}}>
<Card>
<ReleaseView release={release}/>
</Card>
</Col>
</Row>
<Row style={{padding: 10}}>
<Col>
<Card>
<Col lg={8} md={24} style={{padding: 3}}>
<Card lg={8} md={24}>
<LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
</Card>
</Col>

Write Preview
Loading…
Cancel
Save