Contents
Timeline basic files
As all Fluig components, the Timeline is developed based on the template framework FreeMarker (.ftl). FreeMarker is responsible for the viewing layer, where all HTML from the component is written. As well as the FreeMarker file(s), all components have their CSS (.css) and JavaScript (.js) files.
Posting Action
In order to generate content on the Timeline, Fluig uses the Content posting component Poster. Poster is responsible for absorbing all content typed by the user in the Post field and send it to be exhibited as a new Post on the Timeline.
Posting Action on User Timeline
Posting Action on User Timeline is the text field where the user types the content for Posting. This text field is available at your home page and all the content is posted on your own Timeline.
Action button disabled
Action button enabled
Comment on a Post
Posting Action on Community Timeline
Posting Action on Community Timeline is the text field where the user types the content for Posting. This text field is available in any Community page and all content is published on the Community page in question.
Initial Status
Waiting for Content
Viewing action
After generating a new Post, this content is shown on the Timeline in different types of view.
Basic structure of a Post
<div class="timeline-post-wrapper post post-parent" id="${post.postId}"> <div class="timeline-post clearfix"> <!-- User picture area --> <div class="timeline-user-photo-container"> <div class="timeline-user-photo-container-hidden" data-user-popover="${post.user.alias}"> <a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-social-alias="${post.user.alias}" data-timeline-link-user> <img src="/social/api/rest/social/image/thumb/${post.user.alias}" class="timeline-user-photo"> </a> </div> </div> <div class="post-content-container"> <!-- Post information area. For instance, user name, post date, etc. --> <p class="timeline-post-header"> <a href="#" class="timeline-link-user totvs-link-social" data-social-alias="${post.user.alias}" data-timeline-link-user>${user.name}</a> <span class="post-header-text"> - </span> <a href="${tenantURL}/post/${post.user.alias}/${post.postId}" class="timeline-link-date totvs-link-gray"> ${post.data}</a> </p> <!-- Post content --> <p class="timeline-text-post">${post.text}</p> </div> <!-- List of actions available in the Post --> <ul class="sociable-action-bar list-inline"> <li><a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comment</a></li> <!-- More actions --> </ul> </div> </div>
/* * * Multiple definitions * */ .wcm-widget-timeline .timeline-post, .wcm-widget-timeline .timeline-comments { padding: 8px 0 36px; position: relative; } ...
- Multiple definitions: All formatting that are common in the Timeline component such as spacing, font size, font color, etc.
- Unic definitions: All formatting that are unique in the Timeline component such as the component title, etc.
- Sociable actions bar: Formatting in the action area of a Post. Example: Like, Comment, Share buttons, etc.
- Container comments list: Formatting of a list of Post Comments.
- Youtube video format: Formatting of a Post or Comment with a rendered Youtube video.
- Content shared types: Basic formatting of a Post with shared content. Example: Image, Documents, Users, etc.
Types of Posts
The types of posts available in the Timeline are listed below.
New article created
Post in community
Shared Post
Post with Image
Post with mention and hashtag
Modal for Sharing a Post
Basic structure of a Comment on a Post
<div class="timeline-comments-container"> <div class="commentList"> <div class="timeline-comments clearfix postComment post-parent" id="${comment.id}"> <!-- User picture area --> <div class="timeline-user-photo-container"> <div class="timeline-user-photo-container-hidden" data-user-popover="${comment.user.alias}"> <a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-timeline-link-user="" data-social-alias="${comment.user.alias}"> <img src="/social/api/rest/social/image/thumb/${comment.user.alias}" class="timeline-user-photo"> </a> </div> </div> <div class="post-content-container"> <!-- Comment information area. For instance, user name, post date, etc. --> <p class="timeline-post-header"> <a href="#" class="timeline-link-user totvs-link-social" data-user-popover="${comment.user.alias}" data-timeline-link-user="" data-social-alias="${comment.user.alias}">Jerome McElroy</a> <span class="post-header-text"> - </span> <a href="#" class="timeline-link-date totvs-link-gray"> ${comment.data}</a> </p> <!-- Content comment --> <p class="timeline-text-post-comment">${comment.text}</p> </div> <!-- List of actions available in the comment --> <ul class="sociable-action-bar list-inline clearfix"> <li><a href="#" class="sociable-link sociable-icon sociable-support linkLikePostComment support" data-linklikepostcomment="">Apoiar</a></li> <!-- More actions --> </ul> </div> </div> </div>
Types of comments
The types of Comments on the Post available in the Timeline are listed below.
Comment on a Post