feat(#245): Update tab design + Remove CSP

This commit is contained in:
Its-treason 2023-10-02 19:50:01 +02:00
parent dce11d1bd5
commit ea9e294c54
3 changed files with 22 additions and 28 deletions

View File

@ -3,14 +3,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div` const StyledWrapper = styled.div`
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: 50px calc(100% - 50px); grid-template-rows: 1.25rem calc(100% - 1.25rem);
/* If there is only one element (the preview, not tabs) make it span over both grid rows */
> *:last-child:first-child {
grid-row: 1 / 3;
margin-top: 1.25rem;
height: calc(100% - 1.25rem);
}
/* This is a hack to force Codemirror to use all available space */ /* This is a hack to force Codemirror to use all available space */
> div { > div {

View File

@ -63,23 +63,28 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
}; };
const getTabClassname = (tabName) => { const getTabClassname = (tabName) => {
return classnames(`tab select-none ${tabName}`, { return classnames(`select-none ${tabName}`, {
active: tabName === tab 'text-yellow-500': tabName === tab,
'cursor-pointer': tabName !== tab,
}); });
}; };
const tabs = [( const getTabs = () => {
if (!mode.includes('html')) {
return null;
}
return (
<>
<div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}> <div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}>
Raw Raw
</div> </div>
)];
if (mode.includes('html')) {
tabs.push(
<div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}> <div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}>
Preview Preview
</div> </div>
</>
); );
} };
const activeResult = useMemo(() => { const activeResult = useMemo(() => {
if (tab === 'preview') { if (tab === 'preview') {
@ -108,11 +113,9 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
return ( return (
<StyledWrapper className="px-3 w-full h-full" style={{ maxWidth: width }}> <StyledWrapper className="px-3 w-full h-full" style={{ maxWidth: width }}>
{tabs.length > 1 ? ( <div className="flex justify-end gap-2 text-xs" role="tablist">
<div className="flex flex-wrap items-center px-3 tabs mb-3" role="tablist"> {getTabs()}
{tabs}
</div> </div>
) : null}
{activeResult} {activeResult}
</StyledWrapper> </StyledWrapper>
); );

View File

@ -16,9 +16,7 @@ setContentSecurityPolicy(`
default-src * 'unsafe-inline' 'unsafe-eval'; default-src * 'unsafe-inline' 'unsafe-eval';
script-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval';
connect-src * 'unsafe-inline'; connect-src * 'unsafe-inline';
base-uri 'none';
form-action 'none'; form-action 'none';
img-src 'self' data:image/svg+xml;
`); `);
const menu = Menu.buildFromTemplate(menuTemplate); const menu = Menu.buildFromTemplate(menuTemplate);