From: Adam Gibbons <adam.gibbons@ipfire.org>
To: development@lists.ipfire.org,
Peer Dietzmann <dietzmann@brecht-schule.hamburg>,
Michael Tremer <michael.tremer@ipfire.org>,
Adolf Belka <adolf.belka@ipfire.org>
Cc: "IPFire: Development-List" <development@lists.ipfire.org>
Subject: Re: [EXTERN] Re: [PATCH 4/5] fwhosts.cgi: Move the tooltip into the usage counter
Date: Thu, 26 Jun 2025 16:13:18 +0100 [thread overview]
Message-ID: <947F947E-A7B3-4B0D-A6BD-E265E2E56337@ipfire.org> (raw)
In-Reply-To: <92ca5601-7d10-4abd-9e5a-8f61ac1d20ad@brecht-schule.hamburg>
[-- Attachment #1: Type: text/plain, Size: 12434 bytes --]
Hi all.
I _think_ this could be accomplished by using an emoji instead.
This one might be a good option: https://emojipedia.org/information
I believe the unicode sequence for it is "U+2139 U+FE0F"
But there are obviously many other emojis to choose from which might be more appropriate.
Thanks,
Adam
On 26 June 2025 13:08:54 BST, Peer Dietzmann <dietzmann@brecht-schule.hamburg> wrote:
>Hello Michael, Hello Adolf,
>
>it was actually a bit hard to find a working solution to place this information somewhere. I scrolled through all the icons IPFire has "built in" and thought that a blue i icon would lead the user to think "oh what's this? What information can I get there?". When hovering then over the icon all necessary information is directly displayed without any button or box or anything which would require additional code and styling. Thereby all other icons are clickable I think there is no additional documentation required, the users will find it on their own.
>
>But I am also fine with Michael's solution.
>
>--
>
>Best regards
>
>Peer
>
>On 25.06.25 18:52, Michael Tremer wrote:
>> Hello Adolf,
>>
>> Thank you for the feedback.
>>
>> It is indeed not obvious. On the other hand, the large icon is not really a solution either in my opinion. It is simply too large and distracting for a feature that won’t be used *that* much.
>>
>> I would however love some visual hint, but I cannot really think of anything between the two options that we have for now.
>>
>> -Michael
>>
>>> On 25 Jun 2025, at 17:40, Adolf Belka <adolf.belka@ipfire.org> wrote:
>>>
>>> Tested-by: Adolf Belka <adolf.belka@ipfire.org>
>>>
>>> I actually found the i in a blue circle icon very helpful for this. I was able to figure out where I should place my mouse pointer for the info.
>>>
>>> With this patch applied, which was the first way I tested it, I had no idea where to place the mouse pointer as nothing looked different to the existing situation. I did try placing it over the usage counter a couple of times but obviously not for long enough in my first tries as I never saw anything get shown.
>>>
>>> Reading the title of this patch more carefully I went back and now held the mouse pointer over the usage counter and waited for 1 to 2 seconds and now the info was shown. Typically I found it takes a minimum of 1 second and sometimes around 1.5 seconds before anything is shown and first time around I was obviously not waiting long enough at any one location.
>>>
>>> If the usage counter is to stay as the location to place the mouse pointer onto for the info then I think this will need to be explained very clearly in the wiki documentation otherwise users might not discover this useful function directly on the WUI page.
>>>
>>>
>>> On 23/06/2025 19:16, Michael Tremer wrote:
>>>> This will clutter the page less as we don't have any good icon sets.
>>>> Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
>>>> ---
>>>> html/cgi-bin/fwhosts.cgi | 42 +++++++++++-----------------------------
>>>> 1 file changed, 11 insertions(+), 31 deletions(-)
>>>> diff --git a/html/cgi-bin/fwhosts.cgi b/html/cgi-bin/fwhosts.cgi
>>>> index 69970a840..953f81e5f 100644
>>>> --- a/html/cgi-bin/fwhosts.cgi
>>>> +++ b/html/cgi-bin/fwhosts.cgi
>>>> @@ -1932,7 +1932,7 @@ sub viewtablenet
>>>> }else{
>>>> print<<END;
>>>> <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>> END
>>>> }
>>>> my $count=0;
>>>> @@ -1953,11 +1953,7 @@ END
>>>> my $colnet="$customnetwork{$key}[1]/".&General::subtocidr($customnetwork{$key}[2]);
>>>> my $netcount=&getnetcount($customnetwork{$key}[0]);
>>>> my $netusedin=&getusedin($customnetwork{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($netusedin) {
>>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$netusedin' title='$netusedin'>";
>>>> - }
>>>> - print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col>$netcount x</td><td>$htmlparttouse</td>";
>>>> + print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col><span title='$netusedin'>$netcount x</span></td>";
>>>> print<<END;
>>>> <td width='1%' $col><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>> <input type='hidden' name='ACTION' value='editnet'>
>>>> @@ -2091,7 +2087,7 @@ sub viewtablehost
>>>> }else{
>>>> print<<END;
>>>> <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>> END
>>>> }
>>>> my $count=0;
>>>> @@ -2112,12 +2108,9 @@ END
>>>> my $hostcount=0;
>>>> $hostcount=&gethostcount($customhost{$key}[0]);
>>>> my $hostusedin=&getusedin($customhost{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($hostusedin) {
>>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$hostusedin' title='$hostusedin'>";
>>>> - }
>>>> - print"<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >".&getcolor($ip)."</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col>$hostcount x</td><td>$htmlparttouse</td>";
>>>> - print<<END;
>>>> + my $color = &getcolor($ip);
>>>> + print <<END;
>>>> + <td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >$color</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col><span title="$hostusedin">$hostcount x</span></td>
>>>> <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>> <input type='hidden' name='ACTION' value='edithost' />
>>>> <input type='hidden' name='HOSTNAME' value='$customhost{$key}[0]' />
>>>> @@ -2192,11 +2185,8 @@ sub viewtablegrp
>>>> print "<br><b><u>$grpname</u></b> ";
>>>> print " <b>$Lang::tr{'remark'}:</b>  $remark   " if ($remark ne '');
>>>> my $netgrpcount=&getnetcount($grpname);
>>>> - print "<b>$Lang::tr{'used'}:</b> $netgrpcount x ";
>>>> my $groupusedin=&getusedin($grpname);
>>>> - if ($groupusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$groupusedin' title='$groupusedin'>";
>>>> - }
>>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$groupusedin'>$netgrpcount x</span>";
>>>> if($netgrpcount == '0')
>>>> {
>>>> print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='grp_name' value='$grpname' ><input type='hidden' name='ACTION' value='delgrp'></form>";
>>>> @@ -2335,10 +2325,7 @@ sub viewtablelocationgrp
>>>> # Get group count.
>>>> my $locationgrpcount=&getlocationcount($grpname);
>>>> my $locationusedin=&getlocusedin($grpname);
>>>> - print "<b>$Lang::tr{'used'}:</b> $locationgrpcount x ";
>>>> - if ($locationusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$locationusedin' title='$locationusedin'>";
>>>> - }
>>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$locationusedin'>$locationgrpcount x</span>";
>>>> # Only display delete icon, if the group is not used by a firewall rule.
>>>> if($locationgrpcount == '0') {
>>>> print"<form method='post' style='display:inline'>\n";
>>>> @@ -2459,7 +2446,7 @@ sub viewtableservice
>>>> &General::readhasharray("$fwconfigout", \%fwout);
>>>> print<<END;
>>>> <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th width='3%'></th></tr>
>>>> END
>>>> my $col='';
>>>> foreach my $key (sort { ncmp($customservice{$a}[0],$customservice{$b}[0])} keys %customservice)
>>>> @@ -2481,14 +2468,10 @@ END
>>>> #Neuer count
>>>> $srvcount=&getsrvcount($customservice{$key}[0]);
>>>> my $serviceusedin=&getsrvusedin($customservice{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($serviceusedin) {
>>>> - $htmlparttouse="<input type='image' align='top' src='/images/info.gif' alt='$serviceusedin' title='$serviceusedin'>";
>>>> - }
>>>> if($customservice{$key}[3] eq 'All ICMP-Types'){print $Lang::tr{'fwdfw all icmp'};}
>>>> elsif($customservice{$key}[3] ne 'BLANK'){print $customservice{$key}[3];}
>>>> print<<END;
>>>> - </td><td align='center' $col>$srvcount x</td><td>$htmlparttouse</td>
>>>> + </td><td align='center' $col><span title='$serviceusedin'>$srvcount x</span></td>
>>>> <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' /><input type='hidden' name='ACTION' value='editservice' />
>>>> <input type='hidden' name='SRV_NAME' value='$customservice{$key}[0]' />
>>>> <input type='hidden' name='SRV_PORT' value='$customservice{$key}[1]' />
>>>> @@ -2560,11 +2543,8 @@ sub viewtableservicegrp
>>>> if($count >0){print"</table>";$count=1;}
>>>> print "<br><b><u>$grpname</u></b> ";
>>>> print "<b>$Lang::tr{'remark'}:</b> $remark " if ($remark ne '');
>>>> - print " <b>$Lang::tr{'used'}:</b> $grpcount x ";
>>>> my $srvgrpusedin=&getsrvusedin($customservicegrp{$key}[0]);
>>>> - if ($srvgrpusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$srvgrpusedin' title='$srvgrpusedin'>";
>>>> - }
>>>> + print " <b>$Lang::tr{'used'}:</b> <span title='$srvgrpusedin'>$grpcount x</span>";
>>>> if($grpcount == '0')
>>>> {
>>>> print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='SRVGRP_NAME' value='$grpname' ><input type='hidden' name='ACTION' value='delservicegrp'></form>";
>
>--
>Mit freundlichem Gruß
>Peer Dietzmann
>
>Brecht-IT | Administration und Support
>
>Brecht-Schule Hamburg GmbH
>Norderstrasse 163-165 | 20097 Hamburg
>Tel.: +49 40 21 11 12 - 37 | Fax: +49 40 21 11 12 - 20
>E-Mail: dietzmann@brecht-schule.hamburg | www.brecht-schule.hamburg
>
>Diese Email enthält ggfs. vertrauliche und/oder rechtlich geschützte Informationen.
>Wenn Sie nicht der richtige Adressat sind oder diese Email irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese Email.
>Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser Email ist nicht gestattet.
>
>
[-- Attachment #2: Type: text/html, Size: 14026 bytes --]
next prev parent reply other threads:[~2025-06-26 15:13 UTC|newest]
Thread overview: 10+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-06-23 17:16 [PATCH 1/5] fwhosts.cgi: Show in which firewall rule objects are being used Michael Tremer
2025-06-23 17:16 ` [PATCH 2/5] fwhosts.cgi: Remove whitespace issues Michael Tremer
2025-06-23 17:16 ` [PATCH 3/5] fwhosts.cgi: Don't show anything if a host/group is unused Michael Tremer
2025-06-23 17:16 ` [PATCH 4/5] fwhosts.cgi: Move the tooltip into the usage counter Michael Tremer
2025-06-25 16:40 ` Adolf Belka
2025-06-25 16:52 ` Michael Tremer
2025-06-26 12:08 ` [EXTERN] " Peer Dietzmann
2025-06-26 15:13 ` Adam Gibbons [this message]
2025-06-23 17:16 ` [PATCH 5/5] langs: Remove the unused "Unused" translation string Michael Tremer
2025-06-25 16:25 ` [PATCH 1/5] fwhosts.cgi: Show in which firewall rule objects are being used Adolf Belka
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=947F947E-A7B3-4B0D-A6BD-E265E2E56337@ipfire.org \
--to=adam.gibbons@ipfire.org \
--cc=adolf.belka@ipfire.org \
--cc=development@lists.ipfire.org \
--cc=dietzmann@brecht-schule.hamburg \
--cc=michael.tremer@ipfire.org \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox