Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Show sigma next to summary table titles

Browse Source 
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
This commit is contained in:
George Gevoian 2021-07-08 11:52:51 -07:00
parent 9592e3610b
commit 5d461a4df2
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/components/ViewLayout.css
View File

@ -9,7 +9,6 @@
.viewsection_title { .viewsection_title {
flex-shrink: 0; flex-shrink: 0;
align-items: baseline;
cursor: default; cursor: default;
height: 24px; height: 24px;
margin-left: -16px; /* to include drag handle that shows up on hover */ margin-left: -16px; /* to include drag handle that shows up on hover */
@ -24,6 +23,9 @@
cursor: text; cursor: text;
overflow: hidden; overflow: hidden;
} }
.viewsection_titletext_container {
height: max-content;
}
.viewsection_content { .viewsection_content {
background-color: #ffffff; background-color: #ffffff;
@ -42,7 +44,7 @@
/* TODO should be switched to use new icon */ /* TODO should be switched to use new icon */
.viewsection_drag_indicator { .viewsection_drag_indicator {
visibility: hidden; visibility: hidden;
top: 0px; top: 1px;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin: 0; margin: 0;

15
app/client/components/ViewLayout.ts
View File

@ -22,6 +22,7 @@ import {computedArray, Disposable, dom, fromKo, Holder, IDomComponent, styled, s
import {Observable} from 'grainjs'; import {Observable} from 'grainjs';
import * as ko from 'knockout'; import * as ko from 'knockout';
import * as _ from 'underscore'; import * as _ from 'underscore';
import {icon} from 'app/client/ui2018/icons';
// tslint:disable:no-console // tslint:disable:no-console
@ -187,18 +188,20 @@ export class ViewLayout extends DisposableWithEvents implements IDomComponent {
cssViewLeafInactive.cls('', (use) => !vs.isDisposed() && !use(vs.hasFocus)), cssViewLeafInactive.cls('', (use) => !vs.isDisposed() && !use(vs.hasFocus)),
dom.cls('active_section', 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', dom('span.viewsection_drag_indicator.glyphicon.glyphicon-option-vertical',
// Makes element grabbable only if grist is not readonly. // Makes element grabbable only if grist is not readonly.
dom.cls('layout_grabbable', (use) => !use(this.gristDoc.isReadonlyKo))), 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( dom('span.viewsection_titletext', editableLabel(
fromKo(vs.titleDef), fromKo(vs.titleDef),
(val) => vs.titleDef.saveOnly(val), (val) => vs.titleDef.saveOnly(val),
testId('viewsection-title'), testId('viewsection-title'),
)), )),
), ),
dom.maybe<BaseView|null>(vs.viewInstance, (viewInstance: BaseView) => viewInstance.buildTitleControls()), viewInstance.buildTitleControls(),
dom('span.viewsection_buttons', dom('span.viewsection_buttons',
dom.create(viewSectionMenu, this.docModel, vs, this.viewModel, this.gristDoc.isReadonly) 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', ` const cssViewLeaf = styled('div', `
@media ${mediaSmall} { @media ${mediaSmall} {
& { & {