mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
Merge pull request #327 from incubateur-territoires/change-drag-icon-view-layout
Fix drag icon for view layout
This commit is contained in:
commit
8cdddda237
@ -24,21 +24,6 @@
|
||||
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 {
|
||||
display: inline-block;
|
||||
padding: 0px 4px;
|
||||
|
@ -15,7 +15,7 @@ import {reportError} from 'app/client/models/errors';
|
||||
import {filterBar} from 'app/client/ui/FilterBar';
|
||||
import {viewSectionMenu} from 'app/client/ui/ViewSectionMenu';
|
||||
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 {DisposableWithEvents} from 'app/common/DisposableWithEvents';
|
||||
import {mod} from 'app/common/gutil';
|
||||
@ -294,7 +294,8 @@ export function buildViewSectionDom(options: {
|
||||
dom.cls('active_section', vs.hasFocus),
|
||||
dom.cls('active_section--no-indicator', !focusable),
|
||||
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.
|
||||
dom.cls('layout_grabbable', (use) => !use(gristDoc.isReadonlyKo)),
|
||||
!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
|
||||
// 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
|
||||
|
Loading…
Reference in New Issue
Block a user