Simple Machines Community Forum

General Community => Site Comments, Issues and Concerns => Topic started by: NanoSector on May 03, 2012, 06:16:31 PM

Title: Little Topic Solved improvement
Post by: NanoSector on May 03, 2012, 06:16:31 PM
Hi!

Today (or, a couple of minutes ago) I was browsing a random PHP-related website running SMF.

The site had a pretty useful effect, showing the Solved topics in green.
Here is an example:
http://www.phpfreaks.com/forums/index.php?PHPSESSID=q20eae9kb52qq5n6m49i1t76j6&board=11.0

I thought this could be useful on this site, too, for having an overview of solved topics in the support boards.

What do you guys think?
Title: Re: Little Topic Solved improvement
Post by: French on May 03, 2012, 06:53:16 PM
Agree this is useful Yoshi2889,would like to know how they have done that.
Title: Re: Little Topic Solved improvement
Post by: Arantor on May 03, 2012, 07:08:03 PM
Looks like the Topic Solved mod that the SimpleDesk team were working on a long time ago, actually. What it amounts to is a template change to the message index to use a different style in the individual rows when a topic is solved.
Title: Re: Little Topic Solved improvement
Post by: Colin on May 03, 2012, 07:57:47 PM
Looks good to me as well.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on May 03, 2012, 08:32:30 PM
Arantor: Yep, it's actually just like the Locked status, but then a greenie :P
Title: Re: Little Topic Solved improvement
Post by: Arantor on May 03, 2012, 08:33:24 PM
Yes, and there's some CSS injected to handle the custom added style... (I think it was Nas who wrote the SD team one, though I don't think it ever got finished)
Title: Re: Little Topic Solved improvement
Post by: NanoSector on May 03, 2012, 08:37:04 PM
Quote from: Arantor on May 03, 2012, 08:33:24 PM
Yes, and there's some CSS injected to handle the custom added style... (I think it was Nas who wrote the SD team one, though I don't think it ever got finished)
That wouldn't be hard to add, would it? I'd say copy the locked status CSS over and change it's color. Maybe it isn't just that simple, I dunno lol.
Title: Re: Little Topic Solved improvement
Post by: Arantor on May 03, 2012, 08:40:02 PM
Uh, no it wouldn't be hard? (I thought you knew how to write mods like this, adding to $context['html_headers'] is trivial...)
Title: Re: Little Topic Solved improvement
Post by: NanoSector on May 03, 2012, 08:47:42 PM
Quote from: Arantor on May 03, 2012, 08:40:02 PM
Uh, no it wouldn't be hard? (I thought you knew how to write mods like this, adding to $context['html_headers'] is trivial...)
I know how to write mods, lol, though I epically suck with CSS and positioning and that crap :P
A mod to add such functionality isn't hard, though I have no idea what topic solved mod is used here.
Title: Re: Little Topic Solved improvement
Post by: Arantor on May 03, 2012, 08:53:47 PM
The one here IIRC is a modified version of Sinan's.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on May 03, 2012, 08:54:57 PM
Quote from: Arantor on May 03, 2012, 08:53:47 PM
The one here IIRC is a modified version of Sinan's.
Right. Might check for a quick edit for that mod tomorrow/today (it's 3:00 AM here), I'm pretty tired now.
Title: Re: Little Topic Solved improvement
Post by: French on May 11, 2012, 12:21:28 PM
Any progress on how to showing the Solved topics in green Yoshi2889  ;)
Just don´t know how to add this line in Message index.pp
Title: Re: Little Topic Solved improvement
Post by: NanoSector on May 11, 2012, 12:30:29 PM
Quote from: French on May 11, 2012, 12:21:28 PM
Any progress on how to showing the Solved topics in green Yoshi2889  ;)
Just don´t know how to add this line in Message index.pp
Woops, totally forgot about this.

I'll check on this later today or tomorrow :)
Title: Re: Little Topic Solved improvement
Post by: French on May 12, 2012, 08:57:24 AM
MessageIndex.template.php
Is it possible to add a line this is an example elseif ($topic['is_solved']) $color_class = 'solvedbg';   The same way as Sticky topics
Just don't know how you determined the color green
            
foreach ($context['topics'] as $topic)
{
// Is this topic pending approval, or does it have any posts pending approval?
if ($context['can_approve_posts'] && $topic['unapproved_posts'])
$color_class = !$topic['approved'] ? 'approvetbg' : 'approvebg';
// We start with locked and sticky topics.
elseif ($topic['is_sticky'] && $topic['is_locked'])
$color_class = 'stickybg locked_sticky';
// Sticky topics should get a different color, too.
elseif ($topic['is_sticky'])
$color_class = 'stickybg';
                     // Locked topics get special treatment as well.
elseif ($topic['is_locked'])
$color_class = 'lockedbg';
// Last, but not least: regular topics.
else
$color_class = 'windowbg';

// Some columns require a different shade of the color class.
$alternate_class = $color_class . '2';
Title: Re: Little Topic Solved improvement
Post by: NanoSector on May 12, 2012, 09:11:56 AM
Oh, thanks for looking into this French :)

In index.css define this:
.solvedbg
{
background-color: rgb(205, 233, 199);
}
.solvedbg2
{
background-color: rgb(205, 233, 199);
}


I guess.
Title: Re: Little Topic Solved improvement
Post by: French on May 12, 2012, 09:58:36 AM
changed in index.css /* Color for background of *topics* requiring approval */.approvetbg

/* Sticky topics get a different background */
.stickybg
{
   background: #625349;
}
.stickybg2
{
   background: #625349;
}
/* Solved topics get a different background */
.solvedbg
{
background: #66FF33;
}
.solvedbg2
{
   background: #66FF33;
}


changed in MessageIndex.template.php
foreach ($context['topics'] as $topic)
{
// Is this topic pending approval, or does it have any posts pending approval?
if ($context['can_approve_posts'] && $topic['unapproved_posts'])
$color_class = !$topic['approved'] ? 'approvetbg' : 'approvebg';
// We start with locked and sticky topics.
elseif ($topic['is_sticky'] && $topic['is_locked'])
$color_class = 'stickybg locked_sticky';
// Sticky topics should get a different color, too.
elseif ($topic['is_sticky'])
$color_class = 'stickybg';
                        // Solved topics should get a different color, too.
                        elseif ($topic['is_solved']) $color_class = 'solvedbg';
                     // Locked topics get special treatment as well.
elseif ($topic['is_locked'])
$color_class = 'lockedbg';
// Last, but not least: regular topics.
else
$color_class = 'windowbg';

Unfortunately it does not work  :-[
Title: Re: Little Topic Solved improvement
Post by: French on May 17, 2012, 04:41:52 AM
Last adds after getting this information
QuoteYou need to implement the solved background in the following pages
- Themes/default/css/index.css
- Themes/default/MessageIndex.template.php
- Themes/default/Recent.template.php

On an added note, you must give a solved both CSS clasess
class = 'windowbg solvedbg";
Still Do not get it working unfortunately
Title: Re: Little Topic Solved improvement
Post by: c9099088 on May 28, 2012, 02:57:50 AM
Thank you to share
Title: Re: Little Topic Solved improvement
Post by: knightofdoom on February 11, 2013, 11:28:10 PM
Nice idea.. Would be good if implemented..  :D
Title: Re: Little Topic Solved improvement
Post by: Arantor on February 11, 2013, 11:31:33 PM
What would be great is if it could be done without file editing.

It isn't possible in SMF without *serious* work but with some effort in strengthening the plugin system it could be.

/me knows what he's on about and would encourage those interested who know what I do to go check out a certain board on a certain forum where my own inspired-by-SMF variation is in use ;)
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 12, 2013, 05:04:03 AM
I might have to take another attempt on this, I'll keep this in my unread posts :)

Thanks for bumping.

Arantor: Yeah this does require some template editing in the regular SMF.
Title: Re: Little Topic Solved improvement
Post by: Antechinus on February 12, 2013, 05:47:00 AM
Not much template editing.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 12, 2013, 05:48:48 AM
Quote from: Antechinus on February 12, 2013, 05:47:00 AM
Not much template editing.
Not much indeed but it does require some editing.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 12, 2013, 06:24:29 AM
Based on Sinan's mod:

Sources/MessageIndex.php
Find:
t.id_last_msg, t.approved, t.unapproved_posts,

Add after:
t.is_solved,

----------

Find:
'is_posted_in' => false,

Add after:

'is_solved' => (bool) $row['is_solved'],


Themes/(theme)/MessageIndex.template.php
Find:
// Last, but not least: regular topics.
else
$color_class = 'windowbg';


Add before:
// Solved topics are greener.
elseif ($topic['is_solved'])
$color_class = 'solvedbg';


Themes/(theme)/css/index.css
At the end of the file, add:
.solvedbg
{
background: #66FF33;
}
.solvedbg2
{
   background: #66FF33;
}


Screenshot is attached.

EDIT: If you want it to work in Unread Replies and Unread Topics

Sources/Recent.php
Find:
m.id_topic, t.id_board, b.id_cat,

Add after:
t.is_solved,

----------

Find:
'message' => $row['body'],

Add after:
'is_solved' => (bool) $row['is_solved'],

----------

Find:
ms.id_topic, t.id_board, b.name AS bname,

Add after:
t.is_solved,

----------

Find:
'is_posted_in' => false,

Add after:
'is_solved' => (bool) $row['is_solved'],

Themes/(theme)/Recent.template.php
This operation needs to be done twice!
Find:
if (strpos($topic['class'], 'locked') !== false)
$color_class .= 'lockedbg';


Add after:
if ($topic['is_solved'])
$color_class = 'solvedbg';
Title: Re: Little Topic Solved improvement
Post by: Acans on February 12, 2013, 12:35:02 PM
Awesome Yoshi!

Gave it a quick spin and works perfectly. :) Plus tried it with a lighter green for curve, almost the same as SD.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 12, 2013, 12:50:28 PM
Thanks snow :)

The lighter background indeed looks better. Care to share the hex code? :)
Title: Re: Little Topic Solved improvement
Post by: Acans on February 12, 2013, 01:17:16 PM
Sure, E2FFD1 :)
Title: Re: Little Topic Solved improvement
Post by: 4Kstore on February 12, 2013, 02:54:14 PM
I love it :D

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg441.imageshack.us%2Fimg441%2F7313%2Fimagen001q.png&hash=9b3a595609baa3eb1ea5310375bd327e4363b12c)
Title: Re: Little Topic Solved improvement
Post by: Arantor on February 12, 2013, 02:56:06 PM
Can you use quick moderation to mark a bulk of topics solved? (That'd be a neat improvement)
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 12, 2013, 03:10:00 PM
Quote from: Arantor on February 12, 2013, 02:56:06 PM
Can you use quick moderation to mark a bulk of topics solved? (That'd be a neat improvement)
No idea, I'd have to take a read through the code. On this site you can't, at least.

Thanks 4K :)
Title: Re: Little Topic Solved improvement
Post by: Arantor on February 12, 2013, 03:12:19 PM
I know, but it'd be a neat improvement - and it would likely encourage updating the qmod code to be hookable in 2.1 (it's not a small job)
Title: Re: Little Topic Solved improvement
Post by: Matthew K. on February 12, 2013, 03:38:24 PM
Does look very nice indeed.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 12, 2013, 08:26:51 PM
I don't know how the qmod code works, honestly. I'd have to take a look at that sometime :)

Thanks Labradoodle :)

Any chances of this being applied on this site or...?
Title: Re: Little Topic Solved improvement
Post by: Arantor on February 12, 2013, 08:35:26 PM
The qmod code is horrid because it has to cope with qmod as icons as well as with checkboxes.
Title: Re: Little Topic Solved improvement
Post by: French on February 13, 2013, 05:10:12 PM
Completely forgotten to go on to find a solution, but this is a neat one thanks for sharing Yoshi2889  ;)
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 13, 2013, 05:23:10 PM
Not a problem :)

Arantor: If it were me I'd separate the code for that...
Title: Re: Little Topic Solved improvement
Post by: French on February 16, 2013, 02:22:59 AM
For the interested  ;)
Our users can choose from several themes, the text in one of the themes was not easy to read, so had to modified this in themes/css/index.css

#messageindex td a {
    color: #647969;
}

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FDXFTQvo.png&hash=3a4c0b9180a268aadcd3fb8673fc0166ac36f7b9)
Title: Re: Little Topic Solved improvement
Post by: Antechinus on February 17, 2013, 03:47:45 PM
You think that is easy to read? IMO, you would have had a hard time making it less readable.
Title: Re: Little Topic Solved improvement
Post by: Irisado on February 18, 2013, 11:50:53 AM
Way too garish for me French!  The clashing colours make my eyes hurt.  Yoshi's version conveyed the same effect in a less overtly bright manner.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 18, 2013, 11:53:29 AM
Quote from: Irisado on February 18, 2013, 11:50:53 AM
Way too garish for me French!  The clashing colours make my eyes hurt.  Yoshi's version conveyed the same effect in a less overtly bright manner.
Sorry, I just picked a random green colour and inserted it O:)
Title: Re: Little Topic Solved improvement
Post by: Irisado on February 18, 2013, 11:56:16 AM
Quote from: Yoshi2889 on February 18, 2013, 11:53:29 AM
Sorry, I just picked a random green colour and inserted it O:)

You've ruined the illusion now, you were supposed to say that it took you hours and hours to decide, and that this is the kind of dedication required to be a team member :D.  You've missed a golden opportunity there :P.

More seriously, it doesn't matter if it was random.  A soft shade of green trumps vivid green on a computer screen.
Title: Re: Little Topic Solved improvement
Post by: NanoSector on February 18, 2013, 12:30:04 PM
It did take me hours to decide what colour picker to use... You need a good one to be a team member :P

Though I hate picking colours in general, so I just clicked of the first sign of what looked green to me. Sorry for the outcome, though I think snow has put a nice solution to that :)
Title: Re: Little Topic Solved improvement
Post by: Acans on February 18, 2013, 12:36:56 PM
Yeah, I've been sorta OCD lately lol. I actually spent 100x longer picking a shade of green I liked than it too me to actually make all the edits haha.
Title: Re: Little Topic Solved improvement
Post by: French on February 18, 2013, 02:57:20 PM
Antechinus &  Irisado you might just be right,with a dark theme it is tricky to set the right color,specially if you want to keep the text readable,now chosen for this color code #C8F6C8

{
background: 
#C8F6C8;
}
.solvedbg2
{
   background: 
#C8F6C8;
}
Title: Re: Little Topic Solved improvement
Post by: Antechinus on February 18, 2013, 05:36:41 PM
Quote from: ѕησω on February 18, 2013, 12:36:56 PM
Yeah, I've been sorta OCD lately lol. I actually spent 100x longer picking a shade of green I liked than it too me to actually make all the edits haha.
ROFL. I do that sort thing all the time. Also change paddings, etc by 1px several times just to see what looks best. The actual base coding takes no time in comparison to all the presentation shiz.


Quote from: French on February 18, 2013, 02:57:20 PM
Antechinus &  Irisado you might just be right,with a dark theme it is tricky to set the right color,specially if you want to keep the text readable,now chosen for this color code #C8F6C8

{
background: 
#C8F6C8;
}
.solvedbg2
{
   background: 
#C8F6C8;
}


No, it's not tricky at all with dark themes. I've done several of them, and other people have done stacks of them. All you have to do is follow basic guidelines for contrast, etc, along with using a bit of common sense so you don't burn people's eyeballs out.

If people are using a dark theme their eyes will be adjusted to that. Putting lurid green stripes across it is going to freak theme out. All you really need is some visual indication that the topic is different. It doesn't have to leap out of the screen and rip your balls off. :D
Title: Re: Little Topic Solved improvement
Post by: SpeedHighway on November 15, 2013, 01:09:30 PM
Sorry to dredge this.
Small little improvement to Yoshi's improvement.

At the end of the theme index.css add:
.topic_table td.solved_locked2
{
background-image: url(../images/icons/quick_lock.gif);
background-repeat: no-repeat;
background-position: 98% 4px;
}


In the MessageIndex.template.php files, above
Code (Find) Select
// Locked topics get special treatment as well.
elseif ($topic['is_locked'])
$color_class = 'lockedbg';

Add this:
Code (Add Before) Select
// If solved AND locked
elseif ($topic['is_solved'] && $topic['is_locked'])
$color_class = 'solvedbg solved_locked';


This allows it to be both solved and locked.  Otherwise, solving a topic will remove the lock icon.