This topic was marked solved by its starter, on August 1st, 2013, 07:52 AM
« Message icons, some proposed changes
Additional formatting of user names
Permissions UI, please help, everyone! »

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Additional formatting of user names
« on March 22nd, 2013, 01:10 AM »
So, as you'll have seen, we already grab the colour of a member's group to override the colour of links to their name, and it occurs to me that we could add other formatting pretty minimally.

The obvious cases are bold, italics, shadows, with maybe things like sparkle effects as well as icons for the groups. I'm thinking about trying to cover all the things people want, and do so easily.

The biggest objection in the past for formatting names with bold and italic is because the who's online does this as well, but I see no reason why we couldn't replace that with an image for contact/hidden respectively.

That would free us up to do all kinds of neat things that a surprising number of people ask for - and we can do it in a way that doesn't cause any additional issues in the long run, which sounds like a win-win to me.

Thoughts?
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Additional formatting of user names
« Reply #2, on March 22nd, 2013, 03:09 AM »
Actually, that's a *very* good point.

Right now we inject the colours inline. What we should be doing is converting them to a class, e.g. groupnn where nn is the group id, then passing the styling in through a dynamic include (like menu items and languages do)

This would offer up all kinds of options to admins for styling, in theory. And it'd probably save bandwidth if you have multiple instances of the same groups on the page.
Posted: March 22nd, 2013, 02:17 AM

Now that I think about it, there is an extra saving - it doesn't even need to be pulled every page, as such. You still need to get the groups of everyone, of course, but you wouldn't need to get the group details every page. Every little bit helps :)

You would have to flush the CSS cache, at least wherever it is that the group styling would be, but that's a minor detail by comparison.

@Nao, what do you reckon?
Re: Additional formatting of user names
« Reply #3, on March 22nd, 2013, 03:40 AM »
Also, here's a quick thing I've done, changing the formatting of names for both people on your contact list and people who are online but hidden. While I've shown it here for the 'viewing given topic' item, the same icons and so on are used in the info centre in what I have.

The idea is that there's now no formatting on the name itself and that part can be delegated safely elsewhere in the system. I did have trouble finding an icon that made sense for hidden though!

📎 who-online.png - 6.02 kB, 302x158, viewed 326 times.

Powerbob

  • Posts: 151
My Alpha test site; http://www.pplb.net/wedge/index.php

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Additional formatting of user names
« Reply #6, on March 24th, 2013, 08:22 PM »
Hmmmm I dunno.
If you feel like doing it, do it. I don't like that the icons are so big though. It'll take adjusting.

100% agreement on group colors.
What would be the class name? I'm thinking mgroup-ID. With a numeric id.
 Which reminds me I wanted to test waters: how about we use only dashes in selector names instead of underscores? I have a feeling it would compress better... and it looks better, too.
Posted: March 24th, 2013, 08:20 PM

PS: bugger, I could have seen an easy movie reference for rev 2019 :P

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Additional formatting of user names
« Reply #7, on March 24th, 2013, 08:40 PM »
Quote
If you feel like doing it, do it. I don't like that the icons are so big though. It'll take adjusting.
The idea is that it should be clear at a glance, they're only 16x16 (and still less than line-height is). One of the icons is already in use elsewhere, the other is new. But I'm cool with changing it.
Quote
What would be the class name? I'm thinking mgroup-ID. With a numeric id.
I was thinking 'group1', 'group2' or whatever, but I'm not that fussed what it is.
Quote
Which reminds me I wanted to test waters: how about we use only dashes in selector names instead of underscores? I have a feeling it would compress better... and it looks better, too.
I don't see why it would compress any differently in practice, the aesthetic can easily go either way for me.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Additional formatting of user names
« Reply #8, on March 26th, 2013, 06:19 PM »
Yeah, I suppose group1 is okay, too..! Lol, I didn't consider removing the dash entirely, because it began with "group-admin" in my mind, then I shortened it to a group IP...

Icons: maybe it's time to look into a proper 12x12 set or something...

Compression: in HTML pages, everything uses dashes. "data-id", "accept-charset", etc...
Where can we see underscores...?
In classes and IDs.
Well, also in inline JavaScript code. I made a quick test to convert all underscores to dashes in class and id attributes, and the resulting gzipped code was 7 bytes larger, so maybe it's not such a good argument...

The resulting HTML did look way better, though... :^^;:

Add this somewhere in ob_sess:
Code: [Select]
$buffer = preg_replace('~(class|id)="([^"]+)"~e', '\'$1\' . \'="\' . str_replace(\'_\', \'-\', \'$2\') . \'"\'', $buffer);
Re: Additional formatting of user names
« Reply #9, on March 26th, 2013, 06:22 PM »
Oh, interesting...

Code: [Select]
$buffer = preg_replace('~(class|id)="([^"]+)"~e', '\'$1\' . \'="\' . str_replace(\'_\', \'-\', \'$2\') . \'"\'', $buffer);

The post above has a bug I can systematically reproduce. Click Quick Edit on edit, then cancel. The post loses its bottom margin, and more importantly, the code block's horizontal scrollbar is no longer accessible. Odd...
I suspect it's related to the flexbox bugs that were reported before.
I'm reproducing the code block above so I can see if it's always like that.

:edit: Yes, it doesn't depend on its placement. Also... The whitespace below the block is also eaten after a quick edit. DEFINITELY that Chrome bug with flexbox.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Additional formatting of user names
« Reply #10, on March 26th, 2013, 07:06 PM »
Quote
Icons: maybe it's time to look into a proper 12x12 set or something...
I looked at Diagona, being 10x10, but nothing there worked for me. 16x16 is still rather tiny in most cases. I think I'll commit what I have and we can change the icons later if it's a problem. Oh, that reminds me, the Users Online Today plugin will probably need changing too.
Quote
Where can we see underscores...?
I see underscores in more places than I see hyphens. Then again I stare at PHP code, not HTML/CSS/JS ;)
Quote
Yeah, I suppose group1 is okay, too..! Lol, I didn't consider removing the dash entirely, because it began with "group-admin" in my mind, then I shortened it to a group IP...
I don't really care what it is, as long as we can do it. You want to do this one or want me to do it? I'm at a brick wall with the permissions stuff.
Quote
I suspect it's related to the flexbox bugs that were reported before.
I'm reproducing the code block above so I can see if it's always like that.
And I have trouble using the horizontal scrollbar, the only way I can use it is if I get the mouse hotspot (which is 2px inside the top of the arrow image) to the very top pixel of the scrollbar. Not friendly :/
Re: Additional formatting of user names
« Reply #11, on March 28th, 2013, 04:46 AM »
Anyway, I have a working version of it using classes rather than inline styles. I haven't benchmarked it for size, but it should perform a little better because I don't need to fetch all the colours as such, I only need to fetch (and thus *cache*) the actual name->primary group association, because colours are already cached elsewhere.

This also means the usual gamut of appropriate cache flushing, which I think I've nailed.

There are some other interesting possibilities that come out of this. I've implemented it as top level classes, i.e. quite literally .group1, .group2 etc for all groups that actually have colours. What it does mean is that the often-requested 'Blizzard style posts' can be done *crazy* easy, because now the principle styling of groups is not tied into the group itself.

So if you want to style an entire post with the same formatting, just add the relevant class in - which shouldn't really be a problem from my perspective. There are all kinds of weird exceptions, like quotes, but I figure that's all fixable too. What I want to know is whether people would genuinely find it useful to have that, or whether I shouldn't bother making it an option or anything. Doing it as a plugin would be possible but not particularly pleasant (it would be better to make it core rather than not)

I haven't figured out what I want to do with things like offering easy options in the admin panel about group icons or anything like (but that could actually be a plugin!) or styling things like bold, italic etc. (which I'd rather were core than not, because while it's possible to do the UI side of it, doing the admin side is going to be... not so nice)

* Arantor continues to ramble on late into the night.
Posted: March 28th, 2013, 03:45 AM

Oh hell I just found a problem, and I'm really not sure how best to fix this.

The profile links in topic display all have class .umme attached to them, and currently the rewriter is adding two class attributes. I presume similar would happen with the mentions tag too (since the member bbc converts to include a class="mention", though I don't see what it's doing at present)

I might try and modify wedge_profile_colors() to get pre-existing classes, but that's where I'm up to.
Posted: March 28th, 2013, 04:07 AM

OK, I think I fixed it, by modifying wedge_profile_colors() but also that feels hacky; strpos and string slicing seems not how I should be doing this but it is at least linear in operation.
Posted: March 28th, 2013, 04:30 AM

Yup, fixed it, wedge_profile_colors now does it correctly. I think Imma go commit this.
« Message icons, some proposed changes
Permissions UI, please help, everyone! »