Add new copy icon

MTG · Nov 28, 2023 · 2f324d1 · 2f324d1
1 parent f384bf5
commit 2f324d1
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 10 deletions.
diff --git a/freesound/static/bw-frontend/bw-icons/demo.html b/freesound/static/bw-frontend/bw-icons/demo.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> bw-icons <small class="fgc1">(Glyphs:&nbsp;86)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> bw-icons <small class="fgc1">(Glyphs:&nbsp;87)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
@@ -1217,6 +1217,20 @@ <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
                 <input type="text" readonly value="clipboard, board" class="liga unitRight" />
             </div>
         </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="bw-icon-copy"></span>
+                <span class="mls"> bw-icon-copy</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93d;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
     </div>
 
     <!--[if gt IE 8]><!-->

diff --git a/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.eot b/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.eot
diff --git a/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.svg b/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.svg
diff --git a/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.ttf b/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.ttf
diff --git a/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.woff b/freesound/static/bw-frontend/bw-icons/fonts/bw-icons.woff
diff --git a/freesound/static/bw-frontend/bw-icons/selection.json b/freesound/static/bw-frontend/bw-icons/selection.json
diff --git a/freesound/static/bw-frontend/bw-icons/style.css b/freesound/static/bw-frontend/bw-icons/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'bw-icons';
-  src:  url('fonts/bw-icons.eot?9lnmqr');
-  src:  url('fonts/bw-icons.eot?9lnmqr#iefix') format('embedded-opentype'),
-    url('fonts/bw-icons.ttf?9lnmqr') format('truetype'),
-    url('fonts/bw-icons.woff?9lnmqr') format('woff'),
-    url('fonts/bw-icons.svg?9lnmqr#bw-icons') format('svg');
+  src:  url('fonts/bw-icons.eot?anucm6');
+  src:  url('fonts/bw-icons.eot?anucm6#iefix') format('embedded-opentype'),
+    url('fonts/bw-icons.ttf?anucm6') format('truetype'),
+    url('fonts/bw-icons.woff?anucm6') format('woff'),
+    url('fonts/bw-icons.svg?anucm6#bw-icons') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -335,3 +335,6 @@
 .bw-icon-clipboard:before {
   content: "\e9b8";
 }
+.bw-icon-copy:before {
+  content: "\e93d";
+}
diff --git a/freesound/static/bw-frontend/src/components/tagsFormField.js b/freesound/static/bw-frontend/src/components/tagsFormField.js
@@ -1,6 +1,7 @@
 import { createIconElement } from '../utils/icons'
 import { getJSONFromPostRequestWithFetch } from "../utils/postRequest";
 import { addTypeAheadFeatures } from '../components/typeahead'
+import { showToast } from './toast';
 
 const fetchTagSuggestions = async inputElement => {
     const inputWrapperElement = inputElement.parentNode;
@@ -29,14 +30,16 @@ const onSuggestionSelectedFromDropdown = (suggestion, suggestionsWrapper, inputE
     }
 }
 
-const drawWrapperContents = (inputWrapperElement, inputElement) => {
+const drawWrapperContents = (inputWrapperElement, inputElement, tagsHiddenInput) => {
     const currentTags = inputWrapperElement.dataset.currentTags;
 
     const existingTagElements = inputWrapperElement.getElementsByTagName('span');
     [...existingTagElements].forEach(element => {element.remove()});
 
+    let someTagsRendered = false;
     currentTags.split(' ').forEach((tagToRender, index) => {
         if (tagToRender !== ''){
+            someTagsRendered = true;
             const tagElement = document.createElement('span');
             tagElement.innerText = tagToRender;
             tagElement.classList = 'bg-white text-black border-grey-light text-center padding-1 no-text-wrap no-letter-spacing h-spacing-1 v-spacing-1';
@@ -58,7 +61,39 @@ const drawWrapperContents = (inputWrapperElement, inputElement) => {
             tagElement.appendChild(closeIconNode);
             inputWrapperElement.insertBefore(tagElement, inputElement);
         }
-    });    
+    });
+
+    if (someTagsRendered){
+        // Add action buttons
+        const buttonsWrapper = document.createElement('div');
+        buttonsWrapper.style="position:absolute;right:10px;top:8px;z-index:1;";
+        inputWrapperElement.appendChild(buttonsWrapper);
+
+        const copyTagsButton = document.createElement('a');
+        copyTagsButton.title = "Copy the tags from this sound"
+        copyTagsButton.ariaLabel = "Copy the tags from this sound"
+        copyTagsButton.innerHTML = '<span class="bw-icon bw-icon-copy"></span>';
+        copyTagsButton.className = 'bw-link--black no-hover cursor-pointer'
+        copyTagsButton.addEventListener('click', evt => {
+            evt.preventDefault();
+            navigator.clipboard.writeText(tagsHiddenInput.value);
+            showToast(`Tags "${tagsHiddenInput.value}" copied to clipboard`);
+        })
+        buttonsWrapper.appendChild(copyTagsButton);
+
+        const clearTagsButton = document.createElement('a');
+        clearTagsButton.title = "Clear tags"
+        clearTagsButton.ariaLabel = "Clear tags"
+        clearTagsButton.innerHTML = '<span class="bw-icon bw-icon-close"></span>';
+        clearTagsButton.className = 'bw-link--black no-hover cursor-pointer h-spacing-left-1'
+        clearTagsButton.style = 'font-size: 10px;'
+        clearTagsButton.addEventListener('click', evt => {
+            evt.preventDefault();
+            inputWrapperElement.dataset.currentTags = '';
+            updateTags(inputElement, '');
+        })
+        buttonsWrapper.appendChild(clearTagsButton);
+    }    
 }
 
 const allowedTagCharactersTestRegex = new RegExp('^[a-zA-Z0-9-]$');
@@ -74,7 +109,7 @@ const updateTags = (inputElement, newTagsStr)  => {
     inputWrapperElement.dataset.currentTags = inputWrapperElement.dataset.currentTags.split(' ').filter(item => !(item === '-')).join(' ');  // Remove 1 character tags which are a dash
     inputWrapperElement.dataset.currentTags = inputWrapperElement.dataset.currentTags.replace(/\s+/g, ' ').trim();  // Remove extra white spaces
     tagsHiddenInput.value = inputWrapperElement.dataset.currentTags;
-    drawWrapperContents(inputWrapperElement, inputElement);
+    drawWrapperContents(inputWrapperElement, inputElement, tagsHiddenInput);
 }
 
 const prepareTagsFormFields = (container) => {