-
-
Notifications
You must be signed in to change notification settings - Fork 436
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New feature: Added copyText function to admin order view page for copying order details #3960
Conversation
I would like this to be in a seperate template, so it can get used more easily (without duplicating essentially) across the backend. What do you think? |
can we do this over a special html attribute and css class combination, so the button is injected dynamically via js? (just an idea, not a requirement from my side) |
+1 on @Flyingmana 's idea. Instead of svg, may be use the copy cursor on hover: |
The Icon used is already good, what I see nowdays it already evolves to a standard recognizable copy icon. |
To add a copy icon to an element, follow these steps: Add the For example: <h4 class="icon-head head-account" data-copy-text="<?php echo $_order->getRealOrderId() ?>"><?php echo Mage::helper('sales')->__('Order # %s', $this->escapeHtml($_order->getRealOrderId())) ?> (<?php echo $_email ?>)</h4> |
I really like the idea of this PR, what about having the SVG in a CSS and then just inject a div/span placeholder that gets styled by the css? |
I think it is more convenient to use the special attributes of html tag. |
ok i mean, instead of injecting the whole svg you're injecting the placeholder that gets stylized by the css, the data-attribute stay the same |
@fballiano do you mean this? js/varien/js.js /**
* Adds copy icons to elements with the class 'copy-text'.
*/
function addCopyIcons() {
const copyTexts = document.querySelectorAll('.copy-text');
copyTexts.forEach(copyText => {
const iconStyle = JSON.parse(copyText.getAttribute('data-copy-icon'));
const svg = createSVGElement(iconStyle);
copyText.parentNode.appendChild(svg);
});
}
/**
* Creates an SVG element with the specified iconStyle.
*
* @param {Object} iconStyles - An object containing the style properties for the SVG icon.
* @param {string} [iconStyles.cursor='pointer'] - The cursor style for the SVG element.
* @param {string} iconStyles.height - The height of the SVG element.
* @param {string} iconStyles.width - The width of the SVG element.
* @param {string} [iconStyles.margin='0'] - The margin of the SVG element.
* @return {HTMLElement} The created SVG element.
*/
function createSVGElement(iconStyles) {
const copyIcon = document.createElement('span');
copyIcon.classList.add('icon-copy');
copyIcon.setAttribute('onclick', 'copyText(event)');
copyIcon.style.cursor = iconStyles.cursor || 'pointer';
copyIcon.style.height = iconStyles.height;
copyIcon.style.width = iconStyles.width;
copyIcon.style.margin = iconStyles.margin || '0';
return copyIcon;
}
/**
* Copies the text from the data-text attribute of the clicked element to the clipboard.
*
* @param {Event} event - The event object triggered by the click event.
* @return {Promise<void>} A promise that resolves when the text is successfully copied to the clipboard.
*/
function copyText(event) {
let copyText = event.currentTarget.previousElementSibling.getAttribute('data-text');
navigator.clipboard.writeText(copyText);
} phtml example <h4 class="icon-head head-account copy-text" data-text="<?= $_order->getRealOrderId() ?>" data-copy-icon='{"cursor":"pointer","margin":"8px 0 0 5px","height":"16px","width":"16px"}'><?php echo Mage::helper('sales')->__('Order # %s', $this->escapeHtml($_order->getRealOrderId())) ?> (<?php echo $_email ?>)</h4> skin/adminhtml/default/openmage/scss/override.scss .icon-copy {
display: inline-block;
background-image: url('images/icon-copy.svg');
background-repeat: no-repeat;
background-size: contain;
} |
yep and the svg could also be inlined in the css (I kinda go for this route lately) |
So you love it when a base64 svg stares you in the face :D |
svg sprites are hard(er than old-style sprites) and if we start having many svg that will be a problem, if the svg is inlined in the css that's more or less solved |
app/design/adminhtml/default/default/template/sales/order/view/tab/info.phtml
Show resolved
Hide resolved
chrome |
maybe here is the reason. Should I add some checks before writeText function? |
i've update my code in the original comment to disapper after 1s |
@empiricompany I've committed your code to switch the icon |
I've added the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
latest version is fine to me :-)
@empiricompany I'd like to get your opinion on this last version :-) |
Add copyText function to admin order view page for copying order details
Description (*)
Include the implementation of the feature described in issue #3952, allowing users to easily copy order numbers, customer emails, and tracking numbers directly from the order page with a single click.
Related Pull Requests
Fixed Issues (if relevant)
Manual testing scenarios (*)
Questions or comments