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; }