feat(calendar): add copy to clipboard button in "links to calendar" p…

…anel
Alinto · May 19, 2023 · 5c4d467 · 5c4d467
1 parent 6050c4e
commit 5c4d467
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 12 deletions.
diff --git a/UI/Scheduler/English.lproj/Localizable.strings b/UI/Scheduler/English.lproj/Localizable.strings
@@ -565,6 +565,7 @@ vtodo_class2 = "(Confidential task)";
 "CalDAV URL" = "CalDAV URL ";
 "WebDAV ICS URL" = "WebDAV ICS URL";
 "WebDAV XML URL" = "WebDAV XML URL";
+"Clipboard" = "Copy to clipboard";
 
 /* Error messages */
 "dayFieldInvalid" = "Please specify a numerical value in the Days field greater or equal to 1.";

diff --git a/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox b/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
@@ -35,34 +35,58 @@
 
         <div layout="column" ng-hide="::links.calendar.isWebCalendar">
           <div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
-          <md-input-container class="md-block">
+          <md-input-container class="md-input-clipboard">
             <label><var:string label:value="CalDAV URL"/></label>
-            <input type="text" ng-model="::links.calendar.urls.calDavURL" ng-readonly="true"/>
+            <input id="user-caldav-url" type="text" ng-model="::links.calendar.urls.calDavURL" ng-readonly="true"/>
+            <md-button aria-label="Copy to clipboard" class="md-icon-button" ng-click="links.clipboard('user-caldav-url')">
+              <md-tooltip><var:string label:value="Clipboard"/></md-tooltip>
+              <md-icon label:aria-label="Copy Icon">content_copy</md-icon>
+            </md-button>
           </md-input-container>
-          <md-input-container class="md-block">
+          <md-input-container class="md-input-clipboard">
             <label><var:string label:value="WebDAV ICS URL"/></label>
-            <input  type="text" ng-model="::links.calendar.urls.webDavICSURL" ng-readonly="true"/>
+            <input  id="user-webdav-ics-url" type="text" ng-model="::links.calendar.urls.webDavICSURL" ng-readonly="true"/>
+            <md-button aria-label="Copy to clipboard" class="md-icon-button" ng-click="links.clipboard('user-webdav-ics-url')">
+              <md-tooltip><var:string label:value="Clipboard"/></md-tooltip>
+              <md-icon label:aria-label="Content_copy">content_copy</md-icon>
+            </md-button>
           </md-input-container>
-          <md-input-container class="md-block">
+          <md-input-container class="md-input-clipboard">
             <label><var:string label:value="WebDAV XML URL"/></label>
-            <input  type="text" ng-model="::links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
+            <input id="user-webdav-xml-url" type="text" ng-model="::links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
+            <md-button aria-label="Copy to clipboard" class="md-icon-button" ng-click="links.clipboard('user-webdav-xml-url')">
+              <md-tooltip><var:string label:value="Clipboard"/></md-tooltip>
+              <md-icon label:aria-label="Content_copy">content_copy</md-icon>
+            </md-button>
           </md-input-container>
         </div>
 
         <var:if condition="isPublicAccessEnabled">
           <div layout="column" ng-hide="::links.calendar.isWebCalendar">
             <div class="sg-md-title"><var:string label:value="Public Access"/></div>
-            <md-input-container class="md-block">
+            <md-input-container class="md-input-clipboard">
               <label><var:string label:value="CalDAV URL"/></label>
-              <input type="text" ng-model="::links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
+              <input id="public-caldav-url" type="text" ng-model="::links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
+              <md-button aria-label="Copy to clipboard" class="md-icon-button" ng-click="links.clipboard('public-caldav-url')">
+                <md-tooltip><var:string label:value="Clipboard"/></md-tooltip>
+                <md-icon label:aria-label="Content_copy">content_copy</md-icon>
+              </md-button>              
             </md-input-container>
-            <md-input-container class="md-block">
+            <md-input-container class="md-input-clipboard">
               <label><var:string label:value="WebDAV ICS URL"/></label>
-              <input type="text" ng-model="::links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
+              <input id="public-webdav-ics-url" type="text" ng-model="::links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
+              <md-button aria-label="Copy to clipboard" class="md-icon-button" ng-click="links.clipboard('public-webdav-ics-url')">
+                <md-tooltip><var:string label:value="Clipboard"/></md-tooltip>
+                <md-icon label:aria-label="Content_copy">content_copy</md-icon>
+              </md-button>              
             </md-input-container>
-            <md-input-container class="md-block">
+            <md-input-container class="md-input-clipboard">
               <label><var:string label:value="WebDAV XML URL"/></label>
-              <input type="text" ng-model="::links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
+              <input id="public-webdav-xml-url" type="text" ng-model="::links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
+              <md-button aria-label="Copy to clipboard" class="md-icon-button" ng-click="links.clipboard('public-webdav-xml-url')">
+                <md-tooltip><var:string label:value="Clipboard"/></md-tooltip>
+                <md-icon label:aria-label="Content_copy">content_copy</md-icon>
+              </md-button>
             </md-input-container>
           </div>
         </var:if>

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarListItem.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarListItem.directive.js
@@ -293,10 +293,16 @@
             var vm = this;
             vm.calendar = calendar;
             vm.close = close;
+            vm.clipboard = clipboard
 
             function close() {
               $mdDialog.hide();
             }
+
+            function clipboard(elem_id) {
+              let linkUrl = document.getElementById(elem_id);
+              navigator.clipboard.writeText(linkUrl.value);
+            }
           }
         };
 

diff --git a/UI/WebServerResources/scss/components/input/input.scss b/UI/WebServerResources/scss/components/input/input.scss
@@ -12,6 +12,10 @@ md-input-container {
   &.md-no-flex {
     flex: none !important;
   }
+  &.md-input-clipboard {
+    display: flex;
+    flex-direction: row-reverse;
+  }
   .md-errors-spacer {
     // Temporary fix for https://github.com/angular/material/issues/6214
     min-height: 0 !important;