diff --git a/app/assets/stylesheets/admin/products.css.scss b/app/assets/stylesheets/admin/products.css.scss index 79854e4c33..b3fbf00886 100644 --- a/app/assets/stylesheets/admin/products.css.scss +++ b/app/assets/stylesheets/admin/products.css.scss @@ -32,6 +32,9 @@ table#listing_products.bulk { clear: both; colgroup col { + &.image { + width: 1%; + } &.producer { width: 18%; } @@ -61,6 +64,19 @@ table#listing_products.bulk { } } + td.image { + padding: 10px; + img { + border: 1px solid transparent; + } + img:hover { + opacity: 0.8; + cursor: pointer; + background-color: #fbfbfb; + border: 1px solid #e4e4e4; + } + } + td.unit { input, select { width: 100%; diff --git a/app/views/spree/admin/products/bulk_edit/_products_head.html.haml b/app/views/spree/admin/products/bulk_edit/_products_head.html.haml index 6ebe7b1f24..1ed74174f1 100644 --- a/app/views/spree/admin/products/bulk_edit/_products_head.html.haml +++ b/app/views/spree/admin/products/bulk_edit/_products_head.html.haml @@ -1,5 +1,6 @@ %colgroup %col.actions + %col.image{ ng: { show: 'columns.image.visible' } } %col.producer{ ng: { show: 'columns.producer.visible' } } %col.sku{ ng: { show: 'columns.sku.visible' } } %col.name{ ng: { show: 'columns.name.visible' } } @@ -21,6 +22,7 @@ %th.left-actions %a{ 'ng-click' => 'toggleShowAllVariants()', :style => 'color: red; cursor: pointer' } = t(:expand_all) + %th.image{ 'ng-show' => 'columns.image.visible' } %th.producer{ 'ng-show' => 'columns.producer.visible' }=t('admin.producer') %th.sku{ 'ng-show' => 'columns.sku.visible' }=t('admin.sku') %th.name{ 'ng-show' => 'columns.name.visible' }=t('.name') diff --git a/app/views/spree/admin/products/bulk_edit/_products_product.html.haml b/app/views/spree/admin/products/bulk_edit/_products_product.html.haml index 1e929878b0..3134fd00dd 100644 --- a/app/views/spree/admin/products/bulk_edit/_products_product.html.haml +++ b/app/views/spree/admin/products/bulk_edit/_products_product.html.haml @@ -2,6 +2,8 @@ %td.left-actions %a{ 'ofn-toggle-variants' => 'true', :class => "view-variants", 'ng-show' => 'hasVariants(product)' } %a{ :class => "add-variant icon-plus-sign", 'ng-click' => "addVariant(product)", 'ng-show' => "!hasVariants(product) && hasUnit(product)" } + %td.image{ 'ng-show' => 'columns.image.visible' } + %img{'ng-src' => '{{ product.image_url }}'} %td.producer{ 'ng-show' => 'columns.producer.visible' } %select.select2.fullwidth{ 'ng-model' => 'product.producer_id', :name => 'producer_id', 'ofn-track-product' => 'producer_id', 'ng-options' => 'producer.id as producer.name for producer in producers' } %td.sku{ 'ng-show' => 'columns.sku.visible' } diff --git a/app/views/spree/admin/products/bulk_edit/_products_variant.html.haml b/app/views/spree/admin/products/bulk_edit/_products_variant.html.haml index 4862f210dd..eb87039ff0 100644 --- a/app/views/spree/admin/products/bulk_edit/_products_variant.html.haml +++ b/app/views/spree/admin/products/bulk_edit/_products_variant.html.haml @@ -2,6 +2,7 @@ %td.left-actions %a{ :class => "variant-item icon-caret-right", 'ng-hide' => "$last" } %a{ :class => "add-variant icon-plus-sign", 'ng-click' => "addVariant(product)", 'ng-show' => "$last", 'ofn-with-tip' => t('.new_variant') } + %td{ 'ng-show' => 'columns.image.visible' } %td{ 'ng-show' => 'columns.producer.visible' } %td{ 'ng-show' => 'columns.sku.visible' } %input{ 'ng-model' => "variant.sku", :name => 'variant_sku', 'ofn-track-variant' => 'sku', :type => 'text' } diff --git a/config/locales/en.yml b/config/locales/en.yml index c38f528fd7..213ff26d14 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -269,6 +269,7 @@ en: phone: Phone price: Price producer: Producer + image: Image product: Product quantity: Quantity schedule: Schedule diff --git a/lib/open_food_network/column_preference_defaults.rb b/lib/open_food_network/column_preference_defaults.rb index 645764b27e..ec2953a823 100644 --- a/lib/open_food_network/column_preference_defaults.rb +++ b/lib/open_food_network/column_preference_defaults.rb @@ -58,6 +58,7 @@ module OpenFoodNetwork def products_bulk_edit_columns node = "spree.admin.products.bulk_edit.products_head" { + image: { name: I18n.t("admin.image"), visible: true }, producer: { name: I18n.t("admin.producer"), visible: true }, sku: { name: I18n.t("admin.sku"), visible: false }, name: { name: I18n.t("admin.name"), visible: true },