Commit bbcc0618868a795d73c5a2ef8928e272824be3ea
Committed by
Rodrigo Souto
1 parent
69d6da5c
Exists in
master
and in
22 other branches
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>
Showing
10 changed files
with
221 additions
and
56 deletions
Show diff stats
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(' ' * (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(' ' * (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 < 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
... | ... | @@ -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 < 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 < 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 | ... | ... |