chore(settings): added new translation strings

This commit is contained in:
trashtemp 2021-12-24 21:22:01 +01:00
parent 73b6da4e1e
commit 6bed278fe8
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
8 changed files with 99 additions and 31 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 455c61db08463159ede88380ef8ef998fd9d9d33
Subproject commit d5965a4234e30b2ecb172e0755f54e9559b09ed2

View file

@ -219,12 +219,25 @@ export const DisplaySeasonalShim = observer(() => {
return (
<>
<h3>Theme Options</h3>
<h3>
<Text id="app.settings.pages.appearance.theme_options.title" />
</h3>
{/* TOFIX: WIP feature - follows system theme */}
{/*<Checkbox
checked={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
description={
<Text id="app.settings.pages.appearance.theme_options.follow_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.follow" />
</Checkbox>*/}
<Checkbox
checked={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
description="Displays effects in the home tab during holiday seasons.">
Seasonal theme
description={
<Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.seasonal" />
</Checkbox>
</>
);

View file

@ -40,7 +40,8 @@ const CheckboxBase = styled.label`
const CheckboxContent = styled.span`
display: flex;
flex-grow: 1;
font-size: 1rem;
font-size: 14px;
gap: 2px;
font-weight: 600;
flex-direction: column;
`;
@ -111,7 +112,10 @@ export default function Checkbox(props: CheckboxProps) {
!props.disabled && props.onChange(!props.checked)
}
/>
<Checkmark checked={props.checked} contrast={props.contrast} className="check">
<Checkmark
checked={props.checked}
contrast={props.contrast}
className="check">
<Check size={20} />
</Checkmark>
</CheckboxBase>

View file

@ -30,6 +30,11 @@ const CategoryBase = styled.div<BaseProps>`
flex-shrink: 0;
}
.action {
display: flex;
align-items: center;
}
.content {
display: flex;
flex-grow: 1;

View file

@ -44,11 +44,32 @@ const ChannelContent = styled.div`
`;
const PlaceholderBase = styled.div`
@keyframes floating {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 15px);
}
100% {
transform: translate(0, -0px);
}
}
flex-grow: 1;
display: flex;
overflow: hidden;
flex-direction: column;
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
.placeholder {
justify-content: center;
text-align: center;
@ -163,7 +184,9 @@ function ChannelPlaceholder() {
</PageHeader>
<div className="placeholder">
<div className="floating">
<Ghost width={80} />
</div>
<div className="primary">
<Text id="app.main.channel.errors.title" />
</div>

View file

@ -39,7 +39,6 @@ export const Appearance = observer(() => {
id="settings_overrides"
summary={<Text id="app.settings.pages.appearance.overrides" />}>
<ThemeTools />
<h3>App</h3>
<ThemeOverrides />
</CollapsibleSection>

View file

@ -381,7 +381,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
<CollapsibleSection
defaultValue={false}
id={`bot_profile_${bot._id}`}
summary="Bot Profile">
summary={<Text id="app.settings.pages.bots.profile" />}>
<h3>
<Text id="app.settings.pages.profile.custom_background" />
</h3>

View file

@ -1,5 +1,13 @@
import { Check } from "@styled-icons/boxicons-regular";
import {
Star,
Brush,
Bookmark,
BarChartAlt2,
} from "@styled-icons/boxicons-solid";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { useApplicationState } from "../../../mobx/State";
@ -279,7 +287,7 @@ export function ThemeShop() {
return (
<ThemeShopRoot>
<h5>
Browse hundreds of themes, created and curated by the community.
<Text id="app.settings.pages.theme_shop.description" />
</h5>
{/*<LoadFail>
<h5>
@ -290,55 +298,66 @@ export function ThemeShop() {
<Tip warning hideSeparator>
The Theme Shop is currently under construction.
</Tip>
<hr />
{/* FIXME INTEGRATE WITH MOBX */}
{/*<ActiveTheme>
<div class="active-indicator">
<Check size="16" />
Currently active
<Text id="app.settings.pages.theme_shop.active" />
</div>
<div class="container">
<div class="theme">theme svg goes here</div>
<div class="info">
<div class="title">Theme Title</div>
<div class="author">by Author</div>
<div class="author">
<Text id="app.settings.pages.theme_shop.by" />{" "}
Author
</div>
<h5>This is a theme description.</h5>
</div>
</div>
</ActiveTheme>
<InputBox placeholder="Search themes..." contrast />
<InputBox placeholder="<Text id="app.settings.pages.theme_shop.search" />" contrast />
<Category>
<div class="title">
<Bookmark size={16} />
Saved
<Text id="app.settings.pages.theme_shop.category.saved" />
</div>
<a class="view">Manage installed</a>
<a class="view">
<Text id="app.settings.pages.theme_shop.category.manage" />
</a>
</Category>
<Category>
<div class="title">
<Star size={16} />
New this week
<Text id="app.settings.pages.theme_shop.category.new" />
</div>
<a class="view">View all</a>
</Category>
<Category>
<div class="title">
<Brush size={16} />
Default themes
</div>
<a class="view">View all</a>
<a class="view">
<Text id="app.settings.pages.theme_shop.category.viewall" />
</a>
</Category>
<Category>
<div class="title">
<BarChartAlt2 size={16} />
Highest rated
<Text id="app.settings.pages.theme_shop.category.highest" />
</div>
<a class="view">View all</a>
</Category>*/}
<a class="view">
<Text id="app.settings.pages.theme_shop.category.viewall" />
</a>
</Category>
<Category>
<div class="title">
<Brush size={16} />
<Text id="app.settings.pages.theme_shop.category.default" />
</div>
<a class="view">
<Text id="app.settings.pages.theme_shop.category.viewall" />
</a>
</Category>*/}
<hr />
<ThemeList>
{themeList?.map(([slug, theme]) => (
<ThemeInfo
@ -350,7 +369,9 @@ export function ThemeShop() {
themes.hydrate(themeData[slug], true)
}>
<div class="previewBox">
<div class="hover">Use theme</div>
<div class="hover">
<Text id="app.settings.pages.theme_shop.use" />
</div>
<ThemePreview
slug={slug}
theme={themeData[slug]}
@ -359,7 +380,10 @@ export function ThemeShop() {
</button>
<h1 class="name">{theme.name}</h1>
{/* Maybe id's of the users should be included as well / instead? */}
<div class="creator">by {theme.creator}</div>
<div class="creator">
<Text id="app.settings.pages.theme_shop.by" />{" "}
{theme.creator}
</div>
<h5 class="description">{theme.description}</h5>
</ThemeInfo>
))}