From 4bfb32c6658d3547ea7728fcf0927b187685658e Mon Sep 17 00:00:00 2001 From: Dessalines <tyhou13@gmx.com> Date: Tue, 9 Apr 2019 14:21:19 -0700 Subject: [PATCH] Styling, sidebar message. --- server/src/websocket_server/server.rs | 36 +++++++++++++-------------- ui/src/components/communities.tsx | 2 +- ui/src/components/main.tsx | 30 ++++++++++++++++------ ui/src/components/navbar.tsx | 6 ++--- ui/src/components/post.tsx | 6 ++--- ui/src/components/sidebar.tsx | 2 +- ui/src/main.css | 9 +++++++ ui/src/services/UserService.ts | 4 +-- 8 files changed, 59 insertions(+), 36 deletions(-) diff --git a/server/src/websocket_server/server.rs b/server/src/websocket_server/server.rs index a946c9e07..42124d2d6 100644 --- a/server/src/websocket_server/server.rs +++ b/server/src/websocket_server/server.rs @@ -391,25 +391,25 @@ impl Handler<StandardMessage> for ChatServer { let json: Value = serde_json::from_str(&msg.msg) .expect("Couldn't parse message"); - let data: &Value = &json["data"]; + let data = &json["data"].to_string(); let op = &json["op"].as_str().unwrap(); let user_operation: UserOperation = UserOperation::from_str(&op).unwrap(); let res: String = match user_operation { 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) }, 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) }, 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) }, 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) }, UserOperation::ListCategories => { @@ -417,55 +417,55 @@ impl Handler<StandardMessage> for ChatServer { list_categories.perform(self, msg.id) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, 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) }, // _ => { diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index cf42238e1..268aa1151 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -45,7 +45,7 @@ export class Communities extends Component<any, CommunitiesState> { render() { return ( - <div class="container-fluid"> + <div class="container"> {this.state.loading ? <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : <div> diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 477eec65e..8faf858ae 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -5,7 +5,7 @@ import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; -import { msgOp } from '../utils'; +import { msgOp, repoUrl } from '../utils'; interface State { subscribedCommunities: Array<CommunityUser>; @@ -46,17 +46,15 @@ export class Main extends Component<any, State> { return ( <div class="container"> <div class="row"> - <div class="col-12 col-md-9"> + <div class="col-12 col-md-8"> <PostListings /> </div> - <div class="col-12 col-md-3"> - <h4>A Landing message</h4> - {UserService.Instance.loggedIn && + <div class="col-12 col-md-4"> + {UserService.Instance.loggedIn ? <div> {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> - <hr /> <h4>Subscribed forums</h4> <ul class="list-unstyled"> {this.state.subscribedCommunities.map(community => @@ -65,7 +63,8 @@ export class Main extends Component<any, State> { </ul> </div> } - </div> + </div> : + this.landing() } </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) { console.log(msg); diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index ca0c5a2a2..a9d95362e 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -25,7 +25,7 @@ export class Navbar extends Component<any, NavbarState> { // Subscribe to user changes UserService.Instance.sub.subscribe(user => { - let loggedIn: boolean = user !== null; + let loggedIn: boolean = user !== undefined; this.setState({isLoggedIn: loggedIn}); }); } @@ -40,7 +40,7 @@ export class Navbar extends Component<any, NavbarState> { // TODO toggle css collapse navbar() { 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="#"> <svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg> 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> </div> </li> : - <Link class="nav-link" to="/login">Login</Link> + <Link class="nav-link" to="/login">Login / Sign up</Link> } </ul> </div> diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index f36893f69..5ca3f7707 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -101,17 +101,17 @@ export class Post extends Component<any, PostState> { sortRadios() { return ( <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} checked={this.state.commentSort === CommentSortType.Hot} onChange={linkEvent(this, this.handleCommentSortChange)} /> </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} checked={this.state.commentSort === CommentSortType.Top} onChange={linkEvent(this, this.handleCommentSortChange)} /> </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} checked={this.state.commentSort === CommentSortType.New} onChange={linkEvent(this, this.handleCommentSortChange)} /> diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index 6fd2bb5c1..68fc458b0 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -56,7 +56,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { } </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 badge badge-light">{community.number_of_subscribers} Subscribers</li> <li className="list-inline-item badge badge-light">{community.number_of_posts} Posts</li> diff --git a/ui/src/main.css b/ui/src/main.css index 0b7da979c..ae817baaa 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -66,3 +66,12 @@ body { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } + +.dropdown-menu { + z-index: 2000; +} + +.navbar-bg { + background-color: #222; +} + diff --git a/ui/src/services/UserService.ts b/ui/src/services/UserService.ts index bf93f42a6..4e53aa081 100644 --- a/ui/src/services/UserService.ts +++ b/ui/src/services/UserService.ts @@ -25,10 +25,10 @@ export class UserService { } public logout() { - this.user = null; + this.user = undefined; Cookies.remove("jwt"); console.log("Logged out."); - this.sub.next(null); + this.sub.next(undefined); } public get loggedIn(): boolean {