changed pagination appearance

7 files changed, 106 insertions, 30 deletions

diff --git a/lib/JWebmail/Plugin/Paginate.pm b/lib/JWebmail/Plugin/Paginate.pm
index 1a48ed3..9b39617 100644
--- a/lib/JWebmail/Plugin/Paginate.pm
+++ b/lib/JWebmail/Plugin/Paginate.pm
@@ -78,12 +78,21 @@ sub paginate {
     return $start, $end;
 }
 
+sub make_link {
+    my ($c, $txt, $to) = @_;
+
+    return $c->link_to(
+        $txt => $c->url_with->query({start => $c->stash('pgn')->{$to}[0]}),
+        class => ($c->param('start')//0) == $c->stash('pgn')->{$to}[0] ? 'disabled' : '',
+    );
+}
 
 sub register {
     my ($self, $app, $conf) = @_;
     $conf //= {};
 
     $app->helper(paginate => \&paginate);
+    $app->helper('_paginate.make_link' => \&make_link);
 }
 
 
diff --git a/lib/JWebmail/View/RenderMail.pm b/lib/JWebmail/View/RenderMail.pm
index 07f356c..90534dc 100644
--- a/lib/JWebmail/View/RenderMail.pm
+++ b/lib/JWebmail/View/RenderMail.pm
@@ -12,10 +12,9 @@ has 'c';
 sub render_text_plain {
     my ($_self, $_subtype, $content, $_path) = @_;
 
-    $content = xml_escape($content);
-    $content =~ s/\n/<br>/g;
+    $content = xml_escape $content;
 
-    return qq'<div class="jwm-mail-body jwm-mail-body-text-plain">\n $content </div>\n';
+    return qq'<div class="jwm-mail-body-text-plain"><pre>$content</pre></div>\n';
 }
 
 sub render_text_html {
diff --git a/public/style.css b/public/style.css
index a62ef9c..fcdf26a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -21,6 +21,33 @@ footer {
   margin-top: 2rem;
 }
 
+.pagination-box {
+  list-style: none;
+  padding-left: 0px;
+  display: flex;
+}
+  .pagination-box > li > a, .pagination-box > li > span {
+    border: 1px solid blue;
+    text-decoration: none;
+    padding: 0.5em;
+    display: block;
+    margin-left: -1px;
+    background-color: white;
+  }
+  .pagination-box > li > a:hover {
+    background-color: #eee;
+  }
+  .pagination-box > li > a.disabled {
+    pointer-events: none;
+    cursor: default;
+    background-color: var(--jwm-color-back);
+  }
+  .pagination-box > li > a.current {
+    pointer-events: none;
+    cursor: default;
+    background-color: lightblue;
+  }
+
 .jwm-base {
   background-color: var(--jwm-color-back);
   border-radius: 5px;
@@ -57,9 +84,9 @@ footer {
 }
 
 .jwm-mail-body {
-    width: 80%;
-    margin: 1rem auto;
-    padding: 10px;
+  width: 90%;
+  margin: 1rem auto;
+  padding: 10px;
 }
 
 iframe.jwm-mail-body-text-html {
@@ -69,8 +96,15 @@ iframe.jwm-mail-body-text-html {
 
 .jwm-mail-body-text-plain {
   background-color: var(--jwm-color-alt);
+  /* word-wrap: break-word; */
+  padding: 5pt;
 }
 
+  .jwm-mail-body-text-plain > pre {
+    font-family: sans-serif;
+    overflow: auto;
+  }
+
 /* make sure this lines up with pure-md class */
 @media screen and (max-width: 48em) {
   .hide-small {
diff --git a/templates/displayheaders/_bot_nav.html.ep b/templates/displayheaders/_bot_nav.html.ep
index 3eb57d3..454941b 100644
--- a/templates/displayheaders/_bot_nav.html.ep
+++ b/templates/displayheaders/_bot_nav.html.ep
@@ -1,27 +1,27 @@
 <div class="pure-g jwm-nav">
 
-  <div class="pure-u-3-4 pure-u-md-1-4">
-    %= include 'displayheaders/_pagination1'
+  <div class="pure-u-3-4">
+    <div class="pure-u-1 pure-u-md-1-2">
+      %= include 'displayheaders/_pagination1'
+    </div><div class="pure-u-1 pure-u-md-1-2">
+      % if (grep {$_ ne $folder} @$mail_folders) {
+        %= form_for move => (id => 'move-mail') => (class => 'pure-form') => begin
+          <fieldset>
+          %= label_for 'select-folder' => l('move to')
+          %= select_field folder => [map { $_ ? $_ : l 'Home' } grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
+          %= csrf_field
+          %= submit_button l('move') => (class => 'pure-button')
+          </fieldset>
+        % end
+      % }
+    </div>
   </div>
 
-  <div class="pure-u-1-4 pure-u-md-1-4">
+  <div class="pure-u-1-4">
     <label for=allbox><%= l 'check all' %></label>
     <input name=allbox type=checkbox onclick="check_all(this)">
   </div>
 
-  <div class="pure-u-1 pure-u-md-1-2">
-    % if (grep {$_ ne $folder} @$mail_folders) {
-      %= form_for move => (id => 'move-mail') => (class => 'pure-form') => begin
-        <fieldset>
-        %= label_for 'select-folder' => l('move to')
-        %= select_field folder => [map { $_ ? $_ : l 'Home' } grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
-        %= csrf_field
-        %= submit_button l('move') => (class => 'pure-button')
-        </fieldset>
-      % end
-    % }
-  </div>
-
 </div>
 
 <script type="text/javascript">
diff --git a/templates/displayheaders/_pagination1.html.ep b/templates/displayheaders/_pagination1.html.ep
index 798f79f..a32afe1 100644
--- a/templates/displayheaders/_pagination1.html.ep
+++ b/templates/displayheaders/_pagination1.html.ep
@@ -1,7 +1,14 @@
-<div>
-  <a href="<%= url_with->query({start => $pgn->{prev_page}[0]}) %>"> ← </a>
-  <a href="<%= url_with->query({start => $pgn->{first_page}[0]}) %>"> ↞ </a>
-  [<%= l('page [_1] of [_2]', $pgn->{current_page}+1, $pgn->{total_pages}) %>]
-  <a href="<%= url_with->query({start => $pgn->{last_page}[0]}) %>"> ↠ </a>
-  <a href="<%= url_with->query({start => $pgn->{next_page}[0]}) %>"> → </a>
-</div>
+<nav>
+  <ul class="pagination-box">
+    <li>
+      %= $c->_paginate->make_link('←', 'prev_page')
+    <li>
+      %= $c->_paginate->make_link('↞', 'first_page') 
+    <li>
+      <span><%= l('page [_1] of [_2]', $pgn->{current_page}+1, $pgn->{total_pages}) %></span>
+    <li>
+      %= $c->_paginate->make_link('↠', 'last_page')
+    <li>
+      %= $c->_paginate->make_link('→', 'next_page')
+  </ul>
+</nav>
diff --git a/templates/displayheaders/_pagination3.html.ep b/templates/displayheaders/_pagination3.html.ep
new file mode 100644
index 0000000..fe573ce
--- /dev/null
+++ b/templates/displayheaders/_pagination3.html.ep
@@ -0,0 +1,27 @@
+% my $make_link_num = begin
+%   my ($txt, $to) = @_;
+%=  link_to $txt => url_with->query({start => $to}) => (class => (param('start')//0) == $to ? 'current' : '')
+% end
+
+% my $nbh = begin
+%   my $num = $pgn->{total_pages} > 5 ? 5 : $pgn->{total_pages};
+%   my $start = $pgn->{current_page}-2 < 0 ? 0 : $pgn->{current_page}-2;
+%   if ($start+$num > $pgn->{total_pages}) { $start = $pgn->{total_pages}-$num }
+
+%   for ($start..$start+$num-1) {
+      <li>
+%=    $make_link_num->($_+1 => $_*$pgn->{page_size})
+      </li>
+%   }
+% end
+
+<nav>
+  <ul class="pagination-box">
+    <li>
+      %= $c->_paginate->make_link('Prev' => 'prev_page')
+    </li>
+    %= $nbh->()
+    <li>
+      %= $c->_paginate->make_link('Next' => 'next_page')
+  </ul>
+</nav>
diff --git a/templates/displayheaders/_top_nav.html.ep b/templates/displayheaders/_top_nav.html.ep
index fd6bae6..f4c66d2 100644
--- a/templates/displayheaders/_top_nav.html.ep
+++ b/templates/displayheaders/_top_nav.html.ep
@@ -23,7 +23,7 @@
   </div>
 
   <div class="pure-u-1-1 pure-u-md-1-2">
-    %= include 'displayheaders/_pagination2';
+    %= include 'displayheaders/_pagination3';
   </div>
 
   <!-- delete button