Improved sharing support : copy url to clipboard

assets/static/css/main.css

@@ -1136,6 +1136,14 @@ dialog .content h5 {
   }
 }
 
+.col.left {
+  text-align: left;
+}
+
+.col.right {
+  text-align: right;
+}
+
 /* Small */
 @media (min-width:577px) and (max-width: 767px) {
 }
@@ -1213,6 +1221,54 @@ dialog .content h5 {
   .slider.round:before {
     border-radius: 50%;
   }
+
+  .col.s1 {
+    width: 8.33333%
+  }
+
+  .col.s2 {
+    width: 16.66666%
+  }
+
+  .col.s3 {
+    width: 24.99999%
+  }
+
+  .col.s4 {
+    width: 33.33333%
+  }
+
+  .col.s5 {
+    width: 41.66666%
+  }
+
+  .col.s6 {
+    width: 49.99999%
+  }
+
+  .col.s7 {
+    width: 58.33333%
+  }
+
+  .col.s8 {
+    width: 66.66666%
+  }
+
+  .col.s9 {
+    width: 74.99999%
+  }
+
+  .col.s10 {
+    width: 83.33333%
+  }
+
+  .col.s11 {
+    width: 91.66666%
+  }
+
+  .col.s12 {
+    width: 99.99999%
+  }
 }
 
 /* Medium */
@@ -1225,13 +1281,11 @@ dialog .content h5 {
     width: 16.66666%
   }
 
-  .col.m3,
+  .col.m3 {
-  .quarter {
     width: 24.99999%
   }
 
-  .col.m4,
+  .col.m4 {
-  .third {
     width: 33.33333%
   }
 
@@ -1239,8 +1293,7 @@ dialog .content h5 {
     width: 41.66666%
   }
 
-  .col.m6,
+  .col.m6 {
-  .half {
     width: 49.99999%
   }
 
@@ -1248,13 +1301,11 @@ dialog .content h5 {
     width: 58.33333%
   }
 
-  .col.m8,
+  .col.m8 {
-  .twothird {
     width: 66.66666%
   }
 
-  .col.m9,
+  .col.m9 {
-  .w3-threequarter {
     width: 74.99999%
   }
 

assets/static/js/main.js

@@ -215,7 +215,10 @@ function bm_element_list_undelete(sender, element_name, element_name_remove) {
     }
 }
 
-function bm_showMessage() {
+function bm_showMessage(msg = "") {
+    if(msg !== "") {
+        document.getElementById('message').innerHTML = msg;
+    }
     document.getElementById('message').show();
     setTimeout(() => {
         document.getElementById('message').close();
@@ -260,6 +263,16 @@ document.addEventListener("DOMContentLoaded", function(event){
               openDialog.remove();
           }
       }
+
+      if (event.target.classList.contains("copy-to-clipboard")) {
+        let prefix = event.target.dataset.clipboardPrefix;
+        let text = document.getElementById(event.target.dataset.clipboardFieldId).value;
+          navigator.clipboard.writeText(prefix + text).then((value) => {
+              bm_showMessage("<div class=\"success\"><p><i class=\"bi bi-check-circle\"></i>Item sharing url copied to clipboard</p></div>");
+          }).catch((err) => {
+              console.error(err);
+          });
+      }
   });
 
   document.querySelector('body').addEventListener("showModalDialog", function(evt){

assets/static/js/serviceWorker.js

@@ -1,4 +1,4 @@
-const cacheVersion = "0.29"
+const cacheVersion = "0.31"
 const cacheName = "speedtech-brainminder"
 const cacheFiles = [
     '/static/bootstrap-icons/font/bootstrap-icons.min.css',

assets/templates/items/share.tmpl

@@ -26,8 +26,15 @@
                 <p style="margin-right: 6px">
                   <label for="share-token">Share Url</label>
                   <div class="input-container">
-                    <span class="prefix">{{ .publicBaseUrl }}/item/share/</span>
+                    <span class="prefix">{{ .publicBaseUrl }}/item/shared/</span>
-                    <input name="Token" id="share-token" type="url" readonly="readonly" value="{{ .shareToken }}" />
+                    <div class="row">
+                      <div class="col s10 m10 l10 left">
+                        <input name="Token" id="share-token" value="{{ .shareToken }}" />
+                      </div>
+                      <div class="col s2 m2 l2 right">
+                        <span class="button copy-to-clipboard" title="Copy to clipboard" data-clipboard-field-id="share-token" data-clipboard-prefix="{{ .publicBaseUrl }}/item/shared/" style="margin-right: 6px"><i class='bi bi-copy copy-to-clipboard' data-clipboard-field-id="share-token" data-clipboard-prefix="{{ .publicBaseUrl }}/item/shared/"></i></span>
+                      </div>
+                    </div>
                   </div>
                 </p> 
               </div>

assets/templates/items/share_edit.tmpl

@@ -26,8 +26,15 @@
                 <p style="margin-right: 6px">
                   <label for="share-token">Share Url</label>
                   <div class="input-container">
-                  <span class="prefix">{{ .publicBaseUrl }}/item/share/</span>
+                  <span class="prefix">{{ .publicBaseUrl }}/item/shared/</span>
-                    <input name="Token" id="share-token" type="url" readonly="readonly" value="{{ .itemShare.Token }}" />
+                  <div class="row">
+                    <div class="col s10 m10 l10 left">
+                      <input name="Token" id="share-token" value="{{ .itemShare.Token }}" />
+                    </div>
+                    <div class="col s2 m2 l2 right">
+                      <span class="button copy-to-clipboard" title="Copy to clipboard" data-clipboard-field-id="share-token" data-clipboard-prefix="{{ .publicBaseUrl }}/item/shared/" style="margin-right: 6px"><i class='bi bi-copy copy-to-clipboard' data-clipboard-field-id="share-token" data-clipboard-prefix="{{ .publicBaseUrl }}/item/shared/"></i></span>
+                    </div>
+                  </div>
                   </div>
                 </p> 
               </div>

assets/templates/items/shares.tmpl

@@ -14,27 +14,27 @@
 {{ $share_name := printf "%s%v" "Share-" .Id }}
 {{ $share_name_remove := printf "%s%v" "ItemShare-ToRemove-" .Id }}
 <tr id="{{$share_name}}-Row">
-    <td class="no-label {{$share_name}}-Col">
+    <td data-label="Token" class="{{$share_name}}-Col" style="overflow: hidden;">
         {{ .Token }}
         <input type="hidden" id="{{$share_name_remove}}" name="{{$share_name_remove}}" value=""/>
     </td>
-    <td class="no-label {{$share_name}}-Col">
+    <td data-label="Editable" class="{{$share_name}}-Col">
         {{ if eq .PermissionEdit 1}}
             <i class="bi bi-check" title="Edit permission granted"></i>
         {{ else }}
             <i class="bi bi-x" title="Edit permission denied"></i>
         {{ end }}
     </td>
-    <td class="no-label {{$share_name}}-Col">
+    <td data-label="Start at" class="{{$share_name}}-Col">
-        {{ .StartDatetime }}
+        {{ .StartDatetime }}&nbsp;
     </td>
-    <td class="no-label {{$share_name}}-Col">
+    <td data-label="End at" class="{{$share_name}}-Col">
-        {{ .EndDatetime }}
+        {{ .EndDatetime }}&nbsp;
     </td>
-    <td class="no-label">
+    <td class="no-label operations" >
-        <button id="Delete-{{$share_name}}" class="delete" type="button" onclick="bm_element_list_delete(this, {{$share_name}}, {{$share_name_remove}})"><i class="bi bi-x-square" title="Remove"></i><span>Remove</span></button>
+        <button id="Edit-{{$share_name}}" href="#" hx-target="body" hx-swap="beforeend" hx-get="/item/share/edit/{{.Id}}" type="button"><i class="bi bi-pencil" title="Edit"></i></button>
-        <button id="Undelete-{{$share_name}}" style="margin-right: 5px;" class="delete" type="button" onclick="bm_element_list_undelete(this, {{$share_name}}, {{$share_name_remove}})" hidden><i class="bi bi-arrow-counterclockwise" title="Undo"></i><span>Undo</span></button>
+        <button id="Delete-{{$share_name}}" type="button" onclick="bm_element_list_delete(this, {{$share_name}}, {{$share_name_remove}})"><i class="bi bi-trash" title="Remove"></i></button>
-        <button id="Edit-{{$share_name}}" href="#" hx-target="body" hx-swap="beforeend" hx-get="/item/share/edit/{{.Id}}" class="edit" type="button"><i class="bi bi-pencil" title="Edit"></i><span>Edit</span></button>
+        <button id="Undelete-{{$share_name}}" style="margin-right: 5px;" type="button" onclick="bm_element_list_undelete(this, {{$share_name}}, {{$share_name_remove}})" hidden><i class="bi bi-arrow-counterclockwise" title="Undo"></i></button>
     </td>
   </tr>
   {{ end }}