rajitha
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix the responsive issues of the APPM UI

Browse Source
feature/appm-store/pbac
nipunnadeen 5 years ago
parent 95b1b1e4fd
commit 705d061b35
10 changed files with 419 additions and 113 deletions
Show Stats Download Patch File Download Diff File

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

@ -40,7 +40,6 @@
} }
.logo-image { .logo-image {
/*width: 120px;*/
height: 31px; height: 31px;
margin: 0 5px 16px 24px; margin: 0 5px 16px 24px;
float: left; float: left;
@ -60,8 +59,65 @@
margin-right: 2%; margin-right: 2%;
} }
.mobile-layout{
visibility: hidden;
position: absolute;
}
.mobile-menu-button{
margin-left: 4%;
position: fixed;
}
.nav-icon{
margin-top: 10%;
font-size: 27px;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.main-container{ .main-container{
padding: 24px; padding: 24px;
} }
}
@media screen and (max-width: 768px) {
.web-layout{
visibility: hidden;
}
.mobile-layout{
visibility: visible;
z-index: 1;
}
.mobile-menu-button{
margin-top: 4%;
}
Header{
position: fixed;
z-index: 1;
width: 100%;
}
.dashboard-body{
margin-top: 14%;
}
.logo-image {
margin-left: 20%;
}
}
@media screen and (max-height: 500px) {
.mobile-menu-button{
margin-top: 2%;
}
.dashboard-body{
margin-top: 9%;
}
} }

12
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.css
Unescape View File

@ -33,6 +33,18 @@
width: 70%; width: 70%;
} }
@media screen and (max-width: 768px) {
.d-rating .bar-containers{
width: 100%;
}
.d-rating .numeric-data{
width: 50%;
}
}
.d-rating .bar-containers .bar-container{ .d-rating .bar-containers .bar-container{
color: #737373; color: #737373;
font-weight: 400; font-weight: 400;

10
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.css
Unescape View File

@ -22,4 +22,12 @@
.release-card:hover { .release-card:hover {
background-color: rgba(15, 188, 249,0.1); background-color: rgba(15, 188, 249,0.1);
} }
@media screen and (max-width: 700px) {
.release-card{
width: 210%;
}
}

96
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js vendored
Unescape View File

@ -32,13 +32,11 @@ import {
Icon, Icon,
Card Card
} from 'antd'; } from 'antd';
import "../../../../App.css";
import DetailedRating from "../../detailed-rating/DetailedRating"; import DetailedRating from "../../detailed-rating/DetailedRating";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import axios from "axios"; import axios from "axios";
import ReactQuill from "react-quill"; import ReactQuill from "react-quill";
import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser'; import ReactHtmlParser from 'react-html-parser';
import "./AppDetailsDrawer.css"; import "./AppDetailsDrawer.css";
import pSBC from "shade-blend-color"; import pSBC from "shade-blend-color";
import {withConfigContext} from "../../../../context/ConfigContext"; import {withConfigContext} from "../../../../context/ConfigContext";
@ -71,6 +69,8 @@ const formats = [
class AppDetailsDrawer extends React.Component { class AppDetailsDrawer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const drawerWidth = window.innerWidth<=768 ? '80%' : '40%';
this.state = { this.state = {
loading: false, loading: false,
name: "", name: "",
@ -85,6 +85,8 @@ class AppDetailsDrawer extends React.Component {
isDescriptionEditEnabled: false, isDescriptionEditEnabled: false,
isCategoriesEditEnabled: false, isCategoriesEditEnabled: false,
isTagsEditEnabled: false, isTagsEditEnabled: false,
drawer: null,
drawerWidth
}; };
} }
@ -188,7 +190,6 @@ class AppDetailsDrawer extends React.Component {
}); });
}; };
// change the app name // change the app name
handleNameSave = name => { handleNameSave = name => {
const config = this.props.context; const config = this.props.context;
@ -412,7 +413,6 @@ class AppDetailsDrawer extends React.Component {
} }
}; };
render() { render() {
const config = this.props.context; const config = this.props.context;
const {app, visible, onClose} = this.props; const {app, visible, onClose} = this.props;
@ -458,11 +458,12 @@ class AppDetailsDrawer extends React.Component {
<div> <div>
<Drawer <Drawer
placement="right" placement="right"
width={640} width={this.state.drawerWidth}
closable={false} closable={false}
onClose={onClose} onClose={onClose}
visible={visible} visible={visible}
> >
<Spin spinning={loading} delay={500}> <Spin spinning={loading} delay={500}>
<div style={{textAlign: "center"}}> <div style={{textAlign: "center"}}>
{avatar} {avatar}
@ -473,39 +474,46 @@ class AppDetailsDrawer extends React.Component {
<Text strong={true}>Releases </Text> <Text strong={true}>Releases </Text>
{/*display add new release only if app type is enterprise*/} {/*display add new release only if app type is enterprise*/}
{(app.type === "ENTERPRISE") && (
<Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add <div className="releases-details">
new release</Button></Link>)}
<List {(app.type === "ENTERPRISE") && (
style={{paddingTop: 16}} <Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button"
grid={{gutter: 16, column: 2}} size="small">Add
dataSource={app.applicationReleases} new release</Button></Link>)}
renderItem={release => ( <List
<List.Item> style={{paddingTop: 16}}
<Link to={"apps/releases/" + release.uuid}> grid={{gutter: 16, column: 2}}
<Card className="release-card"> dataSource={app.applicationReleases}
<Meta renderItem={release => (
avatar={ <List.Item>
<Avatar size="large" shape="square" src={release.iconPath}/> <Link to={"apps/releases/" + release.uuid}>
} <Card className="release-card">
title={release.version} <Meta
description={ avatar={
<div style={{ <Avatar size="large" shape="square" src={release.iconPath}/>
fontSize: "0.7em" }
}}> title={release.version}
<IconText type="check" text={release.currentStatus}/> description={
<Divider type="vertical"/> <div style={{
<IconText type="upload" text={release.releaseType}/> fontSize: "0.7em"
<Divider type="vertical"/> }} className="description-view">
<IconText type="star-o" text={release.rating.toFixed(1)}/> <IconText type="check" text={release.currentStatus}/>
</div> <Divider type="vertical"/>
} <IconText type="upload" text={release.releaseType}/>
/> <Divider type="vertical"/>
</Card> <IconText type="star-o" text={release.rating.toFixed(1)}/>
</Link> </div>
</List.Item> }
)} />
/> </Card>
</Link>
</List.Item>
)}
/>
</div>
<Divider dashed={true}/> <Divider dashed={true}/>
<Text strong={true}>Description </Text> <Text strong={true}>Description </Text>
@ -546,6 +554,7 @@ class AppDetailsDrawer extends React.Component {
)} )}
<Divider dashed={true}/> <Divider dashed={true}/>
<Text strong={true}>Categories </Text> <Text strong={true}>Categories </Text>
{!isCategoriesEditEnabled && (<Text {!isCategoriesEditEnabled && (<Text
style={{color: config.theme.primaryColor, cursor: "pointer"}} style={{color: config.theme.primaryColor, cursor: "pointer"}}
@ -590,8 +599,8 @@ class AppDetailsDrawer extends React.Component {
}</span> }</span>
)} )}
<Divider dashed={true}/> <Divider dashed={true}/>
<Text strong={true}>Tags </Text> <Text strong={true}>Tags </Text>
{!isTagsEditEnabled && (<Text {!isTagsEditEnabled && (<Text
style={{color: config.theme.primaryColor, cursor: "pointer"}} style={{color: config.theme.primaryColor, cursor: "pointer"}}
@ -636,8 +645,11 @@ class AppDetailsDrawer extends React.Component {
)} )}
<Divider dashed={true}/> <Divider dashed={true}/>
{app.applicationReleases.length > 0 && (
<DetailedRating type="app" uuid={app.applicationReleases[0].uuid}/>)} <div className="app-rate">
{app.applicationReleases.length > 0 && (
<DetailedRating type="app" uuid={app.applicationReleases[0].uuid} />)}
</div>
</Spin> </Spin>
</Drawer> </Drawer>
</div> </div>

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js vendored
Unescape View File

@ -25,7 +25,6 @@ import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer";
const {Title} = Typography; const {Title} = Typography;
const Search = Input.Search; const Search = Input.Search;
class ListApps extends React.Component { class ListApps extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -67,7 +66,6 @@ class ListApps extends React.Component {
this.setState({ this.setState({
filters filters
}); });
console.log(filters);
}; };
render() { render() {
@ -88,7 +86,7 @@ class ListApps extends React.Component {
<Search <Search
placeholder="input search text" placeholder="input search text"
onSearch={this.setSearchText} onSearch={this.setSearchText}
style={{width: 200}} style={{width: 170}}
/> />
</Col> </Col>
</Row> </Row>

11
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.css
Unescape View File

@ -18,4 +18,13 @@
.app-row{ .app-row{
cursor: pointer; cursor: pointer;
} }
Table{
width: 100%;
}
.apps-table{
display: block;
overflow: auto;
}

5
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js vendored
Unescape View File

@ -132,7 +132,7 @@ class AppsTable extends React.Component {
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
const {filters} = this.props; const {filters} = this.props;
if (prevProps.filters !== this.props.filters) { if (prevProps.filters !== this.props.filters) {
console.log("d", this.props.filters); // console.log("d", this.props.filters);
this.setState({ this.setState({
filters filters
}); });
@ -212,7 +212,7 @@ class AppsTable extends React.Component {
render() { render() {
return ( return (
<div className="apps-table">
<Table <Table
rowKey={record => record.id} rowKey={record => record.id}
dataSource={this.state.apps} dataSource={this.state.apps}
@ -228,6 +228,7 @@ class AppsTable extends React.Component {
}; };
}} }}
/> />
</div>
); );
} }

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

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Layout, Menu, Icon} from 'antd'; import {Layout, Menu, Icon, Drawer, Button} from 'antd';
import {Switch, Link} from "react-router-dom"; import {Switch, Link} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
import {Redirect} from 'react-router' import {Redirect} from 'react-router'
@ -38,27 +38,107 @@ class Dashboard extends React.Component {
this.Logo = config.theme.logo; this.Logo = config.theme.logo;
} }
//functions for show the drawer
state = {
visible: false,
collapsed: false
};
showDrawer = () => {
this.setState({
visible: true,
collapsed: !this.state.collapsed
});
};
onClose = () => {
this.setState({
visible: false,
});
};
render() { render() {
return ( return (
<div> <div>
<Layout className="layout"> <Layout>
<Header style={{paddingLeft: 0, paddingRight: 0}}> <Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
<div className="logo-image"> <div className="logo-image">
<img alt="logo" src={this.Logo}/> <Link to="/publisher/apps"><img alt="logo" src={this.Logo}/></Link>
</div> </div>
<div className="web-layout">
<Menu
theme="light"
mode="horizontal"
defaultSelectedKeys={['1']}
style={{lineHeight: '64px'}}
>
<Menu.Item key="1"><Link to="/publisher/apps"><Icon
type="appstore"/>Apps</Link></Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="plus"/>
Add New App
</span>
}
>
<Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public
APP</Link></Menu.Item>
<Menu.Item key="setting:2"><Link to="/publisher/add-new-app/enterprise">Enterprise
APP</Link></Menu.Item>
<Menu.Item key="setting:3"><Link to="/publisher/add-new-app/web-clip">Web
Clip</Link></Menu.Item>
</SubMenu>
<Menu.Item key="2"><Link to="/publisher/manage"><Icon
type="control"/>Manage</Link></Menu.Item>
<SubMenu className="profile"
title={
<span className="submenu-title-wrapper">
<Icon type="user"/>
Profile
</span>
}
>
<Logout/>
</SubMenu>
</Menu>
</div>
</Header>
</Layout>
<Layout className="mobile-layout">
<div className="mobile-menu-button">
<Button type="link" onClick={this.showDrawer}>
<Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="nav-icon"/>
</Button>
</div>
<Drawer
title={<Link to="/publisher/apps"><img alt="logo" src={this.Logo} style={{marginLeft: 30}}
width={"60%"}/></Link>}
placement="left"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={false}
style={{position: 'absolute'}}
>
<Menu <Menu
theme="light" theme="light"
mode="horizontal" mode="inline"
defaultSelectedKeys={['1']} defaultSelectedKeys={['1']}
style={{lineHeight: '64px'}} style={{lineHeight: '64px', width: 231}}
> >
<Menu.Item key="1"><Link to="/publisher/apps"><Icon type="appstore"/>Apps</Link></Menu.Item> <Menu.Item key="1"><Link to="/publisher/apps"><Icon
type="appstore"/>Apps</Link></Menu.Item>
<SubMenu <SubMenu
title={ title={
<span className="submenu-title-wrapper"> <span className="submenu-title-wrapper">
<Icon type="plus"/> <Icon type="plus"/>
Add New App Add New App
</span> </span>
} }
> >
<Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public <Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public
@ -70,23 +150,26 @@ class Dashboard extends React.Component {
</SubMenu> </SubMenu>
<Menu.Item key="2"><Link to="/publisher/manage"><Icon <Menu.Item key="2"><Link to="/publisher/manage"><Icon
type="control"/>Manage</Link></Menu.Item> type="control"/>Manage</Link></Menu.Item>
</Menu>
<SubMenu className="profile" </Drawer>
title={ <Menu
<span className="submenu-title-wrapper"> mode="horizontal"
defaultSelectedKeys={['1']}
style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}
>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="user"/> <Icon type="user"/>
Profile
</span> </span>
} }
> >
<Logout/> <Logout/>
</SubMenu> </SubMenu>
</Menu>
</Menu>
</Header>
</Layout> </Layout>
<Layout>
<Layout className="dashboard-body">
<Content style={{marginTop: 2}}> <Content style={{marginTop: 2}}>
<Switch> <Switch>
<Redirect exact from="/publisher" to="/publisher/apps"/> <Redirect exact from="/publisher" to="/publisher/apps"/>
@ -95,7 +178,7 @@ class Dashboard extends React.Component {
))} ))}
</Switch> </Switch>
</Content> </Content>
<Footer style={{textAlign: 'center'}}> <Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
©2019 entgra.io ©2019 entgra.io
</Footer> </Footer>
</Layout> </Layout>

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

@ -40,7 +40,6 @@
} }
.logo-image { .logo-image {
/*width: 120px;*/
height: 31px; height: 31px;
margin: 0 5px 16px 24px; margin: 0 5px 16px 24px;
float: left; float: left;
@ -60,8 +59,63 @@
margin-right: 2%; margin-right: 2%;
} }
.mobile-layout{
visibility: hidden;
position: absolute;
}
.mobile-menu-button{
margin-left: 4%;
position: fixed;
}
.nav-icon{
margin-top: 10%;
font-size: 27px;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.main-container{ .main-container{
padding: 24px; padding: 24px;
} }
}
@media screen and (max-width: 700px) {
.web-layout{
visibility: hidden;
}
.mobile-layout{
visibility: visible;
z-index: 1;
}
.mobile-menu-button {
margin-top: 4%;
}
Header{
position: fixed;
z-index: 1;
width: 100%;
}
.dashboard-body{
margin-top: 15%;
}
.logo-image {
margin-left: 20%;
}
}
@media only screen and (max-height: 500px) {
.mobile-menu-button{
margin-top: 2%;
}
.dashboard-body{
margin-top: 10%;
}
} }

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

@ -17,8 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Layout, Menu, Icon} from 'antd'; import {Layout, Menu, Icon, Drawer, Button} from 'antd';
const {Header, Content, Footer} = Layout; const {Header, Content, Footer} = Layout;
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"; import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
@ -81,60 +80,134 @@ class Dashboard extends React.Component {
}) })
}; };
//functions for show the drawer
state = {
visible: false,
collapsed: false
};
showDrawer = () => {
this.setState({
visible: true,
collapsed: !this.state.collapsed,
});
};
onClose = () => {
this.setState({
visible: false,
});
};
render() { render() {
const config = this.props.context; const config = this.props.context;
const {selectedKeys, deviceTypes} = this.state; const {selectedKeys, deviceTypes} = this.state;
const DeviceTypesData = deviceTypes.map((deviceType) => {
const platform = deviceType.name;
const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default.icon;
let theme = defaultPlatformIcons.default.theme;
if (defaultPlatformIcons.hasOwnProperty(platform)) {
icon = defaultPlatformIcons[platform].icon;
theme = defaultPlatformIcons[platform].theme;
}
return (
<Menu.Item key={platform}>
<Link to={"/store/" + platform}>
<Icon type={icon} theme={theme}/>
{platform}
</Link>
</Menu.Item>
);
});
return ( return (
<div> <div>
<Layout className="layout"> <Layout>
<Header style={{paddingLeft: 0, paddingRight: 0}}> <Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
<div className="logo-image"> <div className="logo-image">
<img alt="logo" src={this.logo}/> <Link to="/store/android"><img alt="logo" src={this.logo}/></Link>
</div>
<div className="web-layout">
<Menu
theme="light"
mode="horizontal"
defaultSelectedKeys={selectedKeys}
style={{lineHeight: '64px'}}
>
{DeviceTypesData}
<Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
Clips</Link></Menu.Item>
<SubMenu className="profile"
title={
<span className="submenu-title-wrapper">
<Icon type="user"/>
Profile
</span>
}
>
<Logout/>
</SubMenu>
</Menu>
</div> </div>
</Header>
</Layout>
<Layout className="mobile-layout">
<div className="mobile-menu-button">
<Button type="link" onClick={this.showDrawer}>
<Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="nav-icon"/>
</Button>
</div>
<Drawer
title={<Link to="/store/android">
<img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
</Link>}
placement="left"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={false}
style={{position: 'absolute'}}
>
<Menu <Menu
theme="light" theme="light"
mode="horizontal" mode="inline"
defaultSelectedKeys={selectedKeys} defaultSelectedKeys={selectedKeys}
style={{lineHeight: '64px'}} style={{lineHeight: '64px', width: 231}}
> >
{
deviceTypes.map((deviceType) => { {DeviceTypesData}
const platform = deviceType.name;
const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default.icon;
let theme = defaultPlatformIcons.default.theme;
if (defaultPlatformIcons.hasOwnProperty(platform)) {
icon = defaultPlatformIcons[platform].icon;
theme = defaultPlatformIcons[platform].theme;
}
return (
<Menu.Item key={platform}>
<Link to={"/store/" + platform}>
<Icon type={icon} theme={theme}/>
{platform}
</Link>
</Menu.Item>
);
})
}
<Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
Clips</Link></Menu.Item> Clips</Link></Menu.Item>
<SubMenu className="profile" </Menu>
title={ </Drawer>
<span className="submenu-title-wrapper"> <Menu
mode="horizontal"
defaultSelectedKeys={selectedKeys}
style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}
>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="user"/> <Icon type="user"/>
Profile
</span> </span>
} }
> >
<Logout/> <Logout/>
</SubMenu> </SubMenu>
</Menu> </Menu>
</Header>
</Layout> </Layout>
<Layout>
<Layout className="dashboard-body">
<Content style={{padding: '0 0'}}> <Content style={{padding: '0 0'}}>
<Switch> <Switch>
{this.state.routes.map((route) => ( {this.state.routes.map((route) => (
@ -145,7 +218,7 @@ class Dashboard extends React.Component {
</Switch> </Switch>
</Content> </Content>
<Footer style={{textAlign: 'center'}}> <Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
©2019 entgra.io ©2019 entgra.io
</Footer> </Footer>
</Layout> </Layout>

Write Preview
Loading…
Cancel
Save