fix customisation btn focus

sora-xor · Mar 20, 2024 · 5e9c62b · 5e9c62b
1 parent 61bb7ef
commit 5e9c62b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/src/components/shared/Widget/Customize.vue b/src/components/shared/Widget/Customize.vue
@@ -2,9 +2,7 @@
   <base-widget v-bind="$attrs" title="Customise page">
     <template #filters>
       <el-popover popper-class="customise-widget-popper" trigger="click" v-model="visible" :visible-arrow="false">
-        <template #reference>
-          <s-icon name="basic-settings-24" size="24px" class="customise-widget-icon" />
-        </template>
+        <s-button slot="reference" type="action" alternative size="small" icon="basic-settings-24" />
 
         <div class="customise">
           <div class="customise-title">Customise page</div>
@@ -39,7 +37,7 @@ export default class CustomiseWidget extends Mixins(TranslationMixin) {
   @PropSync('widgets', { default: ObjectInit, type: Object }) readonly widgetsModel!: WidgetsVisibilityModel;
   @PropSync('options', { default: ObjectInit, type: Object }) readonly optionsModel!: WidgetsVisibilityModel;
 
-  @ModelSync('value', 'input', { type: Boolean }) readonly visible!: boolean;
+  @ModelSync('value', 'input', { type: Boolean }) visible!: boolean;
 
   toggle(name: string, model: WidgetsVisibilityModel, key: string, value: boolean) {
     this[name] = { ...model, [key]: value };

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -1,5 +1,6 @@
 <template>
   <widgets-grid
+    grid-id="swapGrid"
     class="swap-container"
     :draggable="options.edit"
     :resizable="options.edit"
@@ -27,7 +28,7 @@
     <template v-slot:[SwapWidgets.Transactions]="props">
       <swap-transactions-widget v-bind="props" full extensive />
     </template>
-    <template v-slot:[SwapWidgets.Customize]="props">
+    <template v-slot:[SwapWidgets.Customise]="props">
       <customise-widget v-bind="props" :widgets.sync="widgets" :options.sync="options" />
     </template>
   </widgets-grid>
@@ -52,7 +53,7 @@ enum SwapWidgets {
   Chart = 'chart',
   Transactions = 'transactions',
   Distribution = 'distribution',
-  Customize = 'customize',
+  Customise = 'customise',
 }
 
 @Component({
@@ -80,34 +81,34 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   readonly DefaultLayouts: ResponsiveLayouts = {
     lg: [
       { x: 0, y: 0, w: 6, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
-      { x: 0, y: 20, w: 6, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customize },
+      { x: 0, y: 20, w: 6, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
       { x: 0, y: 24, w: 6, h: 4, minW: 4, minH: 4, i: SwapWidgets.Distribution },
       { x: 6, y: 0, w: 9, h: 24, minW: 4, minH: 20, i: SwapWidgets.Chart },
       { x: 15, y: 0, w: 9, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
     ],
     md: [
       { x: 0, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
-      { x: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customize },
+      { x: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
       { x: 0, y: 24, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Distribution },
       { x: 4, y: 0, w: 12, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
       { x: 4, y: 20, w: 8, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
     ],
     sm: [
       { x: 0, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
-      { x: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customize },
+      { x: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
       { x: 0, y: 24, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Distribution },
       { x: 4, y: 0, w: 8, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
       { x: 4, y: 20, w: 8, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
     ],
     xs: [
-      { x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customize },
+      { x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
       { x: 0, y: 4, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
       { x: 4, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
       { x: 0, y: 20, w: 4, h: 12, minW: 4, minH: 12, i: SwapWidgets.Distribution },
       { x: 4, y: 20, w: 4, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
     ],
     xss: [
-      { x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 12, i: SwapWidgets.Customize },
+      { x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 12, i: SwapWidgets.Customise },
       { x: 0, y: 4, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
       { x: 0, y: 20, w: 4, h: 12, minW: 4, minH: 12, i: SwapWidgets.Distribution },
       { x: 0, y: 32, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },