merged rm branch to my local and remote

blockchainCloud_client.html

@@ -6,9 +6,10 @@
     <meta name="keywords" content="blockchain,ContentCollaboration,RanchiMall">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="This web app can be used to collaborate between various teams using blockchain technology.">
-    <link href="https://fonts.googleapis.com/css?family=Quicksand|Roboto&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700|Roboto:300,400,500,700&display=swap" rel="stylesheet">
     <!--<link rel="stylesheet" href="css/main.css">-->
     <style>html {
+  scroll-behavior: smooth;
   font-size: 16px;
 }
 
@@ -47,7 +48,7 @@
   font-family: 'Roboto', sans-serif;
 }
 
-      h1, h2, h3, h4, h5 {
+h1, h2, h3, h4, h5, span, p {
   font-family: 'Quicksand', sans-serif;
 }
 
@@ -68,6 +69,22 @@
   background: #555;
 }
 
+.hide-completely {
+  display: none !important;
+}
+
+._2rem-stroke svg {
+  stroke-width: 0.2rem !important;
+}
+
+._5rem-stroke svg {
+  stroke-width: 0.5rem !important;
+}
+
+.no-fill svg, .no-fill path, .no-fill polyline {
+  fill: none !important;
+}
+
 button {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -81,11 +98,12 @@
   border: none;
   -webkit-transition: background 0.2s ease;
   transition: background 0.2s ease;
-        font-weight: bold;
+  font-weight: 500;
 }
 
 button svg {
   height: 1rem;
+  width: 1rem;
 }
 
 button:hover {
@@ -114,6 +132,54 @@
   font-size: 1rem !important;
 }
 
+#clear_export svg {
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #222;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  text-align: right;
+  -webkit-box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24);
+          box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24);
+  z-index: 2;
+  right: 0;
+}
+
+.dropdown-content button {
+  width: 100%;
+}
+
+.dropdown-content button svg {
+  fill: none;
+  overflow: visible;
+}
+
+.dropdown:hover .dropdown-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.spacer {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
 .popup-container {
   display: -ms-grid;
   display: grid;
@@ -124,9 +190,11 @@
   left: 0;
   place-items: center;
   background: rgba(0, 0, 0, 0.4);
+  -webkit-backdrop-filter: blur(0.5rem);
+          backdrop-filter: blur(0.5rem);
   z-index: 4;
-        -webkit-transition: opacity 0.2s ease;
+  -webkit-transition: opacity 0.3s ease;
-        transition: opacity 0.2s ease;
+  transition: opacity 0.3s ease;
 }
 
 .popup-container .popup {
@@ -150,6 +218,10 @@
   color: white;
 }
 
+#context_menu {
+  display: none;
+}
+
 #article_creation_modal {
   max-height: 24rem;
   width: 24rem;
@@ -246,7 +318,7 @@
 
 #edit_article header button svg {
   stroke: var(--primary-color);
-        stroke-width: 0.2rem;
+  stroke-width: 0.3rem;
   fill: none;
   margin-right: 0.5rem;
 }
@@ -324,24 +396,33 @@
 .article-body .article-header h5 {
   font-weight: normal;
   color: #82DDF0;
-        font-family: 'roboto', sans-serif;
 }
 
 .article-body .card-body {
+  position: relative;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
 
 .article-body .card-body .content-div {
-        padding: 0 1rem;
+  padding: 0 1rem 4rem 1rem;
   min-height: 12rem;
-        line-height: 1.4rem;
+  line-height: 1.2rem;
   max-height: 60vh;
   overflow-y: auto;
-        font-family: 'Quicksand', serif;
+  font-weight: 400;
-        font-weight: normal !important;
+}
-        font-size: 1.1rem;
+
+.article-body .card-body .content-div * {
+  font-family: 'Roboto', sans-serif;
+}
+
+.article-body .card-body button {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin-right: 1rem;
 }
 
 .article-body .card-footer {
@@ -363,24 +444,24 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-      }
-      
-      .article-body .card-footer h5:first-of-type {
-        margin-left: auto;
   color: var(--primary-color);
   cursor: pointer;
 }
 
+.article-body .card-footer h5:nth-of-type(2) {
+  margin-left: auto;
+}
+
+.article-body .card-footer h5:nth-of-type(2):hover svg {
+  fill: var(--primary-color);
+}
+
 .article-body .card-footer h5 svg {
   stroke: var(--primary-color);
   width: 1.2rem;
   margin-right: 0.5rem;
 }
 
-      .article-body .card-footer h5 svg:hover {
-        fill: var(--primary-color);
-      }
-      
 .show {
   opacity: 1;
   pointer-events: all;
@@ -400,6 +481,10 @@
   overflow-y: auto;
 }
 
+.snippet-selected {
+  outline: 1px solid var(--primary-color);
+}
+
 .no-transformations {
   -webkit-transform: none !important;
           transform: none !important;
@@ -420,7 +505,7 @@
           align-items: center;
   color: white;
   background: #222;
-        padding: 0.5rem;
+  padding: 0.5rem 1rem;
   z-index: 2;
 }
 
@@ -448,6 +533,12 @@
   stroke: var(--primary-color);
   stroke-width: 0.2rem;
   margin-right: 0.5rem;
+  fill: none;
+  overflow: visible;
+}
+
+.floating-btn {
+  display: none;
 }
 
 #loader_container {
@@ -455,7 +546,11 @@
   height: 100vh;
   width: 100vw;
   top: 0;
-        background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.4);
+  -webkit-backdrop-filter: blur(0.5rem);
+          backdrop-filter: blur(0.5rem);
+  -webkit-transition: opacity 0.6s ease;
+  transition: opacity 0.6s ease;
   display: -ms-grid;
   display: grid;
   place-content: center;
@@ -477,6 +572,10 @@
   color: white;
 }
 
+#loader_container button {
+  margin: auto;
+}
+
 .pulse .first-orb {
   -webkit-animation: pulse 1s infinite ease;
           animation: pulse 1s infinite ease;
@@ -522,6 +621,35 @@
   }
 }
 
+.spin svg {
+  -webkit-animation: spin 0.6s ease infinite;
+          animation: spin 0.6s ease infinite;
+  -webkit-transform-origin: center;
+          transform-origin: center;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
 @media only screen and (max-width: 640px) {
   ::-webkit-scrollbar {
     width: 0.2rem;
@@ -533,11 +661,59 @@
   ::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.3);
   }
+  .hide-on-mobile {
+    display: none;
+  }
   .article-body {
     min-width: calc(100% - 2em) !important;
   }
+  #context_menu, .floating-btn {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin: 2rem;
+    background: #222;
+    position: fixed;
+    -webkit-box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16);
+            box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16);
+    z-index: 3;
+  }
+  #context_menu button, .floating-btn button {
+    width: 100%;
+  }
+  #context_menu button svg, .floating-btn button svg {
+    fill: none;
+    stroke: var(--primary-color);
+  }
+  .floating-btn {
+    background: #282828;
+    bottom: 0;
+    right: 0;
+    border-radius: 5rem;
+    overflow: hidden;
+  }
+  .floating-btn button svg {
+    stroke-width: 0.2rem;
+  }
+  #context_menu {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  #context_menu button svg {
+    stroke-width: 0.2rem;
+    margin-right: 0.5rem;
+  }
+  #context_menu button:nth-of-type(1) svg {
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+  }
   #article_container {
-          padding: 1rem;
+    padding: 0.5rem 0.5rem 6rem 0.5rem;
+  }
+  #navbar {
+    padding: 0.5rem;
   }
   .navigation-arrows {
     opacity: 0;
@@ -560,6 +736,9 @@
   .article-body {
     min-width: 50%;
   }
+  .hide-on-medium {
+    display: none;
+  }
 }
 /*# sourceMappingURL=main.css.map */</style>
 </head>
@@ -596,16 +775,41 @@
 </script>
 
 <body onload="onLoadStartUp()">
-    <div>
-        <button onclick="cloudArticleApp.retrieveLatestContent()">Refresh</button>
-        <button onclick="cloudArticleApp.logout()">Logout</button>
-        <button onclick="cloudArticleApp.reset_export_list()">Reset Export Selection</button>
-        <button onclick="cloudArticleApp.export_as_file()">Export Selections as file</button>
-    </div>
     <div id="admindiv"></div>
-    
+    <div id="context_menu" class="hide">
+        <button onclick="cloudArticleApp.reset_export_list()">
+            <svg viewBox="0 0 24 24">
+                <line x1="12" y1="0" x2="12" y2="24"/>
+                <line x1="0" y1="12" x2="24" y2="12"/>
+            </svg>
+            Clear Selection</button>
+        <button onclick="cloudArticleApp.export_as_file()">
+            <svg viewBox="0 0 28.44 24.47">
+            <g>
+                <path d="M27.19,6.72C14.18,6.6,4.87,12.2,0.47,24.3"/>
+                <polyline points="21.37,0.35 27.73,6.72 21.37,13.08"/>
+            </g>
+            </svg>
+            Export as file</button>
+    </div>
+    <div class="floating-btn">
+        <button onclick="cloudArticleApp.retrieveLatestContent()">
+            <svg viewBox="0 0 38 40.05">
+                <title>Refresh content</title>
+                <path d="M37,21.05c0,9.94-8.06,18-18,18s-18-8.06-18-18s8.06-18,18-18c5.89,0,11.11,2.82,14.4,7.19"/>
+                <polygon points="22.63,10.96 22.81,8.96 32.63,9.86 32.81,0 34.81,0.04 34.59,12.05 "/>
+            </svg>
+        </button>
+        <button class="admin-options hide-completely" onclick="showPopup('article_creation_modal')">
+                <svg viewBox="0 0 24 24">
+                    <title>Create new article</title>
+                    <line x1="12" y1="0" x2="12" y2="24"/>
+                    <line x1="0" y1="12" x2="24" y2="12"/>
+                </svg>
+        </button>
+    </div>
     <nav id="navbar">
-        <svg id="icon" viewBox="0 0 99.555 117.877">
+        <svg id="icon" viewBox="0 0 99.555 117.877" title="Content collaboration logo">
             <style type="text/css">
                 .first-orb{fill:#00FA9A;}
                 .second-orb{fill:#00EDBF;}
@@ -617,13 +821,58 @@
                 <circle class="third-orb" cx="68" cy="86" r="32"/>
             </g>
         </svg>
-      <span><h5>RanchiMall</h5>CONTENT COLLABORATION</span>
+      <span><h5>RanchiMall</h5>CONTENT COLLABORATION</span><div class="spacer"></div>
-      <button onclick="showPopup('article_creation_modal')">
+      <button id="refresh_btn" title="Refresh the content" class="hide-on-mobile" onclick="cloudArticleApp.retrieveLatestContent()">
+        <svg viewBox="0 0 38 40.05">
+            <path d="M37,21.05c0,9.94-8.06,18-18,18s-18-8.06-18-18s8.06-18,18-18c5.89,0,11.11,2.82,14.4,7.19"/>
+            <polygon points="22.63,10.96 22.81,8.96 32.63,9.86 32.81,0 34.81,0.04 34.59,12.05 "/>
+        </svg>
+        Refresh</button>
+        <button id="clear_export" title="Clear article selection" class="export-options hide-completely no-fill hide-on-mobile" onclick="cloudArticleApp.reset_export_list()">
             <svg viewBox="0 0 24 24">
                 <line x1="12" y1="0" x2="12" y2="24"/>
                 <line x1="0" y1="12" x2="24" y2="12"/>
             </svg>
-         Article</button>
+            Clear Selection</button>
+        <button class="export-options no-fill hide-completely hide-on-mobile" title="Export selected articles as html file" onclick="cloudArticleApp.export_as_file()">
+            <svg viewBox="0 0 28.44 24.47">
+            <g>
+                <path d="M27.19,6.72C14.18,6.6,4.87,12.2,0.47,24.3"/>
+                <polyline points="21.37,0.35 27.73,6.72 21.37,13.08"/>
+            </g>
+            </svg>
+            Export as file
+        </button>
+      <div class="dropdown hide-on-mobile admin-options hide-completely" title="dropdown menu option for sub-admins">
+        <button class="dropbtn _5rem-stroke">
+            <svg viewBox="0 0 72 55">
+            <line x1="0" y1="0.5" x2="63" y2="0.5"/>
+            <line x1="0" y1="27.5" x2="45" y2="27.5"/>
+            <line x1="0" y1="54.5" x2="72" y2="54.5"/>
+            </svg>
+            Options</button>
+        <div class="dropdown-content">
+            <button onclick="showPopup('article_creation_modal')" title="Create new article">
+                <svg viewBox="0 0 24 24">
+                    <line x1="12" y1="0" x2="12" y2="24"/>
+                    <line x1="0" y1="12" x2="24" y2="12"/>
+                </svg>
+                New Article
+            </button>
+        </div>
+      </div>
+        <button id="logout_btn" title="Logout button" class="_5rem-stroke" onclick="cloudArticleApp.logout()">
+            <svg viewBox="0 0 73.21 73">
+            <g>
+                <path d="M27.71,18.5"/>
+                <polyline points="27.71,18.5 27.71,0.5 72.71,0.5 72.71,72.5 27.71,72.5 27.71,54.5"/>
+                <g>
+                    <line x1="41.85" y1="36.6" x2="0.71" y2="36.6"/>
+                    <polyline points="16.14,21.17 0.71,36.6 16.14,52.03"/>
+                </g>
+            </g>
+            </svg>            
+            Logout</button>
     </nav>
     
     <div id="loader_container" class="hide">
@@ -635,6 +884,7 @@
             </g>
         </svg>
         <h4 id="show_log_events"></h4>
+        <button onclick="cloudArticleApp.logout()">Clear All Data</button>
     </div>
 
     <section id="article_container">
@@ -668,7 +918,7 @@
                     container.children[1].classList.remove('hide')
         },{
             root: container,
-            threshold: 1
+            threshold: 0.8
         })
         observer.observe(container.children[0].firstElementChild)
         container.children[0].scrollBy({
@@ -686,7 +936,7 @@
                     container.children[2].classList.remove('hide')
         }, {
             root: container,
-            threshold: 1
+            threshold: 0.8
         })
         observer.observe(container.children[0].lastElementChild)
 
@@ -752,10 +1002,22 @@
                 cloudArticleApp.resetArticleContent();
                 hidePopup('edit_article')
             } 
+            document.querySelectorAll('.admin-options').forEach((option) => {
+                option.classList.remove('hide-completely');
+            })
+        }
+    }
+    function buttonVisibility(mode, parent){
+        let button = parent.children[2];
+        if(parent.firstElementChild.innerText ==''){
+            button.classList.add('hide')
+            return;
+        }
+        if(mode === 'show' && button.classList.contains('hide'))
+            button.classList.remove('hide')
+        if(mode === 'hide' && !button.classList.contains('hide'))   
+            button.classList.add('hide')
     }   
-
-        
-    };
  </script>
 
 <script id="init_lib">
@@ -9004,7 +9266,7 @@ Bitcoin.Util = {
                             floGlobals.appObjects[message.object] = message.reset
                             floGlobals.vectorClock[message.object] = vc
                             compactIDB.writeData("appObjects", floGlobals.appObjects[message.object], message.object)
-                            compactIDB.writeData("vectorClocks", vc, message.object)
+                            compactIDB.writeData("vectorClock", vc, message.object)
                         }
                     }
                 }catch(error){
@@ -9023,7 +9285,7 @@ Bitcoin.Util = {
                                 compactIDB.writeData("appObjects",floGlobals.appObjects[message.object], message.object)
                             }
                         floGlobals.vectorClock[message.object] = vc
-                        compactIDB.writeData("vectorClocks", vc, message.object)
+                        compactIDB.writeData("vectorClock", vc, message.object)
                     }
                 }catch(error){
                     console.error(error)
@@ -9188,7 +9450,7 @@ Bitcoin.Util = {
                         //for Dapps
                         subAdmins:{},
                         appObjects:{},
-                        vectorClocks:{},
+                        vectorClock:{},
                         generalData:{},
                         generalVC:{}
                     }
@@ -9252,7 +9514,7 @@ Bitcoin.Util = {
 
                 loadDataFromIDB: function(){
                     return new Promise((resolve,reject) => {
-                        var loadData = ["appObjects", "vectorClocks", "generalData", "generalVC"]
+                        var loadData = ["appObjects", "vectorClock", "generalData", "generalVC"]
                         var promises = []
                         for(var i = 0; i < loadData.length; i++)
                             promises[i] = compactIDB.readAllData(loadData[i])
@@ -9439,7 +9701,7 @@ Bitcoin.Util = {
         floDapps.launchStartUp().then(result => {
             console.log(result)
             showMessage(result)
-            showMessage(`Welcome FLO_ID: ${myFloID}`)
+            showMessage(`Welcome ${myFloID}`)
             buidAdminUI();
             cloudArticleApp.retrieveLatestContent();
         }).catch(error => console.error(error))
@@ -9450,11 +9712,11 @@ Bitcoin.Util = {
     
     const cloudArticleApp = {
 
-        SUBJECT: "BusinessDesign1", // BusinessDesign1 | testArticle9
+        SUBJECT: "testArticle9", // BusinessDesign1 | testArticle9
 
         numberOfSections: 5,
 
-        CONTENT_TYPE: "BUSINESS_DESIGN", // BUSINESS_DESIGN | typeContentCollab9
+        CONTENT_TYPE: "typeContentCollab9", // BUSINESS_DESIGN | typeContentCollab9
 
         todaysContenthashList: [],
 
@@ -9560,16 +9822,17 @@ Bitcoin.Util = {
                         article_structure += 
                         `<div class="article-body">
                                 <div class="article-header">
-                                    <h5>${article_data.content_creator}</h5>
+                                    <h5 title="Article author">${article_data.content_creator}</h5>
                                 </div>
                                 <div class="card-body">
-                                    <div class="content-div" id="${gen_div_id}" data-value="${key}__${secKey}" contenteditable="true" onfocusout="cloudArticleApp.edit_onfocuout(event)">
+                                    <div class="content-div" id="${gen_div_id}" data-gramm="false" data-value="${key}__${secKey}" contenteditable="true" onkeyup="buttonVisibility('show', this.parentNode)">
                                         ${article_data.content.trim()}
                                     </div>
-                                    <input type="hidden" id="hash_${gen_div_id}" value="${content_hash}">
+                                    <input type="hidden" id="hash_${gen_div_id}" value="${content_hash}"/>
+                                    <button class="hide" onclick="cloudArticleApp.edit_onfocuout(this.parentNode)">Submit</button>
                                 </div>
                                 <div class="card-footer">
-                                    <h5 id="exp_${gen_div_id}"  onclick="cloudArticleApp.register_content_to_export(event)">Export</h5>
+                                    <h5 id="exp_${gen_div_id}" title="Add this article as selected" class="select-for-export" onclick="cloudArticleApp.register_content_to_export(event)">Select</h5>
                                     <h5 title="Give score to this article">
                                         <svg viewBox="0 0 16.55 16" style="enable-background:new 0 0 16.55 16;" xml:space="preserve" fill="${fill}">
                                             <polygon
@@ -9646,10 +9909,13 @@ Bitcoin.Util = {
         },
 
         retrieveLatestContent: async function(receiverID=floGlobals.adminID, senderIDs=floGlobals.subAdmins) {
+            showLoader()
+            showMessage('Loading the latest content')
             await floCloudAPI.requestObjectData(this.SUBJECT,{receiverID, senderIDs});
             await floCloudAPI.requestGeneralData(this.CONTENT_TYPE);
             document.getElementById('current_data').innerHTML = '';
             cloudArticleApp.showFullContentOfArticle(floGlobals.appObjects[cloudArticleApp.SUBJECT]);
+            hideLoader()
         },
 
         createNewArticle: function(article_name, div='', number_of_sections=cloudArticleApp.numberOfSections) {
@@ -9793,9 +10059,9 @@ Bitcoin.Util = {
             return e.target || e.srcElement;
         },
 
-        edit_onfocuout: function(event) {
+        edit_onfocuout: function(parent) {
             if(floGlobals.subAdmins.includes(myFloID)) return;
-            let target = this.getEventTarget(event);
+            let target = parent.firstElementChild;
             const updated_content = target.innerText.trim();   
             const updated_content_hash = Crypto.SHA256(updated_content);
             let editable_div = document.getElementsByClassName('content_div');
@@ -9807,6 +10073,7 @@ Bitcoin.Util = {
             if(separate_data.length!==2) return;
 
             cloudArticleApp.addArticleContent(separate_data[0].trim(), separate_data[1].trim(), updated_content, myFloID);
+            buttonVisibility('hide', parent)
         },
 
         upgrade_article: function(event) {
@@ -9831,9 +10098,12 @@ Bitcoin.Util = {
         },
         
         register_content_to_export: function(event) {
-          let target = cloudArticleApp.getEventTarget(event);
+          let target = cloudArticleApp.getEventTarget(event),
-          let article_id = target.id.substring(4);
+              article_id = target.id.substring(4),
-          let parent_heading_id = target.closest('.gallery-container').previousElementSibling.id;
+              parent_heading_id = target.closest('.gallery-container').previousElementSibling.id,
+              options = document.getElementById('context_menu'),
+              top = target.getBoundingClientRect().top,
+              left = target.getBoundingClientRect().left;
           
           if(typeof cloudArticleApp.export_file_object[parent_heading_id]!=="object") {
             this.register_heading_to_export(parent_heading_id);
@@ -9844,8 +10114,24 @@ Bitcoin.Util = {
             article_id: article_id,
             rank: rank
           }
-          target.classList.add("snippet_selected");
+          console.log(cloudArticleApp.export_file_object)
-          target.innerText= 'Selected';
+          target.classList.add("snippet-selected");
+          target.textContent= 'Selected';
+          options.classList.remove('hide') 
+            let y = document.addEventListener("touchend", function(event) {
+                if (event.target.closest('#context_menu') || event.target.closest('.select-for-export')) return;
+                options.classList.add('hide') 
+                document.removeEventListener('click', y);
+            });
+            if(window.innerWidth > 640){
+                document.querySelectorAll('.export-options').forEach((option) => {
+                    option.classList.remove('hide-completely')
+                })
+            }
+            if(top > window.innerHeight - 100)
+                options.setAttribute('style', `transform: translate(${left}px, ${top-160}px)`)
+            else
+                options.setAttribute('style', `transform: translate(${left}px, ${top}px)`)
         },
 
         register_heading_to_export: function(heading_id="") {
@@ -9875,6 +10161,7 @@ Bitcoin.Util = {
             let file_name = "content_collaboration"+new Date().getTime();
 
             this.downloadInnerHtml(file_name, t, 'text/html');
+            document.getElementById('context_menu').classList.add('hide')
 
         },
 
@@ -9895,15 +10182,26 @@ Bitcoin.Util = {
 
         reset_export_list: function() {
             cloudArticleApp.export_file_object = {};
-            let cl_list = document.getElementsByClassName('snippet_selected');
+            document.querySelectorAll('.snippet-selected').forEach((cl) =>{
-            for(cl of cl_list) {
+                cl.textContent= 'Select';
-                cl.innerText= 'Export';
+                cl.classList.remove("snippet-selected");
-                cl.classList.remove("snippet_selected");
+            })
-            }
+            document.getElementById('context_menu').classList.add('hide')
+            document.querySelectorAll('.export-options').forEach((option) => {
+                    option.classList.add('hide-completely')
+            })
         }, 
         logout: function() {
-            floDapps.clearCredentials();
+            if(confirm("Do you want to logout?")){
+                floDapps.clearCredentials()
+                compactIDB.deleteDB().then((message) => {
+                    console.log(message)
+                    onLoadStartUp()
                     alert('You have logged out successfully.')
+                }).catch((error) => {
+                    console.log(error)
+                })
+            }
         }
 
     }