[DE] Add font settings for lists

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

@@ -1412,11 +1412,25 @@ define([
                 level = me.api.asc_GetCurrentNumberingLvl(),
                 props = (listId !== null) ? me.api.asc_GetNumberingPr(listId) : null;
             if (props) {
+                var me = this;
+                if (_.isUndefined(me.fontstore)) {
+                    me.fontstore = new Common.Collections.Fonts();
+                    var fonts = me.toolbar.cmbFontName.store.toJSON();
+                    var arr = [];
+                    _.each(fonts, function(font, index){
+                        if (!font.cloneid) {
+                            arr.push(_.clone(font));
+                        }
+                    });
+                    me.fontstore.add(arr);
+                }
+
                 (new DE.Views.ListSettingsDialog({
                     api: me.api,
                     props: props,
                     level: level,
                     type: type,
+                    fontStore: me.fontstore,
                     interfaceLang: me.mode.lang,
                     handler: function(result, value) {
                         if (result == 'ok') {

apps/documenteditor/main/app/view/ListSettingsDialog.js

@@ -85,12 +85,8 @@ define([
                                 '<div id="id-dlg-bullet-align" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
                             '<td style="padding-left: 5px;padding-right: 5px;">',
-                                '<label class="input-label">' + this.txtSize + '</label>',
-                                '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
                             '<td style="padding-left: 5px;">',
-                                '<label class="input-label">' + this.txtColor + '</label>',
-                                '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
                         '</tr>',
                         '<tr>',
@@ -107,6 +103,22 @@ define([
                                 '<div id="id-dlg-numbering-spin-start" style="margin-bottom: 10px;"></div>',
                             '</td>',
                         '</tr>',
+                        '<tr>',
+                            '<td colspan="2" style="padding-right: 5px;">',
+                                '<label class="input-label" style="display: block;">' + this.txtFontName + '</label>',
+                                '<div id="id-dlg-numbering-font-name" style="display: inline-block;width: 200px;height:22px;margin-bottom: 10px;vertical-align: middle;"></div>',
+                                '<div id="id-dlg-numbering-bold" style="display: inline-block;margin-left: 4px;margin-bottom: 10px;vertical-align: middle;"></div>',
+                                '<div id="id-dlg-numbering-italic" style="display: inline-block;margin-left: 4px;margin-bottom: 10px;vertical-align: middle;"></div>',
+                            '</td>',
+                            '<td style="padding-left: 5px;padding-right: 5px;">',
+                                '<label class="input-label">' + this.txtSize + '</label>',
+                                '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
+                            '</td>',
+                            '<td style="padding-left: 5px;">',
+                                '<label class="input-label">' + this.txtColor + '</label>',
+                                '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
+                            '</td>',
+                        '</tr>',
                     '</table>',
                 '<% } else {%>',
                     '<table cols="2" style="width: 100%;">',
@@ -155,6 +167,8 @@ define([
             this.props = options.props;
             this.level = options.level || 0;
             this.api = options.api;
+            this.fontStore = options.fontStore;
+            this.fontName = 'Arial';
             this.options.tpl = _.template(this.template)(this.options);
             this.levels = [];
             this.formatString = {
@@ -327,6 +341,7 @@ define([
             this.cmbSize = new Common.UI.ComboBox({
                 el          : $window.find('#id-dlg-bullet-size'),
                 menuStyle   : 'min-width: 100%;max-height: 183px;',
+                style       : this.type==2 ? "width: auto;" : "width: 129px;",
                 editable    : false,
                 cls         : 'input-group-nr',
                 data        : [
@@ -353,8 +368,7 @@ define([
             });
             this.cmbSize.on('selected', _.bind(function (combo, record) {
                 if (this._changedProps) {
-                    if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr());
+                    this._changedProps.put_FontSize((record.value>0) ? record.value : undefined);
-                    this._changedProps.get_TextPr().put_FontSize((record.value>0) ? record.value : undefined);
                 }
                 if (this.api) {
                     this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this.props, this.level, this.type==2);
@@ -426,6 +440,36 @@ define([
                 }
             }, this));
 
+            this.cmbFonts = new Common.UI.ComboBoxFonts({
+                el          : $window.find('#id-dlg-numbering-font-name'),
+                cls         : 'input-group-nr',
+                style       : 'width: 100%;',
+                menuCls     : 'scrollable-menu',
+                menuStyle   : 'min-width: 100%;max-height: 270px;',
+                store       : new Common.Collections.Fonts(),
+                recent      : 0,
+                hint        : this.tipFontName,
+                takeFocusOnClose: true
+            }).on('selected', _.bind(this.onFontName, this));
+
+            this.btnBold = new Common.UI.Button({
+                parentEl: $window.find('#id-dlg-numbering-bold'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon btn-bold',
+                enableToggle: true,
+                hint: this.textBold
+            });
+            this.btnBold.on('click', _.bind(this.onBoldClick, this));
+
+            this.btnItalic = new Common.UI.Button({
+                parentEl: $window.find('#id-dlg-numbering-italic'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon btn-italic',
+                enableToggle: true,
+                hint: this.textItalic
+            });
+            this.btnItalic.on('click', _.bind(this.onItalicClick, this));
+
             this.on('animate:after', _.bind(this.onAnimateAfter, this));
 
             this.afterRender();
@@ -446,6 +490,9 @@ define([
         },
 
         afterRender: function() {
+            this.cmbFonts.fillFonts(this.fontStore);
+            this.cmbFonts.selectRecord(this.fontStore.findWhere({name: this.fontName}));
+
             this.updateThemeColors();
             this._setDefaults(this.props);
             var me = this;
@@ -468,10 +515,9 @@ define([
                 this.btnColor.setColor(color);
                 this.colors.clearSelection();
                 if (this._changedProps) {
-                    if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr());
                     var color = new Asc.asc_CColor();
                     color.put_auto(true);
-                    this._changedProps.get_TextPr().put_Color(color);
+                    this._changedProps.put_Color(color);
                 }
                 if (this.api) {
                     this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this.props, this.level, this.type==2);
@@ -485,8 +531,7 @@ define([
                 this.btnColor.setColor(color);
                 this.colors.clearSelection();
                 if (this._changedProps) {
-                    if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr());
+                    this._changedProps.put_Color(undefined);
-                    this._changedProps.get_TextPr().put_Color(undefined);
                 }
                 if (this.api) {
                     this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this.props, this.level, this.type==2);
@@ -496,8 +541,7 @@ define([
 
         onColorsSelect: function(btn, color) {
             if (this._changedProps) {
-                if (!this._changedProps.get_TextPr()) this._changedProps.put_TextPr(new AscCommonWord.CTextPr());
+                this._changedProps.put_Color(Common.Utils.ThemeColor.getRgbColor(color));
-                this._changedProps.get_TextPr().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
             }
             this.btnColor.menu.items[0].setChecked(false, true);
             this.btnColor.menu.items[1].setChecked(false, true);
@@ -616,33 +660,43 @@ define([
             if (text && format == Asc.c_oAscNumberingFormat.Bullet) {
                 this.bulletProps.symbol = text[0].get_Value();
             }
-            if (textPr) {
-                this.cmbSize.setValue(textPr.get_FontSize() || -1);
-                this.bulletProps.font = textPr.get_FontFamily();
 
-                var color = textPr.get_Color();
+            this.cmbSize.setValue(levelProps.get_FontSize() || -1);
-                this.btnColor.menu.items[0].setChecked(color===undefined, true);
+
-                this.btnColor.menu.items[1].setChecked(!!color && color.get_auto(), true);
+            var font = levelProps.get_FontFamily();
-                if (color && !color.get_auto()) {
+            if (font) {
-                    if ( typeof(color) == 'object' ) {
+                var rec = this.cmbFonts.store.findWhere({name: font});
-                        var isselected = false;
+                this.fontName = (rec) ? rec.get('name') : font;
-                        for (var i=0; i<10; i++) {
+                this.cmbFonts.setValue(this.fontName);
-                            if ( Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue ) {
-                                this.colors.select(color,true);
-                                isselected = true;
-                                break;
-                            }
-                        }
-                        if (!isselected) this.colors.clearSelection();
-                        color = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-                    } else
-                        this.colors.select(color,true);
-                } else {
-                    this.colors.clearSelection();
-                    color = '000000';
-                }
-                this.btnColor.setColor(color);
             }
+            this.bulletProps.font = font;
+
+            this.btnBold.toggle(levelProps.get_Bold() === true, true);
+            this.btnItalic.toggle(levelProps.get_Italic() === true, true);
+
+            var color = levelProps.get_Color();
+            this.btnColor.menu.items[0].setChecked(color===undefined, true);
+            this.btnColor.menu.items[1].setChecked(!!color && color.get_auto(), true);
+            if (color && !color.get_auto()) {
+                if ( typeof(color) == 'object' ) {
+                    var isselected = false;
+                    for (var i=0; i<10; i++) {
+                        if ( Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue ) {
+                            this.colors.select(color,true);
+                            isselected = true;
+                            break;
+                        }
+                    }
+                    if (!isselected) this.colors.clearSelection();
+                    color = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                } else
+                    this.colors.select(color,true);
+            } else {
+                this.colors.clearSelection();
+                color = '000000';
+            }
+            this.btnColor.setColor(color);
+
             if (this.type>0) {
                 if (format == Asc.c_oAscNumberingFormat.Bullet) {
                     if (!this.cmbFormat.store.findWhere({value: Asc.c_oAscNumberingFormat.Bullet, symbol: this.bulletProps.symbol, font: this.bulletProps.font}))
@@ -656,6 +710,11 @@ define([
 
             } else if (this.type===2) {
                 this.txtNumFormat.setDisabled(format == Asc.c_oAscNumberingFormat.Bullet);
+                this.spnStart.setDisabled(format == Asc.c_oAscNumberingFormat.Bullet);
+                this.cmbFonts.setDisabled(format == Asc.c_oAscNumberingFormat.Bullet);
+                this.btnBold.setDisabled(format == Asc.c_oAscNumberingFormat.Bullet);
+                this.btnItalic.setDisabled(format == Asc.c_oAscNumberingFormat.Bullet);
+
                 var arr = [];
                 var me = this;
                 for (var lvl=0; lvl<this.level; lvl++) {
@@ -842,6 +901,33 @@ define([
             this.formatString.selectionEnd = event.target.selectionEnd;
         },
 
+        onFontName: function(combo, record) {
+            if (this._changedProps) {
+                this._changedProps.put_FontFamily(record.name);
+            }
+            if (this.api) {
+                this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this.props, this.level, this.type==2);
+            }
+        },
+
+        onBoldClick: function() {
+            if (this._changedProps) {
+                this._changedProps.put_Bold(this.btnBold.isActive());
+            }
+            if (this.api) {
+                this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this.props, this.level, this.type==2);
+            }
+        },
+
+        onItalicClick: function() {
+            if (this._changedProps) {
+                this._changedProps.put_Italic(this.btnItalic.isActive());
+            }
+            if (this.api) {
+                this.api.SetDrawImagePreviewBullet('bulleted-list-preview', this.props, this.level, this.type==2);
+            }
+        },
+
         txtTitle: 'List Settings',
         txtSize: 'Size',
         txtColor: 'Color',
@@ -861,6 +947,10 @@ define([
         txtSymbol: 'Symbol',
         txtNumFormatString: 'Number format',
         txtInclcudeLevel: 'Include level number',
-        txtStart: 'Start at'
+        txtStart: 'Start at',
+        txtFontName: 'Font',
+        textBold: 'Bold',
+        textItalic: 'Italic'
+
     }, DE.Views.ListSettingsDialog || {}))
 });