diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl index b1ef9c2cfe..ee8c726139 100644 --- a/assets/css/src/admin.styl +++ b/assets/css/src/admin.styl @@ -2,6 +2,7 @@ @require 'select2/dist/css/select2.css' @require 'datepicker/datepicker' +@require 'badge' @require 'common' @require 'modal' @@ -30,4 +31,4 @@ @require '../../../node_modules/react-confirm-alert/src/react-confirm-alert.css' -@require 'newsletter_templates' \ No newline at end of file +@require 'newsletter_templates' diff --git a/assets/css/src/badge.styl b/assets/css/src/badge.styl new file mode 100644 index 0000000000..98c1fe1c77 --- /dev/null +++ b/assets/css/src/badge.styl @@ -0,0 +1,9 @@ +badge() + text-transform uppercase + cursor pointer + color white + font-size 0.5625rem + font-weight 500 + border-radius 3px + letter-spacing 1px + vertical-align middle diff --git a/assets/css/src/common.styl b/assets/css/src/common.styl index 622e6906ce..3c2cdfe5b7 100644 --- a/assets/css/src/common.styl +++ b/assets/css/src/common.styl @@ -71,3 +71,10 @@ progress::-webkit-progress-value progress::-moz-progress-bar background-color: progress-foreground border-radius: progress-border-radius + +span.feedback-tooltip + badge() + display inline-block + padding 0 4px + background-color #ca4a1f + diff --git a/assets/css/src/listing/newsletters.styl b/assets/css/src/listing/newsletters.styl index b5c8b9c144..f62bd7ebce 100644 --- a/assets/css/src/listing/newsletters.styl +++ b/assets/css/src/listing/newsletters.styl @@ -31,14 +31,8 @@ $green-badge-color = #55bd56 .mailpoet_badge padding: 4px 6px 3px 6px - color: #FFFFFF margin-right: 4px - text-transform: uppercase - font-size: 0.5625rem - font-weight: 500 - border-radius: 3px - letter-spacing: 1px - vertical-align: middle + badge() &_excellent, &_teal background: $excellent-badge-color diff --git a/assets/css/src/newsletter_templates.styl b/assets/css/src/newsletter_templates.styl index 9c606afa87..7e5e8c1194 100644 --- a/assets/css/src/newsletter_templates.styl +++ b/assets/css/src/newsletter_templates.styl @@ -6,4 +6,7 @@ top: 0 left: 0 width: $newsletter-width - max-width: $newsletter-width \ No newline at end of file + max-width: $newsletter-width + +.newsletter-templates-feedback + margin: 0 10px diff --git a/assets/js/src/newsletters/templates/tabs.jsx b/assets/js/src/newsletters/templates/tabs.jsx index 9c720b2645..cf895c882f 100644 --- a/assets/js/src/newsletters/templates/tabs.jsx +++ b/assets/js/src/newsletters/templates/tabs.jsx @@ -1,5 +1,21 @@ import React from 'react'; import PropTypes from 'prop-types'; +import ReactTooltip from 'react-tooltip'; +import MailPoet from 'mailpoet'; +import ReactStringReplace from 'react-string-replace'; + +const tooltipText = ReactStringReplace( + MailPoet.I18n.t('tooltipTemplateTabs'), + /\[link\](.*?)\[\/link\]/g, + match => ( + { match } + ) +); const Tabs = ({ tabs, selected, select }) => (
@@ -13,6 +29,28 @@ const Tabs = ({ tabs, selected, select }) => ( ))} + {MailPoet.I18n.t('feedback')} + + + {tooltipText} + +
); diff --git a/views/newsletters.html b/views/newsletters.html index a825b72cda..7e78dd8d90 100644 --- a/views/newsletters.html +++ b/views/newsletters.html @@ -190,6 +190,8 @@ 'websiteTimeIs': __("Your website’s time is"), 'noScheduledDateError': __('Please enter the scheduled date.'), 'schedule': __('Schedule'), + 'feedback': __('Feedback?'), + 'tooltipTemplateTabs': __("Click [link]here[/link] to give your feedback on this feature. We’d love to hear from you."), 'close': __('Close'), 'today': __('Today'), diff --git a/webpack.config.js b/webpack.config.js index 6aa33cb87f..d680dc205c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -73,6 +73,10 @@ var baseConfig = { include: require.resolve('underscore'), loader: 'expose-loader?_', }, + { + include: require.resolve('react-tooltip'), + loader: 'expose-loader?' + globalPrefix + '.ReactTooltip', + }, { include: require.resolve('history'), loader: 'expose-loader?' + globalPrefix + '.History',