From 5d461a4df2e58b1927b62476c3f7ac90f340616e Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Thu, 8 Jul 2021 11:52:51 -0700
Subject: [PATCH] (core) Show sigma next to summary table titles

Summary:
The sigma icon appears to the left of the table title
if the table is a summary table.

Test Plan: Updated browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D2895
---
 app/client/components/ViewLayout.css |  6 ++++--
 app/client/components/ViewLayout.ts  | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/client/components/ViewLayout.css b/app/client/components/ViewLayout.css
index aeb7af22..511f91e5 100644
--- a/app/client/components/ViewLayout.css
+++ b/app/client/components/ViewLayout.css
@@ -9,7 +9,6 @@
 
 .viewsection_title {
   flex-shrink: 0;
-  align-items: baseline;
   cursor: default;
   height: 24px;
   margin-left: -16px;   /* to include drag handle that shows up on hover */
@@ -24,6 +23,9 @@
   cursor: text;
   overflow: hidden;
 }
+.viewsection_titletext_container {
+  height: max-content;
+}
 
 .viewsection_content {
   background-color: #ffffff;
@@ -42,7 +44,7 @@
 /* TODO should be switched to use new icon */
 .viewsection_drag_indicator {
   visibility: hidden;
-  top: 0px;
+  top: 1px;
   width: 16px;
   height: 16px;
   margin: 0;
diff --git a/app/client/components/ViewLayout.ts b/app/client/components/ViewLayout.ts
index bb9134b2..a15ede1f 100644
--- a/app/client/components/ViewLayout.ts
+++ b/app/client/components/ViewLayout.ts
@@ -22,6 +22,7 @@ import {computedArray, Disposable, dom, fromKo, Holder, IDomComponent, styled, s
 import {Observable} from 'grainjs';
 import * as ko from 'knockout';
 import * as _ from 'underscore';
+import {icon} from 'app/client/ui2018/icons';
 
 // tslint:disable:no-console
 
@@ -187,18 +188,20 @@ export class ViewLayout extends DisposableWithEvents implements IDomComponent {
       cssViewLeafInactive.cls('', (use) => !vs.isDisposed() && !use(vs.hasFocus)),
       dom.cls('active_section', vs.hasFocus),
 
-      dom.maybe((use) => use(vs.viewInstance) !== null, () => dom('div.viewsection_title.flexhbox',
+      dom.maybe<BaseView|null>((use) => use(vs.viewInstance), (viewInstance) => dom('div.viewsection_title.flexhbox',
         dom('span.viewsection_drag_indicator.glyphicon.glyphicon-option-vertical',
           // Makes element grabbable only if grist is not readonly.
           dom.cls('layout_grabbable', (use) => !use(this.gristDoc.isReadonlyKo))),
-        dom('div.flexitem.flexhbox',
+        dom.maybe((use) => use(use(viewInstance.viewSection.table).summarySourceTable), () =>
+          cssSigmaIcon('Pivot', testId('sigma'))),
+        dom('div.viewsection_titletext_container.flexitem.flexhbox',
           dom('span.viewsection_titletext', editableLabel(
             fromKo(vs.titleDef),
             (val) => vs.titleDef.saveOnly(val),
             testId('viewsection-title'),
           )),
         ),
-        dom.maybe<BaseView|null>(vs.viewInstance, (viewInstance: BaseView) => viewInstance.buildTitleControls()),
+        viewInstance.buildTitleControls(),
         dom('span.viewsection_buttons',
           dom.create(viewSectionMenu, this.docModel, vs, this.viewModel, this.gristDoc.isReadonly)
         )
@@ -299,6 +302,12 @@ export class ViewLayout extends DisposableWithEvents implements IDomComponent {
   }
 }
 
+const cssSigmaIcon = styled(icon, `
+  bottom: 1px;
+  margin-right: 5px;
+  background-color: ${colors.slate}
+`);
+
 const cssViewLeaf = styled('div', `
   @media ${mediaSmall} {
     & {