loleaflet/dist/loleaflet.css | 1 loleaflet/dist/toolbar.css | 40 ++++-- loleaflet/dist/toolbar/toolbar.js | 229 ++++++++++++++++++++------------------ 3 files changed, 155 insertions(+), 115 deletions(-)
New commits: commit e6ea503885bc8587ae290c849caa9ba506190acd Author: Faruk Uzun <[email protected]> Date: Thu May 26 11:27:40 2016 +0300 loleaflet: bccu#1829: Fix some insert table button issues - Use css for highlight cells. - Close insert-table dialog on mouse leave. - Better GUI - More jQuery Change-Id: I35e25f4ff150e373e70e7b14aa434d1dc055746a diff --git a/loleaflet/dist/toolbar.css b/loleaflet/dist/toolbar.css index bbe7ab2..28b48c7 100644 --- a/loleaflet/dist/toolbar.css +++ b/loleaflet/dist/toolbar.css @@ -269,21 +269,39 @@ button.leaflet-control-search-next cursor:pointer; } - -#tablePicker table { - border: 1px solid #808080; +.inserttable-pop { + z-index: 100000; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } -#tablePicker td { - border: 1px solid #808080 !important; - width: 15px; - height: 15px; +/* for 10x10 grid 10x20+10*.col.margin */ +.inserttable-grid { + box-sizing: border-box; + background: rgba(255, 255, 255, 0.5); + position: relative; + padding: 2px; + display: block; + width: 230px; + height: 230px; } -#tablePicker td:hover { - background: #87CEFA; +.inserttable-grid .row { + height: 20px; } -#tablePicker div { - text-align:left; +.inserttable-grid .col { + height: 100%; + float: left; + padding: 2px; + width: 20px; + border: 1px; + border-style: solid; + border-color: rgba(120, 120, 120, 0.5); + background: rgba(255, 255, 255, 1); + margin: 3px 0 0 3px; } + +.inserttable-grid .col.bright { + border: 0px; + background: rgba(66, 151, 215, 1); +} \ No newline at end of file diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js index b6a138a..333277d 100644 --- a/loleaflet/dist/toolbar/toolbar.js +++ b/loleaflet/dist/toolbar/toolbar.js @@ -47,7 +47,7 @@ $(function () { { type: 'break', id: 'incdecindent' }, { type: 'button', id: 'annotation', img: 'annotation', hint: _("Insert comment"), uno: 'InsertAnnotation' }, { type: 'button', id: 'insertgraphic', img: 'insertgraphic', hint: _("Insert graphic") }, - { type: 'html', id: 'inserttable-html', html: '<div id="tablePicker" class="evo-pop loleaflet-font" style="position:absolute !important;display:none"><div id="tpstatus"></div><table id="insert-table"></table></div>' }, + { type: 'html', id: 'inserttable-html', html: '<div id="inserttable-popup" class="inserttable-pop ui-widget ui-widget-content ui-corner-all" style="position: absolute; display: none;"><div class="inserttable-grid"></div><div id="inserttable-status" class="loleaflet-font" style="padding: 5px;"><br/></div>' }, { type: 'button', id: 'inserttable', img: 'inserttable', hint: _("Insert table") }, { type: 'break' }, { type: 'button', id: 'help', img: 'help', hint: _("Help") }, @@ -75,7 +75,7 @@ $(function () { $("#backColorPicker").on("change.color", onColorPick); } - tablePickerInit(); + insertTable(); } }); @@ -290,12 +290,7 @@ function onClick(id) { L.DomUtil.get('insertgraphic').click(); } else if (id === 'inserttable') { - // toggles tablePicker - if (L.DomUtil.get('tablePicker').style.display == 'none') { - L.DomUtil.get('tablePicker').style.display = ''; - } else { - L.DomUtil.get('tablePicker').style.display = 'none'; - } + $('#inserttable-popup').toggle(); } else if (id === 'fontcolor') { // absolutely no idea why, but without the timeout, the popup is @@ -1014,6 +1009,7 @@ $(document).ready(function() { if (closebutton) { toolbar.show('close'); } + inserttable(); }); function resizeToolbar() { @@ -1058,73 +1054,58 @@ function resizeToolbar() { } } -function tablePickerInit() { - $( "#tablePicker" ).draggable(); - var tbl = document.getElementById('insert-table'); - if (!tbl.childElementCount) { - for (var i = 0; i < 3; i++) { - var tr = tbl.insertRow(); - for (var j = 0; j < 3; j++) { - var td = tr.insertCell(); - } +function insertTable() { + var rows = 10; + var cols = 10; + var $grid = $('.inserttable-grid'); + var $popup = $('#inserttable-popup'); + var $status = $("#inserttable-status"); + + // Return if already initialized + if ($grid.children().length) { + return; + } + + // init + for (var r = 0; r < rows; r++) { + var $row = $('<div/>').addClass('row'); + $grid.append($row); + for (var c = 0; c < cols; c++) { + var $col = $('<div/>').addClass('col'); + $row.append($col); } - walkCells(); } -} -// tablePicker - GUI -function walkCells() { - var table = document.getElementById('insert-table'); - var cells = table.getElementsByTagName("td"); - - for (var i = 0; i < cells.length; i++) { - var cell = cells[i]; - cell.onmouseover = function() { - var cellIndex = this.cellIndex + 1; - var rowIndex = this.parentNode.rowIndex + 1; - var div = document.getElementById('tpstatus'); - div.innerHTML = cellIndex + " Ã " + rowIndex; - for (var j = 0; j < cells.length; j++) { - var celly = cells[j]; - if (celly.parentNode.rowIndex < rowIndex & celly.cellIndex < cellIndex) { - celly.style.background = '#87CEFA'; - } else { - celly.style.background = ''; - } - } - if (cellIndex == table.rows[0].cells.length) { - for (var k = 0; k < table.rows.length; k++) { - table.rows[k].insertCell(); - walkCells(); - } - } else if (rowIndex == table.rows.length) { - var tr = table.insertRow(); - for (var j = 0; j < table.rows[0].cells.length; j++) { - var td = tr.insertCell(); - } - walkCells(); - } else if ((table.rows.length>3 && rowIndex < table.rows.length-1)) { - table.deleteRow(table.rows.length-1); - walkCells(); - } else if (table.rows[0].cells.length>3 && cellIndex < table.rows[0].cells.length-1 ) { - for (var j = 0; j < table.rows.length; j++) { - var tr = table.rows[j]; - tr.deleteCell(table.rows[0].cells.length-1); - } - walkCells(); - } - }; + // events + $grid.on({ + mouseover: function () { + var col = $(this).index() + 1; + var row = $(this).parent().index() + 1; + $('.col').removeClass('bright'); + $('.row:nth-child(-n+' + row + ') .col:nth-child(-n+' + col + ')') + .addClass('bright'); + $status.html(col+"x"+row); - cell.onclick = function(){ - var cellIndex = this.cellIndex + 1; - var rowIndex = this.parentNode.rowIndex + 1; + }, + click: function(){ + var col = $(this).index() + 1; + var row = $(this).parent().index() + 1; + $popup.toggle(); + $('.col').removeClass('bright'); + $status.html('<br/>'); var msg = 'uno .uno:InsertTable {' + - ' "Columns": { "type": "long","value": ' + - cellIndex + - ' }, "Rows": { "type": "long","value": ' + - rowIndex +' }}'; + ' "Columns": { "type": "long","value": ' + + col + + ' }, "Rows": { "type": "long","value": ' + + row +' }}'; map._socket.sendMessage(msg); - L.DomUtil.get('tablePicker').style.display = 'none'; - }; - } + } + }, ".col"); + + // close dialog on mouseleave + $popup.mouseleave(function(){ + $(this).hide(); + $('.col').removeClass('bright'); + $status.html('<br/>'); + }); } commit cdd6147f56597ed13fcf6da3c1868400ceda9fab Author: Pranav Kant <[email protected]> Date: Wed May 25 23:36:57 2016 +0530 loleaflet: Rework toolbar resize; fix an infinite loop Set the min-width of window to 600px so that all select list boxes remain in main toolbar, and not go in toolbar-more. While resizing the toolbar, if the user tries to reduce the window width past the min-width set, we would run into an infinite loop causing spike in browser CPU usage and eventually crash. This used to happen earlier also before setting this min-width with very small browser window size. Also simplify the toolbar resize algorithm. Rather than using raw jquery methods to move items from one toolbar to another, use library's (w2ui) methods to add/remove items from toolbar. This also requires the need of proper initialization of few buttons such as color picker, table picker because moving item from one toolbar to another strips off the initialization corresponding to these toolbar buttons and these need to be reinitialized. Moving such initialization to onRefresh, hence, would keep them initialized whenever toolbar is resized. This also solves one major problem with enabled/disabled state of toolbar buttons. Since, now, we are actually moving the items from one toolbar to another, we can enable/disable them using toolbar's methods ie. enable(), disable(). Change-Id: I64fb0a9d7761f66701bc0e020d1dbad9e4defe29 diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css index c7b4bed..473cf0c 100644 --- a/loleaflet/dist/loleaflet.css +++ b/loleaflet/dist/loleaflet.css @@ -29,6 +29,7 @@ body { margin: 0; + min-width: 600px; } .loleaflet-font { diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js index dfbc010..b6a138a 100644 --- a/loleaflet/dist/toolbar/toolbar.js +++ b/loleaflet/dist/toolbar/toolbar.js @@ -59,20 +59,23 @@ $(function () { onClick(e.target); }, onRefresh: function(e) { - $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true}); - $("#fontColorPicker").on("change.color", onColorPick); - $('#backColorPicker').colorpicker({showOn:'none', hideButton:true}); - $("#backColorPicker").on("change.color", onColorPick); - if (!L.DomUtil.get('fontcolorindicator')) { var fontColorIndicator = L.DomUtil.create('div', 'font-color-indicator', L.DomUtil.get('tb_toolbar-up_item_fontcolor')); fontColorIndicator.id = 'fontcolorindicator'; + + $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true}); + $("#fontColorPicker").on("change.color", onColorPick); } if (!L.DomUtil.get('backcolorindicator')) { var backColorIndicator = L.DomUtil.create('div', 'back-color-indicator', L.DomUtil.get('tb_toolbar-up_item_backcolor')); backColorIndicator.id = 'backcolorindicator'; + + $('#backColorPicker').colorpicker({showOn:'none', hideButton:true}); + $("#backColorPicker").on("change.color", onColorPick); } + + tablePickerInit(); } }); @@ -329,6 +332,7 @@ function onClick(id) { else { toolbar.uncheck('more'); } + w2ui['toolbar-up-more'].render(); resizeToolbar(); } else if (id === 'help') { @@ -695,7 +699,6 @@ map.on('search', function (e) { } }); - map.on('updatetoolbarcommandvalues', function (e) { // we need an empty option for the place holder to work var data = ['']; @@ -1015,22 +1018,24 @@ $(document).ready(function() { function resizeToolbar() { var has_more_items = false; - + var toolbarUp = w2ui['toolbar-up']; + var toolbarUpMore = w2ui['toolbar-up-more']; // move items from toolbar-up-more -> toolbar-up while ($('#toolbar-up')[0].scrollWidth <= $(window).width()) { - var firstItem = $('#toolbar-up-more>table>tbody>tr>td:first'); - if (firstItem.length < 1) { + var item = toolbarUpMore.items[0]; + if (!item) { break; } - var detached = $(firstItem).detach(); - $(detached).insertAfter($('#toolbar-up>table>tbody>tr>td:nth-last-child(5)')[0]); + toolbarUpMore.items.shift(); + toolbarUp.insert('right', item); } // move items from toolbar-up -> toolbar-up-more - while ($('#toolbar-up')[0].scrollWidth > $(window).width()) { - var detached = $('#toolbar-up>table>tbody>tr>td:nth-last-child(5)').detach(); - $('#toolbar-up-more>table>tbody>tr').prepend(detached); - + while ($('#toolbar-up')[0].scrollWidth > Math.max($(window).width(), parseInt($('body').css('min-width')))) { + var itemId = toolbarUp.items[toolbarUp.items.length - 4].id; + item = toolbarUp.get(itemId); + toolbarUp.remove(itemId); + toolbarUpMore.insert(toolbarUpMore.items[0], item); has_more_items = true; } @@ -1045,6 +1050,7 @@ function resizeToolbar() { var lastItem = $('#toolbar-up-more>table>tbody>tr>td[valign="middle"]').last(); if (lastItem.length) { $('#toolbar-up-more').width($(lastItem).position().left + $(lastItem).width()); + w2ui['toolbar-up-more'].render(); } else { $('#toolbar-up-more').hide(); var toolbar = w2ui['toolbar-up']; @@ -1052,18 +1058,19 @@ function resizeToolbar() { } } -// tablePicker - init -$(function() { +function tablePickerInit() { $( "#tablePicker" ).draggable(); - tbl = document.getElementById('insert-table'); - for (var i = 0; i < 3; i++) { - var tr = tbl.insertRow(); - for (var j = 0; j < 3; j++) { - var td = tr.insertCell(); + var tbl = document.getElementById('insert-table'); + if (!tbl.childElementCount) { + for (var i = 0; i < 3; i++) { + var tr = tbl.insertRow(); + for (var j = 0; j < 3; j++) { + var td = tr.insertCell(); + } } + walkCells(); } - walkCells(); -}); +} // tablePicker - GUI function walkCells() { commit d915fc9310468a9a2f56e92eab7f48b2d7bc2153 Author: Pranav Kant <[email protected]> Date: Thu May 26 00:12:08 2016 +0530 loleaflet: Init font/back color on refresh When these buttons are moved from toolbar-up to up-more and then back they are not initialized. Change-Id: Idc8c342092f723c3e50308988f8b2c070e0c08ad diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js index 8a76146..dfbc010 100644 --- a/loleaflet/dist/toolbar/toolbar.js +++ b/loleaflet/dist/toolbar/toolbar.js @@ -59,6 +59,11 @@ $(function () { onClick(e.target); }, onRefresh: function(e) { + $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true}); + $("#fontColorPicker").on("change.color", onColorPick); + $('#backColorPicker').colorpicker({showOn:'none', hideButton:true}); + $("#backColorPicker").on("change.color", onColorPick); + if (!L.DomUtil.get('fontcolorindicator')) { var fontColorIndicator = L.DomUtil.create('div', 'font-color-indicator', L.DomUtil.get('tb_toolbar-up_item_fontcolor')); fontColorIndicator.id = 'fontcolorindicator'; @@ -144,11 +149,6 @@ $(function () { onClick(e.target); } }); - - $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true}); - $("#fontColorPicker").on("change.color", onColorPick); - $('#backColorPicker').colorpicker({showOn:'none', hideButton:true}); - $("#backColorPicker").on("change.color", onColorPick); }); // This object is used to track enabled/disabled state when one is in view mode commit d04a92fcf3b7cfb474f49c05d1ce49fe638006c9 Author: Pranav Kant <[email protected]> Date: Thu May 26 00:14:43 2016 +0530 loleaflet: Check if clicked item is in toolbar-up-more Change-Id: I8758f0195fcc9a2676597637c11efc9476d5093b diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js index 7c06785..8a76146 100644 --- a/loleaflet/dist/toolbar/toolbar.js +++ b/loleaflet/dist/toolbar/toolbar.js @@ -194,10 +194,14 @@ function onClick(id) { toolbar = w2ui['spreadsheet-toolbar']; item = toolbar.get(id) ; } - else if (w2ui['presentation-toolbar'].get(id) != null) { + else if (w2ui['presentation-toolbar'].get(id) !== null) { toolbar = w2ui['presentation-toolbar']; item = toolbar.get(id); } + else if (w2ui['toolbar-up-more'].get(id) !== null) { + toolbar = w2ui['toolbar-up-more']; + item = toolbar.get(id); + } else { throw new Error('unknown id: ' + id); } commit 586b15990287d0d39652a3ebb567edd1b1a90372 Author: Pranav Kant <[email protected]> Date: Wed May 25 23:33:04 2016 +0530 loleaflet: Clean-up toolbar; fix en/dis-able button states Use an object to keep track of enabled/disabled state of buttons. This also prevents us looping all the format buttons everytime a commandstatechanged is received, so better algorithmic complexity. For sessions in view-only mode, keep storing the state of these buttons in this object, and use the stored states to enable/disable buttons when edit lock is taken. While enabling/disabling the toolbar buttons, also check in toolbar-more. Change-Id: I6555fde6669e1a8ba349c3213280a627a05d80b7 diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js index baaf79a..7c06785 100644 --- a/loleaflet/dist/toolbar/toolbar.js +++ b/loleaflet/dist/toolbar/toolbar.js @@ -151,10 +151,15 @@ $(function () { $("#backColorPicker").on("change.color", onColorPick); }); -var formatButtons = ['undo', 'redo', 'save', - 'bold', 'italic', 'underline', 'strikeout', 'annotation', 'inserttable', - 'fontcolor', 'backcolor', 'bullet', 'numbering', 'alignleft', 'alignhorizontal', 'alignright', 'alignblock', - 'incrementindent', 'decrementindent', 'insertgraphic']; +// This object is used to track enabled/disabled state when one is in view mode +var formatButtons = { + 'undo': true, 'redo': true, 'save': true, + 'bold': true, 'italic': true, 'underline': true, 'strikeout': true, + 'annotation': true, 'inserttable': true, + 'fontcolor': true, 'backcolor': true, 'bullet': true, 'numbering': true, + 'alignleft': true, 'alignhorizontal': true, 'alignright': true, 'alignblock': true, + 'incrementindent': true, 'decrementindent': true, 'insertgraphic': true +}; var takeEditPopupMessage = '<div>' + _("You are viewing now.") + '<br/>' + _("Click here to take edit.") + '</div>'; var takeEditPopupTimeout = null; @@ -637,22 +642,41 @@ map.on('commandstatechanged', function (e) { } } - formatButtons.forEach(function (id) { - if ('.uno:' + toolbar.get(id).uno === commandName) { - if (state === 'true') { - toolbar.check(id); - } - else if (state === 'false') { - toolbar.uncheck(id); - } - else if (state === 'enabled' && map._permission === 'edit') { + var toolbarUpMore = w2ui['toolbar-up-more']; + var id = commandName.toLowerCase().substr(5); + if (typeof formatButtons[id] !== 'undefined') { + if (state === 'true') { + toolbar.check(id); + toolbarUpMore.check(id); + } + else if (state === 'false') { + toolbar.uncheck(id); + toolbarUpMore.uncheck(id); + } + // only store the state for now; + // buttons with stored state === enabled will + // be enabled when we get the editlock + else if (state === 'enabled') { + formatButtons[id] = true; + } + else if (state === 'disabled') { + formatButtons[id] = false; + } + + // Change the toolbar button state immediately + // if we already have the editlock + if (map._editlock && (state === 'enabled' || state === 'disabled')) { + // in case some buttons are in toolbar-up-more, find + // them and en/dis-able them. + if (formatButtons[id]) { toolbar.enable(id); - } - else if (state === 'disabled') { + toolbarUpMore.enable(id); + } else { toolbar.disable(id); + toolbarUpMore.disable(id); } } - }); + } }); map.on('search', function (e) { @@ -873,14 +897,19 @@ map.on('editlock', function (e) { } toolbar = w2ui['toolbar-up']; + var toolbarUpMore = w2ui['toolbar-up-more']; // {En,Dis}able toolbar buttons - formatButtons.forEach(function (id) { - if (e.value) { + for (var id in formatButtons) { + if (e.value && formatButtons[id]) { + // restore the state from stored object (formatButtons) toolbar.enable(id); + // some might be hidden in toolbar-up-more + toolbarUpMore.enable(id); } else { toolbar.disable(id); + toolbarUpMore.disable(id); } - }); + } var spreadsheetButtons = ['firstrecord', 'prevrecord', 'nextrecord', 'lastrecord']; var formulaBarButtons = ['sum', 'function'];
_______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
