Status Update / Bubble

Classes:

• See the base post component for the styles used to create each update status component.
• lotusUpdateStatus - This is an additional class that goes on a post used to update a person's status.
• lotusPostStatusControl - This class is for the area in which the user enters their status.
• lotusStatusInput - This class is for link inside of the lotusPostStatusControl area.
• lotusStreamUpdate - This is an additional class assigned to a lotusForm2 form element to allow the user to update their status at the top of an activity stream.
• lotusTextCollapsed - Goes on the lotusText textarea inside the lotusStreamUpdate to make the textarea initially shorter in height.
• lotusCommentBubble - This is the main class for a status bubble.
• lotusCommentBubbleBody - This is the class for the content of a status bubble.

Basic Implementation

Update Status

Create a post using the basic post classes (see the code snippet on this page for the relevant classes).

The last div in the lotusPostContent section is classed as lotusPostStatus control, and it wraps a second div which wraps a link. (Clicking on that link opens up the input controls which are not included as part of the component.)

Update Status (at the top of an activity stream)

The update status area at the top of an activity stream uses a form with both the lotusForm2 and lotusStreamUpdate classes. It does not use the lotusPost class but is included here because it is relevant to updating a person's status and the lotusStreamUpdate classes are included in the comment CSS.

Inside the form is a div with the class lotusFieldEmphasis, which wraps a textarea that has a class of lotusText.

Underneath that div is a lotusActions lotusMeta div that wraps the action links and meta information. Please see the code snippet for the proper markup.

To dynamically adjust the textarea height, toggle the lotusTextCollapsed class. In conjunction with that, you can toggle the display of the lotusActions div.

Status Bubble

Create a div with class="lotusCommentBubble".

Directly inside that div, create another div with class="lotusCommentBubble". Use a series of divs to create the status (the example on this page shows some meta text mixed in with the status).

Accessibility

See accessibility section on base post component.

Examples

• activity stream status update
• comment bubble

Sample HTML - Update Status

Sample HTML - Update Status (at top of activity stream)

Sample HTML - Status Bubble

CSS (comments.css)

Theme CSS (commentsTheme.css)

This component was split out from the post component in an attempt to make documentation easier to understand, but the styles are still a part of comments.css.

January 2012: Left-aligned the Post and Reset action links.

January 26, 2012: Adjusted avatar to better align with content.

April 2, 2012: Added lotusTextCollapsed to the Update Status example that goes at the top of the activity stream. Also added sample JavaScript to show/hide the action links.