Í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

Image Removed

Botão de ação habilitado

Image Removed

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

Image Removed

Aguardando conteúdo

Image Removed

edição

No modo de edição da timeline você pode configurar as opções de visualização.

Image Added

Image Added

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

<div<script type="text/template" class="social-timeline-post-wrapper post post-parent" id="16template">
	<li data-post-id="{{postId}}" class="timeline-list-posts-item">
		<div class="timelinepanel panel-post clearfixdefault fs-no-margin">
			<!-- Área da foto do usuário --<div class="panel-body fs-sm-space media clearfix">
				<div class="timeline-user-photo-containermedia-body">
					{{#postHeader}}
					<div	<h5 class="timeline-user-photo-container-hidden" data-user-popover="marcos.garciamedia-heading">
							...
						</h5>
					{{/postHeader}}
					{{#text}}
						<p>{{{text}}}</p>
					{{/text}}
					{{#variableContent}}
						{{>postContent}}
					{{/variableContent}}
				</div>
			</div>
			<div class="panel-footer">
				<a href="#" <ul class="timeline-link-user totvs-link-sociallist-inline timeline-linklist-user-photo" data-social-alias="marcos.garcia" data-timeline-link-user>actions">
					<img src="/social/api/rest/social/image/thumb/marcos.garcia" <li class="timeline-list-useractions-photoitem">
						...
					</li>
				</a>ul>
			</div>
		</div>
		<div<ul 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-header">
				<a href="#" class="timeline-link-user totvs-link-social" data-user-popover="marcos.garcia" data-social-alias="marcos.garcia" data-timeline-link-user>Marcos Garcia</a>
				<span class="post-header-text"> - </span>
				<a href="http://socialecm:8080/portal/p/minha_rede/post/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.

Novo Artigo criado

Image Added

Publicação na Comunidade

Image Added

Publicação Compartilhada

Image Added

Publicação com Imagem

Image Added

Publicação com vídeo

Image Added

Publicação com vídeo do YouTube

Image Added

Publicação com Menção e Hashtag

Image Added

Modal para Compartilhamento da Publicação

Image Added

Estrutura básica de template Mustache de comentário em uma Publicação

<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>
	chef/16" class="timeline-link-date totvs-link-gray"> 27/01/2014 15:55</a>
			</p>
			<!-- Conteúdo do post -->
			<p class="timeline-text-post">Essa é uma publicação de exemplo.</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="sociabletimeline-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comentar</a></li>
			<!-- More actions -->
		</ul>
	</div>
	<!-- Área do comentário -->
	<div class="comment-post clearfix">
		<!-- Code... -->
	</div>
</div>

Tipos de Publicação

Segue abaixo os tipos de Publicação disponíveis na Timeline.

Novo Artigo criado;

Image Removed

Publicação na Comunidade;

Image Removed

Publicação Compartilhada;

Image Removed

Publicação com Imagem;

Image Removed

Modal para Compartilhamento da Publicação;

list-actions-item">
					<span class="counter-group">
						...
					</span>
				</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

Image AddedImage Removed