fixes #2516 update message colors and design

This commit is contained in:
HWFord
2026-01-27 16:02:46 +01:00
parent 15e451c231
commit 3195a33b76
10 changed files with 168 additions and 80 deletions

View File

@@ -46,8 +46,8 @@ $tabsheet->assign();
if (isset($page['nb_pending_comments']))
{
$message = l10n('User comments').' <i class="icon-chat"></i> ';
$message.= '<a href="'.$link_start.'comments">';
$message = l10n('User comments');
$message.= '<a href="'.$link_start.'comments"><i class="icon-chat"></i>';
$message.= l10n('%d waiting for validation', $page['nb_pending_comments']);
$message.= ' <i class="icon-right"></i></a>';
@@ -183,7 +183,7 @@ if ($conf['show_piwigo_latest_news'])
if (isset($latest_news['id']) and $latest_news['posted_on'] > time()-60*60*24*30)
{
$page['messages'][] = sprintf(
'%s <a href="%s" title="%s" target="_blank"><i class="icon-bell"></i> %s</a>',
'%s <a href="%s" title="%s" target="_blank"><i class="icon-bell"></i>%s</a>',
l10n('Latest Piwigo news'),
$latest_news['url'],
time_since($latest_news['posted_on'], 'year').' ('.$latest_news['posted'].')',

View File

@@ -877,12 +877,6 @@ li.plupload_delete a.remove-format:hover{color: #474747;}
background-color: #f98100;
}
.eiw .messages a {
background-color: #00529b;
color: #bde5f8;
padding: 2px 7px;
}
#wImg {background-color: #e5e5e5;}
.cat-move-order-popin input[name=recursiveAutoOrder] {
@@ -974,4 +968,92 @@ label:has(> .filters-icon-check:disabled), span:has(+ .filters-icon-check:disabl
.filter-manager-options-container.selected-filter-container:hover{
background-color: #5D5D5D;
}
}
/*Success message*/
.infos {
color: #254520;
background-color:#EEFFEB;
border-left:6px solid #6DCE5E;
}
.infos i{
color:#6DCE5E;
}
.infos a {
color: #3C3C3C;
background-color: #F6FFF4;
border:1px solid #6DCE5E;
}
.infos a:hover{
color: #3C3C3C;
}
/*Error message*/
.errors {
color: #502421;
background-color: #FFE7EB;
border-left: 6px solid #EB3D33;
}
.errors i{
color: #EB3D33;
}
.errors a{
color: #502421;
background-color: #FFF5F7;
border:1px solid #EB3D33;
}
.errors a:hover{
color: #502421;
}
/*Warning message*/
.warnings {
color: #563F26;
background-color:#FFF3DB;
border-left:6px solid #E18C32;
}
.warnings i {
color: #E18C32;
}
.warnings a{
color: #563F26;
background-color: #FFFAEF;
border:1px solid #E18C32;
}
.warnings a:hover{
color: #563F26;
}
/*announcement message*/
.messages {
color: #274159;
background-color:#E3F5FF;
border-left:6px solid #4182BE;
}
.messages i{
color: #4182BE;
}
.messages a{
color: #274159;
background-color: #F5FBFF;
border:1px solid #4182BE;
}
.messages a:hover{
color: #274159;
}

View File

@@ -456,22 +456,22 @@ $(function () {
if (addedPhotos.length && updatedPhotos.length)
{
$(".infos").append( '<ul><li>' + infoTextAdd + ', ' + infoTextUpdate + '</li></ul>');
$(".infos").append( '<ul><li><i class="eiw-icon icon-ok-circled"></i>' + infoTextAdd + ', ' + infoTextUpdate + '</li></ul>');
}
else
{
const infoText = addedPhotos.length ? infoTextAdd : infoTextUpdate;
$(".infos").append('<ul><li>' + infoText + '</li></ul>');
$(".infos").append('<ul><li><i class="eiw-icon icon-ok-circled"></i>' + infoText + '</li></ul>');
}
if (!formatMode) {
html = sprintf(
albumSummary_label,
'<a href="admin.php?page=album-' + uploadCategory.id + '">' + uploadCategory.label + '</a>',
'<a href="admin.php?page=album-' + uploadCategory.id + '"> <i class="icon-folder-open"></i>' + uploadCategory.label + '</a>',
parseInt(uploadCategory.nb_photos)
);
$(".infos ul").append('<li>' + html + '</li>');
$(".infos ul").append('<li><i class="eiw-icon icon-ok-circled"></i>' + html + '</li>');
}
$(".infos").show();

View File

@@ -147,10 +147,9 @@ jQuery(document).ready(function() {
<div class="eiw">
{if isset($errors)}
<div class="errors">
<i class="eiw-icon icon-cancel"></i>
<ul>
{foreach from=$errors item=error}
<li>{$error}</li>
<li><i class="eiw-icon icon-cancel"></i>{$error}</li>
{/foreach}
</ul>
</div>
@@ -158,10 +157,9 @@ jQuery(document).ready(function() {
{if isset($infos)}
<div class="infos">
<i class="eiw-icon icon-ok"></i>
<ul>
{foreach from=$infos item=info}
<li>{$info}</li>
<li><i class="eiw-icon icon-ok-circled"></i>{$info}</li>
{/foreach}
</ul>
</div>
@@ -169,10 +167,9 @@ jQuery(document).ready(function() {
{if isset($warnings)}
<div class="warnings">
<i class="eiw-icon icon-attention"></i>
<ul>
{foreach from=$warnings item=warning}
<li>{$warning}</li>
<li><i class="eiw-icon icon-attention"></i>{$warning}</li>
{/foreach}
</ul>
</div>
@@ -180,10 +177,9 @@ jQuery(document).ready(function() {
{if isset($messages)}
<div class="messages">
<i class="eiw-icon icon-info-circled-1"></i>
<ul>
{foreach from=$messages item=message}
<li>{$message}</li>
<li><i class="eiw-icon icon-info-circled-1"></i>{$message}</li>
{/foreach}
</ul>
</div>

View File

@@ -3,8 +3,8 @@
{combine_script id='jquery.cluetip' load='async' require='jquery' path='themes/default/js/plugins/jquery.cluetip.js'}
{footer_script require='jquery.cluetip'}
var piwigo_need_update_msg = '<a href="admin.php?page=updates">{'A new version of Piwigo is available.'|@translate|@escape:"javascript"} <i class="icon-right"></i></a>';
var ext_need_update_msg = '<a href="admin.php?page=updates&amp;tab=ext">{'Some upgrades are available for extensions.'|@translate|@escape:"javascript"} <i class="icon-right"></i></a>';
var piwigo_need_update_msg = '{'A new version of Piwigo is available.'|@translate|@escape:"javascript"}<a href="admin.php?page=updates">{'Latest update'|@translate|@escape:"javascript"}<i class="icon-right"></i></a>';
var ext_need_update_msg = '{'Some upgrades are available for extensions.'|@translate|@escape:"javascript"}<a href="admin.php?page=updates&amp;tab=ext">{'See available updates'|@translate|@escape:"javascript"}<i class="icon-right"></i></a>';
const str_gb_used = "{'%s GB used'|translate}";
const str_mb_used = "{'%s MB used'|translate}";
const str_gb = "{'%sGB'|translate}".replace(' ', '&nbsp;');
@@ -37,11 +37,11 @@ jQuery().ready(function(){
piwigo_update = data['result']['piwigo_need_update'];
ext_update = data['result']['ext_need_update']
if ((piwigo_update || ext_update) && !jQuery(".warnings").is('div'))
jQuery(".eiw").prepend('<div class="warnings"><i class="eiw-icon icon-attention"></i><ul></ul></div>');
jQuery(".eiw").prepend('<div class="warnings"><ul></ul></div>');
if (piwigo_update)
jQuery(".warnings ul").append('<li>'+piwigo_need_update_msg+'</li>');
jQuery(".warnings ul").append('<li><i class="eiw-icon icon-attention"></i>'+piwigo_need_update_msg+'</li>');
if (ext_update)
jQuery(".warnings ul").append('<li>'+ext_need_update_msg+'</li>');
jQuery(".warnings ul").append('<li><i class="eiw-icon icon-attention"></i>'+ext_need_update_msg+'</li>');
}
});
{/if}

View File

@@ -47,7 +47,7 @@ const photosUpdated_label = "{'%d photos updated'|translate|escape:javascript}";
const formatsAdded_label = "{'%d formats added for %d photos'|translate|escape:javascript}";
const formatsUpdated_label = "{'%d formats updated for %d photos'|translate|escape:javascript}";
const batch_Label = "{'Manage this set of %d photos'|translate|escape:javascript}";
const albumSummary_label = "{'Album "%s" now contains %d photos'|translate|escape:javascript}";
const albumSummary_label = "{'Album %s now contains %d photos'|translate|escape:javascript}";
const str_format_warning = "{'Error when trying to detect formats'|translate|escape:javascript}";
const str_ok = "{'Ok'|translate|escape:javascript}";
const str_format_warning_multiple = "{'There is multiple image in the database with the following names : %s.'|translate|escape:javascript}";
@@ -128,8 +128,8 @@ let related_categories_ids = {$selected_category|json_encode};
</div>
{/if}
<div class="infos" style="display:none"><i class="eiw-icon icon-ok"></i></div>
<div class="errors" style="display:none"><i class="eiw-icon icon-cancel"></i><ul></ul></div>
<div class="infos" style="display:none"></div>
<div class="errors" style="display:none"><ul></ul></div>
<p class="afterUploadActions" style="margin:10px; display:none;">
{if !$DISPLAY_FORMATS}

View File

@@ -2336,53 +2336,50 @@ h2:lang(en) { text-transform:capitalize; }
/**
* Informations box in administration
*/
.infos, .errors, .warnings, .messages {
.infos, .errors, .warnings, .messages, #photosAddContent .infos {
text-align: left;
margin: 20px;
padding: 5px;
font-weight:bold;
min-height: 54px;
padding: 0 5px;
font-weight:600;
flex-direction: row;
display: flex;
align-items: center;
justify-content: start;
}
.infos ul, .errors ul, .warnings ul, .messages ul {
margin:1_px 0;
.infos ul, .errors ul, .warnings ul, .messages ul, #photosAddContent .infos ul{
margin:10px 0;
padding-left:0;
}
.infos ul {color: #3C3C3C;}
#photosAddContent .infos ul li,
.eiw ul li{
padding:2px;
margin-bottom:2px;
display:flex;
align-items:center;
}
#photosAddContent .infos ul li:not(:last-child),
.eiw ul li:not(:last-child){
margin-bottom:10px;
}
#photosAddContent .infos ul li a,
.eiw ul li a{
border-radius:4px;
margin:0 5px;
padding: 2px 7px;
}
#photosAddContent .infos ul li a i,
.eiw ul li a i{
margin-right:5px;
}
.eiw-icon {
font-size: 40px;
margin-right: 10px;
}
.infos {
color: #0a0;
background-color:#c2f5c2;
}
.infos a {color: #3C3C3C;}
.errors {
color: #f22;
background-color: #ffd5dc;
border-left: 4px solid #f22;
}
.warnings {
color: #ee8800;
background-color:#ffdd99;
border-left:4px solid #ee8800;
}
.messages {
color: #00529b;
background-color:#bde5f8;
border-left:4px solid #00529b;
font-size: 16px;
margin-right: 5px;
}
.jGrowl-popup-icon{
@@ -2394,6 +2391,7 @@ h2:lang(en) { text-transform:capitalize; }
.success {
color: #3C3C3C;
}
div.jGrowl div.jGrowl-notification.success{
background: none;
background-color: #D6FFCF;

View File

@@ -1179,27 +1179,31 @@ li.plupload_delete a.remove-format:hover{color: #c0c0c0;}
/*Error message*/
.errors {
color: #fec6c7;
background-color: #bc4b4a;
border-left: 4px solid #fec6c7;
color: #FFE4E4;
background-color: #AE3A3A;
border-left: 6px solid #FFE4E4;
}
.errors li{
color: #ffffff;
.errors i{
color: #FFC8C8;
}
.errors a{
background-color: #6b3030;
padding: 2px 7px;
color: #ffffff;
background-color: #8A2C2C;
border:1px solid #FFC8C8;
color: #FFE4E4;
}
.errors a:hover{
color: #FFE4E4;
}
/*Success message*/
.infos {
color: #b8feee;
background-color: #50a48f;
border-left: 4px solid #b8feee;
color: #F3FFFC;
background-color: #50a48f;
border-left: 6px solid #C4FFF1;
}
.AddPluginSuccess label, .DeactivatePluginSuccess label, .RestorePluginSuccess label{
@@ -1211,14 +1215,18 @@ li.plupload_delete a.remove-format:hover{color: #c0c0c0;}
color: #b8feee;
}
.infos li{
color: #ffffff;
.infos i{
color: #C4FFF1;
}
.infos a{
background-color: #28554a;
padding: 2px 7px;
color: #ffffff;
background-color: #237B66;
color: #F3FFFC;
border:1px solid #C4FFF1;
}
.infos a:hover{
color: #F3FFFC;
}
/*Warning message*/