From 7442d06bedfe869205e47183b1413d0e2efc1453 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 12 Feb 2021 17:14:30 +0100 Subject: [PATCH] add new template to manage variant - The aim of this template is to display unit price - Duplicate the angular directive - Add a question mark icon and its own file - Add some needed colors in the branding file --- .../shop_variant_with_unit_price.js.coffee | 7 +++++++ .../shop_variant_with_unit_price.html.haml | 19 +++++++++++++++++++ .../darkswarm/_shop-product-rows.scss | 6 ++++++ .../stylesheets/darkswarm/branding.scss | 4 ++++ .../darkswarm/question-mark-icon.scss | 18 ++++++++++++++++++ app/views/shop/products/_form.html.haml | 6 ++++-- 6 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/darkswarm/directives/shop_variant_with_unit_price.js.coffee create mode 100644 app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml create mode 100644 app/assets/stylesheets/darkswarm/question-mark-icon.scss diff --git a/app/assets/javascripts/darkswarm/directives/shop_variant_with_unit_price.js.coffee b/app/assets/javascripts/darkswarm/directives/shop_variant_with_unit_price.js.coffee new file mode 100644 index 0000000000..d23d365087 --- /dev/null +++ b/app/assets/javascripts/darkswarm/directives/shop_variant_with_unit_price.js.coffee @@ -0,0 +1,7 @@ +Darkswarm.directive "shopVariantWithUnitPrice", -> + restrict: 'E' + replace: true + templateUrl: 'shop_variant_with_unit_price.html' + scope: + variant: '=' + controller: 'ShopVariantCtrl' diff --git a/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml b/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml new file mode 100644 index 0000000000..4d261d73ed --- /dev/null +++ b/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml @@ -0,0 +1,19 @@ +.variants.row + .small-4.medium-4.large-5.columns.variant-name + .inline{"ng-if" => "::variant.display_name"} {{ ::variant.display_name }} + .variant-unit {{ ::variant.unit_to_display }} + .small-3.medium-3.large-2.columns.variant-price + %price-breakdown{"price-breakdown" => "_", variant: "variant", + "price-breakdown-append-to-body" => "true", + "price-breakdown-placement" => "bottom", + "price-breakdown-animation" => true} + {{ variant.price_with_fees | localizeCurrency }} + .variant-unit-price + %span.question-mark-icon + {{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }} + + .medium-2.large-2.columns.total-price + %span{"ng-class" => "{filled: variant.line_item.total_price}"} + {{ variant.line_item.total_price | localizeCurrency }} + %ng-include{src: "'partials/shop_variant_no_group_buy.html'"} + %ng-include{src: "'partials/shop_variant_with_group_buy.html'"} diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss index bf05fb4829..a008b916ad 100644 --- a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss +++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss @@ -65,6 +65,12 @@ } } + .variant-unit-price { + color: $grey-700; + font-size: 0.9rem; + margin-top: 15px; + } + // Total price .total-price { padding-left: 0rem; diff --git a/app/assets/stylesheets/darkswarm/branding.scss b/app/assets/stylesheets/darkswarm/branding.scss index b29e81acf9..29b52436d8 100644 --- a/app/assets/stylesheets/darkswarm/branding.scss +++ b/app/assets/stylesheets/darkswarm/branding.scss @@ -42,8 +42,10 @@ $black: #000; $white: #fff; $grey-050: #f7f7f7; +$grey-075: #f3f8fc; $grey-100: #e6e6e6; $grey-200: #ddd; +$grey-250: #cfe1f3; $grey-300: #ccc; $grey-400: #bbb; $grey-500: #999; @@ -53,6 +55,8 @@ $grey-650: #666; $grey-700: #555; $grey-800: #333; +$tiny-blue: #80b2e1; + $teal-300: #80d3df; $teal-400: #4cb5c5; $teal-500: #0096ad; diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss new file mode 100644 index 0000000000..e7028a3430 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss @@ -0,0 +1,18 @@ +.question-mark-icon { + position: relative; + top: 1px; + &::before { + content: "?"; + padding-left: 1px; + display: inline-block; + color: $tiny-blue; + border: 1px solid $grey-250; + border-radius: 50%; + text-align: center; + background-color: $grey-075; + width: 18px; + height: 18px; + font-weight: bold; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml index 00255beefc..dcd261e0b2 100644 --- a/app/views/shop/products/_form.html.haml +++ b/app/views/shop/products/_form.html.haml @@ -13,8 +13,10 @@ %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"} = render "shop/products/summary" .shop-variants - %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"} - + - if feature? :unit_price, spree_current_user + %shop-variant-with-unit-price{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"} + - else + %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"} %product{"ng-show" => "Products.loading"} .summary .small-12.columns.text-center