Topic Stopwatch

It worked!

There’s no space between the timer and the button now (which isn’t a huge deal, but something you might want to be aware of), but the position is much better.

4 Likes

Thanks for reporting back :grinning: I will definitely look into the button spacing. There are some other minor things I’d like to improve when I get a chance as well. I’ll be sure to respond here whenever there’s an update.

2 Likes

This theme is so much fun!

You can have a timed meeting within a topic, say for an hour. You add the “stopwatch” (or whatever tag you assign) to the tag field, refresh, and the timer appears. You start the timer, have your meeting, and then you can simply delete the tag and the timer disappears and your topic appears as any old regular topic. Here is a little video of me playing with the feature.

6 Likes

@tshenry I have an recommendation for an enhancement.

The following conversation talks about how you can create private tags (i.e. staff only tags) and hide them so only admin can see them. I think this would be nice for the timer feature where I could establish a staff only tag called “timer” and it would be hidden from all users. Note that this feature is brand new - it was established this week to be able to hide tags (See link below).

The problem is when I use this new feature, and the tag is hidden, this causes a bug in your timer theme - the tag isn’t showing, and thus the timer doesn’t appear. Is there a way the timer theme can work off both visible and invisible tags (i.e. staff tags that users can’t see)?

Thanks.

2 Likes

This would be a great enhancement. The method I use to apply the stopwatch currently needs the tag to be in the DOM. I imagine a reference to a tag is not present when a non-staff user views a topic with a staff-only tag.

I’m hoping and waiting on a pull request that should make finding the out if the tag is present in a topic less reliant on what’s in the DOM.

Hang tight on this for now. I’ll be watching for a way to handle the staff-only tags and I plan on implementing a setting for the spacing between the button and the clock since it seems like needs to be adjusted to accommodate custom fonts.

2 Likes

After looking into it, I’m not sure when or if the visible-to-staff-only tags will be usable with this, but being that it’s such a new feature, I’m hoping the necessary elements to pull it off might show up at some point. I haven’t given up on this yet!

It dawned on me you might be able to get somewhat of the desired result using the following CSS. The tag will still be in the DOM, but not visible on the page:

.tag-tagname {
    display: none;
}
.staff .tag-tagname {
    display: initial;
}

You would change “tagname” to whatever tag you want hidden for all non-staff users. If that CSS ends up being sufficient, I can work it into a setting. Let me know :slightly_smiling_face:
Edit: this ends up leaving a comma if there’s more than one tag. On an unmodified theme, the following additional CSS looks like it should work to adjust the commas if the hidden tag is at the end of the list of multiple tags, but I would test it to make sure there are no adverse side effects I didn’t pick up on:

.discourse-tags .discourse-tag.simple:after, 
.list-tags .discourse-tag.simple:after {
    display: none;
}
.discourse-tags .discourse-tag.simple:not(:first-child):before, 
.list-tags .discourse-tag.simple:not(:first-child):before {
    content: ", ";
    margin-left: 1px;
}
.discourse-tag.simple, 
.discourse-tag.simple:visited, 
.discourse-tag.simple:hover {
    margin-right: -4px !important;
}

In the mean time, if you’d like to update, I’ve added a theme setting to adjust the spacing between the clock and the control button. This should be helpful for those using custom fonts on their forum. If anyone finds any issues with this new addition, please, let me know.

6 Likes

@tshenry I tested out this CSS code you provided and I think there is a bug. It seems to be working fine when I am logged in as staff - I can see the tag, but non staff cannot. I tried playing around with the code by deleting the following, and all seems to be working well in ‘staff mode’:

.staff .tag-tagname {
display: initial;
}

However, when I use the all of the above code, and I log out of my staff user account, and view as both a non member, or a non staff member, the tag is invisible but the timer is also invisible. Again, seems this work great when logged in as staff, but doesn’t work for non staff.

View when logged in as Staff:

View when not logged in at all:

View when logged in as non staff:

2 Likes

Thanks for posting the issue :slightly_smiling_face:

So the goal behind this CSS is to hide a tag from non-staff users while still making it accessible through code. Because of this, you will need to turn off the “Tags are visible only to staff” option for the tag you are associating with the topic stopwatch for now, otherwise only staff-users will see the stopwatch. Again, this is not ideal, but it’s the best way I know how to handle it given current limitations.

So with the following CSS, the tag should be hidden where it needs to be, so long as the tag is not the first in a list of multiple tags. (You should replace the previous CSS with this as I fixed a scoping issue):

.tag-tagname {
    display: none;
}
.staff .tag-tagname {
    display: initial;
}

.discourse-tags .discourse-tag.simple:after, 
.list-tags .discourse-tag.simple:after {
    display: none;
}
.discourse-tags .discourse-tag.simple:not(:first-child):before, 
.list-tags .discourse-tag.simple:not(:first-child):before {
    content: ", ";
    margin-left: 1px;
}
.navigation-topics, .category-forum {
    .discourse-tag.simple, 
    .discourse-tag.simple:visited, 
    .discourse-tag.simple:hover {
        margin-right: -4px !important;
    }
}

There is also a little script that needs to run to keep the tag from displaying on the tags page for non-staff users. You can place the following in the </head> tab of a theme:

<script type="text/discourse-plugin" version="0.8.18">
    api.onPageChange((url) => {
        if(url === "/tags" && $(".staff").length === 0) {
            $(".tag-tagname").parent().css("display", "none");
        }
    });
</script>

Remember to replace “tagname” with your tag’s actual name. There’s one in the script now too. I think this should get you were you want to be, but please continue to test things for any odd side effects. I should have caught the most obvious ones with the code in this post.

Let me know if I need to clarify anything. :slightly_smiling_face:

5 Likes

Thanks you @tshenry. Appears to be working well.

No problem :grinning: Let me know if you find any areas that need fixing.

There’s one minor side effect with the advanced search where you can use tags as a search option. When a list of tags drops down, the tag name is hidden, but the number of uses continues to show, taking up a row in the list. I’m playing around with a way to handle it, but hopefully that isn’t too big of a deal.

This CSS workaround is hopefully a temporary solution.

2 Likes

This may be a stupid question. How do non staff members tag a post? As a staff member, I see the following:

image

However, when I log in as a non staff member, I don’t see this option available. Note that I’ve tried adjusting the min trust level for tagging to 0, and still doesn’t seem to be working.

Hmm, based on your description and screenshots, it looks like you want a non-staff user to be able to tag another user’s topic? If a non-staff user wants to edit another user’s topic title, category, and/or tags, they need to be at least TL3 (regular), and the site setting, trusted users can edit others, must be checked.

They should be able to create/edit/add tags to their own topics as they are composing them and after they have been posted if the, min trust to edit post, and possibly a few other editing settings are set to allow it.

I could be misunderstanding the scenario, so let me know :slightly_smiling_face:

3 Likes

Yes, this is exactly what we’d like.

Is there a way to change this setting to lessen the trust level requirement to say TL1 or TL2? I suppose a workaround here is to edit the requirements to achieve a TL3 to something less. It would dilute the credibility of trust levels however…It would be nice to allow members or TL2 to be able to edit posts (and tags).

I’m not aware of a way to adjust the trust level requirements for that specific setting. You could set the default trust level setting to TL3, but I wouldn’t recommend that as it’s putting a decent amount of power in every new user. You could propose the addition of a setting for the trust level of the trusted users can edit others setting in #feature.

Unfortunately, that’s all I can think of for now.

1 Like

This theme has been updated! Here’s what’s new:

  • I’ve “widgetized” the code, hopefully making for a better implementation overall
  • Added a new setting to toggle whether to display topic stopwatches on mobile
  • The stopwatch is now left-justified on mobile
  • Fixed the odd display behavior when editing the topic title, category, and tags. There’s no more need to refresh the page to get it to display again

Additional Notes: the topic stopwatch is slightly less responsive in design due to the changes, but this shouldn’t be noticeable unless you’ve made your browser window very small. At that point, you may see a little overlap with the tags. If this becomes an issue, please report it. I’d be more than willing to add more responsiveness if needed.

Please let me know if there are any issues after updating!

8 Likes

Would it be possible to add something that enables you to count down from a certain amount of minutes to zero? So that people can see how much time is left?

3 Likes

Hey there :wave:

It’s certainly possible, but at the moment, I don’t have plans to add that functionality to this component, nor create a separate component for a topic countdown timer. If you or anyone else wants to build off of the existing component, you are more than welcome!

7 Likes

I would also be quite interested in getting this type of functionality. My use case would be as follows: I would like to have this be a count-down timer from some specified amount of time. For example, I would want to be able to set the timer to say, 30 minutes, and have it count-down to zero, and perhaps start counting upwards again after time expired. I envision the ‘set amount of time’ could be establish through a hidden tag, where the thread owner could establish a integer tag from say (0, 10000) and the theme would pick this up as the time to start the countdown from.

@tshenry Is something like this possible?

Sure, I think something like that sounds doable with a theme component. You and @Not-The-Foggiest could always split the costs in a #marketplace posting and try to get a developer to build it for the two of you.

5 Likes

@Not-The-Foggiest Let’s take this offline and discuss.

1 Like