Skip to content

306 feature implement feedback button on website #349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: release/2
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions i18n/de/code.json
Original file line number Diff line number Diff line change
Expand Up @@ -353,5 +353,14 @@
},
"custom.docs-version-hint": {
"message": "Diese Dokumentation behandelt KoliBri - Public UI {version}. Für die aktuellste Version, siehe {link}."
},
"email.send": {
"message": "E-Mail senden"
},
"feedback.header": {
"message": "Feedback geben"
},
"feedback.information": {
"message": "Ihre Meinung zählt! Helfen Sie uns, KoliBri noch besser zu machen. Mit nur wenigen Klicks senden Sie uns Ihre Ideen, Anmerkungen oder Probleme."
}
}
9 changes: 9 additions & 0 deletions i18n/en/code.json
Original file line number Diff line number Diff line change
Expand Up @@ -353,5 +353,14 @@
},
"custom.docs-version-hint": {
"message": "This documentation covers KoliBri - Public UI {version}. For the latest version, see {link}."
},
"email.send": {
"message": "Send email"
},
"feedback.header": {
"message": "Give Feedback"
},
"feedback.information": {
"message": "Your opinion counts! Help us make KoliBri even better. Send us your ideas, comments, or problems in just a few clicks."
}
}
16 changes: 16 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,22 @@ kol-link-button {
display: block;
}

.popover-container {
width: 300px;
padding: 1rem;
}

.popover-paragraph {
margin-top: 10px;
font-size: 0.9rem;
}

.popover-link-button {
display: inline-block;
border-radius: 9999px;
text-decoration: none;
}

.used-by-gallery ul {
list-style: none;
display: flex;
Expand Down
37 changes: 36 additions & 1 deletion src/theme/Navbar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { KolLinkButton } from '@public-ui/react';
import { KolHeading, KolLinkButton, KolPopoverButton } from '@public-ui/react';
import type { FunctionComponent, PropsWithChildren } from 'react';
import React from 'react';
// import { getDarkMode, setDarkMode } from '../../shares/store';
Expand Down Expand Up @@ -93,6 +93,41 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
_variant="ghost"
/>
</div>
<div>
<KolPopoverButton
aria-label="Feedback geben"
_label="Feedback"
_hideLabel
_tooltipAlign="left"
_icons={"codicon codicon-feedback"}
_popoverAlign="bottom"
_variant="ghost"
>
<div className="popover-container">
<KolHeading
_label={translate({
id: 'feedback.header',
})}
_level={3}
>
</KolHeading>
<p className="p popover-paragraph">
{translate({
id: 'feedback.information',
})}
</p>
<KolLinkButton
className="popover-link-button"
_label={translate({
id: 'email.send',
})}
_variant="primary"
_href="mailto:kolibri@itzbund.de?subject=Feedback%20zu%20KoliBri-Webcomponents&body=Hallo%20KoliBri-Team,%0A%0Ahier%20ist%20mein%20Feedback%20zur%20Dokumentation%20oder%20den%20Webcomponents:%0A%0A%5BEinfach%20hier%20Ihr%20Feedback%20einfügen%5D%0A%0AVielen%20Dank!"
>
</KolLinkButton>
</div>
</KolPopoverButton>
</div>
{/* <div>
<KolLinkButton
_href="https://discord.com/invite/7ntYFPns6b"
Expand Down