feat: возможность закрыть снекбар и отображение в нем эмодзей

Author: danyadev

Diff for: src/components/ContextMenus/ContextMenuWrapper.vue

@@ -83,7 +83,7 @@ export default {
 .context_menu_wrap {
   position: absolute;
   top: 0;
-  z-index: 3;
+  z-index: 4;
   width: 100%;
   height: 100%;
   visibility: hidden;

Diff for: src/components/SnackbarsWrapper.vue

@@ -8,9 +8,22 @@
           :color="snackbar.color || 'var(--icon-blue)'"
           width="24"
           height="24"
+          class="snackbar_icon"
         />
 
-        {{ snackbar.text }}
+        <div>
+          <VKText mention="attachment">{{ snackbar.text }}</VKText>
+        </div>
+
+        <Icon
+          v-if="snackbar.closable"
+          name="close"
+          color="var(--icon-dark-gray)"
+          width="14"
+          height="14"
+          class="snackbar_close_icon"
+          @click="snackbar.close"
+        />
       </div>
     </Transition>
   </div>
@@ -20,10 +33,12 @@
 import { snackbarsState } from 'js/snackbars';
 
 import Icon from './UI/Icon.vue';
+import VKText from './UI/VKText.vue';
 
 export default {
   components: {
-    Icon
+    Icon,
+    VKText
   },
 
   setup() {
@@ -39,7 +54,7 @@ export default {
 
 .snackbar-enter-from, .snackbar-leave-to {
   opacity: 0;
-  transform: translateY(10px);
+  transform: translateY(15px);
 }
 
 .snackbars {
@@ -52,26 +67,32 @@ export default {
   width: 100%;
   height: 100%;
   pointer-events: none;
-  padding-bottom: 20px;
+  padding-bottom: 25px;
 }
 
 .snackbar {
   display: flex;
   align-items: center;
-  position: relative;
+  text-align: center;
   padding: 5px 12px;
-  margin-top: 10px;
   max-width: 80%;
   min-height: 45px;
-  max-height: 200px;
+  pointer-events: auto;
   background: var(--background);
   border: 1px solid var(--separator-dark);
   border-radius: 10px;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, .24),
               0 0 2px 0 rgba(0, 0, 0, .08);
 }
 
-.snackbar svg {
+.snackbar_icon {
+  flex: none;
   margin-right: 10px;
 }
+
+.snackbar_close_icon {
+  flex: none;
+  margin-left: 10px;
+  cursor: pointer;
+}
 </style>

Diff for: src/components/messages/chat/Keyboard.vue

@@ -120,7 +120,11 @@ export default {
 
       switch (data.action.type) {
         case 'show_snackbar':
-          addSnackbar({ text: data.action.text });
+          addSnackbar({
+            text: data.action.text,
+            duration: 8000,
+            closable: true
+          });
           break;
 
         case 'open_link':

Diff for: src/js/snackbars.js

@@ -1,5 +1,5 @@
 import { reactive } from 'vue';
-import { timer } from './utils';
+import { timer, createCallablePromise } from './utils';
 
 const snackbars = [];
 let id = 0;
@@ -12,9 +12,15 @@ let inWork = false;
 
 async function execute() {
   const data = snackbars.shift();
+  const closePromise = createCallablePromise();
 
+  data.close = closePromise.resolve;
   snackbarsState.snackbar = data;
-  await timer(data.timeout || 2000);
+
+  await Promise.race([
+    timer(data.duration || 2000),
+    closePromise
+  ]);
 
   if (snackbars.length) {
     execute();
@@ -29,7 +35,8 @@ interface Data {
   text: string
   icon?: string // название svg иконки
   color?: string // цвет иконки (по умолчанию 'var(--icon-blue)')
-  timeout?: number // время отображения снекбара в мс (по умолчанию 2000)
+  duration?: number // время отображения снекбара в мс (по умолчанию 2000)
+  closable?: boolean // добавлять ли иконку закрытия снекбара (по умолчанию false)
 }
 */
 export function addSnackbar(data) {

Diff for: src/js/utils.js

@@ -205,6 +205,21 @@ export function moveArrItem(arr, from, to) {
   return arr;
 }
 
+export function createCallablePromise() {
+  let resolve;
+  let reject;
+
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  promise.resolve = resolve;
+  promise.reject = reject;
+
+  return promise;
+}
+
 // 125 -> 125
 // 12.732 -> 12K
 // 5.324.267 -> 5M