The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add progress bar for inbox space in all versions (not only in PhpBB2)

5 posters

Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Niko February 4th 2023, 12:11 am

Coucou,

another brief resource that may interest some users Hello
The tutorial allows you to add a progress bar to visualize the free and used space in your inbox/outbox/sentbox/archives - even on other versions. At the moment, only in PhpBB2 it is available natively.

Add progress bar for inbox space in all versions (not only in PhpBB2) Screen73

CSS

In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:

Code:
.progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    margin-top: 10px;
}

.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #007bff;
    transition: width .6s ease;
}

.panel p.left-box, p.paging {
    display: contents;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
}

Javascript

For the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

  • Title: free choice - does not influence the code effect
  • Where: All pages
  • Code:

    Code:
    $(function() {
     
    /*
    Title: Add progress bar for inbox space in all versions
    Author: Niko
    Version: 1.6
    Release Date: 04.01.2023 (dd.mm.year)
    Contact: https://www.fmcodes.net/u2
    Original content: https://www.fmcodes.net/t2015-
    */
     
    const FORUM_VERSION = _userdata["tpl_used"];
     
        var versions = {
            'prosilver': '.panel .inner p.left-box', //phpbb3
            'punbb': 'form.frm-form[name="privmsg_list"] .main.paged p.paging', //punBB
            'invision':'form[name="privmsg_list"] .borderwrap .subtitle', //invision
            'modernbb': 'form[name="privmsg_list"] .panel .inner p.left-box', //modernBB
            'awesomebb': 'form[name="privmsg_list"] .block .block-header' //awesomeBB
        };
     
    var text = true; //displays the value in the progress bar
    var bar_height = "1rem"; // height of the progress bar, can use size in pixels (px)
    var color = "#007bff"; //HEX color of the bar, blue by default
    var striped = false; // set as true if you want a striped effect
    var animated = false; //set an animation. striped must be set to true
    var empty_str = 'empty'; // english value if the inbox is "empty"
     
      var arr = ['?folder=inbox', '?folder=outbox','?folder=sentbox','?folder=savebox'];
     
    if(_userdata["session_logged_in"] == 1 && location.pathname == '/privmsg' && jQuery.inArray(location.search, arr) >= 0) {
        var percentage = $(versions[FORUM_VERSION]).text().match(/\d+/);
        if($(versions[FORUM_VERSION]).text().indexOf(empty_str) >= 0) { percentage = 0; }
        percentage = percentage[0];
        if(!percentage || FORUM_VERSION == 'subsilver') { return; }
        if(text==true){perc_text = percentage;} else {perc_text ='' ;}
        if(striped==true){style='progress-bar-striped';
        if(animated==true) {animation='progress-bar-animated';} else { animation = ''; } } else { style=''; animation='';}
        $(versions[FORUM_VERSION]).after('<div class="progress '+style+' '+animation+'" style="height: '+bar_height+';"> <div class="progress-bar" role="progressbar" style="background-color: '+color+'; width: '+percentage+'%; " aria-valuenow="0" aria-valuemin="0" aria-valuemax="'+percentage+'">'+perc_text+'%</div> </div>');
     
    }
     
    });


Javascript Customization

You can customize a few options:
  • Code:
    var text = true;
    it allows you to display the value in the progress bar

    Add progress bar for inbox space in all versions (not only in PhpBB2) Screen74

  • Code:
    var bar_height = 1rem;
    sets the height of the progress bar. You can use size in pixels (px)

    Add progress bar for inbox space in all versions (not only in PhpBB2) Screen75

  • Code:
    var color = "#007bff";
    HEX color of the bar, blue by default

    Add progress bar for inbox space in all versions (not only in PhpBB2) Screen76

  • Code:
    var striped = false;
    set as
    Code:
    true
    if you want a striped effect

    Add progress bar for inbox space in all versions (not only in PhpBB2) Screen77

  • Code:
    var animated = false;
    set an animation. striped must be set to
    Code:
    true


Hope you enjoy! :wouhou:


Last edited by Niko on February 5th 2023, 5:04 pm; edited 9 times in total
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

skouliki, Ape, SLGray, YoshiGM, BlackScorpion, TonnyKamper, tikky and Razor12345 like this post

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by skouliki February 4th 2023, 7:49 am

Great 👍
skouliki
skouliki
Manager
Manager

Female Posts : 15064
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Niko likes this post

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by TonnyKamper February 4th 2023, 1:09 pm

Wow nice  Yes
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1040
Reputation : 78
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Ape February 4th 2023, 2:04 pm

Hi @Niko

just tested this on my forum and i see a little problem Wink

On the bar it says 22 but no % in the bar and the lines for the animated stripes are in the wrong place.
Add progress bar for inbox space in all versions (not only in PhpBB2) Captu606

If you need a Test account with Admin let me know Smile


Add progress bar for inbox space in all versions (not only in PhpBB2) Left1212Add progress bar for inbox space in all versions (not only in PhpBB2) Center11Add progress bar for inbox space in all versions (not only in PhpBB2) Right112
Add progress bar for inbox space in all versions (not only in PhpBB2) Ape_b110
Add progress bar for inbox space in all versions (not only in PhpBB2) Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Niko February 4th 2023, 6:45 pm

@Ape no need, I just forgot to add the symbol % in the code Embarassed
I replaced the code in the first post! give a try Wink

for the striped effect, I may need an account yeah - even a non admin one Hello
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Obscure February 4th 2023, 10:07 pm

I just tested it on one of my testing forums, version Phbb3, and the toolbar disappeared after installing it.
Obscure
Obscure
Forumember

Female Posts : 46
Reputation : 10
Language : English
Location : USA

http://imgtest.forumotion.com/

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Niko February 4th 2023, 10:10 pm

@Obscure can you keep it installed and share the link with me?
It is strange because the script doesn't touch anything related to the toolbar
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Obscure February 4th 2023, 10:12 pm

EDIT: I fixed it. For some reason that happened when I didn't attach it to all pages, I just had it for the index. Sorry!

@Niko
EDIT...Again:
Embarassed Embarassed Embarassed
I apologize for bothering you again, this time I did troubleshoot it myself and made sure everything was correct. I am using a different forum (used to be for chatting, now I just test code and such on it), I only have a few other javascript codes on it, and it appears that the toolbar is gone on every page but the Messages page, but the code works. I have deleted all the other codes and it doesnt make a difference. I added them all back afterwards.
Your code is still on there, attached to all pages, etc.
Here is the link:

Let me know if you want a Username and Password.


Last edited by Obscure on February 4th 2023, 11:52 pm; edited 1 time in total
Obscure
Obscure
Forumember

Female Posts : 46
Reputation : 10
Language : English
Location : USA

http://imgtest.forumotion.com/

Niko likes this post

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Niko February 4th 2023, 10:47 pm

@Obscure the problem seems to come from this script that isn't properly formatted, can you check that? or disable it and see if it solves?

Add progress bar for inbox space in all versions (not only in PhpBB2) Screen79

I have also edited the script to be sure it only runs if you are logged in
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Obscure February 4th 2023, 10:53 pm

Previously, I have removed all javascript codes, from the JS page, except for your code, and it made no difference. Before adding them back in, I also removed your code, and it worked. But, i added everything back since then.

I cant force the templates for some reason (it is grayed out) in case any scripts in there would be an issue.

The only codes I can guess that is from that is the Immediate Redirection JS code, but like mentioned earlier, it doesnt make much difference if I delete it or not. Otherwise, I dont know what else to try disabling.

Hopefully, this made sense.
Obscure
Obscure
Forumember

Female Posts : 46
Reputation : 10
Language : English
Location : USA

http://imgtest.forumotion.com/

Niko likes this post

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Niko February 4th 2023, 11:00 pm

@Obscure I sent you a Private message
Let's try to understand this Wink

edit: problem solved Wink
Niko
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Obscure likes this post

Back to top Go down

Add progress bar for inbox space in all versions (not only in PhpBB2) Empty Re: Add progress bar for inbox space in all versions (not only in PhpBB2)

Post by Ape February 6th 2023, 3:35 pm

Not to worry @Niko @pedxz fixed it for me Wink Add progress bar for inbox space in all versions (not only in PhpBB2) Captu607


Add progress bar for inbox space in all versions (not only in PhpBB2) Left1212Add progress bar for inbox space in all versions (not only in PhpBB2) Center11Add progress bar for inbox space in all versions (not only in PhpBB2) Right112
Add progress bar for inbox space in all versions (not only in PhpBB2) Ape_b110
Add progress bar for inbox space in all versions (not only in PhpBB2) Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Niko and tikky like this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum