Skip to content

Commit

Permalink
ntp: added translations (#1279)
Browse files Browse the repository at this point in the history
* ntp: added translations

* further UI tweaks

* fix: wordwrap in nextsteps cards

* prevent default padding on button

* chore: Add hover and active states to list expander button

* right-align expander with bars

* don't use the offset when collapsed

---------

Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>
Co-authored-by: Valerie Kraucunas <vkraucunas@duckduckgo.com>
  • Loading branch information
3 people authored Nov 26, 2024
1 parent 12f5579 commit 2b0f898
Show file tree
Hide file tree
Showing 13 changed files with 1,437 additions and 10 deletions.
19 changes: 18 additions & 1 deletion special-pages/pages/new-tab/app/components/ShowHide.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
height: 2rem;
width: 2rem;
border-radius: 50%;
padding-inline: 0;

&:focus-visible {
box-shadow: var(--focus-ring);
Expand All @@ -28,6 +29,14 @@
svg {
margin-right: var(--sp-2);
}

&:hover {
background-color: var(--color-black-at-9);
}

&:active {
background-color: var(--color-black-at-12);
}
}

svg {
Expand All @@ -46,6 +55,14 @@
@media (prefers-color-scheme: dark) {
&.withText {
border-color: var(--color-white-at-9);

&:hover {
background-color: var(--color-white-at-9);
}

&:active {
background-color: var(--color-white-at-12);
}
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import styles from './Customizer.module.css';
import { VisibilityMenu } from './VisibilityMenu.js';
import { CustomizeIcon } from '../../components/Icons.js';
import cn from 'classnames';
import { useMessaging } from '../../types.js';
import { useMessaging, useTypedTranslation } from '../../types.js';

/**
* @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem } from '../../../../../types/new-tab.js'
Expand Down Expand Up @@ -107,6 +107,7 @@ export function useContextMenu() {
* @param {import("preact").Ref<HTMLButtonElement>} [props.buttonRef]
*/
export function CustomizerButton({ menuId, buttonId, isOpen, toggleMenu, buttonRef }) {
const { t } = useTypedTranslation();
return (
<button
ref={buttonRef}
Expand All @@ -118,7 +119,7 @@ export function CustomizerButton({ menuId, buttonId, isOpen, toggleMenu, buttonR
id={buttonId}
>
<CustomizeIcon />
<span>Customize</span>
<span>{t('ntp_customizer_button')}</span>
</button>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@ function Inner({ rows, safeAreaRef, rowHeight, add }) {
setVisibleRows();

const controller = new AbortController();

window.addEventListener(
'resize',
() => {
Expand Down Expand Up @@ -248,7 +249,7 @@ function Inner({ rows, safeAreaRef, rowHeight, add }) {
return (
<Fragment>
{subsetOfRowsToRender.map((items, rowIndex) => {
const topOffset = (start + rowIndex) * rowHeight;
const topOffset = expansion === 'expanded' ? (start + rowIndex) * rowHeight : 0;
const keyed = `-${start + rowIndex}-`;
return <TileRow key={keyed} dropped={dropped} items={items} topOffset={topOffset} add={add} />;
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,9 @@
background-color: transparent;
border-width: 0;
border-radius: var(--border-radius-sm);
text-wrap: nowrap;
font-weight: 600;
font-size: calc(11 * var(--px-in-rem));
line-height: 1;
line-height: calc(14 * var(--px-in-rem));
color: var(--ntp-color-primary);

&:hover {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
display: flex;
align-items: center;
justify-content: center;
padding-top: 2px;
padding-top: 0.5px;
}

.title {
Expand All @@ -60,6 +60,12 @@
top: 50%;
transform: translateY(-50%);
opacity: 1;
/**
* NOTE: This is just for visual alignment. The grid in which this sits is correct,
* but to preserve the larger tap-area for the button, we're opting to shift this over
* manually to solve this specific layout case.
*/
right: -4px
}
}

Expand Down Expand Up @@ -133,7 +139,7 @@
align-items: center;

@media screen and (min-width: 500px) {
grid-template-columns: auto auto 60%;
grid-template-columns: 35% 10% calc(55% - 1rem); /* - 1rem accounts for the grid gaps */
}
}

Expand All @@ -149,6 +155,7 @@
align-items: center;
gap: var(--sp-2);
padding-left: var(--sp-1);
overflow: hidden;
}

.icon {
Expand Down Expand Up @@ -184,7 +191,12 @@
.name {
font-size: var(--title-3-em-font-size);
font-weight: var(--title-3-em-font-weight);
line-height: 1;
text-overflow: ellipsis;
display: block;
overflow: hidden;
white-space: nowrap;
position: relative;
top: -1px;
}

.count {
Expand Down Expand Up @@ -224,4 +236,4 @@
color: var(--ntp-text-muted);
opacity: 1;
}
}
}
4 changes: 4 additions & 0 deletions special-pages/pages/new-tab/app/strings.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
"title": "Dismiss",
"note": "Button that closes or hides the current popup or notification."
},
"ntp_customizer_button": {
"title": "Customize",
"note": "Button opens a menu. The menu allows the user to customize the page, such as showing/hiding sections."
},
"widgets_visibility_menu_title": {
"title": "Customize New Tab Page",
"note": "Heading text describing that there's a list of toggles for customizing the page layout."
Expand Down
199 changes: 199 additions & 0 deletions special-pages/pages/new-tab/src/locales/de/new-tab.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
{
"smartling" : {
"string_format" : "icu",
"translate_paths" : [
{
"path" : "*/title",
"key" : "{*}/title",
"instruction" : "*/note"
}]
},
"ntp_show_less" : {
"title" : "Weniger anzeigen",
"note" : "Button that reduces the number of items or content displayed."
},
"ntp_show_more" : {
"title" : "Mehr anzeigen",
"note" : "Button that increases the number of items or content displayed."
},
"ntp_dismiss" : {
"title" : "Verwerfen",
"note" : "Button that closes or hides the current popup or notification."
},
"ntp_customizer_button" : {
"title" : "Anpassen",
"note" : "Button opens a menu. The menu allows the user to customize the page, such as showing/hiding sections."
},
"widgets_visibility_menu_title" : {
"title" : "Neuen Tab anpassen",
"note" : "Heading text describing that there's a list of toggles for customizing the page layout."
},
"updateNotification_updated_version" : {
"title" : "Browser auf Version {version} aktualisiert.",
"note" : "Text to indicate which new version was updated. `{version}` will be formatted like `1.22.0`"
},
"updateNotification_whats_new" : {
"title" : "Sieh dir an, was es in dieser Version <a>Neues</a> gibt.",
"note" : "The `<a>` tag represents a clickable link, please preserve it."
},
"updateNotification_dismiss_btn" : {
"title" : "Verwerfen",
"note" : "Button label text for an action that removes the widget from the screen."
},
"stats_menuTitle" : {
"title" : "Blockierte Tracking-Versuche",
"note" : "Used as a label in a customization menu"
},
"stats_noActivity" : {
"title" : "Blockierte Tracking-Versuche werden hier angezeigt. Browse weiter, um zu sehen, wie viele wir blockieren.",
"note" : "Placeholder for when we cannot report any blocked trackers yet"
},
"stats_noRecent" : {
"title" : "Keine aktuellen Tracking-Aktivitäten",
"note" : "Placeholder to indicate that no tracking activity was blocked in the last 7 days"
},
"stats_countBlockedSingular" : {
"title" : "1 Tracking-Versuch blockiert",
"note" : "The main headline indicating that a single tracker was blocked"
},
"stats_countBlockedPlural" : {
"title" : "{count} Tracking-Versuche blockiert",
"note" : "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 tracking attempts blocked'"
},
"stats_feedCountBlockedSingular" : {
"title" : "1 Versuch von DuckDuckGo in den letzten 7 Tagen blockiert",
"note" : "A summary description of how many tracking attempts where blocked, when only one exists."
},
"stats_feedCountBlockedPeriod" : {
"title" : "Vergangene 7 Tage",
"note" : "A summary description indicating the time period of the blocked tracking attempts, which is the past 7 days."
},
"stats_feedCountBlockedPlural" : {
"title" : "{count} Tracking-Versuche blockiert",
"note" : "A summary description of how many tracking attempts were blocked by DuckDuckGo in the last 7 days when there is more than one. E.g., '1,028 tracking attempts blocked."
},
"stats_toggleLabel" : {
"title" : "Aktuelle Aktivität anzeigen",
"note" : "The aria-label text for a toggle button that shows the detailed activity feed"
},
"stats_hideLabel" : {
"title" : "Letzte Aktivitäten ausblenden",
"note" : "The aria-label text for a toggle button that hides the detailed activity feed"
},
"stats_otherCompanyName" : {
"title" : "Anderes",
"note" : "A placeholder to represent an aggregated count of entries, not present in the rest of the list. For example, 'Other: 200', which would mean 200 entries excluding the ones already shown"
},
"stats_otherCount" : {
"title" : "{count} Versuche von anderen Netzwerken",
"note" : "An aggregated count of blocked entries not present in the main list. For example, '200 attempts from other networks'"
},
"nextSteps_sectionTitle" : {
"title" : "Nächste Schritte",
"note" : "Text that goes in the Next Steps bubble above the first card"
},
"nextSteps_bringStuff_title" : {
"title" : "Bring deine Sachen",
"note" : "Title of the Next Steps card for importing bookmarks and favorites"
},
"nextSteps_bringStuff_summary" : {
"title" : "Importiere Lesezeichen, Favoriten und Passwörter für einen reibungslosen Übergang von deinem alten Browser.",
"note" : "Summary of the Next Steps card for importing bookmarks and favorites"
},
"nextSteps_bringStuff_actionText" : {
"title" : "Jetzt importieren",
"note" : "Button text of the Next Steps card for importing bookmarks and favorites"
},
"nextSteps_defaultApp_title" : {
"title" : "Als Standard-Browser festlegen",
"note" : "Title of the Next Steps card for making DDG the user's default browser"
},
"nextSteps_defaultApp_summary" : {
"title" : "Wir blockieren automatisch Tracker, während du browst. Das ist Datenschutz, vereinfacht.",
"note" : "Summary of the Next Steps card for making DDG the user's default browser"
},
"nextSteps_defaultApp_actionText" : {
"title" : "Standardbrowser erstellen",
"note" : "Button text of the Next Steps card for making DDG the user's default browser"
},
"nextSteps_blockCookies_title" : {
"title" : "Cookie-Pop-ups blockieren",
"note" : "Title of the Next Steps card for blocking cookie pop-ups"
},
"nextSteps_blockCookies_summary" : {
"title" : "Wir brauchen deine Erlaubnis, um in deinem Namen Cookies abzulehnen. Leichte Entscheidung.",
"note" : "Summary of the Next Steps card for blocking cookie pop-ups"
},
"nextSteps_blockCookies_actionText" : {
"title" : "Cookie-Pop-ups blockieren",
"note" : "Button text of the Next Steps card for blocking cookie pop-ups"
},
"nextSteps_emailProtection_title" : {
"title" : "Schütze deinen Posteingang",
"note" : "Title of the Next Steps card for email protection"
},
"nextSteps_emailProtection_summary" : {
"title" : "Erstelle @duck.com-Adressen, die Tracker aus E-Mails entfernen und an deinen Posteingang weiterleiten.",
"note" : "Summary of the Next Steps card for email protection"
},
"nextSteps_emailProtection_actionText" : {
"title" : "Email-Schutz erhalten",
"note" : "Button text of the Next Steps card for email protection"
},
"nextSteps_duckPlayer_title" : {
"title" : "YouTube ohne aufdringliche Werbung",
"note" : "Title of the Next Steps card for adopting DuckPlayer"
},
"nextSteps_duckPlayer_summary" : {
"title" : "Genieße ein sauberes Seherlebnis ohne personalisierte Werbung.",
"note" : "Summary of the Next Steps card for adopting DuckPlayer"
},
"nextSteps_duckPlayer_actionText" : {
"title" : "Duck Player testen",
"note" : "Button text of the Next Steps card for adopting DuckPlayer"
},
"nextSteps_addAppDockMac_title" : {
"title" : "App zum Dock hinzufügen",
"note" : "Title of the Next Steps card for adding DDG app to OS dock"
},
"nextSteps_addAppDockMac_summary" : {
"title" : "Greife schneller auf DuckDuckGo zu, indem du es zum Dock hinzufügst.",
"note" : "Summary of the Next Steps card for adding DDG app to OS dock"
},
"nextSteps_addAppDockMac_actionText" : {
"title" : "Zum Dock hinzufügen",
"note" : "Initial button text of the Next Steps card for adding DDG app to OS dock"
},
"nextSteps_addAppDockMac_confirmationText" : {
"title" : "Zum Dock hinzugefügt!",
"note" : "Button text after clicking on the Next Steps card for adding DDG app to OS dock"
},
"nextSteps_pinAppToTaskbarWindows_title" : {
"title" : "App an die Taskleiste anheften",
"note" : "Title of the Next Steps card for adding DDG app to OS dock"
},
"nextSteps_pinAppToTaskbarWindows_summary" : {
"title" : "Greife schneller auf DuckDuckGo zu, indem du es an die Taskleiste heftest.",
"note" : "Summary of the Next Steps card for adding DDG app to OS dock"
},
"nextSteps_pinAppToTaskbarWindows_actionText" : {
"title" : "An Taskleiste pinnen",
"note" : "Initial button text of the Next Steps card for adding DDG app to OS dock"
},
"nextSteps_pinAppToTaskbarWindows_confirmationText" : {
"title" : "An die Taskleiste angeheftet!",
"note" : "Button text after clicking on the Next Steps card for adding DDG app to OS dock"
},
"favorites_show_less" : {
"title" : "Weniger anzeigen",
"note" : "Button label to display fewer items"
},
"favorites_show_more" : {
"title" : "Mehr anzeigen ({count} verbleibend)",
"note" : "Button text to show hidden items. {count} will be replaced with the number of remaining favorite items to show, including the parentheses. Example: 'Show more (18 remaining)'"
},
"favorites_menu_title" : {
"title" : "Favoriten",
"note" : "Used as a label in a customization menu"
}
}
Loading

0 comments on commit 2b0f898

Please sign in to comment.