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

Add theming feature to store

Browse Source
feature/appm-store/pbac
Jayasanka 5 years ago
parent c65c0fb094
commit e5e7dc5bcc
23 changed files with 181 additions and 163 deletions
Show Stats Download Patch File Download Diff File

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
Unescape View File

@ -2,8 +2,8 @@
"theme": { "theme": {
"type": "default", "type": "default",
"value": "lightBaseTheme", "value": "lightBaseTheme",
"logo" : "https://www.brandchannel.com/wp-content/uploads/2016/05/instagram-new-logo-may-2016.jpg", "logo" : "https://entgra.io/assets/images/svg/logo.svg",
"primaryColor": "#F62459" "primaryColor": "rgb(24, 144, 255)"
}, },
"serverConfig": { "serverConfig": {
"protocol": "https", "protocol": "https",

1
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js vendored
Unescape View File

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
//import "antd/dist/antd.css";
import { import {
Card, Card,
Button, Button,

44
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css
Unescape View File

@ -0,0 +1,44 @@
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg) scale(1.0);
}
100% {
-moz-transform: rotate(360deg) scale(0.1);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg) scale(1.0);
}
100% {
-webkit-transform: rotate(360deg) scale(0.1);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg) scale(1.0);
}
100% {
-webkit-transform: rotate(360deg) scale(0.1);
transform: rotate(360deg) scale(0.1);
}
}
.background {
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
animation: spin 200s infinite linear;
}
.content {
position: relative;
z-index: 1;
}

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

@ -1,8 +1,9 @@
import React from "react"; import React from "react";
import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd'; import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
import styles from './Login.less'; import './Login.css';
import axios from 'axios'; import axios from 'axios';
import config from "../../public/conf/config.json"; import config from "../../public/conf/config.json";
import "./Login.css";
const {Title} = Typography; const {Title} = Typography;
const {Text} = Typography; const {Text} = Typography;
@ -10,14 +11,12 @@ const {Text} = Typography;
class Login extends React.Component { class Login extends React.Component {
render() { render() {
return ( return (
<div className={styles.main}> <div>
<div style={{ <div
backgroundImage: "url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg')", className="background"
backgroundRepeat: "no-repeat", >
backgroundPosition: "center 110px", </div>
backgroundSize: "100%", <div className="content">
height: 1500
}}>
<Row> <Row>
<Col xs={3} sm={3} md={10}> <Col xs={3} sm={3} md={10}>
@ -31,7 +30,7 @@ class Login extends React.Component {
height: 60 height: 60
} }
} }
className={styles.logo} src={config.theme.logo}/> src={config.theme.logo}/>
</Col> </Col>
</Row> </Row>
<Title level={2}>Login</Title> <Title level={2}>Login</Title>
@ -122,7 +121,7 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{required: true, message: 'Please input your Password!'}], rules: [{required: true, message: 'Please input your Password!'}],
})( })(
<Input style={{height: 32}} className={styles.input} <Input style={{height: 32}}
prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password" prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
placeholder="Password"/> placeholder="Password"/>
)} )}

33
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
Unescape View File

@ -1,33 +0,0 @@
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
.header {
color: @nice-blue;
}
.main{
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
.header {
color: @nice-blue;
}
}
.content{
padding-top: 128px;
}
.logo{
margin-top: 36px;
height: 44px;
width: 100%;
}
input{
min-height: 0;
}

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

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import {Layout, Menu, Icon} from 'antd'; import {Layout, Menu, Icon} from 'antd';
// import Logo from "../../../public/images/logo.svg";
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'

1
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js vendored
Unescape View File

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
//import "antd/dist/antd.css";
import { import {
PageHeader, PageHeader,
Typography Typography

1
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js vendored
Unescape View File

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
//import "antd/dist/antd.css";
import { import {
PageHeader, PageHeader,
Typography Typography

1
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js vendored
Unescape View File

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
//import "antd/dist/antd.css";
import { import {
PageHeader, PageHeader,
Typography Typography

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

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
//import "antd/dist/antd.css";
import {PageHeader, Typography,Input, Button, Row, Col} from "antd"; import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
import ListApps from "../../../components/apps/list-apps/ListApps"; import ListApps from "../../../components/apps/list-apps/ListApps";

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

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
//import "antd/dist/antd.css";
import {PageHeader, Typography, Input, Button, Row, Col} from "antd"; import {PageHeader, Typography, Input, Button, Row, Col} from "antd";
import ManageCategories from "../../../components/manage/categories/ManageCategories"; import ManageCategories from "../../../components/manage/categories/ManageCategories";
import ManageTags from "../../../components/manage/categories/ManageTags"; import ManageTags from "../../../components/manage/categories/ManageTags";

7
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
Unescape View File

@ -23,7 +23,7 @@ const configurations = require("./public/conf/config.json");
const config = { const config = {
devtool: "source-map", devtool: "source-map",
output: { output: {
publicPath: '/publisher/' // <---- this publicPath: '/publisher/'
}, },
watch: false, watch: false,
resolve: { resolve: {
@ -78,11 +78,6 @@ const config = {
}, },
{ {
loader: "css-loader", loader: "css-loader",
// options: {
// sourceMap: true,
// modules: true,
// localIdentName: "[local]___[hash:base64:5]"
// }
}, },
{ {
loader: "less-loader", loader: "less-loader",

50
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
Unescape View File

@ -10,24 +10,22 @@
}, },
"license": "Apache License 2.0", "license": "Apache License 2.0",
"dependencies": { "dependencies": {
"acorn": "^6.1.1", "acorn": "^6.2.0",
"antd": "^3.15.0", "antd": "^3.20.1",
"axios": "^0.18.0", "axios": "^0.18.1",
"d3": "^5.9.2", "d3": "^5.9.7",
"dagre": "^0.8.4", "dagre": "^0.8.4",
"javascript-time-ago": "^2.0.1", "javascript-time-ago": "^2.0.1",
"keymirror": "^0.1.1", "keymirror": "^0.1.1",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"rc-viewer": "0.0.9", "rc-viewer": "0.0.9",
"react": "^16.8.4", "react-d3-graph": "^2.1.0",
"react-d3-graph": "^2.0.2",
"react-dom": "^16.8.4",
"react-highlight-words": "^0.16.0", "react-highlight-words": "^0.16.0",
"react-image-viewer-zoom": "^1.0.36", "react-image-viewer-zoom": "^1.0.36",
"react-infinite-scroller": "^1.2.4", "react-infinite-scroller": "^1.2.4",
"react-router": "latest", "react-router": "^5.0.1",
"react-router-config": "^5.0.0", "react-router-config": "^5.0.1",
"react-router-dom": "latest", "react-router-dom": "^5.0.1",
"react-scripts": "2.1.8", "react-scripts": "2.1.8",
"react-star-ratings": "^2.3.0", "react-star-ratings": "^2.3.0",
"react-twemoji": "^0.2.3", "react-twemoji": "^0.2.3",
@ -36,16 +34,16 @@
"storm-react-diagrams": "^5.2.1" "storm-react-diagrams": "^5.2.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0", "@babel/core": "^7.5.4",
"@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/preset-env": "^7.0.0", "@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0", "@babel/register": "^7.4.4",
"babel-loader": "^8.0.0", "babel-loader": "^8.0.6",
"body-parser": "^1.18.3", "body-parser": "^1.19.0",
"chai": "^4.1.2", "chai": "^4.1.2",
"css-loader": "^0.28.11", "css-loader": "^0.28.11",
"express": "^4.16.4", "express": "^4.17.1",
"express-pino-logger": "^4.0.0", "express-pino-logger": "^4.0.0",
"file-loader": "^2.0.0", "file-loader": "^2.0.0",
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
@ -58,20 +56,20 @@
"mocha": "^5.2.0", "mocha": "^5.2.0",
"mock-local-storage": "^1.0.5", "mock-local-storage": "^1.0.5",
"node-env-run": "^3.0.2", "node-env-run": "^3.0.2",
"node-sass": "^4.11.0", "node-sass": "^4.12.0",
"nodemon": "^1.18.9", "nodemon": "^1.19.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"pino-colada": "^1.4.4", "pino-colada": "^1.4.5",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"react": "^15.6.2", "react": "^16.8.6",
"react-dom": "^15.6.2", "react-dom": "^16.8.6",
"react-intl": "^2.4.0", "react-intl": "^2.9.0",
"sass-loader": "^6.0.7", "sass-loader": "^6.0.7",
"style-loader": "^0.18.2", "style-loader": "^0.18.2",
"url-loader": "^1.1.2", "url-loader": "^1.1.2",
"webpack": "^4.27.1", "webpack": "^4.35.3",
"webpack-cli": "^3.1.2", "webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.1.10" "webpack-dev-server": "^3.7.2"
}, },
"scripts": { "scripts": {
"start": "webpack-dev-server --mode development --open", "start": "webpack-dev-server --mode development --open",

4
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
Unescape View File

@ -1,7 +1,9 @@
{ {
"theme": { "theme": {
"type": "default", "type": "default",
"value": "lightBaseTheme" "value": "lightBaseTheme",
"logo" : "https://entgra.io/assets/images/svg/logo.svg",
"primaryColor": "rgb(24, 144, 255)"
}, },
"serverConfig": { "serverConfig": {
"protocol": "https", "protocol": "https",

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

@ -2,16 +2,15 @@
height: 170px; height: 170px;
} }
.release-icon img{
width: 100%;
border-radius: 28%;
}
.release .release-icon{ .release .release-icon{
margin-right: 15px; margin-right: 15px;
} }
.appCard .release-icon{
margin-bottom: 10px; .release .release-icon img{
width: 100%;
border-radius: 28%;
} }
.release .release-title{ .release .release-title{
margin-left: 15px; margin-left: 15px;
} }
@ -22,14 +21,14 @@
padding: 5px; padding: 5px;
} }
.logo { .logo-image {
width: 120px; /*width: 120px;*/
height: 31px; height: 31px;
margin: 0 0 16px 20px; margin: 0 5px 16px 24px;
float: left; float: left;
} }
.logo img{ .logo-image img{
height: 35px; height: 35px;
} }

3
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js vendored
Unescape View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; import "antd/dist/antd.less";
import RouteWithSubRoutes from "./components/RouteWithSubRoutes"; import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
import { import {
BrowserRouter as Router, BrowserRouter as Router,
@ -15,7 +15,6 @@ class App extends React.Component {
} }
render() { render() {
// console.log(this.routes);
return ( return (
<Router> <Router>
<div> <div>

44
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css
Unescape View File

@ -0,0 +1,44 @@
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg) scale(1.0);
}
100% {
-moz-transform: rotate(360deg) scale(0.1);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg) scale(1.0);
}
100% {
-webkit-transform: rotate(360deg) scale(0.1);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg) scale(1.0);
}
100% {
-webkit-transform: rotate(360deg) scale(0.1);
transform: rotate(360deg) scale(0.1);
}
}
.background {
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
animation: spin 200s infinite linear;
}
.content {
position: relative;
z-index: 1;
}

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

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd'; import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
import styles from './Login.less'; import './Login.css';
import axios from 'axios'; import axios from 'axios';
import config from "../../public/conf/config.json"; import config from "../../public/conf/config.json";
@ -10,16 +10,27 @@ const {Text} = Typography;
class Login extends React.Component { class Login extends React.Component {
render() { render() {
return ( return (
<div className={styles.main}> <div>
<div className={styles.content}> <div className="background">
</div>
<div className="content">
<Row> <Row>
<Col span={4} offset={10}> <Col xs={3} sm={3} md={10}>
</Col>
<Col xs={18} sm={18} md={4}>
<Row style={{marginBottom: 20}}> <Row style={{marginBottom: 20}}>
<Col> <Col style={{textAlign: "center"}}>
<img className={styles.logo} src={require('../../public/images/logo.svg')}/> <img style={
{
marginTop: 36,
height: 60
}
}
src={config.theme.logo}/>
</Col> </Col>
</Row> </Row>
<Title type="secondary" level={2}>Login</Title> <Title level={2}>Login</Title>
<WrappedNormalLoginForm/> <WrappedNormalLoginForm/>
</Col> </Col>
@ -99,7 +110,8 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('username', { {getFieldDecorator('username', {
rules: [{required: true, message: 'Please input your username!'}], rules: [{required: true, message: 'Please input your username!'}],
})( })(
<Input name="username" style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} <Input name="username" style={{height: 32}}
prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
placeholder="Username"/> placeholder="Username"/>
)} )}
</Form.Item> </Form.Item>
@ -107,7 +119,7 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{required: true, message: 'Please input your Password!'}], rules: [{required: true, message: 'Please input your Password!'}],
})( })(
<Input name="password" style={{height: 32}} className={styles.input} <Input name="password" style={{height: 32}}
prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password" prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
placeholder="Password"/> placeholder="Password"/>
)} )}

34
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.less
Unescape View File

@ -1,34 +0,0 @@
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
.header {
color: @nice-blue;
}
.main{
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
.header {
color: @nice-blue;
}
}
.content{
padding-top: 128px;
}
.logo{
height: 44px;
margin: auto;
width: 100%;
}
input{
min-height: 0;
}

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

@ -1,13 +1,11 @@
import React from "react"; import React from "react";
import {Layout, Menu, Icon} from 'antd'; import {Layout, Menu, Icon} from 'antd';
const {Header, Content, Footer} = Layout; const {Header, Content, Footer} = Layout;
import {Link} from "react-router-dom";
import Logo from "../../../public/images/logo.svg";
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} from 'react-router'
import "../../App.css"; import "../../App.css";
import config from "../../../public/conf/config.json";
class Dashboard extends React.Component { class Dashboard extends React.Component {
constructor(props) { constructor(props) {
@ -15,7 +13,8 @@ class Dashboard extends React.Component {
this.state = { this.state = {
routes: props.routes, routes: props.routes,
selectedKeys : [] selectedKeys : []
} };
this.Logo = config.theme.logo;
} }
changeSelectedMenuItem = (key) =>{ changeSelectedMenuItem = (key) =>{
@ -29,14 +28,14 @@ class Dashboard extends React.Component {
return ( return (
<div> <div>
<Layout className="layout"> <Layout className="layout">
<Header> <Header style={{paddingLeft: 0, paddingRight: 0}}>
<div className="logo"> <div className="logo-image">
<img src={Logo}/> <img alt="logo" src={this.Logo}/>
</div> </div>
<Menu <Menu
theme="light" theme="light"
mode="horizontal" mode="horizontal"
selectedKeys={selectedKeys} defaultSelectedKeys={selectedKeys}
style={{lineHeight: '64px'}} style={{lineHeight: '64px'}}
> >
<Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item> <Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>

1
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js vendored
Unescape View File

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css";
import { import {
PageHeader, PageHeader,
Typography, Typography,

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

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css";
import AppList from "../../../components/apps/AppList"; import AppList from "../../../components/apps/AppList";
class Apps extends React.Component { class Apps extends React.Component {

17
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/webpack.config.js
Unescape View File

@ -18,11 +18,12 @@
var path = require('path'); var path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin"); const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const configurations = require("./public/conf/config.json");
const config = { const config = {
devtool: "source-map", devtool: "source-map",
output: { output: {
publicPath: '/store/' // <---- this publicPath: '/store/'
}, },
watch: false, watch: false,
resolve: { resolve: {
@ -77,14 +78,16 @@ const config = {
}, },
{ {
loader: "css-loader", loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[local]___[hash:base64:5]"
}
}, },
{ {
loader: "less-loader" loader: "less-loader",
options: {
modifyVars: {
'primary-color': configurations.theme.primaryColor,
'link-color': configurations.theme.primaryColor,
},
javascriptEnabled: true,
},
} }
] ]
}, },

Write Preview
Loading…
Cancel
Save