studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

#144

Browse source
This commit is contained in:
isUnknown 2025-04-04 14:58:49 +02:00
parent 806bc993da
commit c29906f306
5 changed files with 77 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/site/blueprints/pages/project.yml
View file

@ -51,6 +51,7 @@ tabs:
label: Étapes label: Étapes
type: pages type: pages
sortBy: stepIndex asc sortBy: stepIndex asc
create: false
templates: templates:
- client-brief - client-brief
- proposal - proposal

2
public/site/plugins/helpers/index.php
View file

@ -48,7 +48,7 @@ function getGlobalEvaluation($numberedGrade) {
[2, 4, "D", $DTLGrades->findBy("letter", "D")->mention()->value(), $DTLGrades->findBy("letter", "D")->comment()->value()], [2, 4, "D", $DTLGrades->findBy("letter", "D")->mention()->value(), $DTLGrades->findBy("letter", "D")->comment()->value()],
[4, 6, "C", $DTLGrades->findBy("letter", "C")->mention()->value(), $DTLGrades->findBy("letter", "C")->comment()->value()], [4, 6, "C", $DTLGrades->findBy("letter", "C")->mention()->value(), $DTLGrades->findBy("letter", "C")->comment()->value()],
[6, 8, "B", $DTLGrades->findBy("letter", "B")->mention()->value(), $DTLGrades->findBy("letter", "B")->comment()->value()], [6, 8, "B", $DTLGrades->findBy("letter", "B")->mention()->value(), $DTLGrades->findBy("letter", "B")->comment()->value()],
[8, 10, "A", $DTLGrades->findBy("letter", "A")->mention()->value(), $DTLGrades->findBy("letter", "A")->comment()->value()], [8, 11, "A", $DTLGrades->findBy("letter", "A")->mention()->value(), $DTLGrades->findBy("letter", "A")->comment()->value()],
]; ];
foreach ($gradeMapping as [$min, $max, $letter, $mention, $comment]) { foreach ($gradeMapping as [$min, $max, $letter, $mention, $comment]) {

61
src/assets/css/src/2.blocks.dialog.css
View file

@ -26,7 +26,8 @@
} }
/* Header */ /* Header */
.dialog [data-pc-section="header"] {
.dialog [data-pc-section='header'] {
height: var(--dialog-header-h); height: var(--dialog-header-h);
padding: 1rem; padding: 1rem;
color: var(--color-white); color: var(--color-white);
@ -34,7 +35,14 @@
display: flex; display: flex;
gap: var(--space-16); gap: var(--space-16);
} }
.dialog:not(#physical-sample) [data-pc-section="header"] h2 { @media screen and (max-width: 96rem) {
.dialog#virtual-sample.with-dtl [data-pc-section='header'] h2 {
text-align: left;
left: 27.5rem;
right: 9.5rem;
}
}
.dialog:not(#physical-sample) [data-pc-section='header'] h2 {
font-family: var(--font-serif); font-family: var(--font-serif);
position: absolute; position: absolute;
left: 15rem; left: 15rem;
@ -47,7 +55,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0 auto; margin: 0 auto;
} }
.dialog [data-pc-name="pcclosebutton"] { .dialog [data-pc-name='pcclosebutton'] {
color: var(--color-white); color: var(--color-white);
} }
.dialog__tabs { .dialog__tabs {
@ -66,7 +74,7 @@
.dialog__tabs .btn:hover { .dialog__tabs .btn:hover {
--btn-background: var(--color-white-10); --btn-background: var(--color-white-10);
} }
.dialog__tabs .btn[aria-pressed="true"] { .dialog__tabs .btn[aria-pressed='true'] {
--btn-background: var(--color-white); --btn-background: var(--color-white);
--btn-color: var(--color-text); --btn-color: var(--color-text);
--btn-border-color: var(--color-white); --btn-border-color: var(--color-white);
@ -100,17 +108,21 @@
overflow-x: auto; overflow-x: auto;
padding: var(--space-8) 1.5rem var(--space-8) var(--space-8); padding: var(--space-8) 1.5rem var(--space-8) var(--space-8);
margin: calc(-1 * var(--space-8)); margin: calc(-1 * var(--space-8));
-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem); -webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 3rem
);
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem); mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
} }
/* Windows fix */ /* Windows fix */
[data-browser*="Windows"] .dialog__inner .tracks { [data-browser*='Windows'] .dialog__inner .tracks {
transform: translateY(0.46875rem); /* 7.5px */ transform: translateY(0.46875rem); /* 7.5px */
} }
.dialog__inner .tracks > *:last-child { .dialog__inner .tracks > *:last-child {
margin-right: 1rem; margin-right: 1rem;
} }
.dialog [data-pc-section="content"] [role="tablist"] { .dialog [data-pc-section='content'] [role='tablist'] {
height: 3.5rem; height: 3.5rem;
width: 100%; width: 100%;
display: flex; display: flex;
@ -120,7 +132,7 @@
border-bottom: 1px solid var(--color-grey-700); border-bottom: 1px solid var(--color-grey-700);
padding-top: 7px; padding-top: 7px;
} }
.dialog [data-pc-section="content"] [role="tab"] { .dialog [data-pc-section='content'] [role='tab'] {
--tab-h: 3rem; --tab-h: 3rem;
--tab-min-w: none; --tab-min-w: none;
--tab-py: var(--space-8); --tab-py: var(--space-8);
@ -144,14 +156,14 @@
height: var(--tab-h); height: var(--tab-h);
border-bottom: var(--tab-border-w) solid var(--tab-border-color); border-bottom: var(--tab-border-w) solid var(--tab-border-color);
} }
.dialog [data-pc-section="content"] [role="tab"][aria-selected="true"] { .dialog [data-pc-section='content'] [role='tab'][aria-selected='true'] {
--tab-border-color: var(--color-white); --tab-border-color: var(--color-white);
--tab-color: var(--color-white); --tab-color: var(--color-white);
} }
.dialog [data-pc-section="content"] [role="tab"]:focus-visible { .dialog [data-pc-section='content'] [role='tab']:focus-visible {
z-index: 20; z-index: 20;
} }
.dialog [data-pc-section="content"] [role="tab"] .label { .dialog [data-pc-section='content'] [role='tab'] .label {
flex-grow: 1; flex-grow: 1;
font-weight: 500; font-weight: 500;
letter-spacing: 0.01em; letter-spacing: 0.01em;
@ -159,7 +171,7 @@
} }
/* Footer */ /* Footer */
.dialog [data-pc-section="footer"] { .dialog [data-pc-section='footer'] {
display: flex; display: flex;
gap: var(--space-16); gap: var(--space-16);
height: var(--dialog-footer-h); height: var(--dialog-footer-h);
@ -172,7 +184,7 @@
.dialog#virtual-sample { .dialog#virtual-sample {
--dialog-inner-background: #f7f7f7; --dialog-inner-background: #f7f7f7;
} }
.dialog#virtual-sample [data-pc-section="header"] h2 { .dialog#virtual-sample [data-pc-section='header'] h2 {
left: 22.5rem; left: 22.5rem;
right: 22.5rem; right: 22.5rem;
} }
@ -185,14 +197,13 @@
.dialog#virtual-sample.static #comments-container { .dialog#virtual-sample.static #comments-container {
top: 8rem; top: 8rem;
} }
.dialog#virtual-sample.static [data-pc-section="footer"] { .dialog#virtual-sample.static [data-pc-section='footer'] {
display: none; display: none;
} }
.dialog#virtual-sample.static .dialog__inner { .dialog#virtual-sample.static .dialog__inner {
height: calc(100% - 3.5rem) !important; height: calc(100% - 3.5rem) !important;
} }
/* Physical Sample */ /* Physical Sample */
.dialog#physical-sample { .dialog#physical-sample {
--dialog-header-h: 15rem; --dialog-header-h: 15rem;
@ -200,7 +211,7 @@
padding: var(--space-32) var(--space-32) 0; padding: var(--space-32) var(--space-32) 0;
overflow-y: auto; overflow-y: auto;
} }
.dialog#physical-sample [data-pc-section="header"] { .dialog#physical-sample [data-pc-section='header'] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -220,7 +231,7 @@
background-size: cover; background-size: cover;
border-radius: var(--rounded-xl); border-radius: var(--rounded-xl);
} }
.dialog#physical-sample [data-pc-name="pcclosebutton"] { .dialog#physical-sample [data-pc-name='pcclosebutton'] {
top: var(--space-40); top: var(--space-40);
right: var(--space-40); right: var(--space-40);
} }
@ -251,7 +262,7 @@
--dialog-max-h: 676px; --dialog-max-h: 676px;
--dialog-header-h: 8rem; --dialog-header-h: 8rem;
} }
#optimization-request-dialog [data-pc-section="header"] { #optimization-request-dialog [data-pc-section='header'] {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0; gap: 0;
@ -262,8 +273,8 @@
color: var(--color-black); color: var(--color-black);
margin-block: var(--space-16) !important; margin-block: var(--space-16) !important;
} }
#project-request-dialog [data-pc-name="pcclosebutton"], #project-request-dialog [data-pc-name='pcclosebutton'],
#optimization-request-dialog [data-pc-name="pcclosebutton"] { #optimization-request-dialog [data-pc-name='pcclosebutton'] {
display: none; display: none;
} }
#project-request-dialog #project-dtl { #project-request-dialog #project-dtl {
@ -274,7 +285,7 @@
border-color: var(--color-primary-20); border-color: var(--color-primary-20);
background-color: var(--color-primary-10); background-color: var(--color-primary-10);
} }
#project-request-dialog #project-dtl input[type="checkbox"] { #project-request-dialog #project-dtl input[type='checkbox'] {
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
border-radius: var(--rounded-md); border-radius: var(--rounded-md);
@ -286,8 +297,8 @@
background-position: center right 1rem; background-position: center right 1rem;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#project-request-dialog [data-icon="leaf"], #project-request-dialog [data-icon='leaf'],
#optimization-request-dialog [data-icon="leaf"] { #optimization-request-dialog [data-icon='leaf'] {
--column-gap: var(--space-4); --column-gap: var(--space-4);
padding: 0.25rem var(--space-8) 0.375rem; padding: 0.25rem var(--space-8) 0.375rem;
background: var(--color-dtl-15); background: var(--color-dtl-15);
@ -296,7 +307,7 @@
line-height: 1; line-height: 1;
font-weight: 500; font-weight: 500;
} }
#project-request-dialog [data-icon="leaf"]::before, #project-request-dialog [data-icon='leaf']::before,
#optimization-request-dialog [data-icon="leaf"]::before { #optimization-request-dialog [data-icon='leaf']::before {
transform: translateY(0.125rem); transform: translateY(0.125rem);
} }

8
src/components/design-to-light/DTLPanel.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<aside <aside
v-if="activeProposal"
id="dtl-panel" id="dtl-panel"
class="text-sm bg-black rounded-2xl" class="text-sm bg-black rounded-2xl"
:class="{ 'with-dialog': isDialogOpen }" :class="{ 'with-dialog': isDialogOpen }"
@ -195,7 +196,7 @@ const { proposals } = defineProps({
}); });
const { page } = storeToRefs(usePageStore()); const { page } = storeToRefs(usePageStore());
const { openedFile } = storeToRefs(useDialogStore()); const { openedFile, activeTracks } = storeToRefs(useDialogStore());
const isDialogOpen = computed(() => { const isDialogOpen = computed(() => {
if (openedFile.value) { if (openedFile.value) {
@ -211,9 +212,8 @@ dayjs.locale('fr');
const emits = defineEmits(['close']); const emits = defineEmits(['close']);
proposals[0].isActive = true; const activeProposal =
proposals.length === 1 ? computed(() => proposals[0]) : ref(proposals[0]);
const activeProposal = ref(proposals[0]);
window.addEventListener('keyup', closeOnEscape); window.addEventListener('keyup', closeOnEscape);
window.addEventListener('click', close); window.addEventListener('click', close);

51
src/components/project/virtual-sample/VirtualSample.vue
View file

@ -87,7 +87,7 @@
</Dialog> </Dialog>
<DTLPanel <DTLPanel
v-if="correspondingDTLProposal" v-if="correspondingDTLProposal"
:proposals="[correspondingDTLProposal]" :proposals="correspondingDTLProposal"
/> />
</template> </template>
@ -147,30 +147,41 @@ const downloadText = computed(() => {
}); });
const correspondingDTLProposal = computed(() => { const correspondingDTLProposal = computed(() => {
const hasDTLProposal = page.value?.designToLight; if (activeTracks.value?.length === 1) {
if (!hasDTLProposal || !isOpen.value || !openedFile.value) return false; const matchingProposal = page.value.designToLight.find(
(proposal) => proposal.location.trackSlug === activeTracks.value[0].slug
const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
if (activeTab.value === 'dynamic') {
return (
proposal.location.type === 'dynamic' &&
activeTracks?.value?.some(
(activeTrack) => activeTrack.slug === proposal.location.trackSlug
)
); );
return matchingProposal ? [matchingProposal] : false;
} else { } else {
return ( return false;
proposal.location.type === 'static' &&
openedFile.value?.source === proposal.location.source
);
} }
});
if (!correspondingDTLProposal) return false;
return correspondingDTLProposal;
}); });
// const correspondingDTLProposal = computed(() => {
// const hasDTLProposal = page.value?.designToLight;
// if (!hasDTLProposal || !isOpen.value || !openedFile.value) return false;
// const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
// if (activeTab.value === 'dynamic') {
// return (
// proposal.location.type === 'dynamic' &&
// activeTracks?.value?.some(
// (activeTrack) => activeTrack.slug === proposal.location.trackSlug
// )
// );
// } else {
// return (
// proposal.location.type === 'static' &&
// openedFile.value?.source === proposal.location.source
// );
// }
// });
// if (!correspondingDTLProposal) return false;
// return correspondingDTLProposal;
// });
// Functions // Functions
function downloadFiles() { function downloadFiles() {
isDownloadTriggered.value = true; isDownloadTriggered.value = true;