Skip to content

Commit

Permalink
add CustomiseWidget
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nikita-Polyakov
Nikita-Polyakov committed Mar 20, 2024
1 parent 00a7529 commit 61bb7ef
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 68 deletions.
16 changes: 13 additions & 3 deletions src/components/shared/Widget/Base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
v-loading="loading"
>
<template #header v-if="hasHeader">
<div class="base-widget-block base-widget-header">
<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>
Expand All @@ -29,7 +29,7 @@
</div>
</template>

<div :class="['base-widget-content', { extensive }]" ref="content">
<div v-if="hasContent" :class="['base-widget-content', { extensive }]" ref="content">
<slot />
</div>
</s-card>
Expand Down Expand Up @@ -93,6 +93,10 @@ export default class BaseWidget extends Vue {
return !!this.title || !!this.$slots.title;
}
get hasContent(): boolean {
return !!this.$slots.default;
}
mounted(): void {
this.createContentObserver();
this.updateRect(this.getClientRect()); // initial
Expand All @@ -103,6 +107,8 @@ export default class BaseWidget extends Vue {
}
private createContentObserver(): void {
if (!this.hasContent) return;
this.observer = new ResizeObserver(this.handleContentResize);
this.observer.observe(this.content);
}
Expand Down Expand Up @@ -182,7 +188,11 @@ $left: $inner-spacing-medium;
&-header {
flex-flow: row wrap;
justify-content: space-between;
padding: $top $left $between;
padding: $top $left;
&.with-content {
padding-bottom: $between;
}
}
&-title {
Expand Down
87 changes: 87 additions & 0 deletions src/components/shared/Widget/Customize.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>
<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>

<div class="customise">
<div class="customise-title">Customise page</div>

<div v-for="(model, name) in { widgetsModel, optionsModel }" :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)" />
<span>{{ key }}</span>
</label>
</div>
</div>
</el-popover>
</template>
</base-widget>
</template>

<script lang="ts">
import { Component, Mixins, ModelSync, PropSync } 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';
@Component({
components: {
BaseWidget: lazyComponent(Components.BaseWidget),
},
})
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;
toggle(name: string, model: WidgetsVisibilityModel, key: string, value: boolean) {
this[name] = { ...model, [key]: value };
}
}
</script>

<style lang="scss">
.customise-widget-popper.el-popover.el-popper {
@include popper-content;
}
</style>

<style lang="scss" scoped>
.customise-widget-icon {
@include icon-styles(true);
}
.customise {
display: flex;
flex-flow: column nowrap;
gap: $inner-spacing-medium;
@include vertical-divider('el-divider', 0);
&-title {
font-size: var(--s-font-size-small);
font-weight: 500;
}
&-options {
display: flex;
flex-flow: column nowrap;
gap: $inner-spacing-medium;
}
&-option {
cursor: pointer;
display: flex;
flex-flow: row nowrap;
gap: $inner-spacing-small;
text-transform: capitalize;
}
}
</style>
1 change: 1 addition & 0 deletions src/consts/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ export enum Components {
BaseWidget = 'shared/Widget/Base',
WidgetsGrid = 'shared/Widget/Grid',
// Shared Widgets Components
CustomiseWidget = 'shared/Widget/Customize',
IFrameWidget = 'shared/Widget/IFrame',
PriceChartWidget = 'shared/Widget/PriceChart',
// Shared Buttons
Expand Down
117 changes: 52 additions & 65 deletions src/views/Swap.vue
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,36 @@
<template>
<div class="s-flex" style="flex-flow: column; height: 100%">
<div class="controls s-flex" style="gap: 16px; justify-content: space-between; flex-flow: row wrap">
<div class="s-flex">
<s-checkbox v-model="draggable" label="Draggable" />
<s-checkbox v-model="resizable" label="Resizable" />
<s-checkbox v-model="compact" label="Compact" />
<s-checkbox v-model="lines" label="Show grid" />
</div>
<div class="s-flex">
<s-checkbox
v-for="(value, key) in widgets"
:key="key"
:label="key"
:value="value"
@input="toggleWidget(key, $event)"
/>
</div>
</div>
<widgets-grid
grid-id="swapGrid"
class="swap-container"
:draggable="draggable"
:resizable="resizable"
:compact="compact"
:lines="lines"
:loading="parentLoading"
:default-layouts="DefaultLayouts"
v-model="widgets"
>
<template v-slot:[SwapWidgets.Form]="props">
<swap-form-widget v-bind="props" primary-title />
</template>
<template v-slot:[SwapWidgets.Chart]="props">
<swap-chart-widget
v-bind="props"
:base-asset="tokenFrom"
:quote-asset="tokenTo"
:is-available="isAvailable"
full
/>
</template>
<template v-slot:[SwapWidgets.Distribution]="props">
<swap-distribution-widget v-bind="props" />
</template>
<template v-slot:[SwapWidgets.Transactions]="props">
<swap-transactions-widget v-bind="props" full extensive />
</template>
</widgets-grid>
</div>
<widgets-grid
class="swap-container"
:draggable="options.edit"
:resizable="options.edit"
:lines="options.edit"
:compact="options.compact"
:loading="parentLoading"
:default-layouts="DefaultLayouts"
v-model="widgets"
>
<template v-slot:[SwapWidgets.Form]="props">
<swap-form-widget v-bind="props" primary-title />
</template>
<template v-slot:[SwapWidgets.Chart]="props">
<swap-chart-widget
v-bind="props"
:base-asset="tokenFrom"
:quote-asset="tokenTo"
:is-available="isAvailable"
full
/>
</template>
<template v-slot:[SwapWidgets.Distribution]="props">
<swap-distribution-widget v-bind="props" />
</template>
<template v-slot:[SwapWidgets.Transactions]="props">
<swap-transactions-widget v-bind="props" full extensive />
</template>
<template v-slot:[SwapWidgets.Customize]="props">
<customise-widget v-bind="props" :widgets.sync="widgets" :options.sync="options" />
</template>
</widgets-grid>
</template>

<script lang="ts">
Expand All @@ -69,6 +52,7 @@ enum SwapWidgets {
Chart = 'chart',
Transactions = 'transactions',
Distribution = 'distribution',
Customize = 'customize',
}
@Component({
Expand All @@ -77,6 +61,7 @@ enum SwapWidgets {
SwapChartWidget: lazyComponent(Components.PriceChartWidget),
SwapTransactionsWidget: lazyComponent(Components.SwapTransactionsWidget),
SwapDistributionWidget: lazyComponent(Components.SwapDistributionWidget),
CustomiseWidget: lazyComponent(Components.CustomiseWidget),
WidgetsGrid: lazyComponent(Components.WidgetsGrid),
},
})
Expand All @@ -91,55 +76,57 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
@action.swap.setTokenToAddress private setTokenToAddress!: (address?: string) => Promise<void>;
readonly SwapWidgets = SwapWidgets;
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: 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 },
{ x: 6, y: 24, w: 6, h: 6, minW: 4, minH: 6, i: SwapWidgets.Distribution },
],
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: 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: 0, y: 20, w: 4, h: 6, minW: 4, minH: 6, i: SwapWidgets.Distribution },
{ 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: 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: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Distribution },
{ x: 4, y: 20, w: 8, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
],
xs: [
{ x: 0, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
{ x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customize },
{ 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: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
{ x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 12, i: SwapWidgets.Customize },
{ 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 },
{ x: 0, y: 52, w: 4, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
],
};
draggable = false;
resizable = false;
compact = false;
lines = false;
options = {
edit: false,
compact: false,
};
widgets: WidgetsVisibilityModel = {
[SwapWidgets.Form]: true,
[SwapWidgets.Chart]: false,
[SwapWidgets.Distribution]: false,
[SwapWidgets.Transactions]: false,
[SwapWidgets.Chart]: true,
[SwapWidgets.Distribution]: true,
[SwapWidgets.Transactions]: true,
};
toggleWidget(key: string, flag: boolean) {
this.widgets = { ...this.widgets, [key]: flag };
}
@Watch('tokenFrom')
@Watch('tokenTo')
private updateRouteTokensParams() {
Expand Down

0 comments on commit 61bb7ef

Please sign in to comment.