Browse Source

Adding 8 different themes.

- Fixes #276
pull/1/head
Dessalines 2 years ago
parent
commit
f38439f687
  1. 27
      assets/css/main.css
  2. 83
      assets/css/themes/cyborg.min.css
  3. 35
      assets/css/themes/darkly.min.css
  4. 12
      assets/css/themes/journal.min.css
  5. 12
      assets/css/themes/litera.min.css
  6. 12
      assets/css/themes/minty.min.css
  7. 12
      assets/css/themes/sketchy.min.css
  8. 68
      assets/css/themes/solar.min.css
  9. 12
      assets/css/themes/united.min.css
  10. 0
      assets/css/tribute.css
  11. 1
      package.json
  12. 2
      src/components/footer.tsx
  13. 4
      src/components/post-listing.tsx
  14. 2
      src/components/post.tsx
  15. 47
      src/components/user.tsx
  16. 12
      src/css/bootstrap.min.css
  17. 16
      src/index.html
  18. 4
      src/index.tsx
  19. 2
      src/interfaces.ts
  20. 6
      src/services/UserService.ts
  21. 1
      src/translations/en.ts
  22. 14
      src/utils.ts
  23. 5
      yarn.lock

src/css/main.css → assets/css/main.css

83
assets/css/themes/cyborg.min.css
File diff suppressed because it is too large
View File

35
assets/css/themes/darkly.min.css
File diff suppressed because it is too large
View File

12
assets/css/themes/journal.min.css
File diff suppressed because it is too large
View File

12
assets/css/themes/litera.min.css
File diff suppressed because it is too large
View File

12
assets/css/themes/minty.min.css
File diff suppressed because it is too large
View File

12
assets/css/themes/sketchy.min.css
File diff suppressed because it is too large
View File

68
assets/css/themes/solar.min.css
File diff suppressed because it is too large
View File

12
assets/css/themes/united.min.css
File diff suppressed because it is too large
View File

src/css/tribute.css → assets/css/tribute.css

1
package.json

@ -21,6 +21,7 @@
"@types/markdown-it": "^0.0.7",
"@types/markdown-it-container": "^2.0.2",
"autosize": "^4.0.2",
"bootswatch": "^4.3.1",
"classcat": "^1.1.3",
"dotenv": "^6.1.0",
"emoji-short-name": "^0.1.0",

2
src/components/footer.tsx

@ -13,7 +13,7 @@ export class Footer extends Component<any, any> {
render() {
return (
<nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3 my-2">
<nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3 mt-2">
<div className="navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">

4
src/components/post-listing.tsx

@ -96,8 +96,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div className="post-title">
<h5 className="mb-0 d-inline">
{post.url ?
<a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a> :
<Link className="text-white" to={`/post/${post.id}`} title={i18n.t('comments')}>{post.name}</Link>
<a className="text-body" href={post.url} target="_blank" title={post.url}>{post.name}</a> :
<Link className="text-body" to={`/post/${post.id}`} title={i18n.t('comments')}>{post.name}</Link>
}
</h5>
{post.url &&

2
src/components/post.tsx

@ -74,7 +74,7 @@ export class Post extends Component<any, PostState> {
if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) {
var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`);
elmnt.scrollIntoView();
elmnt.classList.add("mark-two");
elmnt.classList.add("mark");
this.state.scrolled = true;
this.markScrolledAsRead(this.state.scrolled_comment_id);
}

47
src/components/user.tsx

@ -4,7 +4,7 @@ import { Subscription } from "rxjs";
import { retryWhen, delay, take } from 'rxjs/operators';
import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView, CommentResponse, UserSettingsForm, LoginResponse, BanUserResponse, AddAdminResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services';
import { msgOp, fetchLimit, routeSortTypeToEnum, capitalizeFirstLetter } from '../utils';
import { msgOp, fetchLimit, routeSortTypeToEnum, capitalizeFirstLetter, themes, setTheme } from '../utils';
import { PostListing } from './post-listing';
import { CommentNodes } from './comment-nodes';
import { MomentTime } from './moment-time';
@ -61,6 +61,7 @@ export class User extends Component<any, UserState> {
page: this.getPageFromProps(this.props),
userSettingsForm: {
show_nsfw: null,
theme: null,
auth: null,
},
userSettingsLoading: null,
@ -285,7 +286,18 @@ export class User extends Component<any, UserState> {
<div class="card-body">
<h5><T i18nKey="settings">#</T></h5>
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
<div class="form-group row">
<div class="form-group">
<div class="col-12">
<label><T i18nKey="theme">#</T></label>
<select value={this.state.userSettingsForm.theme} onChange={linkEvent(this, this.handleUserSettingsThemeChange)} class="ml-2 custom-select custom-select-sm w-auto">
<option disabled><T i18nKey="theme">#</T></option>
{themes.map(theme =>
<option value={theme}>{theme}</option>
)}
</select>
</div>
</div>
<div class="form-group">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" checked={this.state.userSettingsForm.show_nsfw} onChange={linkEvent(this, this.handleUserSettingsShowNsfwChange)}/>
@ -309,20 +321,18 @@ export class User extends Component<any, UserState> {
moderates() {
return (
<div>
<div class="card border-secondary mb-3">
<div class="card-body">
{this.state.moderates.length > 0 &&
<div>
<h5><T i18nKey="moderates">#</T></h5>
<ul class="list-unstyled mb-0">
{this.state.moderates.map(community =>
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
)}
</ul>
</div>
}
{this.state.moderates.length > 0 &&
<div class="card border-secondary mb-3">
<div class="card-body">
<h5><T i18nKey="moderates">#</T></h5>
<ul class="list-unstyled mb-0">
{this.state.moderates.map(community =>
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
)}
</ul>
</div>
</div>
</div>
}
</div>
)
}
@ -410,6 +420,12 @@ export class User extends Component<any, UserState> {
i.setState(i.state);
}
handleUserSettingsThemeChange(i: User, event: any) {
i.state.userSettingsForm.theme = event.target.value;
setTheme(event.target.value);
i.setState(i.state);
}
handleUserSettingsSubmit(i: User, event: any) {
event.preventDefault();
i.state.userSettingsLoading = true;
@ -435,6 +451,7 @@ export class User extends Component<any, UserState> {
this.state.loading = false;
if (this.isCurrentUser) {
this.state.userSettingsForm.show_nsfw = UserService.Instance.user.show_nsfw;
this.state.userSettingsForm.theme = UserService.Instance.user.theme ? UserService.Instance.user.theme : 'darkly';
}
document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
window.scrollTo(0,0);

12
src/css/bootstrap.min.css
File diff suppressed because it is too large
View File

16
src/index.html

@ -6,8 +6,24 @@
<meta name="Description" content="Lemmy">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Icons -->
<link rel="shortcut icon" type="image/svg+xml" href="/static/assets/favicon.svg" />
<link rel="apple-touch-icon" href="/static/assets/apple-touch-icon.png" />
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/static/assets/css/tribute.css" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/litera.min.css" id="litera" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/minty.min.css" id="minty" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/solar.min.css" id="solar" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/united.min.css" id="united" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/cyborg.min.css" id="cyborg" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="darkly" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/journal.min.css" id="journal" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/sketchy.min.css" id="sketchy" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/main.css" />
<!-- Scripts -->
<script async src="/static/assets/libs/sortable/sortable.min.js"></script>
</head>

4
src/index.tsx

@ -19,10 +19,6 @@ import { Sponsors } from './components/sponsors';
import { Symbols } from './components/symbols';
import { i18n } from './i18next';
import './css/tribute.css';
import './css/bootstrap.min.css';
import './css/main.css';
import { WebSocketService, UserService } from './services';
const container = document.getElementById('app');

2
src/interfaces.ts

@ -23,6 +23,7 @@ export interface User {
iss: string;
username: string;
show_nsfw: boolean;
theme: string;
}
export interface UserView {
@ -381,6 +382,7 @@ export interface LoginResponse {
export interface UserSettingsForm {
show_nsfw: boolean;
theme: string;
auth: string;
}

6
src/services/UserService.ts

@ -1,5 +1,6 @@
import * as Cookies from 'js-cookie';
import { User, LoginResponse } from '../interfaces';
import { setTheme } from '../utils';
import * as jwt_decode from 'jwt-decode';
import { Subject } from 'rxjs';
@ -14,6 +15,7 @@ export class UserService {
if (jwt) {
this.setUser(jwt);
} else {
setTheme();
console.log('No JWT cookie found.');
}
}
@ -27,8 +29,9 @@ export class UserService {
public logout() {
this.user = undefined;
Cookies.remove("jwt");
console.log("Logged out.");
setTheme();
this.sub.next({user: undefined, unreadCount: 0});
console.log("Logged out.");
}
public get auth(): string {
@ -37,6 +40,7 @@ export class UserService {
private setUser(jwt: string) {
this.user = jwt_decode(jwt);
setTheme(this.user.theme);
this.sub.next({user: this.user, unreadCount: 0});
console.log(this.user);
}

1
src/translations/en.ts

@ -129,6 +129,7 @@ export const en = {
modified: 'modified',
nsfw: 'NSFW',
show_nsfw: 'Show NSFW content',
theme: 'Theme',
sponsors: 'Sponsors',
sponsors_of_lemmy: 'Sponsors of Lemmy',
sponsor_message: 'Lemmy is free, <1>open-source</1> software, meaning no advertising, monetizing, or venture capital, ever. Your donations directly support full-time development of the project. Thank you to the following people:',

14
src/utils.ts

@ -238,3 +238,17 @@ export function getMomentLanguage(): string {
}
return lang;
}
export const themes = ['litera', 'minty', 'solar', 'united', 'cyborg','darkly', 'journal', 'sketchy'];
export function setTheme(theme: string = 'darkly') {
for (var i=0; i < themes.length; i++) {
let styleSheet = document.getElementById(themes[i]);
if (themes[i] == theme) {
styleSheet.removeAttribute("disabled");
} else {
styleSheet.setAttribute("disabled", "disabled");
}
}
}

5
yarn.lock

@ -381,6 +381,11 @@ [email protected]^5.1.0:
raw-body "~1.1.0"
safe-json-parse "~1.0.1"
[email protected]^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-4.3.1.tgz#be54748b420a1962dbcf9782605aac092f842e38"
integrity sha512-kNdpo/TnhO++aic1IODLIe1V0lx6pXwHMpwXMacpANDnuVDtgU1MUgUbVMC3rSWm4UcbImfwPraNYgjKDT0BtA==
[email protected]^2.0.0-beta.3:
version "2.6.1"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.6.1.tgz#196599588af6f0413449c79ab3bf7a5a1bb3384f"

Loading…
Cancel
Save