Updates to data export button. (archived in SC) #475
Conversation
refactor grid and MAb export options to use the new component
| @@ -6228,7 +6228,6 @@ x-boundlist-item { | |||
| from(#fb4770), | |||
| to(#fb2e5c) | |||
| ); | |||
| border-radius: 9px; | |||
There was a problem hiding this comment.
they wanted square, not rounded button edges on hover
| background-repeat: no-repeat; | ||
| background-position-x: 0%; | ||
| background-size: 12px; | ||
| } |
There was a problem hiding this comment.
admittedly, my CSS foo is pretty limited so I would be interested in hearing if there are ideas to handle this more efficiently
theme/connector/view/_Learn.scss
Outdated
| margin-left: 10px; | ||
| } | ||
| .export-item-icon { | ||
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuNiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA5IDEwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5IDEwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzAwMDAwMDt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05LDd2MnYxSDhIMUgwVjdoMXYyaDdWN0g5eiBNNy4zMywzLjk0TDYuNjIsMy4yM0w1LDQuODVWMEg0djQuODVMMi4zOCwzLjIzTDEuNjcsMy45NEw0LjUsNi43N0w3LjMzLDMuOTR6Ii8+Cjwvc3ZnPgo=); |
There was a problem hiding this comment.
Can those svgs be saved in webapp/Connector/images/ as files and then used as file path?
There was a problem hiding this comment.
yes, but I thought it would be easier to use just the inlined data versions rather than check in two separate files that are only used in one place each. Do you know if there are pros/cons of one over the other?
There was a problem hiding this comment.
swtiched to the more traditional SVG files...
There was a problem hiding this comment.
It's more of a personal preference. I found the file way to be more readable and consistent. For the "export" icon case, the inline method might have the advantage of being able to define a single css selector with the svg, but use additional selector to change just the color part of it. It looks good as is.
theme/connector/view/_Learn.scss
Outdated
| @@ -941,3 +941,33 @@ img.detail-has-data-very-small { | |||
| text-transform: uppercase; | |||
| } | |||
| } | |||
|
|
|||
| /* Data export button, with light arrow icon */ | |||
| .x-btn-rounded-inverted-accent-small .x-btn-arrow-light { | |||
There was a problem hiding this comment.
Looks like the spec is expecting the arrow to point up when menu is expanded. Is that handled as well?
There was a problem hiding this comment.
It's not right now, I was going to ask the client if that were a must have versus nice to have since it doesn't easily fall out of the Ext4 implementation. I'm sure I could do it but would add more CSS complexity.
There was a problem hiding this comment.
implemented the up arrow when the menu is opened...
…oded element id, clean up CSS for export button
wendyinnis
changed the title
Rationale
As part of this feature request, we want to consolidate the export buttons for CSV and Excel formats into a single menu style button. We will be planning to use this button when data export support is added to the learn pages but for now this story is just to create the new component and wire it into the existing MAb and data grids.
Changes