edit: ajout d'une série de fenêtre flottantes déplaçable avec sytème de focus + transformation msgVisualizer en composant séparé et réglages associés

v1-com-officielle/src/infoComponents/InboxContent.vue

@@ -28,40 +28,7 @@
           </div>
         </div>
       </div>
-
-      <div class="windowStyle" v-show="msgSelected" id="msgVisualizer" ref="msgPannel">
-        <Moveable
-            className="moveable"
-            :target="$refs.msgPannel"
-            :draggable="true"
-            @drag="onDrag"
-        />
-        <div class="windowTitle">
-          <p>
-            <b class="windowTitleLower">Message du {{selectedMsg.date}}</b>
-            <br>
-            {{selectedMsg.title}}
-          </p>
-          <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
-          <button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="toggleMsg" @click="toggleMsg">
-            <CloseIcon name="close" class="icon"/>
-          </button>
-        </div>
-        <div class="windowContent">
-          <div class="msgReact">
-            <p class="reactStatStyle">{{selectedMsg.like}}</p>
-            <button type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
-              <CloseIcon name="test" class="icon"/>
-            </button>
-            <p v-show="selectedMsg.isEvent" class="reactStatStyle">{{selectedMsg.going}}</p>
-            <button v-show="selectedMsg.isEvent" type="button" class="textBtnStyle" :class="{reactedStyle: selectedMsg.isGoing}" @mousedown.capture="goingToEvent" @touchstart.capture="goingToEvent">
-              JE PARTICIPE!
-            </button>
-          </div>
-          <p id="selectedMsgText" @touchstart.stop>{{selectedMsg.content}}</p>
-        </div>
-        </div>
-      </div>
+    </div>
 </template>
 
 <style scoped>
@@ -78,21 +45,6 @@
       @media(min-width:1000px){}
   */
 
-  #msgVisualizer{
-    position: fixed;
-    top:50%;
-    left:3.33%;
-    width: 333px;
-    height: 333px;
-  }
-  /*================ PC LARGE*/
-  @media(min-width:1000px){
-    #msgVisualizer{
-      left: 45%;
-      top: 33.3%;
-    }
-  }
-
   #inboxContainer{
     width:100%;
     position:relative;
@@ -230,47 +182,6 @@
     margin-top: -3.33px;
   }
 
-  .windowContent .msgReact{
-    margin-left: -16.1%;
-    width: 77%;
-    justify-content: flex-start;
-    font-family: 'lineal';
-    font-weight: normal;
-    padding: 0;
-  }
-  .windowContent .reactStatStyle{
-    text-align: center;
-    width: 33px;
-    padding-right: 0;
-  }
-  .windowContent .icon{
-    height: 16.1px;
-    width: auto;
-    margin-top: 0;
-  }
-  .windowContent .iconBtnStyle{
-    height: 33px;
-    width: 33px;
-    border-radius: 33px;
-  }
-  .windowContent .textBtnStyle{
-    height: 33px;
-    width: 130px;
-  }
-
-  #selectedMsgText{
-    white-space: pre-line;
-    font-size: 16.1px;
-    font-family: 'velvelyne';
-    color: var(--main-color);
-    font-weight: bold;
-    padding-right: 16.1px;
-    padding-left: 7.77px;
-    margin-top: 0;
-    height: 77%;
-    overflow-y: scroll;
-  }
-
   .reactedStyle{
     color: var(--accent-color);
   }
@@ -285,33 +196,25 @@
 
 <script>
   import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
 
   export default {
     name : 'InboxContent',
+    emits: ['open'],
     methods:{
       onDrag({ target, transform }) {
         target.style.transform = transform;
       },
-      toggleMsg(){
-        this.msgSelected = !this.msgSelected;
-        if (!this.msgSelected){
-          for (let k in this.msgList){
-            this.msgList[k].isSelected = false;
-          }
-        }
-      },
       selectMsg(e){
         for(let i in this.msgList){
           this.msgList[i].isSelected = false;
         }
-        this.selectedMsg = e
-
+        this.selectedMsg = e;
+        dataStorage.selectedMsg = this.selectedMsg;
+        this.$emit('open');
         e.isSelected = true;
         e.wasRead = true;
         this.unreadMsg();
-        if(!this.msgSelected){
-          this.msgSelected = true;
-        }
       },
       unreadMsg(){
         this.msgNumber = 0;
@@ -319,12 +222,6 @@
           if (!this.msgList[j].wasRead)
           this.msgNumber += 1;
         }
-      },
-      likeMsg(){
-        this.selectedMsg.isLiked = !this.selectedMsg.isLiked;
-      },
-      goingToEvent(){
-        this.selectedMsg.isGoing = !this.selectedMsg.isGoing;
       }
     },
     data(){
@@ -342,8 +239,7 @@
             wasRead: false,
             isSelected: false,
             isEvent: false
-          },
-          msgSelected: false
+          }
       }
     },
     mounted(){