From 8abe03af9fae0fc048d927cfbfab7c71b4a75361 Mon Sep 17 00:00:00 2001 From: milan Date: Sat, 27 Jul 2024 17:47:01 +0200 Subject: [PATCH] changed Mail tree styling and added setClass(..) function to Et2Tree --- api/js/etemplate/Et2Tree/Et2Tree.ts | 165 ++++++++++++++++++--------- api/src/Etemplate/Widget/Tree.php | 5 + api/templates/default/etemplate2.css | 5 + mail/inc/class.mail_tree.inc.php | 10 +- mail/js/app.js | 6 +- 5 files changed, 128 insertions(+), 63 deletions(-) diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts index 4ce681fb5e..1271db7cef 100644 --- a/api/js/etemplate/Et2Tree/Et2Tree.ts +++ b/api/js/etemplate/Et2Tree/Et2Tree.ts @@ -218,71 +218,86 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin // @ts-ignore ...super.styles, css` - :host { - --sl-spacing-large: 1rem; + :host { + --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) { - rotate: none; - padding: 0 0.2em 0 5em; - margin-left: -5em; + 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*/ - /* 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-badge::part(base) { - 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); - } - - 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; - } + background-color: var(--badge-color); /* This is the same color as app color mail */ + font-size: 1em; + font-weight: 900; + position: absolute; + top: 0; + right: 0.5em; + line-height: 60%; + } - @media only screen and (max-device-width: 768px) { - :host { - --sl-font-size-medium: 1.2rem; - } + @media only screen and (max-device-width: 768px) { + :host { + --sl-font-size-medium: 1.2rem; + } - sl-tree-item { - padding: 0.1em; - } + sl-tree-item { + 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 * diff --git a/api/src/Etemplate/Widget/Tree.php b/api/src/Etemplate/Widget/Tree.php index 82ecf54ac3..dc8dde0104 100644 --- a/api/src/Etemplate/Widget/Tree.php +++ b/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 * diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 347539641b..fcc9300b0f 100644 --- a/api/templates/default/etemplate2.css +++ b/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; + } /** diff --git a/mail/inc/class.mail_tree.inc.php b/mail/inc/class.mail_tree.inc.php index 24f90fa961..40f6be79c1 100644 --- a/mail/inc/class.mail_tree.inc.php +++ b/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( diff --git a/mail/js/app.js b/mail/js/app.js index 3c159b9d06..3ac2ede022 100755 --- a/mail/js/app.js +++ b/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()); }