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

Reply via email to