extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-07 08:34:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
milan 2024-07-27 17:47:01 +02:00
parent 7e24bbbc05
commit 8abe03af9f
5 changed files with 128 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
api/js/etemplate/Et2Tree/Et2Tree.ts
View File

@ -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
*

5
api/src/Etemplate/Widget/Tree.php
View File

@ -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
*

5
api/templates/default/etemplate2.css
View File

@ -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;
}
/**

10
mail/inc/class.mail_tree.inc.php
View File

@ -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(

6
mail/js/app.js
View File

@ -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());
}