loleaflet/css/toolbar.css | 27 +++++++++++ loleaflet/images/fr01.svg | 7 +++ loleaflet/images/fr010.svg | 10 ++++ loleaflet/images/fr011.svg | 10 ++++ loleaflet/images/fr012.svg | 6 ++ loleaflet/images/fr02.svg | 6 ++ loleaflet/images/fr03.svg | 6 ++ loleaflet/images/fr04.svg | 6 ++ loleaflet/images/fr05.svg | 6 ++ loleaflet/images/fr06.svg | 6 ++ loleaflet/images/fr07.svg | 6 ++ loleaflet/images/fr08.svg | 6 ++ loleaflet/images/fr09.svg | 6 ++ loleaflet/images/lc_setborderstyle.svg | 10 ++++ loleaflet/js/toolbar.js | 75 +++++++++++++++++++++++++++++++-- 15 files changed, 190 insertions(+), 3 deletions(-)
New commits: commit 9d4469a79bbfa8c5815935838af8b55e08ae3c11 Author: Jan Holesovsky <ke...@collabora.com> Date: Wed Jun 20 13:29:44 2018 +0200 borders: This has to be global in order to have the event working. Change-Id: I7a1f52c825905f4fe0ba33fdfd16cf979e3d378d diff --git a/loleaflet/js/toolbar.js b/loleaflet/js/toolbar.js index 7a1dc6d19..b336171b3 100644 --- a/loleaflet/js/toolbar.js +++ b/loleaflet/js/toolbar.js @@ -305,6 +305,8 @@ function setBorderStyle(num) { map.focus(); } +global.setBorderStyle = setBorderStyle; + function insertTable() { var rows = 10; var cols = 10; commit a2a6c5990c1b736300126530e89758a6c5870161 Author: Andras Timar <andras.ti...@collabora.com> Date: Wed Jun 20 08:09:47 2018 +0200 fix indentation issues Change-Id: I565fe5e46daa5c41d7ee0dc6921fd7d2039c4287 diff --git a/loleaflet/js/toolbar.js b/loleaflet/js/toolbar.js index fe02a87a1..7a1dc6d19 100644 --- a/loleaflet/js/toolbar.js +++ b/loleaflet/js/toolbar.js @@ -249,51 +249,51 @@ function onClick(e, id, item, subItem) { function setBorders(left, right, bottom, top, horiz, vert) { var params = { - OuterBorder: { - type : '[]any', - value : [ - { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : left }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, - { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : right }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, - { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : bottom }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, - { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : top }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, - { type : 'long', value : 0 }, - { type : 'long', value : 0 }, - { type : 'long', value : 0 }, - { type : 'long', value : 0 }, - { type : 'long', value : 0 } - ] - }, - InnerBorder: { - type : '[]any', - value : [ - { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : horiz }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, - { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : vert }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, - { type : 'short', value : 0 }, - { type : 'short', value : 127 }, - { type : 'long', value : 0 } - ] - }}; + OuterBorder: { + type : '[]any', + value : [ + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : left }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : right }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : bottom }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : top }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 } + ] + }, + InnerBorder: { + type : '[]any', + value : [ + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : horiz }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : vert }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'short', value : 0 }, + { type : 'short', value : 127 }, + { type : 'long', value : 0 } + ] + }}; map.sendUnoCommand('.uno:SetBorderStyle', params); } function setBorderStyle(num) { switch (num) { - case 1: setBorders(0, 0, 0, 0, 0, 0); break; - case 2: setBorders(1, 0, 0, 0, 0, 0); break; - case 3: setBorders(0, 1, 0, 0, 0, 0); break; - case 4: setBorders(1, 1, 0, 0, 0, 0); break; - - case 5: setBorders(0, 0, 0, 1, 0, 0); break; - case 6: setBorders(0, 0, 1, 0, 0, 0); break; - case 7: setBorders(0, 0, 1, 1, 0, 0); break; - case 8: setBorders(1, 1, 1, 1, 0, 0); break; - - case 9: setBorders(0, 0, 1, 1, 1, 0); break; - case 10: setBorders(1, 1, 1, 1, 1, 0); break; - case 11: setBorders(1, 1, 1, 1, 0, 1); break; - case 12: setBorders(1, 1, 1, 1, 1, 1); break; - - default: console.log('ignored border: ' + num); + case 1: setBorders(0, 0, 0, 0, 0, 0); break; + case 2: setBorders(1, 0, 0, 0, 0, 0); break; + case 3: setBorders(0, 1, 0, 0, 0, 0); break; + case 4: setBorders(1, 1, 0, 0, 0, 0); break; + + case 5: setBorders(0, 0, 0, 1, 0, 0); break; + case 6: setBorders(0, 0, 1, 0, 0, 0); break; + case 7: setBorders(0, 0, 1, 1, 0, 0); break; + case 8: setBorders(1, 1, 1, 1, 0, 0); break; + + case 9: setBorders(0, 0, 1, 1, 1, 0); break; + case 10: setBorders(1, 1, 1, 1, 1, 0); break; + case 11: setBorders(1, 1, 1, 1, 0, 1); break; + case 12: setBorders(1, 1, 1, 1, 1, 1); break; + + default: console.log('ignored border: ' + num); } // close the popup commit 314164fa39a61a7f3cf9d75701fed8346ac01d29 Author: Jan Holesovsky <ke...@collabora.com> Date: Tue Jun 19 13:53:56 2018 +0200 borders: Send .uno:SetBorderStyle with the appropriate params to the core. Change-Id: I703dda35d3b412ff60602a6802b260d8709762fd Reviewed-on: https://gerrit.libreoffice.org/56093 Reviewed-by: Ashod Nakashian <ashnak...@gmail.com> Tested-by: Ashod Nakashian <ashnak...@gmail.com> diff --git a/loleaflet/js/toolbar.js b/loleaflet/js/toolbar.js index 9397f41bf..fe02a87a1 100644 --- a/loleaflet/js/toolbar.js +++ b/loleaflet/js/toolbar.js @@ -247,16 +247,62 @@ function onClick(e, id, item, subItem) { } } -function insertBorder() { - var $grid = $('#setborderstyle-grid'); +function setBorders(left, right, bottom, top, horiz, vert) { + var params = { + OuterBorder: { + type : '[]any', + value : [ + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : left }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : right }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : bottom }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : top }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 }, + { type : 'long', value : 0 } + ] + }, + InnerBorder: { + type : '[]any', + value : [ + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : horiz }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'com.sun.star.table.BorderLine2', value : { Color : { type : 'com.sun.star.util.Color', value : 0 }, InnerLineWidth : { type : 'short', value : 0 }, OuterLineWidth : { type : 'short', value : vert }, LineDistance : { type : 'short', value : 0 }, LineStyle : { type : 'short', value : 0 }, LineWidth : { type : 'unsigned long', value : 0 } } }, + { type : 'short', value : 0 }, + { type : 'short', value : 127 }, + { type : 'long', value : 0 } + ] + }}; + map.sendUnoCommand('.uno:SetBorderStyle', params); +} - $grid.on({ - click: function() { - // TODO send map.sendUnoCommand('.uno: com.sun.star.table.BorderLine2' ); - $().w2overlay({ name: 'toolbar-up' }); - console.log('click border'); - } - }); +function setBorderStyle(num) { + switch (num) { + case 1: setBorders(0, 0, 0, 0, 0, 0); break; + case 2: setBorders(1, 0, 0, 0, 0, 0); break; + case 3: setBorders(0, 1, 0, 0, 0, 0); break; + case 4: setBorders(1, 1, 0, 0, 0, 0); break; + + case 5: setBorders(0, 0, 0, 1, 0, 0); break; + case 6: setBorders(0, 0, 1, 0, 0, 0); break; + case 7: setBorders(0, 0, 1, 1, 0, 0); break; + case 8: setBorders(1, 1, 1, 1, 0, 0); break; + + case 9: setBorders(0, 0, 1, 1, 1, 0); break; + case 10: setBorders(1, 1, 1, 1, 1, 0); break; + case 11: setBorders(1, 1, 1, 1, 0, 1); break; + case 12: setBorders(1, 1, 1, 1, 1, 1); break; + + default: console.log('ignored border: ' + num); + } + + // close the popup + // TODO we may consider keeping it open in the future if we add border color + // and style to this popup too + if ($('#w2ui-overlay-toolbar-up').length > 0) { + $('#w2ui-overlay-toolbar-up').removeData('keepOpen')[0].hide(); + } + map.focus(); } function insertTable() { @@ -587,6 +633,15 @@ function createToolbar() { {type: 'break', id: 'incdecindent'}, {type: 'drop', id: 'inserttable', img: 'inserttable', hint: _('Insert table'), overlay: {onShow: insertTable}, html: '<div id="inserttable-wrapper"><div id="inserttable-popup" class="inserttable-pop ui-widget ui-widget-content ui-corner-all"><div class="inserttable-grid"></div><div id="inserttable-status" class="loleaflet-font" style="padding: 5px;"><br/></div></div></div>'}, + {type: 'drop', id: 'setborderstyle', img: 'setborderstyle', hint: _('Borders'), + html: '<table id="setborderstyle-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01" onclick="setBorderStyle(1)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame02" onclick="setBorderStyle(2)"></td><td class="w2ui-tb-image w2ui-icon frame03" onclick="setBorderStyle(3)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame04" onclick="setBorderStyle(4)"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame05" onclick="setBorderStyle(5)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame06" onclick="setBorderStyle(6)"></td><td class="w2ui-tb-image w2ui-icon frame07" onclick="setBorderStyle(7)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame08" onclick="setBorderStyle(8)"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame09" onclick="setBorderStyle(9)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame10" onclick="setBorderStyle(10)"></td><td class="w2ui-tb-image w2ui-icon frame11" onclick="setBorderStyle(11)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame12" onclick="setBorderStyle(12)"></td></tr></table>' + }, {type: 'drop', id: 'insertshapes', img: 'basicshapes_ellipse', hint: _('Insert shapes'), overlay: {onShow: insertShapes}, html: '<div id="insertshape-wrapper"><div id="insertshape-popup" class="insertshape-pop ui-widget ui-widget-content ui-corner-all"><div class="insertshape-grid"></div></div></div>'}, {type: 'button', id: 'insertobjectchart', img: 'insertobjectchart', hint: _UNO('.uno:InsertObjectChart', '', true), uno: 'InsertObjectChart'}, @@ -1078,17 +1133,6 @@ function onDocLayerInit() { switch (docType) { case 'spreadsheet': toolbarUp.remove('inserttable', 'styles', 'justifypara', 'defaultbullet', 'defaultnumbering', 'break-numbering'); - toolbarUp.insert('setborderstyle', - {type: 'drop', id: 'setborderstyle', img: 'setborderstyle', hint: _('Borders'), overlay: {onShow: insertBorder}, - html: '<table id="setborderstyle-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame02"></td><td class="w2ui-tb-image w2ui-icon frame03"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame04"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame05"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame06"></td><td class="w2ui-tb-image w2ui-icon frame07"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame08"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame09"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame10"></td><td class="w2ui-tb-image w2ui-icon frame11"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame12"></td></tr></table>' - } - ); statusbar.disable('zoomreset', 'zoomout', 'zoomin', 'zoomlevel'); statusbar.insert('left', [ {type: 'break', id:'break1'}, @@ -1126,7 +1170,7 @@ function onDocLayerInit() { break; case 'text': - toolbarUp.remove('wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending'); + toolbarUp.remove('wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending', 'setborderstyle'); statusbar.insert('left', [ {type: 'break', id: 'break1'}, {type: 'html', id: 'StatePageNumber', @@ -1157,7 +1201,7 @@ function onDocLayerInit() { if (!map['wopi'].HideExportOption) { presentationToolbar.show('presentation', 'presentationbreak'); } - toolbarUp.remove('insertannotation', 'wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending'); + toolbarUp.remove('insertannotation', 'wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending', 'setborderstyle'); statusbar.insert('left', [ {type: 'break', id:'break1'}, {type: 'html', id: 'PageStatus', @@ -1173,7 +1217,7 @@ function onDocLayerInit() { break; case 'drawing': - toolbarUp.remove('insertannotation', 'wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending'); + toolbarUp.remove('insertannotation', 'wraptextseparator', 'wraptext', 'togglemergecells', 'break-toggle', 'numberformatcurrency', 'numberformatpercent', 'numberformatdecimal', 'numberformatdate', 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'sortascending', 'sortdescending', 'setborderstyle'); // Remove irrelevant toolbars $('#formulabar').hide(); commit 8309734edd3d5e7e13d4ff7d34b1aa839981c3fe Author: Jan Holesovsky <ke...@collabora.com> Date: Tue Jun 19 11:29:33 2018 +0200 borders: Improve the look. Change-Id: Ib7ca90285bb012a09f5fd2d867a3d588e831ec3a Reviewed-on: https://gerrit.libreoffice.org/56092 Reviewed-by: Ashod Nakashian <ashnak...@gmail.com> Tested-by: Ashod Nakashian <ashnak...@gmail.com> diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css index 42ed881f2..788dc4e10 100644 --- a/loleaflet/css/toolbar.css +++ b/loleaflet/css/toolbar.css @@ -257,12 +257,17 @@ button.leaflet-control-search-next border-style: solid; } -#insertborder-grid tr td { - border-style: inset; +#setborderstyle-grid tr td { + box-sizing: border-box; + background: rgba(255, 255, 255, 0.5); + position: relative; + padding: 2px; + border: 1px solid #ccc; + overflow: auto; /* child margins otherwise don't expand *this* element (parent) */ } -#insertborder-grid tr td:hover { - border-style: solid; +#setborderstyle-grid td:hover { + border: 1px solid #888; } .w2ui-icon.basicshapes_rectangle { background: url('images/lc_basicshapes.rectangle.svg') no-repeat center !important; } @@ -430,7 +435,7 @@ button.leaflet-control-search-next .w2ui-icon.italic{ background: url('images/lc_italic.svg') no-repeat center !important; } .w2ui-icon.insertgraphic{ background: url('images/lc_gallery.svg') no-repeat center !important; } .w2ui-icon.inserttable{ background: url('images/lc_inserttable.svg') no-repeat center !important; } -.w2ui-icon.insertborder{ background: url('images/lc_setborderstyle.svg') no-repeat center !important; } +.w2ui-icon.setborderstyle{ background: url('images/lc_setborderstyle.svg') no-repeat center !important; } .w2ui-icon.next{ background: url('images/lc_downsearch.svg') no-repeat center !important; } .w2ui-icon.numbering{ background: url('images/lc_defaultnumbering.svg') no-repeat center !important; } .w2ui-icon.presentation{ background: url('images/lc_dia.svg') no-repeat center !important; } diff --git a/loleaflet/js/toolbar.js b/loleaflet/js/toolbar.js index 475d76bf5..9397f41bf 100644 --- a/loleaflet/js/toolbar.js +++ b/loleaflet/js/toolbar.js @@ -248,7 +248,7 @@ function onClick(e, id, item, subItem) { } function insertBorder() { - var $grid = $('#insertborder-grid'); + var $grid = $('#setborderstyle-grid'); $grid.on({ click: function() { @@ -1078,9 +1078,9 @@ function onDocLayerInit() { switch (docType) { case 'spreadsheet': toolbarUp.remove('inserttable', 'styles', 'justifypara', 'defaultbullet', 'defaultnumbering', 'break-numbering'); - toolbarUp.insert('insertshapes', - {type: 'drop', id: 'insertborder', img: 'insertborder', hint: _('Borders'), overlay: {onShow: insertBorder}, - html: '<table id="insertborder-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01"></td>' + + toolbarUp.insert('setborderstyle', + {type: 'drop', id: 'setborderstyle', img: 'setborderstyle', hint: _('Borders'), overlay: {onShow: insertBorder}, + html: '<table id="setborderstyle-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01"></td>' + '<td class="w2ui-tb-image w2ui-icon frame02"></td><td class="w2ui-tb-image w2ui-icon frame03"></td>' + '<td class="w2ui-tb-image w2ui-icon frame04"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame05"></td>' + '<td class="w2ui-tb-image w2ui-icon frame06"></td><td class="w2ui-tb-image w2ui-icon frame07"></td>' + commit 77e913e46a310fd9c83b9c4f00d3e6d2502bb6d3 Author: Henry Castro <hcas...@collabora.com> Date: Mon Jun 18 08:19:00 2018 -0400 loleaflet: add cell borders in Calc Change-Id: I0105ee6c98b0eb043b60b56ea80007bae967df90 Reviewed-on: https://gerrit.libreoffice.org/56091 Reviewed-by: Jan Holesovsky <ke...@collabora.com> Tested-by: Jan Holesovsky <ke...@collabora.com> diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css index 437be143a..42ed881f2 100644 --- a/loleaflet/css/toolbar.css +++ b/loleaflet/css/toolbar.css @@ -257,6 +257,14 @@ button.leaflet-control-search-next border-style: solid; } +#insertborder-grid tr td { + border-style: inset; +} + +#insertborder-grid tr td:hover { + border-style: solid; +} + .w2ui-icon.basicshapes_rectangle { background: url('images/lc_basicshapes.rectangle.svg') no-repeat center !important; } .w2ui-icon.basicshapes_round-rectangle { background: url('images/lc_basicshapes.round-rectangle.svg') no-repeat center !important; } .w2ui-icon.basicshapes_quadrat { background: url('images/lc_basicshapes.quadrat.svg') no-repeat center !important; } @@ -385,6 +393,19 @@ button.leaflet-control-search-next .w2ui-icon.flowchartshapes_flowchart-direct-access-storage { background: url('images/lc_flowchartshapes.flowchart-direct-access-storage.svg') no-repeat center !important; } .w2ui-icon.flowchartshapes_flowchart-display { background: url('images/lc_flowchartshapes.flowchart-display.svg') no-repeat center !important; } +.w2ui-icon.frame01 { background: url('images/fr01.svg') no-repeat center !important; } +.w2ui-icon.frame02 { background: url('images/fr02.svg') no-repeat center !important; } +.w2ui-icon.frame03 { background: url('images/fr03.svg') no-repeat center !important; } +.w2ui-icon.frame04 { background: url('images/fr04.svg') no-repeat center !important; } +.w2ui-icon.frame05 { background: url('images/fr05.svg') no-repeat center !important; } +.w2ui-icon.frame06 { background: url('images/fr06.svg') no-repeat center !important; } +.w2ui-icon.frame07 { background: url('images/fr07.svg') no-repeat center !important; } +.w2ui-icon.frame08 { background: url('images/fr08.svg') no-repeat center !important; } +.w2ui-icon.frame09 { background: url('images/fr09.svg') no-repeat center !important; } +.w2ui-icon.frame10 { background: url('images/fr010.svg') no-repeat center !important; } +.w2ui-icon.frame11 { background: url('images/fr011.svg') no-repeat center !important; } +.w2ui-icon.frame12 { background: url('images/fr012.svg') no-repeat center !important; } + .w2ui-icon.accepttrackedchanges{ background: url('images/lc_accepttrackedchanges.svg') no-repeat center !important; } .w2ui-icon.alignblock{ background: url('images/lc_alignblock.svg') no-repeat center !important; } .w2ui-icon.alignhorizontal{ background: url('images/lc_alignhorizontalcenter.svg') no-repeat center !important; } @@ -409,6 +430,7 @@ button.leaflet-control-search-next .w2ui-icon.italic{ background: url('images/lc_italic.svg') no-repeat center !important; } .w2ui-icon.insertgraphic{ background: url('images/lc_gallery.svg') no-repeat center !important; } .w2ui-icon.inserttable{ background: url('images/lc_inserttable.svg') no-repeat center !important; } +.w2ui-icon.insertborder{ background: url('images/lc_setborderstyle.svg') no-repeat center !important; } .w2ui-icon.next{ background: url('images/lc_downsearch.svg') no-repeat center !important; } .w2ui-icon.numbering{ background: url('images/lc_defaultnumbering.svg') no-repeat center !important; } .w2ui-icon.presentation{ background: url('images/lc_dia.svg') no-repeat center !important; } diff --git a/loleaflet/images/fr01.svg b/loleaflet/images/fr01.svg new file mode 100644 index 000000000..a38747a9d --- /dev/null +++ b/loleaflet/images/fr01.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <g + inkscape:label="Capa 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(1,-1029.3622)" /> +</svg> diff --git a/loleaflet/images/fr010.svg b/loleaflet/images/fr010.svg new file mode 100644 index 000000000..5b5ede39f --- /dev/null +++ b/loleaflet/images/fr010.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#4d4d4d" + d="m 12,4 0,15 1,0 0,-15 z" + /> + <path + style="fill:#f47750" + d="M 4 3 L 4 4 L 4 11 L 4 12 L 4 20 L 5 20 L 21 20 L 21 19 L 21 4 L 21 3 L 4 3 z M 5 4 L 20 4 L 20 11 L 5 11 L 5 4 z M 5 12 L 20 12 L 20 19 L 5 19 L 5 12 z " + /> + </svg> diff --git a/loleaflet/images/fr011.svg b/loleaflet/images/fr011.svg new file mode 100644 index 000000000..7452f5a41 --- /dev/null +++ b/loleaflet/images/fr011.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#4d4d4d" + d="M 4 11 L 4 12 L 21 12 L 21 11 L 4 11 z " + /> + <path + style="fill:#f47750" + d="M 4 3 L 4 4 L 4 19 L 4 20 L 12 20 L 13 20 L 21 20 L 21 19 L 21 4 L 21 3 L 4 3 z M 5 4 L 12 4 L 12 19 L 5 19 L 5 4 z M 13 4 L 20 4 L 20 19 L 13 19 L 13 4 z " + /> + </svg> diff --git a/loleaflet/images/fr012.svg b/loleaflet/images/fr012.svg new file mode 100644 index 000000000..9cde5ef00 --- /dev/null +++ b/loleaflet/images/fr012.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 3 L 4 4 L 4 11 L 4 12 L 4 19 L 4 20 L 21 20 L 21 19 L 21 12 L 21 11 L 21 4 L 21 3 L 4 3 z M 5 4 L 12 4 L 12 11 L 5 11 L 5 4 z M 13 4 L 20 4 L 20 11 L 13 11 L 13 4 z M 5 12 L 12 12 L 12 19 L 5 19 L 5 12 z M 13 12 L 20 12 L 20 19 L 13 19 L 13 12 z " + /> + </svg> diff --git a/loleaflet/images/fr02.svg b/loleaflet/images/fr02.svg new file mode 100644 index 000000000..b71acc0f1 --- /dev/null +++ b/loleaflet/images/fr02.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 3 L 4 20 L 5 20 L 5 3 L 4 3 z " + /> + </svg> diff --git a/loleaflet/images/fr03.svg b/loleaflet/images/fr03.svg new file mode 100644 index 000000000..8fcca7d78 --- /dev/null +++ b/loleaflet/images/fr03.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 20 3 L 20 20 L 21 20 L 21 3 L 20 3 z " + /> + </svg> diff --git a/loleaflet/images/fr04.svg b/loleaflet/images/fr04.svg new file mode 100644 index 000000000..63a82d6b8 --- /dev/null +++ b/loleaflet/images/fr04.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 3 L 4 20 L 5 20 L 5 3 L 4 3 z M 20 3 L 20 20 L 21 20 L 21 3 L 20 3 z " + /> + </svg> diff --git a/loleaflet/images/fr05.svg b/loleaflet/images/fr05.svg new file mode 100644 index 000000000..b1f193391 --- /dev/null +++ b/loleaflet/images/fr05.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 3 L 4 4 L 21 4 L 21 3 L 4 3 z " + /> + </svg> diff --git a/loleaflet/images/fr06.svg b/loleaflet/images/fr06.svg new file mode 100644 index 000000000..70f392ffe --- /dev/null +++ b/loleaflet/images/fr06.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 19 L 4 20 L 21 20 L 21 19 L 4 19 z " + /> + </svg> diff --git a/loleaflet/images/fr07.svg b/loleaflet/images/fr07.svg new file mode 100644 index 000000000..01d35e146 --- /dev/null +++ b/loleaflet/images/fr07.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 3 L 4 4 L 21 4 L 21 3 L 4 3 z M 4 19 L 4 20 L 21 20 L 21 19 L 4 19 z " + /> + </svg> diff --git a/loleaflet/images/fr08.svg b/loleaflet/images/fr08.svg new file mode 100644 index 000000000..0942743f3 --- /dev/null +++ b/loleaflet/images/fr08.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 3 L 4 4 L 4 19 L 4 20 L 21 20 L 21 19 L 21 4 L 21 3 L 20 3 L 5 3 L 4 3 z M 5 4 L 20 4 L 20 19 L 5 19 L 5 4 z " + /> + </svg> diff --git a/loleaflet/images/fr09.svg b/loleaflet/images/fr09.svg new file mode 100644 index 000000000..8241031d3 --- /dev/null +++ b/loleaflet/images/fr09.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 3 L 4 4 L 21 4 L 21 3 L 4 3 z M 4 11 L 4 12 L 21 12 L 21 11 L 4 11 z M 4 19 L 4 20 L 21 20 L 21 19 L 4 19 z " + /> + </svg> diff --git a/loleaflet/images/lc_setborderstyle.svg b/loleaflet/images/lc_setborderstyle.svg new file mode 100644 index 000000000..93e3cf682 --- /dev/null +++ b/loleaflet/images/lc_setborderstyle.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path + style="fill:#f47750" + d="M 4 4 L 4 20 L 20 20 L 20 4 L 4 4 z M 5 5 L 19 5 L 19 19 L 5 19 L 5 5 z " + /> + <path + style="fill:#4d4d4d" + d="M 5 5 L 5 19 L 19 19 L 19 5 L 5 5 z M 6 6 L 18 6 L 18 18 L 6 18 L 6 6 z " + /> + </svg> diff --git a/loleaflet/js/toolbar.js b/loleaflet/js/toolbar.js index 0d22143e4..475d76bf5 100644 --- a/loleaflet/js/toolbar.js +++ b/loleaflet/js/toolbar.js @@ -247,6 +247,18 @@ function onClick(e, id, item, subItem) { } } +function insertBorder() { + var $grid = $('#insertborder-grid'); + + $grid.on({ + click: function() { + // TODO send map.sendUnoCommand('.uno: com.sun.star.table.BorderLine2' ); + $().w2overlay({ name: 'toolbar-up' }); + console.log('click border'); + } + }); +} + function insertTable() { var rows = 10; var cols = 10; @@ -1066,6 +1078,17 @@ function onDocLayerInit() { switch (docType) { case 'spreadsheet': toolbarUp.remove('inserttable', 'styles', 'justifypara', 'defaultbullet', 'defaultnumbering', 'break-numbering'); + toolbarUp.insert('insertshapes', + {type: 'drop', id: 'insertborder', img: 'insertborder', hint: _('Borders'), overlay: {onShow: insertBorder}, + html: '<table id="insertborder-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame02"></td><td class="w2ui-tb-image w2ui-icon frame03"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame04"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame05"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame06"></td><td class="w2ui-tb-image w2ui-icon frame07"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame08"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame09"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame10"></td><td class="w2ui-tb-image w2ui-icon frame11"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame12"></td></tr></table>' + } + ); statusbar.disable('zoomreset', 'zoomout', 'zoomin', 'zoomlevel'); statusbar.insert('left', [ {type: 'break', id:'break1'}, _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits