⚡ Small Changes , Fix ORT: Unlik , Add Follow activity block des

CHANGELOG.md

@@ -5,7 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 
-## [Unreleased] - [1.1.0] - 2021-08-21
+## [Unreleased] 
+
+### Added
+
+- Add Follow Activity block type
+
+### Fixed
+
+- Fix Activiy type follow
+- Fix Classification, Lowercase issues
+
+### Change
+
+- Change `Unlik` to `Unlike`
+- Change key `timestamp` to `date`
+- Chanage Icons, Colors of Classification func
+- Change Displayed activities to all on latest activities
+
+
+## [1.1.0] - 2021-08-27
 
 ### Added
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "saferwall-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",

src/common/classification.js

@@ -1,23 +1,23 @@
 export const defaultclass = {
     title: 'Unknown',
     icon: 'unsafe',
-    color: 'yellow'
+    color: 'orange'
 }
 export const classes = {
-    'Label.BENIGN': {
+    'label.benign': {
         title: 'Benign',
-        icon: 'unsafe',
-        color: 'red'
+        icon: 'safe',
+        color: 'green'
     },
-    'Label.MALICIOUS': {
+    'label.malicious': {
         title: 'Malicious',
-        icon: 'unsage',
+        icon: 'danger',
         color: 'red'
     },
 }
 
 export const getClass = (c) => {
-    return classes[c] || defaultclass
+    return classes[(c + "").toLowerCase()] || defaultclass
 }
 
 

src/common/components/LatestActivities.vue

@@ -16,7 +16,7 @@ import ListActivities from "./ListActivities.vue";
 export default {
   data: () => ({
     activities: [],
-    paginator: new Paginator("users/activities"),
+    paginator: new Paginator("users/activities").setLimit(100),
   }),
   components: {
     ListActivities,
@@ -34,7 +34,7 @@ export default {
       this.paginator.nextPage().then((data) => {
         if (data.items)
           this.activities = [...this.activities, ...data.items].filter(
-            (v, i, l) => l.indexOf(v) === i
+            (v, i, l) => l.filter((r) => r.id === v.id).length <= 1
           );
       });
     },

src/common/components/elements/ActivityBlock.vue

@@ -1,51 +1,40 @@
 <template>
-  <div
-    class="
-      activity
-      lg:grid
-      items-center
-      justify-center
-      lg:grid-cols-5
-      lg:gap-4
-      bg-white
-      my-3
-      lg:rounded-xl
-    "
-  >
+  <div class="activity" :class="isFollow ? 'followtype' : 'filetype'">
     <div class="header border text-center">
       <router-link class="profile-link" :to="`/user/${author.username}`">
-        <avatar
-          :username="author.username"
-          :source="`//avatar.saferwall.com/${author.username}`"
-        />
+        <avatar :username="author.username" />
         <div class="info mt-3">
           <h3 class="text-xl font-bold">{{ author.username }}</h3>
           <p class="text-gray">Member since {{ getJoinedAgo }}</p>
         </div>
       </router-link>
-      <div class="buttons mt-3" v-if="!isSelfUser">
+      <div v-if="isFollow" class="flex flex-col justify-center">
+        <p>Followed</p>
+        <p>{{ getActivityTimeAgo }} ago</p>
+      </div>
+      <div class="buttons mt-3" v-if="!isSelfUser && !isFollow">
         <button
           @click="toggleFollow"
           :class="follow ? 'active' : ''"
-          class="
-            follow
-            inline-grid
-            font-bold
-            text-primary
-            border
-            rounded-md
-            border-gray
-            py-2
-            w-max
-            px-6
-            cursor-pointer
-          "
+          class="follow"
         >
           {{ follow ? "UnFollow" : "Follow" }}
         </button>
       </div>
+      <template v-else-if="isFollow">
+        <router-link class="profile-link target" :to="`/user/${target}`">
+          <div class="info mt-3">
+            <h3 class="text-xl font-bold">{{ target }}</h3>
+            <p class="text-gray">Member since {{ getJoinedAgo }}</p>
+          </div>
+          <avatar :username="target" />
+        </router-link>
+      </template>
     </div>
-    <div class="activity-content col-span-4 grid lg:grid-cols-4">
+    <div
+      class="activity-content col-span-4 grid lg:grid-cols-4"
+      v-if="!isFollow"
+    >
       <div
         class="info mr-10"
         :class="(!hasTags && 'col-span-4') || 'col-span-3'"
@@ -58,9 +47,9 @@
         </router-link>
         <hash-input :hash="file.hash" class="mt-4"></hash-input>
         <file-meta
-          :filename="file.filename"
-          :classification="getClassification"
           :scan="file.multiav"
+          :filename="file.filename"
+          :classification="file.class"
         />
       </div>
       <div v-if="hasTags" class="tags">
@@ -122,14 +111,18 @@ export default {
       },
       type: Object,
     },
-    timestamp: {
+    date: {
       default: 0,
       type: [String, Number],
     },
     follow: {
       default: true,
       type: Boolean,
     },
+    target: {
+      default: null,
+      type: String,
+    },
     type: {
       default: "submit",
       type: String,
@@ -141,7 +134,7 @@ export default {
   computed: {
     ...userGetters,
     getActivityTimeAgo() {
-      return timeAgoCounts(this.timestamp);
+      return timeAgoCounts(this.date);
     },
     getJoinedAgo() {
       return timeAgo(this.author.member_since);
@@ -172,6 +165,9 @@ export default {
     getFileSummaryRoute() {
       return `/file/${this.file.hash}/summary`;
     },
+    isFollow() {
+      return this.type == "follow" || this.target != null;
+    },
   },
   methods: {
     ...followActions,
@@ -202,16 +198,40 @@ export default {
 
 <style lang="scss" scoped>
 .activity {
-  > * {
-    @apply py-4 px-6 lg:p-10;
+  @apply items-center justify-center bg-white my-3 lg:rounded-xl;
+
+  &.filetype {
+    @apply lg:grid-cols-5 lg:gap-4 lg:grid;
+
+    .header {
+      @apply lg:justify-center;
+
+      .profile-link {
+        @apply flex space-x-4 lg:block lg:space-x-0;
+      }
+    }
   }
-  .header {
-    @apply flex flex-wrap w-full justify-between lg:justify-center flex-grow border-none;
+
+  &.followtype {
+    @apply flex md:flex-row w-full;
 
     .profile-link {
-      @apply flex space-x-4 lg:block lg:space-x-0;
+      @apply flex flex-col lg:flex-row items-center space-x-4 justify-between;
+
+      &.target {
+        @apply flex-col-reverse lg:flex-row;
+      }
     }
   }
+
+  .header {
+    @apply flex flex-wrap w-full justify-between flex-grow border-none;
+  }
+
+  > * {
+    @apply py-4 px-6 lg:p-10;
+  }
+
   .activity-content {
     @apply my-3 break-all;
 
@@ -245,5 +265,9 @@ export default {
       }
     }
   }
+
+  .follow {
+    @apply inline-grid font-bold text-primary border rounded-md border-gray py-2 w-max px-6 cursor-pointer;
+  }
 }
 </style>

src/common/components/elements/FileMeta.vue

@@ -94,15 +94,15 @@ export default {
   }
 
   .red {
-    @apply text-danger;
+    @apply stroke-white fill-danger text-danger;
   }
 
   .green {
-    @apply text-success;
+    @apply stroke-white fill-success text-success;
   }
 
   .orange {
-    @apply text-warning;
+    @apply stroke-white fill-warning text-warning;
   }
 }
 </style>

src/common/components/elements/activity/ShortComment.vue

@@ -45,13 +45,13 @@ export default {
       default: false,
       type: Boolean,
     },
-    timestamp: {
+    date: {
       type: [Number, String],
     },
   },
   computed: {
     getCommentedDate() {
-      return new Date(this.timestamp).toDateString();
+      return new Date(this.date).toDateString();
     },
     getContent() {
       return (this.comment || "").replace(/<\/?[^>]+>/gi, " ");

src/common/components/elements/button/BtnLike.vue

@@ -4,7 +4,7 @@
             <path d="M8.1,14.4a.949.949,0,0,1-.626-.235c-.654-.572-1.285-1.109-1.841-1.583l0,0A34.241,34.241,0,0,1,1.606,8.81,6.026,6.026,0,0,1,0,4.866,5.06,5.06,0,0,1,1.284,1.41,4.354,4.354,0,0,1,4.523,0,4.072,4.072,0,0,1,7.067.878,5.2,5.2,0,0,1,8.1,1.952,5.205,5.205,0,0,1,9.124.878,4.072,4.072,0,0,1,11.668,0a4.354,4.354,0,0,1,3.239,1.41,5.06,5.06,0,0,1,1.284,3.456A6.026,6.026,0,0,1,14.585,8.81a34.233,34.233,0,0,1-4.019,3.773A16.43,16.43,0,0,1,8.1,14.4Z" transform="translate(0.65 0.65)" stroke-width="2"/>
         </svg>
 
-        {{ liked ? 'Unlik' : 'like'}}
+        {{ liked ? 'Unlike' : 'Like'}}
     </button>
 </template>