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 · Gabriela Navarro
1 parent 208ec37b
Showing 11 changed files with 136 additions and 4 deletions Show diff stats
app/controllers/my_profile/cms_controller.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/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
@@ -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,33 @@
+<% if @page.belongs_to_blog? || @page.belongs_to_forum?%>
+  <% unless no_link %>
+    <h1 class="title">
+      <%= link_to(article.name, article.url) %>
+    </h1>
+  <% else %>
+    <h1 class="title">
+      <%= h(@page.title) %>
+    </h1>
+  <% end %>
+  <% unless @page.lead.blank? %>
+    <div class="preview">
+      <%= @page.lead %>
+    </div>
+  <% end %>
+  <span class="created-at">
+    <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>
+<% else %>
+  <h1 class="title">
+    <%= h(@page.title) %>
+  </h1>
+<% 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>
@@ -47,6 +47,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;
@@ -1401,3 +1406,31 @@ table.profile th {
 table#recaptcha_table tr:hover td {
   background-color: #fff;
 }
+
+/************************* 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
+    assert_difference 'TinyMceArticle.count' do
+      post :new, :type => 'TinyMceArticle', :profile => profile.identifier, :article => { :name => 'test_label_article', :body => 'test_content', :image_builder => { :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png'), :label => 'test_label'}}
+    end
+    article = profile.articles.find_by_name('test_label_article')
+    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')
...	...	@@ -101,6 +101,11 @@ class CmsController < MyProfileController
101	101	record_coming
102	102	if request.post?
103	103	@article.image = nil if params[:remove_image] == 'true'
	104	+ if @article.image.present? && params[:article][:image_builder] &&
	105	+ params[:article][:image_builder][:label]
	106	+ @article.image.label = params[:article][:image_builder][:label]
	107	+ @article.image.save!
	108	+ end
104	109	@article.last_changed_by = user
105	110	if @article.update_attributes(params[:article])
106	111	if !continue
...	...
...	...	@@ -23,7 +23,7 @@ class Image < ActiveRecord::Base
23	23
24	24	postgresql_attachment_fu
25	25
26		- attr_accessible :uploaded_data
	26	+ attr_accessible :uploaded_data, :label
27	27
28	28	def current_data
29	29	File.file?(full_filename) ? File.read(full_filename) : nil
...	...
...	...	@@ -0,0 +1,33 @@
	1	+<% if @page.belongs_to_blog? \|\| @page.belongs_to_forum?%>
	2	+ <% unless no_link %>
	3	+ <h1 class="title">
	4	+ <%= link_to(article.name, article.url) %>
	5	+ </h1>
	6	+ <% else %>
	7	+ <h1 class="title">
	8	+ <%= h(@page.title) %>
	9	+ </h1>
	10	+ <% end %>
	11	+ <% unless @page.lead.blank? %>
	12	+ <div class="preview">
	13	+ <%= @page.lead %>
	14	+ </div>
	15	+ <% end %>
	16	+ <span class="created-at">
	17	+ <span class="date">
	18	+ <%= show_date(@page.published_at) %>
	19	+ </span>
	20	+ <span class="author">
	21	+ <%= _(", by %s") % (@page.author ? link_to(@page.author_name, @page.author_url) : @page.author_name) %>
	22	+ </span>
	23	+ <% unless @no_comments %>
	24	+ <span class="comments">
	25	+ <%= (" - %s") % link_to_comments(@page)%>
	26	+ </span>
	27	+ <% end %>
	28	+ </span>
	29	+<% else %>
	30	+ <h1 class="title">
	31	+ <%= h(@page.title) %>
	32	+ </h1>
	33	+<% end %>
...	...
...	...	@@ -64,7 +64,7 @@
64	64	<% end %>
65	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	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	68	<%= article_translations(@page) %>
69	69	</div>
70	70	</div>
...	...
...	...	@@ -47,6 +47,12 @@
47	47	<% cache(@page.cache_key(params, user, language)) do %>
48	48	<div class="<%="article-body article-body-" + @page.css_class_name %>">
49	49	<% options = @page.image? ? {:gallery_view => true} : {} %>
	50	+ <% if @page.image.present? && @page.class != "Event" %>
	51	+ <div class="article-body-img">
	52	+ <%= image_tag(@page.image.public_filename) %>
	53	+ <p><%= @page.image.label%></p>
	54	+ </div>
	55	+ <% end %>
50	56	<%= article_to_html(@page, options) %>
51	57	<br style="clear:both" />
52	58	</div> <!-- end class="article-body" -->
...	...
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 @@
	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	1064	#content .main-block .created-at {
1065	1065	text-align: left;
1066	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	1073	#content .main-block .created-at a {
1069	1074	color: #AAA;
...	...	@@ -1401,3 +1406,31 @@ table.profile th {
1401	1406	table#recaptcha_table tr:hover td {
1402	1407	background-color: #fff;
1403	1408	}
	1409	+
	1410	+/*********************** Article Page ***************************/
	1411	+
	1412	+#article-header .preview {
	1413	+ font-size: 15px;
	1414	+}
	1415	+
	1416	+.article-body-img {
	1417	+ float: left;
	1418	+ margin-right: 20px;
	1419	+ margin-top: 5px;
	1420	+}
	1421	+
	1422	+#content #article .article-body .article-body-img img {
	1423	+ height: auto;
	1424	+ width: auto;
	1425	+ min-height: 120px;
	1426	+ max-height: 180px;
	1427	+ max-width: 250px;
	1428	+ background-position: center center;
	1429	+ background-repeat: no-repeat;
	1430	+}
	1431	+
	1432	+#content #article .article-body .article-body-img p {
	1433	+ margin-bottom: 10px;
	1434	+ font-size: 10px;
	1435	+ min-height: 20px;
	1436	+}
...	...
...	...	@@ -1052,6 +1052,11 @@ code input {
1052	1052	margin-top: 10px;
1053	1053	display: none;
1054	1054	}
	1055	+
	1056	+#change-image {
	1057	+ display: table-caption;
	1058	+}
	1059	+
1055	1060	.zoomable-image {
1056	1061	position: relative;
1057	1062	display: inline-block;
...	...
...	...	@@ -223,6 +223,20 @@ class CmsControllerTest < ActionController::TestCase
223	223	assert_equal profile, a.last_changed_by
224	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	240	should 'edit by using the correct template to display the editor depending on the mime-type' do
227	241	a = profile.articles.build(:name => 'test document')
228	242	a.save!
...	...	@@ -318,6 +332,20 @@ class CmsControllerTest < ActionController::TestCase
318	332	end
319	333	end
320	334
	335	+ should 'be able to edit an image label' do
	336	+ assert_difference 'TinyMceArticle.count' do
	337	+ post :new, :type => 'TinyMceArticle', :profile => profile.identifier, :article => { :name => 'test_label_article', :body => 'test_content', :image_builder => { :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png'), :label => 'test_label'}}
	338	+ end
	339	+ article = profile.articles.find_by_name('test_label_article')
	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	349	should 'be able to upload more than one file at once' do
322	350	assert_difference 'UploadedFile.count', 2 do
323	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')]
...	...