Arquivos básicos da Timeline

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 Publicação

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

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 uma Publicação

<div class="timeline-post-wrapper post post-parent" id="${post.id}">
	<div class="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="${user.alias}">
				<a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-social-alias="${user.alias}" data-timeline-link-user>
					<img src="/social/api/rest/social/image/thumb/${user.alias}" class="timeline-user-photo">
				</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-header">
				<a href="#" class="timeline-link-user totvs-link-social" data-social-alias="${user.alias}" 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.content}</p>
		</div>
		<!-- Lista de ações disponíveis na publicação -->
		<ul class="sociable-action-bar list-inline">
			<li><a href="#" class="sociable-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>
.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;

Estrutura básica de um Comentário de uma Publicação

<div class="timeline-comments-container">
	<div class="commentList">
		<div class="timeline-comments clearfix postComment post-parent" id="17">
			<!-- Área da foto do usuário -->
			<div class="timeline-user-photo-container">
				<div class="timeline-user-photo-container-hidden" data-user-popover="chef">
					<a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-timeline-link-user="" data-social-alias="chef">
						<img src="/social/api/rest/social/image/thumb/chef" 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="chef" data-timeline-link-user="" data-social-alias="chef">Jerome McElroy</a>
					<span class="post-header-text"> - </span>
					<a href="#" class="timeline-link-date totvs-link-gray"> 27/01/2014 17:29</a>
				</p>
				<!-- Conteúdo do comentário -->
				<p class="timeline-text-post-comment">Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</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>

 

Tipos de comentários

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

Comentário de uma publicação