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.

PHPBB2 | Quick PM List

4 posters

Go down

PHPBB2 | Quick PM List Empty PHPBB2 | Quick PM List

Post by mSyx April 6th 2022, 7:19 am

PHPBB2 ONLY FOR NOW.

work in progress

PHPBB2 | Quick PM List Q4YHuKE

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 I love you


Last edited by mSyx on April 6th 2022, 7:51 am; edited 1 time in total
mSyx
mSyx
Forumember

Male Posts : 155
Reputation : 46
Language : French & English
Location : France

View user profile https://help.forumotion.com/

skouliki, BlackScorpion, Niko, SarkZKalie, TonnyKamper and pedxz like this post

Back to top Go down

PHPBB2 | Quick PM List Empty Re: PHPBB2 | Quick PM List

Post by skouliki April 6th 2022, 7:45 am

hello

nice idea thanks
skouliki
skouliki
Manager
Manager

Female Posts : 12336
Reputation : 1519
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

mSyx likes this post

Back to top Go down

PHPBB2 | Quick PM List Empty Re: PHPBB2 | Quick PM List

Post by Niko April 7th 2022, 12:08 am

This looks cool @mSyx

Congrats! thumleft
Niko
Niko
Hyperactive

Male Posts : 2462
Reputation : 127
Language : English, Italian, French
Location : Italy

View user profile https://www.fmcodes.net/

mSyx likes this post

Back to top Go down

PHPBB2 | Quick PM List Empty Re: PHPBB2 | Quick PM List

Post by SarkZKalie April 12th 2022, 3:26 am

it looks good, im crazy about it, man!

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


PHPBB2 | Quick PM List Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1332
Reputation : 214
Language : English

View user profile https://rotavn.forumotion.com/

mSyx likes this post

Back to top Go down

PHPBB2 | Quick PM List Empty Re: PHPBB2 | Quick PM List

Post by mSyx April 12th 2022, 3:46 am

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

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

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

Male Posts : 155
Reputation : 46
Language : French & English
Location : France

View user profile https://help.forumotion.com/

skouliki, TonnyKamper, pedxz and heresy. 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