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) Adjust the style of the 'attic' to have more of a toolbar feel, flush to the top, and taking up less space

Browse Source 
Test Plan: Checked new looks manually, behavior should not be affected.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3934
This commit is contained in:
Dmitry S 2023-06-29 10:44:37 -04:00
parent bb7cf6ba20
commit 4ea748b1a3
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/components/GristDoc.ts
View File

@ -1578,13 +1578,14 @@ async function finalizeAnchor() {
} }
const cssViewContentPane = styled('div', ` const cssViewContentPane = styled('div', `
--view-content-page-margin: 12px;
flex: auto; flex: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: visible; overflow: visible;
position: relative; position: relative;
min-width: 240px; min-width: 240px;
margin: 12px; margin: var(--view-content-page-margin, 12px);
@media ${mediaSmall} { @media ${mediaSmall} {
& { & {
margin: 4px; margin: 4px;

16
app/client/components/LayoutTray.ts
View File

@ -1164,7 +1164,7 @@ const cssFloaterWrapper = styled('div', `
max-width: 140px; max-width: 140px;
background: ${theme.tableBodyBg}; background: ${theme.tableBodyBg};
border: 1px solid ${theme.widgetBorder}; border: 1px solid ${theme.widgetBorder};
border-radius: 3px; border-radius: 4px;
-webkit-transform: rotate(5deg) scale(0.8) translate(-10px, 0px); -webkit-transform: rotate(5deg) scale(0.8) translate(-10px, 0px);
transform: rotate(5deg) scale(0.8) translate(-10px, 0px); transform: rotate(5deg) scale(0.8) translate(-10px, 0px);
& .mini_section_container { & .mini_section_container {
@ -1174,16 +1174,17 @@ const cssFloaterWrapper = styled('div', `
`); `);
const cssCollapsedTray = styled('div.collapsed_layout', ` const cssCollapsedTray = styled('div.collapsed_layout', `
border-radius: 3px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 3px;
display: flex;
overflow: hidden; overflow: hidden;
transition: height 0.2s; transition: height 0.2s;
position: relative; position: relative;
margin-bottom: 10px; margin: calc(-1 * var(--view-content-page-margin, 12px));
margin-bottom: 0;
user-select: none; user-select: none;
background-color: ${theme.pageBg};
border-bottom: 1px solid ${theme.pagePanelsBorder};
outline-offset: -1px;
&-is-active { &-is-active {
outline: 2px dashed ${theme.widgetBorder}; outline: 2px dashed ${theme.widgetBorder};
@ -1197,8 +1198,9 @@ const cssCollapsedTray = styled('div.collapsed_layout', `
const cssRow = styled('div', `display: flex`); const cssRow = styled('div', `display: flex`);
const cssLayout = styled(cssRow, ` const cssLayout = styled(cssRow, `
padding: 12px; padding: 8px 24px;
gap: 10px; column-gap: 16px;
row-gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
`); `);

1
app/client/components/buildViewSectionDom.ts
View File

@ -195,7 +195,6 @@ const cssResizing = styled('div', `
const cssMiniSection = styled('div.mini_section_container', ` const cssMiniSection = styled('div.mini_section_container', `
--icon-color: ${colors.lightGreen}; --icon-color: ${colors.lightGreen};
display: flex; display: flex;
background: ${theme.mainPanelBg};
align-items: center; align-items: center;
padding-right: 8px; padding-right: 8px;
`); `);