changed Mail tree styling and added setClass(..) function to Et2Tree

api/js/etemplate/Et2Tree/Et2Tree.ts

@@ -218,71 +218,86 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
 			// @ts-ignore
 			...super.styles,
 			css`
-				:host {
+                :host {
-					--sl-spacing-large: 1rem;
+                    --sl-spacing-large: 1rem;
+                }
+
+                ::part(expand-button) {
+                    rotate: none;
+                    padding: 0 0.2em 0 5em;
+                    margin-left: -5em;
+
+                }
+
+                /* Stop icon from shrinking if there's not enough space */
+                /* increase font size by 2px this was previously done in pixelegg css but document css can not reach shadow root*/
+
+                sl-tree-item sl-icon {
+                    flex: 0 0 1em;
+                    font-size: calc(100% + 2px);
+                }
+
+                ::part(label) {
+                    overflow: hidden;
+                }
+
+                ::part(label):hover {
+                    text-decoration: underline;
+                }
+
+                .tree-item__label {
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                sl-tree-item.drop-hover {
+                    background-color: var(--highlight-background-color);
+                }
+				
+				/*Mail specific style TODO move it out of the component*/
+                sl-tree-item.unread > .tree-item__label {
+                        font-weight: bold;
+                    }
+				
+                sl-tree-item.mailAccount > .tree-item__label {
+                    font-weight: bold;
+                }
+				sl-tree > sl-tree-item:nth-of-type(n+2){
+					margin-top: 2px;
 				}
+				/* End Mail specific style*/
 
-				::part(expand-button) {
+                sl-tree-item.drop-hover sl-tree-item {
-					rotate: none;
+                    background-color: var(--sl-color-neutral-0);
-					padding: 0 0.2em 0 5em;
+                }
-					margin-left: -5em;
 
-				}
+                /*TODO color of selected marker in front should be #006699 same as border top color*/
 
-				/* Stop icon from shrinking if there's not enough space */
+                sl-badge::part(base) {
-				/* increase font size by 2px this was previously done in pixelegg css but document css can not reach shadow root*/
 
-				sl-tree-item sl-icon {
+                    background-color: var(--badge-color); /* This is the same color as app color mail */
-					flex: 0 0 1em;
+                    font-size: 1em;
-					font-size: calc(100% + 2px);
+                    font-weight: 900;
-				}
+                    position: absolute;
-
+                    top: 0;
-				::part(label) {
+                    right: 0.5em;
-					overflow: hidden;
+                    line-height: 60%;
-				}
+                }
-
-				::part(label):hover {
-					text-decoration: underline;
-				}
-
-				.tree-item__label {
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-
-				sl-tree-item.drop-hover {
-					background-color: var(--highlight-background-color);
-				}
-
-				sl-tree-item.drop-hover sl-tree-item {
-					background-color: var(--sl-color-neutral-0);
-				}
-				/*TODO color of selected marker in front should be #006699 same as border top color*/
-
-				sl-badge::part(base) {
-
-					background-color: var(--sl-color-neutral-500);
-					font-size: 0.75em;
-					font-weight: 700;
-					position: absolute;
-					top: 0;
-					right: 0.5em;
-				}
 
 
-				@media only screen and (max-device-width: 768px) {
+                @media only screen and (max-device-width: 768px) {
-					:host {
+                    :host {
-						--sl-font-size-medium: 1.2rem;
+                        --sl-font-size-medium: 1.2rem;
-					}
+                    }
 
-					sl-tree-item {
+                    sl-tree-item {
-						padding: 0.1em;
+                        padding: 0.1em;
-					}
+                    }
 
 
-				}
+                }
-			`
+            `
 
 
 		]
@@ -578,6 +593,46 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
 			temp.setAttribute("style", _style);
 	}
 
+	/**
+	 * manipulate the classes of a tree item
+	 * this sets the class property of the item (just like php might set it).
+	 * This triggers the class attribute of the sl-tree-item to be set
+	 * mode "=" remove all classes and set only the given one
+	 * mode "+" add the given class
+	 * mode "-" remove the given class
+	 * @param _id
+	 * @param _className
+	 * @param _mode
+	 */
+	setClass(_id: string, _className: string, _mode: '=' | '+' | '-')
+	{
+		const item = this.getNode(_id);
+		if (item == null) return;
+		if (!item.class) item.class = "";
+		switch (_mode)
+		{
+			case "=":
+				item.class = _className
+				break;
+			case "-":
+				item.class = item.class.replace(_className, "")
+				break;
+			case "+":
+				if (!item.class.includes(_className))
+				{
+					if (item.class == "")
+					{
+						item.class = _className;
+					} else
+					{
+						item.class += " " + _className;
+					}
+				}
+				break;
+		}
+		if (item.class.trim() === "") item.class = undefined;
+	}
+
 	/**
 	 * getTreeNodeOpenItems
 	 *

api/src/Etemplate/Widget/Tree.php

@@ -108,6 +108,11 @@ class Tree extends Etemplate\Widget
 	 */
 	const NOCHECKBOX = 'nocheckbox';
 
+    /**
+     * key to add a custum class to the tree item
+     */
+    const CLASS_LIST = 'class';
+
 	/**
 	 * Constructor
 	 *

api/templates/default/etemplate2.css

@@ -47,6 +47,11 @@
     --warning-color: rgba(255, 204, 0, .5);
     --error-color: rgba(204, 0, 51, .5);
 
+    /*default color of tree badges
+     this is the same as mail app color
+    */
+    --badge-color: #006699;
+
 }
 
 /**

mail/inc/class.mail_tree.inc.php

@@ -189,7 +189,7 @@ class mail_tree
 	function getTree ($_parent = null, $_profileID = '', $_openTopLevel = 1, $_noCheckboxNS = false, $_subscribedOnly= false, $_allInOneGo = false, $_checkSubscribed = true)
 	{
 		//Init mail folders
-		$tree = array(Tree::ID=> $_parent?$_parent:0,Tree::CHILDREN => array());
+        $tree = array(Tree::ID => $_parent ? $_parent : 0, Tree::CHILDREN => array(), 'class' => 'mailAccount');
 		if (!isset($this->ui->mail_bo)) throw new Api\Exception\WrongUserinput(lang('Initialization of mail failed. Please use the Wizard to cope with the problem'));
 		$hDelimiter = $this->ui->mail_bo->getHierarchyDelimiter();
 
@@ -225,7 +225,7 @@ class mail_tree
 						Tree::AUTOLOAD_CHILDREN => $_allInOneGo?false:self::nodeHasChildren($node),
 						Tree::CHILDREN =>array(),
 						Tree::LABEL => $nodeData['text'],
-						Tree::TOOLTIP => $nodeData['tooltip'],
+                        Tree::TOOLTIP => $nodeData['tooltip'] != $nodeData['text'] ? $nodeData['tooltip'] : '',
 						Tree::IMAGE_LEAF => self::$leafImages['folderLeaf'],
 						Tree::IMAGE_FOLDER_OPEN => self::$leafImages['folderOpen'],
 						Tree::IMAGE_FOLDER_CLOSED => self::$leafImages['folderClosed'],
@@ -274,7 +274,6 @@ class mail_tree
 						Tree::CHILDREN =>array(),
 						Tree::LABEL =>lang($folder['MAILBOX']),
 						Tree::OPEN => self::getNodeLevel($folder['MAILBOX'], $folder['delimiter']) <= $_openTopLevel?1:0,
-						Tree::TOOLTIP => lang($folder['MAILBOX']),
 						Tree::CHECKED => $_checkSubscribed?$folder['SUBSCRIBED']:false,
 						Tree::NOCHECKBOX => 0,
 						'parent' => $parent?$_profileID.self::DELIMITER.implode($folder['delimiter'], $parent):$_profileID,
@@ -506,8 +505,9 @@ class mail_tree
 						'spamfolder'=> $accObj->imapServer()->acc_folder_junk&&(strtolower($accObj->imapServer()->acc_folder_junk)!='none')?true:false,
 						'archivefolder'=> $accObj->imapServer()->acc_folder_archive&&(strtolower($accObj->imapServer()->acc_folder_archive)!='none')?true:false
 					),
-					Tree::NOCHECKBOX  => $_noCheckbox
+                    Tree::NOCHECKBOX => $_noCheckbox,
-				);
+                    Tree::CLASS_LIST => 'mailAccount',
+                );
 			}
 			catch (\Exception $ex) {
 				$baseNode = array(

mail/js/app.js

@@ -1930,9 +1930,9 @@ app.classes.mail = AppJS.extend(
 			// display folder-name bold for unseen mails
 			if(_status[folderId])
 			{
-				ftree.setStyle(folderId, 'font-weight: bold !important');
+				ftree.setClass(folderId, 'unread','+');
 			}else if(!_status[folderId] || _status[folderId] ===0 || _status[folderId] ==="0") {
-				ftree.setStyle(folderId, 'font-weight: normal');
+				ftree.setClass(folderId, 'unread','-');
 			}
 			ftree.set_badge(folderId,_status[folderId]);
 			//alert(i +'->'+_status[i]);
@@ -2161,7 +2161,7 @@ app.classes.mail = AppJS.extend(
 			if (newcounter === 0)
 			{
 				newcounter = null;
-				ftree.setStyle(_foldernode.id, 'font-weight: normal');
+				ftree.setClass(_foldernode.id, 'unread','-');
 			}
 			ftree.set_badge(_foldernode.id, newcounter?.toString());
 		}