Buttons for edit and copy of URLProperty added:

- Compass icon is used for `EditIcon`
 - some CSS tweaks for proper hover effects

webapp/src/components/kanban/kanbanCard.scss

@@ -78,7 +78,7 @@
         }
     }
 
-    .IconButton {
+    .optionsMenu .IconButton {
         border-radius: 3px;
         margin-right: 6px;
         padding: 0;

webapp/src/components/properties/link/link.scss

@@ -18,12 +18,17 @@
         background-color: rgb(var(--center-channel-color-rgb), 0.1);
     }
 
-    .Button_Edit {
+    .IconButton {
         display: none;
+        margin-right: 4px;
+
+        &:hover {
+            background-color: rgb(var(--center-channel-color-rgb), 0.1);
+        }
     }
 
     &:hover {
-        .Button_Edit {
+        .IconButton {
             display: flex;
         }
     }

webapp/src/components/properties/link/link.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useRef, useState} from 'react'
+import {useIntl} from 'react-intl'
 
 import Editable, {Focusable} from '../../../widgets/editable'
 
@@ -9,6 +10,8 @@ import './link.scss'
 import {Utils} from '../../../utils'
 import EditIcon from '../../../widgets/icons/edit'
 import IconButton from '../../../widgets/buttons/iconButton'
+import DuplicateIcon from '../../../widgets/icons/duplicate'
+import {sendFlashMessage} from '../../flashMessages'
 
 type Props = {
     value: string
@@ -25,6 +28,7 @@ const URLProperty = (props: Props): JSX.Element => {
     const isEmpty = !props.value?.trim()
     const showEditable = !props.readonly && (isEditing || isEmpty)
     const editableRef = useRef<Focusable>(null)
+    const intl = useIntl()
 
     useEffect(() => {
         if (isEditing) {
@@ -72,9 +76,20 @@ const URLProperty = (props: Props): JSX.Element => {
             {!props.readonly &&
             <IconButton
                 className='Button_Edit'
+                title={intl.formatMessage({id: 'URLProperty.edit', defaultMessage: 'Edit'})}
                 icon={<EditIcon/>}
                 onClick={() => setIsEditing(true)}
             />}
+            <IconButton
+                className='Button_Copy'
+                title={intl.formatMessage({id: 'URLProperty.copy', defaultMessage: 'Copy'})}
+                icon={<DuplicateIcon/>}
+                onClick={(e) => {
+                    e.stopPropagation()
+                    Utils.copyTextToClipboard(props.value)
+                    sendFlashMessage({content: intl.formatMessage({id: 'URLProperty.copiedLink', defaultMessage: 'Copied!'}), severity: 'high'})
+                }}
+            />
         </div>
     )
 }

webapp/src/widgets/icons/edit.scss

@@ -3,4 +3,5 @@
     stroke: none;
     width: 24px;
     height: 24px;
+    font-size: 18px;
 }

webapp/src/widgets/icons/edit.tsx

@@ -4,19 +4,13 @@
 import React from 'react'
 
 import './edit.scss'
+import CompassIcon from './compassIcon'
 
 export default function EditIcon(): JSX.Element {
     return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            className='EditIcon Icon'
-            viewBox='0 0 100 100'
-        >
-            <g>
-                <path d='M35.2,48.7l-2,14.1c-0.1,0.9,0.2,1.9,0.8,2.5c0.6,0.6,1.3,0.9,2.1,0.9c0.1,0,0.3,0,0.4,0l14.1-2c1.7-0.2,3.4-1.1,4.6-2.3   l28.2-28.2l4.6-4.5c1.8-1.8,2.7-4.1,2.7-6.6c0-2.5-1-4.9-2.7-6.6l-4.5-4.5c-3.7-3.7-9.6-3.7-13.3,0l-4.5,4.6L37.5,44.1   C36.2,45.3,35.4,47,35.2,48.7z M74.5,15.6c1.3-1.3,3.5-1.3,4.8,0l4.5,4.5c0.6,0.6,1,1.5,1,2.4c0,0.9-0.4,1.8-1,2.4c0,0,0,0,0,0   l-2.4,2.4L72.1,18L74.5,15.6z M41.1,49.5c0.1-0.4,0.3-0.9,0.6-1.2l26.1-26.1l4.7,4.7l4.7,4.7L51,57.7c-0.3,0.3-0.7,0.5-1.2,0.6   l-10.2,1.4L41.1,49.5z'/>
-                <path d='M88.3,35.8c-1.7,0-3,1.3-3,3v42.7c0,3.6-2.9,6.5-6.5,6.5H21.2c-3.6,0-6.5-2.9-6.5-6.5v-61c0-3.6,2.9-6.5,6.5-6.5h39.2   c1.7,0,3-1.3,3-3s-1.3-3-3-3H21.2C14.3,8,8.7,13.6,8.7,20.5v61c0,6.9,5.6,12.5,12.5,12.5h57.5c6.9,0,12.5-5.6,12.5-12.5V38.8   C91.3,37.2,89.9,35.8,88.3,35.8z'/>
-                <path d='M24.4,72c-1.7,0-3,1.3-3,3s1.3,3,3,3h28.8c1.7,0,3-1.3,3-3s-1.3-3-3-3H24.4z'/>
-            </g>
-        </svg>
+        <CompassIcon
+            className='EditIcon'
+            icon='pencil-outline'
+        />
     )
 }