Skip to content

Commit

Permalink
Add custom theme overhaul
Browse files Browse the repository at this point in the history 
- Use 'config-overrides.js' with less loader to load ant.design's less files instead of the compiled css to override theme variables
- Change logo, favicon, and primary theme colours
- Add pageTitle() to App() to let components set page titles
- Move all notifications to bottomRight to avoid blocking action items on the UI
  • Loading branch information
@knadh
knadh committed Nov 3, 2018
1 parent 5d099ab commit ac8c7ed
Show file tree
Hide file tree
Showing 20 changed files with 1,587 additions and 268 deletions.
30 changes: 30 additions & 0 deletions frontend/my/config-overrides.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const {injectBabelPlugin} = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less");

module.exports = function override(config, env) {
config = injectBabelPlugin(
[
"import", {
libraryName: "antd",
libraryDirectory: "es",
style: true
}
], // change importing css to less
config,
);
config = rewireLess.withLoaderOptions({
modifyVars: {
"@font-family":
'"IBM Plex Sans", "Helvetica Neueue", "Segoe UI", "sans-serif"',
"@font-size-base": "15px",
"@primary-color": "#7f2aff",
"@shadow-1-up": "0 -2px 3px @shadow-color",
"@shadow-1-down": "0 2px 3px @shadow-color",
"@shadow-1-left": "-2px 0 3px @shadow-color",
"@shadow-1-right": "2px 0 3px @shadow-color",
"@shadow-2": "0 2px 6px @shadow-color"
},
javascriptEnabled: true,
})(config, env);
return config;
};
15 changes: 13 additions & 2 deletions frontend/my/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,31 @@
"axios": "^0.18.0",
"dayjs": "^1.7.5",
"react": "^16.4.1",
"react-app-rewire-less": "^2.1.3",
"react-app-rewired": "^1.6.2",
"react-dom": "^16.4.1",
"react-quill": "^1.3.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"
},
"scripts": {
"xxscripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"theme": "./src/theme.js",
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"babel-plugin-import": "^1.11.0",
"less-plugin-npm-import": "^2.1.0"
}
}
Binary file removed frontend/my/public/favicon.ico
View file
Binary file not shown.
Binary file added frontend/my/public/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions frontend/my/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<script src="%PUBLIC_URL%/api/config.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
<title>%PUBLIC_URL%</title>
</head>
<body>
<noscript>
Expand Down
9 changes: 8 additions & 1 deletion frontend/my/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,19 @@ class App extends React.PureComponent {
}
}


pageTitle = (title) => {
document.title = title
}

render() {
return (
<BrowserRouter>
<Layout modelRequest={ this.modelRequest }
<Layout
modelRequest={ this.modelRequest }
request={ this.request }
reqStates={ this.state.reqStates }
pageTitle={ this.pageTitle }
config={ window.CONFIG }
data={ this.state.data } />
</BrowserRouter>
Expand Down
12 changes: 9 additions & 3 deletions frontend/my/src/Campaign.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ class TheFormDef extends React.PureComponent {
this.setState({ loading: true })
if(!this.props.isSingle) {
this.props.modelRequest(cs.ModelCampaigns, cs.Routes.CreateCampaign, cs.MethodPost, values).then((resp) => {
notification["success"]({ placement: "topRight",
notification["success"]({ placement: cs.MsgPosition,
message: "Campaign created",
description: `"${values["name"]}" created` })

Expand All @@ -228,7 +228,7 @@ class TheFormDef extends React.PureComponent {
})
} else {
this.props.modelRequest(cs.ModelCampaigns, cs.Routes.UpdateCampaign, cs.MethodPut, { ...values, id: this.props.record.id }).then((resp) => {
notification["success"]({ placement: "topRight",
notification["success"]({ placement: cs.MsgPosition,
message: "Campaign updated",
description: `"${values["name"]}" updated` })
this.setState({ loading: false })
Expand Down Expand Up @@ -259,7 +259,7 @@ class TheFormDef extends React.PureComponent {
this.setState({ loading: true })
this.props.request(cs.Routes.TestCampaign, cs.MethodPost, values).then((resp) => {
this.setState({ loading: false })
notification["success"]({ placement: "topRight",
notification["success"]({ placement: cs.MsgPosition,
message: "Test sent",
description: `Test messages sent` })
}).catch(e => {
Expand All @@ -278,6 +278,12 @@ class TheFormDef extends React.PureComponent {
subLists = record.lists.map((v) => { return v.id !== 0 ? v.id : null }).filter(v => v !== null)
}

if(this.record) {
this.props.pageTitle(record.name + " / Campaigns")
} else {
this.props.pageTitle("New campaign")
}

return (
<div>
<Spin spinning={ this.state.loading }>
Expand Down
1 change: 1 addition & 0 deletions frontend/my/src/Campaigns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ class Campaigns extends React.PureComponent {
}

componentDidMount() {
this.props.pageTitle("Campaigns")
dayjs.extend(relativeTime)
this.fetchRecords()
}
Expand Down
6 changes: 4 additions & 2 deletions frontend/my/src/Dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';
import 'antd/dist/antd.css';

class Dashboard extends React.Component {
class Dashboard extends React.PureComponent {
componentDidMount = () => {
this.props.pageTitle("Dashboard")
}
render() {
return (
<h1>Welcome</h1>
Expand Down
1 change: 1 addition & 0 deletions frontend/my/src/Import.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ class Import extends React.PureComponent {
}

componentDidMount() {
this.props.pageTitle("Import subscribers")
this.fetchimportState()
}
render() {
Expand Down
5 changes: 3 additions & 2 deletions frontend/my/src/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Switch, Route } from "react-router-dom"
import { Link } from "react-router-dom"
import { Layout, Menu, Icon } from "antd"

import "antd/dist/antd.css"
// import "antd/dist/antd.css"
import logo from "./static/listmonk.svg"

// Views.
Expand All @@ -17,6 +17,7 @@ import Campaigns from "./Campaigns";
import Campaign from "./Campaign";
import Media from "./Media";


const { Content, Footer, Sider } = Layout
const SubMenu = Menu.SubMenu

Expand All @@ -30,7 +31,7 @@ class Base extends React.Component {
onCollapse = (collapsed) => {
this.setState({ collapsed })
}

render() {
return (
<Layout style={{ minHeight: "100vh" }}>
Expand Down
20 changes: 13 additions & 7 deletions frontend/my/src/Lists.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class CreateFormDef extends React.PureComponent {
if (this.props.formType === cs.FormCreate) {
// Create a new list.
this.props.modelRequest(cs.ModelLists, cs.Routes.CreateList, cs.MethodPost, values).then(() => {
notification["success"]({ placement: "topRight", message: "List created", description: `"${values["name"]}" created` })
notification["success"]({ placement: cs.MsgPosition, message: "List created", description: `"${values["name"]}" created` })
this.props.fetchRecords()
this.props.onClose()
this.setState({ modalWaiting: false })
Expand All @@ -34,7 +34,7 @@ class CreateFormDef extends React.PureComponent {
} else {
// Edit a list.
this.props.modelRequest(cs.ModelLists, cs.Routes.UpdateList, cs.MethodPut, { ...values, id: this.props.record.id }).then(() => {
notification["success"]({ placement: "topRight", message: "List modified", description: `"${values["name"]}" modified` })
notification["success"]({ placement: cs.MsgPosition, message: "List modified", description: `"${values["name"]}" modified` })
this.props.fetchRecords()
this.props.onClose()
this.setState({ modalWaiting: false })
Expand Down Expand Up @@ -111,7 +111,7 @@ class Lists extends React.PureComponent {
title: "Name",
dataIndex: "name",
sorter: true,
width: "50%",
width: "40%",
render: (text, record) => {
const out = [];
out.push(
Expand All @@ -130,7 +130,7 @@ class Lists extends React.PureComponent {
{
title: "Type",
dataIndex: "type",
width: "5%",
width: "10%",
render: (type, _) => {
let color = type === "private" ? "orange" : "green"
return <Tag color={color}>{type}</Tag>
Expand All @@ -139,8 +139,13 @@ class Lists extends React.PureComponent {
{
title: "Subscribers",
dataIndex: "subscriber_count",
width: "10%",
align: "center"
width: "15%",
align: "center",
render: (text, record) => {
return(
<div className="name" key={`name-${record.id}`}><Link to={ `/subscribers/lists/${record.id}` }>{ text }</Link></div>
)
}
},
{
title: "Created",
Expand Down Expand Up @@ -175,6 +180,7 @@ class Lists extends React.PureComponent {
}

componentDidMount() {
this.props.pageTitle("Lists")
this.fetchRecords()
}

Expand All @@ -185,7 +191,7 @@ class Lists extends React.PureComponent {
deleteRecord = (record) => {
this.props.modelRequest(cs.ModelLists, cs.Routes.DeleteList, cs.MethodDelete, { id: record.id })
.then(() => {
notification["success"]({ placement: "topRight", message: "List deleted", description: `"${record.name}" deleted` })
notification["success"]({ placement: cs.MsgPosition, message: "List deleted", description: `"${record.name}" deleted` })

// Reload the table.
this.fetchRecords()
Expand Down
3 changes: 2 additions & 1 deletion frontend/my/src/Media.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ class TheFormDef extends React.PureComponent {
}

componentDidMount() {
this.props.pageTitle("Media")
this.fetchRecords()
}

Expand All @@ -18,7 +19,7 @@ class TheFormDef extends React.PureComponent {
handleDeleteRecord = (record) => {
this.props.modelRequest(cs.ModelMedia, cs.Routes.DeleteMedia, cs.MethodDelete, { id: record.id })
.then(() => {
notification["success"]({ placement: "topRight", message: "Image deleted", description: `"${record.filename}" deleted` })
notification["success"]({ placement: cs.MsgPosition, message: "Image deleted", description: `"${record.filename}" deleted` })

// Reload the table.
this.fetchRecords()
Expand Down
23 changes: 21 additions & 2 deletions frontend/my/src/Subscribers.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react"
import { Link } from "react-router-dom"
import { Row, Col, Modal, Form, Input, Select, Button, Table, Icon, Tooltip, Tag, Popconfirm, Spin, notification } from "antd"

import Utils from "./utils"
Expand Down Expand Up @@ -233,9 +234,21 @@ class Subscribers extends React.PureComponent {
sorter: true,
width: "25%",
render: (text, record) => {
return (
<a role="button" onClick={() => this.handleShowEditForm(record)}>{text}</a>

const out = [];
out.push(
<div key={`sub-email-${ record.id }`} className="sub-name">
<a role="button" onClick={() => { this.handleShowEditForm(record)}}>{text}</a>
</div>
)

if(record.lists.length > 0) {
for (let i = 0; i < record.lists.length; i++) {
out.push(<Tag className="list" key={`sub-${ record.id }-list-${ record.lists[i].id }`}><Link to={ `/subscribers/lists/${ record.lists[i].id }` }>{ record.lists[i].name }</Link></Tag>)
}
}

return out
}
},
{
Expand Down Expand Up @@ -406,6 +419,12 @@ class Subscribers extends React.PureComponent {
...this.state.queryParams
}

if(this.state.queryParams.list) {
this.props.pageTitle(this.state.queryParams.list.name + " / Subscribers")
} else {
this.props.pageTitle("Subscribers")
}

return (
<section className="content">
<header className="header">
Expand Down
9 changes: 5 additions & 4 deletions frontend/my/src/Templates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class CreateFormDef extends React.PureComponent {
if (this.props.formType === cs.FormCreate) {
// Create a new list.
this.props.modelRequest(cs.ModelTemplates, cs.Routes.CreateTemplate, cs.MethodPost, values).then(() => {
notification["success"]({ placement: "topRight", message: "Template added", description: `"${values["name"]}" added` })
notification["success"]({ placement: cs.MsgPosition, message: "Template added", description: `"${values["name"]}" added` })
this.props.fetchRecords()
this.props.onClose()
this.setState({ modalWaiting: false })
Expand All @@ -36,7 +36,7 @@ class CreateFormDef extends React.PureComponent {
} else {
// Edit a list.
this.props.modelRequest(cs.ModelTemplates, cs.Routes.UpdateTemplate, cs.MethodPut, { ...values, id: this.props.record.id }).then(() => {
notification["success"]({ placement: "topRight", message: "Template updated", description: `"${values["name"]}" modified` })
notification["success"]({ placement: cs.MsgPosition, message: "Template updated", description: `"${values["name"]}" modified` })
this.props.fetchRecords()
this.props.onClose()
this.setState({ modalWaiting: false })
Expand Down Expand Up @@ -196,6 +196,7 @@ class Templates extends React.PureComponent {
}

componentDidMount() {
this.props.pageTitle("Templates")
this.fetchRecords()
}

Expand All @@ -206,7 +207,7 @@ class Templates extends React.PureComponent {
handleDeleteRecord = (record) => {
this.props.modelRequest(cs.ModelTemplates, cs.Routes.DeleteTemplate, cs.MethodDelete, { id: record.id })
.then(() => {
notification["success"]({ placement: "topRight", message: "Template deleted", description: `"${record.name}" deleted` })
notification["success"]({ placement: cs.MsgPosition, message: "Template deleted", description: `"${record.name}" deleted` })

// Reload the table.
this.fetchRecords()
Expand All @@ -218,7 +219,7 @@ class Templates extends React.PureComponent {
handleSetDefault = (record) => {
this.props.modelRequest(cs.ModelTemplates, cs.Routes.SetDefaultTemplate, cs.MethodPut, { id: record.id })
.then(() => {
notification["success"]({ placement: "topRight", message: "Template updated", description: `"${record.name}" set as default` })
notification["success"]({ placement: cs.MsgPosition, message: "Template updated", description: `"${record.name}" set as default` })

// Reload the table.
this.fetchRecords()
Expand Down
1 change: 1 addition & 0 deletions frontend/my/src/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const FormEdit = "edit"
export const MsgSuccess = "success"
export const MsgWarning = "warning"
export const MsgError = "error"
export const MsgPosition = "bottomRight"

// Model specific.
export const CampaignStatusColors = {
Expand Down
Loading

0 comments on commit ac8c7ed

Please sign in to comment.