PHPBB2 ONLY FOR NOW.

work in progress


In the privmsgs_body template, find:

Code:

</form>

Right before, insert:

Code:

<div style="display: none;">
<quickpm>
<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">
<!-- BEGIN listrow -->
    <div class="quickpm">
        <div class="quickpm_avatar"></div>
    <div class="quickpm_title">
          <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a>
        </div>
        <div class="quickpm_from">{listrow.FROM}</div>
        <div class="quickpm_date">{listrow.DATE}</div>
      </div>
<!-- END listrow -->
</form>
</quickpm>
</div>

In the privmsgs_read_body template, find:

Code:

<!-- BEGIN switch_image_resize -->

Right before, insert:

Code:

<quickpm style="display: none;">
<form class="quickpm_form" action="{S_PRIVMSGS_ACTION}" method="post">
    <div class="quickpm_pm">

          <div class="quickpm_pm_title">{POST_SUBJECT}</div>
       
              <!-- BEGIN switch_post_reply --><div class="quickpm_pm_reply">{REPLY_PM_IMG}</div><!-- END switch_post_reply -->
 
          <div class="quickpm_pm_avatar">{AVATAR_FROM}</div>
          <div class="quickpm_pm_content">
                <div class="quickpm_pm_from">{MESSAGE_FROM}</div> <div class="quickpm_pm_date">{POST_DATE}</div>
                <div class="quickpm_pm_message">{MESSAGE}</div>
          </div>
 
    </div>
</form>
</quickpm>

In the overall_header template, find:

Code:

{HOSTING_JS}

Right after, add:

Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

In the same template, find:

Code:

<!-- END switch_like_popup -->

Right after, insert:

Code:

<div class="prvmsgs">
  <div class="prvmsgs_content" style="display: none;"></div>
  <div class="quickpm_preview" style="display: none;"></div>
  <div class="prvmsgs_close" style="display: none;">CLOSE</div>
</div>
 
<script type="text/javascript">$(function() {
 
$('a.mainmenu[href="/privmsg?folder=inbox"]').on('click', function(e) {
    e.preventDefault();
    $('.prvmsgs_content').load('/privmsg?folder=inbox quickpm', function() {
      $('.prvmsgs_content').prepend('<div style="text-align: center;"><a href="/privmsg?folder=inbox" class="prvmsgs_inbox">View full inbox</a> <a href="/privmsg?mode=post" class="privmsgs_new"></a></div>');
      if ($('div#fa_toolbar').length > 0) {
            $('a.prvmsgs_inbox').css('margin-top', '35px');
          $('a.privmsgs_new').css('margin-top', '35px');
    };
 
      $('.prvmsgs_close').fadeIn('fast');
 
      $('.quickpm_title a').on('click', function(e) {
        e.preventDefault();
        var $href = $(this).attr('href');
   
        $('.quickpm_preview').fadeIn('fast');
        $('.quickpm_preview').load($href + ' form.quickpm_form');
    });
 
        $('.quickpm_from').each(function() {
            var $profile = $(this).find('a').attr('href');
        $(this).parent().find('.quickpm_avatar').load($profile + ' td.row1.gensmall img[loading="lazy"]');
        });
      $('.prvmsgs_content').show().addClass('animate__animated animate__fadeInLeft animate__faster');
  });
});

$('.prvmsgs_close').on('click', function() {
    $(this).fadeOut('fast');
    $('.prvmsgs_content').fadeOut('fast');
    $('.quickpm_preview').fadeOut('fast');
});
 
});
</script>

Finally, add the following CSS:

Code:

.prvmsgs_content {
    position: fixed;
    left: 0;
    background-color: #f1f1f1;
    top: 0;
    bottom: 0;
    width: 20vw;
    overflow: auto;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 10000;
    box-shadow: 0 0 0 1500vw #30303050;
}

.quickpm {
    background-color: #e5e5e5;
    margin: 10px 0;
    padding: 12px 5px;
    box-sizing: border-box;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif !important;
}

.quickpm_avatar {
    float: left;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 4px;
    margin: 10px 8px 10px 0;
}

.quickpm_avatar img {
    width: 100%;
    height: auto;
}

.quickpm_title a {
    font-size: 10pt;
    max-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    max-width: 95%;
}

.quickpm_title {
    max-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quickpm_from a, .quickpm_from a span strong {
    text-decoration: none !important;
    font-size: 9pt;
}

.quickpm_date {
    font-size: 8.5pt;
    color: #454545;
}

a.prvmsgs_inbox {
    display: inline-block;
    margin: 10px;
    text-align: center;
    width: 40%;
    background-color: #1313d9;
    padding: 4px 1%;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    border-radius: 3px;
    transition: all .25s ease-in-out;
    opacity: .7;
    text-decoration: none !important;
    box-sizing: border-box;
    height: 24px;
    vertical-align: top;
}

a.prvmsgs_inbox:hover {
    opacity: 1;
    text-decoration: none !important;
}

.quickpm_preview {
    position: fixed;
    left: 20vw;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    width: 75vw;
    background-color: white;
    z-index: 10000;
}

.quickpm_pm_title {
    padding: 5%;
    text-align: center;
    font-size: 16pt;
    font-weight: 500;
}

.quickpm_pm_reply {
    float: right;
    margin-right: 5%;
}

.quickpm_pm {
    font-family: 'Roboto', sans-serif !important;
}

.quickpm_pm_title img {
    vertical-align: baseline;
}

.quickpm_pm_avatar {
    float: left;
    width: 55px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 5%;
}

.quickpm_pm_avatar img {
    width: 100%;
    height: auto;
}

.quickpm_pm_avatar:empty::before {
    content: "?";
    height: 55px;
    width: 55px;
    display: block;
    text-align: center;
    line-height: 55px;
    background-color: #f1f1f1;
    font-size: 9pt;
    font-weight: bold;
    background-image: linear-gradient(-5deg, #60606015, transparent);
}

.quickpm_pm_content {
    margin-left: 12%;
}

.quickpm_pm_from {
    font-size: 12pt;
    display: inline-block;
}

.quickpm_pm_date {
    display: inline-block;
    font-size: 8pt;
    color: #7a7a7a;
    margin-left: 3px;
    position: relative;
    top: -1px;
}

.quickpm_pm_message {
    background-color: #efefef;
    width: 95%;
    margin-top: 2%;
    box-sizing: border-box;
    padding: 3%;
    border-radius: 8px;
    font-size: 11pt;
    overflow: auto;
    max-height: 75vh;
}

a.privmsgs_new {
    display: inline-block;
    text-align: center;
    margin: 10px;
    width: 42px;
    background-color: #a7a7a7;
    padding: 4px 8px;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    border-radius: 3px;
    transition: all .25s ease-in-out;
    opacity: .7;
    text-decoration: none !important;
    height: 24px;
    box-sizing: border-box;
    vertical-align: top;
}

a.privmsgs_new:hover {
    opacity: 1;
    background-color: #63d913;
}

a.privmsgs_new::before {
    content: "";
    display: inline-block;
    background-image: url('https://i.imgur.com/emjGish.png');
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    background-size: 16px auto;
    filter: invert(1);
    background-position: center;
}

.prvmsgs_close {
    position: fixed;
    left: 95vw;
    width: 5vw;
    height: 100vh;
    background-color: #0000007d;
    text-align: center;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 9pt;
    box-sizing: border-box;
    line-height: 100vh;
    cursor: pointer;
    opacity: .75;
    transition: all .25s ease-in-out;
}

.prvmsgs_close:hover {
    opacity: 1;
}

Code might be a little hazardous and CSS isn't organized at all; it's still wip but should be fully functionnal. Don't hesitate asking for any feature or warning me about any bug or any flaw you might've spotted. Thanks

hello

nice idea thanks

This looks cool @mSyx

Congrats!

it looks good, im crazy about it, man!

Well can't wait to see it on PunBB and AwesomeBB

SarkZKalie wrote:it looks good, im crazy about it, man!

Well can't wait to see it on PunBB and AwesomeBB

Thanks!
I'll work on these two soon :>