Commit bbcc0618868a795d73c5a2ef8928e272824be3ea

Authored by André Guedes
Committed by Rodrigo Souto
1 parent 69d6da5c

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@gmail.com>
Signed-off-by: André Bernardes <andrebsguedes@gmail.com>
Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
app/helpers/folder_helper.rb
... ... @@ -25,39 +25,22 @@ module FolderHelper
25 25 articles.select {|article| article.display_to?(user)}
26 26 end
27 27  
28   - def display_content_in_listing(configure={})
29   - recursive = configure[:recursive] || false
30   - list_type = configure[:list_type] || :folder
31   - level = configure[:level] || 0
32   - content = FilePresenter.for configure[:content]
  28 + def display_content_icon(content_item)
  29 + content = FilePresenter.for content_item
33 30 content_link = if content.image?
34   - link_to('&nbsp;' * (level * 4) +
35   - image_tag(icon_for_article(content)) + short_filename(content.name),
  31 + link_to(
  32 + image_tag(icon_for_article(content, :bigicon)),
36 33 content.url.merge(:view => true)
37 34 )
38 35 else
39   - link_to('&nbsp;' * (level * 4) +
40   - short_filename(content.name),
41   - content.url.merge(:view => true), :class => icon_for_article(content)
  36 + link_to('',
  37 + content.url.merge(:view => true),
  38 + :class => icon_for_article(content, :bigicon)
42 39 )
43 40 end
44   - result = content_tag(
45   - 'tr',
46   - content_tag('td', content_link ) +
47   - content_tag('td', show_date(content.updated_at), :class => 'last-update'),
48   - :class => "#{list_type}-item"
49   - )
50   - if recursive
51   - result + content.children.map {|item|
52   - display_content_in_listing :content=>item, :recursive=>recursive,
53   - :list_type=>list_type, :level=>level+1
54   - }.join("\n")
55   - else
56   - result
57   - end
58 41 end
59 42  
60   - def icon_for_article(article)
  43 + def icon_for_article(article, size = 'icon')
61 44 article = FilePresenter.for article
62 45 icon = article.respond_to?(:icon_name) ?
63 46 article.icon_name :
... ...
app/models/uploaded_file.rb
... ... @@ -65,7 +65,7 @@ class UploadedFile &lt; Article
65 65 # :min_size => 2.megabytes
66 66 # :max_size => 5.megabytes
67 67 has_attachment :storage => :file_system,
68   - :thumbnails => { :icon => [24,24], :thumb => '130x130>', :slideshow => '320x240>', :display => '640X480>' },
  68 + :thumbnails => { :icon => [24,24], :bigicon => [50,50], :thumb => '130x130>', :slideshow => '320x240>', :display => '640X480>' },
69 69 :thumbnail_class => Thumbnail,
70 70 :max_size => self.max_size
71 71  
... ...
app/views/content_viewer/folder.html.erb
1 1 <% unless folder.body.blank? %>
2   - <div>
  2 + <div class="folder-description">
3 3 <%= folder.body %>
4 4 </div>
5   - <hr/>
6 5 <% end %>
7 6  
8 7 <% if folder.children.empty? %>
... ...
app/views/shared/_content_item.html.erb 0 → 100644
... ... @@ -0,0 +1,11 @@
  1 +<div id="list-item">
  2 + <div class="item-info">
  3 + <div class="item-icon" >
  4 + <%= display_content_icon(content) %>
  5 + </div>
  6 + <span class="item-description">
  7 + <%= link_to(short_filename_upper_ext(content.name), content.url) %>
  8 + </span>
  9 + <span class="item-date"><%= _("Published at: #{show_date(content.updated_at)}") %></span>
  10 + </div>
  11 +</div>
0 12 \ No newline at end of file
... ...
app/views/shared/content_list.html.erb
1   -<table class="<%= list_type %>-content">
2   - <tr>
3   - <th><%= _('Title') %></th>
4   - <th><%= _('Last update') %></th>
5   - </tr>
  1 +<ul class="<%= list_type %>-content">
6 2 <% contents.each do |content| %>
7   - <% if content.display_to?(user) %>
8   - <%= display_content_in_listing :content=>content, :list_type=>list_type, :recursive=>recursive %>
9   - <% end %>
  3 + <li class="<%= list_type %>-item">
  4 + <% if content.display_to?(user) %>
  5 + <%= render :partial => 'shared/content_item', :locals => { :content => content } %>
  6 + <% end %>
  7 + </li>
10 8 <% end %>
11   -</table>
  9 +</ul>
12 10  
13 11 <p><%= pagination_links contents, :param_name => 'npage', :page_links => true %></p>
... ...
lib/short_filename.rb
1 1 module ShortFilename
2 2  
3 3 def short_filename(filename, limit_chars = 43)
4   - return filename if filename.size <= limit_chars
5 4 extname = File.extname(filename)
6 5 basename = File.basename(filename,extname)
  6 + return shrink(basename, extname, limit_chars) + extname
  7 + end
  8 +
  9 + def short_filename_upper_ext(filename, limit_chars = 43)
  10 + extname = File.extname(filename)
  11 + display_name = shrink(File.basename(filename, extname), extname, limit_chars)
  12 + return display_name + " - " + extname.upcase.delete(".") if not extname.empty? else display_name
  13 + end
  14 +
  15 + def shrink(filename, extname, limit_chars)
  16 + return filename if filename.size <= limit_chars
7 17 str_complement = '(...)'
8   - return basename[0..(limit_chars - extname.size - str_complement.size - 1)] + str_complement + extname
  18 + return filename[0..(limit_chars - extname.size - str_complement.size - 1)] + str_complement
9 19 end
10 20  
11 21 end
... ...
public/designs/icons/tango/style.css
... ... @@ -116,6 +116,107 @@
116 116 .icon-clock { background-image: url(Tango/16x16/actions/appointment.png) }
117 117 .icon-fullscreen { background-image: url(Tango/16x16/actions/view-fullscreen.png) }
118 118  
  119 +/******************BIG ICONS************************/
  120 +.bigicon-embed { background-image: url(Tango/scalable/apps/utilities-terminal.svg) }
  121 +.bigicon-edit { background-image: url(Tango/scalable/apps/text-editor.svg) }
  122 +.bigicon-undo { background-image: url(Tango/scalable/actions/edit-undo.svg) }
  123 +.bigicon-home { background-image: url(Tango/scalable/actions/go-home.svg) }
  124 +.bigicon-home-not { background-image: url(mod/scalable/actions/go-home-not.svg) }
  125 +.bigicon-new,
  126 +.bigicon-suggest { background-image: url(Tango/scalable/actions/filenew.svg) }
  127 +.bigicon-close { background-image: url(Tango/scalable/actions/gtk-cancel.svg) }
  128 +.bigicon-newfolder { background-image: url(Tango/scalable/actions/folder-new.svg) }
  129 +.bigicon-folder { background-image: url(Tango/scalable/places/folder.svg) }
  130 +.bigicon-parent-folder { background-image: url(Tango/scalable/places/folder_home.svg) }
  131 +.bigicon-newblog { background-image: url(mod/scalable/apps/text-editor.svg) }
  132 +.bigicon-blog { background-image: url(mod/scalable/apps/text-editor.svg) }
  133 +.bigicon-save { background-image: url(Tango/scalable/actions/filesave.svg) }
  134 +.bigicon-send { background-image: url(Tango/scalable/actions/stock_mail-forward.svg) }
  135 +.bigicon-cancel { background-image: url(Tango/scalable/actions/gtk-cancel.svg) }
  136 +.bigicon-person { background-image: url(Tango/scalable/apps/system-config-users.svg) }
  137 +.bigicon-product { background-image: url(Tango/scalable/mimetypes/package.svg) }
  138 +.bigicon-delete { background-image: url(Tango/scalable/places/user-trash.svg) }
  139 +.bigicon-back { background-image: url(Tango/scalable/actions/back.svg) }
  140 +.bigicon-next { background-image: url(Tango/scalable/actions/go-next.svg) }
  141 +.bigicon-add { background-image: url(Tango/scalable/actions/add.svg) }
  142 +.bigicon-remove { background-image: url(Tango/scalable/actions/gtk-remove.svg) }
  143 +.bigicon-more { background-image: url(Tango/scalable/actions/add.svg) }
  144 +.bigicon-up { background-image: url(Tango/scalable/actions/go-up.svg) }
  145 +.bigicon-down { background-image: url(Tango/scalable/actions/go-down.svg) }
  146 +.bigicon-left { background-image: url(Tango/scalable/actions/go-previous.svg) }
  147 +.bigicon-right { background-image: url(Tango/scalable/actions/go-next.svg) }
  148 +.bigicon-up-disabled { background-image: url(Tango/scalable/actions/go-up.svg); opacity: 0.25; filter:alpha(opacity=25); }
  149 +.bigicon-down-disabled { background-image: url(Tango/scalable/actions/go-down.svg); opacity: 0.25; filter:alpha(opacity=25); }
  150 +.bigicon-left-disabled { background-image: url(Tango/scalable/actions/go-previous.svg); opacity: 0.25; filter:alpha(opacity=25); }
  151 +.bigicon-right-disabled { background-image: url(Tango/scalable/actions/go-next.svg); opacity: 0.25; filter:alpha(opacity=25); }
  152 +.bigicon-up-red { background-image: url(mod/scalable/actions/go-up-red.svg) }
  153 +.bigicon-forward { background-image: url(Tango/scalable/actions/go-next.svg) }
  154 +.bigicon-search { background-image: url(Tango/scalable/actions/search.svg) }
  155 +.bigicon-ok { background-image: url(Tango/scalable/actions/media-playback-start.svg) }
  156 +.bigicon-login { background-image: url(mod/scalable/actions/log-in.svg) }
  157 +.bigicon-help { background-image: url(Tango/scalable/apps/gnome-help.svg) }
  158 +.bigicon-help32on { background-image: url(Tango/scalable/apps/gnome-help.svg) }
  159 +.bigicon-help32off { background-image: url(mod/scalable/apps/gnome-help-red.svg) }
  160 +.bigicon-spread { background-image: url(mod/scalable/actions/spread.svg) }
  161 +.bigicon-todo { background-image: url(Tango/scalable/actions/stock_paste.svg) }
  162 +.bigicon-eyes { background-image: url(Tango/scalable/actions/find.svg) }
  163 +.bigicon-menu-home { background-image: url(Tango/scalable/actions/go-home.svg) }
  164 +.bigicon-menu-product { background-image: url(Tango/scalable/mimetypes/package.svg) }
  165 +.bigicon-menu-enterprise { background-image: url(Tango/scalable/actions/go-home.svg) }
  166 +.bigicon-menu-community { background-image: url(Tango/scalable/apps/system-config-users.svg) }
  167 +.bigicon-menu-ctrl-panel { background-image: url(Tango/scalable/categories/preferences-desktop.svg) }
  168 +.bigicon-menu-admin { background-image: url(Tango/scalable/categories/preferences-system.svg) }
  169 +.bigicon-menu-my-groups { background-image: url(Tango/scalable/apps/system-config-users.svg) }
  170 +.bigicon-menu-login { background-image: url(mod/scalable/actions/log-in.svg) }
  171 +.bigicon-menu-logout { background-image: url(mod/scalable/actions/log-out.svg) }
  172 +.bigicon-menu-search { background-image: url(Tango/scalable/actions/search.svg) }
  173 +.bigicon-menu-events { background-image: url(Tango/scalable/mimetypes/stock_calendar.svg) }
  174 +.bigicon-event { background-image: url(Tango/scalable/mimetypes/stock_calendar.svg) }
  175 +.bigicon-newevent { background-image: url(Tango/scalable/mimetypes/stock_calendar.svg) }
  176 +.bigicon-menu-articles { background-image: url(Tango/scalable/apps/text-editor.svg) }
  177 +.bigicon-menu-people { background-image: url(mod/scalable/apps/user.svg) }
  178 +.bigicon-menu-mail { background-image: url(Tango/scalable/apps/email.svg) }
  179 +.bigicon-upload-file { background-image: url(Tango/scalable/actions/filesave.svg) }
  180 +.bigicon-newupload-file { background-image: url(Tango/scalable/actions/filesave.svg) }
  181 +.bigicon-slideshow { background-image: url(Tango/scalable/mimetypes/x-office-presentation.svg) }
  182 +.bigicon-photos { background-image: url(Tango/scalable/devices/camera-photo.svg) }
  183 +.bigicon-vertical-toggle { background-image: url(Tango/scalable/actions/mail-send-receive.svg) }
  184 +.bigicon-text-html { background-image: url(Tango/scalable/mimetypes/text-html.svg) }
  185 +.bigicon-text-plain { background-image: url(Tango/scalable/mimetypes/text-x-generic.svg) }
  186 +.bigicon-image-svg-xml { background-image: url(Tango/scalable/mimetypes/image-x-generic.svg) }
  187 +.bigicon-application-octet-stream { background-image: url(Tango/scalable/mimetypes/binary.svg) }
  188 +.bigicon-application-x-gzip { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-x-gzip.svg) }
  189 +.bigicon-application-postscript { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-postscript.svg) }
  190 +.bigicon-application-pdf { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-pdf.svg) }
  191 +.bigicon-application-ogg { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-ogg.svg) }
  192 +.bigicon-video, .icon-video-mpeg { background-image: url(Tango/scalable/mimetypes/video-x-generic.svg) }
  193 +.bigicon-application-vnd-oasis-opendocument-text { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-vnd.oasis.opendocument.text.svg) }
  194 +.bigicon-application-vnd-oasis-opendocument-spreadsheet { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-vnd.oasis.opendocument.spreadsheet.svg) }
  195 +.bigicon-application-vnd-oasis-opendocument-presentation { background-image: url(Tango/scalable/mimetypes/gnome-mime-application-vnd.oasis.opendocument.presentation.svg) }
  196 +.bigicon-welcome-page { background-image: url(mod/scalable/mimetypes/welcome-page.svg) }
  197 +.bigicon-blocks { background-image: url(mod/scalable/mimetypes/blocks.svg) }
  198 +.bigicon-header-footer { background-image: url(mod/scalable/mimetypes/header-footer.svg) }
  199 +.bigicon-appearance { background-image: url(Tango/scalable/apps/preferences-desktop-wallpaper.svg) }
  200 +.bigicon-media-pause { background-image: url(Tango/scalable/actions/media-playback-pause.svg) }
  201 +.bigicon-media-play { background-image: url(Tango/scalable/actions/media-playback-start.svg) }
  202 +.bigicon-media-prev { background-image: url(Tango/scalable/actions/media-skip-backward.svg) }
  203 +.bigicon-media-next { background-image: url(Tango/scalable/actions/media-skip-forward.svg) }
  204 +.bigicon-lock { background-image: url(Tango/scalable/actions/lock.svg) }
  205 +.bigicon-chat { background-image: url(Tango/scalable/apps/internet-group-chat.svg); background-repeat: no-repeat }
  206 +.bigicon-reply { background-image: url(Tango/scalable/actions/mail-reply-sender.svg) }
  207 +.bigicon-newforum { background-image: url(Tango/scalable/apps/internet-group-chat.svg) }
  208 +.bigicon-forum { background-image: url(Tango/scalable/apps/system-users.svg) }
  209 +.bigicon-gallery { background-image: url(Tango/scalable/mimetypes/image-x-generic.svg) }
  210 +.bigicon-newgallery { background-image: url(Tango/scalable/mimetypes/image-x-generic.svg) }
  211 +.bigicon-locale { background-image: url(Tango/scalable/apps/preferences-desktop-locale.svg) }
  212 +.bigicon-user-removed { background-image: url(Tango/scalable/actions/gtk-cancel.svg) }
  213 +.bigicon-user-unknown { background-image: url(Tango/scalable/status/dialog-error.svg) }
  214 +.bigicon-alert { background-image: url(Tango/scalable/status/dialog-warning.svg) }
  215 +.bigicon-clone { background-image: url(Tango/scalable/actions/edit-copy.svg) }
  216 +.bigicon-activate-user { background-image: url(Tango/scalable/emblems/emblem-system.svg) }
  217 +.bigicon-deactivate-user { background-image: url(Tango/scalable/emblems/emblem-unreadable.svg) }
  218 +.bigicon-clock { background-image: url(Tango/scalable/actions/appointment.svg) }
  219 +
119 220 /******************LARGE ICONS********************/
120 221 .image-gallery-item .folder { background-image: url(mod/96x96/places/folder.png) }
121 222 .image-gallery-item .gallery { background-image: url(mod/96x96/mimetypes/image-x-generic.png) }
... ...
public/stylesheets/application.css
... ... @@ -3830,6 +3830,11 @@ table.cms-articles .icon:hover {
3830 3830  
3831 3831 /* Folders */
3832 3832  
  3833 +.article-body ul.folder-content {
  3834 + list-style-type: none;
  3835 + padding: 0;
  3836 +}
  3837 +
3833 3838 .folder-content .folder-item img {
3834 3839 vertical-align: middle;
3835 3840 position: relative;
... ... @@ -3895,6 +3900,63 @@ table.cms-articles .icon:hover {
3895 3900 right: auto;
3896 3901 left: auto;
3897 3902 }
  3903 +
  3904 +/**************Folder Style**********************/
  3905 +
  3906 +.list-item{
  3907 + font-family: arial;
  3908 + color: #172738;
  3909 +}
  3910 +
  3911 +div.folder-description {
  3912 + padding-bottom: 15px;
  3913 + border-bottom: 1px solid #CCCCCC;
  3914 +}
  3915 +
  3916 +.list-item h2{
  3917 + border-bottom:1px solid #ccc;
  3918 + margin:0px;
  3919 +}
  3920 +
  3921 +.item-info{
  3922 + border-bottom: 1px solid #ccc;
  3923 + line-height: 25px;
  3924 + padding:25px 20px;
  3925 +}
  3926 +
  3927 +.item-info a{
  3928 + text-decoration: none !important;
  3929 + font-size: 16px;
  3930 + font-weight: bold;
  3931 +}
  3932 +
  3933 +.item-icon a {
  3934 + float: left;
  3935 + width: 50px;
  3936 + height: 50px;
  3937 + background-repeat: no-repeat;
  3938 + background-position: center center;
  3939 +}
  3940 +
  3941 +span.item-type {
  3942 + font-size: 12px;
  3943 +}
  3944 +
  3945 +.item-description{
  3946 + display: block;
  3947 + position:relative;
  3948 + margin-left: 15%;
  3949 + padding-left: 10px;
  3950 +}
  3951 +
  3952 +.item-date{
  3953 + display:block;
  3954 + position:relative;
  3955 + font-size: 12px;
  3956 + margin-left: 15%;
  3957 + padding-left: 10px;
  3958 +}
  3959 +
3898 3960 /************* enterprise homepage style *****************/
3899 3961  
3900 3962 div.event-info {
... ...
test/unit/folder_helper_test.rb
... ... @@ -89,27 +89,14 @@ class FolderHelperTest &lt; ActionView::TestCase
89 89 assert_not_includes result, article
90 90 end
91 91  
92   - should 'list subitems as HTML content' do
  92 + should 'display the proper content icon' do
93 93 profile = create_user('folder-owner').person
94 94 folder = fast_create(Folder, {:name => 'Parent Folder', :profile_id => profile.id})
95 95 article1 = fast_create(Article, {:name => 'Article1', :parent_id => folder.id, :profile_id => profile.id, :updated_at => DateTime.now })
96 96 article2 = fast_create(Article, {:name => 'Article2', :parent_id => folder.id, :profile_id => profile.id, :updated_at => DateTime.now })
97   - self.stubs(:params).returns({:npage => nil})
98   -
99   - contents = folder.children.order('updated_at DESC').paginate(:per_page => 10, :page => params[:npage])
100   - expects(:user).returns(profile).at_least_once
101   - expects(:list_type).returns(:folder).at_least_once
102   - expects(:recursive).returns(false).at_least_once
103   - expects(:pagination_links).with(anything, anything).returns('')
104   - list = render 'shared/content_list', binding
105   - expects(:render).with(:file => 'shared/content_list',
106   - :locals => { :contents => contents, :recursive => false, :list_type => :folder }
107   - ).returns(list)
108   -
109   - result = list_contents(:contents=>contents)
110   -
111   - assert_tag_in_string result, :tag => 'td', :descendant => { :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ } }, :content => /Article1/
112   - assert_tag_in_string result, :tag => 'td', :descendant => { :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ } }, :content => /Article2/
  97 +
  98 + assert_tag_in_string display_content_icon(article1), :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ }
  99 + assert_tag_in_string display_content_icon(article2), :tag => 'a', :attributes => { :href => /.*\/folder-owner\/my-article-[0-9]*(\?|$)/ }
113 100 end
114 101  
115 102 should 'explictly advise if empty' do
... ...
test/unit/short_filename_test.rb
... ... @@ -16,5 +16,19 @@ class NoosferoFilenamesTest &lt; ActiveSupport::TestCase
16 16 assert_equal 'filename.mp3', short_filename('filename.mp3')
17 17 end
18 18  
  19 + should 'highlight the file extansion' do
  20 + assert_equal 'AGENDA(...) - MP3', short_filename_upper_ext('AGENDA_CULTURA_-_FESTA_DE_VAQUEIROS_PONTO_DE_SERRA_PRETA_BAIXA.mp3',15)
  21 +
  22 + assert_equal 'AGENDA - MP3', short_filename_upper_ext('AGENDA.mp3',15)
  23 + end
  24 +
  25 + should 'return the full filename if its size is smaller than the limit' do
  26 + assert_equal 'AGENDA', shrink('AGENDA', 'mp3', 15)
  27 + end
  28 +
  29 + should 'shrink the filename if its size is bigger than the limit' do
  30 + assert_equal 'AGENDA(...)', shrink('AGENDA_CULTURA_-_FESTA_DE_VAQUEIROS_PONTO_DE_SERRA_PRETA_BAIXA', 'mp3', 14)
  31 + end
  32 +
19 33 end
20 34  
... ...