diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/src/components/comment-node.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/community.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/navbar.tsx | 49 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/sidebar.tsx | 3 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 4 |
7 files changed, 51 insertions, 17 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 55be7621..1e5376f2 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -46,7 +46,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { <div className="details ml-4"> <ul class="list-inline mb-0 text-muted small"> <li className="list-inline-item"> - <Link to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link> + <Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link> </li> <li className="list-inline-item"> <span>( diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index 1ca9a8af..06504378 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -63,7 +63,7 @@ export class Community extends Component<any, State> { <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : <div class="row"> <div class="col-12 col-lg-9"> - <h4>/f/{this.state.community.name}</h4> + <h4>{this.state.community.title}</h4> <PostListings communityId={this.state.communityId} /> </div> <div class="col-12 col-lg-3"> diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 54f185e2..477eec65 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -46,10 +46,10 @@ export class Main extends Component<any, State> { return ( <div class="container"> <div class="row"> - <div class="col-12 col-lg-9"> + <div class="col-12 col-md-9"> <PostListings /> </div> - <div class="col-12 col-lg-3"> + <div class="col-12 col-md-3"> <h4>A Landing message</h4> {UserService.Instance.loggedIn && <div> diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 9754c935..c4b51e37 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -3,11 +3,24 @@ import { Link } from 'inferno-router'; import { repoUrl } from '../utils'; import { UserService } from '../services'; -export class Navbar extends Component<any, any> { +interface NavbarState { + isLoggedIn: boolean; + expanded: boolean; + expandUserDropdown: boolean; +} + +export class Navbar extends Component<any, NavbarState> { + + emptyState: NavbarState = { + isLoggedIn: UserService.Instance.loggedIn, + expanded: false, + expandUserDropdown: false + } constructor(props: any, context: any) { super(props, context); - this.state = {isLoggedIn: UserService.Instance.loggedIn, expanded: false}; + this.state = this.emptyState; + this.handleOverviewClick = this.handleOverviewClick.bind(this); // Subscribe to user changes UserService.Instance.sub.subscribe(user => { @@ -50,24 +63,44 @@ export class Navbar extends Component<any, any> { </li> </ul> <ul class="navbar-nav ml-auto mr-2"> - <li class="nav-item"> - {this.state.isLoggedIn ? - <a role="button" class="nav-link pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a> : + {this.state.isLoggedIn ? + <li className={`nav-item dropdown ${this.state.expandUserDropdown && 'show'}`}> + <a class="pointer nav-link dropdown-toggle" onClick={linkEvent(this, this.expandUserDropdown)} role="button"> + {UserService.Instance.user.username} + </a> + <div className={`dropdown-menu dropdown-menu-right ${this.state.expandUserDropdown && 'show'}`}> + <a role="button" class="dropdown-item pointer" onClick={linkEvent(this, this.handleOverviewClick)}>Overview</a> + <a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a> + </div> + </li> : <Link class="nav-link" to="/login">Login</Link> - } - </li> + } </ul> </div> </nav> ); } - handleLogoutClick() { + expandUserDropdown(i: Navbar) { + i.state.expandUserDropdown = !i.state.expandUserDropdown; + i.setState(i.state); + } + + handleLogoutClick(i: Navbar) { + i.state.expandUserDropdown = false; UserService.Instance.logout(); } + handleOverviewClick(i: Navbar) { + i.state.expandUserDropdown = false; + i.setState(i.state); + let userPage = `/user/${UserService.Instance.user.id}`; + i.context.router.history.push(userPage); + } + expandNavbar(i: Navbar) { i.state.expanded = !i.state.expanded; i.setState(i.state); } } + diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index f3145eff..d52dc937 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -79,7 +79,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { <ul class="list-inline mb-0 text-muted small"> <li className="list-inline-item"> <span>by </span> - <Link to={`/user/${post.creator_id}`}>{post.creator_name}</Link> + <Link className="text-info" to={`/user/${post.creator_id}`}>{post.creator_name}</Link> {this.props.showCommunity && <span> <span> to </span> @@ -99,7 +99,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { </span> </li> <li className="list-inline-item"> - <Link to={`/post/${post.id}`}>{post.number_of_comments} Comments</Link> + <Link className="text-muted" to={`/post/${post.id}`}>{post.number_of_comments} Comments</Link> </li> </ul> {this.myPost && diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index ffc44562..6fd2bb5c 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -42,7 +42,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { let community = this.props.community; return ( <div> - <h4>{community.title}</h4> + <h4 className="mb-0">{community.title}</h4> + <Link className="text-muted" to={`/community/${community.id}`}>/f/{community.name}</Link> {this.amMod && <ul class="list-inline mb-1 text-muted small font-weight-bold"> <li className="list-inline-item"> diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index 4754111e..5dd3ac6a 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -77,7 +77,7 @@ export class User extends Component<any, UserState> { return ( <div class="container"> <div class="row"> - <div class="col-12 col-lg-9"> + <div class="col-12 col-md-9"> <h4>/u/{this.state.user.name}</h4> {this.selects()} {this.state.view == View.Overview && @@ -90,7 +90,7 @@ export class User extends Component<any, UserState> { this.posts() } </div> - <div class="col-12 col-lg-3"> + <div class="col-12 col-md-3"> {this.userInfo()} {this.moderates()} {this.follows()} |