style to implement flags and options on message

front/src/views/room/Header.vue

@@ -14,6 +14,7 @@ const roomTitle = () => {
     return props.room?.roomName;
 };
 
+// todo remove us from list
 const to = () => props.room?.members.filter((member: Address) => member.type == "to");
 const cc = () => props.room?.members.filter((member: Address) => member.type == "cc");
 </script>
@@ -48,8 +49,7 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
 }
 
 .members-list {
-    padding: 3px 0;
-    margin: 0 5px;
+    padding: 3px 5px;
     border-bottom: 1px solid #505050;
 }
 .members {

front/src/views/room/MemberList.vue

@@ -11,6 +11,7 @@ const props = defineProps({ type: String, members: Object as PropType<Address[]>
 //     if (!props.members) continue;
 //     members?.push(props?.members[0]);
 // }
+// todo deal with long list and responsive
 </script>
 
 <template>

front/src/views/room/Message.vue

@@ -6,7 +6,7 @@ import DOMPurify from "dompurify";
 import { Address, Message } from "@/store/models/model";
 
 const props = defineProps({
-    data: Object as PropType<Message>,
+    msg: Object as PropType<Message>,
     members: Array as PropType<Address[]>,
 });
 const iframe = ref<HTMLIFrameElement>();
@@ -42,14 +42,14 @@ function setIframeContent(content: string | undefined) {
 }
 
 watch(
-    () => props.data,
+    () => props.msg,
     (newData: Message | undefined) => {
         setIframeContent(newData?.content);
     },
 );
 
 onMounted(() => {
-    setIframeContent(props.data?.content);
+    setIframeContent(props.msg?.content);
 });
 
 const displayAddresses = (addressIds: string[] | undefined): string => {
@@ -72,12 +72,12 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
     <div class="message">
         <div id="context">
             <div class="left" id="profile">
-                {{ displayAddresses(props.data?.fromA?.split(",")) }} - {{ props.data?.fromA }}
+                {{ displayAddresses(props.msg?.fromA?.split(",")) }} - {{ props.msg?.fromA }}
             </div>
-            <div class="middle">{{ decodeEmojis(props.data?.subject) }}</div>
+            <div class="middle">{{ decodeEmojis(props.msg?.subject) }}</div>
             <div class="right" id="date">
                 {{
-                    new Date(props.data?.date ?? "").toLocaleString("en-GB", {
+                    new Date(props.msg?.date ?? "").toLocaleString("en-GB", {
                         weekday: "short",
                         year: "numeric",
                         month: "2-digit",
@@ -89,7 +89,10 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
                 }}
             </div>
         </div>
-        <iframe ref="iframe"></iframe>
+        <div class="content">
+            <iframe ref="iframe"></iframe>
+            <div class="options">options</div>
+        </div>
     </div>
 </template>
 
@@ -106,17 +109,7 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
     justify-content: space-between;
     background-color: var(--quaternary-background);
     padding: 3px 10px;
-    margin-bottom: 6px;
-    border-radius: 4px;
-}
-
-iframe {
-    overflow-y: auto;
-    max-height: 300px;
-    width: 100%;
-    border: none;
-    max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
-    background-color: rgb(234, 234, 234);
+    border-radius: 4px 4px 0 0;
 }
 
 .left,
@@ -128,4 +121,26 @@ iframe {
     margin: 0 10px;
     text-align: center;
 }
+
+.content {
+    display: flex;
+    padding-top: 6px;
+    flex-direction: row;
+    /* background-color: #ec7a4342;
+    background-color: #353c6261; */
+}
+
+iframe {
+    overflow-y: auto;
+    max-height: 300px;
+    flex-basis: 100%;
+    border: none;
+    max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    background-color: rgb(234, 234, 234);
+}
+
+.options {
+    flex: 1;
+    text-align: center;
+}
 </style>