Merge branch 'dev'

This commit is contained in:
Dessalines 2020-03-15 13:05:50 -04:00
commit ed0dd3b8c0
4 changed files with 54 additions and 34 deletions

3
.gitignore vendored
View File

@ -6,4 +6,5 @@ docker/dev/env_deploy.sh
build/
.idea/
ui/src/translations
docker/dev/volumes
docker/dev/volumes
docker/federation-test/volumes

1
docs/src/SUMMARY.md vendored
View File

@ -15,4 +15,5 @@
- [Local Development](contributing_local_development.md)
- [Websocket/HTTP API](contributing_websocket_http_api.md)
- [ActivityPub API Outline](contributing_apub_api_outline.md)
- [Theming Guide](contributing_theming.md)
- [Lemmy Council](lemmy_council.md)

18
docs/src/contributing_theming.md vendored Normal file
View File

@ -0,0 +1,18 @@
# Theming Guide
Lemmy uses [Bootstrap v4](https://getbootstrap.com/), and very few custom css classes, so any bootstrap v4 compatible theme should work fine.
## Creating
- Use a tool like [bootstrap.build](https://bootstrap.build/) to create a bootstrap v4 theme. Export the `bootstrap.min.css` once you're done, and save the `_variables.scss` too.
## Testing
- To test out a theme, you can either use your browser's web tools, or a plugin like stylus to copy-paste a theme, when viewing Lemmy.
## Adding
1. Copy `{my-theme-name}.min.css` to `ui/assets/css/themes`. (You can also copy the `_variables.scss` here if you want).
1. Go to `ui/src/utils.ts` and add `{my-theme-name}` to the themes list.
1. Test locally
1. Do a pull request with those changes.

66
ui/src/utils.ts vendored
View File

@ -53,6 +53,39 @@ export const postRefetchSeconds: number = 60 * 1000;
export const fetchLimit: number = 20;
export const mentionDropdownFetchLimit = 10;
export const languages = [
{ code: 'ca', name: 'Català' },
{ code: 'en', name: 'English' },
{ code: 'eo', name: 'Esperanto' },
{ code: 'es', name: 'Español' },
{ code: 'de', name: 'Deutsch' },
{ code: 'fa', name: 'فارسی' },
{ code: 'ja', name: '日本語' },
{ code: 'pt_BR', name: 'Português Brasileiro' },
{ code: 'zh', name: '中文' },
{ code: 'fi', name: 'Suomi' },
{ code: 'fr', name: 'Français' },
{ code: 'sv', name: 'Svenska' },
{ code: 'ru', name: 'Русский' },
{ code: 'nl', name: 'Nederlands' },
{ code: 'it', name: 'Italiano' },
];
export const themes = [
'litera',
'materia',
'minty',
'solar',
'united',
'cyborg',
'darkly',
'journal',
'sketchy',
'vaporwave',
'vaporwave-dark',
'i386',
];
export function randomStr() {
return Math.random()
.toString(36)
@ -275,24 +308,6 @@ export function debounce(
};
}
export const languages = [
{ code: 'ca', name: 'Català' },
{ code: 'en', name: 'English' },
{ code: 'eo', name: 'Esperanto' },
{ code: 'es', name: 'Español' },
{ code: 'de', name: 'Deutsch' },
{ code: 'fa', name: 'فارسی' },
{ code: 'ja', name: '日本語' },
{ code: 'pt_BR', name: 'Português Brasileiro' },
{ code: 'zh', name: '中文' },
{ code: 'fi', name: 'Suomi' },
{ code: 'fr', name: 'Français' },
{ code: 'sv', name: 'Svenska' },
{ code: 'ru', name: 'Русский' },
{ code: 'nl', name: 'Nederlands' },
{ code: 'it', name: 'Italiano' },
];
export function getLanguage(): string {
let user = UserService.Instance.user;
let lang = user && user.lang ? user.lang : 'browser';
@ -344,21 +359,6 @@ export function getMomentLanguage(): string {
return lang;
}
export const themes = [
'litera',
'materia',
'minty',
'solar',
'united',
'cyborg',
'darkly',
'journal',
'sketchy',
'vaporwave',
'vaporwave-dark',
'i386',
];
export function setTheme(theme: string = 'darkly') {
// unload all the other themes
for (var i = 0; i < themes.length; i++) {