[SSE] Изменение окна настроек автофильтра в соответствии с макетами...

[SSE] Изменение окна настроек автофильтра в соответствии с макетами https://nct.onlyoffice.com/products/files/#preview/48701.

apps/common/main/lib/component/ColorPaletteExt.js

+/**
+ *  ColorPaletteExt.js
+ *
+ *  Created by Julia Radzhabova on 07/21/15
+ *  Copyright (c) 2014 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'common/main/lib/component/BaseView'
+], function () { 'use strict';
+
+    Common.UI.ColorPaletteExt = Common.UI.BaseView.extend({
+        options: {
+            dynamiccolors: 10,
+            allowReselect: true,
+            cls: '',
+            style: ''
+        },
+
+        template:
+            _.template([
+                '<div class="palette-color-ext">',
+                '<% var me = this; %>',
+                '<% $(colors).each(function(num, item) { %>',
+                    '<% if (me.isColor(item)) { %>',
+                        '<div class="palette-color-item palette-color color-<%=item%>" style="background:#<%=item%>" hidefocus="on">',
+                        '<em><span style="background:#<%=item%>;" unselectable="on">&#160;</span></em>',
+                        '</div>',
+                    '<% } else if (me.isTransparent(item)) { %>',
+                        '<div class="palette-color-item color-<%=item%>" hidefocus="on">',
+                        '<em><span unselectable="on">&#160;</span></em>',
+                        '</div>',
+                    '<% } else if (me.isEffect(item)) { %>',
+                        '<div effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-item palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" hidefocus="on">',
+                        '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>',
+                        '</div>',
+                    '<% } %>',
+                '<% }); %>',
+                '</div>'].join('')),
+
+        colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
+        selectedCls: 'selected',
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            this.id = this.options.id;
+            this.cls = this.options.cls;
+            this.style = this.options.style;
+            this.colors = this.options.colors || [];
+            this.value = this.options.value;
+
+            if (this.options.el)
+                this.render();
+
+            if (this.options.value)
+                this.select(this.options.value, true);
+        },
+
+        render: function (parentEl) {
+            var me = this;
+
+            if (!me.rendered) {
+                this.cmpEl = $(this.template({
+                    id          : this.id,
+                    cls         : this.cls,
+                    style       : this.style,
+                    colors      : this.colors
+                }));
+
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(this.cmpEl);
+                } else {
+                    $(this.el).html(this.cmpEl);
+                }
+
+                this.cmpEl.on('click', _.bind(this.handleClick, this));
+            } else {
+                this.cmpEl = $(this.el);
+            }
+
+            me.rendered = true;
+            return this;
+        },
+
+        isColor: function(v) {
+            return typeof(v) == 'string' && (/[0-9A-F]{6}/).test(v);
+        },
+
+        isTransparent: function(v) {
+            return typeof(v) == 'string' && (v=='transparent');
+        },
+
+        isEffect: function(v) {
+            return (typeof(v) == 'object' && v.effectId !== undefined);
+        },
+
+        getColor: function() {
+            return this.value;
+        },
+
+        handleClick: function(e) {
+            var me = this;
+            var target = $(e.target).closest('a');
+            var color, cmp;
+
+            if (target.length==0) return;
+
+            if (target.hasClass('color-transparent') ) {
+                $(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls);
+                target.addClass(me.selectedCls);
+                me.value = 'transparent';
+                me.trigger('select', me, 'transparent');
+            } else {
+                if (!/^[a-fA-F0-9]{6}$/.test(me.value) || _.indexOf(me.colors, me.value)<0 )
+                    me.value = false;
+
+                $(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls);
+                target.addClass(me.selectedCls);
+
+                color = target[0].className.match(me.colorRe)[1];
+                if ( target.hasClass('palette-color-effect') ) {
+                    var effectId = parseInt(target.attr('effectid'));
+                    if (color)  {
+                        me.value = color.toUpperCase();
+                        me.trigger('select', me, {color: color, effectId: effectId});
+                    }
+                } else {
+                    if (/#?[a-fA-F0-9]{6}/.test(color)) {
+                        color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+                        me.value = color;
+                        me.trigger('select', me, color);
+                    }
+                }
+            }
+        },
+
+        select: function(color, suppressEvent) {
+            var el = $(this.el);
+            el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
+
+            if (!color) return;
+            
+            if (typeof(color) == 'object' ) {
+                var effectEl;
+                if (color.effectId !== undefined) {
+                    effectEl = el.find('a[effectid="'+color.effectId+'"]').first();
+                    if (effectEl.length>0) {
+                        effectEl.addClass(this.selectedCls);
+                        this.value = effectEl[0].className.match(this.colorRe)[1].toUpperCase();
+                    } else
+                        this.value = false;
+                } else if (color.effectValue !== undefined) {
+                    effectEl = el.find('a[effectvalue="'+color.effectValue+'"].color-' + color.color.toUpperCase()).first();
+                    if (effectEl.length>0) {
+                        effectEl.addClass(this.selectedCls);
+                        this.value = effectEl[0].className.match(this.colorRe)[1].toUpperCase();
+                    } else
+                        this.value = false;
+                }
+            } else {
+                if (/#?[a-fA-F0-9]{6}/.test(color)) {
+                    color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+                    this.value = color;
+                }
+
+                if (/^[a-fA-F0-9]{6}|transparent$/.test(color) && _.indexOf(this.colors, color)>=0 ) {
+                    if (_.indexOf(this.colors, this.value)<0) this.value = false;
+
+                    if (color != this.value || this.options.allowReselect) {
+                        (color == 'transparent') ? el.find('a.color-transparent').addClass(this.selectedCls) : el.find('a.palette-color.color-' + color).first().addClass(this.selectedCls);
+                        this.value = color;
+                        if (suppressEvent !== true) {
+                            this.fireEvent('select', this, color);
+                        }
+                    }
+                } else {
+                    var co = el.find('#'+color).first();
+                    if (co.length==0)
+                        co = el.find('a[color="'+color+'"]').first();
+                    if (co.length>0) {
+                        co.addClass(this.selectedCls);
+                        this.value = color.toUpperCase();
+                    }
+                }
+            }
+        },
+
+        updateColors: function(effectcolors) {
+            if (effectcolors===undefined) return;
+
+            this.colors = effectcolors;
+            this.cmpEl = $(this.template({
+                id          : this.id,
+                cls         : this.cls,
+                style       : this.style,
+                colors      : this.colors
+            }));
+            $(this.el).html(this.cmpEl);
+            this.cmpEl.on('click', _.bind(this.handleClick, this));
+        },
+
+        clearSelection: function(suppressEvent) {
+            $(this.el).find('a.' + this.selectedCls).removeClass(this.selectedCls);
+            this.value = undefined;
+        }
+    });
+});
\ No newline at end of file

apps/common/main/resources/less/colorpalette.less

@@ -10,4 +10,46 @@
             .box-shadow(0 0 0 1px @primary);
         }
     }
+}
+
+.palette-color-ext {
+    padding: 10px;
+    .palette-color-item {
+        padding: 0;
+        border: 1px solid #fff;
+        display: inline-block;
+        text-decoration: none;
+        -moz-outline: 0 none;
+        outline: 0 none;
+        cursor: pointer;
+        vertical-align: middle;
+
+        em {
+            border: none;
+            display: block;
+
+            span{
+                height: 12px;
+                width: 12px;
+                cursor: pointer;
+                display: block;
+                border: 1px solid rgba(0, 0, 0, 0.2);
+            }
+        }
+
+        &:hover, &.selected {
+            border-color: #000;
+            em span {
+                border-color: #fff;
+            }
+        }
+    }
+
+    .color-transparent {
+        background-position: @nocolor-offset-x @nocolor-offset-y;
+
+        em span {
+            border:solid 1px #C0C0C0;
+        }
+    }
 }
\ No newline at end of file

apps/spreadsheeteditor/main/resources/less/filterdialog.less

@@ -2,7 +2,7 @@
 
   .combo-values {
     width: 100%;
-    height: 265px;
+    height: 187px;
     overflow: hidden;
 
     .list-item {
@@ -53,6 +53,16 @@
       }
     }
 
+    #menu-container-filters > .dropdown-menu {
+        position: inherit !important;
+        left: 0 !important;
+        top: 0 !important;
+        width: 100%;
+        display: inline-block;
+        .box-shadow(none);
+        border: none;
+    }
+    
     .btn-placeholder {
       //        background-color: red;
       display: inline-block;