github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-06 21:55:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix padding in TV mode

Browse Source
This commit is contained in:
rijkvanzanten
2021-06-30 14:16:16 -04:00
parent ba73d07748
commit b41035a68e
2 changed files with 65 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
app/src/modules/insights/components/workspace.vue
View File

@@ -1,16 +1,29 @@
<template>
<div class="workspace" :class="{ editing: editMode }" :style="[workspaceSize, { transform: `scale(${zoomScale})` }]">
<insights-panel
v-for="panel in panels"
:key="panel.id"
:panel="panel"
:edit-mode="editMode"
:now="now"
@update="$emit('update', { edits: $event, id: panel.id })"
@move="$emit('move', panel.id)"
@delete="$emit('delete', panel.id)"
@duplicate="$emit('duplicate', panel)"
/>
<div
class="workspace-padding-box"
:class="{ editing: editMode }"
:style="{ width: workspaceBoxSize.width + 'px', height: workspaceBoxSize.height + 'px' }"
>
<div
class="workspace"
:style="{
transform: `scale(${zoomScale})`,
width: workspaceSize.width + 'px',
height: workspaceSize.height + 'px',
}"
>
<insights-panel
v-for="panel in panels"
:key="panel.id"
:panel="panel"
:edit-mode="editMode"
:now="now"
@update="$emit('update', { edits: $event, id: panel.id })"
@move="$emit('move', panel.id)"
@delete="$emit('delete', panel.id)"
@duplicate="$emit('duplicate', panel)"
/>
</div>
</div>
</template>
@@ -46,6 +59,8 @@ export default defineComponent({
const mainElement = inject('main-element', ref<Element>());
const mainElementSize = useElementSize(mainElement);
const paddingSize = computed(() => Number(getVar('--content-padding')?.slice(0, -2) || 0));
const workspaceSize = computed(() => {
const furthestPanelX = props.panels.reduce(
(aggr, panel) => {
@@ -71,26 +86,16 @@ export default defineComponent({
{ position_y: 0, height: 0 }
);
let contentPaddingPx = 32;
if (document.querySelector('#main-content')) {
const contentPadding = getComputedStyle(
document.querySelector('#main-content') as HTMLElement
).getPropertyValue('--content-padding');
contentPaddingPx = Number(contentPadding.substring(0, contentPadding.length - 2));
}
if (props.editMode === true) {
return {
width: (furthestPanelX.position_x! + furthestPanelX.width! + 25) * 20 + 'px',
height: (furthestPanelY.position_y! + furthestPanelY.height! + 25) * 20 + 'px',
width: (furthestPanelX.position_x! + furthestPanelX.width! + 25) * 20,
height: (furthestPanelY.position_y! + furthestPanelY.height! + 25) * 20,
};
}
return {
width: (furthestPanelX.position_x! + furthestPanelX.width! - 1) * 20 + contentPaddingPx + 'px',
height: (furthestPanelY.position_y! + furthestPanelY.height! - 1) * 20 + contentPaddingPx + 'px',
width: (furthestPanelX.position_x! + furthestPanelX.width! - 1) * 20,
height: (furthestPanelY.position_y! + furthestPanelY.height! - 1) * 20,
};
});
@@ -99,37 +104,42 @@ export default defineComponent({
const { width, height } = mainElementSize;
const contentPadding = getComputedStyle(document.querySelector('#main-content') as HTMLElement).getPropertyValue(
'--content-padding'
);
const contentPaddingPx = Number(contentPadding.substring(0, contentPadding.length - 2));
const scaleWidth: number =
(width.value - 2 * contentPaddingPx) /
Number(workspaceSize.value.width.substring(0, workspaceSize.value.width.length - 2));
const scaleHeight: number =
(height.value - 114 - contentPaddingPx) /
Number(workspaceSize.value.height.substring(0, workspaceSize.value.height.length - 2));
const scaleWidth: number = (width.value - paddingSize.value * 2) / workspaceSize.value.width;
const scaleHeight: number = (height.value - 114 - paddingSize.value * 2) / workspaceSize.value.height;
return Math.min(scaleWidth, scaleHeight);
});
return { workspaceSize, mainElement, zoomScale };
const workspaceBoxSize = computed(() => {
return {
width: workspaceSize.value.width * zoomScale.value + paddingSize.value * 2,
height: workspaceSize.value.height * zoomScale.value + paddingSize.value * 2,
};
});
return { workspaceSize, workspaceBoxSize, mainElement, zoomScale };
function getVar(cssVar: string) {
if (!mainElement.value) return;
return getComputedStyle(mainElement.value).getPropertyValue(cssVar).trim();
}
},
});
</script>
<style scoped>
.workspace-box {
position: relative;
}
.workspace {
position: absolute;
left: var(--content-padding);
display: grid;
grid-template-rows: repeat(auto-fill, 20px);
grid-template-columns: repeat(auto-fill, 20px);
min-width: calc(100% - var(--content-padding) - var(--content-padding));
min-width: calc(100%);
min-height: calc(100% - 120px);
margin-left: var(--content-padding);
overflow: visible;
transform: scale(1);
transform-origin: top left;

22
app/src/modules/insights/routes/dashboard.vue
View File

@@ -74,16 +74,18 @@
<insights-navigation />
</template>
<insights-workspace
:edit-mode="editMode"
:panels="panels"
:zoom-to-fit="zoomToFit"
:now="now"
@update="stagePanelEdits"
@move="movePanelID = $event"
@delete="deletePanel"
@duplicate="duplicatePanel"
/>
<div class="padding-box">
<insights-workspace
:edit-mode="editMode"
:panels="panels"
:zoom-to-fit="zoomToFit"
:now="now"
@update="stagePanelEdits"
@move="movePanelID = $event"
@delete="deletePanel"
@duplicate="duplicatePanel"
/>
</div>
<router-view
name="detail"