Merge pull request #120 from enkryptcom/ui/nft-detail-update

UI/nft detail update

Author: kvhnuke

packages/extension/src/ui/action/components/base-search/index.vue

@@ -59,7 +59,7 @@ const textValue = computed({
 @import "~@action/styles/theme.less";
 
 .app-search {
-  background: @gray01;
+  background: transparent;
   border-radius: 10px;
   margin: 17px 0 8px 0;
   height: 40px;
@@ -68,9 +68,10 @@ const textValue = computed({
   padding-left: 40px;
   padding-right: 40px;
   box-sizing: border-box;
+  border: 1px solid @gray02;
 
   &.border {
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid @gray02 !important;
     box-shadow: none !important;
     margin: 0;
     background: @white;
@@ -80,6 +81,7 @@ const textValue = computed({
     background: @white;
     box-shadow: 0px 0.25px 1px rgba(0, 0, 0, 0.039),
       0px 0.85px 3px rgba(0, 0, 0, 0.19);
+    border-color: @white;
   }
 
   &__icon {
@@ -94,7 +96,7 @@ const textValue = computed({
     font-style: normal;
     font-weight: normal;
     font-size: 14px;
-    line-height: 40px;
+    line-height: 38px;
     letter-spacing: 0.25px;
     background: none;
     color: @primaryLabel;
@@ -103,6 +105,10 @@ const textValue = computed({
     &.border {
       line-height: 38px;
     }
+
+    &::placeholder {
+      color: @tertiaryLabel;
+    }
   }
 
   &__clear {

packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="network-nfts__item" @mouseleave="closeMoreMenu">
-    <a class="network-nfts__item-image" @click="toggleDetail">
+    <a class="network-nfts__item-image" @click="detailClicked">
       <img :src="item.image" alt="" @error="imageLoadError" />
       <div class="network-nfts__item-name">{{ item.name }}</div>
     </a>
@@ -17,13 +17,6 @@
       @update:hide-me="toggleMoreMenu"
       @mouseleave="toggleMoreMenu"
     />
-
-    <nft-detail-view
-      v-if="isDetail"
-      :item="item"
-      :link-action="openLink"
-      @close:popup="toggleDetail"
-    />
   </div>
 </template>
 
@@ -32,13 +25,11 @@ import { ref } from "vue";
 import { NFTItem } from "@/types/nft";
 import { PropType } from "vue";
 import NetworkNftsItemMoreMenu from "./network-nfts-item-more-menu.vue";
-import NftDetailView from "@action/views/nft-detail-view/index.vue";
 const notfoundimg = require("@action/assets/common/not-found.jpg");
 const imageLoadError = (img: any) => {
   img.target.src = notfoundimg;
 };
 const isOpenMore = ref(false);
-const isDetail = ref(false);
 const props = defineProps({
   item: {
     type: Object as PropType<NFTItem>,
@@ -59,18 +50,18 @@ const props = defineProps({
     },
   },
 });
+const emit = defineEmits<{
+  (e: "update:toggleDetail", item: NFTItem | null): void;
+}>();
+const detailClicked = () => {
+  emit("update:toggleDetail", props.item);
+};
 const toggleMoreMenu = () => {
   isOpenMore.value = !isOpenMore.value;
 };
 const closeMoreMenu = () => {
   isOpenMore.value = false;
 };
-const toggleDetail = () => {
-  isDetail.value = !isDetail.value;
-};
-const openLink = () => {
-  window.open(props.item.url, "_blank");
-};
 </script>
 
 <style lang="less">

packages/extension/src/ui/action/views/network-nfts/index.vue

@@ -11,19 +11,22 @@
           :favorites="favoriteNFTs"
           @update:fav-clicked="favClicked"
           @update:hide-clicked="hideClicked"
+          @update:toggle-detail="toggleDetail"
         />
         <network-nfts-category
           v-for="(item, index) in NFTs"
           :key="index"
           :collection="item"
           @update:fav-clicked="favClicked"
           @update:hide-clicked="hideClicked"
+          @update:toggle-detail="toggleDetail"
         />
         <network-nfts-hidden
           v-if="hiddenNFTs.length"
           :hiddens="hiddenNFTs"
           @update:fav-clicked="favClicked"
           @update:hide-clicked="hideClicked"
+          @update:toggle-detail="toggleDetail"
         />
       </div>
     </custom-scrollbar>
@@ -32,6 +35,17 @@
       v-if="!NFTs.length && !favoriteNFTs.length && !hiddenNFTs.length"
       :is-empty="isNoNFTs"
     />
+
+    <nft-detail-view
+      v-if="!!detailNFT"
+      :item="detailNFT"
+      :is-favorite="isFavorite"
+      :link-action="openLink"
+      v-bind="$attrs"
+      @close:popup="toggleDetail(null)"
+      @update:fav-clicked="favClicked"
+      @update:hide-clicked="hideClicked"
+    />
   </div>
 </template>
 
@@ -42,12 +56,13 @@ import NetworkNftsCategory from "./components/network-nfts-category.vue";
 import NetworkNftsFavorite from "./components/network-nfts-favorite.vue";
 import NetworkNftsHidden from "./components/network-nfts-hidden.vue";
 import NetworkNftsEmpty from "./components/network-nfts-empty.vue";
-import { onMounted, PropType, ref, watch } from "vue";
+import { onMounted, PropType, ref, watch, computed } from "vue";
 import { NodeType } from "@/types/provider";
 import { AccountsHeaderData } from "../../types/account";
 import { NFTCollection, NFTItem } from "@/types/nft";
 import NFTState from "@/libs/nft-state";
 import scrollSettings from "@/libs/utils/scroll-settings";
+import NftDetailView from "@action/views/nft-detail-view/index.vue";
 
 const nftState = new NFTState();
 const props = defineProps({
@@ -64,6 +79,7 @@ const NFTs = ref<NFTCollection[]>([]);
 const favoriteNFTs = ref<NFTItem[]>([]);
 const hiddenNFTs = ref<NFTItem[]>([]);
 const liveNFTCollection = ref<NFTCollection[]>([]);
+const detailNFT = ref<NFTItem | null>(null);
 const isNoNFTs = ref(false);
 
 watch([props.accountInfo, props.network], () => {
@@ -137,6 +153,19 @@ const hideClicked = async (isHidden: boolean, item: NFTItem) => {
   }
   localUpdate();
 };
+const toggleDetail = (item: NFTItem | null) => {
+  detailNFT.value = item;
+};
+const openLink = () => {
+  if (detailNFT.value) window.open(detailNFT.value.url, "_blank");
+};
+const isFavorite = computed(() => {
+  if (detailNFT.value && favoriteNFTs.value.length) {
+    return favoriteNFTs.value.includes(detailNFT.value);
+  }
+
+  return false;
+});
 </script>
 
 <style lang="less" scoped>

packages/extension/src/ui/action/views/nft-detail-view/index.vue

@@ -6,6 +6,18 @@
         <close-icon />
       </a>
 
+      <a class="nft-detail-view__favorite" @click="favClicked(!isFavorite)">
+        <nft-more-add-to-favorite v-if="!isFavorite" />
+        <nft-more-delete-from-favorite v-else />
+      </a>
+
+      <notification
+        v-if="isFavoriteAction"
+        :hide="toggleNotification"
+        :text="isFavorite ? 'Added to favorites' : 'Removed from favorites'"
+        class="nft-detail-view__notification"
+      />
+
       <h3>{{ item.name.length > 0 ? item.name : "NFT #" + item.id }}</h3>
       <img :src="item.image" alt="" @error="imageLoadError" />
 
@@ -17,16 +29,23 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from "vue";
+import { PropType, ref, onUpdated, onMounted } from "vue";
 import CloseIcon from "@action/icons/common/close-icon.vue";
 import ActionMenu from "@action/components/action-menu/index.vue";
+import NftMoreAddToFavorite from "@action/icons/nft/nft-more-add-to-favorite.vue";
+import NftMoreDeleteFromFavorite from "@action/icons/nft/nft-more-delete-from-favorite.vue";
 import { NFTItem } from "@/types/nft";
+import Notification from "@action/components/notification/index.vue";
+
 const notfoundimg = require("@action/assets/common/not-found.jpg");
 const imageLoadError = (img: any) => {
   img.target.src = notfoundimg;
 };
 
-defineProps({
+const isFavoriteAction = ref(false);
+const isFavorite = ref(false);
+
+const props = defineProps({
   item: {
     type: Object as PropType<NFTItem>,
     default: () => {
@@ -37,14 +56,36 @@ defineProps({
     type: Function as PropType<() => void>,
     default: () => ({}),
   },
+  isFavorite: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+onMounted(() => {
+  isFavorite.value = props.isFavorite;
 });
 
 const emit = defineEmits<{
   (e: "close:popup"): void;
+  (e: "update:favClicked", isFav: boolean, item: NFTItem): void;
 }>();
 const close = () => {
   emit("close:popup");
 };
+const favClicked = (isFav: boolean) => {
+  emit("update:favClicked", isFav, props.item);
+  isFavorite.value = isFav;
+
+  setTimeout(() => {
+    toggleNotification();
+  }, 100);
+};
+const toggleNotification = () => {
+  isFavoriteAction.value = !isFavoriteAction.value;
+};
 </script>
 
 <style lang="less">
@@ -126,9 +167,32 @@ const close = () => {
     }
   }
 
+  &__favorite {
+    position: absolute;
+    top: 8px;
+    right: 48px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 300ms ease-in-out;
+    font-size: 0;
+    padding: 8px;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+
   &__action {
     margin: 0;
     width: 100%;
   }
+
+  &__notification {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%) translateY(0px);
+    top: 76px;
+    z-index: 141;
+  }
 }
 </style>