Skip to content

Commit

Permalink
Merge branch 'marketplace' into seun-migration-1.0-1.5
Browse files Browse the repository at this point in the history
  • Loading branch information
spencern authored Sep 29, 2017
2 parents 7cdc7c9 + eada374 commit 6c5d774
Show file tree
Hide file tree
Showing 35 changed files with 834 additions and 677 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ class AdminInviteForm extends Component {

render() {
return (
<Components.Card expanded={true}>
<Components.Card>
<Components.CardHeader
actAsExpander={true}
data-i18n="accountsUI.info.addAdminUser"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ class EditGroup extends Component {
const alertId = this.state.alertOptions.id;
return (
<div className="edit-group-container">
<Components.Card expanded={true}>
<Components.Card>
<Components.CardHeader actAsExpander={true} i18nKeyTitle="admin.groups.editGroups" title="Edit Groups" />
<Components.CardBody expandable={true}>
<div className="settings">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ class EmailConfig extends Component {
render() {
return (
<Components.CardGroup>
<Components.Card expanded={true}>
<Components.Card>
<Components.CardHeader
actAsExpander={true}
i18nKeyTitle="admin.settings.mailProvider"
Expand Down
4 changes: 1 addition & 3 deletions imports/plugins/core/email/client/components/emailLogs.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,7 @@ class EmailLogs extends Component {
render() {
return (
<Components.CardGroup>
<Components.Card
expanded={true}
>
<Components.Card>
<Components.CardHeader
actAsExpander={true}
i18nKeyTitle="admin.logs.headers.emailLogs"
Expand Down
4 changes: 1 addition & 3 deletions imports/plugins/core/orders/client/components/invoice.js
Original file line number Diff line number Diff line change
Expand Up @@ -204,9 +204,7 @@ class Invoice extends Component {
render() {
return (
<Components.CardGroup>
<Components.Card
expanded={true}
>
<Components.Card>
<Components.CardHeader
actAsExpander={false}
i18nKeyTitle="admin.orderWorkflow.invoice.cardTitle"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,7 @@ class OrderSummaryContainer extends Component {
render() {
return (
<CardGroup>
<Card
expanded={true}
>
<Card>
<CardHeader
actAsExpander={false}
i18nKeyTitle="admin.orderWorkflow.summary.cardTitle"
Expand Down
2 changes: 1 addition & 1 deletion imports/plugins/core/taxes/server/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"shopTaxMethodsFailed": "Failed saving tax method.",
"customRatesLabel": "Custom Rates",
"customRatesDescription": "Custom Rates",
"taxCode": "Tax Code",
"taxCode": "Tax code",
"taxShipping": "Include Shipping",
"taxRate": "Rate",
"discountsIncluded": "Include Discounts",
Expand Down
104 changes: 100 additions & 4 deletions imports/plugins/core/ui/client/components/badge/badge.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,70 @@ import classnames from "classnames/dedupe";
import { Components, registerComponent } from "@reactioncommerce/reaction-components";

class Badge extends Component {
constructor(props) {
super(props);

this.state = {
tooltipOpen: false
};

this.handleButtonMouseOver = this.handleButtonMouseOver.bind(this);
this.handleButtonMouseOut = this.handleButtonMouseOut.bind(this);
}

get isTooltipOpen() {
return this.state.tooltipOpen;
}

handleButtonMouseOver() {
this.setState({
tooltipOpen: this.props.tooltip ? true : false
});
}

handleButtonMouseOut() {
this.setState({
tooltipOpen: false
});
}

handleClick = (event) => {
if (this.props.tagName === "a") {
event.preventDefault();
}

// If this is a toogle button, and has a onToggle callback function
if (this.props.toggle && this.props.onToggle) {
if (this.props.toggleOn) {
// If toggleOn is true, return the toggleOn value, or true
this.props.onToggle(event, this.props.onValue || true);
} else {
// Otherwise return the value prop, or false
this.props.onToggle(event, this.props.value || false);
}
} else if (this.props.onClick) {
this.props.onClick(event, this.props.value);
}
}

renderTooltipContent() {
if (this.isTooltipOpen) {
if (typeof this.props.tooltip === "string") {
return (
<Components.Translation defaultValue={this.props.tooltip} i18nKey={this.props.i18nKeyTooltip} />
);
}

return (
<div>
{this.props.tooltip}
</div>
);
}

return null;
}

renderLabel() {
if (this.props.label) {
if (typeof this.props.label === "string") {
Expand All @@ -25,7 +89,7 @@ class Badge extends Component {
}

render() {
const { status, badgeSize, className } = this.props;
const { badgeSize, className, indicator, status, tooltip, tooltipAttachment } = this.props;

const classes = classnames({
"rui": true,
Expand All @@ -39,9 +103,28 @@ class Badge extends Component {
"badge-info": status === "info",
"badge-primary": status === "primary",
"badge-success": status === "success",
"badge-warning": status === "warning"
"badge-warning": status === "warning",
"badge-indicator": indicator
}, className);

if (tooltip) {
return (
<span
onMouseOut={this.handleButtonMouseOut}
onMouseOver={this.handleButtonMouseOver}
onClick={this.handleClick}
>
<Components.Tooltip
attachment={tooltipAttachment} tooltipContent={this.renderTooltipContent()}
>
<span className={classes} style={{ display: "inline-flex" }}>
{this.renderLabel()}
</span>
</Components.Tooltip>
</span>
);
}

return (
<span className={classes} style={{ display: "inline-flex" }}>
{this.renderLabel()}
Expand All @@ -54,13 +137,26 @@ Badge.propTypes = {
badgeSize: PropTypes.string,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
i18nKeyLabel: PropTypes.string,
i18nKeyTooltip: PropTypes.string,
indicator: PropTypes.bool,
label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
status: PropTypes.string
onClick: PropTypes.func,
onToggle: PropTypes.func,
onValue: PropTypes.any,
status: PropTypes.string,
tagName: PropTypes.string,
toggle: PropTypes.bool,
toggleOn: PropTypes.bool,
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
tooltipAttachment: PropTypes.string,
value: PropTypes.any
};

Badge.defaultProps = {
badgeSize: "small",
status: "default"
indicator: false,
status: "default",
tooltipAttachment: "bottom center"
};

registerComponent("Badge", Badge);
Expand Down
45 changes: 29 additions & 16 deletions imports/plugins/core/ui/client/components/cards/card.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,40 @@ class Card extends Component {
super(props);

this.state = {
expanded: props.expanded
expanded: true
};
}

componentWillReceiveProps(nextProps) {
this.setState({
expanded: nextProps.expanded
});
get isControlled() {
return typeof this.props.expanded === "boolean";
}

get isExpanded() {
if (this.isControlled) {
return this.props.expanded;
}

return this.state.expanded;
}

handleExpanderClick = (event) => {
this.setState({
expanded: !this.state.expanded
}, () => {
if (this.isControlled) {
if (typeof this.props.onExpand === "function") {
this.props.onExpand(event, this, this.props.name, this.state.expanded);
this.props.onExpand(event, this, this.props.name, !this.isExpanded);
}
});
} else {
this.setState({
expanded: !this.state.expanded
}, () => {
if (typeof this.props.onExpand === "function") {
this.props.onExpand(event, this, this.props.name, this.isExpanded);
}
});
}
}

render() {
const className = this.props.className;
const elements = Children.map(this.props.children, (child) => {
const newProps = {};

Expand All @@ -38,7 +51,7 @@ class Card extends Component {
}

if (child.props.expandable || child.props.actAsExpander) {
newProps.expanded = this.state.expanded;
newProps.expanded = this.isExpanded;
}

return React.cloneElement(child, newProps);
Expand All @@ -47,9 +60,9 @@ class Card extends Component {
const baseClassName = classnames({
"panel": true,
"panel-default": true,
"panel-active": this.state.expanded,
"closed": this.state.expanded === false
});
"panel-active": this.isExpanded,
"closed": this.isExpanded === false
}, className);

return (
<div className={baseClassName} style={this.props.style}>
Expand All @@ -60,12 +73,12 @@ class Card extends Component {
}

Card.defaultProps = {
expandable: false,
expanded: true
expandable: false
};

Card.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
expandable: PropTypes.bool,
expanded: PropTypes.bool,
name: PropTypes.string,
Expand Down
10 changes: 9 additions & 1 deletion imports/plugins/core/ui/client/components/cards/cardHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ class CardHeader extends Component {
i18nKeyTitle: PropTypes.string,
icon: PropTypes.string,
imageView: PropTypes.node,
isValid: PropTypes.bool,
onClick: PropTypes.func,
onSwitchChange: PropTypes.func,
showSwitch: PropTypes.bool,
Expand Down Expand Up @@ -109,11 +110,18 @@ class CardHeader extends Component {
}

render() {
let validation = false;

if (this.props.isValid === false) {
validation = true;
}

const baseClassName = classnames({
"rui": true,
"panel-heading": true,
"card-header": true,
"expandable": this.props.actAsExpander
"expandable": this.props.actAsExpander,
"validation": validation
});

if (this.props.actAsExpander) {
Expand Down
23 changes: 22 additions & 1 deletion imports/plugins/core/ui/client/components/textfield/textfield.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,16 @@ class TextField extends Component {
return undefined;
}

get isHelpMode() {
// TODO: add functionality to toggle helpMode on / off.
// When on, helpText will always show.
// When off, only validation messages will show.
// For now, all helpText will show, meaning this doesn't affect how the app currently works.
// This is here just to lay the foundation for when we add the toggle.

return true;
}

get validationMessage() {
const { name, validation } = this.props;

Expand Down Expand Up @@ -168,6 +178,7 @@ class TextField extends Component {
* @return {ReactNode|null} react node or null
*/
renderHelpText() {
const helpMode = this.isHelpMode;
const message = this.validationMessage;
let helpText = this.props.helpText;
let i18nKey = this.props.i18nKeyHelpText;
Expand All @@ -177,7 +188,17 @@ class TextField extends Component {
i18nKey = message.i18nKeyMessage;
}

if (helpText) {
// If this is a validation message, show even if helpMode is false
if (this.isValid === false && message) {
return (
<span className="help-block">
<Components.Translation defaultValue={helpText} i18nKey={i18nKey} />
</span>
);
}

// If this is a non-validation message, only show if helpMode is true
if (helpText && helpMode) {
return (
<span className="help-block">
<Components.Translation defaultValue={helpText} i18nKey={i18nKey} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
border-width: 1px;
}


// Badge Sizes
.rui.badge-large {
height: 30px;
Expand All @@ -16,6 +15,11 @@
padding-right: 15px;
border-radius: 2em;
}
.rui.badge-indicator {
width: 24px;
height: 24px;
border-radius: 48px;
}


// Badge Colors
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,11 @@

.admin-controls-content .panel-default > .panel-heading {
background-color: darken(@white, 2%);

&.validation {
background-color: @rui-danger-bg;
color: @rui-danger-text;
}
}

.admin-controls-content .admin-controls-container {
Expand Down
Loading

0 comments on commit 6c5d774

Please sign in to comment.