public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Work in progress on port to Bootstrap 4

Browse source
This commit is contained in:
Tomas Bures 2018-12-28 05:33:07 +01:00
parent 3425e2c16a
commit 41d74e3cc7
40 changed files with 144 additions and 365 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/package.json
View file

@ -4,13 +4,14 @@
"description": "Self hosted email newsletter app - client components",
"main": "index.js",
"scripts": {
"build": "webpack",
"js": "webpack",
"watch-js": "webpack --watch",
"css": "npm-run-all --sequential css-compile css-minify",
"css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 static/scss/mailtrain.scss dist/mailtrain.css",
"css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/mailtrain.min.css dist/mailtrain.css",
"watch-css": "nodemon --watch static/scss -e scss -x \"npm run css\"",
"watch": "npm-run-all --parallel watch-css watch-js"
"watch": "npm-run-all --parallel watch-css watch-js",
"build": "npm-run-all --parallel css js"
},
"repository": {
"type": "git",

2
client/src/blacklist/List.js
View file

@ -108,7 +108,7 @@ export default class List extends Component {
tableAddRestActionButton(
actions, this,
{ method: HTTPMethod.DELETE, url: `rest/blacklist/${email}`},
{ icon: 'remove', label: t('removeFromBlacklist') },
{ icon: 'trash-alt', label: t('removeFromBlacklist') },
t('confirmRemovalFromBlacklist'),
t('areYouSureYouWantToRemoveEmailFromThe', {email}),
t('removingEmailFromTheBlacklist', {email}),

4
client/src/campaigns/CUD.js
View file

@ -508,7 +508,7 @@ export default class CUD extends Component {
{lsts.length > 1 &&
<Button
className="btn-secondary"
icon="remove"
icon="trash-alt"
title={t('remove')}
onClickAsync={() => this.onRemoveListEntry(lstUid)}
/>
@ -738,7 +738,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={saveButtonLabel}/>
{canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/campaigns/${this.props.entity.id}/delete`}/> }
{canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/campaigns/${this.props.entity.id}/delete`}/> }
</ButtonRow>
</Form>
</div>

21
client/src/campaigns/List.js
View file

@ -3,11 +3,12 @@
import React, {Component} from 'react';
import {withTranslation} from '../lib/i18n';
import {
DropdownMenu,
ButtonDropdown,
Icon
} from '../lib/bootstrap-components';
import {
MenuLink,
ButtonDropdownLink,
NavDropdown,
requiresAuthenticatedUser,
Title,
Toolbar,
@ -109,7 +110,7 @@ export default class List extends Component {
if (perms.includes('viewStats')) {
actions.push({
label: <Icon icon="send" title={t('status')}/>,
label: <Icon icon="envelope" title={t('status')}/>,
link: `/campaigns/${data[0]}/status`
});
@ -149,14 +150,14 @@ export default class List extends Component {
if (campaignType === CampaignType.TRIGGERED && perms.includes('viewTriggers')) {
actions.push({
label: <Icon icon="flash" title={t('triggers')}/>,
label: <Icon icon="bell" title={t('triggers')}/>,
link: `/campaigns/${data[0]}/triggers`
});
}
if (perms.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/campaigns/${data[0]}/share`
});
}
@ -173,11 +174,11 @@ export default class List extends Component {
{tableRestActionDialogRender(this)}
<Toolbar>
{this.state.createPermitted &&
<DropdownMenu className="btn-primary" label={t('createCampaign')}>
<MenuLink to="/campaigns/create-regular">{t('regular')}</MenuLink>
<MenuLink to="/campaigns/create-rss">{t('rss')}</MenuLink>
<MenuLink to="/campaigns/create-triggered">{t('triggered')}</MenuLink>
</DropdownMenu>
<ButtonDropdown buttonClassName="btn-primary" menuClassName="dropdown-menu-right" label={t('createCampaign')}>
<ButtonDropdownLink to="/campaigns/create-regular">{t('regular')}</ButtonDropdownLink>
<ButtonDropdownLink to="/campaigns/create-rss">{t('rss')}</ButtonDropdownLink>
<ButtonDropdownLink to="/campaigns/create-triggered">{t('triggered')}</ButtonDropdownLink>
</ButtonDropdown>
}
</Toolbar>

2
client/src/campaigns/triggers/CUD.js
View file

@ -236,7 +236,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/campaigns/${this.props.campaign.id}/triggers/${this.props.entity.id}/delete`}/>}
{isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/campaigns/${this.props.campaign.id}/triggers/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

69
client/src/lib/bootstrap-components.js vendored
View file

@ -112,35 +112,28 @@ class Button extends Component {
}
}
//TODO
class DropdownMenu extends Component {
class ButtonDropdown extends Component {
static propTypes = {
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
noCaret: PropTypes.bool,
className: PropTypes.string
className: PropTypes.string,
buttonClassName: PropTypes.string,
menuClassName: PropTypes.string
}
render() {
const props = this.props;
let className = 'btn dropdown-toggle';
if (props.className) {
className = className + ' ' + props.className;
}
let label;
if (this.props.noCaret) {
label = props.label;
} else {
label = <span>{props.label}{' '}<span className="caret"></span></span>;
}
const className = 'dropdown' + (props.className ? ' ' + props.className : '');
const buttonClassName = 'btn dropdown-toggle' + (props.buttonClassName ? ' ' + props.buttonClassName : '');
const menuClassName = 'dropdown-menu' + (props.menuClassName ? ' ' + props.menuClassName : '');
return (
<div className="btn-group">
<button type="button" className={className} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{label}
<div className="dropdown" className={className}>
<button type="button" className={buttonClassName} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{props.label}
</button>
<ul className="dropdown-menu">
<ul className={menuClassName}>
{props.children}
</ul>
@ -149,41 +142,6 @@ class DropdownMenu extends Component {
}
}
//TODO
class DropdownMenuItem extends Component {
static propTypes = {
label: PropTypes.string,
icon: PropTypes.string,
className: PropTypes.string
}
render() {
const props = this.props;
let className = 'nav-item dropdown';
if (props.className) {
className = className + ' ' + props.className;
}
return (
<li className={className}>
{props.icon ?
<a href="#" className="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<Icon icon={props.icon}/>{' '}{props.label}
</a>
:
<a href="#" className="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{props.label}
</a>
}
<ul className="dropdown-menu">
{props.children}
</ul>
</li>
);
}
}
@withComponentMixins([
withErrorHandling
])
@ -217,7 +175,6 @@ class ActionLink extends Component {
withTranslation,
withErrorHandling
])
//TODO
class ModalDialog extends Component {
constructor(props) {
super(props);
@ -314,8 +271,8 @@ class ModalDialog extends Component {
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" aria-label={t('close')} onClick={::this.onClose}><span aria-hidden="true">&times;</span></button>
<h4 className="modal-title">{this.props.title}</h4>
<button type="button" className="close" aria-label={t('close')} onClick={::this.onClose}><span aria-hidden="true">&times;</span></button>
</div>
<div className="modal-body">{this.props.children}</div>
<div className="modal-footer">
@ -332,7 +289,7 @@ class ModalDialog extends Component {
export {
Button,
DropdownMenu,
ButtonDropdown,
DropdownMenuItem,
ActionLink,
DismissibleAlert,

2
client/src/lib/files.js
View file

@ -144,7 +144,7 @@ export default class Files extends Component {
if (this.props.entity.permissions.includes(this.props.managePermission)) {
actions.push({
label: <Icon icon="remove" title={t('delete')}/>,
label: <Icon icon="trash-alt" title={t('delete')}/>,
action: () => this.deleteFile(data[0], data[1])
});
}

14
client/src/lib/form.js
View file

@ -194,9 +194,9 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
// wrapInput may be used also outside forms to make a kind of fake read-only forms
let className;
if (owner) {
className = 'form-group row';
className = 'form-group';
} else {
className = 'row ' + styles.staticFormGroup;
className = styles.staticFormGroup;
}
let colLeft = '';
@ -207,15 +207,17 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
colLeft = '';
colRight = '';
break;
case 'inline':
colLeft = 'mr-3';
colRight = '';
break;
default:
className = className + ' row';
colLeft = 'col-sm-2 col-form-label';
colRight = 'col-sm-10';
break;
}
if (format === 'inline') {
}
let helpBlock = null;
if (help) {
helpBlock = <small className={`form-text text-muted`} id={htmlId + '_help'}>{help}</small>;
@ -239,7 +241,7 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
if (format === 'inline') {
return (
<div className={className} >
{labelBlock} &nbsp; {input}
{labelBlock}{input}
{helpBlock}
{validationBlock}
</div>

2
client/src/lib/modals.js
View file

@ -224,7 +224,7 @@ export function tableAddDeleteButton(actions, owner, perms, deleteUrl, name, del
if (!perms || perms.includes('delete')) {
if (owner.tableRestActionDialogData.shown) {
actions.push({
label: <Icon className={styles.iconDisabled} icon="remove" title={t('delete')}/>
label: <Icon className={styles.iconDisabled} icon="trash-alt" title={t('delete')}/>
});
} else {
actions.push({

26
client/src/lib/page.js
View file

@ -98,7 +98,6 @@ class Breadcrumb extends Component {
}
}
//TODO
class SecondaryNavBar extends Component {
static propTypes = {
route: PropTypes.object.isRequired,
@ -116,9 +115,10 @@ class SecondaryNavBar extends Component {
title = entry.title;
}
let className = '';
let liClassName = 'nav-item';
let linkClassName = 'nav-link';
if (entry.active) {
className += ' active';
linkClassName += ' active';
}
if (entry.link) {
@ -130,7 +130,7 @@ class SecondaryNavBar extends Component {
link = entry.link;
}
return <li key={key} role="presentation" className={className}><Link to={link}>{title}</Link></li>;
return <li key={key} role="presentation" className={liClassName}><Link className={linkClassName} to={link}>{title}</Link></li>;
} else if (entry.externalLink) {
let externalLink;
@ -140,10 +140,10 @@ class SecondaryNavBar extends Component {
externalLink = entry.externalLink;
}
return <li key={key} role="presentation" className={className}><a href={externalLink}>{title}</a></li>;
return <li key={key} role="presentation" className={liClassName}><a className={linkClassName} href={externalLink}>{title}</a></li>;
} else {
return <li key={key} role="presentation" className={className}>{title}</li>;
return <li key={key} role="presentation" className={liClassName}>{title}</li>;
}
}
@ -153,7 +153,7 @@ class SecondaryNavBar extends Component {
const keys = Object.keys(route.navs);
const renderedElems = [];
for (const key in keys) {
for (const key of keys) {
const entry = route.navs[key];
let visible = true;
@ -280,10 +280,9 @@ class RouteContent extends Component {
<div>
{primaryMenuComponent}
<div>
<SecondaryNavBar className="hidden-xs pull-right" route={route} params={params} resolved={resolved}/>
<div className={styles.breadcrumbAndSecondaryNavbar}>
<Breadcrumb route={route} params={params} resolved={resolved}/>
<SecondaryNavBar className="visible-xs" route={route} params={params} resolved={resolved}/>
<SecondaryNavBar route={route} params={params} resolved={resolved}/>
</div>
<div className="container-fluid">
@ -473,8 +472,7 @@ export class NavButton extends Component {
}
}
// TODO
export class MenuLink extends Component {
export class ButtonDropdownLink extends Component {
static propTypes = {
to: PropTypes.string,
className: PropTypes.string
@ -483,9 +481,9 @@ export class MenuLink extends Component {
render() {
const props = this.props;
const clsName = "nav-item" + (props.className ? " " + props.className : "")
const clsName = "dropdown-item" + (props.className ? " " + props.className : "")
return (
<li className={clsName}><Link to={props.to} className="nav-link">{props.children}</Link></li>
<Link to={props.to} className={clsName}>{props.children}</Link>
);
}
}

40
client/src/lib/styles.scss
View file

@ -84,28 +84,32 @@
margin-bottom: 20px;
}
.secondaryNav {
margin-top: 5px;
margin-right: 5px;
text-align: right;
}
.breadcrumbAndSecondaryNavbar {
/*
display: flex;
flex-wrap: wrap;
justify-content: space-between;
*/
@media (max-width: 767px) {
.secondaryNav {
margin: 0px;
background-color: #f5f5f5;
padding: 5px 5px;
border-radius: 4px;
:global .breadcrumb {
margin-bottom: 0px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
.secondaryNav > li {
display: inline-block;
float: none;
}
margin-bottom: 1.5rem;
.secondaryNav > li > a {
padding: 3px 10px;
.secondaryNav {
justify-content: flex-end;
margin-top: 0.5rem;
margin-left: 5px;
margin-right: 5px;
:global .nav-item .nav-link {
padding: 3px 10px;
}
}
}
.dropZone {

2
client/src/lists/CUD.js
View file

@ -240,7 +240,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.entity.id}/delete`}/>}
{canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

2
client/src/lists/List.js
View file

@ -122,7 +122,7 @@ export default class List extends Component {
if (triggersCount > 0) {
actions.push({
label: <Icon icon="flash" title={t('triggers')}/>,
label: <Icon icon="bell" title={t('triggers')}/>,
link: `/lists/${data[0]}/triggers`
});
}

2
client/src/lists/fields/CUD.js
View file

@ -481,7 +481,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/fields/${this.props.entity.id}/delete`}/>}
{isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/fields/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

2
client/src/lists/forms/CUD.js
View file

@ -525,7 +525,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/forms/${this.props.entity.id}/delete`}/>}
{canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/forms/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

2
client/src/lists/forms/List.js
View file

@ -76,7 +76,7 @@ export default class List extends Component {
}
if (perms.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/lists/forms/${data[0]}/share`
});
}

5
client/src/lists/imports/CUD.js
View file

@ -11,6 +11,7 @@ import {
withPageHelpers
} from '../../lib/page';
import {
AlignedRow,
Button,
ButtonRow,
CheckBox,
@ -336,7 +337,7 @@ export default class CUD extends Component {
} else {
settingsEdit =
<div>
<StaticField withValidation id="csvFileName" label={t('file')}><input ref={node => this.csvFile = node} type="file" onChange={::this.onFileSelected}/></StaticField>
<AlignedRow label={t('file')}><input ref={node => this.csvFile = node} type="file" className="form-control-file" onChange={::this.onFileSelected}/></AlignedRow>
<InputField id="csvDelimiter" label={t('delimiter')}/>
</div>;
}
@ -451,7 +452,7 @@ export default class CUD extends Component {
<ButtonRow>
{saveButtons}
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/imports/${this.props.entity.id}/delete`}/>}
{isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/imports/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

2
client/src/lists/imports/List.js
View file

@ -80,7 +80,7 @@ export default class List extends Component {
}
actions.push({
label: <Icon icon="eye-open" title={t('detailedStatus')}/>,
label: <Icon icon="eye" title={t('detailedStatus')}/>,
link: `/lists/${this.props.list.id}/imports/${data[0]}/status`
});

4
client/src/lists/segments/CUD.js
View file

@ -357,7 +357,7 @@ export default class CUD extends Component {
<FormButton type="submit" className="btn-primary" icon="check" label={t('saveAndStay')} onClickAsync={::this.submitAndStay}/>
<FormButton type="submit" className="btn-primary" icon="check" label={t('saveAndLeave')}/>
<NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/segments/${this.props.entity.id}/delete`}/>
<NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/segments/${this.props.entity.id}/delete`}/>
</ButtonRow>
:
<ButtonRow format="wide" className={`col-xs-12 ${styles.toolbar}`}>
@ -394,7 +394,7 @@ export default class CUD extends Component {
generateNodeProps={data => ({
buttons: [
<ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.showRuleOptions(data.node.rule)} className={styles.ruleActionLink}><Icon icon="edit" title={t('edit')}/></ActionLink>,
<ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.deleteRule(data.node.rule)} className={styles.ruleActionLink}><Icon icon="remove" title={t('delete')}/></ActionLink>
<ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.deleteRule(data.node.rule)} className={styles.ruleActionLink}><Icon icon="trash-alt" title={t('delete')}/></ActionLink>
]
})}
/>

2
client/src/lists/segments/RuleSettingsPane.js
View file

@ -238,7 +238,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="chevron-left" label={t('ok')}/>
<Button className="btn-primary" icon="remove" label={t('delete')} onClickAsync={::this.deleteRule}/>
<Button className="btn-primary" icon="trash-alt" label={t('delete')} onClickAsync={::this.deleteRule}/>
</ButtonRow>
</Form>

2
client/src/lists/subscriptions/CUD.js
View file

@ -223,7 +223,7 @@ export default class CUD extends Component {
}
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/${this.props.list.id}/subscriptions/${this.props.entity.id}/delete`}/>}
{isEdit && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/lists/${this.props.list.id}/subscriptions/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

15
client/src/lists/subscriptions/List.js
View file

@ -137,7 +137,7 @@ export default class List extends Component {
tableAddRestActionButton(
actions, this,
{ method: HTTPMethod.POST, url: `rest/subscriptions-unsubscribe/${this.props.list.id}/${id}`},
{ icon: 'off', label: t('unsubscribe') },
{ icon: 'power-off', label: t('unsubscribe') },
t('confirmUnsubscription'),
t('areYouSureYouWantToUnsubscribeEmail?', {email}),
t('unsubscribingEmail', {email}),
@ -150,7 +150,7 @@ export default class List extends Component {
tableAddRestActionButton(
actions, this,
{ method: HTTPMethod.POST, url: `rest/blacklist`, data: {email} },
{ icon: 'ban-circle', label: t('blacklist') },
{ icon: 'ban', label: t('blacklist') },
t('confirmEmailBlacklisting'),
t('areYouSureYouWantToBlacklistEmail?', {email}),
t('blacklistingEmail', {email}),
@ -194,13 +194,14 @@ export default class List extends Component {
<div className="well well-sm">{list.description}</div>
}
<div className="well well-sm">
<Form format="inline" stateOwner={this}>
<Dropdown format="inline" className="input-sm" id="segment" label={t('segment')} options={segmentOptions}/>
</Form>
<div className="card bg-light">
<div className="card-body p-2">
<Form format="inline" stateOwner={this}>
<Dropdown format="inline" className="input-sm" id="segment" label={t('segment')} options={segmentOptions}/>
</Form>
</div>
</div>
<Table ref={node => this.table = node} withHeader dataUrl={dataUrl} columns={columns} />
</div>
);

2
client/src/namespaces/CUD.js
View file

@ -206,7 +206,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/namespaces/${this.props.entity.id}/delete`}/>}
{canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/namespaces/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

2
client/src/namespaces/List.js
View file

@ -72,7 +72,7 @@ export default class List extends Component {
if (node.data.permissions.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/namespaces/${node.key}/share`
});
}

2
client/src/reports/CUD.js
View file

@ -276,7 +276,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{canDelete &&
<NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/reports/${this.props.entity.id}/delete`}/>
<NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/reports/${this.props.entity.id}/delete`}/>
}
</ButtonRow>
</Form>

12
client/src/reports/List.js
View file

@ -122,18 +122,18 @@ export default class List extends Component {
} else if (state === ReportState.FINISHED) {
if (mimeType === 'text/html') {
viewContent = {
label: <Icon icon="eye-open" title={t('view')}/>,
label: <Icon icon="eye" title={t('view')}/>,
link: `/reports/${id}/view`
};
} else if (mimeType === 'text/csv') {
viewContent = {
label: <Icon icon="download-alt" title={t('download')}/>,
label: <Icon icon="file-download" title={t('download')}/>,
href: getUrl(`rpts/${id}/download`)
};
}
startStop = {
label: <Icon icon="repeat" title={t('refreshReport')}/>,
label: <Icon icon="redo" title={t('refreshReport')}/>,
action: (table) => this.start(table, id)
};
@ -143,7 +143,7 @@ export default class List extends Component {
};
startStop = {
label: <Icon icon="repeat" title={t('regenerateReport')}/>,
label: <Icon icon="redo" title={t('regenerateReport')}/>,
action: (table) => this.start(table, id)
};
}
@ -155,7 +155,7 @@ export default class List extends Component {
if (perms.includes('viewOutput')) {
actions.push(
{
label: <Icon icon="modal-window" title={t('viewConsoleOutput')}/>,
label: <Icon icon="tv" title={t('viewConsoleOutput')}/>,
link: `/reports/${id}/output`
}
);
@ -174,7 +174,7 @@ export default class List extends Component {
if (perms.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/reports/${id}/share`
});
}

2
client/src/reports/templates/CUD.js
View file

@ -335,7 +335,7 @@ export default class CUD extends Component {
<Button type="submit" className="btn-primary" icon="check" label={t('saveAndStay')} onClickAsync={::this.submitAndStay}/>
<Button type="submit" className="btn-primary" icon="check" label={t('saveAndLeave')}/>
{canDelete &&
<NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/reports/templates/${this.props.entity.id}/delete`}/>
<NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/reports/templates/${this.props.entity.id}/delete`}/>
}
</ButtonRow>
:

19
client/src/reports/templates/List.js
View file

@ -3,11 +3,12 @@
import React, {Component} from 'react';
import {withTranslation} from '../../lib/i18n';
import {
DropdownMenu,
ButtonDropdown,
Icon
} from '../../lib/bootstrap-components';
import {
MenuLink,
ButtonDropdownLink,
NavDropdown,
requiresAuthenticatedUser,
Title,
Toolbar,
@ -85,7 +86,7 @@ export default class List extends Component {
if (perms.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/reports/templates/${data[0]}/share`
});
}
@ -102,12 +103,12 @@ export default class List extends Component {
{tableRestActionDialogRender(this)}
{this.state.createPermitted &&
<Toolbar>
<DropdownMenu className="btn-primary" label={t('createReportTemplate')}>
<MenuLink to="/reports/templates/create">{t('blank')}</MenuLink>
<MenuLink to="/reports/templates/create/open-counts">{t('openCounts')}</MenuLink>
<MenuLink to="/reports/templates/create/open-counts-csv">{t('openCountsAsCsv')}</MenuLink>
<MenuLink to="/reports/templates/create/aggregated-open-counts">{t('aggregatedOpenCounts')}</MenuLink>
</DropdownMenu>
<ButtonDropdown buttonClassName="btn-primary" menuClassName="dropdown-menu-right" label={t('createReportTemplate')}>
<ButtonDropdownLink to="/reports/templates/create">{t('blank')}</ButtonDropdownLink>
<ButtonDropdownLink to="/reports/templates/create/open-counts">{t('openCounts')}</ButtonDropdownLink>
<ButtonDropdownLink to="/reports/templates/create/open-counts-csv">{t('openCountsAsCsv')}</ButtonDropdownLink>
<ButtonDropdownLink to="/reports/templates/create/aggregated-open-counts">{t('aggregatedOpenCounts')}</ButtonDropdownLink>
</ButtonDropdown>
</Toolbar>
}

2
client/src/send-configurations/CUD.js
View file

@ -249,7 +249,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{canDelete &&
<NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/send-configurations/${this.props.entity.id}/delete`}/>
<NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/send-configurations/${this.props.entity.id}/delete`}/>
}
</ButtonRow>
</Form>

2
client/src/send-configurations/List.js
View file

@ -86,7 +86,7 @@ export default class List extends Component {
if (perms.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/send-configurations/${data[0]}/share`
});
}

2
client/src/shares/UserShares.js
View file

@ -69,7 +69,7 @@ export default class UserShares extends Component {
if (!autoGenerated && perms.includes('share')) {
actions.push({
label: <Icon icon="remove" title={t('remove')}/>,
label: <Icon icon="trash-alt" title={t('remove')}/>,
action: () => this.deleteShare(entityTypeId, data[2])
});
}

2
client/src/templates/CUD.js
View file

@ -295,7 +295,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={isEdit ? t('save') : t('saveAndEditTemplate')}/>
{canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/templates/${this.props.entity.id}/delete`}/> }
{canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/templates/${this.props.entity.id}/delete`}/> }
{isEdit && <Button className="btn-danger" icon="send" label={t('testSend')} onClickAsync={async () => this.setState({showTestSendModal: true})}/> }
</ButtonRow>
</Form>

2
client/src/templates/List.js
View file

@ -100,7 +100,7 @@ export default class List extends Component {
if (perms.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/templates/${data[0]}/share`
});
}

2
client/src/templates/mosaico/CUD.js
View file

@ -196,7 +196,7 @@ export default class CUD extends Component {
<Button type="submit" className="btn-primary" icon="check" label={t('saveAndStay')} onClickAsync={::this.submitAndStay}/>
<Button type="submit" className="btn-primary" icon="check" label={t('saveAndLeave')}/>
{canDelete &&
<NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/templates/mosaico/${this.props.entity.id}/delete`}/>
<NavButton className="btn-danger" icon="trash-alt" label={t('delete')} linkTo={`/templates/mosaico/${this.props.entity.id}/delete`}/>
}
</ButtonRow>
:

15
client/src/templates/mosaico/List.js
View file

@ -3,11 +3,12 @@
import React, {Component} from 'react';
import {withTranslation} from '../../lib/i18n';
import {
DropdownMenu,
ButtonDropdown,
Icon
} from '../../lib/bootstrap-components';
import {
MenuLink,
ButtonDropdownLink,
NavDropdown,
requiresAuthenticatedUser,
Title,
Toolbar,
@ -102,7 +103,7 @@ export default class List extends Component {
if (perms.includes('share')) {
actions.push({
label: <Icon icon="share-alt" title={t('share')}/>,
label: <Icon icon="share" title={t('share')}/>,
link: `/templates/mosaico/${data[0]}/share`
});
}
@ -119,10 +120,10 @@ export default class List extends Component {
{tableRestActionDialogRender(this)}
{this.state.createPermitted &&
<Toolbar>
<DropdownMenu className="btn-primary" label={t('createMosaicoTemplate')}>
<MenuLink to="/templates/mosaico/create">{t('blank')}</MenuLink>
<MenuLink to="/templates/mosaico/create/versafix">{t('versafixOne')}</MenuLink>
</DropdownMenu>
<ButtonDropdown buttonClassName="btn-primary" menuClassName="dropdown-menu-right" label={t('createMosaicoTemplate')}>
<ButtonDropdownLink to="/templates/mosaico/create">{t('blank')}</ButtonDropdownLink>
<ButtonDropdownLink to="/templates/mosaico/create/versafix">{t('versafixOne')}</ButtonDropdownLink>
</ButtonDropdown>
</Toolbar>
}

2
client/src/users/CUD.js
View file

@ -249,7 +249,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
{canDelete && <NavButton className="btn-danger" icon="remove" label={t('deleteUser')} linkTo={`/users/${this.props.entity.id}/delete`}/>}
{canDelete && <NavButton className="btn-danger" icon="trash-alt" label={t('deleteUser')} linkTo={`/users/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

2
client/src/users/List.js
View file

@ -60,7 +60,7 @@ export default class List extends Component {
});
actions.push({
label: <Icon icon="share" title={t('share')}/>,
label: <Icon icon="share-square" title={t('share')}/>,
link: `/users/${data[0]}/shares`
});

196
client/static/mosaico/vendor/skins/gray-flat/Variables.less vendored
View file

@ -1,196 +0,0 @@
// Variables
// Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);
// Example: @btn-primary-bg-hover-hlight;
@prefix: mce;
// Default font
@font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-size: 14px;
@line-height: 20px;
@has-gradients: false;
@has-radius: true;
@has-boxshadow: false;
@has-button-borders: true;
// Text colors
@text: #333333;
@text-inverse: #ffffff;
@text-disabled: #aaaaaa;
@text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
@text-error: #aa0000;
// Button
@btn-text: #ffffff;
@btn-text-shadow: #333332;
@btn-border-top: rgba(0,0,0,0.1);
@btn-border-right: rgba(0,0,0,0.1);
@btn-border-bottom: rgba(0,0,0,0.25);
@btn-border-left: rgba(0,0,0,0.25);
@btn-caret-border: @btn-text;
@btn-text-disabled: @text-disabled;
@btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
@btn-box-shadow-active: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
@btn-box-disabled-opacity: 0.4;
@btn-bg: #333332;
@btn-bg-hlight: #333332;
@btn-bg-hover: darken(@btn-bg, 5%);
@btn-bg-hlight-hover: darken(@btn-bg-hlight, 5%);
@btn-border-hover: darken(@btn-bg, 20%);
@btn-border-active: darken(@btn-bg, 20%);
@btn-padding: 4px 8px;
@btn-primary-bg: #333332;
@btn-primary-bg-hlight: #333332;
@btn-primary-bg-hover: darken(@btn-primary-bg, 5%);
@btn-primary-bg-hover-hlight: darken(@btn-primary-bg-hlight, 5%);
@btn-primary-text: #ffffff;
@btn-primary-text-shadow: #333333;
@btn-primary-border-top: mix(@btn-border-top, @btn-primary-bg, 50%);
@btn-primary-border-right: mix(@btn-border-right, @btn-primary-bg, 50%);
@btn-primary-border-bottom: mix(@btn-border-bottom, @btn-primary-bg, 50%);
@btn-primary-border-left: mix(@btn-border-left, @btn-primary-bg, 50%);
@btn-primary-border: transparent;
@btn-primary-border-hover: transparent;
// Button group
@btn-group-border-width: 1px;
// Menu
@menuitem-text: #333333;
@menu-bg: #ffffff;
@menu-margin: -1px 0 0;
@menu-border: rgba(0,0,0,0.2);
@menubar-border: mix(@panel-border, @panel-bg, 60%);
@menuitem-text-inverse: #ffffff;
@menubar-bg-active: darken(@btn-bg, 10%);
@menuitem-bg-hover: #0081C2;
@menuitem-bg-selected: #333332;
@menuitem-bg-selected-hlight: #333332;
@menuitem-bg-disabled: #CCC;
@menuitem-caret: @menuitem-text;
@menuitem-caret-selected: @menuitem-text-inverse;
@menuitem-separator-top: #cbcbcb;
@menuitem-separator-bottom: #ffffff;
@menuitem-bg-active: #666666;
@menuitem-text-active: #ffffff;
@menuitem-preview-border-active: #aaaaaa;
@menubar-menubtn-text: ;
// Panel
@panel-border: #9e9e9e;
@panel-bg: #f1eee6;
@panel-bg-hlight: #f1eee6;
// Tabs
@tab-border: #c5c5c5;
@tab-bg: #e3e3e3;
@tab-bg-hover: #fdfdfd;
@tab-bg-active: #fdfdfd;
@tabs-bg: #ffffff;
// Tooltip
@tooltip-bg: #000;
@tooltip-text: white;
@tooltip-font-size: 11px;
// Notification
@notification-font-size: 14px;
@notification-bg: #f0f0f0;
@notification-border: #cccccc;
@notification-text: #333333;
@notification-success-bg: #dff0d8;
@notification-success-border: #d6e9c6;
@notification-success-text: #3c763d;
@notification-info-bg: #d9edf7;
@notification-info-border: #779ecb;
@notification-info-text: #31708f;
@notification-warning-bg: #fcf8e3;
@notification-warning-border: #faebcc;
@notification-warning-text: #8a6d3b;
@notification-error-bg: #f2dede;
@notification-error-border: #ebccd1;
@notification-error-text: #a94442;
// Window
@window-border: #c4c4c4;
@window-head-border: @window-border;
@window-head-close: mix(@text, @window-bg, 60%);
@window-head-close-hover: mix(@text, @window-bg, 40%);
@window-foot-border: @window-border;
@window-foot-bg: @window-bg;
@window-fullscreen-bg: #FFF;
@window-modalblock-bg: #000;
@window-modalblock-opacity: 0.3;
@window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
@window-bg: #ffffff;
@window-title-font-size: 20px;
// Popover
@popover-bg: @window-bg;
@popover-arrow-width: 10px;
@popover-arrow: @window-bg;
@popover-arrow-outer-width: @popover-arrow-width + 1;
@popover-arrow-outer: rgba(0, 0, 0, 0.25);
// Floatpanel
@floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
// Checkbox
@checkbox-bg: @btn-bg;
@checkbox-bg-hlight: @btn-bg-hlight;
@checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
@checkbox-border: #c5c5c5;
@checkbox-border-focus: #59a5e1;
// Path
@path-text: @text;
@path-bg-focus: #666;
@path-text-focus: #fff;
// Textbox
@textbox-text-placeholder: #aaa;
@textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@textbox-bg: #ffffff;
@textbox-border: #c5c5c5;
@textbox-border-focus: #59a5e1;
// Selectbox
@selectbox-bg: @textbox-bg;
@selectbox-border: @textbox-border;
// Throbber
@throbber-bg: #fff url('img/loader.gif') no-repeat center center;
// Combobox
@combobox-border: @textbox-border;
// Colorpicker
@colorpicker-border: @textbox-border;
@colorpicker-hue-bg: #fff;
@colorpicker-hue-border: #333;
// Grid
@grid-bg-active: @menuitem-bg-active;
@grid-border-active: #a1a1a1;
@grid-border: #d6d6d6;
// Misc
@colorbtn-backcolor-bg: #bbbbbb;
@iframe-border: @panel-border;
// Slider
@slider-border: #aaaaaa;
@slider-bg: #eeeeee;
@slider-handle-border: #bbbbbb;
@slider-handle-bg: #dddddd;
// Progress
@progress-border: #cccccc;
@progress-bar-bg: #dfdfdf;
@progress-bar-bg-hlight: #cccccc;
@progress-text: #333333;
@progress-text-shadow: #ffffff;
// Flow layout
@flow-layout-spacing: 2px;

8
server/views/ckeditor/layout.hbs
View file

@ -12,9 +12,13 @@
<title>Mailtrain</title>
<link rel="stylesheet" href="{{publicPath}}static/bootstrap/themes/united.min.css">
<link rel="stylesheet" href="{{publicPath}}mailtrain/mailtrain.css">
<script src="{{publicPath}}static/jquery-3.3.1.min.js"></script>
<script src="{{publicPath}}static/bootstrap/js/bootstrap.min.js"></script>
<script src="{{publicPath}}static-npm/popper.min.js"></script>
<script src="{{publicPath}}static-npm/bootstrap.min.js"></script>
<script src="{{publicPath}}static-npm/coreui.min.js"></script>
{{#if mailtrainConfig}}
<script>

8
server/views/codeeditor/layout.hbs
View file

@ -12,9 +12,13 @@
<title>Mailtrain</title>
<link rel="stylesheet" href="{{publicPath}}static/bootstrap/themes/united.min.css">
<link rel="stylesheet" href="{{publicPath}}mailtrain/mailtrain.css">
<script src="{{publicPath}}static/jquery-3.3.1.min.js"></script>
<script src="{{publicPath}}static/bootstrap/js/bootstrap.min.js"></script>
<script src="{{publicPath}}static-npm/popper.min.js"></script>
<script src="{{publicPath}}static-npm/bootstrap.min.js"></script>
<script src="{{publicPath}}static-npm/coreui.min.js"></script>
{{#if mailtrainConfig}}
<script>