Share citation copy button #530
Conversation
orlinmalkja
force-pushed
the
share-citation-copy-button
branch
from
29c2d32 to
122ff20
Compare
|
There is a discussion about this feature here #470. |
|
The design of the button should be more seamless. Check out the implementation of it here in GitHub https://github.com/subugoe/tido/pull/530/files. If you look at the file path at the top of the list you will discover the small copy icon. Upon click it turns into a small check icon. |
|
Okay, I have another question: Do we still show the confirmation message 'Copied successfully' below the button ? |
|
I'd say yes |
|
The tooltip should be positioned absolutely. It should not move othr things in the view. Also the copy icon should be placed inline behind the text. |
src/utils/icons/icons.js
Outdated
| export const dropdown = | ||
| '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>'; | ||
| export const copy = | ||
| '<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1V9a4 4 0 0 0-4-4h-3a1.99 1.99 0 0 0-1 .267V5a2 2 0 0 1 2-2h7Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M8 7.054V11H4.2a2 2 0 0 1 .281-.432l2.46-2.87A2 2 0 0 1 8 7.054ZM10 7v4a2 2 0 0 1-2 2H4v6a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z" clip-rule="evenodd"/></svg>'; |
There was a problem hiding this comment.
Why is everything reformatted? Also please don't add tailwind classes here. Use them on the outer element. Also look at the other icon svg. They have 1em as width/height. This is for using font-size on the outer element to control the size of the icon.
There was a problem hiding this comment.
I am not sure, why everything is shown as reformatted. I actually only added the extra copy icon. Anyway in one of my latest commits I restored the icons as they are in develop branch and then just added my icon.
There was a problem hiding this comment.
Please check my comment above, the width/height should be 1em.
|
I still have a few points:
|
| } else { | ||
| // when there is one panel containing content and metadata views | ||
| const panelContainingMetadata = panels.filter((panel) => | ||
| panel.label.toLowerCase().includes("metadata") |
There was a problem hiding this comment.
This line breaks TIDO when testing with EUPT config. The reason is that you try to parse a label value. Please find a better way. We should never parse user given values in generic products!
There was a problem hiding this comment.
@paulpestov thank you for the hint! I selected the metadata view by conditionally filtering the views using the connector id
|
|
||
| return matches !== null; | ||
| } | ||
|
|
||
| function getMetadataView(panels) { | ||
| let panelMetadata = panels.filter( | ||
| (panel) => panel.label.toLowerCase() === "metadata" |
There was a problem hiding this comment.
Here the same, user value.
|
The points I stated previously are done 👍 |
|
@paulpestov I think I fixed the selection part of the metadata view and centered the tooltip below the share button! |
Please check the functionality with this url: https://api.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/syriac/collection.json