mirror of
https://github.com/revoltchat/revite.git
synced 2024-09-20 01:57:12 -04:00
chore(settings): added new translation strings
This commit is contained in:
parent
73b6da4e1e
commit
6bed278fe8
8 changed files with 99 additions and 31 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
||||||
Subproject commit 455c61db08463159ede88380ef8ef998fd9d9d33
|
Subproject commit d5965a4234e30b2ecb172e0755f54e9559b09ed2
|
|
@ -219,12 +219,25 @@ export const DisplaySeasonalShim = observer(() => {
|
||||||
|
|
||||||
return (
|
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
|
<Checkbox
|
||||||
checked={settings.get("appearance:seasonal") ?? true}
|
checked={settings.get("appearance:seasonal") ?? true}
|
||||||
onChange={(v) => settings.set("appearance:seasonal", v)}
|
onChange={(v) => settings.set("appearance:seasonal", v)}
|
||||||
description="Displays effects in the home tab during holiday seasons.">
|
description={
|
||||||
Seasonal theme
|
<Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
|
||||||
|
}>
|
||||||
|
<Text id="app.settings.pages.appearance.theme_options.seasonal" />
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -40,7 +40,8 @@ const CheckboxBase = styled.label`
|
||||||
const CheckboxContent = styled.span`
|
const CheckboxContent = styled.span`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
font-size: 1rem;
|
font-size: 14px;
|
||||||
|
gap: 2px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
@ -111,7 +112,10 @@ export default function Checkbox(props: CheckboxProps) {
|
||||||
!props.disabled && props.onChange(!props.checked)
|
!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} />
|
<Check size={20} />
|
||||||
</Checkmark>
|
</Checkmark>
|
||||||
</CheckboxBase>
|
</CheckboxBase>
|
||||||
|
|
|
@ -30,6 +30,11 @@ const CategoryBase = styled.div<BaseProps>`
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
|
@ -44,11 +44,32 @@ const ChannelContent = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const PlaceholderBase = 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;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-direction: column;
|
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 {
|
.placeholder {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -163,7 +184,9 @@ function ChannelPlaceholder() {
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
|
|
||||||
<div className="placeholder">
|
<div className="placeholder">
|
||||||
<Ghost width={80} />
|
<div className="floating">
|
||||||
|
<Ghost width={80} />
|
||||||
|
</div>
|
||||||
<div className="primary">
|
<div className="primary">
|
||||||
<Text id="app.main.channel.errors.title" />
|
<Text id="app.main.channel.errors.title" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -39,7 +39,6 @@ export const Appearance = observer(() => {
|
||||||
id="settings_overrides"
|
id="settings_overrides"
|
||||||
summary={<Text id="app.settings.pages.appearance.overrides" />}>
|
summary={<Text id="app.settings.pages.appearance.overrides" />}>
|
||||||
<ThemeTools />
|
<ThemeTools />
|
||||||
|
|
||||||
<h3>App</h3>
|
<h3>App</h3>
|
||||||
<ThemeOverrides />
|
<ThemeOverrides />
|
||||||
</CollapsibleSection>
|
</CollapsibleSection>
|
||||||
|
|
|
@ -381,7 +381,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
|
||||||
<CollapsibleSection
|
<CollapsibleSection
|
||||||
defaultValue={false}
|
defaultValue={false}
|
||||||
id={`bot_profile_${bot._id}`}
|
id={`bot_profile_${bot._id}`}
|
||||||
summary="Bot Profile">
|
summary={<Text id="app.settings.pages.bots.profile" />}>
|
||||||
<h3>
|
<h3>
|
||||||
<Text id="app.settings.pages.profile.custom_background" />
|
<Text id="app.settings.pages.profile.custom_background" />
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
@ -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 styled from "styled-components";
|
||||||
|
|
||||||
|
import { Text } from "preact-i18n";
|
||||||
import { useEffect, useState } from "preact/hooks";
|
import { useEffect, useState } from "preact/hooks";
|
||||||
|
|
||||||
import { useApplicationState } from "../../../mobx/State";
|
import { useApplicationState } from "../../../mobx/State";
|
||||||
|
@ -279,7 +287,7 @@ export function ThemeShop() {
|
||||||
return (
|
return (
|
||||||
<ThemeShopRoot>
|
<ThemeShopRoot>
|
||||||
<h5>
|
<h5>
|
||||||
Browse hundreds of themes, created and curated by the community.
|
<Text id="app.settings.pages.theme_shop.description" />
|
||||||
</h5>
|
</h5>
|
||||||
{/*<LoadFail>
|
{/*<LoadFail>
|
||||||
<h5>
|
<h5>
|
||||||
|
@ -290,55 +298,66 @@ export function ThemeShop() {
|
||||||
<Tip warning hideSeparator>
|
<Tip warning hideSeparator>
|
||||||
The Theme Shop is currently under construction.
|
The Theme Shop is currently under construction.
|
||||||
</Tip>
|
</Tip>
|
||||||
<hr />
|
|
||||||
{/* FIXME INTEGRATE WITH MOBX */}
|
{/* FIXME INTEGRATE WITH MOBX */}
|
||||||
{/*<ActiveTheme>
|
{/*<ActiveTheme>
|
||||||
<div class="active-indicator">
|
<div class="active-indicator">
|
||||||
<Check size="16" />
|
<Check size="16" />
|
||||||
Currently active
|
<Text id="app.settings.pages.theme_shop.active" />
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="theme">theme svg goes here</div>
|
<div class="theme">theme svg goes here</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="title">Theme Title</div>
|
<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>
|
<h5>This is a theme description.</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ActiveTheme>
|
</ActiveTheme>
|
||||||
<InputBox placeholder="Search themes..." contrast />
|
<InputBox placeholder="<Text id="app.settings.pages.theme_shop.search" />" contrast />
|
||||||
<Category>
|
<Category>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Bookmark size={16} />
|
<Bookmark size={16} />
|
||||||
Saved
|
<Text id="app.settings.pages.theme_shop.category.saved" />
|
||||||
</div>
|
</div>
|
||||||
<a class="view">Manage installed</a>
|
<a class="view">
|
||||||
|
<Text id="app.settings.pages.theme_shop.category.manage" />
|
||||||
|
</a>
|
||||||
</Category>
|
</Category>
|
||||||
|
|
||||||
<Category>
|
<Category>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Star size={16} />
|
<Star size={16} />
|
||||||
New this week
|
<Text id="app.settings.pages.theme_shop.category.new" />
|
||||||
</div>
|
</div>
|
||||||
<a class="view">View all</a>
|
<a class="view">
|
||||||
</Category>
|
<Text id="app.settings.pages.theme_shop.category.viewall" />
|
||||||
|
</a>
|
||||||
<Category>
|
|
||||||
<div class="title">
|
|
||||||
<Brush size={16} />
|
|
||||||
Default themes
|
|
||||||
</div>
|
|
||||||
<a class="view">View all</a>
|
|
||||||
</Category>
|
</Category>
|
||||||
|
|
||||||
<Category>
|
<Category>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<BarChartAlt2 size={16} />
|
<BarChartAlt2 size={16} />
|
||||||
Highest rated
|
<Text id="app.settings.pages.theme_shop.category.highest" />
|
||||||
</div>
|
</div>
|
||||||
<a class="view">View all</a>
|
<a class="view">
|
||||||
</Category>*/}
|
<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>
|
||||||
{themeList?.map(([slug, theme]) => (
|
{themeList?.map(([slug, theme]) => (
|
||||||
<ThemeInfo
|
<ThemeInfo
|
||||||
|
@ -350,7 +369,9 @@ export function ThemeShop() {
|
||||||
themes.hydrate(themeData[slug], true)
|
themes.hydrate(themeData[slug], true)
|
||||||
}>
|
}>
|
||||||
<div class="previewBox">
|
<div class="previewBox">
|
||||||
<div class="hover">Use theme</div>
|
<div class="hover">
|
||||||
|
<Text id="app.settings.pages.theme_shop.use" />
|
||||||
|
</div>
|
||||||
<ThemePreview
|
<ThemePreview
|
||||||
slug={slug}
|
slug={slug}
|
||||||
theme={themeData[slug]}
|
theme={themeData[slug]}
|
||||||
|
@ -359,7 +380,10 @@ export function ThemeShop() {
|
||||||
</button>
|
</button>
|
||||||
<h1 class="name">{theme.name}</h1>
|
<h1 class="name">{theme.name}</h1>
|
||||||
{/* Maybe id's of the users should be included as well / instead? */}
|
{/* 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>
|
<h5 class="description">{theme.description}</h5>
|
||||||
</ThemeInfo>
|
</ThemeInfo>
|
||||||
))}
|
))}
|
||||||
|
|
Loading…
Reference in a new issue