Merge pull request #522 from Adamant-im/feat/reactions

Quick Reactions (AIP-17)

.eslintrc.cjs

@@ -29,5 +29,8 @@ module.exports = {
       '<template>': 'espree'
     }
   },
-  plugins: ['vue', '@typescript-eslint']
+  plugins: ['vue', '@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off'
+  }
 }

package.json

@@ -23,6 +23,7 @@
     "postinstall": "electron-builder install-app-deps && npm run schema:generate"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
     "@liskhq/lisk-cryptography": "3.2.1",
     "@liskhq/lisk-transactions": "5.2.2",
     "@mdi/font": "^7.2.96",
@@ -46,6 +47,7 @@
     "detect-browser": "^5.3.0",
     "dompurify": "^3.0.5",
     "ed2curve": "^0.3.0",
+    "emoji-mart": "^5.5.2",
     "file-saver": "^2.0.5",
     "hdkey": "^2.1.0",
     "https-browserify": "^1.0.0",
@@ -92,6 +94,7 @@
     "@rollup/plugin-inject": "^5.0.3",
     "@rushstack/eslint-patch": "^1.4.0",
     "@types/dompurify": "^3.0.2",
+    "@types/emoji-mart": "^3.0.9",
     "@types/marked": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",

src/assets/styles/components/_chat.scss

@@ -84,11 +84,14 @@ $scroll-bar-width: 4px;
     float: left;
     max-width: 80%;
     margin: unset; // resets margins of <v-row/>
+    margin-bottom: 16px;
 
     &:hover {
       .a-chat__message-actions-icon {
         visibility: visible;
-        transition: visibility .5s, max-height .5s;
+        transition:
+          visibility 0.5s,
+          max-height 0.5s;
       }
     }
 
@@ -98,14 +101,19 @@ $scroll-bar-width: 4px;
 
     & + & {
       margin-top: unset; // resets margins of `.v-row + .v-row`
+      margin-bottom: 16px;
     }
 
     &--right {
       float: right;
     }
 
     &--transition {
-      transition: all .4s;
+      transition: left 0.4s;
+    }
+
+    &--disable-max-width {
+      max-width: unset;
     }
   }
 
@@ -116,7 +124,6 @@ $scroll-bar-width: 4px;
     padding-bottom: 8px;
     padding-left: 16px;
     padding-right: 16px;
-    margin-bottom: 16px;
     border-radius: 8px;
   }
 
@@ -130,11 +137,13 @@ $scroll-bar-width: 4px;
   }
 
   @keyframes flashing {
-    0% {}
+    0% {
+    }
     50% {
       background-color: rgba(map-get($adm-colors, 'primary'), 0.25);
     }
-    100% {}
+    100% {
+    }
   }
 
   &__message--flashing {
@@ -371,6 +380,14 @@ $scroll-bar-width: 4px;
       opacity: 1;
     }
   }
+  &__overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    backdrop-filter: blur(6px);
+  }
 }
 
 /** Themes **/
@@ -382,7 +399,9 @@ $scroll-bar-width: 4px;
 
     &__message {
       background-color: #fff;
-      box-shadow: 0 1px 10px hsla(0, 0%, 39.2%, 0.06), 0 1px 1px hsla(0, 0%, 39.2%, 0.04),
+      box-shadow:
+        0 1px 10px hsla(0, 0%, 39.2%, 0.06),
+        0 1px 1px hsla(0, 0%, 39.2%, 0.04),
         0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
 
       &--red {
@@ -470,6 +489,9 @@ $scroll-bar-width: 4px;
         color: map-get($adm-colors, 'primary') !important;
       }
     }
+    &__send-icon {
+      color: map-get($grey, 'darken-1');
+    }
   }
 }
 .v-theme--dark {
@@ -479,8 +501,10 @@ $scroll-bar-width: 4px;
     }
 
     &__message {
-      background-color: #000;
-      box-shadow: 0 1px 10px hsla(0, 0%, 39.2%, 0.06), 0 1px 1px hsla(0, 0%, 39.2%, 0.04),
+      background-color: map-get($adm-colors, 'black');
+      box-shadow:
+        0 1px 10px hsla(0, 0%, 39.2%, 0.06),
+        0 1px 1px hsla(0, 0%, 39.2%, 0.04),
         0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
       &--red {
         background-color: map-get($grey, 'darken-3');
@@ -491,7 +515,11 @@ $scroll-bar-width: 4px;
     }
 
     &__message-actions-icon {
-      background-image: linear-gradient(45deg, map-get($adm-colors, 'muted'), map-get($shades, 'black') 40%);
+      background-image: linear-gradient(
+        45deg,
+        map-get($adm-colors, 'muted'),
+        map-get($shades, 'black') 40%
+      );
     }
 
     &__sender {
@@ -519,5 +547,7 @@ $scroll-bar-width: 4px;
     &__form {
       background-color: map-get($grey, 'darken-4');
     }
+    &__send-icon {
+    }
   }
 }

src/assets/styles/settings/_colors.scss

@@ -6,6 +6,7 @@ $adm-colors: (
   'primary': #2e7eed,
   'primary2': #bbdefb,
   'regular': #4a4a4a,
+  'black': #101010,
   'muted': rgba(0, 0, 0, 0.54),
   'secondary': #eee,
   'secondary2': #f5f5f5,

src/components/AChat/AChat.vue

@@ -38,6 +38,10 @@
 
       <slot name="form" />
     </div>
+
+    <div v-if="$slots.overlay" class="a-chat__overlay">
+      <slot name="overlay" />
+    </div>
   </div>
 </template>