improve resize styles & flat widget prop

sora-xor · Mar 26, 2024 · c730b39 · c730b39
1 parent 4198d6c
commit c730b39
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 13 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -98,15 +98,16 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   showNotifsDarkPage = false;
   responsiveClass = BreakpointClass.LargeDesktop;
 
-  @state.settings.appConnection appConnection!: NodesConnection;
+  @state.settings.appConnection private appConnection!: NodesConnection;
   @state.settings.browserNotifPopupVisibility private browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
-  @state.wallet.account.assetsToNotifyQueue assetsToNotifyQueue!: Array<WhitelistArrayItem>;
-  @state.referrals.storageReferrer storageReferrer!: string;
+  @state.wallet.account.assetsToNotifyQueue private assetsToNotifyQueue!: Array<WhitelistArrayItem>;
+  @state.referrals.storageReferrer private storageReferrer!: string;
   @state.settings.disclaimerVisibility disclaimerVisibility!: boolean;
   @state.router.loading pageLoading!: boolean;
 
-  @getter.wallet.transactions.firstReadyTx firstReadyTransaction!: Nullable<HistoryItem>;
+  @getter.settings.nodeIsConnected nodeIsConnected!: boolean;
+  @getter.wallet.transactions.firstReadyTx private firstReadyTransaction!: Nullable<HistoryItem>;
   @getter.wallet.account.isLoggedIn isSoraAccountConnected!: boolean;
   @getter.libraryTheme libraryTheme!: Theme;
   @getter.libraryDesignSystem libraryDesignSystem!: DesignSystem;

diff --git a/src/components/shared/Widget/Base.vue b/src/components/shared/Widget/Base.vue
@@ -1,11 +1,10 @@
 <template>
   <s-card
     ref="container"
-    border-radius="small"
-    shadow="always"
     size="big"
     primary
-    :class="['base-widget', { delimeter, full }]"
+    :shadow="shadow"
+    :class="['base-widget', { delimeter, full, flat }]"
     v-loading="loading"
   >
     <template #header v-if="hasHeader">
@@ -72,6 +71,10 @@ export default class BaseWidget extends Vue {
    * The widget content has a full width
    */
   @Prop({ default: false, type: Boolean }) readonly extensive!: boolean;
+  /**
+   * The widget looks like rectangle without shadow
+   */
+  @Prop({ default: false, type: Boolean }) readonly flat!: boolean;
   /**
    * Widget has a loading state
    */
@@ -98,6 +101,10 @@ export default class BaseWidget extends Vue {
     return !!this.$slots.default;
   }
 
+  get shadow(): string | undefined {
+    return this.flat ? 'never' : 'always';
+  }
+
   mounted(): void {
     this.createContentObserver();
     this.updateSize(this.getWidgetSize()); // initial
@@ -183,6 +190,7 @@ $left: $inner-spacing-medium;
   flex-flow: column nowrap;
   align-items: normal;
   overflow: hidden;
+  border: 1px solid transparent;
 
   &.full {
     width: 100%;
@@ -191,6 +199,14 @@ $left: $inner-spacing-medium;
     flex: 1;
   }
 
+  &.flat {
+    border-color: var(--s-color-base-border-secondary);
+
+    &.s-border-radius-small {
+      border-radius: unset;
+    }
+  }
+
   &-block {
     display: flex;
     align-items: center;

diff --git a/src/components/shared/Widget/Grid.vue b/src/components/shared/Widget/Grid.vue
@@ -23,6 +23,7 @@
         :name="widget.i"
         v-bind="{
           id: widget.i,
+          flat,
           loading,
           onResize,
           reset,
@@ -116,10 +117,12 @@ export default class WidgetsGrid extends Vue {
   @Prop({ default: false, type: Boolean }) readonly resizable!: boolean;
   @Prop({ default: false, type: Boolean }) readonly compact!: boolean;
   @Prop({ default: false, type: Boolean }) readonly lines!: boolean;
-  @Prop({ default: false, type: Boolean }) readonly loading!: boolean;
   @Prop({ default: () => DEFAULT_COLS, type: Object }) readonly cols!: LayoutConfig;
   @Prop({ default: () => DEFAULT_BREAKPOINTS, type: Object }) readonly breakpoints!: LayoutConfig;
 
+  @Prop({ default: false, type: Boolean }) readonly loading!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly flat!: boolean;
+
   /** Widgets visibility by widget ID */
   @Prop({ default: () => ({}), type: Object }) readonly value!: WidgetsVisibilityModel;
   /** Update layouts depends on widgets visibility */
@@ -306,9 +309,33 @@ export default class WidgetsGrid extends Vue {
 $line: var(--s-color-base-border-secondary);
 
 .widgets-grid {
-  .vue-grid-item.vue-grid-placeholder {
-    background: var(--s-color-status-success-background);
-    opacity: 0.5;
+  .vue-grid-item {
+    &.vue-grid-placeholder {
+      background: var(--s-color-theme-accent-hover);
+      opacity: 0.5;
+    }
+    &.vue-resizable {
+      &:hover {
+        .base-widget {
+          border-color: var(--s-color-theme-accent-focused);
+        }
+      }
+
+      .base-widget {
+        border-bottom-right-radius: 0px;
+      }
+
+      &.resizing {
+        opacity: 1;
+      }
+
+      & > .vue-resizable-handle {
+        width: 23px;
+        height: 27px;
+        padding: 0;
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyNyIgdmlld0JveD0iMCAwIDIzIDI3IiBmaWxsPSJub25lIj4KPHBhdGggb3BhY2l0eT0iMC40IiBkPSJNMjIuMjAyNSAwLjI0NTExN0wwLjY5NjI4OSAyNi4xODU1SDIyLjIwMjVWMC4yNDUxMTdaIiBmaWxsPSIjRjgwODdCIi8+Cjwvc3ZnPg==');
+      }
+    }
   }
 
   .grid-lines {

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -5,6 +5,7 @@
     :draggable="options.edit"
     :resizable="options.edit"
     :lines="options.edit"
+    :flat="options.flat"
     :loading="parentLoading"
     :default-layouts="DefaultLayouts"
     v-model="widgets"
@@ -22,13 +23,19 @@
       />
     </template>
     <template v-slot:[SwapWidgets.Distribution]="props">
-      <swap-distribution-widget v-bind="props" />
+      <swap-distribution-widget v-bind="props" full />
     </template>
     <template v-slot:[SwapWidgets.Transactions]="props">
       <swap-transactions-widget v-bind="props" full extensive />
     </template>
     <template v-slot:[SwapWidgets.Customise]="{ reset, ...props }">
-      <customise-widget v-bind="props" :widgets-model.sync="widgets" :options-model.sync="options" :labels="labels">
+      <customise-widget
+        v-bind="props"
+        :widgets-model.sync="widgets"
+        :options-model.sync="options"
+        :labels="labels"
+        full
+      >
         <s-button @click="reset">{{ t('resetText') }}</s-button>
       </customise-widget>
     </template>
@@ -139,6 +146,7 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
 
   options = {
     edit: false,
+    flat: true,
   };
 
   widgets: WidgetsVisibilityModel = {