[3.3][DEV] Contact profile field icon

[rxu]

Extension Name: Contact profile field icon
Author: rxu

Extension Description: Adds an option of assigning FontAwesome icon to contact profile fields
Extension Version: 1.0.0-dev

Requirements: phpBB >= 3.3.1

Features:

• Assigning FontAwesome 4.7.0 icon to contact profile field
• Customize color for contact profile field icon chosen by entering color code or by selecting from color palette

Screenshots:

cpficon3.png (7.78 KiB) Viewed 3888 times

Extension Github Repository: https://github.com/rxu/contactfieldicon
Extension Download: https://github.com/rxu/contactfieldicon ... master.zip
Installation:
Copy the extension files to /ext/rxu/contactfieldicon, go to "ACP" > "Customise" > "Manage extensions" and enable the "Contact profile field icon" extension.

[ssl]

Thanks, nice extension.
How to change the profil icon for mail and PM?

[rxu]

PM and email aren't listed as custom profile fields so it's not possible with this extension.

[Siava]

Great job, rxu!

[pierredu]

I installed this extension on my board and it works fine on all aspects, but one.
If the user has up to 3 icons to display, the icons display in one line. If there are 4, they display as a line of 3 and the 4th on a second line. But if there are 5 icons, the 4th is on the second line and the 5th on a third line.

That is, I never get the situation displayed on the screen capture, with 4 icons in a row.

[rxu]

This extension should not affect icon rows count on rendering really. Do you face this behavior with prosilver or some custom style?

[pierredu]

Thanks for your answer.
The problem is the same with Prosilver and my own style (derived from Prosilver).

Trying to analyse the problem further, I noted that the switch S_LAST_ICON (which sets the style last-icon) is computed on line 190 of viewtopic_body.html and seems to command the closing of the div even if there are still other icons in the contacts list.

I hope it helps.

[pierredu]

Here is what I have found:

1st situation (2 contact icons):

Code: Select all

<strong>Contact :</strong>
<div class="dropdown-container dropdown-left">
	<a href="#" class="dropdown-trigger" title="Contacter Patrick_B">
		<i class="icon fa-commenting-o fa-fw icon-lg" aria-hidden="true"></i>
		<span class="sr-only">Contacter Patrick_B</span>
	</a>
	<div class="dropdown">
		<div class="pointer">
			<div class="pointer-inner"></div>
		</div>
		<div class="dropdown-contents contact-icons">
			<div>
				<a href="./ucp.php?i=pm&amp;mode=compose&amp;action=quotepost&amp;p=1831569" title="Envoyer un message privé">
					<span class="contact-icon pm-icon">Envoyer un message privé</span>
				</a>
				<a href="./memberlist.php?mode=email&amp;u=16" title="Envoyer un courriel" class="last-cell">
					<span class="contact-icon email-icon">Envoyer un courriel</span>
				</a>
			</div>
		</div>
	</div>
</div>

2nd situation (3 contact icons):

Code: Select all

<strong>Contact :</strong>
<div class="dropdown-container dropdown-left">
	<a href="#" class="dropdown-trigger" title="Contacter Onmal">
		<i class="icon fa-commenting-o fa-fw icon-lg" aria-hidden="true"></i><span class="sr-only">Contacter Onmal</span>
	</a>
	<div class="dropdown">
		<div class="pointer">
			<div class="pointer-inner"></div>
		</div>
		<div class="dropdown-contents contact-icons">
			<div>
				<a href="./ucp.php?i=pm&amp;mode=compose&amp;action=quotepost&amp;p=1832778" title="Envoyer un message privé">
					<span class="contact-icon pm-icon">Envoyer un message privé</span>
				</a>
				<a href="./memberlist.php?mode=email&amp;u=15045" title="Envoyer un courriel">
					<span class="contact-icon email-icon">Envoyer un courriel</span>
				</a>
				<a href="https://www.galerie-insecte.org/galerie/auteur.php?aut=6596" title="Galerie personnelle" class="last-cell">
					<i class="icon fa-fw fa-camera" style="color: #1A5576"></i>
					<!-- <span class="contact-icon galerie_perso-icon">Galerie personnelle</span> -->
				</a>
			</div>
		</div>
	</div>
</div>

3rd situation (4 contact icons):

Code: Select all

<strong>Contact :</strong>
<div class="dropdown-container dropdown-left">
	<a href="#" class="dropdown-trigger" title="Contacter pierred">
		<i class="icon fa-commenting-o fa-fw icon-lg" aria-hidden="true"></i>
		<span class="sr-only">Contacter pierred</span>
	</a>
	<div class="dropdown">
		<div class="pointer">
			<div class="pointer-inner"></div>
		</div>
		<div class="dropdown-contents contact-icons">
			<div>
				<a href="./ucp.php?i=pm&amp;mode=compose&amp;action=quotepost&amp;p=1831580" title="Envoyer un message privé">
					<span class="contact-icon pm-icon">Envoyer un message privé</span>
				</a>
				<a href="./memberlist.php?mode=email&amp;u=699" title="Envoyer un courriel">
					<span class="contact-icon email-icon">Envoyer un courriel</span>
				</a>
				<a href="https://www.insecte.org/forum/viewtopic.php?f=73&amp;t=43548" title="Présentation">
					<i class="icon fa-fw fa-address-card" style="color: #1A5576"></i>
					<!-- <span class="contact-icon presentation-icon">Présentation</span> -->
				</a>
				<a href="https://www.duhem.com/galerie/index.fr.htm" title="Site Internet" class="last-cell">
					<span class="contact-icon phpbb_website-icon">Site Internet</span>
				</a>
			</div>
			<div>
				<a href="https://www.galerie-insecte.org/galerie/auteur.php?aut=179" title="Galerie personelle">
					<i class="icon fa-fw fa-camera" style="color: #1A5576"></i>
					<!-- <span class="contact-icon galerie_perso-icon">Galerie personnelle</span> -->
				</a>
			</div>
		</div>
	</div>
</div>

As you can see, the class last-icon is set at the end of the first line.

This is the result of line 190 of viewtopic_body.html:
<!-- DEFINE $S_LAST_CELL = ((REMAINDER eq 3) or (postrow.contact.S_LAST_ROW and postrow.contact.S_NUM_ROWS < 4)) -->

[MedicineStorm]

This extension is great. Thanks, rxu. No issues to report on phpbb 3.3.10 w/ custom style based on prosilver.

I even got the "PM" and "email" icons to be fontawesome-ified via changes to colours.css after peeking at what the extension is doing.

Thanks, nice extension.
How to change the profil icon for mail and PM?

Just in case you are still interested, ssl; here is what I did in colours.css:

Code: Select all

.contact-icon { 
/*	background-image: url("../../prosilver/theme/images/icons_contact.png"); */
	background-repeat: no-repeat;
	display: inline-block;
	height: 12px;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 14px;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	width: 1.28571429em;
	text-align: center;
}

/*.pm-icon							{ background-position: 0 0; } */
.pm-icon:before {
	content: "\f27a"
}

/*.email-icon							{ background-position: -21px 0; } */
.email-icon:before {
	content: "\f0e0"
}