UI improvements (#2238)
* Layout grid * Changelog notes * License headers * Get rid of fixed layot in nested components * Multiple grids * Multiple grids HF * Grid use react-hotkeys * Cleanup and test fix * Version up * Notifications overlay fixmain
Vitaliy Nishukov
5 years ago
committed by
GitHub
parent
a222741f6b
commit
a781e1cee1
@ -0,0 +1,35 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { GlobalHotKeys } from 'react-hotkeys';
|
||||
import './styles.scss';
|
||||
|
||||
const LayoutGrid = (): React.ReactPortal => {
|
||||
const [showGrid, setShowGrid] = useState(false);
|
||||
|
||||
const keyMap = {
|
||||
TOGGLE_LAYOUT_GRID: 'ctrl+alt+enter',
|
||||
};
|
||||
|
||||
const toggleLayoutGrid = useCallback((): void => {
|
||||
setShowGrid((prevState: boolean) => !prevState);
|
||||
}, [showGrid]);
|
||||
|
||||
const handlers = {
|
||||
TOGGLE_LAYOUT_GRID: toggleLayoutGrid,
|
||||
};
|
||||
|
||||
const portalContent: JSX.Element = (
|
||||
<GlobalHotKeys keyMap={keyMap} handlers={handlers}>
|
||||
{showGrid && <div className='grid sm' />}
|
||||
{showGrid && <div className='grid lg' />}
|
||||
</GlobalHotKeys>
|
||||
);
|
||||
|
||||
return ReactDOM.createPortal(portalContent, document.getElementById('layout-grid') as HTMLElement);
|
||||
};
|
||||
|
||||
export default LayoutGrid;
|
||||
@ -0,0 +1,49 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import './../../base.scss';
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
grid-template-rows: repeat(1000, $layout-sm-grid-size);
|
||||
grid-template-columns: repeat(1000, $layout-sm-grid-size);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: linear-gradient(to right, $layout-sm-grid-color 1px, transparent 1px);
|
||||
background-size: $layout-sm-grid-size;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.lg {
|
||||
grid-template-rows: repeat(1000, $layout-lg-grid-size);
|
||||
grid-template-columns: repeat(1000, $layout-lg-grid-size);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: linear-gradient(to right, $layout-lg-grid-color 1px, transparent 1px);
|
||||
background-size: $layout-lg-grid-size;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue