@webitel/ui-sdk 0.9.55 → 0.9.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.55",
+  "version": "0.9.56",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/organisms/wt-player/wt-player.vue

@@ -2,13 +2,17 @@
   <aside class="wt-player">
     <audio
       id="wt-player__player"
+      ref="audio"
       :src="src"
       :autoplay="autoplay"
       controls
       v-on="listeners"
     ></audio>
+
+    <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
     <wt-icon-btn
       class="wt-player__close-icon"
+      ref="close-icon"
       icon="close"
       @click="$emit('close')"
     ></wt-icon-btn>
@@ -38,6 +42,7 @@ export default {
   data: () => ({
     player: null,
   }),
+
   watch: {
     src() {
       this.setupDownload();
@@ -46,9 +51,11 @@ export default {
       this.setupDownload();
     },
   },
+
   mounted() {
     this.setupPlayer();
   },
+
   computed: {
     listeners() {
       return {
@@ -56,6 +63,7 @@ export default {
       };
     },
   },
+
   methods: {
     setupPlayer() {
       const baseURL = this.$baseURL || process.env.BASE_URL;
@@ -73,6 +81,7 @@ export default {
           active: this.loop,
         },
       });
+      this.appendCloseIcon();
     },
     setupDownload() {
       if (!this.download) this.setupPlayer();
@@ -82,6 +91,13 @@ export default {
         this.player.download = this.download(this.src);
       }
     },
+    appendCloseIcon() {
+      const plyrControls = this.$refs.audio.plyr?.elements?.controls;
+      const closeIcon = this.$refs['close-icon'].$el;
+      if (plyrControls) {
+        plyrControls.append(closeIcon);
+      }
+    },
   },
 };
 </script>
@@ -93,16 +109,15 @@ export default {
   @extend %typo-body-md;
   position: sticky;
   bottom: 60px;
-  display: flex;
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
 
   .plyr {
-    flex-grow: 1;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
   }
 
   &__close-icon {
-    margin: var(--player-close-icon-spacing) var(--player-close-icon-spacing) 0 0;
+    transform: translate(var(--player-close-icon-transform-translate-x),
+      var(--player-close-icon-transform-translate-y));
   }
 
   .plyr__control:hover, {

package/src/css/components/molecules/wt-datepicker/_variables.scss

@@ -11,10 +11,10 @@
   --datepicker-width: calc(
           7 * var(--datepicker-cell-size)
           + 2 * var(--datepicker-calendar-padding)
-          + 2px
+          + 8px
           + 7 * 2 * var(--datepicker-cell-margin)); // 7 cells * 2 sides
 
   --datepicker-selected-cell-text-color: var(--main-primary-color);
   --datepicker-selected-cell-bg-color: var(--main-accent-color);
   --datepicker-cell--hover-color: #F9F9F9;
-}
+}

package/src/css/components/molecules/wt-datepicker/datepicker-calendar.scss

@@ -53,7 +53,9 @@
     @extend %typo-body-lg;
     width: var(--datepicker-cell-size);
     height: var(--datepicker-cell-size);
+    margin: 1px;
     padding: 0;
+    border: none;
     line-height: var(--datepicker-cell-size);
     transition: var(--transition);
 
@@ -66,7 +68,6 @@
 
     &.day {
       border-radius: var(--border-radius);
-      margin: 1px;
 
       &.selected {
         @extend %typo-strong-lg;

package/src/css/components/organisms/wt-player/_variables.scss

@@ -2,5 +2,7 @@
   --plyr-color-main: var(--main-accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
   // --plyr-control-toggle-checked-background: var(--main-primary-color);
-  --player-close-icon-spacing: var(--spacing--xs);
+  --player-close-icon-transform-translate-x: var(--spacing--sm);
+  // "-1 * var" for use the negative value of a variable
+  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing--md));
 }

package/src/locale/ru/ru.js

@@ -74,7 +74,7 @@ export default {
       name: 'Supervisor Workspace',
       sections: {
         [SupervisorSections.QUEUES]: 'Очереди',
-        [SupervisorSections.AGENTS]: 'Агенты',
+        [SupervisorSections.AGENTS]: 'Операторы',
         [SupervisorSections.ACTIVE_CALLS]: 'Активные звонки',
       },
     },

package/src/locale/ua/ua.js

@@ -74,7 +74,7 @@ export default {
       name: 'Supervisor Workspace',
       sections: {
         [SupervisorSections.QUEUES]: 'Черги',
-        [SupervisorSections.AGENTS]: 'Агенти',
+        [SupervisorSections.AGENTS]: 'Оператори',
         [SupervisorSections.ACTIVE_CALLS]: 'Активні дзвінки',
       },
     },