implement hq widget author image and notifications updates

This commit is contained in:
Mario
2023-02-12 10:43:31 +00:00
parent 724b8cc6a5
commit a1eb39872b
10 changed files with 72 additions and 53 deletions

View File

@@ -242,6 +242,11 @@ a.wikilist {
position: relative;
}
/* messages (hq) */
#messages-author-container {
z-index: 3 !important;
}
/* hq_controls */
.hq_controls_fixed_bottom_center {
z-index: 1028;
@@ -250,3 +255,4 @@ a.wikilist {
left: 50%;
transform: translateX(-50%);
}

View File

@@ -38,7 +38,7 @@ function contact_format(item) {
var desc = ((item.label) ? item.nick + ' ' + item.label : item.nick);
if(typeof desc === 'undefined') desc = '';
if(desc) desc = ' ('+desc+')';
return "<div class='{0} dropdown-item dropdown-notification clearfix' title='{4}'><img class='menu-img-2' src='{1}' loading='lazy'><span class='fw-bold contactname'>{2}</span><span class='dropdown-sub-text'>{4}</span></div>".format(item.taggable, item.photo, item.name, desc, typeof(item.link) !== 'undefined' ? item.link : desc.replace('(','').replace(')',''));
return "<div class='dropdown-item dropdown-notification lh-sm text-truncate' title='{4}'><img class='menu-img-2' src='{1}' loading='lazy'><strong>{2}</strong><br><small class='opacity-75'>{4}</small></div>".format(item.taggable, item.photo, item.name, desc, typeof(item.link) !== 'undefined' ? item.link : desc.replace('(','').replace(')',''));
}
else
return "";

View File

@@ -774,20 +774,6 @@ div.jGrowl div.jGrowl-notification {
text-overflow: ellipsis;
}
.dropdown-notification,
.notification,
.member-item {
line-height: 1rem;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
}
.notification.notification-forum {
font-size: 0.9rem;
}
#acl-search::-webkit-input-placeholder {
/* non-fontawesome fonts set a fallback for text parts of the placeholder*/
font-family: ForkAwesome, sans-serif, arial, freesans;
@@ -1202,15 +1188,15 @@ img.mail-conv-sender-photo {
.menu-img-3 {
width: 3rem;
height: 3rem;
margin-right: 5px;
margin-right: .5rem;
border-radius: var(--bs-border-radius);
float: left;
}
.menu-img-2 {
height: 2rem;
width: 2rem;
margin-right: 5px;
height: 2.3rem;
width: 2.3rem;
margin-right: .5rem;
border-radius: var(--bs-border-radius);
float: left;
}

View File

@@ -129,8 +129,8 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
$x .= $schemecss;
}
$left_aside_width = 21; //unit: rem
$right_aside_width = 21; //unit: rem
$left_aside_width = 22; //unit: rem
$right_aside_width = 22; //unit: rem
$main_width = $left_aside_width + $right_aside_width + intval($converse_width);

View File

@@ -6,7 +6,7 @@
<div class="col">
<div class="card">
<a href="{{$i.url}}" class="text-reset">
<div class="card-body">
<div class="card-body clearfix">
{{if $i.title}}
<strong>{{$i.title}}</strong>
<hr>

View File

@@ -25,17 +25,25 @@
<div id="messages-widget" class="border-start border-end border-bottom overflow-auto mb-3 clearfix" style="height: 70vh;">
<div id="messages-template" rel="template" class="d-none">
<a href="{6}" class="list-group-item list-group-item-action message" data-b64mid="{0}">
<div class="d-flex w-100 justify-content-between">
<div class="mb-1 text-truncate" title="{5}">
{7}
<strong>{4}</strong>
<div class="mb-2">
<img src="{9}" loading="lazy" class="rounded menu-img-2">
<div class="text-nowrap">
<div class="d-flex justify-content-between align-items-center lh-sm">
<div class="text-truncate mr-1">
{7}
<strong title="{4}">{4}</strong>
</div>
<small class="messages-timeago opacity-75" title="{1}"></small>
</div>
<div class="text-truncate">
<small class="opacity-75" title="{5}">{5}</small>
</div>
</div>
<small class="messages-timeago text-nowrap" title="{1}"></small>
</div>
<div class="mb-1">
<div class="mb-2">
<div class="text-break">{2}</div>
</div>
<small>{3}</small>
<small class="opacity-75">{3}</small>
{8}
</a>
</div>
@@ -47,17 +55,25 @@
</div>
{{foreach $entries as $e}}
<a href="{{$e.href}}" class="list-group-item list-group-item-action message" data-b64mid="{{$e.b64mid}}">
<div class="d-flex w-100 justify-content-between">
<div class="mb-1 text-truncate" title="{{$e.author_addr}}">
{{$e.icon}}
<strong>{{$e.author_name}}</strong>
<div class="mb-2">
<img src="{{$e.author_img}}" loading="lazy" class="rounded menu-img-2">
<div class="text-nowrap">
<div class="d-flex justify-content-between align-items-center lh-sm">
<div class="text-truncate mr-1">
{{$e.icon}}
<strong title="{{$e.author_name}}">{{$e.author_name}}</strong>
</div>
<small class="messages-timeago opacity-75" title="{{$e.created}}"></small>
</div>
<div class="text-truncate">
<small class="opacity-75" title="{{$e.author_addr}}">{{$e.author_addr}}</small>
</div>
</div>
<small class="messages-timeago text-nowrap" title="{{$e.created}}"></small>
</div>
<div class="mb-1">
<div class="mb-2">
<div class="text-break">{{$e.summary}}</div>
</div>
<small>{{$e.info}}</small>
<small class="opacity-75">{{$e.info}}</small>
{{if $e.unseen_count}}
<span class="badge bg-transparent border border-{{$e.unseen_class}} text-{{$e.unseen_class}} rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">{{$e.unseen_count}}</span>
{{/if}}
@@ -169,7 +185,8 @@
e.author_addr,
e.href,
e.icon,
e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : ''
e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : '',
e.author_img
);
$('#messages-loading').before(html);
});

View File

@@ -535,28 +535,36 @@
</div>
<div id="nav-notifications-template" rel="template">
<a class="list-group-item list-group-item-action notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
<img class="menu-img-3" data-src="{1}" loading="lazy">
<div class="contactname"><span class="fw-bold">{2}</span> <small>{3}</small></div>
<span>{4}</span><br>
<span class="notifications-autotime" title="{5}">{5}</span>
<img data-src="{1}" loading="lazy" class="rounded menu-img-2">
<div class="text-nowrap">
<div class="d-flex justify-content-between lh-sm">
<div class="text-truncate mr-1">
<strong title="{2} - {3}">{2}</strong>
</div>
<small class="notifications-autotime opacity-75" title="{5}"></small>
</div>
<div class="text-truncate">{4}</div>
</div>
</a>
</div>
<div id="nav-notifications-forums-template" rel="template">
<a class="list-group-item list-group-item-action notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
<div class="justify-content-between">
<a class="list-group-item list-group-item-action justify-content-between align-items-center d-flex notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
<div>
<img class="menu-img-1" data-src="{1}" loading="lazy">
<span class="badge bg-secondary">{10}</span>
<span>{2}</span>
</div>
<span>{2}</span>
<i class="fa fa-{11}"></i>
<span class="badge bg-secondary">{10}</span>
</a>
</div>
<div id="notifications" class="border border-top-0 rounded navbar-nav collapse">
{{foreach $notifications as $notification}}
<div class="rounded-top rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse {{$notification.type}}-button">
<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item fakelink notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
<span class="float-end badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item justify-content-between align-items-center d-flex fakelink stretched-link notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
<div>
<i class="fa fa-fw fa-{{$notification.icon}}"></i>
{{$notification.label}}
</div>
<span class="badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
</a>
</div>
<div id="nav-{{$notification.type}}-sub" class="rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">