From 9499248e1c570fbd144383672285354034fb93cd Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Thu, 8 Mar 2018 21:36:38 -0600 Subject: [PATCH] Add watermark feature (#274) * Add watermark feature * Change watermark to carbon logo * Fix double borders --- components/Carbon.js | 11 +++++++++++ components/Dropdown.js | 16 +++++++++++++--- components/Settings.js | 6 ++++++ components/svg/Watermark.js | 26 ++++++++++++++++++++++++++ lib/constants.js | 3 ++- 5 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 components/svg/Watermark.js diff --git a/components/Carbon.js b/components/Carbon.js index e59654f..65804e0 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -6,7 +6,9 @@ import ResizeObserver from 'resize-observer-polyfill' import toHash from 'tohash' import debounce from 'lodash.debounce' import ms from 'ms' + import WindowControls from '../components/WindowControls' +import Watermark from '../components/svg/Watermark' import CodeMirror from '../lib/react-codemirror' import { COLORS, @@ -121,6 +123,7 @@ class Carbon extends React.Component { value={this.props.children} options={options} /> + {config.watermark && }
@@ -135,6 +138,14 @@ class Carbon extends React.Component { padding: ${config.paddingVertical} ${config.paddingHorizontal}; } + #container :global(.watermark) { + fill-opacity: 0.3; + position: absolute; + z-index: 2; + bottom: calc(${config.paddingVertical} + 16px); + right: calc(${config.paddingHorizontal} + 16px); + } + #container #container-bg { position: absolute; top: 0px; diff --git a/components/Dropdown.js b/components/Dropdown.js index 493d03e..81fbd54 100644 --- a/components/Dropdown.js +++ b/components/Dropdown.js @@ -86,9 +86,9 @@ const SelectedItem = ({ children, isOpen, color, ...rest }) => { const itemColor = color || COLORS.SECONDARY return ( - + {children} -
+
@@ -148,6 +153,11 @@ const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => { padding: 8px 16px; border-bottom: 1px solid ${itemColor}; } + + .dropdown-list-item:last-child { + border-bottom: none; + } + .dropdown-list-item:hover { background: ${COLORS.HOVER}; } diff --git a/components/Settings.js b/components/Settings.js index edebcaf..fd018f0 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -100,6 +100,11 @@ class Settings extends React.Component { enabled={this.props.enabled.squaredImage} onChange={this.props.onChange.bind(null, 'squaredImage')} /> + :global(div):first-child, + .settings-settings > :global(div):last-child, .settings-settings > :global(.collapse) { border-bottom: none; } diff --git a/components/svg/Watermark.js b/components/svg/Watermark.js new file mode 100644 index 0000000..a8290f3 --- /dev/null +++ b/components/svg/Watermark.js @@ -0,0 +1,26 @@ +import React from 'react' + +export default () => ( + + + + + + + + + + + + + +) diff --git a/lib/constants.js b/lib/constants.js index f1af70a..f066ade 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -460,5 +460,6 @@ export const DEFAULT_SETTINGS = { widthAdjustment: true, lineNumbers: false, exportSize: '2x', - titleBar: '' + titleBar: '', + watermark: false }