[noosfero/noosfero][master] 2 commits: Improvments on folder visualization
Rodrigo Souto
gitlab at gitlab.com
Thu Jun 11 17:10:44 BRT 2015
Rodrigo Souto pushed to branch master at Noosfero / noosfero
Commits:
bbcc0618 by André Bernardes at 2015-06-11T16:43:09Z
Improvments on folder visualization
- Refactoring CSS to better display folder itens
- Creating method to display uploaded file names with extension in upper
case
Signed-off-by: Arthur Del Esposte <arthurmde at gmail.com>
Signed-off-by: André Bernardes <andrebsguedes at gmail.com>
Signed-off-by: Tallys Martins <tallysmartins at gmail.com>
- - - - -
b49fa908 by André Bernardes at 2015-06-11T16:43:09Z
Adding bigger icons when displaying folders
Signed-off-by: Tallys Martins <tallysmartins at gmail.com>
Signed-off-by: André Bernardes <andrebsguedes at gmail.com>
- - - - -
12 changed files:
- app/helpers/folder_helper.rb
- app/models/uploaded_file.rb
- app/presenters/image.rb
- app/views/content_viewer/folder.html.erb
- + app/views/shared/_content_item.html.erb
- app/views/shared/content_list.html.erb
- lib/short_filename.rb
- public/designs/icons/tango/style.css
- + public/images/icons-app/image-loading-bigicon.png
- public/stylesheets/application.css
- test/unit/folder_helper_test.rb
- test/unit/short_filename_test.rb
Changes:
=====================================
app/helpers/folder_helper.rb
=====================================
--- a/app/helpers/folder_helper.rb
+++ b/app/helpers/folder_helper.rb
@@ -25,49 +25,32 @@ module FolderHelper
articles.select {|article| article.display_to?(user)}
end
- def display_content_in_listing(configure={})
- recursive = configure[:recursive] || false
- list_type = configure[:list_type] || :folder
- level = configure[:level] || 0
- content = FilePresenter.for configure[:content]
+ def display_content_icon(content_item)
+ content = FilePresenter.for content_item
content_link = if content.image?
- link_to(' ' * (level * 4) +
- image_tag(icon_for_article(content)) + short_filename(content.name),
+ link_to(
+ image_tag(icon_for_article(content, :bigicon)),
content.url.merge(:view => true)
)
else
- link_to(' ' * (level * 4) +
- short_filename(content.name),
- content.url.merge(:view => true), :class => icon_for_article(content)
+ link_to('',
+ content.url.merge(:view => true),
+ :class => icon_for_article(content, :bigicon)
)
end
- result = content_tag(
- 'tr',
- content_tag('td', content_link ) +
- content_tag('td', show_date(content.updated_at), :class => 'last-update'),
- :class => "#{list_type}-item"
- )
- if recursive
- result + content.children.map {|item|
- display_content_in_listing :content=>item, :recursive=>recursive,
- :list_type=>list_type, :level=>level+1
- }.join("\n")
- else
- result
- end
end
- def icon_for_article(article)
+ def icon_for_article(article, size = 'icon')
article = FilePresenter.for article
- icon = article.respond_to?(:icon_name) ?
- article.icon_name :
- article.class.icon_name(article)
- if (icon =~ /\//)
- icon
+ if article.respond_to?(:sized_icon)
+ article.sized_icon(size)
else
- klasses = 'icon ' + [icon].flatten.map{|name| 'icon-'+name}.join(' ')
+ icon = article.respond_to?(:icon_name) ?
+ article.icon_name :
+ article.class.icon_name(article)
+ klasses = "#{size} " + [icon].flatten.map{|name| "#{size}-"+name}.join(' ')
if article.kind_of?(UploadedFile) || article.kind_of?(FilePresenter)
- klasses += ' icon-upload-file'
+ klasses += " #{size}-upload-file"
end
klasses
end
=====================================
app/models/uploaded_file.rb
=====================================
--- a/app/models/uploaded_file.rb
+++ b/app/models/uploaded_file.rb
@@ -65,7 +65,7 @@ class UploadedFile < Article
# :min_size => 2.megabytes
# :max_size => 5.megabytes
has_attachment :storage => :file_system,
- :thumbnails => { :icon => [24,24], :thumb => '130x130>', :slideshow => '320x240>', :display => '640X480>' },
+ :thumbnails => { :icon => [24,24], :bigicon => [50,50], :thumb => '130x130>', :slideshow => '320x240>', :display => '640X480>' },
:thumbnail_class => Thumbnail,
:max_size => self.max_size
=====================================
app/presenters/image.rb
=====================================
--- a/app/presenters/image.rb
+++ b/app/presenters/image.rb
@@ -4,6 +4,10 @@ class FilePresenter::Image < FilePresenter
f.image? ? 10 : nil
end
+ def sized_icon(size)
+ public_filename size
+ end
+
def icon_name
public_filename :icon
end
=====================================
app/views/content_viewer/folder.html.erb
=====================================
--- a/app/views/content_viewer/folder.html.erb
+++ b/app/views/content_viewer/folder.html.erb
@@ -1,8 +1,7 @@
<% unless folder.body.blank? %>
- <div>
+ <div class="folder-description">
<%= folder.body %>
</div>
- <hr/>
<% end %>
<% if folder.children.empty? %>
=====================================
app/views/shared/_content_item.html.erb
=====================================
--- /dev/null
+++ b/app/views/shared/_content_item.html.erb
@@ -0,0 +1,11 @@
+<div id="list-item">
+ <div class="item-info">
+ <div class="item-icon" >
+ <%= display_content_icon(content) %>
+ </div>
+ <span class="item-description">
+ <%= link_to(short_filename_upper_ext(content.name), content.url) %>
+ </span>
+ <span class="item-date"><%= _("Published at: #{show_date(content.updated_at)}") %></span>
+ </div>
+</div>
\ No newline at end of file
=====================================
app/views/shared/content_list.html.erb
=====================================
--- a/app/views/shared/content_list.html.erb
+++ b/app/views/shared/content_list.html.erb
@@ -1,13 +1,11 @@
-<table class="<%= list_type %>-content">
- <tr>
- <th><%= _('Title') %></th>
- <th><%= _('Last update') %></th>
- </tr>
+<ul class="<%= list_type %>-content">
<% contents.each do |content| %>
- <% if content.display_to?(user) %>
- <%= display_content_in_listing :content=>content, :list_type=>list_type, :recursive=>recursive %>
- <% end %>
+ <li class="<%= list_type %>-item">
+ <% if content.display_to?(user) %>
+ <%= render :partial => 'shared/content_item', :locals => { :content => content } %>
+ <% end %>
+ </li>
<% end %>
-</table>
+</ul>
<p><%= pagination_links contents, :param_name => 'npage', :page_links => true %></p>
=====================================
lib/short_filename.rb
=====================================
--- a/lib/short_filename.rb
+++ b/lib/short_filename.rb
@@ -1,11 +1,21 @@
module ShortFilename
def short_filename(filename, limit_chars = 43)
- return filename if filename.size <= limit_chars
extname = File.extname(filename)
basename = File.basename(filename,extname)
+ return shrink(basename, extname, limit_chars) + extname
+ end
+
+ def short_filename_upper_ext(filename, limit_chars = 43)
+ extname = File.extname(filename)
+ display_name = shrink(File.basename(filename, extname), extname, limit_chars)
+ return extname.present? ? (display_name + ' - ' + extname.upcase.delete(".")) : display_name
+ end
+
+ def shrink(filename, extname, limit_chars)
+ return filename if filename.size <= limit_chars
str_complement = '(...)'
- return basename[0..(limit_chars - extname.size - str_complement.size - 1)] + str_complement + extname
+ return filename[0..(limit_chars - extname.size - str_complement.size - 1)] + str_complement
end
end
=====================================
public/designs/icons/tango/style.css
=====================================
--- a/public/designs/icons/tango/style.css
+++ b/public/designs/icons/tango/style.css
@@ -116,6 +116,107 @@
.icon-clock { background-image: url(Tango/16x16/actions/appointment.png) }
.icon-fullscreen { background-image: url(Tango/16x16/actions/view-fullscreen.png) }
+/******************BIG ICONS************************/
+.bigicon-embed { background-image: url(Tango/scalable/apps/utilities-terminal.svg) }
+.bigicon-edit { background-image: url(Tango/scalable/apps/text-editor.svg) }
+.bigicon-undo { background-image: url(Tango/scalable/actions/edit-undo.svg) }
+.bigicon-home { background-image: url(Tango/scalable/actions/go-home.svg) }
+.bigicon-home-not { background-image: url(mod/scalable/actions/go-home-not.svg) }
+.bigicon-new,
+.bigicon-suggest { background-image: url(Tango/scalable/actions/filenew.svg) }
+.bigicon-close { background-image: url(Tango/scalable/actions/gtk-cancel.svg) }
+.bigicon-newfolder { background-image: url(Tango/scalable/actions/folder-new.svg) }
+.bigicon-folder { background-image: url(Tango/scalable/places/folder.svg) }
+.bigicon-parent-folder { background-image: url(Tango/scalable/places/folder_home.svg) }
+.bigicon-newblog { background-image: url(mod/scalable/apps/text-editor.svg) }
+.bigicon-blog { background-image: url(mod/scalable/apps/text-editor.svg) }
+.bigicon-save { background-image: url(Tango/scalable/actions/filesave.svg) }
+.bigicon-send { background-image: url(Tango/scalable/actions/stock_mail-forward.svg) }
+.bigicon-cancel { background-image: url(Tango/scalable/actions/gtk-cancel.svg) }
+.bigicon-person { background-image: url(Tango/scalable/apps/system-config-users.svg) }
+.bigicon-product { background-image: url(Tango/scalable/mimetypes/package.svg) }
+.bigicon-delete { background-image: url(Tango/scalable/places/user-trash.svg) }
+.bigicon-back { background-image: url(Tango/scalable/actions/back.svg) }
+.bigicon-next { background-image: url(Tango/scalable/actions/go-next.svg) }
+.bigicon-add { background-image: url(Tango/scalable/actions/add.svg) }
+.bigicon-remove { background-image: url(Tango/scalable/actions/gtk-remove.svg) }
+.bigicon-more { background-image: url(Tango/scalable/actions/add.svg) }
+.bigicon-up { background-image: url(Tango/scalable/actions/go-up.svg) }
+.bigicon-down { background-image: url(Tango/scalable/actions/go-down.svg) }
+.bigicon-left { background-image: url(Tango/scalable/actions/go-previous.svg) }
+.bigicon-right { background-image: url(Tango/scalable/actions/go-next.svg) }
+.bigicon-up-disabled { background-image: url(Tango/scalable/actions/go-up.svg); opacity: 0.25; filter:alpha(opacity=25); }
+.bigicon-down-disabled { background-image: url(Tango/scalable/actions/go-down.svg); opacity: 0.25; filter:alpha(opacity=25); }
+.bigicon-left-disabled { background-image: url(Tango/scalable/actions/go-previous.svg); opacity: 0.25; filter:alpha(opacity=25); }
+.bigicon-right-disabled { background-image: url(Tango/scalable/actions/go-next.svg); opacity: 0.25; filter:alpha(opacity=25); }
+.bigicon-up-red { background-image: url(mod/scalable/actions/go-up-red.svg) }
+.bigicon-forward { background-image: url(Tango/scalable/actions/go-next.svg) }
+.bigicon-search { background-image: url(Tango/scalable/actions/search.svg) }
+.bigicon-ok { background-image: url(Tango/scalable/actions/media-playback-start.svg) }
+.bigicon-login { background-image: url(mod/scalable/actions/log-in.svg) }
+.bigicon-help { background-image: url(Tango/scalable/apps/gnome-help.svg) }
+.bigicon-help32on { background-image: url(Tango/scalable/apps/gnome-help.svg) }
+.bigicon-help32off { background-image: url(mod/scalable/apps/gnome-help-red.svg) }
+.bigicon-spread { background-image: url(mod/scalable/actions/spread.svg) }
+.bigicon-todo { background-image: url(Tango/scalable/actions/stock_paste.svg) }
+.bigicon-eyes { background-image: url(Tango/scalable/actions/find.svg) }
+.bigicon-menu-home { background-image: url(Tango/scalable/actions/go-home.svg) }
+.bigicon-menu-product { background-image: url(Tango/scalable/mimetypes/package.svg) }
+.bigicon-menu-enterprise { background-image: url(Tango/scalable/actions/go-home.svg) }
+.bigicon-menu-community { background-image: url(Tango/scalable/apps/system-config-users.svg) }
+.bigicon-menu-ctrl-panel { background-image: url(Tango/scalable/categories/preferences-desktop.svg) }
+.bigicon-menu-admin { background-image: url(Tango/scalable/categories/preferences-system.svg) }
+.bigicon-menu-my-groups { background-image: url(Tango/scalable/apps/system-config-users.svg) }
+.bigicon-menu-login { background-image: url(mod/scalable/actions/log-in.svg) }
+.bigicon-menu-logout { background-image: url(mod/scalable/actions/log-out.svg) }
+.bigicon-menu-search { background-image: url(Tango/scalable/actions/search.svg) }
+.bigicon-menu-events { background-image: url(Tango/scalable/mimetypes/stock_calendar.svg) }
+.bigicon-event { background-image: url(Tango/scalable/mimetypes/stock_calendar.svg) }
+.bigicon-newevent { background-image: url(Tango/scalable/mimetypes/stock_calendar.svg) }
+.bigicon-menu-articles { background-image: url(Tango/scalable/apps/text-editor.svg) }
+.bigicon-menu-people { background-image: url(mod/scalable/apps/user.svg) }
+.bigicon-menu-mail { background-image: url(Tango/scalable/apps/email.svg) }
+.bigicon-upload-file { background-image: url(Tango/scalable/actions/filesave.svg) }
+.bigicon-newupload-file { background-image: url(Tango/scalable/actions/filesave.svg) }
+.bigicon-slideshow { background-image: url(Tango/scalable/mimetypes/x-office-presentation.svg) }
+.bigicon-photos { background-image: url(Tango/scalable/devices/camera-photo.svg) }
+.bigicon-vertical-toggle { background-image: url(Tango/scalable/actions/mail-send-receive.svg) }
+.bigicon-text-html { background-image: url(Tango/scalable/mimetypes/text-html.svg) }
+.bigicon-text-plain { background-image: url(Tango/scalable/mimetypes/text-x-generic.svg) }
+.bigicon-image-svg-xml { background-image: url(Tango/scalable/mimetypes/image-x-generic.svg) }
+.bigicon-application-octet-stream { background-image: url(Tango/scalable/mimetypes/binary.svg) }
+.bigicon-application-x-gzip { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-x-gzip.svg) }
+.bigicon-application-postscript { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-postscript.svg) }
+.bigicon-application-pdf { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-pdf.svg) }
+.bigicon-application-ogg { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-ogg.svg) }
+.bigicon-video, .icon-video-mpeg { background-image: url(Tango/scalable/mimetypes/video-x-generic.svg) }
+.bigicon-application-vnd-oasis-opendocument-text { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-vnd.oasis.opendocument.text.svg) }
+.bigicon-application-vnd-oasis-opendocument-spreadsheet { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-vnd.oasis.opendocument.spreadsheet.svg) }
+.bigicon-application-vnd-oasis-opendocument-presentation { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-vnd.oasis.opendocument.presentation.svg) }
+.bigicon-welcome-page { background-image: url(mod/scalable/mimetypes/welcome-page.svg) }
+.bigicon-blocks { background-image: url(mod/scalable/mimetypes/blocks.svg) }
+.bigicon-header-footer { background-image: url(mod/scalable/mimetypes/header-footer.svg) }
+.bigicon-appearance { background-image: url(Tango/scalable/apps/preferences-desktop-wallpaper.svg) }
+.bigicon-media-pause { background-image: url(Tango/scalable/actions/media-playback-pause.svg) }
+.bigicon-media-play { background-image: url(Tango/scalable/actions/media-playback-start.svg) }
+.bigicon-media-prev { background-image: url(Tango/scalable/actions/media-skip-backward.svg) }
+.bigicon-media-next { background-image: url(Tango/scalable/actions/media-skip-forward.svg) }
+.bigicon-lock { background-image: url(Tango/scalable/actions/lock.svg) }
+.bigicon-chat { background-image: url(Tango/scalable/apps/internet-group-chat.svg); background-repeat: no-repeat }
+.bigicon-reply { background-image: url(Tango/scalable/actions/mail-reply-sender.svg) }
+.bigicon-newforum { background-image: url(Tango/scalable/apps/internet-group-chat.svg) }
+.bigicon-forum { background-image: url(Tango/scalable/apps/system-users.svg) }
+.bigicon-gallery { background-image: url(Tango/scalable/mimetypes/image-x-generic.svg) }
+.bigicon-newgallery { background-image: url(Tango/scalable/mimetypes/image-x-generic.svg) }
+.bigicon-locale { background-image: url(Tango/scalable/apps/preferences-desktop-locale.svg) }
+.bigicon-user-removed { background-image: url(Tango/scalable/actions/gtk-cancel.svg) }
+.bigicon-user-unknown { background-image: url(Tango/scalable/status/dialog-error.svg) }
+.bigicon-alert { background-image: url(Tango/scalable/status/dialog-warning.svg) }
+.bigicon-clone { background-image: url(Tango/scalable/actions/edit-copy.svg) }
+.bigicon-activate-user { background-image: url(Tango/scalable/emblems/emblem-system.svg) }
+.bigicon-deactivate-user { background-image: url(Tango/scalable/emblems/emblem-unreadable.svg) }
+.bigicon-clock { background-image: url(Tango/scalable/actions/appointment.svg) }
+
/******************LARGE ICONS********************/
.image-gallery-item .folder { background-image: url(mod/96x96/places/folder.png) }
.image-gallery-item .gallery { background-image: url(mod/96x96/mimetypes/image-x-generic.png) }
=====================================
public/images/icons-app/image-loading-bigicon.png
=====================================
Binary files /dev/null and b/public/images/icons-app/image-loading-bigicon.png differ
=====================================
public/stylesheets/application.css
=====================================
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -3830,6 +3830,11 @@ table.cms-articles .icon:hover {
/* Folders */
+.article-body ul.folder-content {
+ list-style-type: none;
+ padding: 0;
+}
+
.folder-content .folder-item img {
vertical-align: middle;
position: relative;
@@ -3895,6 +3900,62 @@ table.cms-articles .icon:hover {
right: auto;
left: auto;
}
+
+/**************Folder Style**********************/
+
+.list-item{
+ font-family: arial;
+ color: #172738;
+}
+
+div.folder-description {
+ padding-bottom: 15px;
+}
+
+.list-item h2{
+ border-bottom:1px solid #ccc;
+ margin:0px;
+}
+
+.item-info{
+ border-top: 1px solid #ccc;
+ line-height: 25px;
+ padding:25px 20px;
+}
+
+.item-info a{
+ text-decoration: none !important;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.item-icon a {
+ float: left;
+ width: 50px;
+ height: 50px;
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+span.item-type {
+ font-size: 12px;
+}
+
+.item-description{
+ display: block;
+ position:relative;
+ margin-left: 15%;
+ padding-left: 10px;
+}
+
+.item-date{
+ display:block;
+ position:relative;
+ font-size: 12px;
+ margin-left: 15%;
+ padding-left: 10px;
+}
+
/************* enterprise homepage style *****************/
div.event-info {
=====================================
test/unit/folder_helper_test.rb
=====================================
--- a/test/unit/folder_helper_test.rb
+++ b/test/unit/folder_helper_test.rb
@@ -89,27 +89,14 @@ class FolderHelperTest < ActionView::TestCase
assert_not_includes result, article
end
- should 'list subitems as HTML content' do
+ should 'display the proper content icon' do
profile = create_user('folder-owner').person
folder = fast_create(Folder, {:name => 'Parent Folder', :profile_id => profile.id})
article1 = fast_create(Article, {:name => 'Article1', :parent_id => folder.id, :profile_id => profile.id, :updated_at => DateTime.now })
article2 = fast_create(Article, {:name => 'Article2', :parent_id => folder.id, :profile_id => profile.id, :updated_at => DateTime.now })
- self.stubs(:params).returns({:npage => nil})
-
- contents = folder.children.order('updated_at DESC').paginate(:per_page => 10, :page => params[:npage])
- expects(:user).returns(profile).at_least_once
- expects(:list_type).returns(:folder).at_least_once
- expects(:recursive).returns(false).at_least_once
- expects(:pagination_links).with(anything, anything).returns('')
- list = render 'shared/content_list', binding
- expects(:render).with(:file => 'shared/content_list',
- :locals => { :contents => contents, :recursive => false, :list_type => :folder }
- ).returns(list)
-
- result = list_contents(:contents=>contents)
-
- assert_tag_in_string result, :tag => 'td', :descendant => { :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ } }, :content => /Article1/
- assert_tag_in_string result, :tag => 'td', :descendant => { :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ } }, :content => /Article2/
+
+ assert_tag_in_string display_content_icon(article1), :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ }
+ assert_tag_in_string display_content_icon(article2), :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ }
end
should 'explictly advise if empty' do
=====================================
test/unit/short_filename_test.rb
=====================================
--- a/test/unit/short_filename_test.rb
+++ b/test/unit/short_filename_test.rb
@@ -16,5 +16,19 @@ class NoosferoFilenamesTest < ActiveSupport::TestCase
assert_equal 'filename.mp3', short_filename('filename.mp3')
end
+ should 'highlight the file extansion' do
+ assert_equal 'AGENDA(...) - MP3', short_filename_upper_ext('AGENDA_CULTURA_-_FESTA_DE_VAQUEIROS_PONTO_DE_SERRA_PRETA_BAIXA.mp3',15)
+
+ assert_equal 'AGENDA - MP3', short_filename_upper_ext('AGENDA.mp3',15)
+ end
+
+ should 'return the full filename if its size is smaller than the limit' do
+ assert_equal 'AGENDA', shrink('AGENDA', 'mp3', 15)
+ end
+
+ should 'shrink the filename if its size is bigger than the limit' do
+ assert_equal 'AGENDA(...)', shrink('AGENDA_CULTURA_-_FESTA_DE_VAQUEIROS_PONTO_DE_SERRA_PRETA_BAIXA', 'mp3', 14)
+ end
+
end
View it on GitLab: https://gitlab.com/noosfero/noosfero/compare/69d6da5cca54b4eaeb9e9f9469a360bc2fb808f6...b49fa908dde6cfdb453296b5f62d6957001ba53b
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listas.softwarelivre.org/pipermail/noosfero-dev/attachments/20150611/cccac062/attachment-0001.html>
More information about the Noosfero-dev
mailing list