[Design] Add name of file for images

app/assets/stylesheets/partials/_admin.scss

@@ -42,4 +42,11 @@
 select#locale-selection {
   visibility: hidden;
   height: em(50);
-}
+}
+
+.info-text-container {
+  &.filename-container {
+    margin-top: 0;
+  }
+}
+

app/view_utils/icon_map.rb

@@ -160,6 +160,7 @@
       "raclette_grill" => "ss-cookingutensils",
       "topbar_menu" => "ss-signpost",
       "user_edit" => "ss-userprofile",
+      "picture" => "ss-picture",
     },
     "font-awesome" => {
       "map" => "icon-map-marker",
@@ -270,5 +271,6 @@
       "grid" => "icon-th-large",
       "check" => "icon-ok",
       "user_edit" => "icon-user",
+      "picture" => "icon-picture",
     }
   }

app/views/admin/communities/edit_look_and_feel.haml

@@ -20,6 +20,7 @@
         - logo_info = FeatureFlagHelper.feature_enabled?(:topbar_v1) ? logo_no_placing : logo_old
         = form.label :wide_logo, t(".community_logo"), :class => "input"
         = render :partial => "layouts/info_text", :locals => { :text =>t(logo_info, :width => 336, :height => 80)}
+        = render 'layouts/filename', file_field: @community.wide_logo
         = form.file_field(:wide_logo, :class => "file_field")
 
     .row
@@ -29,18 +30,21 @@
         - icon_info = FeatureFlagHelper.feature_enabled?(:topbar_v1) ? icon_no_placing : icon_old
         = form.label :logo, t(".community_logo_icon"), :class => "input"
         = render :partial => "layouts/info_text", :locals => { :text => t(icon_info, :width => 600, :height => 600)}
+        = render 'layouts/filename', file_field: @community.logo
         = form.file_field(:logo, :class => "file_field")
 
     .row
       .col-12
         = form.label :cover_photo, t(".community_cover_photo"), :class => "input"
         = render :partial => "layouts/info_text", :locals => { :text => (t(".cover_photo_visibility") + " " +  t(".cover_photo_instructions_text_with_dimensions", :width => 1920, :height => 450, :see_how_it_looks_like => link_to(t("admin.communities.edit_details.see_how_it_looks_like"), "/?big_cover_photo=true", :id => "view_cover_photo_link"))).html_safe}
+        = render 'layouts/filename', file_field: @community.cover_photo
         = form.file_field(:cover_photo, :class => "file_field")
 
     .row
       .col-12
         = form.label :small_cover_photo, t(".small_community_cover_photo"), :class => "input"
         = render :partial => "layouts/info_text", :locals => { :text => t(".small_cover_photo_visibility") + " " + t(".small_cover_photo_instructions_text_with_dimensions", :width => 1920, :height => 96) }
+        = render 'layouts/filename', file_field: @community.small_cover_photo
         = form.file_field(:small_cover_photo, :class => "file_field")
 
 
@@ -50,6 +54,7 @@
       .col-12
         = form.label :favicon, t(".favicon"), :class => "input"
         = render :partial => "layouts/info_text", :locals => { :text => t(".favicon_info_text") }
+        = render 'layouts/filename', file_field: @community.favicon
         = form.file_field(:favicon, :class => "file_field")
 
     .row

app/views/layouts/_filename.haml

@@ -0,0 +1,9 @@
+- if file_field.file?
+  .info-text-container.filename-container
+    .info-text-icon.marketplace-color
+      = icon_tag("picture")
+    .info-text-content
+      %p
+        = t('admin.communities.edit_look_and_feel.current_image')
+        = ' '
+        = file_field.original_filename

app/views/layouts/_style_overrides.haml

@@ -4,7 +4,7 @@
   button,.button,.big-button,.inline-big-button,.tribe-actions,.marketplace-lander button.action-button,.noUi-connect,.pagination .current,.toggle-menu a:hover,.toggle-menu .toggle-menu-link:hover,.badge,.enabled-book-button,.disabled-book-button,.message-book-button,.listing-shape-delete-button { background: ##{ ColorUtils.darken(color1, 0) }; }
   button:hover,.button:hover,.big-button:hover,.inline-big-button:hover,.tribe-actions a:hover,.marketplace-lander button.action-button:hover,.home-toolbar-button-group-button:hover,.home-toolbar-show-filters-button:hover,.enabled-book-button:hover,.disabled-book-button:hover,.message-book-button:hover,.listing-shape-delete-button:hover { background: ##{ ColorUtils.darken(color1, 5) }; }
   button:active,.button:active,.big-button:active,.inline-big-button:active,.home-toolbar-button-group-button:active,.home-toolbar-show-filters-button:active,.enabled-book-button:active,.disabled-book-button:active,.message-book-button:active,.listing-shape-delete-button:active { background: ##{ ColorUtils.darken(color1, 10) }; }
-  .feed-actions .request-link,.view-item .listing-icons a:hover,.pagination a,a,.checkbox-option-checkmark { color: ##{ ColorUtils.darken(color1, 0) }; }
+  .feed-actions .request-link,.view-item .listing-icons a:hover,.pagination a,a,.checkbox-option-checkmark,.marketplace-color { color: ##{ ColorUtils.darken(color1, 0) }; }
   .feed-actions .request-link:hover,a:hover { color: ##{ ColorUtils.darken(color1, 15) }; }
   .marketplace-lander figure.marketplace-cover { background-image: url("#{ image_map[:cover_photo] }"); }
   .marketplace-lander figure.marketplace-cover-small { background-image: url("#{ image_map[:small_cover_photo] }"); }

app/views/settings/show.haml

@@ -66,6 +66,7 @@
 
     -# Profile picture
     = form.label :image, t("settings.profile.profile_picture")
+    = render 'layouts/filename', file_field: target_user.image
     = form.file_field :image, :size => 30, :id => "avatar_file"
 
     -# About text

config/locales/en.yml

@@ -129,6 +129,7 @@ en:
         invalid_color_code: "Color code should contain 6 numbers or letters A-F, for example D96E21"
         custom_head_script: "Custom script"
         custom_head_script_instructions_text: "This script is injected inside the <head> tag of every page and can be used to insert custom CSS, JavaScript or HTML. Please note that future changes to Sharetribe may render your script incompatible."
+        current_image: "Current image:"
       edit_text_instructions:
         edit_text_instructions: "Instruction texts"
       edit_welcome_email: