@easyquery/ui 7.3.0-rc01 → 7.3.0-rc03

package/dist/assets/css/easyquery-mobile.css

@@ -209,10 +209,9 @@
 }
 
 .eqjs-mobile .eqjs-qp-valueelement input[type="text"] {
-    top: auto;
-    bottom: auto;
+    top: 0;
+    bottom: 0;
     width: 100%;
-    height: 1.2rem;
     left: 0;
 }
 
@@ -264,4 +263,8 @@
     height: 22px;
 }
 
-/* QueryPanel end */
+/* ColumnsPanel end */
+
+.eqjs-qp-panel.eqjs-mobile *:focus, .eqjs-qc-panel.eqjs-mobile *:focus, .eqjs-ep-panel.eqjs-mobile *:focus, .eqjs-cb-panel.eqjs-mobile *:focus, .eqjs-grb-panel.eqjs-mobile *:focus {
+    border: none;
+}

package/dist/assets/css/easyquery.css

@@ -198,7 +198,7 @@ body {
 }
 
 .eqjs-qp-condelement {
-    margin: 5px 8px 0 0;
+    margin: 4px 8px 2px 0;
     padding: 1px;
     vertical-align: top;
     font-size: 14px;
@@ -316,7 +316,6 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    display: inline-block;
 }
 
 .eqjs-qp-valueelement input[type="text"]{

package/dist/assets/css/easyquery.ui.css

@@ -2434,7 +2434,7 @@ body {
 }
 
 .eqjs-qp-condelement {
-    margin: 5px 8px 0 0;
+    margin: 4px 8px 2px 0;
     padding: 1px;
     vertical-align: top;
     font-size: 14px;
@@ -2554,7 +2554,6 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    display: inline-block;
 }
 
 .eqjs-qp-valueelement input[type="text"]{
@@ -3980,10 +3979,9 @@ input.eqjs-invalid {
 }
 
 .eqjs-mobile .eqjs-qp-valueelement input[type="text"] {
-    top: auto;
-    bottom: auto;
+    top: 0;
+    bottom: 0;
     width: 100%;
-    height: 1.2rem;
     left: 0;
 }
 
@@ -4035,7 +4033,12 @@ input.eqjs-invalid {
     height: 22px;
 }
 
-/* QueryPanel end */
+/* ColumnsPanel end */
+
+.eqjs-qp-panel.eqjs-mobile *:focus, .eqjs-qc-panel.eqjs-mobile *:focus, .eqjs-ep-panel.eqjs-mobile *:focus, .eqjs-cb-panel.eqjs-mobile *:focus, .eqjs-grb-panel.eqjs-mobile *:focus {
+    border: none;
+}
+
 /* EasyChart START */
 
 .eqjs-chart-header {
@@ -4630,7 +4633,8 @@ input.eqjs-invalid {
 /* AggregationBar Widget END */
 
 :root {
-    --column-panel-expr-block-size: 180px;
+    --column-panel-expr-block-size: 220px;
+    --column-panel-attr-size: 100px;
     --column-panel-caption-size: 100px;
     --tool-button-width: 22px;
     --tool-button-height: 22px;
@@ -4641,18 +4645,17 @@ input.eqjs-invalid {
 .eqjs-qp-condition-buttonsBlock {
     background-color: var(--button-block-background);
     border-radius: 0;
-    padding: 0 4px;
+    padding: 0;
     position: absolute;
     right: 0;
-    top: 1px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     /*border: 1px solid red;*/
+    top: 4px;
 }
 
 .eqjs-qp-condition-buttonsBlock {
-    top: 4px;
 }
 
 .eqjs-qc-column-checkbox:hover,
@@ -4741,9 +4744,10 @@ input.eqjs-invalid {
 .eqjs-qc-row,
 .eqjs-qp-row {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     min-height: auto;
-    line-height: 1.4;
+    /*line-height: 1.4;*/
     overflow: hidden;
     flex-shrink: 0;
 }
@@ -4772,41 +4776,88 @@ input.eqjs-invalid {
     visibility: hidden;
 }
 
+.eqjs-buttons-in-block-1.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 1 + 2px);}
+.eqjs-buttons-in-block-2.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 2 + 2px);}
+.eqjs-buttons-in-block-3.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 3 + 2px);}
+.eqjs-buttons-in-block-4.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 4 + 2px);}
+.eqjs-buttons-in-block-5.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 5 + 2px);}
+
 .eqjs-qc-row.eqjs-qc-disabled[data-show-buttons] {
     padding-right: 60px!important;
 }
 
-.eqjs-qc-row[data-show-buttons] {
+
+.eqjs-qc-header {
     padding-right: 100px;
 }
 
+.eqjs-qc-header.eqjs-no-buttons {
+    padding-right: 0;
+}
+
+
 .eqjs-qc-expr-block {
     flex-basis: var(--column-panel-expr-block-size);
-    min-width: var(--column-panel-expr-block-size);
+    min-width: var(--column-panel-attr-size);
     white-space: nowrap;
     margin-left: 10px;
     flex-shrink: 1;
     overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.eqjs-qc-expr-block > * {
+    margin: 0 2px!important;
 }
 
 .eqjs-qc-expr-block a, .eqjs-qc-expr-block a:hover {
     border-bottom: none;
 }
 
-.eqjs-qc-captionelement {
+.eqjs-qc-captionelement, .eqjs-qp-valueelement {
     margin-left: 10px;
     flex-shrink: 1;
     flex-grow: 1;
     width: var(--column-panel-caption-size);
     min-width: 0;
     overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
 }
 
-.eqjs-qc-captionelement a {
+.eqjs-qc-attrelement, .eqjs-qp-attrelement, .eqjs-qp-operelement {
+    margin-left: 0;
+    flex-shrink: 1;
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: var(--column-panel-attr-size);
+    flex-basis: var(--column-panel-expr-block-size);
+}
+
+.eqjs-qc-captionelement a,
+.eqjs-qc-captionelement span,
+.eqjs-qc-attrelement a,
+.eqjs-qp-attrelement a,
+.eqjs-qp-valueelement a,
+.eqjs-qp-operelement a
+{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-block;
+    display: block;
+    align-items: center;
+    border: 1px solid transparent;
+    padding: 0 2px;
 }
 
 .eqjs-qc-captionelement a, .eqjs-qc-captionelement a:hover {
@@ -4825,13 +4876,12 @@ input.eqjs-invalid {
 
 .eqjs-qc-sortbutton-placeholder {
     left: 24px;
-    top: 1px;
+    top: 3px;
 }
 
 .eqjs-button-placeholder {
     width: var(--tool-button-width);
     height: var(--tool-button-height);
-    margin: 2px;
 }
 
 .eqjs-button-placeholder:hover,
@@ -4858,13 +4908,6 @@ input.eqjs-invalid {
     overflow: hidden;
 }
 
-.eqjs-qc-header {
-    padding-right: 100px;
-}
-
-.eqjs-qc-header.eqjs-no-buttons {
-    padding-right: 0;
-}
 
 .eqjs-qc-header-expression {
     margin-left: 20px;
@@ -4875,8 +4918,8 @@ input.eqjs-invalid {
 .eqjs-qc-header-title {
     flex-shrink: 0;
     flex-grow: 1;
-    width: calc(var(--column-panel-caption-size) + 24px);
-    margin-left: 10px;
+    width: var(--column-panel-caption-size);
+    margin-left: 2px;
     display: inline-block;
 }
 
@@ -4893,10 +4936,55 @@ input.eqjs-invalid {
     max-height: 250px;
 }
 
-.eqjs-button {
-    /*border: 1px solid red;*/
+.eqjs-qc-colelement {
+    margin: 0;
+}
+
+.eqjs-qc-captionelement {
+    padding: 0!important;
 }
 
+.eqjs-qc-captionelement a, .eqjs-qc-expr-block > div {
+    height: 18px;
+}
+
+.eqjs-qc-captionelement a {
+    top: -1px;
+}
+
+.eqjs-qp-row {
+    padding-right: 66px;
+    flex-wrap: nowrap;
+    /*min-width: 360px;*/
+}
+
+.eqjs-qp-attrelement {
+    max-width: 180px;
+}
+
+.eqjs-qp-valueelement {
+    min-width: 50px!important;
+}
+
+.eqjs-qp-operelement {
+    max-width: 80px;
+    min-width: 50px!important;
+}
+
+.eqjs-qp-disabled span, .eqjs-qc-disabled span {
+    margin-bottom: 0;
+}
+
+/* Debug styles */
+
+/*.eqjs-qc-row {*/
+/*    border: 1px solid blue;*/
+/*}*/
+
+/*.eqjs-qc-expr-block a, .eqjs-qc-captionelement a {*/
+/*    border: 1px solid red!important;*/
+/*}*/
+
 /* Mobile */
 .eqjs-qc-row.eqjs-mobile, .eqjs-qp-row.eqjs-mobile {
     padding: 4px 8px;

package/dist/assets/css/upgrade.css

@@ -1,5 +1,6 @@
 :root {
-    --column-panel-expr-block-size: 180px;
+    --column-panel-expr-block-size: 220px;
+    --column-panel-attr-size: 100px;
     --column-panel-caption-size: 100px;
     --tool-button-width: 22px;
     --tool-button-height: 22px;
@@ -10,18 +11,17 @@
 .eqjs-qp-condition-buttonsBlock {
     background-color: var(--button-block-background);
     border-radius: 0;
-    padding: 0 4px;
+    padding: 0;
     position: absolute;
     right: 0;
-    top: 1px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     /*border: 1px solid red;*/
+    top: 4px;
 }
 
 .eqjs-qp-condition-buttonsBlock {
-    top: 4px;
 }
 
 .eqjs-qc-column-checkbox:hover,
@@ -110,9 +110,10 @@
 .eqjs-qc-row,
 .eqjs-qp-row {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     min-height: auto;
-    line-height: 1.4;
+    /*line-height: 1.4;*/
     overflow: hidden;
     flex-shrink: 0;
 }
@@ -141,41 +142,88 @@
     visibility: hidden;
 }
 
+.eqjs-buttons-in-block-1.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 1 + 2px);}
+.eqjs-buttons-in-block-2.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 2 + 2px);}
+.eqjs-buttons-in-block-3.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 3 + 2px);}
+.eqjs-buttons-in-block-4.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 4 + 2px);}
+.eqjs-buttons-in-block-5.eqjs-qc-row[data-show-buttons] {padding-right: calc(var(--tool-button-width) * 5 + 2px);}
+
 .eqjs-qc-row.eqjs-qc-disabled[data-show-buttons] {
     padding-right: 60px!important;
 }
 
-.eqjs-qc-row[data-show-buttons] {
+
+.eqjs-qc-header {
     padding-right: 100px;
 }
 
+.eqjs-qc-header.eqjs-no-buttons {
+    padding-right: 0;
+}
+
+
 .eqjs-qc-expr-block {
     flex-basis: var(--column-panel-expr-block-size);
-    min-width: var(--column-panel-expr-block-size);
+    min-width: var(--column-panel-attr-size);
     white-space: nowrap;
     margin-left: 10px;
     flex-shrink: 1;
     overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.eqjs-qc-expr-block > * {
+    margin: 0 2px!important;
 }
 
 .eqjs-qc-expr-block a, .eqjs-qc-expr-block a:hover {
     border-bottom: none;
 }
 
-.eqjs-qc-captionelement {
+.eqjs-qc-captionelement, .eqjs-qp-valueelement {
     margin-left: 10px;
     flex-shrink: 1;
     flex-grow: 1;
     width: var(--column-panel-caption-size);
     min-width: 0;
     overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
 }
 
-.eqjs-qc-captionelement a {
+.eqjs-qc-attrelement, .eqjs-qp-attrelement, .eqjs-qp-operelement {
+    margin-left: 0;
+    flex-shrink: 1;
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: var(--column-panel-attr-size);
+    flex-basis: var(--column-panel-expr-block-size);
+}
+
+.eqjs-qc-captionelement a,
+.eqjs-qc-captionelement span,
+.eqjs-qc-attrelement a,
+.eqjs-qp-attrelement a,
+.eqjs-qp-valueelement a,
+.eqjs-qp-operelement a
+{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-block;
+    display: block;
+    align-items: center;
+    border: 1px solid transparent;
+    padding: 0 2px;
 }
 
 .eqjs-qc-captionelement a, .eqjs-qc-captionelement a:hover {
@@ -194,13 +242,12 @@
 
 .eqjs-qc-sortbutton-placeholder {
     left: 24px;
-    top: 1px;
+    top: 3px;
 }
 
 .eqjs-button-placeholder {
     width: var(--tool-button-width);
     height: var(--tool-button-height);
-    margin: 2px;
 }
 
 .eqjs-button-placeholder:hover,
@@ -227,13 +274,6 @@
     overflow: hidden;
 }
 
-.eqjs-qc-header {
-    padding-right: 100px;
-}
-
-.eqjs-qc-header.eqjs-no-buttons {
-    padding-right: 0;
-}
 
 .eqjs-qc-header-expression {
     margin-left: 20px;
@@ -244,8 +284,8 @@
 .eqjs-qc-header-title {
     flex-shrink: 0;
     flex-grow: 1;
-    width: calc(var(--column-panel-caption-size) + 24px);
-    margin-left: 10px;
+    width: var(--column-panel-caption-size);
+    margin-left: 2px;
     display: inline-block;
 }
 
@@ -262,10 +302,55 @@
     max-height: 250px;
 }
 
-.eqjs-button {
-    /*border: 1px solid red;*/
+.eqjs-qc-colelement {
+    margin: 0;
+}
+
+.eqjs-qc-captionelement {
+    padding: 0!important;
+}
+
+.eqjs-qc-captionelement a, .eqjs-qc-expr-block > div {
+    height: 18px;
 }
 
+.eqjs-qc-captionelement a {
+    top: -1px;
+}
+
+.eqjs-qp-row {
+    padding-right: 66px;
+    flex-wrap: nowrap;
+    /*min-width: 360px;*/
+}
+
+.eqjs-qp-attrelement {
+    max-width: 180px;
+}
+
+.eqjs-qp-valueelement {
+    min-width: 50px!important;
+}
+
+.eqjs-qp-operelement {
+    max-width: 80px;
+    min-width: 50px!important;
+}
+
+.eqjs-qp-disabled span, .eqjs-qc-disabled span {
+    margin-bottom: 0;
+}
+
+/* Debug styles */
+
+/*.eqjs-qc-row {*/
+/*    border: 1px solid blue;*/
+/*}*/
+
+/*.eqjs-qc-expr-block a, .eqjs-qc-captionelement a {*/
+/*    border: 1px solid red!important;*/
+/*}*/
+
 /* Mobile */
 .eqjs-qc-row.eqjs-mobile, .eqjs-qp-row.eqjs-mobile {
     padding: 4px 8px;

package/dist/easyquery.ui.cjs.js

@@ -1992,13 +1992,15 @@ class ColumnRendererCP {
             //start sort button
             .addChild('div', builder => builder
             .addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
-            .addChildElement(this.sortingButton))
-            // end sort button
-            .addChildElement(this.renderExpressionBlock());
+            .addChildElement(this.sortingButton));
+        // end sort button
+        builder.addChildElement(this.renderExpressionBlock());
         if (this.panel.options.showColumnTitles !== false && !ui.browserUtils.isMobileMode()) {
             builder
                 .addChildElement(this.renderCaptionBlock());
         }
+        let buttonsIndex = 0;
+        let buttonsList = '';
         builder
             //start buttons
             .addChild('div', builder => {
@@ -2008,30 +2010,42 @@ class ColumnRendererCP {
             //start enable button
             if (this.getButtonsToShow().indexOf("enable") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderEnabledButton());
+                buttonsIndex++;
+                buttonsList += 'Enable';
             }
             //end enable button
             //start aggr func button
             if (this.getButtonsToShow().indexOf("type") >= 0 && this.columnEnabled) {
                 builder.addChildElement(this.renderColumnTypeButton());
+                buttonsIndex++;
+                buttonsList += 'Type';
             }
             //end aggr func button
             //start format selector button
             if (this.getButtonsToShow().indexOf("format") >= 0 && this.columnEnabled) {
                 builder.addChildElement(this.renderColumnFormatButton());
+                buttonsIndex++;
+                buttonsList += 'Format';
             }
             //end format selector button
             //start delete button
             if (this.getButtonsToShow().indexOf("delete") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderDeleteButton());
+                buttonsIndex++;
+                buttonsList += 'Delete';
             }
             //end delete button
             //start menu button
             if (this.getButtonsToShow().indexOf("menu") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderMenuButton());
+                buttonsIndex++;
+                buttonsList += 'Menu';
             }
             //end menu button
         });
         //end buttons
+        builder.addClass(`eqjs-buttons-in-block-${buttonsIndex}`);
+        builder.addClass(`eqjs-buttons-in-block-${buttonsList}`);
         if (!ui.browserUtils.isMobileMode()) {
             //start event listeners
             builder
@@ -2053,12 +2067,15 @@ class ColumnRendererCP {
     }
     onMouseClick(ev) {
         ev.stopPropagation();
+        this.activate();
+        return false;
+    }
+    activate() {
         this.panel.toggleColumnPicked(this.column);
         this.adjustButtonsVisibility();
         if (!ui.browserUtils.isMobileMode()) {
             this.element.dispatchEvent(ui.createBrowserEvent("mouseenter"));
         }
-        return false;
     }
     fireColumnChanged() {
         this.column.fireChangedEvent();
@@ -2078,6 +2095,7 @@ class ColumnRendererCP {
                 .text(this.column.caption)
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 const element = ev.target;
                 const inputEl = element.parentElement.querySelector('input');
                 if (inputEl) {
@@ -2152,7 +2170,7 @@ class ColumnRendererCP {
                 sortButtonDirectionCssClass = `${sortButtonCssClass}-none`;
                 break;
         }
-        if (!this.isEditable()) {
+        if (!this.isEditable() || ui.browserUtils.isMobileMode()) {
             if (sorting === core.SortDirection.Ascending
                 || sorting === core.SortDirection.Descending)
                 return ui.domel('div')
@@ -2168,11 +2186,12 @@ class ColumnRendererCP {
             .attr('tabIndex', '0')
             .on('click', (ev) => {
             ev.stopPropagation();
+            this.activate();
             this.keepShowingButtons = true;
             const menu = this.getUIS() ? this.panel.sortMenu || this.panel.moveMenu : this.panel.moveMenu;
             menu.showMenu({
                 anchor: this.sortingButton,
-                selectedIds: this.column.isHidden() ? ['IsHidden'] : null,
+                selectedIds: this.getButtonMenuSelectedItems(), // this.column.isHidden() ? ['IsHidden'] : null,
                 itemSelectedCallback: (data, items) => {
                     let action;
                     switch (data.id) {
@@ -2285,6 +2304,7 @@ class ColumnRendererCP {
                 .attr('tabIndex', '0')
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 this.keepShowingButtons = true;
                 this.changeTypeHandler(ev);
             })
@@ -2493,6 +2513,7 @@ class ColumnRendererCP {
                 curQuery.fireColumnsChangedEvent(core.QueryChangeAction.Delete, this.column);
                 break;
             case exports.ColumnAction.Enable:
+                this.activate();
                 this.columnEnabled = !this.columnEnabled;
                 this.fireColumnChanged();
                 break;
@@ -2527,6 +2548,7 @@ class ColumnRendererCP {
             case exports.ColumnAction.Menu:
                 const colMenu = this.buttonMenu;
                 this.keepShowingButtons = true;
+                this.activate();
                 colMenu.showMenu({
                     anchor: evt ? evt.target : null,
                     selectedIds: this.getButtonMenuSelectedItems(),
@@ -2561,7 +2583,7 @@ class ColumnRendererCP {
                                 action = exports.ColumnAction.SortingAsc;
                                 break;
                             case "Descending":
-                                action = exports.ColumnAction.SortingAsc;
+                                action = exports.ColumnAction.SortingDesc;
                                 break;
                         }
                         this.buttonMenuHandler(action, evt);
@@ -2591,26 +2613,26 @@ class ColumnRendererCP {
             if (menuId) {
                 menuId += '-ButtonMenu';
             }
-            const common = [];
-            common.push({
+            const Appearance = [];
+            Appearance.push({
                 id: "enable",
                 text: core.i18n.getText('MenuEnable')
             });
             if (this.panel.options.allowHiddenColumns) {
-                common.push({
+                Appearance.push({
                     id: "hidden",
                     text: core.i18n.getText('CmdHiddenColumn')
                 });
             }
-            common.push({
+            Appearance.push({
                 id: "delete",
                 text: core.i18n.getText('CmdDelete')
             });
             let items = [];
             items.push({
                 id: '__group',
-                text: ' ',
-                items: common
+                text: core.i18n.getText('CmdGroupAppearance'),
+                items: Appearance
             });
             const sortItems = this.panel.options.allowSorting ?
                 [
@@ -2669,6 +2691,17 @@ class ColumnRendererCP {
         if (this.column.isHidden()) {
             arrSelected.push("hidden");
         }
+        switch (this.column.sorting) {
+            case core.SortDirection.None:
+                arrSelected.push("None");
+                break;
+            case core.SortDirection.Ascending:
+                arrSelected.push("Ascending");
+                break;
+            case core.SortDirection.Descending:
+                arrSelected.push("Descending");
+                break;
+        }
         const formats = this.panel
             .getContext()
             .getModel()
@@ -2710,6 +2743,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
                 .text(attrCaption) //TO DO:add localization
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 this.panel.showEntitiesMenu({
                     anchor: ev.target,
                     selectedIds: null,
@@ -2880,6 +2914,7 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                         .text(item.text)
                         .on('click', (ev) => {
                         ev.stopPropagation();
+                        this.activate();
                         this.functionMenu.showMenu({
                             anchor: functionLink.toDOM(),
                             selectedIds: null,
@@ -3558,7 +3593,7 @@ class ColumnsPanel extends core.Widget {
             this.context.options.columnTitleFormat = options.titleElementFormat;
         }
         if (ui.browserUtils.isMobileMode()) {
-            this.options.buttons = ["menu"];
+            this.options.buttons = ["menu", "sorting"];
             this.options.showHeader = false;
         }
     }
@@ -7679,7 +7714,7 @@ class QueryPanel extends core.Widget {
                             }
                         }
                     };
-                    let autoEdit = this.options.autoEditNewCondition;
+                    let autoEdit = this.options.autoEditNewCondition && !ui.browserUtils.isMobileMode();
                     if (Array.isArray(conds)) {
                         conds.forEach((cond) => modifyCondition(cond, autoEdit));
                         autoEdit = false;
@@ -7699,10 +7734,10 @@ class QueryPanel extends core.Widget {
                             if (parentEl) {
                                 const newCondContainer = parentEl.lastChild;
                                 if (newCondContainer) {
-                                    const el = renderer.render(this.options.autoEditNewCondition);
+                                    const el = renderer.render(this.options.autoEditNewCondition && !ui.browserUtils.isMobileMode());
                                     newCondContainer.appendChild(el);
                                     el.scrollIntoView(false);
-                                    if (isFocusInside && !this.options.autoEditNewCondition) {
+                                    if (isFocusInside && (!this.options.autoEditNewCondition || ui.browserUtils.isMobileMode())) {
                                         el.querySelector(`a`).focus();
                                     }
                                 }
@@ -14213,6 +14248,7 @@ function addEasyQueryUITexts() {
         CmdDeleteColumn: 'Delete column',
         CmdDeleteSorting: 'Delete sorting',
         CmdDescending: 'Descending',
+        CmdGroupAppearance: 'Appearance',
         CmdGroupSort: 'Sorting',
         CmdGroupFormat: 'Display format',
         CmdNotSorted: 'Not sorted',

package/dist/easyquery.ui.esm.js

@@ -1990,13 +1990,15 @@ class ColumnRendererCP {
             //start sort button
             .addChild('div', builder => builder
             .addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
-            .addChildElement(this.sortingButton))
-            // end sort button
-            .addChildElement(this.renderExpressionBlock());
+            .addChildElement(this.sortingButton));
+        // end sort button
+        builder.addChildElement(this.renderExpressionBlock());
         if (this.panel.options.showColumnTitles !== false && !browserUtils.isMobileMode()) {
             builder
                 .addChildElement(this.renderCaptionBlock());
         }
+        let buttonsIndex = 0;
+        let buttonsList = '';
         builder
             //start buttons
             .addChild('div', builder => {
@@ -2006,30 +2008,42 @@ class ColumnRendererCP {
             //start enable button
             if (this.getButtonsToShow().indexOf("enable") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderEnabledButton());
+                buttonsIndex++;
+                buttonsList += 'Enable';
             }
             //end enable button
             //start aggr func button
             if (this.getButtonsToShow().indexOf("type") >= 0 && this.columnEnabled) {
                 builder.addChildElement(this.renderColumnTypeButton());
+                buttonsIndex++;
+                buttonsList += 'Type';
             }
             //end aggr func button
             //start format selector button
             if (this.getButtonsToShow().indexOf("format") >= 0 && this.columnEnabled) {
                 builder.addChildElement(this.renderColumnFormatButton());
+                buttonsIndex++;
+                buttonsList += 'Format';
             }
             //end format selector button
             //start delete button
             if (this.getButtonsToShow().indexOf("delete") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderDeleteButton());
+                buttonsIndex++;
+                buttonsList += 'Delete';
             }
             //end delete button
             //start menu button
             if (this.getButtonsToShow().indexOf("menu") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderMenuButton());
+                buttonsIndex++;
+                buttonsList += 'Menu';
             }
             //end menu button
         });
         //end buttons
+        builder.addClass(`eqjs-buttons-in-block-${buttonsIndex}`);
+        builder.addClass(`eqjs-buttons-in-block-${buttonsList}`);
         if (!browserUtils.isMobileMode()) {
             //start event listeners
             builder
@@ -2051,12 +2065,15 @@ class ColumnRendererCP {
     }
     onMouseClick(ev) {
         ev.stopPropagation();
+        this.activate();
+        return false;
+    }
+    activate() {
         this.panel.toggleColumnPicked(this.column);
         this.adjustButtonsVisibility();
         if (!browserUtils.isMobileMode()) {
             this.element.dispatchEvent(createBrowserEvent("mouseenter"));
         }
-        return false;
     }
     fireColumnChanged() {
         this.column.fireChangedEvent();
@@ -2076,6 +2093,7 @@ class ColumnRendererCP {
                 .text(this.column.caption)
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 const element = ev.target;
                 const inputEl = element.parentElement.querySelector('input');
                 if (inputEl) {
@@ -2150,7 +2168,7 @@ class ColumnRendererCP {
                 sortButtonDirectionCssClass = `${sortButtonCssClass}-none`;
                 break;
         }
-        if (!this.isEditable()) {
+        if (!this.isEditable() || browserUtils.isMobileMode()) {
             if (sorting === SortDirection.Ascending
                 || sorting === SortDirection.Descending)
                 return domel('div')
@@ -2166,11 +2184,12 @@ class ColumnRendererCP {
             .attr('tabIndex', '0')
             .on('click', (ev) => {
             ev.stopPropagation();
+            this.activate();
             this.keepShowingButtons = true;
             const menu = this.getUIS() ? this.panel.sortMenu || this.panel.moveMenu : this.panel.moveMenu;
             menu.showMenu({
                 anchor: this.sortingButton,
-                selectedIds: this.column.isHidden() ? ['IsHidden'] : null,
+                selectedIds: this.getButtonMenuSelectedItems(), // this.column.isHidden() ? ['IsHidden'] : null,
                 itemSelectedCallback: (data, items) => {
                     let action;
                     switch (data.id) {
@@ -2283,6 +2302,7 @@ class ColumnRendererCP {
                 .attr('tabIndex', '0')
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 this.keepShowingButtons = true;
                 this.changeTypeHandler(ev);
             })
@@ -2491,6 +2511,7 @@ class ColumnRendererCP {
                 curQuery.fireColumnsChangedEvent(QueryChangeAction.Delete, this.column);
                 break;
             case ColumnAction.Enable:
+                this.activate();
                 this.columnEnabled = !this.columnEnabled;
                 this.fireColumnChanged();
                 break;
@@ -2525,6 +2546,7 @@ class ColumnRendererCP {
             case ColumnAction.Menu:
                 const colMenu = this.buttonMenu;
                 this.keepShowingButtons = true;
+                this.activate();
                 colMenu.showMenu({
                     anchor: evt ? evt.target : null,
                     selectedIds: this.getButtonMenuSelectedItems(),
@@ -2559,7 +2581,7 @@ class ColumnRendererCP {
                                 action = ColumnAction.SortingAsc;
                                 break;
                             case "Descending":
-                                action = ColumnAction.SortingAsc;
+                                action = ColumnAction.SortingDesc;
                                 break;
                         }
                         this.buttonMenuHandler(action, evt);
@@ -2589,26 +2611,26 @@ class ColumnRendererCP {
             if (menuId) {
                 menuId += '-ButtonMenu';
             }
-            const common = [];
-            common.push({
+            const Appearance = [];
+            Appearance.push({
                 id: "enable",
                 text: i18n$1.getText('MenuEnable')
             });
             if (this.panel.options.allowHiddenColumns) {
-                common.push({
+                Appearance.push({
                     id: "hidden",
                     text: i18n$1.getText('CmdHiddenColumn')
                 });
             }
-            common.push({
+            Appearance.push({
                 id: "delete",
                 text: i18n$1.getText('CmdDelete')
             });
             let items = [];
             items.push({
                 id: '__group',
-                text: ' ',
-                items: common
+                text: i18n$1.getText('CmdGroupAppearance'),
+                items: Appearance
             });
             const sortItems = this.panel.options.allowSorting ?
                 [
@@ -2667,6 +2689,17 @@ class ColumnRendererCP {
         if (this.column.isHidden()) {
             arrSelected.push("hidden");
         }
+        switch (this.column.sorting) {
+            case SortDirection.None:
+                arrSelected.push("None");
+                break;
+            case SortDirection.Ascending:
+                arrSelected.push("Ascending");
+                break;
+            case SortDirection.Descending:
+                arrSelected.push("Descending");
+                break;
+        }
         const formats = this.panel
             .getContext()
             .getModel()
@@ -2708,6 +2741,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
                 .text(attrCaption) //TO DO:add localization
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 this.panel.showEntitiesMenu({
                     anchor: ev.target,
                     selectedIds: null,
@@ -2878,6 +2912,7 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                         .text(item.text)
                         .on('click', (ev) => {
                         ev.stopPropagation();
+                        this.activate();
                         this.functionMenu.showMenu({
                             anchor: functionLink.toDOM(),
                             selectedIds: null,
@@ -3556,7 +3591,7 @@ class ColumnsPanel extends Widget {
             this.context.options.columnTitleFormat = options.titleElementFormat;
         }
         if (browserUtils.isMobileMode()) {
-            this.options.buttons = ["menu"];
+            this.options.buttons = ["menu", "sorting"];
             this.options.showHeader = false;
         }
     }
@@ -7677,7 +7712,7 @@ class QueryPanel extends Widget {
                             }
                         }
                     };
-                    let autoEdit = this.options.autoEditNewCondition;
+                    let autoEdit = this.options.autoEditNewCondition && !browserUtils.isMobileMode();
                     if (Array.isArray(conds)) {
                         conds.forEach((cond) => modifyCondition(cond, autoEdit));
                         autoEdit = false;
@@ -7697,10 +7732,10 @@ class QueryPanel extends Widget {
                             if (parentEl) {
                                 const newCondContainer = parentEl.lastChild;
                                 if (newCondContainer) {
-                                    const el = renderer.render(this.options.autoEditNewCondition);
+                                    const el = renderer.render(this.options.autoEditNewCondition && !browserUtils.isMobileMode());
                                     newCondContainer.appendChild(el);
                                     el.scrollIntoView(false);
-                                    if (isFocusInside && !this.options.autoEditNewCondition) {
+                                    if (isFocusInside && (!this.options.autoEditNewCondition || browserUtils.isMobileMode())) {
                                         el.querySelector(`a`).focus();
                                     }
                                 }
@@ -14211,6 +14246,7 @@ function addEasyQueryUITexts() {
         CmdDeleteColumn: 'Delete column',
         CmdDeleteSorting: 'Delete sorting',
         CmdDescending: 'Descending',
+        CmdGroupAppearance: 'Appearance',
         CmdGroupSort: 'Sorting',
         CmdGroupFormat: 'Display format',
         CmdNotSorted: 'Not sorted',

package/dist/types/widgets/renderers/columnspanel/column_renderer_cp.d.ts

@@ -32,6 +32,7 @@ export declare abstract class ColumnRendererCP {
     protected set columnEnabled(value: boolean);
     render(): HTMLDivElement;
     private onMouseClick;
+    activate(): void;
     fireColumnChanged(): void;
     refresh(): void;
     protected abstract renderExpressionBlock(): HTMLDivElement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.3.0-rc01",
+    "version": "7.3.0-rc03",
     "description": "EasyQuery.JS Community UI widgets",
     "types": "./dist/types/public_api.d.ts",
     "main": "./dist/easyquery.ui.cjs.js",
@@ -30,7 +30,7 @@
     "bugs": "https://korzh.com/support",
     "license": "LGPL-3.0",
     "peerDependencies": {
-        "@easyquery/core": "^7.3.0-rc01"
+        "@easyquery/core": "^7.3.0-rc03"
     },
     "files": [
         "dist",