diff --git a/api/js/etemplate/Et2Taglist/EgwOption.ts b/api/js/etemplate/Et2Taglist/EgwOption.ts index 5b2a195376..6e1344f9d0 100644 --- a/api/js/etemplate/Et2Taglist/EgwOption.ts +++ b/api/js/etemplate/Et2Taglist/EgwOption.ts @@ -10,6 +10,8 @@ import {LionOption} from '@lion/listbox'; import {css, html} from "@lion/core"; +import {taglistStyles} from "./TaglistStyles"; +import {colorsDefStyles} from "../Styles/colorsDefStyles"; export class EgwOption extends LionOption { @@ -34,9 +36,17 @@ export class EgwOption extends LionOption { return [ ...super.styles, + colorsDefStyles, css` :host([checked]) { - visibility: hidden; + display: none; + } + :host { + line-height: 20px; + padding: 8px; + } + :host(:hover) { + background-color: var(--row_hover); } `, ]; diff --git a/api/js/etemplate/Et2Taglist/Et2Taglist.ts b/api/js/etemplate/Et2Taglist/Et2Taglist.ts index 51a94f1158..741cdc989d 100644 --- a/api/js/etemplate/Et2Taglist/Et2Taglist.ts +++ b/api/js/etemplate/Et2Taglist/Et2Taglist.ts @@ -15,6 +15,7 @@ import {LionCombobox} from "@lion/combobox"; import {SelectOption} from "../Et2Select/FindSelectOptions"; import {EgwOption} from "./EgwOption"; import {TaglistSelection} from "./TaglistSelection"; +import {taglistStyles} from "./TaglistStyles"; // Force the include, we really need this and without it the file will be skipped const really_import_me = EgwOption; @@ -29,10 +30,25 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox) { return [ ...super.styles, + taglistStyles, css` :host { display: block; + border: 1px solid var(--taglist-combobox__container-boder-color); + border-radius: 3px; + min-height: 24px; } + * > ::slotted([slot="input"]){min-height:24px;} + .input-group__container{border:none;} + * > ::slotted([role="listbox"]) { + border: 1px solid; + border-color: var(--taglist-combobox__container-boder-color); + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-top: none; + margin-top: 1px; + } + ` ]; } diff --git a/api/js/etemplate/Et2Taglist/TaglistSelection.ts b/api/js/etemplate/Et2Taglist/TaglistSelection.ts index f19fd051f5..fa67fc5740 100644 --- a/api/js/etemplate/Et2Taglist/TaglistSelection.ts +++ b/api/js/etemplate/Et2Taglist/TaglistSelection.ts @@ -30,12 +30,15 @@ export class TaglistSelection extends LitElement { css` :host { display: flex; + padding: 2px; + padding-top: 0px; } .taglist-selection__tags { flex: 0 0 auto; display: flex; flex-direction: row; + gap:5px; } .combobox__input { @@ -43,7 +46,7 @@ export class TaglistSelection extends LitElement { } .taglist-selection__tag { - margin: 0px 5px 3px 0px; + margin: 2px 0px 0px 0px; padding: 3px 5px; border: 1px solid var(--taglist-selection__tag-boder-color); border-radius: 3px; diff --git a/api/js/etemplate/Et2Taglist/TaglistStyles.ts b/api/js/etemplate/Et2Taglist/TaglistStyles.ts index 32ebe4f2f8..3494d31663 100644 --- a/api/js/etemplate/Et2Taglist/TaglistStyles.ts +++ b/api/js/etemplate/Et2Taglist/TaglistStyles.ts @@ -12,7 +12,7 @@ export const taglistStyles = css` --taglist-selection__tag-bg-img : linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%); /****** colors ************/ - --taglist-combobox__container-boder-color : silver; + --taglist-combobox__container-boder-color : #c0c0c0; --taglist-selection__tag-boder-color : #aaa; --taglist-selection__tag-bg-color : #e4e4e4; --taglist-selection__tag-color : #333; diff --git a/api/js/etemplate/Styles/colorsDefStyles.ts b/api/js/etemplate/Styles/colorsDefStyles.ts index 3acb8dc1dc..06df8c8d41 100644 --- a/api/js/etemplate/Styles/colorsDefStyles.ts +++ b/api/js/etemplate/Styles/colorsDefStyles.ts @@ -36,5 +36,7 @@ export const colorsDefStyles = css` --bg_color_30_gray : #B3B3B3; --bg_color_40_gray : #999999; --bg_color_50_gray : #808080; + + --row_hover : rgba(153,204,255,.4); } `; \ No newline at end of file