Link fixes

- Enable link webcomponents in etemplate.php
- Fix widget ID got overwritten
- Put title into light DOM for easier styling
- Styling
This commit is contained in:
nathan 2022-05-11 15:10:09 -06:00
parent 875a3996aa
commit d23b7c1a51
3 changed files with 23 additions and 6 deletions

View File

@ -13,7 +13,7 @@
use EGroupware\Api;
// add et2- prefix to following widgets/tags, if NO <overlay legacy="true"
const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|date(-time[^\s]*|-duration|-since)?|textbox|textarea|button|colorpicker|description|image|url(-email|-phone|-fax)?))(/?|\s[^>]*)>#m';
const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|date(-time[^\s]*|-duration|-since)?|textbox|textarea|button|colorpicker|description|image|link|link-string|link-list|url(-email|-phone|-fax)?))(/?|\s[^>]*)>#m';
const ADD_ET2_PREFIX_LAST_GROUP = 6;
// unconditional of legacy add et2- prefix to this widgets

View File

@ -36,12 +36,15 @@ export class Et2Link extends ExposeMixin<Et2Widget>(Et2Widget(LitElement)) imple
display: block;
cursor: pointer;
}
:host:hover {
text-decoration: underline
}
/** Style based on parent **/
:host-context(et2-link-string) {
display: inline;
}
:host-context(et2-link-string):hover {
text-decoration: underline;
:host-context(et2-link-list):hover {
text-decoration: none;
}
`
];
@ -125,6 +128,11 @@ export class Et2Link extends ExposeMixin<Et2Widget>(Et2Widget(LitElement)) imple
super.connectedCallback();
}
createRenderRoot()
{
return this;
}
render()
{
let title = this.title;
@ -155,7 +163,7 @@ export class Et2Link extends ExposeMixin<Et2Widget>(Et2Widget(LitElement)) imple
if(!_value)
{
this.app = "";
this.id = "";
this.entry_id = "";
this.title = "";
return;
}
@ -191,6 +199,7 @@ export class Et2Link extends ExposeMixin<Et2Widget>(Et2Widget(LitElement)) imple
}
Object.keys(_value).forEach(key =>
{
// Skip these, they're either handled explicitly, or ID which we don't want to mess with
if(["app", "entry_id", "title", "id"].indexOf(key) != -1)
{
return;

View File

@ -1235,13 +1235,13 @@ div.et2_link_entry input.ui-autocomplete-input {
padding-right: 0;
}
.et2_link, et2-link-string > et2-link {
.et2_link, et2-link {
cursor: pointer;
color: #003075;
text-decoration: none;
}
.et2_link:hover {
.et2_link:hover, et2-link:hover {
text-decoration: underline;
}
@ -1288,6 +1288,14 @@ ul.et2_link_string {
height: 16px;
}
et2-link-list et2-link {
color: initial;
}
et2-link-list et2-link:hover {
text-decoration: initial;
}
.et2_link_list .icon img,
.et2_vfs .icon img {
width: 16px;