[3.3][DEV][b] phpBB 🙂 Reactions

[Steve]

Thanks the error is now fixed, the missing Lang vars were fixed last week. Thank you for testing.

[Miri4ever]

Yes, the translation works fine now, but I have more concern about this other error if reactions disabled inside a forum that already contains reactions in posts and I have no way to fix and remove these reactions from the desired post as admin if this error happens. The only way is always to remove this from the database table.

Is the current GitHub update to date? It should show up 0.94 Dev but after uploading the new Files it still shows 0.93 Dev even if inside the file this change was made.

[Steve]

There is no release for version 0.9.4. I'm still get use to GitHub.

I will release new files tomorrow.

[KenTSA]

There is no release for version 0.9.4. I'm still get use to GitHub.

I will release new files tomorrow.

RO Translation

https://drive.google.com/file/d/1ILZ_cy ... KgldM/view

I set acces to public, so it can be downloaded. If doesn’t work, tell me.

[Steve]

Extension:

• Due to a major overhaul to the file system and code, please:: disable, delete data for postreactions/ version 0.9.2 ~ reactions/ version 0.9.3 and lower and start a fresh.

Requirements:

Tested on:
Database server: MySQL(i) 9.1.0/MySQL(i) 10.5.28-MariaDB
PHP version: 8.0.30/8.3.16
WAMP/Localhost/Live server
Windows 10/11
Web browsers: FF, Chrome, Opera, Edge, AVG, duck duck go
iPhone iOS 18.3.2 - Safari/FF for iPhone

iMac and android development testing requires contribution.

Features Implemented:

• I plastered and painted the admin panel
• .svg emoji

Features removed:

• Traffic light system, until the core extension is validated
• preventing foe reactions, this was just creating arguments as the 'foe' has no button and is wondering why?

Bugs Fixed:

• missing profile in viewtopic
• missing lang vars
• No order id is set when trying to re-order a new reaction type
• email settings for notification
• viewforum > viewtopic php debug error
• You can still use disabled icons in drop down list

Extension Download:

File Scan: AVG
File compression: WinRAR .zip

• Due to a major overhaul to the file system and code, please:: disable, delete data for postreactions/ version 0.9.2 ~ reactions/ version 0.9.3 and lower and start a fresh.

Test it fully version, Thank You.

[cabot]

Hello Steve,

If I may make two suggestions:

• Use the button-icon-only class to harmonise the display with the other buttons (this is not noticeable with prosilver but the difference can be obvious with other styles).

  Code: Select all

  <span title="{{ lang('ADD_REACTION') }}" class="button button-secondary dropdown-trigger">

• Remove the ability to change the button colour or leave the choice to use the default colour (aka color: inherit;), again with a view to letting the elements display naturally in the context of the styles, especially when several are used on the board.

[Steve]

Hello Steve,

If I may make two suggestions:

• Use the button-icon-only class to harmonise the display with the other buttons (this is not noticeable with prosilver but the difference can be obvious with other styles).

  Code: Select all

  <span title="{{ lang('ADD_REACTION') }}" class="button button-secondary dropdown-trigger">

• Remove the ability to change the button colour or leave the choice to use the default colour (aka color: inherit;), again with a view to letting the elements display naturally in the context of the styles, especially when several are used on the board.

Thank You for testing.

Something like this?

Code: Select all

							<span title="{{ lang('ADD_REACTION') }}" class="button button-icon-only button-secondary dropdown-trigger">
								<i data-show-reaction-types="true" class="icon {% if REACTIONS_BUTTON_ICON %}{{ REACTIONS_BUTTON_ICON }}{% else %}fa-smile-o{% endif %} fa-fw" style="color: {% if REACTIONS_BUTTON_COLOR %}#{{ REACTIONS_BUTTON_COLOR }}{% else %}inherit{% endif %};"></i>
							</span>

[cabot]

Hmmm, in fact the original condition was correct because if you empty the reactions_button_color field from the extension management page, REACTIONS_BUTTON_COLOR is false so the style attribute is not returned to HTML and the colour is that of the default links (perhaps add a short explanation in the PCA like ‘Leave the field empty to use the default colour’?).

Also, there is a typo here:

Code: Select all

{% if REACTIONS_BUTTON_COLOR %}style="color: #{{ REACTIONS_BUTTON_COLOR }}{% endif %}"

{% endif %}" should be "{% endif %}.

As far as the class name is concerned, you can replace button-secondary with button-icon-only as in the other links.

A final suggestion would be to use a button rather than a span, as the latter is not focusable.

So the full code could be:

Code: Select all

<button title="{{ lang('ADD_REACTION') }}" class="button button-icon-only dropdown-trigger">
	<i data-show-reaction-types="true" class="icon {% if REACTIONS_BUTTON_ICON %}{{ REACTIONS_BUTTON_ICON }}{% else %}fa-smile-o{% endif %} fa-fw"{% if REACTIONS_BUTTON_COLOR %} style="color: #{{ REACTIONS_BUTTON_COLOR }}"{% endif %}></i><span class="sr-only">{{ lang('ADD_REACTION') }}</span>
</button>

[Steve]

Something like this? [please look at the full line of code/scroll along...]

Code: Select all

<span title="{{ lang('ADD_REACTION') }}" class="button button-icon-only button-secondary dropdown-trigger">
<i data-show-reaction-types="true" class="icon {% if REACTIONS_BUTTON_ICON %}{{ REACTIONS_BUTTON_ICON }}{% else %}fa-smile-o{% endif %} fa-fw" style="color: {% if REACTIONS_BUTTON_COLOR %}#{{ REACTIONS_BUTTON_COLOR }}{% else %}inherit{% endif %};"></i>
</span>

I will try the <button> suggestion... Thanks for your input.

[cabot]

Nope, there's no need to declare inherit as this is the default behaviour, the condition on the style attribute is enough.

Code: Select all

{% if REACTIONS_BUTTON_COLOR %} style="color: #{{ REACTIONS_BUTTON_COLOR }}"{% endif %}

REACTIONS_BUTTON_COLOR = true => style="color: #{{ REACTIONS_BUTTON_COLOR }}"

REACTIONS_BUTTON_COLOR = false => default color, AKA the one declared by the style on .button .icon

[Steve]

last night i re-wrote the HTML and CSS files...
the new CSS file, use WinMerge to compare...

Code: Select all

/**
	* Reactions $extends the phpBB Software package.
	* @copyright (c) 2024, Steve, https://steven-clark.tech/
	* @license GNU General Public License, version 2 (GPL-2.0)
*/

.reaction-avatar img {
	max-height: 30px;
	vertical-align: middle;
	width: auto;
	margin-left: 5px;
}
.reaction-centered { text-align: center; }
.reaction-contact-icons-with-text { font-size: 11px !important; }
.reaction-count { border-radius: 5px !important; }
.badge.reaction-count {
	margin-top: -9px !important;
	margin-right: -12px !important;
	border-radius: 25% !important;
}
.reaction_disabled, .reaction_enabled {
	margin: 2px;
	border-radius: 10px;
	padding: 5px 7px;
	text-align: center;
}
.reaction_disabled, .reaction_delete { background-color: #ECD5D8; }
.reaction_enabled { background-color: #80FF40; }
.reaction-ear {
	border-radius: 5px;
	opacity: 0.8;
	line-height: 1;
	float: right;
	margin-left: -5px;
	position: relative;
	top: 3px;
	padding: 4px 6px;
}
.reaction-ear-color {
	background: #E72F6D;
	color: #fff;
}
.reactions-font, .reactions-font:active a, .reactions-font:hover a, .reactions-font a {
	font-size: 12px;
	color: #fff;
	border-radius: 5px !important;
}
.reaction-image {
	vertical-align: middle;
	float: right;
}
@media (max-width: 700px) {
	.reaction-image {
		width: 25px !important;
		height: 25px !important;
	}
}
.reaction-image-size {
	width: 30px;
	height: 30px;
}
.reaction-image-left {
	float: left;
	margin-right: 5px;
}
img.reaction-notification {
	max-width: 30px !important;
	max-height: 30px !important;
}
.reaction-user-alert {
	padding-bottom: 1px;
	border-bottom: 2px dashed #D31141;
	margin-bottom: 2px;
	float: right;
}
.reaction-user-alert-new {
	padding-bottom: 1px;
	float: right;
}
.reactions {
	margin-top: 5px;
	padding: 3px 0;
}
.reactions-icon {
	padding: 3px;
	margin: 0 1px 0 2px;
	float: right;
	color: #fff;
}
.reactions-post-button-ul {
	float: right;
	margin-left: 10px;
	margin-right: -10px;
	list-style: none;
}

I appreciate your input, but try not over complicate things, i added to the HTML what you suggested here and it will work. thanks.

[cabot]

Well, I didn't feel I was complicating things. Sorry about that.

[Gumboots]

Cabot's suggestion would actually have simplified things by removing a small amount of cargo cult code.

What you really mean is you just want the bloody thing to work, and aren't too fussed about the details. Which is fine, but not quite the same thing.

[Miri4ever]

I have noticed the Color Picker won't accept numbers higher than 4 Digits, and with the 5 or 6 Number / Letter it removes the color you wanted to type in and switch to transparent mode.

Not even to mention, it took me an age to remove this white colored things from the ACP menu. Luck the second tab appears to be normal. If using styles and color, always stay on PHPBB Standards and not try to add white colors by CSS with users might use a dark theme with white letters.

Why could we not have Font Awesome Icons instead of those ugly emojis? Sure, I know I can use my own, but for the basic setup it might be less difficult as the PHPBB Editors, in most cases, also use those.

[Steve]

I have noticed the Color Picker won't accept numbers higher than 4 Digits, and with the 5 or 6 Number / Letter it removes the color you wanted to type in and switch to transparent mode.

I will fix that, for now just don't use the hash tag.

Not even to mention, it took me an age to remove this white colored things from the ACP menu. Luck the second tab appears to be normal. If using styles and color, always stay on PHPBB Standards and not try to add white colors by CSS with users might use a dark theme with white letters.

I'm unclear what you mean? A slight guess you have edited the acp style sheet to make it dark themed?

Why could we not have Font Awesome Icons instead of those ugly emojis? Sure, I know I can use my own, but for the basic setup it might be less difficult as the PHPBB Editors, in most cases, also use those.

Font awesome is a huge library very useful but they do not cover most popular reaction images only a few. Yes you are correct, you just replace the images with what you would like to use.

Thanks for testing.