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

Fix drag icon for view layout

Browse Source
This commit is contained in:
Louis Delbosc 2022-10-26 11:21:27 +02:00
parent eea2ef5cfb
commit 763c191dd8
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,21 +24,6 @@
background-color: var(--grist-theme-widget-bg, white); background-color: var(--grist-theme-widget-bg, white);
} }
/* TODO should be switched to use new icon */
.viewsection_drag_indicator {
visibility: hidden;
top: 1px;
width: 16px;
height: 16px;
margin: 0;
padding: 0px;
}
.viewsection_title:hover .viewsection_drag_indicator.layout_grabbable {
visibility: visible;
z-index: 100; /* ensure it's above the resizer line, since it's hard to grab otherwise */
}
.viewsection_btn { .viewsection_btn {
display: inline-block; display: inline-block;
padding: 0px 4px; padding: 0px 4px;

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

@ -15,7 +15,7 @@ import {reportError} from 'app/client/models/errors';
import {filterBar} from 'app/client/ui/FilterBar'; import {filterBar} from 'app/client/ui/FilterBar';
import {viewSectionMenu} from 'app/client/ui/ViewSectionMenu'; import {viewSectionMenu} from 'app/client/ui/ViewSectionMenu';
import {buildWidgetTitle} from 'app/client/ui/WidgetTitle'; import {buildWidgetTitle} from 'app/client/ui/WidgetTitle';
import {isNarrowScreenObs, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars'; import {isNarrowScreenObs, colors, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons'; import {icon} from 'app/client/ui2018/icons';
import {DisposableWithEvents} from 'app/common/DisposableWithEvents'; import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
import {mod} from 'app/common/gutil'; import {mod} from 'app/common/gutil';
@ -294,7 +294,8 @@ export function buildViewSectionDom(options: {
dom.cls('active_section', vs.hasFocus), dom.cls('active_section', vs.hasFocus),
dom.cls('active_section--no-indicator', !focusable), dom.cls('active_section--no-indicator', !focusable),
dom.maybe<BaseView|null>((use) => use(vs.viewInstance), (viewInstance) => 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', cssDragIcon('DragDrop',
dom.cls("viewsection_drag_indicator"),
// Makes element grabbable only if grist is not readonly. // Makes element grabbable only if grist is not readonly.
dom.cls('layout_grabbable', (use) => !use(gristDoc.isReadonlyKo)), dom.cls('layout_grabbable', (use) => !use(gristDoc.isReadonlyKo)),
!draggable ? dom.style("visibility", "hidden") : null !draggable ? dom.style("visibility", "hidden") : null
@ -416,6 +417,18 @@ const cssLayoutBox = styled('div', `
} }
`); `);
// z-index ensure it's above the resizer line, since it's hard to grab otherwise
const cssDragIcon = styled(icon, `
visibility: hidden;
--icon-color: ${colors.slate};
top: -1px;
z-index: 100;
.viewsection_title:hover &.layout_grabbable {
visibility: visible;
}
`);
// This class is added while sections are being resized (or otherwise edited), to ensure that the // This class is added while sections are being resized (or otherwise edited), to ensure that the
// content of the section (such as an iframe) doesn't interfere with mouse drag-related events. // content of the section (such as an iframe) doesn't interfere with mouse drag-related events.
// (It assumes that contained elements do not set pointer-events to another value; if that were // (It assumes that contained elements do not set pointer-events to another value; if that were