mobile: ability to display hidden toolbar buttons

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;

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');
+      }
     }
   };
 

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(); %>