Refactoring article content visualization

- Added image label - Added image to article body - Changed some minor positioning Signed-off-by: André Bernardes <andrebsguedes@gmail.com> Signed-off-by: Arthur Del Esposte <arthurmde@gmail.com> Signed-off-by: Fábio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com> Signed-off-by: Tallys Martins <tallysmartins@gmail.com>

Refactoring article content visualization
- Added image label - Added image to article body - Changed some minor positioning Signed-off-by: André Bernardes <andrebsguedes@gmail.com> Signed-off-by: Arthur Del Esposte <arthurmde@gmail.com> Signed-off-by: Fábio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com> Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
André Guedes · Rodrigo Souto
1 parent 82d3ed8e
Showing 14 changed files with 153 additions and 22 deletions Show diff stats
app/controllers/my_profile/cms_controller.rb
app/helpers/comment_helper.rb
app/helpers/content_viewer_helper.rb
app/models/image.rb
app/views/content_viewer/_article_title.html.erb
app/views/content_viewer/_article_toolbar.html.erb
app/views/content_viewer/_publishing_info.html.erb
app/views/content_viewer/view_page.html.erb
app/views/shared/_change_image.html.erb
db/migrate/20150603182105_add_label_to_image.rb
public/designs/themes/base/style.css
public/stylesheets/application.css
test/functional/cms_controller_test.rb
test/functional/content_viewer_controller_test.rb
@@ -101,6 +101,11 @@ class CmsController &lt; MyProfileController
     record_coming
     if request.post?
       @article.image = nil if params[:remove_image] == 'true'
+      if @article.image.present? && params[:article][:image_builder] &&
+        params[:article][:image_builder][:label]
+        @article.image.label = params[:article][:image_builder][:label]
+        @article.image.save!
+      end
       @article.last_changed_by = user
       if @article.update_attributes(params[:article])
         if !continue
@@ -16,7 +16,7 @@ module CommentHelper
         content_tag('span', show_date(article.published_at), :class => 'date') +
         content_tag('span', [_(", by %s") % link_to(article.author_name, article.author_url)], :class => 'author') +
         content_tag('span', comments, :class => 'comments'),
-        :class => 'created-at'
+        :class => 'publishing-info'
       )
     end
     title
@@ -30,7 +30,7 @@ module ContentViewerHelper
         date_format +
         content_tag('span', _(", by %s") % (article.author ? link_to(article.author_name, article.author_url) : article.author_name), :class => 'author') +
         content_tag('span', comments, :class => 'comments'),
-        :class => 'created-at'
+        :class => 'publishing-info'
       )
     end
     title
@@ -23,7 +23,7 @@ class Image &lt; ActiveRecord::Base
   postgresql_attachment_fu
-  attr_accessible :uploaded_data
+  attr_accessible :uploaded_data, :label
   def current_data
     File.file?(full_filename) ? File.read(full_filename) : nil
@@ -0,0 +1,20 @@
+<% if @page.belongs_to_blog? || @page.belongs_to_forum?%>
+  <h1 class="title">
+  <% if no_link %>
+      <%= h(@page.title) %>
+  <% else %>
+      <%= link_to(@page.name, @page.url) %>
+  <% end %>
+  </h1>
+  <%= render :partial => "publishing_info" %>
+  <% unless @page.abstract.blank? %>
+    <div class="preview">
+      <%= @page.lead %>
+    </div>
+  <% end %>
+<% else %>
+  <h1 class="title">
+    <%= h(@page.title) %>
+  </h1>
+  <%= render :partial => "publishing_info" %>
+<% end %>
@@ -64,7 +64,7 @@
     <% end %>
     <%= link_to(image_tag('/images/icons-mime/rss-feed.png'), @page.feed.url, :class => 'blog-feed-link') if @page.has_posts? && @page.feed %>
     <%= @plugins.dispatch(:article_header_extra_contents, @page).collect { |content| instance_exec(&content) }.join("") %>
-    <%= article_title(@page, :no_link => true) %>
+    <%= render :partial => 'article_title', :locals => {:no_link => true} %>
     <%= article_translations(@page) %>
   </div>
 </div>
@@ -0,0 +1,29 @@
+<span class="publishing-info">
+  <span class="date">
+    <%= show_date(@page.published_at) %>
+  </span>
+  <span class="author">
+    <%= _(", by %s") % (@page.author ? link_to(@page.author_name, @page.author_url) : @page.author_name) %>
+  </span>
+<% unless @no_comments %>
+  <span class="comments">
+    <%= (" - %s") % link_to_comments(@page)%>
+  </span>
+<% end %>
+</span>
+
+<% if @page.display_hits? || @page.license.present? %>
+  <div id='article-sub-header'>
+    <% if @page.display_hits? %>
+      <div id="article-hits">
+        <%= n_('Viewed one time', 'Viewed %{num} times', @page.hits) % { :num => @page.hits } %>
+      </div>
+    <% end %>
+
+    <% if @page.license.present? %>
+      <div id="article-license">
+        <%= _('Licensed under %s') % (@page.license.url.present? ? link_to(@page.license.name, @page.license.url, :target => '_blank') : @page.license.name) %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
@@ -24,22 +24,6 @@
   <%= render :partial => 'article_toolbar' %>
 </div>
-<% if @page.display_hits? || @page.license.present? %>
-  <div id='article-sub-header'>
-    <% if @page.display_hits? %>
-      <div id="article-hits">
-        <%= n_('Viewed one time', 'Viewed %{num} times', @page.hits) % { :num => @page.hits } %>
-      </div>
-    <% end %>
-
-    <% if @page.license.present? %>
-      <div id="article-license">
-        <%= _('Licensed under %s') % (@page.license.url.present? ? link_to(@page.license.name, @page.license.url, :target => '_blank') : @page.license.name) %>
-      </div>
-    <% end %>
-  </div>
-<% end %>
-
 <% if NOOSFERO_CONF['addthis_enabled'] %>
   <%= render :partial => 'addthis' %>
 <% end %>
@@ -47,6 +31,12 @@
 <% cache(@page.cache_key(params, user, language)) do %>
   <div class="<%="article-body article-body-" + @page.css_class_name %>">
     <% options = @page.image? ? {:gallery_view => true} : {} %>
+    <% if @page.image.present? && @page.class != "Event" %>
+      <div class="article-body-img">
+        <%= image_tag(@page.image.public_filename) %>
+        <p><%= @page.image.label%></p>
+      </div>
+    <% end %>
     <%= article_to_html(@page, options) %>
     <br style="clear:both" />
   </div> <!-- end class="article-body" -->
-  <%= i.file_field( :uploaded_data, { :onchange => 'updateImg(this.value)' } ) %>
-  <%= button_to_function(:cancel,_('Cancel'),"jQuery('#change-image-link').show(); jQuery('#change-image').html('')", :id => 'cancel-change-image-link', :style => 'display: none')%>
+<%= i.file_field( :uploaded_data, { :onchange => 'updateImg(this.value)' } ) %>
+<%= labelled_form_field(_("Image Label:"), i.text_field(:label)) %>
+<%= button_to_function(:cancel,_('Cancel'),"jQuery('#change-image-link').show(); jQuery('#change-image').html('')", :id => 'cancel-change-image-link', :style => 'display: none')%>
@@ -0,0 +1,8 @@
+class AddLabelToImage < ActiveRecord::Migration
+  def up
+    add_column :images, :label, :string, :default => ""
+  end
+  def down
+    remove_column :images, :label
+  end
+end
@@ -1064,6 +1064,11 @@ hr.pre-posts, hr.sep-posts {
 #content .main-block .created-at {
   text-align: left;
   color: #AAA;
+  font-size: 11px;
+  padding-top: 20px;
+  border-top: 1px solid #D7D7D7;
+  margin-top: 30px;
+  margin-bottom:15px;
 }
 #content .main-block .created-at a {
   color: #AAA;
@@ -1415,3 +1420,30 @@ table#recaptcha_table tr:hover td {
   color:#333;
 }
+/************************* Article Page *****************************/
+
+#article-header .preview {
+  font-size: 15px;
+}
+
+.article-body-img {
+  float: left;
+  margin-right: 20px;
+  margin-top: 5px;
+}
+
+#content #article .article-body .article-body-img img {
+  height: auto;
+  width: auto;
+  min-height: 120px;
+  max-height: 180px;
+  max-width: 250px;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+#content #article .article-body .article-body-img p {
+  margin-bottom: 10px;
+  font-size: 10px;
+  min-height: 20px;
+}
@@ -1052,6 +1052,11 @@ code input {
   margin-top: 10px;
   display: none;
 }
+
+#change-image {
+  display: table-caption;
+}
+
 .zoomable-image {
   position: relative;
   display: inline-block;
@@ -223,6 +223,20 @@ class CmsControllerTest &lt; ActionController::TestCase
     assert_equal profile, a.last_changed_by
   end
+  should 'be able to set label to article image' do
+    login_as(profile.identifier)
+    post :new, :type => TextileArticle.name, :profile => profile.identifier,
+         :article => {
+           :name => 'adding-image-label',
+           :image_builder => {
+             :uploaded_data => fixture_file_upload('/files/tux.png', 'image/png'),
+             :label => 'test-label'
+           }
+         }
+     a = Article.last
+     assert_equal a.image.label, 'test-label'
+  end
+
   should 'edit by using the correct template to display the editor depending on the mime-type' do
     a = profile.articles.build(:name => 'test document')
     a.save!
@@ -318,6 +332,20 @@ class CmsControllerTest &lt; ActionController::TestCase
     end
   end
+  should 'be able to edit an image label' do
+    image = fast_create(Image, :content_type => 'image/png', :filename => 'event-image.png', :label => 'test_label', :size => 1014)
+    article = fast_create(Article, :profile_id => profile.id, :name => 'test_label_article', :body => 'test_content')
+    article.image = image
+    article.save
+    assert_not_nil article
+    assert_not_nil article.image
+    assert_equal 'test_label', article.image.label
+
+    post :edit, :profile => profile.identifier, :id => article.id, :article => {:image_builder => { :label => 'test_label_modified'}}
+    article.reload
+    assert_equal 'test_label_modified', article.image.label
+  end
+
    should 'be able to upload more than one file at once' do
     assert_difference 'UploadedFile.count', 2 do
       post :upload_files, :profile => profile.identifier, :uploaded_files => [fixture_file_upload('/files/test.txt', 'text/plain'), fixture_file_upload('/files/rails.png', 'text/plain')]
@@ -124,6 +124,19 @@ class ContentViewerControllerTest &lt; ActionController::TestCase
     assert_tag :tag => 'div', :attributes => { :id => 'article-tags' }, :descendant => { :content => /This article's tags:/ }
   end
+  should "display image label on article image" do
+    page = TinyMceArticle.create!(
+             :profile => profile,
+             :name => 'myarticle',
+             :image_builder => {
+               :uploaded_data => fixture_file_upload('/files/tux.png', 'image/png'),
+               :label => 'test-label'
+             }
+           )
+    get :view_page, page.url
+    assert_match /test-label/, @response.body
+  end
+
   should "not display current article's tags" do
     page = profile.articles.create!(:name => 'myarticle', :body => 'test article')
	@@ -16,7 +16,7 @@ module CommentHelper		@@ -16,7 +16,7 @@ module CommentHelper
16	content_tag('span', show_date(article.published_at), :class => 'date') +	16	content_tag('span', show_date(article.published_at), :class => 'date') +
17	content_tag('span', [_(", by %s") % link_to(article.author_name, article.author_url)], :class => 'author') +	17	content_tag('span', [_(", by %s") % link_to(article.author_name, article.author_url)], :class => 'author') +
18	content_tag('span', comments, :class => 'comments'),	18	content_tag('span', comments, :class => 'comments'),
19	- :class => 'created-at'	19	+ :class => 'publishing-info'
20	)	20	)
21	end	21	end
22	title	22	title
	@@ -30,7 +30,7 @@ module ContentViewerHelper		@@ -30,7 +30,7 @@ module ContentViewerHelper
30	date_format +	30	date_format +
31	content_tag('span', _(", by %s") % (article.author ? link_to(article.author_name, article.author_url) : article.author_name), :class => 'author') +	31	content_tag('span', _(", by %s") % (article.author ? link_to(article.author_name, article.author_url) : article.author_name), :class => 'author') +
32	content_tag('span', comments, :class => 'comments'),	32	content_tag('span', comments, :class => 'comments'),
33	- :class => 'created-at'	33	+ :class => 'publishing-info'
34	)	34	)
35	end	35	end
36	title	36	title
	@@ -23,7 +23,7 @@ class Image < ActiveRecord::Base		@@ -23,7 +23,7 @@ class Image < ActiveRecord::Base
23		23
24	postgresql_attachment_fu	24	postgresql_attachment_fu
25		25
26	- attr_accessible :uploaded_data	26	+ attr_accessible :uploaded_data, :label
27		27
28	def current_data	28	def current_data
29	File.file?(full_filename) ? File.read(full_filename) : nil	29	File.file?(full_filename) ? File.read(full_filename) : nil
@@ -0,0 +1,20 @@		@@ -0,0 +1,20 @@
	1	+<% if @page.belongs_to_blog? \|\| @page.belongs_to_forum?%>
	2	+ <h1 class="title">
	3	+ <% if no_link %>
	4	+ <%= h(@page.title) %>
	5	+ <% else %>
	6	+ <%= link_to(@page.name, @page.url) %>
	7	+ <% end %>
	8	+ </h1>
	9	+ <%= render :partial => "publishing_info" %>
	10	+ <% unless @page.abstract.blank? %>
	11	+ <div class="preview">
	12	+ <%= @page.lead %>
	13	+ </div>
	14	+ <% end %>
	15	+<% else %>
	16	+ <h1 class="title">
	17	+ <%= h(@page.title) %>
	18	+ </h1>
	19	+ <%= render :partial => "publishing_info" %>
	20	+<% end %>
	@@ -64,7 +64,7 @@		@@ -64,7 +64,7 @@
64	<% end %>	64	<% end %>
65	<%= link_to(image_tag('/images/icons-mime/rss-feed.png'), @page.feed.url, :class => 'blog-feed-link') if @page.has_posts? && @page.feed %>	65	<%= link_to(image_tag('/images/icons-mime/rss-feed.png'), @page.feed.url, :class => 'blog-feed-link') if @page.has_posts? && @page.feed %>
66	<%= @plugins.dispatch(:article_header_extra_contents, @page).collect { \|content\| instance_exec(&content) }.join("") %>	66	<%= @plugins.dispatch(:article_header_extra_contents, @page).collect { \|content\| instance_exec(&content) }.join("") %>
67	- <%= article_title(@page, :no_link => true) %>	67	+ <%= render :partial => 'article_title', :locals => {:no_link => true} %>
68	<%= article_translations(@page) %>	68	<%= article_translations(@page) %>
69	</div>	69	</div>
70	</div>	70	</div>
@@ -0,0 +1,29 @@		@@ -0,0 +1,29 @@
	1	+<span class="publishing-info">
	2	+ <span class="date">
	3	+ <%= show_date(@page.published_at) %>
	4	+ </span>
	5	+ <span class="author">
	6	+ <%= _(", by %s") % (@page.author ? link_to(@page.author_name, @page.author_url) : @page.author_name) %>
	7	+ </span>
	8	+<% unless @no_comments %>
	9	+ <span class="comments">
	10	+ <%= (" - %s") % link_to_comments(@page)%>
	11	+ </span>
	12	+<% end %>
	13	+</span>
	14	+
	15	+<% if @page.display_hits? \|\| @page.license.present? %>
	16	+ <div id='article-sub-header'>
	17	+ <% if @page.display_hits? %>
	18	+ <div id="article-hits">
	19	+ <%= n_('Viewed one time', 'Viewed %{num} times', @page.hits) % { :num => @page.hits } %>
	20	+ </div>
	21	+ <% end %>
	22	+
	23	+ <% if @page.license.present? %>
	24	+ <div id="article-license">
	25	+ <%= _('Licensed under %s') % (@page.license.url.present? ? link_to(@page.license.name, @page.license.url, :target => '_blank') : @page.license.name) %>
	26	+ </div>
	27	+ <% end %>
	28	+ </div>
	29	+<% end %>
1	- <%= i.file_field( :uploaded_data, { :onchange => 'updateImg(this.value)' } ) %>
2	- <%= button_to_function(:cancel,_('Cancel'),"jQuery('#change-image-link').show(); jQuery('#change-image').html('')", :id => 'cancel-change-image-link', :style => 'display: none')%>	1	+<%= i.file_field( :uploaded_data, { :onchange => 'updateImg(this.value)' } ) %>
		2	+<%= labelled_form_field(_("Image Label:"), i.text_field(:label)) %>
		3	+<%= button_to_function(:cancel,_('Cancel'),"jQuery('#change-image-link').show(); jQuery('#change-image').html('')", :id => 'cancel-change-image-link', :style => 'display: none')%>
@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
	1	+class AddLabelToImage < ActiveRecord::Migration
	2	+ def up
	3	+ add_column :images, :label, :string, :default => ""
	4	+ end
	5	+ def down
	6	+ remove_column :images, :label
	7	+ end
	8	+end
	@@ -1064,6 +1064,11 @@ hr.pre-posts, hr.sep-posts {		@@ -1064,6 +1064,11 @@ hr.pre-posts, hr.sep-posts {
1064	#content .main-block .created-at {	1064	#content .main-block .created-at {
1065	text-align: left;	1065	text-align: left;
1066	color: #AAA;	1066	color: #AAA;
		1067	+ font-size: 11px;
		1068	+ padding-top: 20px;
		1069	+ border-top: 1px solid #D7D7D7;
		1070	+ margin-top: 30px;
		1071	+ margin-bottom:15px;
1067	}	1072	}
1068	#content .main-block .created-at a {	1073	#content .main-block .created-at a {
1069	color: #AAA;	1074	color: #AAA;
	@@ -1415,3 +1420,30 @@ table#recaptcha_table tr:hover td {		@@ -1415,3 +1420,30 @@ table#recaptcha_table tr:hover td {
1415	color:#333;	1420	color:#333;
1416	}	1421	}
1417		1422
		1423	+/*********************** Article Page ***************************/
		1424	+
		1425	+#article-header .preview {
		1426	+ font-size: 15px;
		1427	+}
		1428	+
		1429	+.article-body-img {
		1430	+ float: left;
		1431	+ margin-right: 20px;
		1432	+ margin-top: 5px;
		1433	+}
		1434	+
		1435	+#content #article .article-body .article-body-img img {
		1436	+ height: auto;
		1437	+ width: auto;
		1438	+ min-height: 120px;
		1439	+ max-height: 180px;
		1440	+ max-width: 250px;
		1441	+ background-position: center center;
		1442	+ background-repeat: no-repeat;
		1443	+}
		1444	+
		1445	+#content #article .article-body .article-body-img p {
		1446	+ margin-bottom: 10px;
		1447	+ font-size: 10px;
		1448	+ min-height: 20px;
		1449	+}
	@@ -223,6 +223,20 @@ class CmsControllerTest < ActionController::TestCase		@@ -223,6 +223,20 @@ class CmsControllerTest < ActionController::TestCase
223	assert_equal profile, a.last_changed_by	223	assert_equal profile, a.last_changed_by
224	end	224	end
225		225
		226	+ should 'be able to set label to article image' do
		227	+ login_as(profile.identifier)
		228	+ post :new, :type => TextileArticle.name, :profile => profile.identifier,
		229	+ :article => {
		230	+ :name => 'adding-image-label',
		231	+ :image_builder => {
		232	+ :uploaded_data => fixture_file_upload('/files/tux.png', 'image/png'),
		233	+ :label => 'test-label'
		234	+ }
		235	+ }
		236	+ a = Article.last
		237	+ assert_equal a.image.label, 'test-label'
		238	+ end
		239	+
226	should 'edit by using the correct template to display the editor depending on the mime-type' do	240	should 'edit by using the correct template to display the editor depending on the mime-type' do
227	a = profile.articles.build(:name => 'test document')	241	a = profile.articles.build(:name => 'test document')
228	a.save!	242	a.save!
	@@ -318,6 +332,20 @@ class CmsControllerTest < ActionController::TestCase		@@ -318,6 +332,20 @@ class CmsControllerTest < ActionController::TestCase
318	end	332	end
319	end	333	end
320		334
		335	+ should 'be able to edit an image label' do
		336	+ image = fast_create(Image, :content_type => 'image/png', :filename => 'event-image.png', :label => 'test_label', :size => 1014)
		337	+ article = fast_create(Article, :profile_id => profile.id, :name => 'test_label_article', :body => 'test_content')
		338	+ article.image = image
		339	+ article.save
		340	+ assert_not_nil article
		341	+ assert_not_nil article.image
		342	+ assert_equal 'test_label', article.image.label
		343	+
		344	+ post :edit, :profile => profile.identifier, :id => article.id, :article => {:image_builder => { :label => 'test_label_modified'}}
		345	+ article.reload
		346	+ assert_equal 'test_label_modified', article.image.label
		347	+ end
		348	+
321	should 'be able to upload more than one file at once' do	349	should 'be able to upload more than one file at once' do
322	assert_difference 'UploadedFile.count', 2 do	350	assert_difference 'UploadedFile.count', 2 do
323	post :upload_files, :profile => profile.identifier, :uploaded_files => [fixture_file_upload('/files/test.txt', 'text/plain'), fixture_file_upload('/files/rails.png', 'text/plain')]	351	post :upload_files, :profile => profile.identifier, :uploaded_files => [fixture_file_upload('/files/test.txt', 'text/plain'), fixture_file_upload('/files/rails.png', 'text/plain')]