This is an automated email from the ASF dual-hosted git repository. visortelle pushed a commit to branch request-page-improvement-button in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
commit 422c643b49bcd5d83b1d695435998f14d40c7022 Author: visortelle <[email protected]> AuthorDate: Thu Feb 29 23:48:43 2024 +0400 Add page improvement request button --- src/components/ui/ArticleThumb/ArticleThumb.js | 95 ++++++++++++---------- .../ui/ArticleThumb/ArticleThumb.module.css | 17 ++++ src/css/docs.css | 6 ++ 3 files changed, 74 insertions(+), 44 deletions(-) diff --git a/src/components/ui/ArticleThumb/ArticleThumb.js b/src/components/ui/ArticleThumb/ArticleThumb.js index 2784ffeef749..ec7a733bba82 100644 --- a/src/components/ui/ArticleThumb/ArticleThumb.js +++ b/src/components/ui/ArticleThumb/ArticleThumb.js @@ -1,56 +1,63 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; import ThumbDown from './thumbs-down.svg'; import ThumbUp from './thumbs-up.svg'; +import s from './ArticleThumb.module.css'; const ArticleThumb = () => { - const [activeKey, setActiveKey] = useState(); - const handleThumbClick = (val) => { - if (!activeKey) { - setActiveKey(val) - if (window && (window._paq)) { - window._paq.push(['trackEvent', 'Website Feedback', val, location.pathname]) - } - } - } - - let card_style = {borderWidth: '1px', padding: '3px', display: 'flex'} - let thumb_style = { - justifyContent: 'center', display: 'flex', borderRadius: '99999px', - width: '2.5rem', height: '2.5rem', - } + const [activeKey, setActiveKey] = useState(); + const handleThumbClick = (val) => { if (!activeKey) { - thumb_style['cursor'] = "pointer" + setActiveKey(val) + if (window && (window._paq)) { + window._paq.push(['trackEvent', 'Website Feedback', val, location.pathname]) + } } - return ( - <div className="border"> - <div style={{ color: "var(--ifm-toc-link-color)" }}> - Was this helpful? + } + + let card_style = { borderWidth: '1px', padding: '3px', display: 'flex' } + let thumb_style = { + justifyContent: 'center', display: 'flex', borderRadius: '99999px', + width: '2.5rem', height: '2.5rem', + } + if (!activeKey) { + thumb_style['cursor'] = "pointer" + } + return ( + <div className="border"> + <div style={{ color: "var(--ifm-toc-link-color)" }}> + Was this helpful? + </div> + <div style={card_style}> + <div + style={{ + ...thumb_style, + background: activeKey === "up" ? "var(--text-color)" : "", + color: activeKey === "up" ? "#fff" : "", + }} + onClick={() => handleThumbClick("up")} + > + <ThumbUp /> </div> - <div style={card_style}> - <div - style={{ - ...thumb_style, - background: activeKey === "up" ? "var(--text-color)" : "", - color: activeKey === "up" ? "#fff" : "", - }} - onClick={() => handleThumbClick("up")} - > - <ThumbUp /> - </div> - <div - style={{ - ...thumb_style, - marginLeft: "30px", - background: activeKey === "down" ? "var(--text-color)" : "", - color: activeKey === "down" ? "#fff" : "", - }} - onClick={() => handleThumbClick("down")} - > - <ThumbDown /> - </div> + <div + style={{ + ...thumb_style, + background: activeKey === "down" ? "var(--text-color)" : "", + color: activeKey === "down" ? "#fff" : "", + }} + onClick={() => handleThumbClick("down")} + > + <ThumbDown /> </div> </div> - ); + <a + target='_blank' + className={s.RequestImprovementButton} + href="https://github.com/apache/pulsar/issues/new?assignees=&labels=doc-required&projects=&template=doc.yml&title=%5BDoc%5D+"; + > + Request page improvement + </a> + </div> + ); }; diff --git a/src/components/ui/ArticleThumb/ArticleThumb.module.css b/src/components/ui/ArticleThumb/ArticleThumb.module.css new file mode 100644 index 000000000000..41dc106ee25e --- /dev/null +++ b/src/components/ui/ArticleThumb/ArticleThumb.module.css @@ -0,0 +1,17 @@ +.RequestImprovementButton { + font-size: 0.875rem; + background: var(--color-primary); + color: #fff; + border-radius: 0.5rem; + padding: 0.25rem 1rem; + font-weight: 500; + text-decoration: none; + display: inline-block; + margin-bottom: 0.5rem; +} + +.RequestImprovementButton:hover { + opacity: 0.5; + text-decoration: none; + color: #fff; +} diff --git a/src/css/docs.css b/src/css/docs.css index 25e1cd7f5401..473020f7d009 100644 --- a/src/css/docs.css +++ b/src/css/docs.css @@ -19,6 +19,12 @@ div[class^="docPage"] .alert--secondary { --ifm-alert-border-color: var(--ifm-color-info-dark); } +.menu__caret::before, +.menu__link--sublist-caret:after { + content: ''; + background-size: 1.4rem 1.4rem; +} + .pagination-nav__link { border-color: var(--border-color) !important; }
