"subscribe topic" to really worked as a checkbox

[D. K]

Our users when they see in the "tool" pull down the "checked check box" next to "subscribe topic" they believe they are going to get an email notice. They don't realize they have to actually click "subscribe topic" to get subscribed.

It would be better if the "subscribe topic" really worked as a checkbox.

Is this something we can change or is it a development issue?

subscr-cheched.png

[Gumboots]

That's poor use of icons. It really should display an unchecked box icon if not subscribed. You can change that via CSS easily enough (just set a different content declaration for the icon) but if you want it to react to user choices (ie: show a different icon when subscribed) that would require editing the template. Which is not that difficult, if you really want to.

ETA: Hang on a sec. It is supposed to do just that, but it doesn't seem to be working. I just checked it in a topic I am not watching (and that I had never looked at before) and the icon is already checked. You may have found a bug in phpBB.

The template logic is here:

Code: Select all

					<li>
						<a href="{U_WATCH_TOPIC}" class="watch-topic-link" title="{S_WATCH_TOPIC_TITLE}" data-ajax="toggle_link" data-toggle-class="icon <!-- IF S_WATCHING_TOPIC -->fa-check-square-o<!-- ELSE -->fa-square-o<!-- ENDIF --> fa-fw" data-toggle-text="{S_WATCH_TOPIC_TOGGLE}" data-toggle-url="{U_WATCH_TOPIC_TOGGLE}" data-update-all=".watch-topic-link">
							<i class="icon <!-- IF S_WATCHING_TOPIC -->fa-square-o<!-- ELSE -->fa-check-square-o<!-- ENDIF --> fa-fw" aria-hidden="true"></i><span>{S_WATCH_TOPIC_TITLE}</span>
						</a>
					</li>

Somehow that is not doing what it ought to be doing.

I need more coffee this early in the morning, but it seems to be a conflict between this:

Code: Select all

data-toggle-class="icon <!-- IF S_WATCHING_TOPIC -->fa-check-square-o<!-- ELSE -->fa-square-o<!-- ENDIF --> fa-fw" 

...and this:

Code: Select all

<i class="icon <!-- IF S_WATCHING_TOPIC -->fa-square-o<!-- ELSE -->fa-check-square-o<!-- ENDIF --> fa-fw"

I'm not even sure what the point of data-toggle-class is when the template has logic to swap icons based on IF S_WATCHING_TOPIC anyway. I'll test it later.

[D. K]

Thank you for such a very prompt response.

Our group is a bunch of +/-70 seniors...... both users & admins

We know enough to get the phpBB up & running. We are "Tech Neophytes" so once it is working we try not to tinker.

We worry that we are not tech tech enough to truly understand or can't foresee the cascading impact on things like other settings or upgrades.

If this is easily done & is unlikely to affect our existing phpbb config then we are interested in doing the change.

It most likely will take us 7-10 days figure how to implement your suggested instructions. but we will report back.

We know it is a lot to ask but could we get step by step instructions?

For ours users we think this is a import clarification so we will attempt this.

Thanks again

[Gumboots]

What I was saying involved a bit of thinking out loud at 6:30 in the morning.

To simplify: I think you have found an actual bug in phpBB. I will test some fixes for it later today, and let you know what works.

[D. K]

Thank you.

[Gumboots]

Ok, definite bug. As I suspected, the condition for changing the icon class is arse about, so it's forcing the unchecked box when subscribed and the checked box when unsubscribed.

This:

Code: Select all

<i class="icon <!-- IF S_WATCHING_TOPIC -->fa-square-o<!-- ELSE -->fa-check-square-o<!-- ENDIF -->

Should be this:

Code: Select all

<i class="icon <!-- IF S_WATCHING_TOPIC -->fa-check-square-o<!-- ELSE -->fa-square-o<!-- ENDIF -->

That works the way it should.

Nice catch. I'd edited that template for my own style, but missed spotting the faulty condition there. Cheers.

ETA: On the tracker now - https://tracker.phpbb.com/browse/PHPBB-17492

[D. K]

What is the name of the file we should edit?

[D. K]

Thanks. We figured out which file to edit.

But our original issue remains. That check in the box is confusing. The check mark makes people think they are already subscribed.

Our users when they see in the "tool" pull down the "checked check box" next to "subscribe topic" they believe they are going to get an email notice. They don't realize they have to actually click "subscribe topic" to get subscribed.

It would be better if the "subscribe topic" really worked as a checkbox.

Is this something we can change or is it a development issue?

[Gumboots]

Ok, I dug into it a bit more. It's actually quite hilarious once you figure it out.

This code works as it really should:

Code: Select all

				<!-- IF U_WATCH_TOPIC -->
					<li>
						<a href="{U_WATCH_TOPIC}" class="watch-topic-link" title="{S_WATCH_TOPIC_TITLE}" data-ajax="toggle_link" data-toggle-class="icon fa-check-square-o fa-fw" data-toggle-text="{S_WATCH_TOPIC_TOGGLE}" data-toggle-url="{U_WATCH_TOPIC_TOGGLE}" data-update-all=".watch-topic-link">
							<i class="icon fa-square-o fa-fw" aria-hidden="true"></i><span>{S_WATCH_TOPIC_TITLE}</span>
						</a>
					</li>
				<!-- ENDIF -->

If you use that code you will see an unchecked box, and the "Subscribe topic" text, when you are not subscribed to that topic.
As soon as you subscribe to that topic, the icon will immediately change to a checked box, and the text will change to "Unsubscribe topic".
If you then choose to remove the subscription, the icon will immediately change to back the unchecked box, and the text will change to match.
This is how it really should behave.
--------------------------------------------------------
Explanation: The problem was caused by someone trying to use both conditionals in the template, and javascript conditionals in core.js. These were conflicting with each other, because the template conditionals were set up so the javascript was toggling them (IOW, the entire logic) and not just toggling the relevant class on the icon (which is what it is meant to do). Removing the template conditionals fixes this, because what is left are the basic classes that need to be toggled for this to work properly.

I think what must have happened is that the template conditionals are very old code that existed before the current javascript was added. Someone applied the javascript at some point, and didn't think to check the template logic, probably just assuming it was correct. Which it would be, if you weren't also trying to run the javascript.
--------------------------------------------------------
Anyway, thank you for bringing this to my attention. I now have a template that functions as it should, as least in this respect.

I would update the bug report but apparently I am not allowed to.

[LukeWCS]

@Gumboots
The issue with the icon not updating was related to the AJAX call, which also needs to be addressed. I've submitted the PR for PHPBB-17492, which now needs to be reviewed by the developers.

Tracker comment
GitHub phpBB #6797

[Gumboots]

I replied on GitHub. It works perfectly with just the classes in the template. I have tested it on local. Everything changes on click, just as it should. But you guys do wotcha like. As long as it ends up working that's good enough.

[LukeWCS]

I replied on GitHub. It works perfectly with just the classes in the template. I have tested it on local. Everything changes on click, just as it should.

Yes, but only as long as the page isn't reloaded.

Reload the page after clicking "Subscribe topic". You'll notice that the status is no longer correct because it displays an empty checkbox, which is incorrect. And if you then click "Unsubscribe topic," a checked checkbox is displayed, which is also incorrect.

You're using static classes in your last code, but these must be dynamically generated depending on S_WATCHING_TOPIC.

[Gumboots]

Ah, I see. Fair enough. Thanks for the heads up. I've changed my template to suit.

@D.K: This is the code you need:

Code: Select all

				<!-- IF U_WATCH_TOPIC -->
					<li>
						<a href="{{ U_WATCH_TOPIC }}" class="watch-topic-link" title="{{ S_WATCH_TOPIC_TITLE }}" data-ajax="toggle_link" data-toggle-class="icon fa-{{ !S_WATCHING_TOPIC ? 'check-' }}square-o fa-fw" data-toggle-text="{{ S_WATCH_TOPIC_TOGGLE }}" data-toggle-url="{{ U_WATCH_TOPIC_TOGGLE }}" data-update-all=".watch-topic-link">
							<i class="icon fa-{{ S_WATCHING_TOPIC ? 'check-' }}square-o fa-fw" aria-hidden="true"></i><span>{{ S_WATCH_TOPIC_TITLE }}</span>
						</a>
					</li>
				<!-- ENDIF -->

[Gumboots]

Disregard my comment on Github then. I can't be bothered logging back in there at the moment, but will edit it next time I'm there.

[Gumboots]

Y'know really, for consistency, it'd also make sense for the bookmark icon to toggle between fa-bookmark-o and fa-bookmark. Not sure anyone can be bothered though. I can't at the moment, but it would make sense.