From 60ac2b649550a1e700730bdc7229282cc34060fc Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Wed, 10 Jul 2019 22:37:08 +0530 Subject: [PATCH] Add configuration to change theme color in APPM publisher UI --- .../react-app/public/conf/config.json | 16 ++++++-- .../react-app/src/App.css | 4 +- .../react-app/src/App.js | 2 +- .../src/components/apps/list-apps/Filters.js | 33 +++++++++++---- .../apps/list-apps/appsTable/AppsTable.js | 4 +- .../src/components/new-app/AddNewAppForm.js | 2 +- .../src/pages/dashboard/Dashboard.js | 15 ++++--- .../add-new-app/AddNewEnterpriseApp.js | 1 - .../dashboard/add-new-app/AddNewPublicApp.js | 2 +- .../dashboard/add-new-app/AddNewWebClip.js | 2 +- .../add-new-release/AddNewRelease.js | 2 +- .../src/pages/dashboard/apps/Apps.js | 2 +- .../src/pages/dashboard/manage/Manage.js | 2 +- .../react-app/webpack.config.js | 41 +++++++++++-------- 14 files changed, 82 insertions(+), 46 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json index 1411e8bef68..1a98c1a6dc7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json @@ -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" } } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css index 048a7eb7ab4..94ce220af49 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css @@ -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; } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js index 2f6d2d164ff..76e9922736d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js @@ -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, diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js index 43b1d36274c..01609175641 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js @@ -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 { + + {getFieldDecorator('serach', {})( + } + placeholder="Username" + />, + )} + + {getFieldDecorator('categories', { rules: [{ @@ -202,8 +218,7 @@ class FiltersForm extends React.Component { }) } )} @@ -244,6 +259,7 @@ class FiltersForm extends React.Component { + )} @@ -251,10 +267,11 @@ class FiltersForm extends React.Component { {getFieldDecorator('subscriptionType', {})( - - Free
- Paid
- , + + Free + Paid + All + , )} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js index df1182da04a..29e1207ad00 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js @@ -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 () + theme={theme}/>) } }, { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js index c8f67e8b456..10f8482934e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js @@ -1,5 +1,5 @@ import React from "react"; -import "antd/dist/antd.css"; +//import "antd/dist/antd.css"; import { Card, Button, diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js index 85a7fa6c08e..108bc123fef 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js @@ -21,9 +21,9 @@ class Dashboard extends React.Component { return (
-
-
- +
+
+ logo
} > - Public APP - Enterprise APP - Web Clip + Public + APP + Enterprise + APP + Web + Clip Manage diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js index d6245bd10fb..cfa062f84d3 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js @@ -1,5 +1,4 @@ import React from "react"; -import "antd/dist/antd.css"; import { PageHeader, Typography diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js index f1750074999..4d4f70558d1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js @@ -1,5 +1,5 @@ import React from "react"; -import "antd/dist/antd.css"; +//import "antd/dist/antd.css"; import { PageHeader, Typography diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js index 9f1a459f0e4..09e723afb76 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js @@ -1,5 +1,5 @@ import React from "react"; -import "antd/dist/antd.css"; +//import "antd/dist/antd.css"; import { PageHeader, Typography diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js index 03d52ef4666..af92c42f423 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js @@ -1,5 +1,5 @@ import React from "react"; -import "antd/dist/antd.css"; +//import "antd/dist/antd.css"; import { PageHeader, Typography diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js index bac349fe2f8..edf28b49bb7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js @@ -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"; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js index b69e3237772..40c628b3b25 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js @@ -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"; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js index c1724e9a8c0..127a2df2611 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js @@ -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" + } ] } ]