CRISTAL-422: Implement styles for external links #577
Conversation
* Implemented an icon for the external links as it is in XWiki Standard
skin/src/vue/c-view.vue
Outdated
| display: inline-flex; | ||
| } | ||
|
|
||
| :deep(.wikiexternallink a:after) { |
There was a problem hiding this comment.
how does it behave in edit mode?
There was a problem hiding this comment.
@manuelleduc the editor does not use the XWiki css class wikiexternallink so it won't work.
There was a problem hiding this comment.
Good point. But, the CCS should nonetheless be placed at a location where the external links will have the correct style applied once we start adding the right class.
If you want I can take over the PR for this part.
There was a problem hiding this comment.
I think you have more knowledge on that than me, so if it's not too much trouble for you, I actually prefer it. Otherwise, you can just point me in the right direction.
Support for external links in edit mode.
| text-transform: none; | ||
| line-height: 1; | ||
| -webkit-font-smoothing: antialiased; | ||
| font-size: 0.7rem; |
There was a problem hiding this comment.
Feels strange to fix the link size while it's probably something specific for each design system
I would limit this to only the additional icon (and any other think helping to distinguish visually external link), and nothing else.
There was a problem hiding this comment.
I tried this approach, but then the icon followed the main text size and became huge. Shoelace and Vuetify don't have specific styles for external links, so that's on us.
There was a problem hiding this comment.
ah right, I missed the style only applied on the :after part, so all good.
Jira URL
https://jira.xwiki.org/projects/CRISTAL/issues/CRISTAL-422
Changes
Description
Clarifications
Screenshots & Video
Before:
After:
Executed Tests
Expected merging strategy