From a4cfaab3a742aa6331c56960066635a40fd5338e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafael=20C=C3=A2mara?= Date: Mon, 11 Dec 2017 03:25:27 -0200 Subject: [PATCH] Adding drop shadow offset-y and blur-radius menu option (#143) * Adding drop shadow offset-y and blur-radius menu option * Fixing @jakedex concerns * Fixing drop-shadow blur-radius label to fit the pattern --- .all-contributorsrc | 9 +++++++++ README.md | 2 +- components/Carbon.js | 9 ++++++++- components/Settings.js | 10 ++++++++++ pages/editor.js | 2 ++ 5 files changed, 30 insertions(+), 2 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 33eaa4d..a48c5c2 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -175,6 +175,15 @@ "bug", "code" ] + }, + { + "login": "rafaelcamaram", + "name": "Rafael CΓ’mara", + "avatar_url": "https://avatars1.githubusercontent.com/u/9087886?v=4", + "profile": "http://www.rafaelcamaram.com/", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index 0c65d4c..3f111f5 100644 --- a/README.md +++ b/README.md @@ -72,5 +72,5 @@ Thanks goes out to all these wonderful people ([emoji key](https://github.com/ke | [
briandennis](https://github.com/briandennis)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=briandennis "Code") [πŸ“–](https://github.com/dawnlabs/carbon/commits?author=briandennis "Documentation") [πŸš‡](#infra-briandennis "Infrastructure (Hosting, Build-Tools, etc)") [πŸ‘€](#review-briandennis "Reviewed Pull Requests") | [
mfix22](https://github.com/mfix22)
[πŸ’¬](#question-mfix22 "Answering Questions") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=mfix22 "Code") [πŸ€”](#ideas-mfix22 "Ideas, Planning, & Feedback") | [
jakedex](https://github.com/jakedex)
[πŸ’¬](#question-jakedex "Answering Questions") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=jakedex "Code") [🎨](#design-jakedex "Design") [πŸ“Ή](#video-jakedex "Videos") | [
andrewda](https://github.com/andrewda)
[πŸ’¬](#question-andrewda "Answering Questions") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=andrewda "Code") [πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3Aandrewda "Bug reports") [πŸ‘€](#review-andrewda "Reviewed Pull Requests") | [
yeskunall](https://github.com/yeskunall)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=yeskunall "Code") [πŸ“–](https://github.com/dawnlabs/carbon/commits?author=yeskunall "Documentation") [πŸ”§](#tool-yeskunall "Tools") [πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3Ayeskunall "Bug reports") | [
stoshfabricius](https://github.com/stoshfabricius)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=stoshfabricius "Code") | [
jkling38](https://github.com/jkling38)
[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=jkling38 "Documentation") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
otobrglez](https://github.com/otobrglez)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=otobrglez "Code") | [
darahak](https://github.com/darahak)
[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=darahak "Documentation") | [
dom96](https://github.com/dom96)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=dom96 "Code") | [
elrumordelaluz](https://github.com/elrumordelaluz)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=elrumordelaluz "Code") | [
cjb](https://github.com/cjb)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=cjb "Code") | [
Krzysztof-Cieslak](https://github.com/Krzysztof-Cieslak)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=Krzysztof-Cieslak "Code") | [
fernahh](https://github.com/fernahh)
[πŸ“–](https://github.com/dawnlabs/carbon/commits?author=fernahh "Documentation") | -| [
g3r4n](https://github.com/g3r4n)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [
Mat Gadd](http://drarok.com/)
[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [
Brad Davies](https://bradlab.co.uk)
[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") | +| [
g3r4n](https://github.com/g3r4n)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [
Mat Gadd](http://drarok.com/)
[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [
Brad Davies](https://bradlab.co.uk)
[πŸ›](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [πŸ’»](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") | [
Rafael CΓ’mara](http://www.rafaelcamaram.com/)
[πŸ’»](https://github.com/dawnlabs/carbon/commits?author=rafaelcamaram "Code") | diff --git a/components/Carbon.js b/components/Carbon.js index ac6f23b..9148fd4 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -22,6 +22,8 @@ const DEFAULT_SETTINGS = { marginVertical: '45px', marginHorizontal: '45px', background: 'rgba(171, 184, 195, 1)', + dropShadowOffsetY: '20px', + dropShadowBlurRadius: '68px', theme: 'seti', windowTheme: 'none', language: DEFAULT_LANGUAGE @@ -184,7 +186,11 @@ class Carbon extends React.Component { position: relative; z-index: 1; border-radius: 5px; - ${config.dropShadow ? 'box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);' : ''}; + ${config.dropShadow + ? `box-shadow: 0 ${config.dropShadowOffsetY} ${ + config.dropShadowBlurRadius + } rgba(0, 0, 0, 0.55)` + : ''}; } #container :global(.CodeMirror__container .CodeMirror) { @@ -231,6 +237,7 @@ class Carbon extends React.Component { flex-direction: column; justify-content: center; align-items: center; + overflow: hidden; } /* forces twitter to save images as png β€” https://github.com/dawnlabs/carbon/issues/86 */ diff --git a/components/Settings.js b/components/Settings.js index 8948c29..bf901c5 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -44,6 +44,16 @@ class Settings extends React.Component { enabled={this.props.enabled.dropShadow} onChange={this.props.onChange.bind(null, 'dropShadow')} /> + +