Histórico da Página
...
Como todos os componentes do Fluig, a Timeline é desenvolvida baseada no framework de templates FreeMarker (.ftl). O FreeMarker é responsável pela camada de visualização, onde sobre ele é escrito todo HTML do componente. Bem como o(s) arquivo(s) de FreeMarker, todos os componentes possuem seus arquivos de CSS (.css) e JavaScript (.js).
Ação de
...
Para gerar conteúdo na Timeline, o Fluig utiliza o componente de Publicação de conteúdo Poster. O Poster é responsável por absorver todo o conteúdo digitado pelo usuário no Campo de Publicação e enviar para exibição de uma nova Publicação na Timeline.
Ação de Publicação na Timeline de Usuário
Ação de Publicação na Timeline de Usuário é o campo de texto onde o usuário digita o conteúdo para Publicação. Esse campo de texto está disponível em sua página inicial e todo o conteúdo é publicado em sua própria Timeline.
Botão de ação desabilitado
Botão de ação habilitado
Comentário de uma Publicação
Ação de Publicação na Timeline de Comunidade
edição
No modo de edição da timeline você pode configurar as opções de visualização.
Ação de Publicação na Timeline de Comunidade é o campo de texto onde o usuário digita o conteúdo para Publicação. Esse campo de texto está disponível em qualquer página de Comunidade e todo o conteúdo é publicado na página da Comunidade em questão.
Estado inicial
Aguardando conteúdo
Ação de visualização
Após gerar uma nova Publicação, esse conteúdo é exibido na Timeline em diferentes tipos de visualização.
Estrutura básica de
...
templates mustache na timeline
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<div<script classtype="timeline-post-wrapper post post-parent" id="${post.postId}"> <div text/template" class="social-timeline-post clearfix"> <!-- Área da foto do usuário --> <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-template"> <li data-post-id="{{postId}}" class="timeline-userlist-posts-photoitem"> </a> </div> </div> <div class="post-content-container"> <!-- Área das informações da Publicação. Ex. Nome do usuário, data da Publicação, etc. --> <p class="timeline-post-headerpanel panel-default fs-no-margin"> <a href="#"<div class="timelinepanel-link-userbody totvsfs-linksm-social" data-social-alias="${post.user.alias}" data-timeline-link-user>${user.name}</a> <span class="post-header-text"> - </span>space media clearfix"> <a href="${tenantURL}/post/${post.user.alias}/${post.postId}" <div class="timeline-link-date totvs-link-gray"> ${post.data}</a>media-body"> </p> <!-- Conteúdo do post --> <p class="timeline-text-post">${post.text}</p> </div> <!-- Lista de ações disponíveis na Publicação --> <ul {{#postHeader}} <h5 class="sociable-action-bar list-inlinemedia-heading"> <li><a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comentar</a></li> <!-- More actions --> </ul> </div> </div> |
...
| language | css |
|---|---|
| title | No CSS |
...
. |
...
. |
...
. |
...
|
...
|
...
Basicamente, o arquivo CSS é dividido nas seguintes categorias:
- Multiple definitions: Todas as formatações que são em comum no componente Timeline como espaçamento, tamanho de fonte, cor de fonte, etc.
- Unic definitions: Todas as formatações que são únicas no componente Timeline como título do componente, etc.
- Sociable actions bar: Formatação da área de ações de uma Publicação. Ex. Botões Curtir, Comentar, Compartilhar, etc.
- Container comments list: Formatação da lista de Comentários de uma Publicação.
- Youtube video format: Formatação de uma Publicação ou Comentário com um vídeo do Youtube renderizado.
- Content shared types: Formatação básica de uma Publicação com conteúdo compartilhado. Ex. Imagem, Documentos, Usuários, etc.
...
| language | javascript |
|---|---|
| title | Response List of JSON (example): |
| collapse | true |
...
|
...
|
...
|
...
</h5>
{{/postHeader}}
{{#text}}
<p>{{{text}}}</p>
{{/text}}
{{#variableContent}}
{{>postContent}}
{{/variableContent}}
</div>
</div>
<div class="panel-footer">
<ul class="list-inline timeline-list-actions">
<li class="timeline-list-actions-item">
...
</li>
</ul>
</div>
</div>
<ul class="fs-md-space fs-no-padding-top fs-no-padding-bottom timeline-list-comments" data-timeline-list-comments>
{{#comments}}
{{>postComments}}
{{/comments}}
{{#existsMoreComments}}
{{>postMoreComments}}
{{/existsMoreComments}}
</ul>
</li>
</script> |
Tipos de Publicação
Segue abaixo os tipos de Publicação disponíveis na Timeline.
...
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<div class="timeline-comments-container">
<div class="commentList">
<div class="timeline-comments clearfix postComment post-parent" id="${comment.id}">
<!-- Área da foto do usuário -->
<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">
<!-- Área de informações do comentário. Ex. Nome do usuário, data da Publicação, 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>
<!-- Conteúdo do comentário -->
<p class="timeline-text-post-comment">${comment.text}</p>
</div>
<!-- Lista de ações disponíveis no comentário -->
<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> |
...
Comentário
Segue abaixo os tipos o tipo de Comentários Comentário de Publicação disponíveis disponível na Timeline.
Comentário de uma Publicação
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas