From 5ff7f1def8366450cd0581761f481d2d64a33de5 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 1 Feb 2021 18:10:02 +0100
Subject: [PATCH] Ability to collapse comment and TOC columns in rich text

---
 www/pad/app-pad.less | 36 +++++++++++++++++++++++++++++++++++-
 www/pad/comments.js  | 24 ++++++++++++++++++++++++
 www/pad/inner.js     | 30 +++++++++++++++++++++++++++++-
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less
index 731bea767..33f05c26b 100644
--- a/www/pad/app-pad.less
+++ b/www/pad/app-pad.less
@@ -22,14 +22,40 @@ body.cp-app-pad {
         overflow: hidden;
     }
 
+    #cp-app-pad-toc, #cp-app-pad-comments {
+        .cp-pad-show, .cp-pad-hide {
+            position: absolute;
+            cursor: pointer;
+            height: 28px;
+            line-height: 28px;
+            .fa { margin: 0 !important; }
+        }
+        &.hidden {
+            width: auto !important;
+            .cp-pad-show {
+                position: relative;
+            }
+            & > :not(.cp-pad-show) {
+                display: none;
+            }
+        }
+        &:not(.hidden) {
+            .cp-pad-show { display: none; }
+        }
+    }
     #cp-app-pad-toc {
         @toc-level-indent: 15px;
 
         overflow-y: auto;
         margin-top: 10px;
         margin-left: 10px;
+        margin-right: 10px;
         width: 200px;
         color: @cryptpad_text_col;
+        position: relative;
+        .cp-pad-show, .cp-pad-hide {
+            right: 0;
+        }
         h2 {
             font-size: 1.5rem;
         }
@@ -117,7 +143,15 @@ body.cp-app-pad {
             order: 3;
             width: 330px;
             //background-color: white;
-            margin: 0px 20px;
+            margin: 10px;
+            position: relative;
+            .cp-pad-show, .cp-pad-hide {
+                left: 0;
+            }
+            h2 {
+                font-size: 1.5rem;
+                text-align: right;
+            }
             .comments_main();
         }
         &.cke_body_width {
diff --git a/www/pad/comments.js b/www/pad/comments.js
index 60466649c..aeaa118eb 100644
--- a/www/pad/comments.js
+++ b/www/pad/comments.js
@@ -298,6 +298,30 @@ define([
 
         // Remove everything
         Env.$container.html('');
+        var hideBtn = h('button.cp-pad-hide.btn.btn-default.fa.fa-chevron-right');
+        var showBtn = h('button.cp-pad-show.btn.btn-default', {
+            title: Messages.poll_comment_list
+        }, [
+            h('i.fa.fa-comment')
+        ]);
+        var store = window.cryptpadStore;
+        var key = 'hide-pad-comments';
+        if (store.store[key] === '1') {
+            Env.$container.addClass('hidden');
+        }
+        $(hideBtn).click(function () {
+            Env.$container.addClass('hidden');
+            if (store) { store.put(key, '1'); }
+        });
+        $(showBtn).click(function () {
+            Env.$container.removeClass('hidden');
+            if (store) { store.put(key, '0'); }
+        });
+        Env.$container.append([
+            showBtn,
+            hideBtn,
+            h('h2', Messages.poll_comment_list)
+        ]);
 
         // "show" tells us if we need to display the "comments" column or not
         var show = false;
diff --git a/www/pad/inner.js b/www/pad/inner.js
index e498fb595..e7ebcd9fc 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -457,6 +457,11 @@ define([
                 $tocButton.addClass('cp-toolbar-button-active');
             }
         });
+        var store = window.cryptpadStore;
+        var key = 'hide-pad-toc';
+        if (store.store[key] === '1') {
+            $toc.addClass('hidden');
+        }
     };
 
     var displayMediaTags = function(framework, dom, mediaTagMap) {
@@ -683,7 +688,30 @@ define([
                     title: Util.stripTags($(el).text())
                 });
             });
-            var content = [h('h2', Messages.markdown_toc)];
+            var hideBtn = h('button.btn.btn-default.cp-pad-hide.fa.fa-chevron-left');
+            var showBtn = h('button.btn.btn-default.cp-pad-show', {
+                title: Messages.pad_tocHide
+            }, [
+                h('i.fa.fa-list-ul')
+            ]);
+            var content = [
+                hideBtn,
+                showBtn,
+                h('h2', Messages.markdown_toc)
+            ];
+            var store = window.cryptpadStore;
+            var key = 'hide-pad-toc';
+            if (store.store[key] === '1') {
+                $toc.addClass('hidden');
+            }
+            $(hideBtn).click(function () {
+                $toc.addClass('hidden');
+                if (store) { store.put(key, '1'); }
+            });
+            $(showBtn).click(function () {
+                $toc.removeClass('hidden');
+                if (store) { store.put(key, '0'); }
+            });
             toc.forEach(function (obj) {
                 var title = (obj.title || "").trim();
                 if (!title) { return; }