From bbcc0618868a795d73c5a2ef8928e272824be3ea Mon Sep 17 00:00:00 2001 From: AndrĂ© Bernardes Date: Wed, 20 May 2015 11:57:06 -0300 Subject: [PATCH] Improvments on folder visualization --- app/helpers/folder_helper.rb | 33 ++++++++------------------------- app/models/uploaded_file.rb | 2 +- app/views/content_viewer/folder.html.erb | 3 +-- app/views/shared/_content_item.html.erb | 11 +++++++++++ app/views/shared/content_list.html.erb | 16 +++++++--------- lib/short_filename.rb | 14 ++++++++++++-- public/designs/icons/tango/style.css | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ public/stylesheets/application.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ test/unit/folder_helper_test.rb | 21 ++++----------------- test/unit/short_filename_test.rb | 14 ++++++++++++++ 10 files changed, 221 insertions(+), 56 deletions(-) create mode 100644 app/views/shared/_content_item.html.erb diff --git a/app/helpers/folder_helper.rb b/app/helpers/folder_helper.rb index 7105a8c..b67242b 100644 --- a/app/helpers/folder_helper.rb +++ b/app/helpers/folder_helper.rb @@ -25,39 +25,22 @@ 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 : diff --git a/app/models/uploaded_file.rb b/app/models/uploaded_file.rb index fcb96aa..ee6bd60 100644 --- 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 diff --git a/app/views/content_viewer/folder.html.erb b/app/views/content_viewer/folder.html.erb index dbd0914..7317b6d 100644 --- a/app/views/content_viewer/folder.html.erb +++ b/app/views/content_viewer/folder.html.erb @@ -1,8 +1,7 @@ <% unless folder.body.blank? %> -
+
<%= folder.body %>
-
<% end %> <% if folder.children.empty? %> diff --git a/app/views/shared/_content_item.html.erb b/app/views/shared/_content_item.html.erb new file mode 100644 index 0000000..7bd58c8 --- /dev/null +++ b/app/views/shared/_content_item.html.erb @@ -0,0 +1,11 @@ +
+
+
+ <%= display_content_icon(content) %> +
+ + <%= link_to(short_filename_upper_ext(content.name), content.url) %> + + <%= _("Published at: #{show_date(content.updated_at)}") %> +
+
\ No newline at end of file diff --git a/app/views/shared/content_list.html.erb b/app/views/shared/content_list.html.erb index 3abfbe3..5ea12d0 100644 --- a/app/views/shared/content_list.html.erb +++ b/app/views/shared/content_list.html.erb @@ -1,13 +1,11 @@ - - - - - +
<%= _('Title') %><%= _('Last update') %>
+

<%= pagination_links contents, :param_name => 'npage', :page_links => true %>

diff --git a/lib/short_filename.rb b/lib/short_filename.rb index 86f636e..716bda0 100644 --- 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 display_name + " - " + extname.upcase.delete(".") if not extname.empty? else 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 diff --git a/public/designs/icons/tango/style.css b/public/designs/icons/tango/style.css index fc883bb..1fe4e21 100644 --- 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) } diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index ad00fbf..4d0764f 100644 --- 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,63 @@ table.cms-articles .icon:hover { right: auto; left: auto; } + +/**************Folder Style**********************/ + +.list-item{ + font-family: arial; + color: #172738; +} + +div.folder-description { + padding-bottom: 15px; + border-bottom: 1px solid #CCCCCC; +} + +.list-item h2{ + border-bottom:1px solid #ccc; + margin:0px; +} + +.item-info{ + border-bottom: 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 { diff --git a/test/unit/folder_helper_test.rb b/test/unit/folder_helper_test.rb index d25b2f1..f15f504 100644 --- 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 diff --git a/test/unit/short_filename_test.rb b/test/unit/short_filename_test.rb index 97f011b..0d561ac 100644 --- 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 -- libgit2 0.21.2