Swipe to reveal action

gistfile1.txt

zefzef

Notifications.vue

<template>
  <Page :actionBarHidden="true">
      <SwipeCell>
        <GridLayout slot="right" columns="auto">
          <FlexboxLayout padding="21 0" backgroundColor="#50C878">
            <SVGImage src="~/assets/images/skeleton/close.svg" margin="20" height="28" width="28" />
          </FlexboxLayout>
        </GridLayout>
        <StackLayout class="notification-bg" v-shadow="2">
          <FlexboxLayout justifyContent="space-between">
            <StackLayout class="notification-text">
              <FlexboxLayout class="notification-reason">
                <Label class="animal-name" text="Jeffrey: " />
                <Label text="It's time to eat !" />
              </FlexboxLayout>
              <FlexboxLayout>
                <SVGImage class="notification-time-icon" src="~/assets/images/skeleton/clock.svg" />
                <Label class="notification-time" text="15 minutes ago" />
              </FlexboxLayout>
            </StackLayout>
            <StackLayout>
              <Image class="animal-picture" src="~/assets/images/skeleton/animal.jpg" />
            </StackLayout>
          </FlexboxLayout>
        </StackLayout>
      </SwipeCell>
  </Page>
</template>

<script>
import SwipeCell from "~/components/skeletons/SwipeCell";

export default {
  data() {
    return {};
  },
  components: {
    SwipeCell
  }
};
</script>

<style lang="scss" scoped>
@import "../colors.scss";

.notification-bg {
  background-color: #f5f5f5;
  min-height: 60;
  width: 95%;
  margin-top: 5;
  border-radius: 5;
  padding: 5;
}
.animal-picture {
  height: 60;
  border-radius: 60%;
  font-weight: lighter;
}
.notification-text {
  margin: 5 0 0 5;
  .notification-time {
    color: $primary;
    margin: 8 0 0 5;
  }
  .notification-time-icon {
    height: 12;
    width: 12;
    margin-top: 8;
  }
  .notification-reason {
    font-weight: bold;
    font-size: 15;
    .animal-name {
      color: $primary;
    }
  }
}

</style>

SwipeCell.vue

<template>
  <GridLayout columns="auto, *, auto">
    <ContentView ref="left" @layoutChanged="measure('left', $event)" v-if="$slots.left"
                 col="0">
      <slot name="left" />
    </ContentView>

    <ContentView ref="right" @layoutChanged="measure('right', $event)"
                 v-if="$slots.right" col="2">
      <slot name="right" />
    </ContentView>

    <ContentView @pan="handlePan" :translateX="currX" colSpan="3">
      <slot />
    </ContentView>
  </GridLayout>
</template>

<script>
  import { screen } from 'tns-core-modules/platform'

  export default {
    data () {
      return {
        prevDeltaX: 0,
        currX: 0,
        left: {
          w: 0
        },
        right: {
          w: 0
        }
      };
    },

    methods: {
      measure(side, args) {
        this[side].w = args.object.getMeasuredWidth() / screen.mainScreen.scale
      },
      handlePan(args) {
        if (args.state === 1) {
          this.prevDeltaX = 0;
        } else if (args.state === 2) {
          this.currX += args.deltaX - this.prevDeltaX;
          if (this.currX < -this.right.w) {
            this.currX = -this.right.w;
          } else if (this.currX > this.left.w) {
            this.currX = this.left.w;
          }

          this.prevDeltaX = args.deltaX;
        } else if (args.state === 3) {
          if (this.currX <= -this.right.w) {
            this.currX = -this.right.w;
          } else if (this.currX >= this.left.w) {
            this.currX = this.left.w;
          } else {
            this.currX = 0
          }
        }
      }
    }
  }
</script>