Add configuration to change theme color in APPM publisher UI

feature/appm-store/pbac
Jayasanka 5 years ago
parent 8108122b0a
commit 60ac2b6495

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

@ -21,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 0 16px 20px;
float: left; float: left;
} }
.logo img{ .logo-image img{
height: 35px; height: 35px;
} }

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

@ -1,5 +1,5 @@
import React from "react"; 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 axios from "axios";
import config from "../../../../public/conf/config.json"; 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"]; 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); this.props.setFilters(values);
}); });
}; };
@ -152,6 +159,15 @@ class FiltersForm extends React.Component {
</Col> </Col>
</Row> </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"> <Form.Item label="Categories">
{getFieldDecorator('categories', { {getFieldDecorator('categories', {
rules: [{ rules: [{
@ -202,8 +218,7 @@ class FiltersForm extends React.Component {
}) })
} }
<Option <Option
key="all"> key="ALL">All
all
</Option> </Option>
</Select> </Select>
)} )}
@ -244,6 +259,7 @@ class FiltersForm extends React.Component {
<Option value="ENTERPRISE">Enterprise</Option> <Option value="ENTERPRISE">Enterprise</Option>
<Option value="PUBLIC">Public</Option> <Option value="PUBLIC">Public</Option>
<Option value="WEB_CLIP">Web APP</Option> <Option value="WEB_CLIP">Web APP</Option>
<Option value="ALL">All</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
@ -251,10 +267,11 @@ class FiltersForm extends React.Component {
<Form.Item label="Subscription Type"> <Form.Item label="Subscription Type">
{getFieldDecorator('subscriptionType', {})( {getFieldDecorator('subscriptionType', {})(
<Checkbox.Group style={{width: '100%'}}> <Radio.Group style={{width: '100%'}}>
<Checkbox value="FREE">Free</Checkbox><br/> <Radio value="FREE">Free</Radio>
<Checkbox value="PAID">Paid</Checkbox><br/> <Radio value="PAID">Paid</Radio>
</Checkbox.Group>, <Radio value="ALL">All</Radio>
</Radio.Group>,
)} )}
</Form.Item> </Form.Item>
<Divider/> <Divider/>

@ -45,12 +45,14 @@ const columns = [
const defaultPlatformIcons = config.defaultPlatformIcons; const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default.icon; let icon = defaultPlatformIcons.default.icon;
let color = defaultPlatformIcons.default.color; let color = defaultPlatformIcons.default.color;
let theme = defaultPlatformIcons.default.theme;
if (defaultPlatformIcons.hasOwnProperty(platform)) { if (defaultPlatformIcons.hasOwnProperty(platform)) {
icon = defaultPlatformIcons[platform].icon; icon = defaultPlatformIcons[platform].icon;
color = defaultPlatformIcons[platform].color; color = defaultPlatformIcons[platform].color;
theme = defaultPlatformIcons[platform].theme;
} }
return (<span style={{fontSize: 20, color: color, textAlign: "center"}}><Icon type={icon} 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 React from "react";
import "antd/dist/antd.css"; //import "antd/dist/antd.css";
import { import {
Card, Card,
Button, Button,

@ -21,9 +21,9 @@ 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 style={{width: 120}} className="logo-image">
<img src={Logo}/> <img alt="logo" src={Logo}/>
</div> </div>
<Menu <Menu
theme="light" theme="light"
@ -40,9 +40,12 @@ class Dashboard extends React.Component {
</span> </span>
} }
> >
<Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public APP</Link></Menu.Item> <Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public
<Menu.Item key="setting:2"><Link to="/publisher/add-new-app/enterprise">Enterprise APP</Link></Menu.Item> 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: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> </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>

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

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

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

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

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

@ -48,7 +48,7 @@ const config = {
use: [ use: [
{ {
loader: "html-loader", loader: "html-loader",
options: { minimize: true } options: {minimize: true}
} }
] ]
}, },
@ -59,7 +59,7 @@ const config = {
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
MiniCssExtractPlugin.loader, MiniCssExtractPlugin.loader,
"css-loader", "css-loader",
"postcss-loader", "postcss-loader",
"sass-loader" "sass-loader"
@ -67,7 +67,7 @@ const config = {
}, },
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ 'style-loader', 'scss-loader' ] use: ['style-loader', 'scss-loader']
}, },
{ {
test: /\.less$/, test: /\.less$/,
@ -77,14 +77,21 @@ const config = {
}, },
{ {
loader: "css-loader", loader: "css-loader",
options: { // options: {
sourceMap: true, // sourceMap: true,
modules: true, // modules: true,
localIdentName: "[local]___[hash:base64:5]" // 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, test: /\.(png|jpe?g)/i,
use: [ use: [
{ {
loader: "url-loader", loader: "url-loader",
options: { options: {
name: "./img/[name].[ext]", name: "./img/[name].[ext]",
limit: 10000 limit: 10000
} }
}, },
{ {
loader: "img-loader" loader: "img-loader"
} }
] ]
} }
] ]

Loading…
Cancel
Save