(UI) add message deleted icon

Author: antoine92190

src/ChatWindow/FormatMessage.vue

@@ -14,7 +14,9 @@
 					}"
 					:href="message.href"
 					target="_blank"
-					>{{ message.value }}</component
+					><svg-icon v-if="deleted" name="deleted" class="icon-deleted" />{{
+						message.value
+					}}</component
 				>
 			</template>
 		</div>
@@ -23,10 +25,13 @@
 </template>
 
 <script>
+import SvgIcon from './SvgIcon'
+
 import formatString from '../utils/formatString'
 
 export default {
 	name: 'format-message',
+	components: { SvgIcon },
 
 	props: {
 		content: { type: [String, Number], required: true },
@@ -47,4 +52,12 @@ export default {
 .text-deleted {
 	font-style: italic;
 }
+
+.icon-deleted {
+	height: 14px;
+	width: 14px;
+	vertical-align: middle;
+	margin: -3px 1px 0 0;
+	fill: var(--chat-room-color-message);
+}
 </style>

src/ChatWindow/Message.vue

@@ -58,6 +58,7 @@
 					</div>
 
 					<div v-if="message.deleted">
+						<svg-icon name="deleted" class="icon-deleted" />
 						<span>{{ textMessages.MESSAGE_DELETED }}</span>
 					</div>
 
@@ -578,6 +579,14 @@ export default {
 	background: var(--chat-message-bg-color-deleted) !important;
 }
 
+.icon-deleted {
+	height: 14px;
+	width: 14px;
+	vertical-align: middle;
+	margin: -2px 2px 0 0;
+	fill: var(--chat-message-color-deleted);
+}
+
 .image-container {
 	width: 250px;
 	max-width: 100%;

src/ChatWindow/SvgIcon.vue

@@ -97,6 +97,11 @@ export default {
 				{
 					name: 'dropdown',
 					path: 'M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'
+				},
+				{
+					name: 'deleted',
+					path:
+						'M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z'
 				}
 			]
 		}