mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Merge branch 'application-mgt-new' into 'application-mgt-new'
Fix the responsive issues and the web-clip device type issue See merge request entgra/carbon-device-mgt!214
This commit is contained in:
commit
27ce00b143
@ -39,29 +39,15 @@
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
/*width: 120px;*/
|
||||
height: 31px;
|
||||
margin: 0 5px 16px 24px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.logo-image img{
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.main-container{
|
||||
background: #f0f2f5;
|
||||
min-height: 780px
|
||||
}
|
||||
|
||||
.profile{
|
||||
float:right;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
|
||||
.main-container{
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -33,6 +33,18 @@
|
||||
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{
|
||||
color: #737373;
|
||||
font-weight: 400;
|
||||
|
||||
@ -23,3 +23,11 @@
|
||||
.release-card:hover {
|
||||
background-color: rgba(15, 188, 249,0.1);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
||||
.release-card{
|
||||
width: 210%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -32,13 +32,11 @@ import {
|
||||
Icon,
|
||||
Card
|
||||
} from 'antd';
|
||||
|
||||
import "../../../../App.css";
|
||||
import DetailedRating from "../../detailed-rating/DetailedRating";
|
||||
import {Link} from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import ReactQuill from "react-quill";
|
||||
import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser';
|
||||
import ReactHtmlParser from 'react-html-parser';
|
||||
import "./AppDetailsDrawer.css";
|
||||
import pSBC from "shade-blend-color";
|
||||
import {withConfigContext} from "../../../../context/ConfigContext";
|
||||
@ -71,6 +69,8 @@ const formats = [
|
||||
class AppDetailsDrawer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const drawerWidth = window.innerWidth<=768 ? '80%' : '40%';
|
||||
|
||||
this.state = {
|
||||
loading: false,
|
||||
name: "",
|
||||
@ -85,6 +85,8 @@ class AppDetailsDrawer extends React.Component {
|
||||
isDescriptionEditEnabled: false,
|
||||
isCategoriesEditEnabled: false,
|
||||
isTagsEditEnabled: false,
|
||||
drawer: null,
|
||||
drawerWidth
|
||||
};
|
||||
}
|
||||
|
||||
@ -188,7 +190,6 @@ class AppDetailsDrawer extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// change the app name
|
||||
handleNameSave = name => {
|
||||
const config = this.props.context;
|
||||
@ -412,7 +413,6 @@ class AppDetailsDrawer extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const config = this.props.context;
|
||||
const {app, visible, onClose} = this.props;
|
||||
@ -458,11 +458,12 @@ class AppDetailsDrawer extends React.Component {
|
||||
<div>
|
||||
<Drawer
|
||||
placement="right"
|
||||
width={640}
|
||||
width={this.state.drawerWidth}
|
||||
closable={false}
|
||||
onClose={onClose}
|
||||
visible={visible}
|
||||
>
|
||||
|
||||
<Spin spinning={loading} delay={500}>
|
||||
<div style={{textAlign: "center"}}>
|
||||
{avatar}
|
||||
@ -473,39 +474,46 @@ class AppDetailsDrawer extends React.Component {
|
||||
|
||||
<Text strong={true}>Releases </Text>
|
||||
{/*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
|
||||
new release</Button></Link>)}
|
||||
<List
|
||||
style={{paddingTop: 16}}
|
||||
grid={{gutter: 16, column: 2}}
|
||||
dataSource={app.applicationReleases}
|
||||
renderItem={release => (
|
||||
<List.Item>
|
||||
<Link to={"apps/releases/" + release.uuid}>
|
||||
<Card className="release-card">
|
||||
<Meta
|
||||
avatar={
|
||||
<Avatar size="large" shape="square" src={release.iconPath}/>
|
||||
}
|
||||
title={release.version}
|
||||
description={
|
||||
<div style={{
|
||||
fontSize: "0.7em"
|
||||
}}>
|
||||
<IconText type="check" text={release.currentStatus}/>
|
||||
<Divider type="vertical"/>
|
||||
<IconText type="upload" text={release.releaseType}/>
|
||||
<Divider type="vertical"/>
|
||||
<IconText type="star-o" text={release.rating.toFixed(1)}/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</Link>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="releases-details">
|
||||
|
||||
{(app.type === "ENTERPRISE") && (
|
||||
<Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button"
|
||||
size="small">Add
|
||||
new release</Button></Link>)}
|
||||
<List
|
||||
style={{paddingTop: 16}}
|
||||
grid={{gutter: 16, column: 2}}
|
||||
dataSource={app.applicationReleases}
|
||||
renderItem={release => (
|
||||
<List.Item>
|
||||
<Link to={"apps/releases/" + release.uuid}>
|
||||
<Card className="release-card">
|
||||
<Meta
|
||||
avatar={
|
||||
<Avatar size="large" shape="square" src={release.iconPath}/>
|
||||
}
|
||||
title={release.version}
|
||||
description={
|
||||
<div style={{
|
||||
fontSize: "0.7em"
|
||||
}} className="description-view">
|
||||
<IconText type="check" text={release.currentStatus}/>
|
||||
<Divider type="vertical"/>
|
||||
<IconText type="upload" text={release.releaseType}/>
|
||||
<Divider type="vertical"/>
|
||||
<IconText type="star-o" text={release.rating.toFixed(1)}/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</Link>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<Divider dashed={true}/>
|
||||
|
||||
<Text strong={true}>Description </Text>
|
||||
@ -546,6 +554,7 @@ class AppDetailsDrawer extends React.Component {
|
||||
)}
|
||||
|
||||
<Divider dashed={true}/>
|
||||
|
||||
<Text strong={true}>Categories </Text>
|
||||
{!isCategoriesEditEnabled && (<Text
|
||||
style={{color: config.theme.primaryColor, cursor: "pointer"}}
|
||||
@ -590,8 +599,8 @@ class AppDetailsDrawer extends React.Component {
|
||||
}</span>
|
||||
)}
|
||||
|
||||
|
||||
<Divider dashed={true}/>
|
||||
|
||||
<Text strong={true}>Tags </Text>
|
||||
{!isTagsEditEnabled && (<Text
|
||||
style={{color: config.theme.primaryColor, cursor: "pointer"}}
|
||||
@ -636,8 +645,11 @@ class AppDetailsDrawer extends React.Component {
|
||||
)}
|
||||
|
||||
<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>
|
||||
</Drawer>
|
||||
</div>
|
||||
|
||||
@ -25,7 +25,6 @@ import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer";
|
||||
const {Title} = Typography;
|
||||
const Search = Input.Search;
|
||||
|
||||
|
||||
class ListApps extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -67,7 +66,6 @@ class ListApps extends React.Component {
|
||||
this.setState({
|
||||
filters
|
||||
});
|
||||
console.log(filters);
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -88,7 +86,7 @@ class ListApps extends React.Component {
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
onSearch={this.setSearchText}
|
||||
style={{width: 200}}
|
||||
style={{width: 170}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@ -19,3 +19,9 @@
|
||||
.app-row{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.apps-table{
|
||||
display: block;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -132,7 +132,6 @@ class AppsTable extends React.Component {
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
const {filters} = this.props;
|
||||
if (prevProps.filters !== this.props.filters) {
|
||||
console.log("d", this.props.filters);
|
||||
this.setState({
|
||||
filters
|
||||
});
|
||||
@ -212,7 +211,7 @@ class AppsTable extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<div className="apps-table">
|
||||
<Table
|
||||
rowKey={record => record.id}
|
||||
dataSource={this.state.apps}
|
||||
@ -228,6 +227,7 @@ class AppsTable extends React.Component {
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.logo-image {
|
||||
height: 31px;
|
||||
margin: 0 5px 16px 24px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.logo-image img{
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.profile{
|
||||
float:right;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.mobile-layout{
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mobile-menu-button{
|
||||
margin-left: 4%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.bar-icon{
|
||||
margin-top: 10%;
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
*/
|
||||
|
||||
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 RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
|
||||
import {Redirect} from 'react-router'
|
||||
import "../../App.css";
|
||||
import "./Dashboard.css";
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
import Logout from "./logout/Logout";
|
||||
|
||||
@ -38,27 +38,107 @@ class Dashboard extends React.Component {
|
||||
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() {
|
||||
return (
|
||||
<div>
|
||||
<Layout className="layout">
|
||||
<Header style={{paddingLeft: 0, paddingRight: 0}}>
|
||||
<Layout>
|
||||
<Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
|
||||
<div className="logo-image">
|
||||
<img alt="logo" src={this.Logo}/>
|
||||
<Link to="/publisher/apps"><img alt="logo" src={this.Logo}/></Link>
|
||||
</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="bar-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
|
||||
theme="light"
|
||||
mode="horizontal"
|
||||
mode="inline"
|
||||
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
|
||||
title={
|
||||
<span className="submenu-title-wrapper">
|
||||
<Icon type="plus"/>
|
||||
Add New App
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public
|
||||
@ -70,23 +150,26 @@ class Dashboard extends React.Component {
|
||||
</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>
|
||||
|
||||
</Header>
|
||||
</Drawer>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={['1']}
|
||||
style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}
|
||||
>
|
||||
<SubMenu
|
||||
title={
|
||||
<span className="submenu-title-wrapper">
|
||||
<Icon type="user"/>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Logout/>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</Layout>
|
||||
<Layout>
|
||||
|
||||
<Layout className="dashboard-body">
|
||||
<Content style={{marginTop: 2}}>
|
||||
<Switch>
|
||||
<Redirect exact from="/publisher" to="/publisher/apps"/>
|
||||
@ -95,7 +178,7 @@ class Dashboard extends React.Component {
|
||||
))}
|
||||
</Switch>
|
||||
</Content>
|
||||
<Footer style={{textAlign: 'center'}}>
|
||||
<Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
|
||||
©2019 entgra.io
|
||||
</Footer>
|
||||
</Layout>
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
margin: 16px 0 16px 20px;
|
||||
float: left;
|
||||
|
||||
img{
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input{
|
||||
min-height: 0;
|
||||
}
|
||||
@ -1,3 +1,21 @@
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
const presets = [ "@babel/preset-env",
|
||||
|
||||
@ -39,29 +39,15 @@
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
/*width: 120px;*/
|
||||
height: 31px;
|
||||
margin: 0 5px 16px 24px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.logo-image img{
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.main-container{
|
||||
background: #f0f2f5;
|
||||
min-height: 780px
|
||||
}
|
||||
|
||||
.profile{
|
||||
float:right;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
|
||||
.main-container{
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -114,7 +114,6 @@ class DeviceInstall extends React.Component {
|
||||
|
||||
rowSelection = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
this.setState({
|
||||
selectedRows: selectedRows
|
||||
})
|
||||
@ -142,9 +141,12 @@ class DeviceInstall extends React.Component {
|
||||
limit: 10,
|
||||
status: "ACTIVE",
|
||||
requireDeviceInfo: true,
|
||||
type: deviceType
|
||||
};
|
||||
|
||||
if (deviceType !== 'ANY') {
|
||||
extraParams.type = deviceType;
|
||||
}
|
||||
|
||||
// note: encode with '%26' not '&'
|
||||
const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('&');
|
||||
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.logo-image {
|
||||
height: 31px;
|
||||
margin: 0 5px 16px 24px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.logo-image img{
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.profile{
|
||||
float:right;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.mobile-layout{
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mobile-menu-button{
|
||||
margin-left: 4%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.bar-icon{
|
||||
margin-top: 10%;
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.main-container{
|
||||
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: 15%;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 500px) {
|
||||
.mobile-menu-button{
|
||||
margin-top: 2%;
|
||||
}
|
||||
.dashboard-body{
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
@ -17,14 +17,13 @@
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {Layout, Menu, Icon} from 'antd';
|
||||
|
||||
import {Layout, Menu, Icon, Drawer, Button} from 'antd';
|
||||
const {Header, Content, Footer} = Layout;
|
||||
import {Link} from "react-router-dom";
|
||||
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
|
||||
import {Switch} from 'react-router';
|
||||
import axios from "axios";
|
||||
import "../../App.css";
|
||||
import "./Dashboard.css";
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
import Logout from "./logout/Logout";
|
||||
|
||||
@ -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() {
|
||||
const config = this.props.context;
|
||||
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 (
|
||||
<div>
|
||||
<Layout className="layout">
|
||||
<Header style={{paddingLeft: 0, paddingRight: 0}}>
|
||||
<Layout>
|
||||
<Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
|
||||
<div className="logo-image">
|
||||
<img alt="logo" src={this.logo}/>
|
||||
<Link to="/store/android"><img alt="logo" src={this.logo}/></Link>
|
||||
</div>
|
||||
<Menu
|
||||
theme="light"
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={selectedKeys}
|
||||
style={{lineHeight: '64px'}}
|
||||
>
|
||||
{
|
||||
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>
|
||||
);
|
||||
})
|
||||
}
|
||||
<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">
|
||||
<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>
|
||||
}
|
||||
>
|
||||
<Logout/>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</div>
|
||||
</Header>
|
||||
</Layout>
|
||||
<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="bar-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
|
||||
theme="light"
|
||||
mode="inline"
|
||||
defaultSelectedKeys={selectedKeys}
|
||||
style={{lineHeight: '64px', width: 231}}
|
||||
>
|
||||
|
||||
{DeviceTypesData}
|
||||
|
||||
<Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
|
||||
Clips</Link></Menu.Item>
|
||||
|
||||
</Menu>
|
||||
</Drawer>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={selectedKeys}
|
||||
style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}
|
||||
>
|
||||
<SubMenu
|
||||
title={
|
||||
<span className="submenu-title-wrapper">
|
||||
<Icon type="user"/>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Logout/>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</Layout>
|
||||
|
||||
<Layout className="dashboard-body">
|
||||
<Content style={{padding: '0 0'}}>
|
||||
<Switch>
|
||||
{this.state.routes.map((route) => (
|
||||
@ -145,7 +218,7 @@ class Dashboard extends React.Component {
|
||||
</Switch>
|
||||
|
||||
</Content>
|
||||
<Footer style={{textAlign: 'center'}}>
|
||||
<Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
|
||||
©2019 entgra.io
|
||||
</Footer>
|
||||
</Layout>
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
margin: 16px 0 16px 20px;
|
||||
float: left;
|
||||
|
||||
img{
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input{
|
||||
min-height: 0;
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
~ Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
~ Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
~
|
||||
~ WSO2 Inc. licenses this file to you under the Apache License,
|
||||
~ Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
~ Version 2.0 (the "License"); you may not use this file except
|
||||
~ in compliance with the License.
|
||||
~ You may obtain a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing,
|
||||
~ software distributed under the License is distributed on an
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
<parent>
|
||||
<groupId>org.wso2.carbon.devicemgt</groupId>
|
||||
<artifactId>application-mgt</artifactId>
|
||||
<artifactId>device-mgt</artifactId>
|
||||
<version>3.2.9-SNAPSHOT</version>
|
||||
</parent>
|
||||
<artifactId>io.entgra.device.mgt.ui</artifactId>
|
||||
|
||||
@ -1,3 +1,21 @@
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
const presets = [ "@babel/preset-env",
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
/*!
|
||||
~ Copyright (c) 2017 WSO2 Inc. (http://wso2.com) All Rights Reserved.
|
||||
~
|
||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||||
~ you may not use this file except in compliance with the License.
|
||||
~ You may obtain a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing, software
|
||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
~ See the License for the specific language governing permissions and
|
||||
~ limitations under the License.
|
||||
*/
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
|
||||
@font-face {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,18 +1,20 @@
|
||||
/*!
|
||||
~ Copyright (c) 2017 WSO2 Inc. (http://wso2.com) All Rights Reserved.
|
||||
~
|
||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||||
~ you may not use this file except in compliance with the License.
|
||||
~ You may obtain a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing, software
|
||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
~ See the License for the specific language governing permissions and
|
||||
~ limitations under the License.
|
||||
*/
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
%icon-base {
|
||||
&:before {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
|
||||
Loading…
Reference in New Issue
Block a user