Merge 09b1cf0 into 08e1696

vuestorefront · Mar 3, 2020 · bf6af67 · bf6af67
2 parents 08e1696 + 09b1cf0
commit bf6af67
Show file tree

Hide file tree

Showing 47 changed files with 740 additions and 782 deletions.
diff --git a/packages/default-theme/components/SwAddressList.vue b/packages/default-theme/components/SwAddressList.vue
@@ -70,20 +70,19 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 .shipping-list {
- margin-bottom: $spacer-extra-big;
+ margin-bottom: var(--spacer-extra-big);
  width: 100%;
  &__address {
  display: flex;
- padding: $spacer-big 0;
- border-top: 1px solid $c-light;
+ padding: var(--spacer-big) 0;
+ border-top: 1px solid var(--c-light);
  }
 }
 .shipping {
  display: flex;
- padding: $spacer-big 0;
- border-top: 1px solid $c-light;
+ padding: var(--spacer-big) 0;
+ border-top: 1px solid var(--c-light);
  
 }
 </style>
diff --git a/packages/default-theme/components/SwBottomNavigation.vue b/packages/default-theme/components/SwBottomNavigation.vue
@@ -2,46 +2,70 @@
  <div class="sw-bottom-navigation">
  <SfBottomNavigation>
  <nuxt-link to="/">
- <SfBottomNavigationItem>
- <SfIcon icon="home" size="20px" />
- </SfBottomNavigationItem>
+ <SfBottomNavigationItem icon="home" icon-size="20px" />
  </nuxt-link>
  <SfBottomNavigationItem class="menu-button">
- <SfIcon icon="menu" size="20px" style="width: 25px" />
- <SfSelect v-model="currentRoute" class="menu-button__select">
- <SfSelectOption v-for="route in routes" :key="route.routeLabel" :value="route">
- <SfProductOption :value="route" :label="route.routeLabel"></SfProductOption>
- </SfSelectOption>
- </SfSelect>
+ <template #icon>
+ <SfIcon icon="menu" size="20px" style="width: 25px" />
+ <SfSelect v-model="currentRoute" class="menu-button__select">
+ <SfSelectOption
+ v-for="route in routes"
+ :key="route.routeLabel"
+ :value="route"
+ >
+ <SfProductOption
+ :value="route"
+ :label="route.routeLabel"
+ ></SfProductOption>
+ </SfSelectOption>
+ </SfSelect>
+ </template>
  </SfBottomNavigationItem>
- <SfBottomNavigationItem>
- <SfIcon icon="profile" @click="userIconClick" size="20px" />
- </SfBottomNavigationItem>
- <SfBottomNavigationItem>
- <SfCircleIcon
- class="sf-bottom-navigation__floating-icon"
- @click="toggleSidebar"
- >
- <SfIcon icon="add_to_cart" size="20px" color="white" />
- </SfCircleIcon>
+ <SfBottomNavigationItem
+ icon="profile"
+ size="20px"
+ @click="userIconClick"
+ />
+ <SfBottomNavigationItem :is-floating="true">
+ <template #icon>
+ <SfCircleIcon @click="toggleSidebar">
+ <SfIcon icon="add_to_cart" size="20px" color="white" />
+ </SfCircleIcon>
+ </template>
  </SfBottomNavigationItem>
  </SfBottomNavigation>
  </div>
 </template>
 
 <script>
-import { SfButton, SfBottomNavigation, SfCircleIcon, SfIcon, SfSelect, SfProductOption } from '@storefront-ui/vue'
-import { useCartSidebar, useNavigation, useUser, useUserLoginModal } from '@shopware-pwa/composables'
+import {
+ SfBottomNavigation,
+ SfCircleIcon,
+ SfIcon,
+ SfSelect,
+ SfProductOption
+} from '@storefront-ui/vue'
+import {
+ useCartSidebar,
+ useNavigation,
+ useUser,
+ useUserLoginModal
+} from '@shopware-pwa/composables'
 import { PAGE_ACCOUNT } from '../helpers/pages'
 
-
 export default {
  name: 'SwBottomNavigation',
- components: { SfButton, SfBottomNavigation, SfIcon, SfCircleIcon, SfSelect, SfProductOption },
+ components: {
+ SfBottomNavigation,
+ SfIcon,
+ SfCircleIcon,
+ SfSelect,
+ SfProductOption
+ },
  data() {
  return {
  navigationElements: [],
- currentRoute: { routeLabel: '', routePath: '/' },
+ currentRoute: { routeLabel: '', routePath: '/' }
  }
  },
  setup() {
@@ -57,19 +81,19 @@ export default {
  toggleModal
  }
  },
+ watch: {
+ currentRoute(nextRoute) {
+ this.$router.push(nextRoute.routeLabel)
+ }
+ },
  methods: {
  userIconClick() {
  if (this.isLoggedIn) {
  this.$router.push(PAGE_ACCOUNT)
- return;
+ return
  }
  this.toggleModal()
  }
- },
- watch: {
- currentRoute(nextRoute) {
- this.$router.push(nextRoute.routeLabel)
- }
  }
 }
 </script>
@@ -84,11 +108,8 @@ export default {
  height: 100%;
  }
 }
- .sf-bottom-navigation {
- z-index: 3;
- }
 
 ::v-deep .sf-select__selected > div:nth-child(1) > div:nth-child(1) {
  display: none;
 }
-</style>
+</style>
diff --git a/packages/default-theme/components/SwCart.vue b/packages/default-theme/components/SwCart.vue
@@ -1,6 +1,7 @@
 <template>
  <div id="cart">
  <SfSidebar
+ title="My cart"
  :visible="isSidebarOpen"
  heading-title="My Cart"
  class="sf-sidebar--right"
@@ -26,7 +27,12 @@
  <SfPrice :regular="totalPrice | price" class="sf-price--big" />
  </template>
  </SfProperty>
- <SfButton class="sf-button--full-width" aria-label="go-to-checkout" @click="goToCheckout()">Go to checkout</SfButton>
+ <SfButton
+ class="sf-button--full-width"
+ aria-label="go-to-checkout"
+ @click="goToCheckout()"
+ >Go to checkout</SfButton
+ >
  </div>
  <div v-else key="empty-cart" class="empty-cart">
  <div class="empty-cart__banner">
@@ -48,8 +54,8 @@
 <script>
 import { SfSidebar, SfButton, SfProperty, SfPrice } from '@storefront-ui/vue'
 import { useCart, useCartSidebar } from '@shopware-pwa/composables'
-import SwCartProduct from './SwCartProduct'
 import { PAGE_CHECKOUT } from '../helpers/pages'
+import SwCartProduct from './SwCartProduct'
 
 export default {
  name: 'Cart',
@@ -80,20 +86,17 @@ export default {
  },
  methods: {
  goToCheckout() {
- this.toggleSidebar();
- return this.$router.push(PAGE_CHECKOUT);
+ this.toggleSidebar()
+ return this.$router.push(PAGE_CHECKOUT)
  }
- },
+ }
 }
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
- @media screen and (min-width: $desktop-min) {
- @content;
- }
-}
+
 #cart {
+ --overlay-z-index: 4;
  box-sizing: border-box;
  @include for-desktop {
  max-width: 1240px;
@@ -105,20 +108,20 @@ export default {
  display: flex;
  flex-direction: column;
  &__total-items {
- font-family: $body-font-family-secondary;
- font-size: $font-size-big-mobile;
- font-weight: $body-font-weight-secondary;
+ font-family: var(--body-font-family-secondary);
+ font-size: var(--font-size-big-mobile);
+ font-weight: var(--body-font-weight-secondary);
  @include for-desktop {
- font-size: $font-size-big-desktop;
+ font-size: var(--font-size-big-desktop);
  }
  }
  &__total-price {
- margin-bottom: $spacer-big;
+ margin-bottom: var(--spacer-big);
  }
 }
 .collected-product-list {
  flex: 1;
- margin: $spacer-big -#{$spacer-big};
+ margin: var(--spacer-big) calc(var(--spacer-big) * -1);
 }
 .empty-cart {
  flex: 1;
@@ -145,17 +148,15 @@ export default {
  text-align: center;
  }
  &__label {
- margin-top: $spacer-extra-big;
- font-size: $font-size-big-desktop;
+ margin-top: var(--spacer-extra-big);
+ font-size: var(--font-size-big-desktop);
  }
  &__description {
- margin-top: $spacer-big;
+ margin-top: var(--spacer-big);
  }
 }
-::v-deep .sf-overlay {
- z-index: 4;
-}
+
 ::v-deep .sf-sidebar__aside {
  z-index: 4;
 }
-</style>
+</style>
diff --git a/packages/default-theme/components/SwCartProduct.vue b/packages/default-theme/components/SwCartProduct.vue
@@ -112,15 +112,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
- @media screen and (min-width: $desktop-min) {
- @content;
- }
-}
+
 .collected-product {
- margin: $spacer-big 0;
+ margin: var(--spacer-big)0;
  &__properties {
- margin-top: $spacer-big;
+ margin-top: var(--spacer-big);
  }
  &__actions {
  opacity: 0;

diff --git a/packages/default-theme/components/SwLogin.vue b/packages/default-theme/components/SwLogin.vue
@@ -94,22 +94,22 @@ export default {
 
 .sw-login {
  &__alert {
- margin-bottom: $spacer-small;
+ margin-bottom: var(--spacer-small);
  }
  &__header {
- margin-bottom: $spacer-big;
+ margin-bottom: var(--spacer-big);
  }
 }
 
 .form {
  &__input {
- margin-bottom: $spacer-extra-big;
+ margin-bottom: var(--spacer-extra-big);
  }
  &__checkbox {
- margin-bottom: $spacer-big;
+ margin-bottom: var(--spacer-big);
  }
  &__button {
- margin-top: $spacer-big;
+ margin-top: var(--spacer-big);
  }
 }
 </style>
diff --git a/packages/default-theme/components/SwProductCard.vue b/packages/default-theme/components/SwProductCard.vue
@@ -8,12 +8,12 @@
  :score-rating="getProductRating"
  :image-width="700"
  :image-height="1000"
- :isOnWishlist="false"
+ :is-on-wishlist="false"
  :link="getRouterLink"
- @click:wishlist="toggleWishlist"
  class="products__product-card"
- :showAddToCartButton="true"
- :isAddedToCart="isInCart"
+ :show-add-to-cart-button="true"
+ :is-added-to-cart="isInCart"
+ @click:wishlist="toggleWishlist"
  @click:add-to-cart="addToCart"
  >
  <template #title="{title}">
@@ -51,15 +51,15 @@ export default {
  isInCart
  }
  },
- data() {
- return {}
- },
  props: {
  product: {
  type: Object,
  default: () => ({})
  }
  },
+ data() {
+ return {}
+ },
  computed: {
  getName() {
  return getProductName({ product: this.product })
@@ -85,8 +85,7 @@ export default {
  },
  getImageUrl() {
  return (
- getProductMainImageUrl(this.product) ||
- require('~/assets/productB.jpg')
+ getProductMainImageUrl(this.product) || require('~/assets/productB.jpg')
  )
  }
  },
@@ -108,18 +107,18 @@ export default {
  text-overflow: ellipsis;
 
  &__title {
- font-family: $body-font-family-secondary;
- font-size: $font-size-regular-mobile;
+ font-family: var(--body-font-family-secondary);
+ font-size: var(--font-size-regular-mobile);
  font-weight: 300;
  line-height: 1.6;
- margin: $spacer-small 0;
- @media (min-width: $desktop-min) {
- margin: $spacer 0 $spacer-small;
- font-size: $font-size-regular-desktop;
+ margin: var(--spacer-small) 0;
+ @include for-desktop {
+ margin: var(--spacer) 0 var(--spacer-small);
+ font-size: var(--font-size-regular-desktop);
  }
  &:hover {
  cursor: pointer;
- color: $c_gray;
+ color: var(--c-gray);
  }
  }
 }