Skip to content

Feature/add bg lighten #531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Feature/add bg lighten #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f88ffe
Prettier-ify base.js and README.md
Jun 1, 2018
62fa30e
Add `bgLighten` prop
Jun 1, 2018
9461eb2
merge conflict cleanup
ebrillhart Aug 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 21 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -856,26 +856,27 @@ The `Text` tag is used to add text to your slide. Line height can be adjusted vi

Every component above that has `(Base)` after it has been extended from a common class that includes the following props:

| Name | PropType | Description |
| ---------- | -------------------------- | --------------------------------------------------------------------------- |
| italic | PropTypes.boolean | Set `fontStyle` to `italic` |
| bold | PropTypes.boolean | Set `fontWeight` to `bold` |
| caps | PropTypes.boolean | Set `textTransform` to `uppercase` |
| margin | PropTypes.number or string | Set `margin` value |
| padding | PropTypes.number or string | Set `padding` value |
| textColor | PropTypes.string | Set `color` value |
| textFont | PropTypes.string | Set `fontFamily` value |
| textSize | PropTypes.string | Set `fontSize` value |
| textAlign | PropTypes.string | Set `textAlign` value |
| textFont | PropTypes.string | Set `textFont` value |
| bgColor | PropTypes.string | Set `backgroundColor` value |
| bgImage | PropTypes.string | Set `backgroundImage` value |
| bgSize | PropTypes.string | Set `backgroundSize` value |
| bgPosition | PropTypes.string | Set `backgroundPosition` value |
| bgRepeat | PropTypes.string | Set `backgroundRepeat` value |
| bgDarken | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to darken the bgImage image |
| overflow | PropTypes.string | Set `overflow` value |
| height | PropTypes.string | Set `height` value |
| Name | PropType | Description |
| ---------- | -------------------------- | ---------------------------------------------------------------------------- |
| italic | PropTypes.boolean | Set `fontStyle` to `italic` |
| bold | PropTypes.boolean | Set `fontWeight` to `bold` |
| caps | PropTypes.boolean | Set `textTransform` to `uppercase` |
| margin | PropTypes.number or string | Set `margin` value |
| padding | PropTypes.number or string | Set `padding` value |
| textColor | PropTypes.string | Set `color` value |
| textFont | PropTypes.string | Set `fontFamily` value |
| textSize | PropTypes.string | Set `fontSize` value |
| textAlign | PropTypes.string | Set `textAlign` value |
| textFont | PropTypes.string | Set `textFont` value |
| bgColor | PropTypes.string | Set `backgroundColor` value |
| bgImage | PropTypes.string | Set `backgroundImage` value |
| bgSize | PropTypes.string | Set `backgroundSize` value |
| bgPosition | PropTypes.string | Set `backgroundPosition` value |
| bgRepeat | PropTypes.string | Set `backgroundRepeat` value |
| bgDarken | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to darken the bgImage image |
| bgLighten | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to lighten the bgImage image |
| overflow | PropTypes.string | Set `overflow` value |
| height | PropTypes.string | Set `height` value |

<a name="typeface"></a>

Expand Down
23 changes: 23 additions & 0 deletions src/utils/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,12 @@ export const getStyles = function getStyles() {
) {
this.warnedAboutFontSize = false;
}
if (
process.env.NODE_ENV !== 'production' &&
typeof this.warnedAboutLightenAndDarken === 'undefined'
) {
this.warnedAboutLightenAndDarken = false;
}

const {
italic,
Expand All @@ -74,6 +80,7 @@ export const getStyles = function getStyles() {
bgColor,
bgImage,
bgDarken,
bgLighten,
bgSize,
bgPosition,
bgRepeat,
Expand Down Expand Up @@ -148,8 +155,24 @@ export const getStyles = function getStyles() {
styles.backgroundColor = color;
}
if (bgImage) {
if (
process.env.NODE_ENV !== 'production' &&
!this.warnedAboutLightenAndDarken &&
this.context.store.getState().style.globalStyleSet
) {
if (bgDarken && bgLighten) {
// eslint-disable-next-line
console.warn(
`prop \`bgDarken="${bgDarken}"\` and prop \`bgLighten=${bgLighten}\` are both present. Only bgDarken will be applied.`
);
this.warnedAboutLightenAndDarken = true;
}
}
if (bgDarken) {
styles.backgroundImage = `linear-gradient( rgba(0, 0, 0, ${bgDarken}), rgba(0, 0, 0, ${bgDarken}) ), url(${bgImage})`;
} else if (bgLighten) {
styles.backgroundImage = `linear-gradient( rgba(255, 255, 255, ${bgLighten}), rgba(255, 255, 255, ${bgLighten}) ),
url(${bgImage})`;
} else {
styles.backgroundImage = `url(${bgImage})`;
}
Expand Down