grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Styling, sidebar message.

Browse source
This commit is contained in:
Dessalines 2019-04-09 14:21:19 -07:00
parent 463cacdf72
commit ab9cdd990d
8 changed files with 59 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
server/src/websocket_server/server.rs
View file

@ -391,25 +391,25 @@ impl Handler<StandardMessage> for ChatServer {
let json: Value = serde_json::from_str(&msg.msg) let json: Value = serde_json::from_str(&msg.msg)
.expect("Couldn't parse message"); .expect("Couldn't parse message");
let data: &Value = &json["data"]; let data = &json["data"].to_string();
let op = &json["op"].as_str().unwrap(); let op = &json["op"].as_str().unwrap();
let user_operation: UserOperation = UserOperation::from_str(&op).unwrap(); let user_operation: UserOperation = UserOperation::from_str(&op).unwrap();
let res: String = match user_operation { let res: String = match user_operation {
UserOperation::Login => { UserOperation::Login => {
let login: Login = serde_json::from_str(&data.to_string()).unwrap(); let login: Login = serde_json::from_str(data).unwrap();
login.perform(self, msg.id) login.perform(self, msg.id)
}, },
UserOperation::Register => { UserOperation::Register => {
let register: Register = serde_json::from_str(&data.to_string()).unwrap(); let register: Register = serde_json::from_str(data).unwrap();
register.perform(self, msg.id) register.perform(self, msg.id)
}, },
UserOperation::CreateCommunity => { UserOperation::CreateCommunity => {
let create_community: CreateCommunity = serde_json::from_str(&data.to_string()).unwrap(); let create_community: CreateCommunity = serde_json::from_str(data).unwrap();
create_community.perform(self, msg.id) create_community.perform(self, msg.id)
}, },
UserOperation::ListCommunities => { UserOperation::ListCommunities => {
let list_communities: ListCommunities = serde_json::from_str(&data.to_string()).unwrap(); let list_communities: ListCommunities = serde_json::from_str(data).unwrap();
list_communities.perform(self, msg.id) list_communities.perform(self, msg.id)
}, },
UserOperation::ListCategories => { UserOperation::ListCategories => {
@ -417,55 +417,55 @@ impl Handler<StandardMessage> for ChatServer {
list_categories.perform(self, msg.id) list_categories.perform(self, msg.id)
}, },
UserOperation::CreatePost => { UserOperation::CreatePost => {
let create_post: CreatePost = serde_json::from_str(&data.to_string()).unwrap(); let create_post: CreatePost = serde_json::from_str(data).unwrap();
create_post.perform(self, msg.id) create_post.perform(self, msg.id)
}, },
UserOperation::GetPost => { UserOperation::GetPost => {
let get_post: GetPost = serde_json::from_str(&data.to_string()).unwrap(); let get_post: GetPost = serde_json::from_str(data).unwrap();
get_post.perform(self, msg.id) get_post.perform(self, msg.id)
}, },
UserOperation::GetCommunity => { UserOperation::GetCommunity => {
let get_community: GetCommunity = serde_json::from_str(&data.to_string()).unwrap(); let get_community: GetCommunity = serde_json::from_str(data).unwrap();
get_community.perform(self, msg.id) get_community.perform(self, msg.id)
}, },
UserOperation::CreateComment => { UserOperation::CreateComment => {
let create_comment: CreateComment = serde_json::from_str(&data.to_string()).unwrap(); let create_comment: CreateComment = serde_json::from_str(data).unwrap();
create_comment.perform(self, msg.id) create_comment.perform(self, msg.id)
}, },
UserOperation::EditComment => { UserOperation::EditComment => {
let edit_comment: EditComment = serde_json::from_str(&data.to_string()).unwrap(); let edit_comment: EditComment = serde_json::from_str(data).unwrap();
edit_comment.perform(self, msg.id) edit_comment.perform(self, msg.id)
}, },
UserOperation::CreateCommentLike => { UserOperation::CreateCommentLike => {
let create_comment_like: CreateCommentLike = serde_json::from_str(&data.to_string()).unwrap(); let create_comment_like: CreateCommentLike = serde_json::from_str(data).unwrap();
create_comment_like.perform(self, msg.id) create_comment_like.perform(self, msg.id)
}, },
UserOperation::GetPosts => { UserOperation::GetPosts => {
let get_posts: GetPosts = serde_json::from_str(&data.to_string()).unwrap(); let get_posts: GetPosts = serde_json::from_str(data).unwrap();
get_posts.perform(self, msg.id) get_posts.perform(self, msg.id)
}, },
UserOperation::CreatePostLike => { UserOperation::CreatePostLike => {
let create_post_like: CreatePostLike = serde_json::from_str(&data.to_string()).unwrap(); let create_post_like: CreatePostLike = serde_json::from_str(data).unwrap();
create_post_like.perform(self, msg.id) create_post_like.perform(self, msg.id)
}, },
UserOperation::EditPost => { UserOperation::EditPost => {
let edit_post: EditPost = serde_json::from_str(&data.to_string()).unwrap(); let edit_post: EditPost = serde_json::from_str(data).unwrap();
edit_post.perform(self, msg.id) edit_post.perform(self, msg.id)
}, },
UserOperation::EditCommunity => { UserOperation::EditCommunity => {
let edit_community: EditCommunity = serde_json::from_str(&data.to_string()).unwrap(); let edit_community: EditCommunity = serde_json::from_str(data).unwrap();
edit_community.perform(self, msg.id) edit_community.perform(self, msg.id)
}, },
UserOperation::FollowCommunity => { UserOperation::FollowCommunity => {
let follow_community: FollowCommunity = serde_json::from_str(&data.to_string()).unwrap(); let follow_community: FollowCommunity = serde_json::from_str(data).unwrap();
follow_community.perform(self, msg.id) follow_community.perform(self, msg.id)
}, },
UserOperation::GetFollowedCommunities => { UserOperation::GetFollowedCommunities => {
let followed_communities: GetFollowedCommunities = serde_json::from_str(&data.to_string()).unwrap(); let followed_communities: GetFollowedCommunities = serde_json::from_str(data).unwrap();
followed_communities.perform(self, msg.id) followed_communities.perform(self, msg.id)
}, },
UserOperation::GetUserDetails => { UserOperation::GetUserDetails => {
let get_user_details: GetUserDetails = serde_json::from_str(&data.to_string()).unwrap(); let get_user_details: GetUserDetails = serde_json::from_str(data).unwrap();
get_user_details.perform(self, msg.id) get_user_details.perform(self, msg.id)
}, },
// _ => { // _ => {

2
ui/src/components/communities.tsx
View file

@ -45,7 +45,7 @@ export class Communities extends Component<any, CommunitiesState> {
render() { render() {
return ( return (
<div class="container-fluid"> <div class="container">
{this.state.loading ? {this.state.loading ?
<h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div> <div>

30
ui/src/components/main.tsx
View file

@ -5,7 +5,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces'; import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { PostListings } from './post-listings'; import { PostListings } from './post-listings';
import { msgOp } from '../utils'; import { msgOp, repoUrl } from '../utils';
interface State { interface State {
subscribedCommunities: Array<CommunityUser>; subscribedCommunities: Array<CommunityUser>;
@ -46,17 +46,15 @@ export class Main extends Component<any, State> {
return ( return (
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-md-9"> <div class="col-12 col-md-8">
<PostListings /> <PostListings />
</div> </div>
<div class="col-12 col-md-3"> <div class="col-12 col-md-4">
<h4>A Landing message</h4> {UserService.Instance.loggedIn ?
{UserService.Instance.loggedIn &&
<div> <div>
{this.state.loading ? {this.state.loading ?
<h4 class="mt-3"><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div> <div>
<hr />
<h4>Subscribed forums</h4> <h4>Subscribed forums</h4>
<ul class="list-unstyled"> <ul class="list-unstyled">
{this.state.subscribedCommunities.map(community => {this.state.subscribedCommunities.map(community =>
@ -65,7 +63,8 @@ export class Main extends Component<any, State> {
</ul> </ul>
</div> </div>
} }
</div> </div> :
this.landing()
} }
</div> </div>
</div> </div>
@ -73,6 +72,21 @@ export class Main extends Component<any, State> {
) )
} }
landing() {
return (
<div>
<h4>Welcome to
<svg class="icon mx-2"><use xlinkHref="#icon-mouse"></use></svg>
<a href={repoUrl}>Lemmy<sup>Beta</sup></a>
</h4>
<p>Lemmy is a <a href="https://en.wikipedia.org/wiki/Link_aggregation">link aggregator</a> / reddit alternative, intended to work in the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>.</p>
<p>Its self-hostable, has live-updating comment threads, and is tiny (<code>~80kB</code>). Federation into the ActivityPub network is on the roadmap.</p>
<p>This is a <b>very early beta version</b>, and a lot of features are currently broken or missing.</p>
<p>Suggest new features or report bugs <a href={repoUrl}>here.</a></p>
<p>Made with <a href="https://www.rust-lang.org">Rust</a>, <a href="https://actix.rs/">Actix</a>, <a href="https://www.infernojs.org">Inferno</a>, <a href="https://www.typescriptlang.org/">Typescript</a>.</p>
</div>
)
}
parseMessage(msg: any) { parseMessage(msg: any) {
console.log(msg); console.log(msg);

6
ui/src/components/navbar.tsx
View file

@ -25,7 +25,7 @@ export class Navbar extends Component<any, NavbarState> {
// Subscribe to user changes // Subscribe to user changes
UserService.Instance.sub.subscribe(user => { UserService.Instance.sub.subscribe(user => {
let loggedIn: boolean = user !== null; let loggedIn: boolean = user !== undefined;
this.setState({isLoggedIn: loggedIn}); this.setState({isLoggedIn: loggedIn});
}); });
} }
@ -40,7 +40,7 @@ export class Navbar extends Component<any, NavbarState> {
// TODO toggle css collapse // TODO toggle css collapse
navbar() { navbar() {
return ( return (
<nav class="navbar navbar-expand-sm navbar-light bg-light p-0 px-3 shadow"> <nav class="container navbar navbar-expand-sm navbar-light navbar-bg p-0 px-3">
<a title={version} class="navbar-brand" href="#"> <a title={version} class="navbar-brand" href="#">
<svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg> <svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg>
Lemmy Lemmy
@ -74,7 +74,7 @@ export class Navbar extends Component<any, NavbarState> {
<a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a> <a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a>
</div> </div>
</li> : </li> :
<Link class="nav-link" to="/login">Login</Link> <Link class="nav-link" to="/login">Login / Sign up</Link>
} }
</ul> </ul>
</div> </div>

6
ui/src/components/post.tsx
View file

@ -101,17 +101,17 @@ export class Post extends Component<any, PostState> {
sortRadios() { sortRadios() {
return ( return (
<div class="btn-group btn-group-toggle mb-3"> <div class="btn-group btn-group-toggle mb-3">
<label className={`btn btn-sm btn-secondary ${this.state.commentSort === CommentSortType.Hot && 'active'}`}>Hot <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Hot && 'active'}`}>Hot
<input type="radio" value={CommentSortType.Hot} <input type="radio" value={CommentSortType.Hot}
checked={this.state.commentSort === CommentSortType.Hot} checked={this.state.commentSort === CommentSortType.Hot}
onChange={linkEvent(this, this.handleCommentSortChange)} /> onChange={linkEvent(this, this.handleCommentSortChange)} />
</label> </label>
<label className={`btn btn-sm btn-secondary ${this.state.commentSort === CommentSortType.Top && 'active'}`}>Top <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.Top && 'active'}`}>Top
<input type="radio" value={CommentSortType.Top} <input type="radio" value={CommentSortType.Top}
checked={this.state.commentSort === CommentSortType.Top} checked={this.state.commentSort === CommentSortType.Top}
onChange={linkEvent(this, this.handleCommentSortChange)} /> onChange={linkEvent(this, this.handleCommentSortChange)} />
</label> </label>
<label className={`btn btn-sm btn-secondary ${this.state.commentSort === CommentSortType.New && 'active'}`}>New <label className={`btn btn-sm btn-secondary pointer ${this.state.commentSort === CommentSortType.New && 'active'}`}>New
<input type="radio" value={CommentSortType.New} <input type="radio" value={CommentSortType.New}
checked={this.state.commentSort === CommentSortType.New} checked={this.state.commentSort === CommentSortType.New}
onChange={linkEvent(this, this.handleCommentSortChange)} /> onChange={linkEvent(this, this.handleCommentSortChange)} />

2
ui/src/components/sidebar.tsx
View file

@ -56,7 +56,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
} }
</ul> </ul>
} }
<ul class="list-inline"> <ul class="mt-1 list-inline">
<li className="list-inline-item"><Link className="badge badge-light" to="/communities">{community.category_name}</Link></li> <li className="list-inline-item"><Link className="badge badge-light" to="/communities">{community.category_name}</Link></li>
<li className="list-inline-item badge badge-light">{community.number_of_subscribers} Subscribers</li> <li className="list-inline-item badge badge-light">{community.number_of_subscribers} Subscribers</li>
<li className="list-inline-item badge badge-light">{community.number_of_posts} Posts</li> <li className="list-inline-item badge badge-light">{community.number_of_posts} Posts</li>

9
ui/src/main.css
View file

@ -66,3 +66,12 @@ body {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); } 100% { transform: rotate(359deg); }
} }
.dropdown-menu {
z-index: 2000;
}
.navbar-bg {
background-color: #222;
}

4
ui/src/services/UserService.ts
View file

@ -25,10 +25,10 @@ export class UserService {
} }
public logout() { public logout() {
this.user = null; this.user = undefined;
Cookies.remove("jwt"); Cookies.remove("jwt");
console.log("Logged out."); console.log("Logged out.");
this.sub.next(null); this.sub.next(undefined);
} }
public get loggedIn(): boolean { public get loggedIn(): boolean {