[SSE] Add format settings to conditional formatting

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

@@ -1472,9 +1472,13 @@ define([
 
         onCondFormatMenu: function(menu, item) {
             var me = this;
+            var value = this.api.asc_getLocale();
+            (!value) && (value = ((this.toolbar.mode.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.toolbar.mode.lang)) : 0x0409));
+
             if (item.value == 'manage') {
                 (new SSE.Views.FormatRulesManagerDlg({
                     api: me.api,
+                    langId: value,
                     handler: function (result, settings) {
                         if (me && me.api) {
                         }
@@ -1488,6 +1492,7 @@ define([
                     type    : item.options.type,
                     subtype : item.value,
                     isEdit  : false,
+                    langId  : value,
                     handler : function(result, settings) {
                         if (result == 'ok' && settings) {
                         }

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

@@ -93,8 +93,10 @@ define([
                                                 '<div id="format-rules-format-preset" class="input-group-nr" style="display: inline-block;vertical-align: top;"></div>',
                                                 '<div id="format-rules-bold" style="display: inline-block;margin-left: 5px;"></div>','<div id="format-rules-italic" style="display: inline-block;margin-left: 5px;"></div>',
                                                 '<div id="format-rules-underline" style="display: inline-block;margin-left: 5px;"></div>','<div id="format-rules-strikeout" style="display: inline-block;margin-left: 5px;"></div>',
-                                                '<div id="format-rules-subscript" style="display: inline-block;margin-left: 5px;"></div>','<div id="format-rules-superscript" style="display: inline-block;margin-left: 5px;"></div>',
+                                                // '<div id="format-rules-subscript" style="display: inline-block;margin-left: 5px;"></div>','<div id="format-rules-superscript" style="display: inline-block;margin-left: 5px;"></div>',
                                                 '<div id="format-rules-fontcolor" style="display: inline-block;margin-left: 5px;"></div>','<div id="format-rules-fillcolor" style="display: inline-block;margin-left: 5px;"></div>',
+                                                '<div id="format-rules-borders" style="display: inline-block;margin-left: 5px;"></div>',
+                                                '<div id="format-rules-edit-combo-num-format" class="input-group-nr" style="display: inline-block;vertical-align: top;margin-left: 5px;"></div>',
                                             '</div>',
                                         '</td>',
                                     '</tr>',
@@ -200,6 +202,7 @@ define([
             this.props      = options.props;
             this.type       = options.type; // rule category
             this.subtype    = options.subtype; // rule
+            this.langId     = options.langId; // rule
 
             Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
         },
@@ -428,8 +431,7 @@ define([
                 {   value: 'ffeb9c', displayValue: 'absdef', color: '#ffeb9c', displayColor: '9c6500' },
                 {   value: 'ffc7ce', displayValue: 'absdef', color: '#ffc7ce', displayColor: 'b32e35' },
                 {   value: 'c6efce', displayValue: 'absdef', color: '#c6efce', displayColor: '2e8230' },
-                {   value: 'ffcc99', displayValue: 'absdef', color: '#ffcc99', displayColor: '56507b' },
+                {   value: 'ffcc99', displayValue: 'absdef', color: '#ffcc99', displayColor: '56507b' }
-                {   value: -1, displayValue: this.textCustom, color: null }
             ];
             this.cmbFormats = new Common.UI.ComboBoxColor({
                 el          : $('#format-rules-format-preset'),
@@ -479,24 +481,24 @@ define([
             });
             // this.btnStrikeout.on('click',_.bind(this.onStrikeoutClick, this));
 
-            this.btnSuperscript = new Common.UI.Button({
+            // this.btnSuperscript = new Common.UI.Button({
-                parentEl: $('#format-rules-superscript'),
+            //     parentEl: $('#format-rules-superscript'),
-                cls: 'btn-toolbar',
+            //     cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-superscript',
+            //     iconCls: 'toolbar__icon btn-superscript',
-                enableToggle: true,
+            //     enableToggle: true,
-                toggleGroup: 'superscriptFRGroup',
+            //     toggleGroup: 'superscriptFRGroup',
-                hint: this.textSuperscript
+            //     hint: this.textSuperscript
-            });
+            // });
-            // this.btnSuperscript.on('click', _.bind(this.onSuperscriptClick, this));
+            // // this.btnSuperscript.on('click', _.bind(this.onSuperscriptClick, this));
-
+            //
-            this.btnSubscript = new Common.UI.Button({
+            // this.btnSubscript = new Common.UI.Button({
-                parentEl: $('#format-rules-subscript'),
+            //     parentEl: $('#format-rules-subscript'),
-                cls: 'btn-toolbar',
+            //     cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-subscript',
+            //     iconCls: 'toolbar__icon btn-subscript',
-                enableToggle: true,
+            //     enableToggle: true,
-                toggleGroup: 'superscriptFRGroup',
+            //     toggleGroup: 'superscriptFRGroup',
-                hint: this.textSubscript
+            //     hint: this.textSubscript
-            });
+            // });
             // this.btnSubscript.on('click', _.bind(this.onSubscriptClick, this));
 
             var initNewColor = function(btn, picker_el) {
@@ -551,6 +553,212 @@ define([
             // this.btnFillColor.on('click', _.bind(this.onTextColor, this));
             this.mnuFillColorPicker = initNewColor(this.btnFillColor, "#format-rules-menu-fillcolor");
 
+            this.btnBorders = new Common.UI.Button({
+                parentEl    : $('#format-rules-borders'),
+                cls         : 'btn-toolbar',
+                iconCls     : 'toolbar__icon btn-border-out',
+                hint        : this.tipBorders,
+                icls        : 'btn-border-out',
+                borderId    : 'outer',
+                borderswidth: Asc.c_oAscBorderStyles.Thin,
+                split       : true,
+                menu        : new Common.UI.Menu({
+                    items: [
+                        {
+                            caption     : this.textOutBorders,
+                            iconCls     : 'menu__icon btn-border-out',
+                            icls        : 'btn-border-out',
+                            borderId    : 'outer'
+                        },
+                        {
+                            caption     : this.textAllBorders,
+                            iconCls     : 'menu__icon btn-border-all',
+                            icls        : 'btn-border-all',
+                            borderId    : 'all'
+                        },
+                        {
+                            caption     : this.textTopBorders,
+                            iconCls     : 'menu__icon btn-border-top',
+                            icls        : 'btn-border-top',
+                            borderId    : Asc.c_oAscBorderOptions.Top
+                        },
+                        {
+                            caption     : this.textBottomBorders,
+                            iconCls     : 'menu__icon btn-border-bottom',
+                            icls        : 'btn-border-bottom',
+                            borderId    : Asc.c_oAscBorderOptions.Bottom
+                        },
+                        {
+                            caption     : this.textLeftBorders,
+                            iconCls     : 'menu__icon btn-border-left',
+                            icls        : 'btn-border-left',
+                            borderId    : Asc.c_oAscBorderOptions.Left
+                        },
+                        {
+                            caption     : this.textRightBorders,
+                            iconCls     : 'menu__icon btn-border-right',
+                            icls        : 'btn-border-right',
+                            borderId    : Asc.c_oAscBorderOptions.Right
+                        },
+                        {
+                            caption     : this.textNoBorders,
+                            iconCls     : 'menu__icon btn-border-no',
+                            icls        : 'btn-border-no',
+                            borderId    : 'none'
+                        },
+                        {caption: '--'},
+                        {
+                            caption     : this.textInsideBorders,
+                            iconCls     : 'menu__icon btn-border-inside',
+                            icls        : 'btn-border-center',
+                            borderId    : 'inner'
+                        },
+                        {
+                            caption     : this.textCenterBorders,
+                            iconCls     : 'menu__icon btn-border-insidevert',
+                            icls        : 'btn-border-vmiddle',
+                            borderId    : Asc.c_oAscBorderOptions.InnerV
+                        },
+                        {
+                            caption     : this.textMiddleBorders,
+                            iconCls     : 'menu__icon btn-border-insidehor',
+                            icls        : 'btn-border-hmiddle',
+                            borderId    : Asc.c_oAscBorderOptions.InnerH
+                        },
+                        {
+                            caption     : this.textDiagUpBorder,
+                            iconCls     : 'menu__icon btn-border-diagup',
+                            icls        : 'btn-border-diagup',
+                            borderId    : Asc.c_oAscBorderOptions.DiagU
+                        },
+                        {
+                            caption     : this.textDiagDownBorder,
+                            iconCls     : 'menu__icon btn-border-diagdown',
+                            icls        : 'btn-border-diagdown',
+                            borderId    : Asc.c_oAscBorderOptions.DiagD
+                        },
+                        {caption: '--'},
+                        {
+                            id          : 'format-rules-borders-border-width',
+                            caption     : this.textBordersStyle,
+                            iconCls     : 'menu__icon btn-border-style',
+                            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>');
+                                me.mnuBorderWidth = new Common.UI.Menu({
+                                    style       : 'min-width: 100px;',
+                                    menuAlign   : 'tl-tr',
+                                    items: [
+                                        { 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}
+                                    ]
+                                });
+
+                                return me.mnuBorderWidth;
+                            })()
+                        },
+                        this.mnuBorderColor = new Common.UI.MenuItem({
+                            id          : 'format-rules-borders-border-color',
+                            caption     : this.textBordersColor,
+                            iconCls     : 'mnu-icon-item mnu-border-color',
+                            template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 2px 9px 0 -11px; border-style: solid; border-width: 3px; border-color: #000;"></span><%= caption %></a>'),
+                            menu        : new Common.UI.Menu({
+                                menuAlign   : 'tl-tr',
+                                items       : [
+                                    { template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 169px; height: 220px; margin: 10px;"></div>'), stopPropagation: true },
+                                    { template: _.template('<a id="format-rules-borders-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'),  stopPropagation: true }
+                                ]
+                            })
+                        })
+                    ]
+                })
+            });
+            var colorVal = $('<div class="btn-color-value-line"></div>');
+            $('button:first-child', this.btnBorders.cmpEl).append(colorVal);
+            colorVal.css('background-color', this.btnBorders.currentColor || 'transparent');
+            this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
+                el: $('#format-rules-borders-menu-bordercolor')
+            });
+            this.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this));
+            $('#format-rules-borders-menu-new-bordercolor').on('click', _.bind(function() {
+                me.mnuBorderColorPicker.addNewColor();
+            }, this));
+
+            this.mnuBorderWidth.on('item:toggle', _.bind(this.onBordersWidth, this));
+
+            this.ascFormatOptions = {
+                General     : 'General',
+                Number      : '0.00',
+                Currency    : '$#,##0.00',
+                Accounting  : '_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)',
+                DateShort   : 'm/d/yyyy',
+                DateLong    : '[$-F800]dddd, mmmm dd, yyyy',
+                Time        : '[$-F400]h:mm:ss AM/PM',
+                Percentage  : '0.00%',
+                Percent     : '0%',
+                Fraction    : '# ?/?',
+                Scientific  : '0.00E+00',
+                Text        : '@'
+            };
+
+            this.numFormatData = [
+                { value: Asc.c_oAscNumFormatType.General,   format: this.ascFormatOptions.General,     displayValue: this.txtGeneral,      exampleval: '100' },
+                { value: Asc.c_oAscNumFormatType.Number,    format: this.ascFormatOptions.Number,      displayValue: this.txtNumber,       exampleval: '100,00' },
+                { value: Asc.c_oAscNumFormatType.Scientific,format: this.ascFormatOptions.Scientific,  displayValue: this.txtScientific,   exampleval: '1,00E+02' },
+                { value: Asc.c_oAscNumFormatType.Accounting,format: this.ascFormatOptions.Accounting,  displayValue: this.txtAccounting,   exampleval: '100,00 $' },
+                { value: Asc.c_oAscNumFormatType.Currency,  format: this.ascFormatOptions.Currency,    displayValue: this.txtCurrency,     exampleval: '100,00 $' },
+                { value: Asc.c_oAscNumFormatType.Date,      format: 'MM-dd-yyyy',                      displayValue: this.txtDate,         exampleval: '04-09-1900' },
+                { value: Asc.c_oAscNumFormatType.Time,      format: 'HH:MM:ss',                        displayValue: this.txtTime,         exampleval: '00:00:00' },
+                { value: Asc.c_oAscNumFormatType.Percent,   format: this.ascFormatOptions.Percentage,  displayValue: this.txtPercentage,   exampleval: '100,00%' },
+                { value: Asc.c_oAscNumFormatType.Fraction,  format: this.ascFormatOptions.Fraction,    displayValue: this.txtFraction,     exampleval: '100' },
+                { value: Asc.c_oAscNumFormatType.Text,      format: this.ascFormatOptions.Text,        displayValue: this.txtText,         exampleval: '100' }
+            ];
+
+            if (this.api) {
+                var me = this,
+                    info = new Asc.asc_CFormatCellsInfo();
+                info.asc_setType(Asc.c_oAscNumFormatType.None);
+                info.asc_setSymbol(this.langId);
+                var arr = this.api.asc_getFormatCells(info); // all formats
+                this.numFormatData.forEach( function(item, index) {
+                    item.format = arr[index];
+                    item.exampleval = me.api.asc_getLocaleExample(item.format, 100);
+                });
+            }
+
+            var formatTemplate =
+                _.template([
+                    '<% _.each(items, function(item) { %>',
+                    '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
+                    '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
+                    '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
+                    '</div></a></li>',
+                    '<% }); %>'
+                    // ,'<li class="divider">',
+                    // '<li id="id-toolbar-mnu-item-more-formats" data-value="-1"><a tabindex="-1" type="menuitem">' + me.textMoreFormats + '</a></li>'
+                ].join(''));
+
+            this.cmbNumberFormat = new Common.UI.ComboBox({
+                el          : $('#format-rules-edit-combo-num-format'),
+                cls         : 'input-group-nr',
+                style       : 'width: 100px;',
+                menuStyle   : 'min-width: 100%;max-height: 211px;',
+                hint        : this.tipNumFormat,
+                itemsTemplate: formatTemplate,
+                editable    : false,
+                data        : this.numFormatData
+            });
+            this.cmbNumberFormat.setValue(Asc.c_oAscNumFormatType.General);
+            // this.cmbNumberFormat.on('selected', _.bind(this.onNumberFormatSelect, this));
+
             // Scale
             this.scaleControls = [];
             this.lblMidScale = this.$window.find('#format-rules-edit-lbl-scale-2');
@@ -1011,6 +1219,18 @@ define([
             }
         },
 
+        onBordersWidth: function(menu, item, state) {
+            if (state) {
+                this.btnBorders.options.borderswidth = item.value;
+            }
+        },
+
+        onBordersColor: function(picker, color) {
+            $('#format-rules-borders-border-color .menu-item-icon').css('border-color', '#' + ((typeof(color) == 'object') ? color.color : color));
+            this.mnuBorderColor.onUnHoverItem();
+            this.btnBorders.options.borderscolor = Common.Utils.ThemeColor.getRgbColor(color);
+        },
+
         updateThemeColors: function() {
             for (var i=0; i<this.scaleControls.length; i++) {
                 var btn = this.scaleControls[i].color;
@@ -1042,6 +1262,7 @@ define([
 
             this.mnuTextColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.mnuFillColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
+            this.mnuBorderColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
 
         getSettings: function() {
@@ -1116,7 +1337,34 @@ define([
         textMaxpoint: 'Maxpoint',
         textMinimum: 'Minimum',
         textMaximum: 'Maximum',
-        textAppearance: 'Bar Appearance'
+        textAppearance: 'Bar Appearance',
+        txtNumber:          'Number',
+        txtGeneral:         'General',
+        txtCurrency:        'Currency',
+        txtAccounting:      'Accounting',
+        txtDate:            'Date',
+        txtTime:            'Time',
+        txtPercentage:      'Percentage',
+        txtFraction:        'Fraction',
+        txtScientific:      'Scientific',
+        txtText:            'Text',
+        tipBorders:         'Borders',
+        textOutBorders:     'Outside Borders',
+        textAllBorders:     'All Borders',
+        textTopBorders:     'Top Borders',
+        textBottomBorders:  'Bottom Borders',
+        textLeftBorders:    'Left Borders',
+        textRightBorders:   'Right Borders',
+        textNoBorders:      'No Borders',
+        textInsideBorders:  'Inside Borders',
+        textMiddleBorders:  'Inside Horizontal Borders',
+        textCenterBorders:  'Inside Vertical Borders',
+        textDiagDownBorder: 'Diagonal Down Border',
+        textDiagUpBorder:   'Diagonal Up Border',
+        textBordersStyle:   'Border Style',
+        textBordersColor:   'Borders Color',
+        textNewColor:       'Add New Custom Color',
+        tipNumFormat:       'Number Format'
 
     }, SSE.Views.FormatRulesEditDlg || {}));
 });

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

@@ -94,6 +94,7 @@ define([  'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
             this.api        = options.api;
             this.handler    = options.handler;
             this.props      = options.props;
+            this.langId      = options.langId;
             this.levels     = [];
 
             this.rulesStore = new Common.UI.DataViewStore();
@@ -442,6 +443,7 @@ define([  'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
                 api: me.api,
                 props   : (isEdit && rec) ? rec.get('props') : null,
                 isEdit  : isEdit,
+                langId  : me.langId,
                 handler : function(result, settings) {
                     if (result == 'ok' && settings) {
                         if (isEdit) {

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

@@ -108,7 +108,8 @@
     display: inline-block;
 }
 
-#id-toolbar-mnu-item-border-width {
+#id-toolbar-mnu-item-border-width,
+#format-rules-borders-border-width {
     .border-size-item {
         background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) no-repeat scroll 0 0";
         width: 60px;