community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theming feature to store

Browse Source
This commit is contained in:
Jayasanka 2019-07-11 17:49:28 +05:30
parent c65c0fb094
commit e5e7dc5bcc
23 changed files with 181 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

44
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css Normal file
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
View File

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

33
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
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
View File

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

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

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

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

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

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

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

@ -1,5 +1,4 @@
import React from "react";
//import "antd/dist/antd.css";
import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
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
View File

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

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

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

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

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

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

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

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

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

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

44
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css Normal file
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
View File

@ -1,6 +1,6 @@
import React from "react";
import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
import styles from './Login.less';
import './Login.css';
import axios from 'axios';
import config from "../../public/conf/config.json";
@ -10,16 +10,27 @@ const {Text} = Typography;
class Login extends React.Component {
render() {
return (
<div className={styles.main}>
<div className={styles.content}>
<div>
<div className="background">
</div>
<div className="content">
<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}}>
<Col>
<img className={styles.logo} src={require('../../public/images/logo.svg')}/>
<Col style={{textAlign: "center"}}>
<img style={
{
marginTop: 36,
height: 60
}
}
src={config.theme.logo}/>
</Col>
</Row>
<Title type="secondary" level={2}>Login</Title>
<Title level={2}>Login</Title>
<WrappedNormalLoginForm/>
</Col>
@ -99,7 +110,8 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('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"/>
)}
</Form.Item>
@ -107,7 +119,7 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('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"
placeholder="Password"/>
)}

34
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.less
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
View File

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

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

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

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

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

@ -18,11 +18,12 @@
var path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const configurations = require("./public/conf/config.json");
const config = {
devtool: "source-map",
output: {
publicPath: '/store/' // <---- this
publicPath: '/store/'
},
watch: false,
resolve: {
@ -77,14 +78,16 @@ const config = {
},
{
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,
},
}
]
},