From 1d927854a499e33f82b1424bc4802c6d5e4e96e4 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Sat, 4 Apr 2020 11:08:05 +0200
Subject: [PATCH] mobile: ability to display hidden toolbar buttons

---
 src/static/css/pad/toolbar.css | 45 ++++++++++++++++++++++++++++++----
 src/static/js/pad_editbar.js   | 16 ++++++++++++
 src/templates/pad.html         |  1 +
 3 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css
index 92dcdcedc..b98b58a47 100644
--- a/src/static/css/pad/toolbar.css
+++ b/src/static/css/pad/toolbar.css
@@ -15,9 +15,6 @@
   flex-direction: row;
   align-items: flex-start;
 }
-.toolbar ul.menu_left {
-  flex-wrap: wrap; /* wrap left toolbar so if a lot of icons are present it goes on multiple lines */
-}
 .toolbar ul.menu_right {
   flex-shrink: 0; /* prevent from shrinking */
 }
@@ -76,8 +73,8 @@
 .toolbar ul li select {
   background: #fff;
   padding: 4px;
-  line-height: 22px; /* fix for safari (win/mac) */
-  height: 28px; /* fix for chrome (mac) */
+  line-height: 22px;
+  height: 28px;
   border-radius: 3px;
   border: 1px solid #ccc;
   outline: none;
@@ -106,6 +103,44 @@
   right: 0;
 }
 
+.toolbar .show-more-icon-btn {
+  display:none;
+  cursor: pointer;
+  height: 39px;
+  width: 39px;
+  line-height: 39px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 2rem;
+  z-index: 20;
+}
+
+.toolbar.cropped .menu_left {
+  width: calc(100% - 39px);
+  height: 33px;
+  flex-wrap: wrap;
+}
+.toolbar.cropped .show-more-icon-btn {
+  display: block;
+  position: absolute;
+  /*border-bottom: 1px solid #d2d2d2;*/
+  right: 0;
+  top: 0;
+}
+.toolbar.cropped .show-more-icon-btn:after {
+  content: "+";
+}
+.toolbar.full-icons .show-more-icon-btn {
+  line-height: 35px;
+}
+.toolbar.full-icons .show-more-icon-btn:after {
+  content: "-";
+}
+.toolbar.full-icons .menu_left {
+  height: auto;
+  overflow: visible;
+}
+
 @media only screen and (max-width: 720px) {
   .toolbar ul li.separator {
     width: 5px;
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index d109eed94..5f469f2f0 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -24,6 +24,7 @@ var hooks = require('./pluginfw/hooks');
 var padutils = require('./pad_utils').padutils;
 var padeditor = require('./pad_editor').padeditor;
 var padsavedrevs = require('./pad_savedrevs');
+var _ = require('ep_etherpad-lite/static/js/underscore');
 
 var ToolbarItem = function (element) {
   this.$el = element;
@@ -155,6 +156,12 @@ var padeditbar = (function()
         bodyKeyEvent(evt);
       });
 
+      $('.show-more-icon-btn').click(function() {
+        $('.toolbar').toggleClass('full-icons');
+      });
+      self.checkAllIconsAreDisplayedInToolbar();
+      $(window).resize(_.debounce( self.checkAllIconsAreDisplayedInToolbar, 100 ) );
+
       registerDefaultCommands(self);
 
       hooks.callAll("postToolbarInit", {
@@ -278,6 +285,15 @@ var padeditbar = (function()
         $('#embedinput').val('<iframe name="embed_readwrite" src="' + padurl + '?showControls=true&showChat=true&showLineNumbers=true&useMonospaceFont=false" width=600 height=400></iframe>');
         $('#linkinput').val(padurl);
       }
+    },
+    checkAllIconsAreDisplayedInToolbar: function()
+    {
+      // reset style
+      $('.toolbar').removeClass('cropped')
+      var menu_left = $('.toolbar .menu_left')[0];
+      if (menu_left && menu_left.scrollWidth > $('.toolbar').width()) {
+        $('.toolbar').addClass('cropped');
+      }
     }
   };
 
diff --git a/src/templates/pad.html b/src/templates/pad.html
index f8030fc12..6c76fea46 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -75,6 +75,7 @@
           <%- toolbar.menu(settings.toolbar.right, isReadOnly, 'right', 'pad') %>
           <% e.end_block(); %>
       </ul>
+      <span class="show-more-icon-btn"></span> <!-- use on small screen to display hidden toolbar buttons -->
   </div>
 
   <% e.begin_block("afterEditbar"); %><% e.end_block(); %>