Topic Stopwatch

Installing this theme component will add a stopwatch to the top of a topic. A tag specified in the theme settings will establish which topics the stopwatch will appear.

Example:

Settings

There are three settings. You must add a single tag name to associate with a stopwatch. In this example I use a tag called “speed-read.”

Installation

IMPORTANT: You must be running Discourse Version 2.0.0.beta4 or later for this theme component to work.

Import Links:

https://github.com/tshenry/discourse-topic-stopwatch.git

About

This theme component was inspired by the discussion found here:

The usefulness of this theme component is very niche I imagine, but hopefully it will end up helping a few people either for what it is, or as example code.

Some ideas where it could be applied in a forum:

  • Some type of quiz/test practice
  • Speed-reading exercises
  • Public speaking practice

As of now, it does not save the time after leaving the topic.

Repo:

GitHub - tshenry/discourse-topic-stopwatch


Please feel free to post if there are any questions, problems, or suggestions!
18 Likes

Thanks so much for creating this!

One quick question - Where can I find the Theme Settings?

2 Likes

What a great niche theme. I can imagine how useful this would be for tutoring forums for test giving. If anyone else has uses for it I’d love to hear what they are. I see @fellowshipforums hosts luncheon meetings that go for a specific time period.

1 Like

Just a note that I’ve tried the following route:
/admin/customize/themes/:theme_id/settings and it doesn’t seem to be working.

https://www.fellowshipforums.com/admin/customize/themes/15/settings

@fellowshipforums did you add it as component of the main theme (not as a theme) of the forum?

2 Likes

Yes, we did:

1 Like

Ah ok, I just checked and you are on Discourse version 1.9.4. Theme settings were introduced in Discourse Version 2.0.0.beta4, so you will need to update to get this up and running properly. If that is impossible for whatever reason, let me know and I can figure something out.

Once you do update, the theme settings will be located right below the Uploads section in that last screenshot you posted.

5 Likes

It worked! As you mentioned in your message to me, I had to uninstall and reinstall the theme to get the “Theme Settings” to appear.

One question - Is there a way to get the timer to appear to the left of the timeline (as in your image)? It currently looks like this for me:

Thanks!

Awesome!

Let me take a look at the positioning issue and get back to you. I styled everything based on a clean discourse theme, so it’s possible you’ve got some customizations that need to be taken into consideration.

FYI: I tried looking at this on a different computer and it appears okay. I suppose with larger/wider monitors with better resolution, it can throw this off?

1 Like

That’s a possibility. I just checked Safari, Firefox, and Chrome on my MacBook and couldn’t get it to reproduce. I will take a look on a larger, higher resolution screen. Also what browser were you using when it gave you grief?

2 Likes

Thanks! I was viewing it on safari on my 13 inch MacBook pro retina.

1 Like

Alright, I think I narrowed down the problem. It was affecting IE11 too. Go ahead and click the Check for Updates button on the theme page and update it when you get a chance. Please let me know if you find any other issues :slightly_smiling_face:

4 Likes

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.

3 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