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
7 years ago · a4cfaab3a7
parent 5ecb19c6b6
commit a4cfaab3a7
5 changed files with 30 additions and 2 deletions
--- 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"
+      ]
    }
  ]
 }
--- a/README.md
+++ b/README.md
@ -72,5 +72,5 @@ Thanks goes out to all these wonderful people ([emoji key](https://github.com/ke
 | [<img src="https://avatars0.githubusercontent.com/u/10078572?v=4" width="100px;"/><br /><sub><b>briandennis</b></sub>](https://github.com/briandennis)<br />[💻](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") | [<img src="https://avatars0.githubusercontent.com/u/8397708?v=4" width="100px;"/><br /><sub><b>mfix22</b></sub>](https://github.com/mfix22)<br />[💬](#question-mfix22 "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=mfix22 "Code") [🤔](#ideas-mfix22 "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/10369094?v=4" width="100px;"/><br /><sub><b>jakedex</b></sub>](https://github.com/jakedex)<br />[💬](#question-jakedex "Answering Questions") [💻](https://github.com/dawnlabs/carbon/commits?author=jakedex "Code") [🎨](#design-jakedex "Design") [📹](#video-jakedex "Videos") | [<img src="https://avatars1.githubusercontent.com/u/10191084?v=4" width="100px;"/><br /><sub><b>andrewda</b></sub>](https://github.com/andrewda)<br />[💬](#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") | [<img src="https://avatars2.githubusercontent.com/u/14703164?v=4" width="100px;"/><br /><sub><b>yeskunall</b></sub>](https://github.com/yeskunall)<br />[💻](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") | [<img src="https://avatars1.githubusercontent.com/u/2652676?v=4" width="100px;"/><br /><sub><b>stoshfabricius</b></sub>](https://github.com/stoshfabricius)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=stoshfabricius "Code") | [<img src="https://avatars1.githubusercontent.com/u/11639896?v=4" width="100px;"/><br /><sub><b>jkling38</b></sub>](https://github.com/jkling38)<br />[📖](https://github.com/dawnlabs/carbon/commits?author=jkling38 "Documentation") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/225946?v=4" width="100px;"/><br /><sub><b>otobrglez</b></sub>](https://github.com/otobrglez)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=otobrglez "Code") | [<img src="https://avatars3.githubusercontent.com/u/11488612?v=4" width="100px;"/><br /><sub><b>darahak</b></sub>](https://github.com/darahak)<br />[📖](https://github.com/dawnlabs/carbon/commits?author=darahak "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/246651?v=4" width="100px;"/><br /><sub><b>dom96</b></sub>](https://github.com/dom96)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=dom96 "Code") | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>elrumordelaluz</b></sub>](https://github.com/elrumordelaluz)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=elrumordelaluz "Code") | [<img src="https://avatars2.githubusercontent.com/u/21217?v=4" width="100px;"/><br /><sub><b>cjb</b></sub>](https://github.com/cjb)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=cjb "Code") | [<img src="https://avatars1.githubusercontent.com/u/5427083?v=4" width="100px;"/><br /><sub><b>Krzysztof-Cieslak</b></sub>](https://github.com/Krzysztof-Cieslak)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=Krzysztof-Cieslak "Code") | [<img src="https://avatars0.githubusercontent.com/u/2369851?v=4" width="100px;"/><br /><sub><b>fernahh</b></sub>](https://github.com/fernahh)<br />[📖](https://github.com/dawnlabs/carbon/commits?author=fernahh "Documentation") |
-| [<img src="https://avatars1.githubusercontent.com/u/10941033?v=4" width="100px;"/><br /><sub><b>g3r4n</b></sub>](https://github.com/g3r4n)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [<img src="https://avatars0.githubusercontent.com/u/55830?v=4" width="100px;"/><br /><sub><b>Mat Gadd</b></sub>](http://drarok.com/)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [<img src="https://avatars1.githubusercontent.com/u/11805775?v=4" width="100px;"/><br /><sub><b>Brad Davies</b></sub>](https://bradlab.co.uk)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") |
+| [<img src="https://avatars1.githubusercontent.com/u/10941033?v=4" width="100px;"/><br /><sub><b>g3r4n</b></sub>](https://github.com/g3r4n)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=g3r4n "Code") | [<img src="https://avatars0.githubusercontent.com/u/55830?v=4" width="100px;"/><br /><sub><b>Mat Gadd</b></sub>](http://drarok.com/)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3ADrarok "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=Drarok "Code") | [<img src="https://avatars1.githubusercontent.com/u/11805775?v=4" width="100px;"/><br /><sub><b>Brad Davies</b></sub>](https://bradlab.co.uk)<br />[🐛](https://github.com/dawnlabs/carbon/issues?q=author%3Avarbrad "Bug reports") [💻](https://github.com/dawnlabs/carbon/commits?author=varbrad "Code") | [<img src="https://avatars1.githubusercontent.com/u/9087886?v=4" width="100px;"/><br /><sub><b>Rafael Câmara</b></sub>](http://www.rafaelcamaram.com/)<br />[💻](https://github.com/dawnlabs/carbon/commits?author=rafaelcamaram "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
--- 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 */
--- 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')}
          />
+          <Slider
+            label="Drop shadow (offset-y)"
+            value={this.props.enabled.dropShadowOffsetY || 20}
+            onChange={this.props.onChange.bind(null, 'dropShadowOffsetY')}
+          />
+          <Slider
+            label="Drop shadow (blur-radius)"
+            value={this.props.enabled.dropShadowBlurRadius || 68}
+            onChange={this.props.onChange.bind(null, 'dropShadowBlurRadius')}
+          />
          <Toggle
            label="Window controls"
            enabled={this.props.enabled.windowControls}
--- a/pages/editor.js
+++ b/pages/editor.js
@ -60,6 +60,8 @@ class Editor extends React.Component {
        theme: DEFAULT_THEME.id,
        language: DEFAULT_LANGUAGE,
        dropShadow: true,
+        dropShadowOffsetY: '20px',
+        dropShadowBlurRadius: '68px',
        windowControls: true,
        widthAdjustment: true,
        lineNumbers: false,