extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-06 18:12:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

WIP Taglist:

Browse Source 
- fix tag style
- fix close button
- allow to open menu when there's fixed sel_options
This commit is contained in:
Hadi Nategh 2022-03-07 16:32:39 +01:00
parent 285b71b6aa
commit bb1e9d2c30
2 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
api/js/etemplate/Et2Taglist/Et2Taglist.ts
View File

@ -41,6 +41,7 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
return {
...super.properties,
multiple: {type : Boolean},
editModeEnabled : {type : Boolean}
}
}
@ -72,6 +73,14 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
// If there are select options, enable toggle on click so user can see them
this.showAllOnEmpty = this.select_options.length>0;
}
/**
* Get the node where we're putting the options
*

63
api/js/etemplate/Et2Taglist/TaglistSelection.ts
View File

@ -21,8 +21,6 @@ export class TaglistSelection extends LitElement {
static get properties() {
return {
comboxElement: {type: Object},
canBeClosed: {type: Boolean},
canBeEdited: {type: Boolean}
}
};
@ -35,7 +33,9 @@ export class TaglistSelection extends LitElement {
}
.taglist-selection__tags {
flex: none;
flex: 0 0 auto;
display: flex;
flex-direction: row;
}
.combobox__input {
@ -43,8 +43,8 @@ export class TaglistSelection extends LitElement {
}
.taglist-selection__tag {
margin: 0 5px 3px 0;
padding: 3px 20px 3px 5px;
margin: 0px 5px 3px 0px;
padding: 3px 5px;
border: 1px solid var(--taglist-selection__tag-boder-color);
border-radius: 3px;
background-color: var(--taglist-selection__tag-bg-color);
@ -55,20 +55,30 @@ export class TaglistSelection extends LitElement {
line-height: 13px;
font-size: 11px;
white-space: normal;
max-width: calc(100% - 30px);
display:flex;
display: flex;
gap: 10px;
flex-direction: row;
}
.tag-label {
display:flex;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-grow: 1;
justify-content: center;
}
.tag-closeBtn{
width: 10px;
height: 10px;
background-position: 0 -10px;
background-position: 0px -10px;
background-size: cover;
background-repeat: no-repeat;
display:flex;
display: flex;
background-image: var(--tag-closeBtn-img);
align-self: center;
cursor: pointer;
}
.tag-closeBtn:hover {
background-position: 0px 0px;
}
`
];
@ -84,19 +94,28 @@ export class TaglistSelection extends LitElement {
/**
* @return {TaglistComboBox} returns comboboxElement from TaglistComboBox
* @return {Et2Taglist} returns comboboxElement from TaglistComboBox
*/
_getComboBoxElement()
protected _getComboBoxElement()
{
// @ts-ignore
return this.parentElement;
return <Et2Taglist> this.parentElement;
}
/**
* check if the tag can be closed
* @protected
*/
protected _canBeClosed()
{
return this._getComboBoxElement().multiple && !this._getComboBoxElement().readonly;
}
/**
* @private
* @return returns checked formElements
*/
__getSelectedTags() {
private __getSelectedTags() {
return this._getComboBoxElement().formElements.filter((_tags) => {
return _tags.checked;
}
@ -137,20 +156,20 @@ export class TaglistSelection extends LitElement {
__handleCloseBtn(_v)
{
console.log('closeBtn')
this.__getSelectedTags()[parseInt(_v.target.parentElement.dataset.index)].checked = false;
}
/**
*
* @param option
*/
_selectedTagTemplate(option)
_selectedTagTemplate(option, index)
{
return html`
<div class="taglist-selection__tag">
${this.canBeEdited ? html`<span class="tag-editBtn" @click="${this.__handleEditBtn}"></span>` : ''}
<div class="taglist-selection__tag" data-index=${index}>
${this._getComboBoxElement().editModeEnabled ? html`<span class="tag-editBtn" @click="${this.__handleEditBtn}"></span>` : ''}
<span class="tag-label">${option.value}</span>
${this.canBeClosed ? html`<span class="tag-closeBtn" @click="${this.__handleCloseBtn}"></span>` : ''}
${this._canBeClosed() ? html`<span class="tag-closeBtn" @click="${this.__handleCloseBtn}"></span>` : ''}
</div>
`;
}
@ -161,9 +180,9 @@ export class TaglistSelection extends LitElement {
_selectedTagsTemplate() {
return html`
<div class="taglist-selection__tags">
${this.__getSelectedTags().map((option) =>
${this.__getSelectedTags().map((option, index) =>
{
return this._selectedTagTemplate(option);
return this._selectedTagTemplate(option, index);
})}
</div>
`;
@ -182,7 +201,7 @@ export class TaglistSelection extends LitElement {
*/
__inputOnKeyup(ev) {
if (ev.key === 'Backspace') {
if (!this._inputNode.value) {
if (!this._inputNode.value && this._canBeClosed()) {
if (this.__getSelectedTags().length) {
this.__getSelectedTags()[this.__getSelectedTags().length - 1].checked = false;
}