Histórico da Página
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Arquivos básicos da Timeline
Como todos os componentes do TOTVS Fluig Plataforma, 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 próprios 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 disabilitado
Botão de ação habilitado
Ação de Publicação na Timeline de Comunidade
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
edição
No modo de edição da timeline você pode configurar as opções de visualização.
Ação de visualização
Após gerar uma nova Publicaçãopublicaçã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 type="text/template" class="social-timeline-post-wrapper post post-parent" template"> <li data-post-id="${post.id{{postId}}"> <div class="timeline-post clearfixlist-posts-item"> <!-- Área da foto do usuário --<div class="panel panel-default fs-no-margin"> <div class="timelinepanel-userbody fs-photo-containersm-space media clearfix"> <div class="timeline-user-photo-container-hidden" data-user-popover="${user.alias}">media-body"> {{#postHeader}} <a href="#" <h5 class="timeline-link-user totvs-link-social timeline-link-user-photo" data-social-alias="${user.alias}" data-timeline-link-user>media-heading"> ... <img src="/social/api/rest/social/image/thumb/${user.alias}" class="timeline-user-photo"> </h5> {{/postHeader}} {{#text}} <p>{{{text}}}</p> {{/text}} {{#variableContent}} {{>postContent}} </a> {{/variableContent}} </div> </div> <div class="postpanel-content-containerfooter"> <!-- Área das informações da publicação. Ex. Nome do usuário, data da publicação, etc. --> <p<ul class="list-inline timeline-list-actions"> <li class="timeline-postlist-actions-headeritem"> <a href="#" class="timeline-link-user totvs-link-social" data-social-alias="${user.alias}" ... </li> </ul> </div> </div> <ul class="fs-md-space fs-no-padding-top fs-no-padding-bottom timeline-list-comments" data-timeline-link-user>${user.name}</a> <span class="post-header-text"> - </span> <a href="http://socialecm:8080/portal/p/minha_rede/post/chef/${post.id}" class="timeline-link-date totvs-link-gray"> ${post.data}</a> </p> <!-- Conteúdo do post --> <p class="timeline-text-post">${post.contentlist-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.
Novo Artigo criado
Publicação na Comunidade
Publicação Compartilhada
Publicação com Imagem
Publicação com vídeo
Publicação com vídeo do YouTube
Publicação com Menção e Hashtag
Modal para Compartilhamento da Publicação
Estrutura básica de template Mustache de comentário em uma Publicação
Bloco de código | ||||
---|---|---|---|---|
| ||||
<script type="text/template" class="social-timeline-comment-template"> <li data-comment-id="{{id}}" class="panel panel-default fs-no-margin timeline-list-comments-item"> <div class="panel-body fs-sm-space media clearfix"> <a class="pull-left" href="{{tenantURI}}/{{user.page}}"> ... </a> <div class="media-body"> <h5 class="media-heading"> ... </h5> <p>{{{comment}}}</p> </div> <!-- Lista de ações disponíveis na publicação --/div> <div class="panel-footer fs-no-bg fs-no-border-top fs-no-padding-top"> <ul class="sociable-action-bar list-inline"> <li><a href="#" <li class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comentar</a></li> <!-- More actions --timeline-list-actions-item"> </ul> </div> <!-- Área do comentário --> <div <span class="commentcounter-post clearfixgroup"> <!-- Code... --> </div>span> </div> |
Bloco de código | ||||
---|---|---|---|---|
| ||||
.teste {
background: red;
}
.teste .dentro-do-teste {
border: 1px solid #ccc;
} |
Tipos de Publicação
Segue abaixo os tipos de Publicação disponíveis na Timeline.
Novo Artigo criado;
Publicação na Comunidade;
Publicação Compartilhada;
Publicação com Imagem;
Modal para Compartilhamento da Publicação;
</li>
</ul>
</div>
</li>
</script> |
Comentário
Segue abaixo o tipo de Comentário de Publicação disponível na Timeline.
Comentário de uma Publicação