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

Fix Theme change issues in publisher UI

Browse Source
This commit is contained in:
Jayasanka 2019-07-11 15:39:13 +05:30
parent 60ac2b6495
commit c65c0fb094
15 changed files with 77 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,7 @@
"react-scripts": "2.1.8", "react-scripts": "2.1.8",
"react-star-ratings": "^2.3.0", "react-star-ratings": "^2.3.0",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"shade-blend-color": "^1.0.0",
"storm-react-diagrams": "^5.2.1" "storm-react-diagrams": "^5.2.1"
}, },
"devDependencies": { "devDependencies": {

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

@ -1,7 +1,9 @@
{ {
"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",
"primaryColor": "#F62459"
}, },
"serverConfig": { "serverConfig": {
"protocol": "https", "protocol": "https",

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

@ -22,9 +22,9 @@
} }
.logo-image { .logo-image {
width: 120px; /*width: 120px;*/
height: 31px; height: 31px;
margin: 0 0 16px 20px; margin: 0 5px 16px 24px;
float: left; float: left;
} }

9
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js vendored
View File

@ -24,6 +24,7 @@ import config from "../../../../../public/conf/config.json";
import ReactQuill from "react-quill"; import ReactQuill from "react-quill";
import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser'; import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser';
import "./AppDetailsDrawer.css"; import "./AppDetailsDrawer.css";
import pSBC from "shade-blend-color";
const {Text, Title} = Typography; const {Text, Title} = Typography;
const {Option} = Select; const {Option} = Select;
@ -456,7 +457,7 @@ class AppDetailsDrawer extends React.Component {
{!isDescriptionEditEnabled && ( {!isDescriptionEditEnabled && (
<Text <Text
style={{ style={{
color: "#1890ff", color: config.theme.primaryColor,
cursor: "pointer" cursor: "pointer"
}} }}
onClick={this.enableDescriptionEdit}> onClick={this.enableDescriptionEdit}>
@ -492,7 +493,7 @@ class AppDetailsDrawer extends React.Component {
<Divider dashed={true}/> <Divider dashed={true}/>
<Text strong={true}>Categories </Text> <Text strong={true}>Categories </Text>
{!isCategoriesEditEnabled && (<Text {!isCategoriesEditEnabled && (<Text
style={{color: "#1890ff", cursor: "pointer"}} style={{color: config.theme.primaryColor, cursor: "pointer"}}
onClick={this.enableCategoriesEdit}> onClick={this.enableCategoriesEdit}>
<Icon type="edit"/> <Icon type="edit"/>
</Text> </Text>
@ -525,7 +526,7 @@ class AppDetailsDrawer extends React.Component {
<span>{ <span>{
categories.map(category => { categories.map(category => {
return ( return (
<Tag color="#108ee9" key={category} style={{marginBottom: 5}}> <Tag color={pSBC ( 0.30, config.theme.primaryColor )} key={category} style={{marginBottom: 5}}>
{category} {category}
</Tag> </Tag>
); );
@ -537,7 +538,7 @@ class AppDetailsDrawer extends React.Component {
<Divider dashed={true}/> <Divider dashed={true}/>
<Text strong={true}>Tags </Text> <Text strong={true}>Tags </Text>
{!isTagsEditEnabled && (<Text {!isTagsEditEnabled && (<Text
style={{color: "#1890ff", cursor: "pointer"}} style={{color: config.theme.primaryColor, cursor: "pointer"}}
onClick={this.enableTagsEdit}> onClick={this.enableTagsEdit}>
<Icon type="edit"/> <Icon type="edit"/>
</Text> </Text>

3
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js vendored
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd"; import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd";
import axios from "axios"; import axios from "axios";
import pSBC from 'shade-blend-color';
import config from "../../../../../public/conf/config.json"; import config from "../../../../../public/conf/config.json";
import "./AppsTable.css"; import "./AppsTable.css";
@ -30,7 +31,7 @@ const columns = [
<span> <span>
{categories.map(category => { {categories.map(category => {
return ( return (
<Tag color="blue" key={category}> <Tag color={pSBC ( 0.30, config.theme.primaryColor )} key={category}>
{category} {category}
</Tag> </Tag>
); );

9
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js vendored
View File

@ -3,6 +3,7 @@ import {Card, Tag, message, Icon, Input, notification, Divider, Button, Spin, To
import axios from "axios"; import axios from "axios";
import config from "../../../../public/conf/config.json"; import config from "../../../../public/conf/config.json";
import {TweenOneGroup} from 'rc-tween-one'; import {TweenOneGroup} from 'rc-tween-one';
import pSBC from "shade-blend-color";
class ManageCategories extends React.Component { class ManageCategories extends React.Component {
@ -95,14 +96,14 @@ class ManageCategories extends React.Component {
const categoryName = category.categoryName; const categoryName = category.categoryName;
const tagElem = ( const tagElem = (
<Tag <Tag
color="blue" color={pSBC ( 0.30, config.theme.primaryColor )}
> >
{categoryName} {categoryName}
<Divider type="vertical"/> <Divider type="vertical"/>
<Tooltip title="edit"> <Tooltip title="edit">
<Icon onClick={() => { <Icon onClick={() => {
this.openEditModal(categoryName) this.openEditModal(categoryName)
}} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/> }} type="edit"/>
</Tooltip> </Tooltip>
<Divider type="vertical"/> <Divider type="vertical"/>
<Tooltip title="delete"> <Tooltip title="delete">
@ -122,7 +123,7 @@ class ManageCategories extends React.Component {
okText="Yes" okText="Yes"
cancelText="No" cancelText="No"
> >
<Icon style={{color: 'rgba(0,0,0,0.45)'}} type="delete"/> <Icon type="delete"/>
</Popconfirm> </Popconfirm>
</Tooltip> </Tooltip>
</Tag> </Tag>
@ -306,7 +307,7 @@ class ManageCategories extends React.Component {
const categoriesElements = categories.map(this.renderElement); const categoriesElements = categories.map(this.renderElement);
const temporaryElements = tempElements.map(this.renderTempElement); const temporaryElements = tempElements.map(this.renderTempElement);
return ( return (
<div> <div style={{marginBottom: 16}}>
<Card title="Categories"> <Card title="Categories">
<Spin tip="Working on it..." spinning={this.state.loading}> <Spin tip="Working on it..." spinning={this.state.loading}>
{!isAddNewVisible && {!isAddNewVisible &&

8
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js vendored
View File

@ -98,14 +98,14 @@ class ManageTags extends React.Component {
const tagName = tag.tagName; const tagName = tag.tagName;
const tagElem = ( const tagElem = (
<Tag <Tag
color="gold" color="#34495e"
> >
{tagName} {tagName}
<Divider type="vertical"/> <Divider type="vertical"/>
<Tooltip title="edit"> <Tooltip title="edit">
<Icon onClick={() => { <Icon onClick={() => {
this.openEditModal(tagName) this.openEditModal(tagName)
}} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/> }} type="edit"/>
</Tooltip> </Tooltip>
<Divider type="vertical"/> <Divider type="vertical"/>
<Tooltip title="delete"> <Tooltip title="delete">
@ -125,7 +125,7 @@ class ManageTags extends React.Component {
okText="Yes" okText="Yes"
cancelText="No" cancelText="No"
> >
<Icon style={{color: 'rgba(0,0,0,0.45)'}} type="delete"/> <Icon type="delete"/>
</Popconfirm> </Popconfirm>
</Tooltip> </Tooltip>
</Tag> </Tag>
@ -307,7 +307,7 @@ class ManageTags extends React.Component {
const tagsElements = tags.map(this.renderElement); const tagsElements = tags.map(this.renderElement);
const temporaryElements = tempElements.map(this.renderTempElement); const temporaryElements = tempElements.map(this.renderTempElement);
return ( return (
<div> <div style={{marginBottom: 16}}>
<Card title="Tags"> <Card title="Tags">
<Spin tip="Working on it..." spinning={this.state.loading}> <Spin tip="Working on it..." spinning={this.state.loading}>
{!isAddNewVisible && {!isAddNewVisible &&

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

@ -11,15 +11,30 @@ class Login extends React.Component {
render() { render() {
return ( return (
<div className={styles.main}> <div className={styles.main}>
<div className={styles.content}> <div style={{
backgroundImage: "url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg')",
backgroundRepeat: "no-repeat",
backgroundPosition: "center 110px",
backgroundSize: "100%",
height: 1500
}}>
<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
}
}
className={styles.logo} src={config.theme.logo}/>
</Col> </Col>
</Row> </Row>
<Title type="secondary" level={2}>Login</Title> <Title level={2}>Login</Title>
<WrappedNormalLoginForm/> <WrappedNormalLoginForm/>
</Col> </Col>
@ -42,7 +57,7 @@ class NormalLoginForm extends React.Component {
super(props); super(props);
this.state = { this.state = {
inValid: false, inValid: false,
loading : false loading: false
}; };
} }
@ -65,7 +80,7 @@ class NormalLoginForm extends React.Component {
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&'); const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.loginUri, request axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.loginUri, request
).then(res => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
window.location = res.data.url; window.location = res.data.url;

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

@ -17,14 +17,13 @@
} }
.content{ .content{
padding-top: 128px; padding-top: 128px;
} }
.logo{ .logo{
margin-top: 36px;
height: 44px; height: 44px;
margin: auto;
width: 100%; width: 100%;
} }

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

@ -1,10 +1,11 @@
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 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'
import "../../App.css"; import "../../App.css";
import config from "../../../public/conf/config.json";
const {Header, Content, Footer} = Layout; const {Header, Content, Footer} = Layout;
const {SubMenu} = Menu; const {SubMenu} = Menu;
@ -15,6 +16,8 @@ class Dashboard extends React.Component {
this.state = { this.state = {
routes: props.routes routes: props.routes
}; };
this.Logo = config.theme.logo;
} }
render() { render() {
@ -22,8 +25,8 @@ class Dashboard extends React.Component {
<div> <div>
<Layout className="layout"> <Layout className="layout">
<Header style={{paddingLeft: 0, paddingRight: 0}}> <Header style={{paddingLeft: 0, paddingRight: 0}}>
<div style={{width: 120}} className="logo-image"> <div className="logo-image">
<img alt="logo" src={Logo}/> <img alt="logo" src={this.Logo}/>
</div> </div>
<Menu <Menu
theme="light" theme="light"
@ -53,7 +56,7 @@ class Dashboard extends React.Component {
</Header> </Header>
</Layout> </Layout>
<Layout> <Layout>
<Content style={{padding: '0 0'}}> <Content style={{marginTop: 2}}>
<Switch> <Switch>
<Redirect exact from="/publisher" to="/publisher/apps"/> <Redirect exact from="/publisher" to="/publisher/apps"/>
{this.state.routes.map((route) => ( {this.state.routes.map((route) => (

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

@ -10,7 +10,7 @@ const Paragraph = Typography;
const formConfig = { const formConfig = {
installationType: "ENTERPRISE", installationType: "ENTERPRISE",
endpoint: "/ent-app", endpoint: "/ent-app",
jsonPayloadName:"application", jsonPayloadName: "application",
releaseWrapperName: "entAppReleaseWrappers", releaseWrapperName: "entAppReleaseWrappers",
specificElements: { specificElements: {
binaryFile: { binaryFile: {
@ -41,11 +41,9 @@ class AddNewEnterpriseApp extends React.Component {
title="Add New Enterprise App" title="Add New Enterprise App"
> >
<div className="wrap"> <div className="wrap">
<div className="content"> <Paragraph>
<Paragraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo. </Paragraph>
</Paragraph>
</div>
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>

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

@ -45,11 +45,9 @@ class AddNewEnterpriseApp extends React.Component {
title="Add New Public App" title="Add New Public App"
> >
<div className="wrap"> <div className="wrap">
<div className="content"> <Paragraph>
<Paragraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo. </Paragraph>
</Paragraph>
</div>
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>

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

@ -45,11 +45,9 @@ class AddNewEnterpriseApp extends React.Component {
title="Add New Web Clip" title="Add New Web Clip"
> >
<div className="wrap"> <div className="wrap">
<div className="content"> <Paragraph>
<Paragraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo. </Paragraph>
</Paragraph>
</div>
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>

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

@ -36,21 +36,23 @@ class Manage extends React.Component {
<div> <div>
<PageHeader <PageHeader
// breadcrumb={{routes}} // breadcrumb={{routes}}
title = "Manage" title="Manage"
> >
<div className="wrap"> <div className="wrap">
<div className="content"> <Paragraph>
<Paragraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo. </Paragraph>
</Paragraph>
</div>
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
<ManageCategories/> <Row gutter={16}>
<br/> <Col sm={24} md={12}>
<ManageTags/> <ManageCategories/>
</Col>
<Col sm={24} md={12}>
<ManageTags/>
</Col>
</Row>
</div> </div>
</div> </div>

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

@ -18,6 +18,7 @@
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",
@ -87,8 +88,8 @@ const config = {
loader: "less-loader", loader: "less-loader",
options: { options: {
modifyVars: { modifyVars: {
'primary-color': '#1890ff', 'primary-color': configurations.theme.primaryColor,
'link-color': '#1890ff', 'link-color': configurations.theme.primaryColor,
}, },
javascriptEnabled: true, javascriptEnabled: true,
}, },