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')
	@@ -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,33 @@		@@ -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,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>
	@@ -47,6 +47,12 @@		@@ -47,6 +47,12 @@
47	<% cache(@page.cache_key(params, user, language)) do %>	47	<% cache(@page.cache_key(params, user, language)) do %>
48	<div class="<%="article-body article-body-" + @page.css_class_name %>">	48	<div class="<%="article-body article-body-" + @page.css_class_name %>">
49	<% options = @page.image? ? {:gallery_view => true} : {} %>	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	<%= article_to_html(@page, options) %>	56	<%= article_to_html(@page, options) %>
51	<br style="clear:both" />	57	<br style="clear:both" />
52	</div> <!-- end class="article-body" -->	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 @@		@@ -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;
	@@ -1401,3 +1406,31 @@ table.profile th {		@@ -1401,3 +1406,31 @@ table.profile th {
1401	table#recaptcha_table tr:hover td {	1406	table#recaptcha_table tr:hover td {
1402	background-color: #fff;	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	+}
	@@ -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	+ 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	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')]
	@@ -124,6 +124,19 @@ class ContentViewerControllerTest < ActionController::TestCase		@@ -124,6 +124,19 @@ class ContentViewerControllerTest < ActionController::TestCase
124	assert_tag :tag => 'div', :attributes => { :id => 'article-tags' }, :descendant => { :content => /This article's tags:/ }	124	assert_tag :tag => 'div', :attributes => { :id => 'article-tags' }, :descendant => { :content => /This article's tags:/ }
125	end	125	end
126		126
		127	+ should "display image label on article image" do
		128	+ page = TinyMceArticle.create!(
		129	+ :profile => profile,
		130	+ :name => 'myarticle',
		131	+ :image_builder => {
		132	+ :uploaded_data => fixture_file_upload('/files/tux.png', 'image/png'),
		133	+ :label => 'test-label'
		134	+ }
		135	+ )
		136	+ get :view_page, page.url
		137	+ assert_match /test-label/, @response.body
		138	+ end
		139	+
127	should "not display current article's tags" do	140	should "not display current article's tags" do
128	page = profile.articles.create!(:name => 'myarticle', :body => 'test article')	141	page = profile.articles.create!(:name => 'myarticle', :body => 'test article')
129		142