Merge remote-tracking branch 'origin/develop' into feature/swap-layout

src/components/App/Footer/StatisticsDialog.vue

@@ -13,12 +13,12 @@
 import { components, mixins, WALLET_CONSTS, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
 
-import { getIndexerName } from '@/components/App/Footer/Indexer/utils';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components } from '@/consts';
 import { lazyComponent } from '@/router';
 import { action, state, mutation } from '@/store/decorators';
 import { Indexer } from '@/types/indexers';
+import { capitalize } from '@/utils';
 
 const IndexerListView = 'IndexerListView';
 const IndexerInfoView = 'IndexerInfoView';
@@ -47,7 +47,7 @@ export default class SelectIndexerDialog extends Mixins(TranslationMixin, mixins
     return Object.keys(WALLET_CONSTS.IndexerType).map((key) => {
       const type = WALLET_CONSTS.IndexerType[key];
       return {
-        name: getIndexerName(type),
+        name: capitalize(type),
         type,
         endpoint: this.indexersData[type].endpoint,
         online: this.indexersData[type].status === WALLET_TYPES.ConnectionStatus.Available,

src/components/App/Menu/AppMenu.vue

@@ -201,9 +201,13 @@ export default class AppMenu extends Mixins(TranslationMixin) {
   @include scrollbar(0, 100%, true);
 }
 
+.app-menu {
+  background: var(--s-color-utility-body);
+}
+
 .app-menu.collapsed {
   @include tablet {
-    background: var(--s-color-utility-body);
+    background: transparent;
 
     .sidebar-item-content {
       & > .icon-container + span {
@@ -217,6 +221,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
 
     &:hover,
     &:focus {
+      background: var(--s-color-utility-body);
       box-shadow: 20px 20px 60px 0px #0000001a;
 
       .sidebar-item-content {

src/components/mixins/ChartSpecMixin.ts

@@ -4,6 +4,7 @@ import { Component, Mixins } from 'vue-property-decorator';
 
 import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { capitalize } from '@/utils';
 
 const LABEL_PADDING = 4;
 const AXIS_OFFSET = 8;
@@ -42,7 +43,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
           const formatted = this.formatDate(+value, timeFormat);
 
           if (isNewMonth) {
-            return `{monthStyle|${formatted.charAt(0).toUpperCase() + formatted.slice(1)}}`;
+            return `{monthStyle|${capitalize(formatted)}}`;
           }
           if (isNewDay) {
             return `{dateStyle|${formatted}}`;

src/components/pages/Swap/StatusActionBadge.vue

@@ -15,7 +15,7 @@ export default class SwapStatusActionBadge extends Vue {}
 
 <style lang="scss">
 .status-action-badge.s-card.neumorphic.s-size-small {
-  padding: $inner-spacing-tiny $inner-spacing-big * 2 $inner-spacing-tiny $inner-spacing-small;
+  padding: $inner-spacing-tiny * 1.75 $inner-spacing-big * 2 $inner-spacing-tiny * 1.75 $inner-spacing-small;
 }
 </style>
 

src/components/shared/Settings/SlippageTolerance.vue

@@ -221,6 +221,7 @@ export default class SlippageTolerance extends Mixins(mixins.NumberFormatterMixi
 
   .el-collapse-item__content {
     padding: 0 !important;
+    line-height: inherit;
   }
 
   .el-collapse--item .is-active .el-collapse {

src/components/shared/TokensRow.vue

@@ -46,13 +46,17 @@ export default class TokensRow extends Vue {
 
   &__item {
     display: block;
-    border-width: 2px;
     border-style: solid;
     border-color: transparent;
     border-radius: 50%;
+    border-width: 0px;
 
     &.border {
       border-color: var(--s-color-utility-surface);
+
+      & + & {
+        border-left-width: 2px;
+      }
     }
 
     & + & {

src/components/shared/Widget/Base.vue

@@ -11,7 +11,7 @@
       <div :class="['base-widget-block', 'base-widget-header', { 'with-content': hasContent }]">
         <div :class="['base-widget-block', 'base-widget-title', { primary: primaryTitle }]">
           <slot name="title">
-            <span v-if="title">{{ title }}</span>
+            <span v-if="title">{{ capitalize(title) }}</span>
             <s-tooltip v-if="tooltip" border-radius="mini" :content="tooltip">
               <s-icon name="info-16" size="14px" />
             </s-tooltip>
@@ -39,7 +39,7 @@ import isEqual from 'lodash/fp/isEqual';
 import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
 
 import type { Size } from '@/types/layout';
-import { debouncedInputHandler } from '@/utils';
+import { debouncedInputHandler, capitalize } from '@/utils';
 
 @Component
 export default class BaseWidget extends Vue {
@@ -93,6 +93,8 @@ export default class BaseWidget extends Vue {
     height: 0,
   };
 
+  public capitalize = capitalize;
+
   get hasHeader(): boolean {
     return !!this.title || !!this.$slots.title;
   }
@@ -230,7 +232,8 @@ $left: $inner-spacing-medium;
     font-size: var(--s-font-size-medium);
     font-weight: 500;
     line-height: var(--s-line-height-medium);
-    text-transform: capitalize;
+
+    min-height: var(--s-size-small);
 
     &.primary {
       font-size: var(--s-font-size-large);

src/components/shared/Widget/Customise.vue

@@ -1,13 +1,20 @@
 <template>
-  <base-widget v-bind="$attrs" :title="t('customisePageText')">
+  <base-widget
+    v-bind="$attrs"
+    :title="t('customisePageText')"
+    class="customise-widget"
+    @click.native.stop="toggleVisibility"
+  >
     <template #filters>
       <el-popover popper-class="customise-widget-popper" trigger="click" v-model="visible" :visible-arrow="false">
-        <s-button slot="reference" type="action" alternative size="small" icon="basic-settings-24" />
+        <template #reference>
+          <s-button id="customise-button" type="action" alternative size="small" icon="basic-settings-24" />
+        </template>
 
         <div class="customise">
           <div class="customise-title">{{ t('customisePageText') }}</div>
 
-          <div v-for="(model, name) in { widgets, options }" :key="name" class="customise-options">
+          <div v-for="(model, name) in models" :key="name" class="customise-options">
             <s-divider />
             <label v-for="(value, key) in model" :key="key" class="customise-option">
               <s-switch :value="value" @input="toggle(name, model, key, $event)" />
@@ -23,12 +30,14 @@
 </template>
 
 <script lang="ts">
+import isEmpty from 'lodash/fp/isEmpty';
 import { Component, Mixins, ModelSync, PropSync, Prop } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components, ObjectInit } from '@/consts';
 import { lazyComponent } from '@/router';
 import type { WidgetsVisibilityModel } from '@/types/layout';
+import { capitalize } from '@/utils';
 
 @Component({
   components: {
@@ -42,14 +51,29 @@ export default class CustomiseWidget extends Mixins(TranslationMixin) {
 
   @ModelSync('value', 'input', { type: Boolean }) visible!: boolean;
 
+  get models(): Record<string, WidgetsVisibilityModel> {
+    const { widgets, options } = this;
+    return Object.entries({ widgets, options }).reduce((acc, [name, model]) => {
+      if (isEmpty(model)) return acc;
+      return { ...acc, [name]: model };
+    }, {});
+  }
+
   toggle(name: string, model: WidgetsVisibilityModel, key: string, value: boolean): void {
     this[name] = { ...model, [key]: value };
   }
 
   getLabel(key: string, name: string): string {
-    if (key in this.labels) return this.labels[key];
+    const label = key in this.labels ? this.labels[key] : this.t(`${name}.${key}`);
 
-    return this.t(`${name}.${key}`);
+    return capitalize(label);
+  }
+
+  toggleVisibility(event: PointerEvent): void {
+    const target = event.target as HTMLElement;
+    if (target.closest('#customise-button')) return;
+
+    this.visible = !this.visible;
   }
 }
 </script>
@@ -61,8 +85,12 @@ export default class CustomiseWidget extends Mixins(TranslationMixin) {
 </style>
 
 <style lang="scss" scoped>
-.customise-widget-icon {
-  @include icon-styles(true);
+.customise-widget {
+  cursor: pointer;
+
+  &-icon {
+    @include icon-styles(true);
+  }
 }
 
 .customise {

src/components/shared/Widget/Grid.vue

@@ -62,7 +62,7 @@ const DEFAULT_BREAKPOINTS: LayoutConfig = {
 
 const DEFAULT_COLS: LayoutConfig = {
   [BreakpointKey.lg]: 24, // 2092
-  [BreakpointKey.md]: 16, // 1440
+  [BreakpointKey.md]: 15, // 1440
   [BreakpointKey.sm]: 12, // 1024
   [BreakpointKey.xs]: 8, // 900
   [BreakpointKey.xss]: 4,

src/components/shared/Widget/PriceChart.vue

@@ -9,6 +9,7 @@
       <s-button
         v-if="isTokensPair && !isOrderBook"
         :class="{ 's-pressed': isReversedChart }"
+        size="small"
         type="action"
         alternative
         icon="arrows-swap-90-24"
@@ -451,7 +452,7 @@ export default class PriceChartWidget extends Mixins(
 
   get chartSpec() {
     // [TODO]: until we haven't two tokens volume
-    const withVolume = this.isOrderBook || (!!this.tokenA && !this.tokenB);
+    const withVolume = this.entities.length === 1;
 
     const priceGrid = this.gridSpec({
       top: 20,

src/consts/index.ts

@@ -253,9 +253,9 @@ export enum Components {
   BaseWidget = 'shared/Widget/Base',
   WidgetsGrid = 'shared/Widget/Grid',
   // Shared Widgets Components
-  CustomiseWidget = 'shared/Widget/Customise',
   IFrameWidget = 'shared/Widget/IFrame',
   PriceChartWidget = 'shared/Widget/PriceChart',
+  CustomiseWidget = 'shared/Widget/Customise',
   // Shared Buttons
   SortButton = 'shared/Button/SortButton',
   SvgIconButton = 'shared/Button/SvgIconButton/SvgIconButton',

src/lang/cs.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Cena za 1 {token}"
     },
-    "calculatingText": "Vypočítávání"
+    "calculatingText": "Vypočítávání",
+    "customisePageText": "Přizpůsobit stránku",
+    "priceChartText": "Cenový graf"
 }

src/lang/de.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Preis pro 1 {token}"
     },
-    "calculatingText": "Berechnung"
+    "calculatingText": "Berechnung",
+    "customisePageText": "Seite anpassen",
+    "priceChartText": "Preisdiagramm"
 }

src/lang/en.json

@@ -1559,10 +1559,10 @@
         "pricePerToken": "Price per 1 {token}"
     },
     "calculatingText": "Calculating",
-    "customisePageText": "Customise page",
+    "customisePageText": "Customize page",
+    "priceChartText": "Price chart",
     "editText": "Edit",
     "resetText": "Reset",
-    "priceChartText": "{symbol} Price chart",
     "options": {
         "edit": "@:editText"
     }

src/lang/es.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Precio por 1 {token}"
     },
-    "calculatingText": "Calculando"
+    "calculatingText": "Calculando",
+    "customisePageText": "Personalizar página",
+    "priceChartText": "Gráfico de precios"
 }

src/lang/fr.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Prix par 1 {token}"
     },
-    "calculatingText": "Calculant"
+    "calculatingText": "Calculant",
+    "customisePageText": "Personnaliser la page",
+    "priceChartText": "Tableau des prix"
 }

src/lang/hr.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Cijena za 1 {token}"
     },
-    "calculatingText": "Izračunavanje"
+    "calculatingText": "Izračunavanje",
+    "customisePageText": "Prilagodite stranicu",
+    "priceChartText": "Grafikon cijena"
 }

src/lang/hu.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "1 {token} ár"
     },
-    "calculatingText": "Számítás"
+    "calculatingText": "Számítás",
+    "customisePageText": "Az oldal testreszabása",
+    "priceChartText": "Ártáblázat"
 }

src/lang/hy.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Գինը 1 {token} ի համար"
     },
-    "calculatingText": "Հաշվարկում"
+    "calculatingText": "Հաշվարկում",
+    "customisePageText": "Անհատականացրեք էջը",
+    "priceChartText": "Գնային շրջանագիծ"
 }

src/lang/id.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Harga per 1 {token}"
     },
-    "calculatingText": "Menghitung"
+    "calculatingText": "Menghitung",
+    "customisePageText": "Sesuaikan halaman",
+    "priceChartText": "Grafik harga"
 }

src/lang/it.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Prezzo per 1 {token}"
     },
-    "calculatingText": "Calcolando"
+    "calculatingText": "Calcolando",
+    "customisePageText": "Personalizza la pagina",
+    "priceChartText": "Grafico dei prezzi"
 }

src/lang/nl.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Prijs per 1 {token}"
     },
-    "calculatingText": "Berekenen"
+    "calculatingText": "Berekenen",
+    "customisePageText": "Pagina aanpassen",
+    "priceChartText": "Prijs grafiek"
 }

src/lang/no.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Pris per 1 {token}"
     },
-    "calculatingText": "Beregner"
+    "calculatingText": "Beregner",
+    "customisePageText": "Tilpass siden",
+    "priceChartText": "Prisdiagram"
 }

src/lang/pl.json

@@ -1558,5 +1558,7 @@
         },
         "pricePerToken": "Cena za 1 {token}"
     },
-    "calculatingText": "Obliczanie"
+    "calculatingText": "Obliczanie",
+    "customisePageText": "Dostosuj stronę",
+    "priceChartText": "Wykres cen"
 }