Flyout

Preview Flyout - Status Update (with Scrollbar)

Preview Flyout - Sharing Tab

Preview Flyout - History Tab

Classes

• lotusFlyout - the class that goes on the outermost node.
• lotusWraper - the class inside lotusFlyout for alternate styling.
• lotusFlyoutHeader - the class that goes on the header node.
• lotusPerson - the class used in lotusFlyoutHeader for the user.
• lotusFlyoutContent - the class that goes on the content node.
• lotusStyledScrolled - the class that goes on the lotusFlyoutContent node to provide a styled scrollbar.
• lotusFlyoutContentArea - the class that goes inside lotusFlyoutContent.
• lotusFlyoutInner - the class that goes inside lotusFlyoutContentArea and is used as a marker class for the inside of the flyout.
• lotusFlyoutImage - the class that goes on the content image.
• lotusStatus - the class that provides alternate styling for a status message.
• lotusHeadingChunk - the class that wraps the flyout title.
• lotusHeading2Chunk (new) - replace lotusHeadingChunk with this when the flyout title needs to be smaller.
• lotusChunk - the class that is used for vertical spacing.
• lotusFlyoutConnector - the class that goes on the sharkfin node.

Basic Implementation

Set height on the lotusFlyoutContent node if using positioning.

If using an iFrame in the flyout, put it inside the lotusFlyoutContentArea node. Add the namespace classes to the iFrame and add lotusFlyoutInner as the first node in the iFrame.

Accessibility

Put role="dialog" on the outermost div.

Use the aria-labelledby property on the outermost div to point to the first inline list item in the header.

See the following components for additional accessibility documentation: buttons, comments, forms, like, lists, messages, tabs, and vertical table.

Put role="presentation" on the lotusFlyoutConnector element.

Examples

• Activity Stream
• Flyout test page

Sample HTML - status update (with scrollbar)

Sample HTML - sharing tab

Sample HTML - history tab

CSS (flyout.css)

Theme CSS (flyoutTheme.css)

October 19, 2011 - Component was created.

October 27, 2011 - Added the lotusWrapper node.

November 1, 2011 - Added lotusFlyoutInner, lotusHeadingChunk, and lotusStatus nodes. Updated visuals. Added examples in the test page.

November 9, 2011 - Added sharing tab and history tab examples.

November 10, 2011 - Added lotusHeading2Chunk to make the file name smaller for Status Update (with File).

November 16, 2011 - Changed lotusHideOverflow to lotusChunk to fix a bug in WebKit. Removed lotusChunk from the lotusStatus node.

November 17, 2011 - Added lotusTabCondensed to the lotusTabContainer node to enable condensed tab styling.

December 16, 2011 - Moved lotusFlyoutConnector outside of lotusFlyout. Now the connector is positioned on the page instead of the flyout to increase JavaScript performance when scrolling and resizing the browser.

January 18, 2012 - Left-aligned the sharing and add comment action links.

January 19, 2012 - Made the readers into an ARIA list and added a separator bar between it and the add link.

February 16, 2012 - Updated the status update example to expand the "Add a comment" textarea on focus.

March 1, 2012 - Updated the "Add a comment" markup again so it uses the same markup as the activity stream posts.