Histórico da Página

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

Comentário de uma publicação

Image Added

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;
}

...

Atributos básicos de uma Publicação:

• Lorem: Aenean eu leo quam;
• Ipsum: Pellentesque ornare sem lacinia quam venenatis vestibulum;
• Dolor: Maecenas faucibus mollis interdum;

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