Add configuration to change theme color in APPM publisher UI

4.x.x
Jayasanka 5 years ago
parent 8108122b0a
commit 60ac2b6495

@ -18,16 +18,24 @@
},
"defaultPlatformIcons": {
"default": {
"icon": "mobile",
"color": "#535c68"
"icon": "global",
"color": "#535c68",
"theme": "outlined"
},
"android": {
"icon": "android",
"color": "#7db343"
"color": "#7db343",
"theme": "filled"
},
"ios": {
"icon": "apple",
"color": "#535c68"
"color": "#535c68",
"theme": "filled"
},
"windows": {
"icon": "windows",
"color": "#008cc4",
"theme": "filled"
}
}
}

@ -21,14 +21,14 @@
padding: 5px;
}
.logo {
.logo-image {
width: 120px;
height: 31px;
margin: 0 0 16px 20px;
float: left;
}
.logo img{
.logo-image img{
height: 35px;
}

@ -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,

@ -1,5 +1,5 @@
import React from "react";
import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button, Form, message} from "antd";
import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Icon, Select, Button, Form, message, Radio} from "antd";
import axios from "axios";
import config from "../../../../public/conf/config.json";
@ -26,10 +26,17 @@ class FiltersForm extends React.Component {
}
}
if(values.hasOwnProperty("deviceType") && values.deviceType==="all"){
if(values.hasOwnProperty("deviceType") && values.deviceType==="ALL"){
delete values["deviceType"];
}
if(values.hasOwnProperty("subscriptionType") && values.subscriptionType==="ALL"){
delete values["subscriptionType"];
}
if(values.hasOwnProperty("appType") && values.appType==="ALL"){
delete values["appType"];
}
this.props.setFilters(values);
});
};
@ -152,6 +159,15 @@ class FiltersForm extends React.Component {
</Col>
</Row>
<Form.Item>
{getFieldDecorator('serach', {})(
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>,
)}
</Form.Item>
<Form.Item label="Categories">
{getFieldDecorator('categories', {
rules: [{
@ -202,8 +218,7 @@ class FiltersForm extends React.Component {
})
}
<Option
key="all">
all
key="ALL">All
</Option>
</Select>
)}
@ -244,6 +259,7 @@ class FiltersForm extends React.Component {
<Option value="ENTERPRISE">Enterprise</Option>
<Option value="PUBLIC">Public</Option>
<Option value="WEB_CLIP">Web APP</Option>
<Option value="ALL">All</Option>
</Select>
)}
</Form.Item>
@ -251,10 +267,11 @@ class FiltersForm extends React.Component {
<Form.Item label="Subscription Type">
{getFieldDecorator('subscriptionType', {})(
<Checkbox.Group style={{width: '100%'}}>
<Checkbox value="FREE">Free</Checkbox><br/>
<Checkbox value="PAID">Paid</Checkbox><br/>
</Checkbox.Group>,
<Radio.Group style={{width: '100%'}}>
<Radio value="FREE">Free</Radio>
<Radio value="PAID">Paid</Radio>
<Radio value="ALL">All</Radio>
</Radio.Group>,
)}
</Form.Item>
<Divider/>

@ -45,12 +45,14 @@ const columns = [
const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default.icon;
let color = defaultPlatformIcons.default.color;
let theme = defaultPlatformIcons.default.theme;
if (defaultPlatformIcons.hasOwnProperty(platform)) {
icon = defaultPlatformIcons[platform].icon;
color = defaultPlatformIcons[platform].color;
theme = defaultPlatformIcons[platform].theme;
}
return (<span style={{fontSize: 20, color: color, textAlign: "center"}}><Icon type={icon}
theme="filled"/></span>)
theme={theme}/></span>)
}
},
{

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

@ -21,9 +21,9 @@ class Dashboard extends React.Component {
return (
<div>
<Layout className="layout">
<Header>
<div className="logo">
<img src={Logo}/>
<Header style={{paddingLeft: 0, paddingRight: 0}}>
<div style={{width: 120}} className="logo-image">
<img alt="logo" src={Logo}/>
</div>
<Menu
theme="light"
@ -40,9 +40,12 @@ class Dashboard extends React.Component {
</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>
<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>

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

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

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

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

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

@ -1,5 +1,5 @@
import React from "react";
import "antd/dist/antd.css";
//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";

@ -48,7 +48,7 @@ const config = {
use: [
{
loader: "html-loader",
options: { minimize: true }
options: {minimize: true}
}
]
},
@ -59,7 +59,7 @@ const config = {
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
@ -67,7 +67,7 @@ const config = {
},
{
test: /\.scss$/,
use: [ 'style-loader', 'scss-loader' ]
use: ['style-loader', 'scss-loader']
},
{
test: /\.less$/,
@ -77,14 +77,21 @@ const config = {
},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[local]___[hash:base64:5]"
}
// options: {
// sourceMap: true,
// modules: true,
// localIdentName: "[local]___[hash:base64:5]"
// }
},
{
loader: "less-loader"
loader: "less-loader",
options: {
modifyVars: {
'primary-color': '#1890ff',
'link-color': '#1890ff',
},
javascriptEnabled: true,
},
}
]
},
@ -95,16 +102,16 @@ const config = {
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: "url-loader",
{
loader: "url-loader",
options: {
name: "./img/[name].[ext]",
limit: 10000
name: "./img/[name].[ext]",
limit: 10000
}
},
{
loader: "img-loader"
}
},
{
loader: "img-loader"
}
]
}
]

Loading…
Cancel
Save