diff --git a/app/templates/CoSettings/fields.inc b/app/templates/CoSettings/fields.inc index 67d209881..d94aa9049 100644 --- a/app/templates/CoSettings/fields.inc +++ b/app/templates/CoSettings/fields.inc @@ -117,7 +117,8 @@ if($vv_action == 'edit') { ], ], 'person_picker_display_types' => [ - 'singleRowItem' => true + 'singleRowItem' => true, + 'fieldLabel' => __d('field', 'CoSettings.person_picker_display_types') ] ], ]]); diff --git a/app/templates/element/form/infoDiv/grouped.php b/app/templates/element/form/infoDiv/grouped.php index c0a89aaf7..c1114d2c9 100644 --- a/app/templates/element/form/infoDiv/grouped.php +++ b/app/templates/element/form/infoDiv/grouped.php @@ -42,10 +42,10 @@ unset($fieldArguments['singleRowItem']); } ?> -
-
- Field->formField($fieldName, ...$fieldArguments) ?> +
+
+ Field->formField($fieldName, ...$fieldArguments) ?> +
-
\ No newline at end of file diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 1660796cf..e1edb4f48 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -1635,6 +1635,7 @@ ul.form-list .cm-time-picker-vals li { .cm-autocomplete-panel { overflow-y: scroll; max-height: 50vh !important; + max-width: 800px; } .cm-autocomplete-panel ul { padding: 0; @@ -1642,20 +1643,31 @@ ul.form-list .cm-time-picker-vals li { background-color: var(--cmg-color-body-bg); border: 1px solid var(--cmg-color-bg-008); } -.cm-autocomplete-panel li { +.cm-autocomplete-panel .cm-ac-item { padding: 1em; +} +.cm-autocomplete-panel li { list-style: none; border-collapse: collapse; border-bottom: 1px solid var(--cmg-color-bg-006); } -.cm-autocomplete-panel li[data-p-focus=true] { - background-color: var(--cmg-color-bg-001); - box-shadow: inset 0 0 0.5em var(--cmg-color-btn-bg-001); +.cm-autocomplete-panel li[data-p-focus="true"] { + background-color: var(--cmg-color-highlight-002); + box-shadow: inset 0 0 0.1em var(--cmg-color-highlight-007); + cursor: pointer; +} +.cm-autocomplete-panel li[data-p-focus="true"] > .cm-ac-item-is-member { + background-color: var(--cmg-color-body-bg); + box-shadow: inset 0 0 0.1em var(--cmg-color-highlight-007); + cursor: default; } .cm-autocomplete-panel .cm-ac-subitems { font-size: 0.9em; margin-left: 1em; } +.cm-ac-item .badge { + margin-left: 1em; +} .cm-ac-subitem { display: grid; grid-template-columns: 1fr 8fr; diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js index 7208397ba..5a4469e1d 100644 --- a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js +++ b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js @@ -133,7 +133,10 @@ export default { return emailWithType.join(", ") }, - highlightedquery(str, query) { + highlightedquery(str, query, isMember) { + if(isMember) { + return str + } const pattern = new RegExp(query, "i") const matchingstr = str?.match(pattern)?.pop() if(matchingstr != undefined && matchingstr != "") { @@ -171,13 +174,17 @@ export default { "emailLabel": this.txt['email'] + ": ", "identifier": this.filterByIdentifierType(item?.identifiers), "identifierPretty": this.shortenString(this.constructIdentifierCsv(this.filterByIdentifierType(item?.identifiers))), - "identifierLabel": this.txt['Identifiers'] + ": " + "identifierLabel": this.txt['Identifiers'] + ": ", + "isMember": item?._matchingData?.GroupMembers?.id ? true : false } }) }, setPerson() { + if(this.person.isMember) { + return false; + } if(this.options.type == 'default') { - this.options.inputProps.dataPersonid = this.person.value + this.options.inputProps.dataPersonid = this.person.value; } else if(this.options.type == 'field') { // The picker is part of a standard form field const field = document.getElementById(this.options.fieldName); @@ -246,9 +253,11 @@ export default { @complete="searchPeople" @item-select="setPerson">