fix(message): add coming soon to edit message button

Satellite-im · Jun 9, 2022 · 84aeaa3 · 84aeaa3
1 parent 34fbef7
commit 84aeaa3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/components/views/chat/message/actions/Actions.html b/components/views/chat/message/actions/Actions.html
@@ -25,10 +25,10 @@
     <archive-icon size="1x" :class="'control-icon'" />
   </div>
   <div
-    class="reply-command"
+    class="reply-command coming-soon"
     v-tooltip.top="$t('controls.edit')"
     v-if="isEditable"
-    @click="editMessage"
+    @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
   >
     <edit-icon size="1x" :class="'control-icon'" />
   </div>

diff --git a/components/views/chat/message/actions/Actions.less b/components/views/chat/message/actions/Actions.less
@@ -10,6 +10,14 @@
     justify-content: center;
     cursor: pointer;
 
+    &.coming-soon,
+    &.coming-soon:hover {
+      cursor: not-allowed;
+      svg {
+        color: grey;
+      }
+    }
+
     &:hover {
       &:extend(.background-semitransparent-light);
       .control-icon {

diff --git a/components/views/chat/message/actions/Actions.vue b/components/views/chat/message/actions/Actions.vue
@@ -11,6 +11,7 @@ import {
 } from 'satellite-lucide-icons'
 import { mapState } from 'vuex'
 import { UIMessage } from '~/types/messaging'
+import { ModalWindows } from '~/store/ui/types'
 
 export default Vue.extend({
   components: {
@@ -20,12 +21,6 @@ export default Vue.extend({
     EditIcon,
     MoreVerticalIcon,
   },
-  data() {
-    return {
-      hasMoreSettings: false,
-      featureReadyToShow: false,
-    }
-  },
   props: {
     setReplyChatbarContent: {
       type: Function,
@@ -55,6 +50,12 @@ export default Vue.extend({
       }),
     },
   },
+  data() {
+    return {
+      hasMoreSettings: false,
+      featureReadyToShow: false,
+    }
+  },
   computed: {
     ...mapState(['ui', 'accounts']),
     isEditable(): boolean {
@@ -63,6 +64,15 @@ export default Vue.extend({
         !(this.message.type === 'glyph' || this.message.type === 'file')
       )
     },
+    ModalWindows: () => ModalWindows,
+  },
+  methods: {
+    toggleModal(modalName: ModalWindows) {
+      this.$store.commit('ui/toggleModal', {
+        name: modalName,
+        state: !this.ui.modals[modalName],
+      })
+    },
   },
 })
 </script>

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -117,7 +117,7 @@ export default {
     turn_off_camera: 'Turn Off Camera',
     turn_on_camera: 'Turn On Camera',
     crop: 'Crop',
-    edit: 'Edit',
+    edit: 'Edit\nComing soon',
     end_stream: 'End Stream',
     not_connected: 'Offline calling unavailable',
     not_available: 'Not available yet',