Commit acbe8387 authored by Jon Parsons's avatar Jon Parsons Committed by Andrew Newdigate

Merge pull request #2423 from troupe/feature/topic-reply-header

Reply/Comment Header Updates
parents 0e4ba663 608b0dfc
@import "../../colors.less";
@import "../../text.less";
@import (less, reference) "~gitter-styleguide/css/components/buttons.css";
@import "../../../../../../public/less/markdown.less";
@import "../../colors.less";
@import "../../text.less";
.feed-item {
display: flex;
flex-direction: column;
}
//VARIABLES
//----------------------------
.feed-item__user-details {
width: 5rem;
padding-top: .5rem;
}
//Feed Item
@feed-item-vertical-spacing: 2rem;//The space provided at the bottom of each feed-item
.feed-item__content {
display: flex;
margin-bottom: 1.5rem;
}
//Aside
@feed-item-aside-width: 5rem; //Width of the left most column
@feed-item-aside-padding-top: .5rem; //Spaing between the avatar and the top of the feed-item__content
.feed-item__body {
position: relative;
width: 100%;
padding: 2rem;
background-color: @topic-reply-body-color;
//Content
@feed-item-content-background: @light; //Background color of the actual content item
@feed-item-content-padding: 2.5rem; //Padding of the content item
@feed-item-content-item-vertical-padding: 1rem; //Padding of user generated content
//MIXINS
//----------------------------
.m-details-text( @capitalize: true, @font-size: 1.2rem ) {
font-size: @font-size;
font-family: @font-family;
overflow: hidden;
word-wrap: break-word;
color: @topic-reply-action-text-color;
.markdown-styles();
& when (@capitalize = true) {
text-transform: uppercase;
}
}
.feed-item__footer {
display: flex;
align-items: center;
padding-top: 1rem;
//COMPONENTS
//----------------------------
//Skeychy but will be refactored when we refactor
//the feed-item/reply-list-item/comment-item components
button {
margin-right: .5rem;
}
//Feed item container
.feed-item {
display: flex;
margin-bottom: @feed-item-vertical-spacing;
}
.m-details-text() {
font-size: 1.2rem;
text-transform: uppercase;
font-family: @font-family;
color: @topic-reply-action-text-color;
//Left hand aside (should just display an avatar)
.feed-item__aside {
flex: 0 0 @feed-item-aside-width;
padding-top: @feed-item-aside-padding-top;
}
// TODO: remove
.feed-item__likes {
.m-details-text();
margin-right: 1rem;
//Main content holder
.feed-item__content {
width: 100%;
padding: @feed-item-content-padding;
background-color: @feed-item-content-background;
}
.feed-item__content__item {
.markdown-styles();
padding: @feed-item-content-item-vertical-padding 0;
font-family: @font-family;
font-size: @reply-content-font-size;
.feed-item__comments {
.m-details-text();
outline: none;
background: none;
border: none;
cursor: pointer;
//We can't guarantee what we get back as markdown
//paragraphs comeback with margin which we need to cancel as we provide
//padding for normal un-wrapped text elements
& p:first-child { margin-top: 0; }
& p:last-child { margin-bottom: 0; }
}
@content-control-top-margin: .5rem;
//Main header displays :
//[displayname | username, edit-button | sent date]
.feed-item__content__header { display: flex; }
.feed-item__sent {
.feed-item__content__header__user-display-name {
.m-details-text();
font-size: 1.1rem;
float: right;
margin-top: @content-control-top-margin;
margin-right: .5rem;
}
.feed-item__edit-control {
.m-details-text();
margin-top: @content-control-top-margin;
border: none;
background: none;
outline: none;
color: @dark;
cursor: pointer;
float: right;
.feed-item__content__header__user-user-name {
.m-details-text(false);
margin-right: auto;
}
.feed-item__content__header__sent { .m-details-text(); }
.feed-item__content__header__edit-button { margin-left: auto; }
//Item footer, usually contains:
//[ :+1:, comments, watch ]
.feed-item__content__footer { display: flex; }
......@@ -5,7 +5,7 @@
.topic-body__content {
padding: 3rem 0;
font-size: 1.6rem;
font-size: @topic-content-font-size;
font-family: @font-family;
.markdown-styles();
......@@ -31,6 +31,7 @@
cursor: pointer;
}
@content-control-top-margin: .5rem;
.topic-body__footer__action--edit {
margin-top: @content-control-top-margin;
float: right;
......
@font-family: 'Source Sans Pro', source-sans-pro, pt sans, calibri, sans-serif;
@topic-content-font-size: 1.6rem;
@reply-content-font-size: (@topic-content-font-size - .1rem);
......@@ -37,7 +37,7 @@ export default React.createClass({
</aside>
<Editor
autoFocus={autoFocus}
placeholder="Your reply here. Use Markdown, BBCode, or HTML to format."
placeholder="Your comment here. Use Markdown, BBCode, or HTML to format."
className="reply-comment-editor__editor"
value={value}
onEnter={this.onEnter}
......
......@@ -40,6 +40,7 @@ export default React.createClass({
const {item, children, footerChildren} = this.props;
const {user} = item;
const { displayName, username } = user;
const formattedSentDate = item.sent && moment(item.sent).format('MMM Do');
const formattedFullSentDate = item.sent && moment(item.sent).format('YYYY-MM-D, h:m A');
......@@ -47,34 +48,61 @@ export default React.createClass({
//TODO we need to make edit controls, reaction and follow buttons
//smart components so they can dispatch events. This will prevent us
//having to have these controls in scope to change state
return (
<article
id={item.id}
className="feed-item">
<div className="feed-item__content">
<div className="feed-item__user-details">
<div> { /* We have to use a wrapper div here to account for any children passed to this component*/ }
<article id={item.id} className="feed-item">
{/* The aside here only displays the avatar pulled to the left hand side*/}
<aside className="feed-item__aside">
<UserAvatar
className="feed-item__avatar"
user={user}
size={AVATAR_SIZE_MEDIUM} />
</div>
<div className="feed-item__body">
<span
className="feed-item__sent"
title={formattedFullSentDate}>
{formattedSentDate}
</span>
{this.getEditControl()}
{this.getItemContent()}
<footer className="feed-item__footer">
</aside>
<section className="feed-item__content">
{/* The header displays displayname | username edit-button | sent date */}
<header className="feed-item__content__header">
{/* Shows the users display name ie: Jon Parsons */}
<span className="feed-item__content__header__user-display-name">
{displayName}
</span>
{/* Shows the users username name ie: cutandpastey */}
<span className="feed-item__content__header__user-user-name">
@{username}
</span>
{/* Edit controls are only shown for admins or owners */}
{this.getEditControl()}
{/* sent date displayed as -> MM dd */}
<span className="feed-item__content__header__sent" title={formattedFullSentDate}>
{formattedSentDate}
</span>
</header>
{/* The actula user generated content */}
<div className="feed-item__content__item">
{this.getItemContent()}
</div>
{/* This will show like/comment/watch buttons */}
<footer className="feed-item__content__footer">
{footerChildren}
</footer>
</section>
</article>
</div>
</div>
{/* Typically the comments list is passed in as children */}
{children}
</article>
</div>
);
},
getEditControl(){
......@@ -87,7 +115,7 @@ export default React.createClass({
return (
<IconButton
className="feed-item__edit-control"
className="feed-item__content__header__edit-button"
type={ICONS_EDIT}
onClick={this.onEditClicked} />
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment