[SSE] Changed border styles for cell in the toolbar.

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -517,7 +517,6 @@ define([
 
         onBordersWidth: function(menu, item, state) {
             if (state) {
-                $('#id-toolbar-mnu-item-border-width .menu-item-icon').css('border-width', (item.value == 'thin' ? 1 : (item.value == 'medium' ? 2 : 3)) + 'px');
                 this.toolbar.btnBorders.options.borderswidth = item.value;
 
                 Common.NotificationCenter.trigger('edit:complete', this.toolbar);

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -1486,9 +1486,9 @@ define([
                         {caption: '--'},
                         {
                             id          : 'id-toolbar-mnu-item-border-width',
-                            caption     : this.textBordersWidth,
+                            caption     : this.textBordersStyle,
                             iconCls     : 'mnu-icon-item mnu-border-width',
-                            template    : _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 11px; height: 11px; margin: 2px 7px 0 -9px; border-style: solid; border-width: 1px; border-color: #000;"></span><%= caption %></a>'),
+                            template    : _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 11px; height: 11px; margin: 2px 7px 0 -9px;"></span><%= caption %></a>'),
                             menu        : (function(){
                                 var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item" style="background-position: 0 -<%= options.offsety %>px;"></div></a>');
 
@@ -1497,9 +1497,17 @@ define([
                                     menuAlign   : 'tl-tr',
                                     id          : 'toolbar-menu-borders-width',
                                     items: [
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: 'thin',   offsety: 0, checked:true},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: 'medium', offsety: 20},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: 'thick',  offsety: 40}
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin ,   offsety: 0, checked:true},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair,   offsety: 20},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted,   offsety: 40},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed,   offsety: 60},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot,   offsety: 80},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot,   offsety: 100},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium, offsety: 120},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed,  offsety: 140},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot,  offsety: 160},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot,  offsety: 180},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick,  offsety: 200}
                                     ]
                                 });
 
@@ -1852,7 +1860,7 @@ define([
         tipAlignTop:        'Align Top',
         tipAlignMiddle:     'Align Middle',
         tipAlignBottom:     'Align Bottom',
-        textBordersWidth:   'Borders Width',
+        textBordersStyle:   'Border Style',
         textBordersColor:   'Borders Color',
         textAlignLeft:      'Left align text',
         textAlignRight:     'Right align text',

apps/spreadsheeteditor/main/locale/en.json

@@ -1484,7 +1484,8 @@
   "SSE.Views.Toolbar.textAllBorders": "All Borders",
   "SSE.Views.Toolbar.textBold": "Bold",
   "SSE.Views.Toolbar.textBordersColor": "Border Color",
-  "SSE.Views.Toolbar.textBordersWidth": "Border Width",
+  "del_SSE.Views.Toolbar.textBordersWidth": "Border Width",
+  "SSE.Views.Toolbar.textBordersStyle": "Border Style",
   "SSE.Views.Toolbar.textBottomBorders": "Bottom Borders",
   "SSE.Views.Toolbar.textCenterBorders": "Inside Vertical Borders",
   "SSE.Views.Toolbar.textClockwise": "Angle Clockwise",

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -246,7 +246,7 @@
 
 #id-toolbar-mnu-item-border-width {
     .border-size-item {
-        background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) repeat-x scroll 0 0";
+        background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) no-repeat scroll 0 0";
         width: 80px;
         height: 20px;
         margin-top: -3px;