mirror of
https://github.com/suitenumerique/docs.git
synced 2026-09-07 10:17:51 +02:00
♻️(frontend) refacto of the grid documents
We have refactored the document grid feature to fit the new design system and to improve the code quality.
This commit is contained in:
Anthony LC
@@ -20,6 +20,7 @@ and this project adheres to
|
||||
- 💄(frontend) use the same highlight color for cells and moves #2575
|
||||
- ⚡️(backend) optimize media_auth endpoint
|
||||
- 🚸(frontend) print from document options menu #2550
|
||||
- ♻️(frontend) refacto of the grid documents #2534
|
||||
|
||||
### Fixed
|
||||
|
||||
|
||||
@@ -325,7 +325,7 @@ test.describe('Documents Grid', () => {
|
||||
|
||||
const thead = page.getByTestId('docs-grid-header');
|
||||
await expect(thead.getByText(/Name/i)).toBeVisible();
|
||||
await expect(thead.getByText(/Updated at/i)).toBeVisible();
|
||||
await expect(thead.getByText(/Last modified/i)).toBeVisible();
|
||||
|
||||
await Promise.all(
|
||||
docs.map(async (doc) => {
|
||||
|
||||
@@ -0,0 +1,311 @@
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2456_1496)">
|
||||
<g clip-path="url(#clip0_2456_1496)">
|
||||
<rect x="8" y="4" width="24" height="32" rx="3.55556" fill="white" />
|
||||
<path
|
||||
d="M7.99951 4H31.9995L31.9995 13.5H7.99903L7.99951 4Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
d="M7.99951 4H31.9995L31.9995 13.5H7.99903L7.99951 4Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.975"
|
||||
/>
|
||||
<path
|
||||
d="M7.99951 4H31.9995L31.9995 13.5H7.99903L7.99951 4Z"
|
||||
fill="url(#paint0_linear_2456_1496)"
|
||||
fill-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1001 13.489C11.1001 12.9981 11.4981 12.6001 11.989 12.6001H19.989C20.4799 12.6001 20.8779 12.9981 20.8779 13.489C20.8779 13.9799 20.4799 14.3779 19.989 14.3779H11.989C11.4981 14.3779 11.1001 13.9799 11.1001 13.489Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1001 13.489C11.1001 12.9981 11.4981 12.6001 11.989 12.6001H19.989C20.4799 12.6001 20.8779 12.9981 20.8779 13.489C20.8779 13.9799 20.4799 14.3779 19.989 14.3779H11.989C11.4981 14.3779 11.1001 13.9799 11.1001 13.489Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.15"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 17.2888C11.1113 16.7979 11.5093 16.3999 12.0002 16.3999H28.0002C28.4911 16.3999 28.8891 16.7979 28.8891 17.2888C28.8891 17.7797 28.4911 18.1777 28.0002 18.1777H12.0002C11.5093 18.1777 11.1113 17.7797 11.1113 17.2888Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 17.2888C11.1113 16.7979 11.5093 16.3999 12.0002 16.3999H28.0002C28.4911 16.3999 28.8891 16.7979 28.8891 17.2888C28.8891 17.7797 28.4911 18.1777 28.0002 18.1777H12.0002C11.5093 18.1777 11.1113 17.7797 11.1113 17.2888Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.8"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 17.2888C11.1113 16.7979 11.5093 16.3999 12.0002 16.3999H28.0002C28.4911 16.3999 28.8891 16.7979 28.8891 17.2888C28.8891 17.7797 28.4911 18.1777 28.0002 18.1777H12.0002C11.5093 18.1777 11.1113 17.7797 11.1113 17.2888Z"
|
||||
fill="url(#paint1_linear_2456_1496)"
|
||||
fill-opacity="0.35"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 20.2888C11.1113 19.7979 11.5093 19.3999 12.0002 19.3999H28.0002C28.4911 19.3999 28.8891 19.7979 28.8891 20.2888C28.8891 20.7797 28.4911 21.1777 28.0002 21.1777H12.0002C11.5093 21.1777 11.1113 20.7797 11.1113 20.2888Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 20.2888C11.1113 19.7979 11.5093 19.3999 12.0002 19.3999H28.0002C28.4911 19.3999 28.8891 19.7979 28.8891 20.2888C28.8891 20.7797 28.4911 21.1777 28.0002 21.1777H12.0002C11.5093 21.1777 11.1113 20.7797 11.1113 20.2888Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.8"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 20.2888C11.1113 19.7979 11.5093 19.3999 12.0002 19.3999H28.0002C28.4911 19.3999 28.8891 19.7979 28.8891 20.2888C28.8891 20.7797 28.4911 21.1777 28.0002 21.1777H12.0002C11.5093 21.1777 11.1113 20.7797 11.1113 20.2888Z"
|
||||
fill="url(#paint2_linear_2456_1496)"
|
||||
fill-opacity="0.35"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 23.2888C11.1113 22.7979 11.5093 22.3999 12.0002 22.3999H28.0002C28.4911 22.3999 28.8891 22.7979 28.8891 23.2888C28.8891 23.7797 28.4911 24.1777 28.0002 24.1777H12.0002C11.5093 24.1777 11.1113 23.7797 11.1113 23.2888Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 23.2888C11.1113 22.7979 11.5093 22.3999 12.0002 22.3999H28.0002C28.4911 22.3999 28.8891 22.7979 28.8891 23.2888C28.8891 23.7797 28.4911 24.1777 28.0002 24.1777H12.0002C11.5093 24.1777 11.1113 23.7797 11.1113 23.2888Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.8"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 23.2888C11.1113 22.7979 11.5093 22.3999 12.0002 22.3999H28.0002C28.4911 22.3999 28.8891 22.7979 28.8891 23.2888C28.8891 23.7797 28.4911 24.1777 28.0002 24.1777H12.0002C11.5093 24.1777 11.1113 23.7797 11.1113 23.2888Z"
|
||||
fill="url(#paint3_linear_2456_1496)"
|
||||
fill-opacity="0.35"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 26.2888C11.1113 25.7979 11.5093 25.3999 12.0002 25.3999H28.0002C28.4911 25.3999 28.8891 25.7979 28.8891 26.2888C28.8891 26.7797 28.4911 27.1777 28.0002 27.1777H12.0002C11.5093 27.1777 11.1113 26.7797 11.1113 26.2888Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 26.2888C11.1113 25.7979 11.5093 25.3999 12.0002 25.3999H28.0002C28.4911 25.3999 28.8891 25.7979 28.8891 26.2888C28.8891 26.7797 28.4911 27.1777 28.0002 27.1777H12.0002C11.5093 27.1777 11.1113 26.7797 11.1113 26.2888Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.8"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 26.2888C11.1113 25.7979 11.5093 25.3999 12.0002 25.3999H28.0002C28.4911 25.3999 28.8891 25.7979 28.8891 26.2888C28.8891 26.7797 28.4911 27.1777 28.0002 27.1777H12.0002C11.5093 27.1777 11.1113 26.7797 11.1113 26.2888Z"
|
||||
fill="url(#paint4_linear_2456_1496)"
|
||||
fill-opacity="0.35"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 29.2888C11.1113 28.7979 11.5093 28.3999 12.0002 28.3999H28.0002C28.4911 28.3999 28.8891 28.7979 28.8891 29.2888C28.8891 29.7797 28.4911 30.1777 28.0002 30.1777H12.0002C11.5093 30.1777 11.1113 29.7797 11.1113 29.2888Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 29.2888C11.1113 28.7979 11.5093 28.3999 12.0002 28.3999H28.0002C28.4911 28.3999 28.8891 28.7979 28.8891 29.2888C28.8891 29.7797 28.4911 30.1777 28.0002 30.1777H12.0002C11.5093 30.1777 11.1113 29.7797 11.1113 29.2888Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.8"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 29.2888C11.1113 28.7979 11.5093 28.3999 12.0002 28.3999H28.0002C28.4911 28.3999 28.8891 28.7979 28.8891 29.2888C28.8891 29.7797 28.4911 30.1777 28.0002 30.1777H12.0002C11.5093 30.1777 11.1113 29.7797 11.1113 29.2888Z"
|
||||
fill="url(#paint5_linear_2456_1496)"
|
||||
fill-opacity="0.35"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 32.2888C11.1113 31.7979 11.5093 31.3999 12.0002 31.3999H28.0002C28.4911 31.3999 28.8891 31.7979 28.8891 32.2888C28.8891 32.7797 28.4911 33.1777 28.0002 33.1777H12.0002C11.5093 33.1777 11.1113 32.7797 11.1113 32.2888Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 32.2888C11.1113 31.7979 11.5093 31.3999 12.0002 31.3999H28.0002C28.4911 31.3999 28.8891 31.7979 28.8891 32.2888C28.8891 32.7797 28.4911 33.1777 28.0002 33.1777H12.0002C11.5093 33.1777 11.1113 32.7797 11.1113 32.2888Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.8"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.1113 32.2888C11.1113 31.7979 11.5093 31.3999 12.0002 31.3999H28.0002C28.4911 31.3999 28.8891 31.7979 28.8891 32.2888C28.8891 32.7797 28.4911 33.1777 28.0002 33.1777H12.0002C11.5093 33.1777 11.1113 32.7797 11.1113 32.2888Z"
|
||||
fill="url(#paint6_linear_2456_1496)"
|
||||
fill-opacity="0.35"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
x="8.35"
|
||||
y="4.35"
|
||||
width="23.3"
|
||||
height="31.3"
|
||||
rx="3.20556"
|
||||
stroke="#3677CC"
|
||||
stroke-width="0.7"
|
||||
/>
|
||||
<rect
|
||||
x="8.35"
|
||||
y="4.35"
|
||||
width="23.3"
|
||||
height="31.3"
|
||||
rx="3.20556"
|
||||
stroke="#F6F8F9"
|
||||
stroke-opacity="0.8"
|
||||
stroke-width="0.7"
|
||||
/>
|
||||
<rect
|
||||
x="8.35"
|
||||
y="4.35"
|
||||
width="23.3"
|
||||
height="31.3"
|
||||
rx="3.20556"
|
||||
stroke="url(#paint7_linear_2456_1496)"
|
||||
stroke-opacity="0.2"
|
||||
stroke-width="0.7"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_2456_1496"
|
||||
x="-3"
|
||||
y="-2"
|
||||
width="46"
|
||||
height="46"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="1" />
|
||||
<feGaussianBlur stdDeviation="1.5" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.0941176 0 0 0 0 0.105882 0 0 0 0 0.141176 0 0 0 0.05 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2456_1496"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_2456_1496"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="paint0_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="-6.5"
|
||||
x2="20.0094"
|
||||
y2="13.9163"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="22.2888"
|
||||
x2="20"
|
||||
y2="33.2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="22.2888"
|
||||
x2="20"
|
||||
y2="33.2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="22.2888"
|
||||
x2="20"
|
||||
y2="33.2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="22.2888"
|
||||
x2="20"
|
||||
y2="33.2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="22.2888"
|
||||
x2="20"
|
||||
y2="33.2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint6_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="22.2888"
|
||||
x2="20"
|
||||
y2="33.2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint7_linear_2456_1496"
|
||||
x1="20"
|
||||
y1="20"
|
||||
x2="19.9997"
|
||||
y2="36.0276"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_2456_1496">
|
||||
<rect x="8" y="4" width="24" height="32" rx="3.55556" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,153 @@
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_6654_11278)">
|
||||
<g clip-path="url(#clip0_6654_11278)">
|
||||
<rect x="8" y="4" width="24" height="32" rx="3.55556" fill="white" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.5566 14.7888C11.5566 14.2979 11.9546 13.8999 12.4455 13.8999H27.5002C27.9911 13.8999 28.3891 14.2979 28.3891 14.7888C28.3891 15.2797 27.9911 15.6777 27.5002 15.6777H12.4455C11.9546 15.6777 11.5566 15.2797 11.5566 14.7888ZM11.5566 17.4555C11.5566 16.9645 11.9546 16.5666 12.4455 16.5666H27.5002C27.9911 16.5666 28.3891 16.9645 28.3891 17.4555C28.3891 17.9464 27.9911 18.3443 27.5002 18.3443H12.4455C11.9546 18.3443 11.5566 17.9464 11.5566 17.4555ZM11.5566 20.1221C11.5566 19.6312 11.9546 19.2332 12.4455 19.2332H27.5002C27.9911 19.2332 28.3891 19.6312 28.3891 20.1221C28.3891 20.613 27.9911 21.011 27.5002 21.011H12.4455C11.9546 21.011 11.5566 20.613 11.5566 20.1221ZM11.5566 22.7888C11.5566 22.2979 11.9546 21.8999 12.4455 21.8999H19.5002C19.9911 21.8999 20.3891 22.2979 20.3891 22.7888C20.3891 23.2797 19.9911 23.6777 19.5002 23.6777H12.4455C11.9546 23.6777 11.5566 23.2797 11.5566 22.7888Z"
|
||||
fill="#6A6AF4"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.5566 14.7888C11.5566 14.2979 11.9546 13.8999 12.4455 13.8999H27.5002C27.9911 13.8999 28.3891 14.2979 28.3891 14.7888C28.3891 15.2797 27.9911 15.6777 27.5002 15.6777H12.4455C11.9546 15.6777 11.5566 15.2797 11.5566 14.7888ZM11.5566 17.4555C11.5566 16.9645 11.9546 16.5666 12.4455 16.5666H27.5002C27.9911 16.5666 28.3891 16.9645 28.3891 17.4555C28.3891 17.9464 27.9911 18.3443 27.5002 18.3443H12.4455C11.9546 18.3443 11.5566 17.9464 11.5566 17.4555ZM11.5566 20.1221C11.5566 19.6312 11.9546 19.2332 12.4455 19.2332H27.5002C27.9911 19.2332 28.3891 19.6312 28.3891 20.1221C28.3891 20.613 27.9911 21.011 27.5002 21.011H12.4455C11.9546 21.011 11.5566 20.613 11.5566 20.1221ZM11.5566 22.7888C11.5566 22.2979 11.9546 21.8999 12.4455 21.8999H19.5002C19.9911 21.8999 20.3891 22.2979 20.3891 22.7888C20.3891 23.2797 19.9911 23.6777 19.5002 23.6777H12.4455C11.9546 23.6777 11.5566 23.2797 11.5566 22.7888Z"
|
||||
fill="white"
|
||||
fill-opacity="0.65"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.5566 14.7888C11.5566 14.2979 11.9546 13.8999 12.4455 13.8999H27.5002C27.9911 13.8999 28.3891 14.2979 28.3891 14.7888C28.3891 15.2797 27.9911 15.6777 27.5002 15.6777H12.4455C11.9546 15.6777 11.5566 15.2797 11.5566 14.7888ZM11.5566 17.4555C11.5566 16.9645 11.9546 16.5666 12.4455 16.5666H27.5002C27.9911 16.5666 28.3891 16.9645 28.3891 17.4555C28.3891 17.9464 27.9911 18.3443 27.5002 18.3443H12.4455C11.9546 18.3443 11.5566 17.9464 11.5566 17.4555ZM11.5566 20.1221C11.5566 19.6312 11.9546 19.2332 12.4455 19.2332H27.5002C27.9911 19.2332 28.3891 19.6312 28.3891 20.1221C28.3891 20.613 27.9911 21.011 27.5002 21.011H12.4455C11.9546 21.011 11.5566 20.613 11.5566 20.1221ZM11.5566 22.7888C11.5566 22.2979 11.9546 21.8999 12.4455 21.8999H19.5002C19.9911 21.8999 20.3891 22.2979 20.3891 22.7888C20.3891 23.2797 19.9911 23.6777 19.5002 23.6777H12.4455C11.9546 23.6777 11.5566 23.2797 11.5566 22.7888Z"
|
||||
fill="#3677CC"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.5566 14.7888C11.5566 14.2979 11.9546 13.8999 12.4455 13.8999H27.5002C27.9911 13.8999 28.3891 14.2979 28.3891 14.7888C28.3891 15.2797 27.9911 15.6777 27.5002 15.6777H12.4455C11.9546 15.6777 11.5566 15.2797 11.5566 14.7888ZM11.5566 17.4555C11.5566 16.9645 11.9546 16.5666 12.4455 16.5666H27.5002C27.9911 16.5666 28.3891 16.9645 28.3891 17.4555C28.3891 17.9464 27.9911 18.3443 27.5002 18.3443H12.4455C11.9546 18.3443 11.5566 17.9464 11.5566 17.4555ZM11.5566 20.1221C11.5566 19.6312 11.9546 19.2332 12.4455 19.2332H27.5002C27.9911 19.2332 28.3891 19.6312 28.3891 20.1221C28.3891 20.613 27.9911 21.011 27.5002 21.011H12.4455C11.9546 21.011 11.5566 20.613 11.5566 20.1221ZM11.5566 22.7888C11.5566 22.2979 11.9546 21.8999 12.4455 21.8999H19.5002C19.9911 21.8999 20.3891 22.2979 20.3891 22.7888C20.3891 23.2797 19.9911 23.6777 19.5002 23.6777H12.4455C11.9546 23.6777 11.5566 23.2797 11.5566 22.7888Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.8"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11.5566 14.7888C11.5566 14.2979 11.9546 13.8999 12.4455 13.8999H27.5002C27.9911 13.8999 28.3891 14.2979 28.3891 14.7888C28.3891 15.2797 27.9911 15.6777 27.5002 15.6777H12.4455C11.9546 15.6777 11.5566 15.2797 11.5566 14.7888ZM11.5566 17.4555C11.5566 16.9645 11.9546 16.5666 12.4455 16.5666H27.5002C27.9911 16.5666 28.3891 16.9645 28.3891 17.4555C28.3891 17.9464 27.9911 18.3443 27.5002 18.3443H12.4455C11.9546 18.3443 11.5566 17.9464 11.5566 17.4555ZM11.5566 20.1221C11.5566 19.6312 11.9546 19.2332 12.4455 19.2332H27.5002C27.9911 19.2332 28.3891 19.6312 28.3891 20.1221C28.3891 20.613 27.9911 21.011 27.5002 21.011H12.4455C11.9546 21.011 11.5566 20.613 11.5566 20.1221ZM11.5566 22.7888C11.5566 22.2979 11.9546 21.8999 12.4455 21.8999H19.5002C19.9911 21.8999 20.3891 22.2979 20.3891 22.7888C20.3891 23.2797 19.9911 23.6777 19.5002 23.6777H12.4455C11.9546 23.6777 11.5566 23.2797 11.5566 22.7888Z"
|
||||
fill="url(#paint1_linear_6654_11278)"
|
||||
fill-opacity="0.35"
|
||||
/>
|
||||
<path d="M8.00048 4H32L32 11H8.00001L8.00048 4Z" fill="#3677CC" />
|
||||
<path
|
||||
d="M8.00048 4H32L32 11H8.00001L8.00048 4Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.975"
|
||||
/>
|
||||
<path
|
||||
d="M8.00048 4H32L32 11H8.00001L8.00048 4Z"
|
||||
fill="url(#paint2_linear_6654_11278)"
|
||||
fill-opacity="0.4"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
x="8.35"
|
||||
y="4.35"
|
||||
width="23.3"
|
||||
height="31.3"
|
||||
rx="3.20556"
|
||||
stroke="#3677CC"
|
||||
stroke-width="0.7"
|
||||
/>
|
||||
<rect
|
||||
x="8.35"
|
||||
y="4.35"
|
||||
width="23.3"
|
||||
height="31.3"
|
||||
rx="3.20556"
|
||||
stroke="#F6F8F9"
|
||||
stroke-opacity="0.8"
|
||||
stroke-width="0.7"
|
||||
/>
|
||||
<rect
|
||||
x="8.35"
|
||||
y="4.35"
|
||||
width="23.3"
|
||||
height="31.3"
|
||||
rx="3.20556"
|
||||
stroke="url(#paint0_linear_6654_11278)"
|
||||
stroke-opacity="0.2"
|
||||
stroke-width="0.7"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_6654_11278"
|
||||
x="-3"
|
||||
y="-2"
|
||||
width="46"
|
||||
height="46"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="1" />
|
||||
<feGaussianBlur stdDeviation="1.5" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.0941176 0 0 0 0 0.105882 0 0 0 0 0.141176 0 0 0 0.05 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_6654_11278"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_6654_11278"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="paint0_linear_6654_11278"
|
||||
x1="20"
|
||||
y1="20"
|
||||
x2="19.9997"
|
||||
y2="36.0276"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_6654_11278"
|
||||
x1="20"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="30.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_6654_11278"
|
||||
x1="20.0007"
|
||||
y1="-3.73684"
|
||||
x2="20.0058"
|
||||
y2="11.3068"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_6654_11278">
|
||||
<rect x="8" y="4" width="24" height="32" rx="3.55556" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.0 KiB |
@@ -0,0 +1,130 @@
|
||||
<svg viewBox="0 0 58 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_12774_19384)">
|
||||
<path
|
||||
d="M18.3626 14.3838V9.54711C18.3626 7.8304 18.8776 6.49435 19.9076 5.53897C20.9526 4.56865 22.4006 4.0835 24.2517 4.0835H32.7606C34.6116 4.0835 36.0596 4.56865 37.1046 5.53897C38.1495 6.49435 38.672 7.8304 38.672 9.54711V14.3838H34.5295V9.74864C34.5295 9.18138 34.3429 8.72608 33.9697 8.38273C33.5965 8.02446 33.0964 7.84533 32.4695 7.84533H24.5428C23.9307 7.84533 23.4381 8.02446 23.0649 8.38273C22.6917 8.72608 22.5051 9.18138 22.5051 9.74864V14.3838H18.3626ZM18.2506 54.6219C16.519 54.6219 15.1307 54.1368 14.0858 53.1665C13.0557 52.1961 12.5034 50.8452 12.4288 49.1135L10.8613 16.3766H46.1957L44.6507 49.0911C44.576 50.8228 44.0162 52.1738 42.9713 53.1441C41.9263 54.1293 40.5455 54.6219 38.8288 54.6219H18.2506Z"
|
||||
fill="#626A80"
|
||||
/>
|
||||
<path
|
||||
d="M18.3626 14.3838V9.54711C18.3626 7.8304 18.8776 6.49435 19.9076 5.53897C20.9526 4.56865 22.4006 4.0835 24.2517 4.0835H32.7606C34.6116 4.0835 36.0596 4.56865 37.1046 5.53897C38.1495 6.49435 38.672 7.8304 38.672 9.54711V14.3838H34.5295V9.74864C34.5295 9.18138 34.3429 8.72608 33.9697 8.38273C33.5965 8.02446 33.0964 7.84533 32.4695 7.84533H24.5428C23.9307 7.84533 23.4381 8.02446 23.0649 8.38273C22.6917 8.72608 22.5051 9.18138 22.5051 9.74864V14.3838H18.3626ZM18.2506 54.6219C16.519 54.6219 15.1307 54.1368 14.0858 53.1665C13.0557 52.1961 12.5034 50.8452 12.4288 49.1135L10.8613 16.3766H46.1957L44.6507 49.0911C44.576 50.8228 44.0162 52.1738 42.9713 53.1441C41.9263 54.1293 40.5455 54.6219 38.8288 54.6219H18.2506Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.9"
|
||||
/>
|
||||
<path
|
||||
d="M18.3626 14.3838V9.54711C18.3626 7.8304 18.8776 6.49435 19.9076 5.53897C20.9526 4.56865 22.4006 4.0835 24.2517 4.0835H32.7606C34.6116 4.0835 36.0596 4.56865 37.1046 5.53897C38.1495 6.49435 38.672 7.8304 38.672 9.54711V14.3838H34.5295V9.74864C34.5295 9.18138 34.3429 8.72608 33.9697 8.38273C33.5965 8.02446 33.0964 7.84533 32.4695 7.84533H24.5428C23.9307 7.84533 23.4381 8.02446 23.0649 8.38273C22.6917 8.72608 22.5051 9.18138 22.5051 9.74864V14.3838H18.3626ZM18.2506 54.6219C16.519 54.6219 15.1307 54.1368 14.0858 53.1665C13.0557 52.1961 12.5034 50.8452 12.4288 49.1135L10.8613 16.3766H46.1957L44.6507 49.0911C44.576 50.8228 44.0162 52.1738 42.9713 53.1441C41.9263 54.1293 40.5455 54.6219 38.8288 54.6219H18.2506Z"
|
||||
stroke="#6D778C"
|
||||
stroke-width="1.09597"
|
||||
/>
|
||||
<path
|
||||
d="M18.3626 14.3838V9.54711C18.3626 7.8304 18.8776 6.49435 19.9076 5.53897C20.9526 4.56865 22.4006 4.0835 24.2517 4.0835H32.7606C34.6116 4.0835 36.0596 4.56865 37.1046 5.53897C38.1495 6.49435 38.672 7.8304 38.672 9.54711V14.3838H34.5295V9.74864C34.5295 9.18138 34.3429 8.72608 33.9697 8.38273C33.5965 8.02446 33.0964 7.84533 32.4695 7.84533H24.5428C23.9307 7.84533 23.4381 8.02446 23.0649 8.38273C22.6917 8.72608 22.5051 9.18138 22.5051 9.74864V14.3838H18.3626ZM18.2506 54.6219C16.519 54.6219 15.1307 54.1368 14.0858 53.1665C13.0557 52.1961 12.5034 50.8452 12.4288 49.1135L10.8613 16.3766H46.1957L44.6507 49.0911C44.576 50.8228 44.0162 52.1738 42.9713 53.1441C41.9263 54.1293 40.5455 54.6219 38.8288 54.6219H18.2506Z"
|
||||
stroke="#F6F8F9"
|
||||
stroke-opacity="0.8"
|
||||
stroke-width="1.09597"
|
||||
/>
|
||||
<path
|
||||
d="M7.63617 16.2645C8.01341 16.6527 8.47045 16.8467 9.00729 16.8467H48.0733C48.6101 16.8467 49.0599 16.6527 49.4226 16.2645C49.7998 15.8764 49.9885 15.4062 49.9885 14.8539C49.9885 14.3015 49.7998 13.8388 49.4226 13.4656C49.0599 13.0924 48.6101 12.9058 48.0733 12.9058H9.00729C8.47045 12.9058 8.01341 13.0998 7.63617 13.4879C7.25893 13.8611 7.07031 14.3164 7.07031 14.8539C7.07031 15.4062 7.25893 15.8764 7.63617 16.2645Z"
|
||||
fill="#626A80"
|
||||
/>
|
||||
<path
|
||||
d="M7.63617 16.2645C8.01341 16.6527 8.47045 16.8467 9.00729 16.8467H48.0733C48.6101 16.8467 49.0599 16.6527 49.4226 16.2645C49.7998 15.8764 49.9885 15.4062 49.9885 14.8539C49.9885 14.3015 49.7998 13.8388 49.4226 13.4656C49.0599 13.0924 48.6101 12.9058 48.0733 12.9058H9.00729C8.47045 12.9058 8.01341 13.0998 7.63617 13.4879C7.25893 13.8611 7.07031 14.3164 7.07031 14.8539C7.07031 15.4062 7.25893 15.8764 7.63617 16.2645Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.65"
|
||||
/>
|
||||
<path
|
||||
d="M22.8419 48.1618C22.5433 48.4454 22.1552 48.5873 21.6775 48.5873C21.1849 48.5873 20.7893 48.4529 20.4908 48.1842C20.2071 47.9006 20.0504 47.5199 20.0205 47.0422L19.3488 22.7023C19.3338 22.2395 19.4682 21.8663 19.7518 21.5827C20.0504 21.299 20.446 21.1572 20.9386 21.1572C21.4014 21.1572 21.782 21.299 22.0806 21.5827C22.3941 21.8514 22.5508 22.2171 22.5508 22.6799L23.2674 47.0422C23.2823 47.505 23.1405 47.8782 22.8419 48.1618Z"
|
||||
fill="#626A80"
|
||||
/>
|
||||
<path
|
||||
d="M22.8419 48.1618C22.5433 48.4454 22.1552 48.5873 21.6775 48.5873C21.1849 48.5873 20.7893 48.4529 20.4908 48.1842C20.2071 47.9006 20.0504 47.5199 20.0205 47.0422L19.3488 22.7023C19.3338 22.2395 19.4682 21.8663 19.7518 21.5827C20.0504 21.299 20.446 21.1572 20.9386 21.1572C21.4014 21.1572 21.782 21.299 22.0806 21.5827C22.3941 21.8514 22.5508 22.2171 22.5508 22.6799L23.2674 47.0422C23.2823 47.505 23.1405 47.8782 22.8419 48.1618Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.975"
|
||||
/>
|
||||
<path
|
||||
d="M29.7162 48.1842C29.4176 48.4529 29.0221 48.5873 28.5294 48.5873C28.0517 48.5873 27.6562 48.4529 27.3427 48.1842C27.0441 47.9006 26.8948 47.5274 26.8948 47.0646V22.7023C26.8948 22.2395 27.0441 21.8663 27.3427 21.5827C27.6562 21.299 28.0517 21.1572 28.5294 21.1572C29.0221 21.1572 29.4176 21.299 29.7162 21.5827C30.0297 21.8663 30.1864 22.2395 30.1864 22.7023V47.0646C30.1864 47.5274 30.0297 47.9006 29.7162 48.1842Z"
|
||||
fill="#626A80"
|
||||
/>
|
||||
<path
|
||||
d="M29.7162 48.1842C29.4176 48.4529 29.0221 48.5873 28.5294 48.5873C28.0517 48.5873 27.6562 48.4529 27.3427 48.1842C27.0441 47.9006 26.8948 47.5274 26.8948 47.0646V22.7023C26.8948 22.2395 27.0441 21.8663 27.3427 21.5827C27.6562 21.299 28.0517 21.1572 28.5294 21.1572C29.0221 21.1572 29.4176 21.299 29.7162 21.5827C30.0297 21.8663 30.1864 22.2395 30.1864 22.7023V47.0646C30.1864 47.5274 30.0297 47.9006 29.7162 48.1842Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.975"
|
||||
/>
|
||||
<path
|
||||
d="M36.5681 48.1842C36.2845 48.4529 35.8964 48.5873 35.4037 48.5873C34.9111 48.5873 34.5155 48.4529 34.217 48.1842C33.9333 47.9006 33.799 47.5199 33.8139 47.0422L34.5081 22.7023C34.523 22.2246 34.6797 21.8514 34.9783 21.5827C35.2918 21.299 35.6724 21.1572 36.1203 21.1572C36.6129 21.1572 37.001 21.299 37.2847 21.5827C37.5832 21.8663 37.725 22.2395 37.7101 22.7023L37.0383 47.0422C37.0234 47.5348 36.8667 47.9155 36.5681 48.1842Z"
|
||||
fill="#626A80"
|
||||
/>
|
||||
<path
|
||||
d="M36.5681 48.1842C36.2845 48.4529 35.8964 48.5873 35.4037 48.5873C34.9111 48.5873 34.5155 48.4529 34.217 48.1842C33.9333 47.9006 33.799 47.5199 33.8139 47.0422L34.5081 22.7023C34.523 22.2246 34.6797 21.8514 34.9783 21.5827C35.2918 21.299 35.6724 21.1572 36.1203 21.1572C36.6129 21.1572 37.001 21.299 37.2847 21.5827C37.5832 21.8663 37.725 22.2395 37.7101 22.7023L37.0383 47.0422C37.0234 47.5348 36.8667 47.9155 36.5681 48.1842Z"
|
||||
fill="#F6F8F9"
|
||||
fill-opacity="0.975"
|
||||
/>
|
||||
<path
|
||||
d="M22.8419 48.1618C22.5433 48.4454 22.1552 48.5873 21.6775 48.5873C21.1849 48.5873 20.7893 48.4529 20.4908 48.1842C20.2071 47.9006 20.0504 47.5199 20.0205 47.0422L19.3488 22.7023C19.3338 22.2395 19.4682 21.8663 19.7518 21.5827C20.0504 21.299 20.446 21.1572 20.9386 21.1572C21.4014 21.1572 21.782 21.299 22.0806 21.5827C22.3941 21.8514 22.5508 22.2171 22.5508 22.6799L23.2674 47.0422C23.2823 47.505 23.1405 47.8782 22.8419 48.1618Z"
|
||||
stroke="#6D778C"
|
||||
stroke-width="0.919204"
|
||||
/>
|
||||
<path
|
||||
d="M22.8419 48.1618C22.5433 48.4454 22.1552 48.5873 21.6775 48.5873C21.1849 48.5873 20.7893 48.4529 20.4908 48.1842C20.2071 47.9006 20.0504 47.5199 20.0205 47.0422L19.3488 22.7023C19.3338 22.2395 19.4682 21.8663 19.7518 21.5827C20.0504 21.299 20.446 21.1572 20.9386 21.1572C21.4014 21.1572 21.782 21.299 22.0806 21.5827C22.3941 21.8514 22.5508 22.2171 22.5508 22.6799L23.2674 47.0422C23.2823 47.505 23.1405 47.8782 22.8419 48.1618Z"
|
||||
stroke="#F6F8F9"
|
||||
stroke-opacity="0.8"
|
||||
stroke-width="0.919204"
|
||||
/>
|
||||
<path
|
||||
d="M29.7162 48.1842C29.4176 48.4529 29.0221 48.5873 28.5294 48.5873C28.0517 48.5873 27.6562 48.4529 27.3427 48.1842C27.0441 47.9006 26.8948 47.5274 26.8948 47.0646V22.7023C26.8948 22.2395 27.0441 21.8663 27.3427 21.5827C27.6562 21.299 28.0517 21.1572 28.5294 21.1572C29.0221 21.1572 29.4176 21.299 29.7162 21.5827C30.0297 21.8663 30.1864 22.2395 30.1864 22.7023V47.0646C30.1864 47.5274 30.0297 47.9006 29.7162 48.1842Z"
|
||||
stroke="#6D778C"
|
||||
stroke-width="0.919204"
|
||||
/>
|
||||
<path
|
||||
d="M29.7162 48.1842C29.4176 48.4529 29.0221 48.5873 28.5294 48.5873C28.0517 48.5873 27.6562 48.4529 27.3427 48.1842C27.0441 47.9006 26.8948 47.5274 26.8948 47.0646V22.7023C26.8948 22.2395 27.0441 21.8663 27.3427 21.5827C27.6562 21.299 28.0517 21.1572 28.5294 21.1572C29.0221 21.1572 29.4176 21.299 29.7162 21.5827C30.0297 21.8663 30.1864 22.2395 30.1864 22.7023V47.0646C30.1864 47.5274 30.0297 47.9006 29.7162 48.1842Z"
|
||||
stroke="#F6F8F9"
|
||||
stroke-opacity="0.8"
|
||||
stroke-width="0.919204"
|
||||
/>
|
||||
<path
|
||||
d="M36.5681 48.1842C36.2845 48.4529 35.8964 48.5873 35.4037 48.5873C34.9111 48.5873 34.5155 48.4529 34.217 48.1842C33.9333 47.9006 33.799 47.5199 33.8139 47.0422L34.5081 22.7023C34.523 22.2246 34.6797 21.8514 34.9783 21.5827C35.2918 21.299 35.6724 21.1572 36.1203 21.1572C36.6129 21.1572 37.001 21.299 37.2847 21.5827C37.5832 21.8663 37.725 22.2395 37.7101 22.7023L37.0383 47.0422C37.0234 47.5348 36.8667 47.9155 36.5681 48.1842Z"
|
||||
stroke="#6D778C"
|
||||
stroke-width="0.919204"
|
||||
/>
|
||||
<path
|
||||
d="M36.5681 48.1842C36.2845 48.4529 35.8964 48.5873 35.4037 48.5873C34.9111 48.5873 34.5155 48.4529 34.217 48.1842C33.9333 47.9006 33.799 47.5199 33.8139 47.0422L34.5081 22.7023C34.523 22.2246 34.6797 21.8514 34.9783 21.5827C35.2918 21.299 35.6724 21.1572 36.1203 21.1572C36.6129 21.1572 37.001 21.299 37.2847 21.5827C37.5832 21.8663 37.725 22.2395 37.7101 22.7023L37.0383 47.0422C37.0234 47.5348 36.8667 47.9155 36.5681 48.1842Z"
|
||||
stroke="#F6F8F9"
|
||||
stroke-opacity="0.8"
|
||||
stroke-width="0.919204"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_12774_19384"
|
||||
x="-6.82471"
|
||||
y="-2.46606"
|
||||
width="70.708"
|
||||
height="70.708"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="3.5354" />
|
||||
<feGaussianBlur stdDeviation="3.5354" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.0941176 0 0 0 0 0.105882 0 0 0 0 0.141176 0 0 0 0.05 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_12774_19384"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_12774_19384"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,23 @@
|
||||
<svg viewBox="9.405 9.405 14.19 14.19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect
|
||||
x="10.0132"
|
||||
y="10.0132"
|
||||
width="12.9736"
|
||||
height="12.9736"
|
||||
rx="6.48682"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="10.0132"
|
||||
y="10.0132"
|
||||
width="12.9736"
|
||||
height="12.9736"
|
||||
rx="6.48682"
|
||||
stroke="white"
|
||||
stroke-width="1.21628"
|
||||
/>
|
||||
<path
|
||||
d="M17.9595 16.5L18.9325 17.473V18.2028H16.8648V20.5137L16.4999 20.8786L16.1351 20.5137V18.2028H14.0674V17.473L15.0404 16.5V13.8242H14.5539V13.0944H18.446V13.8242H17.9595V16.5Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 582 B |
@@ -79,6 +79,7 @@ export const ErrorPage = ({
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
}}
|
||||
loading="eager"
|
||||
/>
|
||||
|
||||
<Text
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Loader } from '@gouvfr-lasuite/cunningham-react';
|
||||
import { Loader, LoaderProps } from '@gouvfr-lasuite/cunningham-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Box, BoxProps } from './Box';
|
||||
@@ -36,8 +36,11 @@ export const LoadMoreText = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const Loading = (props: BoxProps) => (
|
||||
export const Loading = ({
|
||||
loaderProps,
|
||||
...props
|
||||
}: BoxProps & { loaderProps?: LoaderProps }) => (
|
||||
<Box $align="center" $justify="center" $height="100%" {...props}>
|
||||
<Loader />
|
||||
<Loader {...loaderProps} />
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -97,7 +97,7 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
|
||||
/>
|
||||
}
|
||||
>
|
||||
Restore
|
||||
{t('Restore')}
|
||||
</Button>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
+57
-38
@@ -1,15 +1,14 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import ArrowSVG from '@/assets/icons/ui-kit/arrow-corner-down-right.svg';
|
||||
import { Box, Text } from '@/components';
|
||||
import { useCunninghamTheme } from '@/cunningham';
|
||||
import { Box, Icon, Text } from '@/components';
|
||||
import { useDate } from '@/hooks/useDate';
|
||||
import DocsIcon from '@/icons/Docs.svg';
|
||||
import SubdocsIcon from '@/icons/Subdocs.svg';
|
||||
import ArrowIcon from '@/icons/arrow-corner-down-right.svg';
|
||||
import PinnedIcon from '@/icons/pinned.svg';
|
||||
import { useResponsiveStore } from '@/stores';
|
||||
|
||||
import ChildDocument from '../assets/child-document.svg';
|
||||
import PinnedDocumentIcon from '../assets/pinned-document.svg';
|
||||
import SimpleFileIcon from '../assets/simple-document.svg';
|
||||
import { useDocUtils, useTrans } from '../hooks';
|
||||
import { Doc } from '../types';
|
||||
|
||||
@@ -39,7 +38,6 @@ export const SimpleDocItem = ({
|
||||
}: SimpleDocItemProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { isSmallMobile } = useResponsiveStore();
|
||||
const { spacingsTokens } = useCunninghamTheme();
|
||||
const { untitledDocument } = useTrans();
|
||||
const { isChild } = useDocUtils(doc);
|
||||
const { relativeDate, formatDate } = useDate();
|
||||
@@ -55,45 +53,66 @@ export const SimpleDocItem = ({
|
||||
return (
|
||||
<Box
|
||||
$direction="row"
|
||||
$gap={spacingsTokens.sm}
|
||||
$gap={isSmallMobile ? 'xs' : 'sm'}
|
||||
$overflow="auto"
|
||||
$width="100%"
|
||||
className="--docs--simple-doc-item"
|
||||
aria-label={itemAriaLabel}
|
||||
>
|
||||
<Box
|
||||
$direction="row"
|
||||
$align="center"
|
||||
$css={css`
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05));
|
||||
`}
|
||||
$padding={`${spacingsTokens['3xs']} 0`}
|
||||
data-testid={isPinned ? `doc-pinned-${doc.id}` : undefined}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{isPinned ? (
|
||||
<PinnedDocumentIcon
|
||||
{isPinned ? (
|
||||
<Box
|
||||
$position="relative"
|
||||
data-testid={isPinned ? `doc-pinned-${doc.id}` : undefined}
|
||||
>
|
||||
<Icon
|
||||
icon={
|
||||
<DocsIcon
|
||||
width={isSmallMobile ? '35px' : '40px'}
|
||||
height={isSmallMobile ? '35px' : '40px'}
|
||||
aria-hidden="true"
|
||||
data-testid="doc-simple-icon"
|
||||
color="var(--c--contextuals--content--semantic--info--tertiary)"
|
||||
/>
|
||||
}
|
||||
$shrink="0"
|
||||
/>
|
||||
|
||||
<PinnedIcon
|
||||
width="16px"
|
||||
height="16px"
|
||||
style={{ position: 'absolute', top: 0, right: 0 }}
|
||||
aria-hidden="true"
|
||||
data-testid="doc-pinned-icon"
|
||||
color="var(--c--contextuals--content--semantic--info--tertiary)"
|
||||
/>
|
||||
) : isChild ? (
|
||||
<ChildDocument
|
||||
aria-hidden="true"
|
||||
data-testid="doc-child-icon"
|
||||
color="var(--c--contextuals--content--semantic--info--tertiary)"
|
||||
/>
|
||||
) : (
|
||||
<SimpleFileIcon
|
||||
width="32px"
|
||||
height="32px"
|
||||
aria-hidden="true"
|
||||
data-testid="doc-simple-icon"
|
||||
color="var(--c--contextuals--content--semantic--info--tertiary)"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : isChild ? (
|
||||
<Icon
|
||||
icon={
|
||||
<SubdocsIcon
|
||||
width={isSmallMobile ? '35px' : '40px'}
|
||||
height={isSmallMobile ? '35px' : '40px'}
|
||||
aria-hidden="true"
|
||||
data-testid="doc-child-icon"
|
||||
color="var(--c--contextuals--content--semantic--info--tertiary)"
|
||||
/>
|
||||
}
|
||||
$shrink="0"
|
||||
/>
|
||||
) : (
|
||||
<Icon
|
||||
icon={
|
||||
<DocsIcon
|
||||
width={isSmallMobile ? '35px' : '40px'}
|
||||
height={isSmallMobile ? '35px' : '40px'}
|
||||
aria-hidden="true"
|
||||
data-testid="doc-simple-icon"
|
||||
color="var(--c--contextuals--content--semantic--info--tertiary)"
|
||||
/>
|
||||
}
|
||||
$shrink="0"
|
||||
/>
|
||||
)}
|
||||
<Box $justify="center" $overflow="auto" $gap="4xs">
|
||||
<Text
|
||||
$size="sm"
|
||||
@@ -113,7 +132,7 @@ export const SimpleDocItem = ({
|
||||
>
|
||||
{breadcrumb && (
|
||||
<Box $direction="row" $align="center" $gap="3xs">
|
||||
<ArrowSVG
|
||||
<ArrowIcon
|
||||
width="16px"
|
||||
height="16px"
|
||||
aria-hidden="true"
|
||||
|
||||
+76
-34
@@ -3,13 +3,17 @@ import {
|
||||
DragOverlay,
|
||||
Modifier,
|
||||
UniqueIdentifier,
|
||||
useDraggable,
|
||||
useDroppable,
|
||||
} from '@dnd-kit/core';
|
||||
import { getEventCoordinates } from '@dnd-kit/utilities';
|
||||
import { useModal } from '@gouvfr-lasuite/cunningham-react';
|
||||
import { TreeViewMoveModeEnum } from '@gouvfr-lasuite/ui-kit';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import { Card, Text } from '@/components';
|
||||
import { Doc, useMoveDoc, useTrans } from '@/docs/doc-management';
|
||||
@@ -18,8 +22,6 @@ import { useResponsiveStore } from '@/stores/useResponsiveStore';
|
||||
import { DocDragEndData, useDragAndDrop } from '../hooks/useDragAndDrop';
|
||||
|
||||
import { DocsGridItem } from './DocsGridItem';
|
||||
import { Draggable } from './Draggable';
|
||||
import { Droppable } from './Droppable';
|
||||
|
||||
const ModalConfirmationMoveDoc = dynamic(
|
||||
() =>
|
||||
@@ -114,6 +116,7 @@ export const DraggableDocGridContentList = ({
|
||||
|
||||
const dndAccessibility = useMemo(
|
||||
() => ({
|
||||
container: document.body,
|
||||
screenReaderInstructions: {
|
||||
draggable: t(
|
||||
'To pick up a draggable item, press space or enter. While dragging, use the arrow keys to move the item. Press space or enter again to drop the item in its new position, or press escape to cancel.',
|
||||
@@ -217,22 +220,25 @@ export const DraggableDocGridContentList = ({
|
||||
disabled={isDraggableDisabled}
|
||||
/>
|
||||
))}
|
||||
<DragOverlay dropAnimation={null}>
|
||||
<Card
|
||||
$width="fit-content"
|
||||
$radius="12px"
|
||||
data-testid="drag-doc-overlay"
|
||||
role="alert"
|
||||
aria-label={t('Drag and drop status')}
|
||||
$theme={cannotMoveDoc ? 'error' : 'brand'}
|
||||
$variation="tertiary"
|
||||
$scope="semantic"
|
||||
>
|
||||
<Text $size="xs" $weight="500" $withThemeInherited>
|
||||
{overlayText}
|
||||
</Text>
|
||||
</Card>
|
||||
</DragOverlay>
|
||||
{createPortal(
|
||||
<DragOverlay dropAnimation={null}>
|
||||
<Card
|
||||
$width="fit-content"
|
||||
$radius="12px"
|
||||
data-testid="drag-doc-overlay"
|
||||
role="alert"
|
||||
aria-label={t('Drag and drop status')}
|
||||
$theme={cannotMoveDoc ? 'error' : 'brand'}
|
||||
$variation="tertiary"
|
||||
$scope="semantic"
|
||||
>
|
||||
<Text $size="xs" $weight="500" $withThemeInherited>
|
||||
{overlayText}
|
||||
</Text>
|
||||
</Card>
|
||||
</DragOverlay>,
|
||||
document.body,
|
||||
)}
|
||||
</DndContext>
|
||||
{modalConfirmation.isOpen && (
|
||||
<ModalConfirmationMoveDoc
|
||||
@@ -263,35 +269,71 @@ export const DraggableDocGridItem = ({
|
||||
canDrag,
|
||||
updateCanDrop,
|
||||
}: DraggableDocGridItemProps) => {
|
||||
const canDrop = doc.abilities.move;
|
||||
const docCanDrop = doc.abilities.move;
|
||||
const enableDrop = canDrag && docCanDrop;
|
||||
|
||||
const { isOver, setNodeRef: setDropRef } = useDroppable({
|
||||
id: doc.id,
|
||||
data: doc,
|
||||
});
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef: setDragRef,
|
||||
} = useDraggable({ id: doc.id, data: doc, disabled });
|
||||
|
||||
useEffect(() => {
|
||||
updateCanDrop(docCanDrop, isOver);
|
||||
}, [docCanDrop, isOver, updateCanDrop]);
|
||||
|
||||
const setRef = useCallback(
|
||||
(node: HTMLElement | null) => {
|
||||
setDropRef(node);
|
||||
setDragRef(node);
|
||||
},
|
||||
[setDropRef, setDragRef],
|
||||
);
|
||||
|
||||
const isDragTarget = enableDrop && isOver;
|
||||
|
||||
return (
|
||||
<Droppable
|
||||
enabledDrop={canDrag}
|
||||
canDrop={canDrag && canDrop}
|
||||
onOver={(isOver) => updateCanDrop(canDrop, isOver)}
|
||||
id={doc.id}
|
||||
data={doc}
|
||||
>
|
||||
<Draggable id={doc.id} data={doc} disabled={disabled}>
|
||||
<DocsGridItem dragMode={dragMode} doc={doc} />
|
||||
</Draggable>
|
||||
</Droppable>
|
||||
<DocsGridItem
|
||||
ref={setRef}
|
||||
dragMode={dragMode}
|
||||
doc={doc}
|
||||
data-testid={`droppable-doc-${doc.id}`}
|
||||
$css={css`
|
||||
${
|
||||
isDragTarget
|
||||
? css`
|
||||
& > div {
|
||||
background-color: var(--c--globals--colors--brand-100);
|
||||
border: 1.5px solid var(--c--globals--colors--brand-500);
|
||||
border-radius: var(--c--globals--spacings--st);
|
||||
}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
`}
|
||||
{...listeners}
|
||||
{...attributes}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
|
||||
const { isDesktop } = useResponsiveStore();
|
||||
const { isLargeScreen } = useResponsiveStore();
|
||||
|
||||
if (docs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isDesktop) {
|
||||
if (isLargeScreen) {
|
||||
return <DraggableDocGridContentList docs={docs} />;
|
||||
}
|
||||
|
||||
// Render a non-draggable list for smaller screens
|
||||
return docs.map((doc) => (
|
||||
<DocsGridItem dragMode={false} doc={doc} key={doc.id} />
|
||||
<DocsGridItem key={doc.id} dragMode={false} doc={doc} />
|
||||
));
|
||||
};
|
||||
|
||||
@@ -272,7 +272,6 @@ export const DocMoveModal = ({
|
||||
/>
|
||||
<DocsGridItemDate
|
||||
doc={docSearch}
|
||||
isDesktop={isModal}
|
||||
isInTrashbin={false}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -5,17 +5,17 @@ import { InView } from 'react-intersection-observer';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import AllDocs from '@/assets/icons/doc-all.svg';
|
||||
import { Box, Card, Icon, Text } from '@/components';
|
||||
import { Box, Card, Icon, Loading, Text } from '@/components';
|
||||
import { useInfiniteDocs } from '@/docs/doc-management/api/useDocs';
|
||||
import { useImport } from '@/docs/doc-management/hooks/useImport';
|
||||
import { DocDefaultFilter } from '@/docs/doc-management/types';
|
||||
import DocsIcon from '@/icons/Docs.svg';
|
||||
import BinIcon from '@/icons/bin.svg';
|
||||
import { useResponsiveStore } from '@/stores';
|
||||
|
||||
import { useInfiniteDocsTrashbin } from '../api';
|
||||
import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
|
||||
|
||||
import { DocGridContentList } from './DocGridContentList';
|
||||
import { DocsGridLoader } from './DocsGridLoader';
|
||||
|
||||
type DocsGridProps = {
|
||||
target?: DocDefaultFilter;
|
||||
@@ -42,17 +42,10 @@ export const DocsGrid = ({
|
||||
target === DocDefaultFilter.MY_DOCS) &&
|
||||
isImportEnabled;
|
||||
|
||||
const { isDesktop } = useResponsiveStore();
|
||||
const { flexLeft, flexRight } = useResponsiveDocGrid();
|
||||
const { isDesktop, isSmallMobile } = useResponsiveStore();
|
||||
|
||||
const {
|
||||
data,
|
||||
isFetching,
|
||||
isRefetching,
|
||||
isLoading,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
} = useDocsQuery(target);
|
||||
const { data, isFetching, isLoading, fetchNextPage, hasNextPage } =
|
||||
useDocsQuery(target);
|
||||
|
||||
const docs = useMemo(() => {
|
||||
const allDocs = data?.pages.flatMap((page) => page.results) ?? [];
|
||||
@@ -81,18 +74,21 @@ export const DocsGrid = ({
|
||||
<Box
|
||||
className="--docs--doc-grid"
|
||||
$position="relative"
|
||||
$padding={{ horizontal: 'sm' }}
|
||||
$padding={{
|
||||
horizontal: isSmallMobile ? '0' : 'sm',
|
||||
vertical: isSmallMobile ? '0' : 'sm',
|
||||
}}
|
||||
$width="100%"
|
||||
$maxWidth="960px"
|
||||
$minHeight="0"
|
||||
$align="center"
|
||||
>
|
||||
<DocsGridLoader isLoading={isRefetching || loading || isImportPending} />
|
||||
<Card
|
||||
data-testid="docs-grid"
|
||||
$width="100%"
|
||||
$border="none"
|
||||
$background="transparent"
|
||||
$css={css`
|
||||
border: 1px solid var(--c--contextuals--border--surface--primary);
|
||||
${
|
||||
isDragOver
|
||||
? `
|
||||
@@ -109,51 +105,65 @@ export const DocsGrid = ({
|
||||
? getRootProps({ className: 'dropzone', tabIndex: -1 })
|
||||
: {})}
|
||||
>
|
||||
<DocGridTitleBar target={target} />
|
||||
{!hasDocs && !loading && (
|
||||
<Box $padding={{ vertical: 'sm' }} $align="center" $justify="center">
|
||||
<Text $size="sm" $weight="700">
|
||||
{t('No documents found')}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
<DocGridTitleBar target={target} isImportPending={isImportPending} />
|
||||
{!hasDocs && !loading && <DocGridNoDocs target={target} />}
|
||||
{hasDocs && (
|
||||
<Box
|
||||
$gap="6px"
|
||||
$padding={{ vertical: 'sm', horizontal: isDesktop ? 'md' : 'xs' }}
|
||||
>
|
||||
<Box aria-label={t('Documents grid')}>
|
||||
<Box
|
||||
aria-label={t('Documents grid')}
|
||||
$display="grid"
|
||||
$css={css`
|
||||
grid-template-columns: ${
|
||||
isSmallMobile
|
||||
? 'minmax(0, 550px) auto'
|
||||
: 'minmax(0, 550px) auto auto'
|
||||
};
|
||||
column-gap: 20px;
|
||||
`}
|
||||
>
|
||||
<Box
|
||||
$direction="row"
|
||||
$padding={{ horizontal: 'xs' }}
|
||||
$gap="10px"
|
||||
$display="grid"
|
||||
$css={css`
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
`}
|
||||
data-testid="docs-grid-header"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Box $flex={flexLeft} $padding="3xs">
|
||||
<Box $padding={{ all: '3xs' }}>
|
||||
<Text $size="xs" $variation="secondary" $weight="500">
|
||||
{t('Name')}
|
||||
</Text>
|
||||
</Box>
|
||||
{isDesktop && (
|
||||
<Box $flex={flexRight} $padding={{ vertical: '3xs' }}>
|
||||
{!isSmallMobile && (
|
||||
<Box $padding={{ vertical: '3xs' }}>
|
||||
<Text $size="xs" $weight="500" $variation="secondary">
|
||||
{DocDefaultFilter.TRASHBIN === target
|
||||
? t('Days remaining')
|
||||
: t('Updated at')}
|
||||
: t('Last modified')}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box role="list">
|
||||
<Box role="list" $display="contents">
|
||||
<DocGridContentList docs={docs} />
|
||||
</Box>
|
||||
</Box>
|
||||
{loading && (
|
||||
<Loading
|
||||
loaderProps={{ size: 'small' }}
|
||||
$margin={{ top: 'sm' }}
|
||||
/>
|
||||
)}
|
||||
{hasNextPage && !loading && (
|
||||
<InView
|
||||
data-testid="infinite-scroll-trigger"
|
||||
as="div"
|
||||
onChange={loadMore}
|
||||
style={{ margin: 'auto' }}
|
||||
>
|
||||
{!isFetching && hasNextPage && (
|
||||
<Button
|
||||
@@ -173,7 +183,13 @@ export const DocsGrid = ({
|
||||
);
|
||||
};
|
||||
|
||||
const DocGridTitleBar = ({ target }: { target: DocDefaultFilter }) => {
|
||||
const DocGridTitleBar = ({
|
||||
target,
|
||||
isImportPending,
|
||||
}: {
|
||||
target: DocDefaultFilter;
|
||||
isImportPending: boolean;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { isDesktop } = useResponsiveStore();
|
||||
|
||||
@@ -197,9 +213,6 @@ const DocGridTitleBar = ({ target }: { target: DocDefaultFilter }) => {
|
||||
vertical: 'sm',
|
||||
horizontal: isDesktop ? 'md' : 'xs',
|
||||
}}
|
||||
$css={css`
|
||||
border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
|
||||
`}
|
||||
$align="center"
|
||||
$justify="space-between"
|
||||
>
|
||||
@@ -208,11 +221,56 @@ const DocGridTitleBar = ({ target }: { target: DocDefaultFilter }) => {
|
||||
<Text as="h2" $size="h4" $margin="none" tabIndex={-1}>
|
||||
{title}
|
||||
</Text>
|
||||
{isImportPending && <Loading loaderProps={{ size: 'small' }} />}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const DocGridNoDocs = ({ target }: { target: DocDefaultFilter }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Box as="p" $padding={{ vertical: 'sm' }} $align="center" $justify="center">
|
||||
{[
|
||||
DocDefaultFilter.ALL_DOCS,
|
||||
DocDefaultFilter.MY_DOCS,
|
||||
DocDefaultFilter.SHARED_WITH_ME,
|
||||
].includes(target) && (
|
||||
<>
|
||||
<DocsIcon width={56} height={56} aria-hidden="true" />
|
||||
<Text $size="sm" $weight="700">
|
||||
{t('No doc yet')}
|
||||
</Text>
|
||||
{[DocDefaultFilter.ALL_DOCS, DocDefaultFilter.MY_DOCS].includes(
|
||||
target,
|
||||
) && (
|
||||
<Text $size="sm" $weight="400" $variation="secondary">
|
||||
{t('Your docs will appear here.')}
|
||||
</Text>
|
||||
)}
|
||||
{target === DocDefaultFilter.SHARED_WITH_ME && (
|
||||
<Text $size="sm" $weight="400" $variation="secondary">
|
||||
{t('Your shared docs will appear here.')}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{target === DocDefaultFilter.TRASHBIN && (
|
||||
<>
|
||||
<BinIcon width={56} height={56} aria-hidden="true" />
|
||||
<Text $size="sm" $weight="700">
|
||||
{t('No doc deleted')}
|
||||
</Text>
|
||||
<Text $size="sm" $weight="400" $variation="secondary">
|
||||
{t('Deleted docs will appear here.')}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const useDocsQuery = (target: DocDefaultFilter) => {
|
||||
const trashbinQuery = useInfiniteDocsTrashbin(
|
||||
{
|
||||
|
||||
+124
-32
@@ -1,4 +1,8 @@
|
||||
import { Button } from '@gouvfr-lasuite/cunningham-react';
|
||||
import {
|
||||
Button,
|
||||
VariantType,
|
||||
useToastProvider,
|
||||
} from '@gouvfr-lasuite/cunningham-react';
|
||||
import { DropdownMenu, DropdownMenuItem } from '@gouvfr-lasuite/ui-kit';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useState } from 'react';
|
||||
@@ -12,6 +16,7 @@ import KeepSVG from '@/assets/icons/ui-kit/keep.svg';
|
||||
import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg';
|
||||
import LeaveSVG from '@/assets/icons/ui-kit/leave.svg';
|
||||
import MoreSVG from '@/assets/icons/ui-kit/more_horiz.svg';
|
||||
import { Icon } from '@/components/Icon';
|
||||
import {
|
||||
Doc,
|
||||
KEY_LIST_DOC,
|
||||
@@ -19,11 +24,14 @@ import {
|
||||
useCreateFavoriteDoc,
|
||||
useDeleteFavoriteDoc,
|
||||
useDuplicateDoc,
|
||||
useRestoreDoc,
|
||||
useTrans,
|
||||
} from '@/docs/doc-management';
|
||||
import { focusMainContentStart } from '@/layouts/utils';
|
||||
import { useFocusStore } from '@/stores';
|
||||
|
||||
import { KEY_LIST_DOC_TRASHBIN } from '../api/useDocsTrashbin';
|
||||
|
||||
import { DocMoveModal } from './DocMoveModal';
|
||||
|
||||
const DocShareModal = dynamic(
|
||||
@@ -54,17 +62,27 @@ const ConfirmationLeaveModal = dynamic(
|
||||
|
||||
interface DocsGridActionsProps {
|
||||
doc: Doc;
|
||||
isInTrashbin?: boolean;
|
||||
}
|
||||
|
||||
export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
|
||||
export const DocsGridActions = ({
|
||||
doc,
|
||||
isInTrashbin,
|
||||
}: DocsGridActionsProps) => {
|
||||
return isInTrashbin ? (
|
||||
<DocsGridTrashbinActions doc={doc} />
|
||||
) : (
|
||||
<DocsGridActionsGlobal doc={doc} />
|
||||
);
|
||||
};
|
||||
|
||||
const DocsGridActionsGlobal = ({ doc }: { doc: Doc }) => {
|
||||
const { t } = useTranslation();
|
||||
const { restoreFocus, addLastFocus } = useFocusStore();
|
||||
const [openDropdown, setOpenDropdown] = useState(false);
|
||||
const { restoreFocus } = useFocusStore();
|
||||
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
|
||||
const [isModalLeaveOpen, setIsModalLeaveOpen] = useState(false);
|
||||
const [isModalShareOpen, setIsModalShareOpen] = useState(false);
|
||||
const [isModalMoveOpen, setIsModalMoveOpen] = useState(false);
|
||||
const { untitledDocument } = useTrans();
|
||||
|
||||
const { mutate: duplicateDoc } = useDuplicateDoc({
|
||||
onSuccess: () => {
|
||||
@@ -150,33 +168,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu
|
||||
options={options}
|
||||
isOpen={openDropdown}
|
||||
shouldCloseOnInteractOutside={() => true}
|
||||
onOpenChange={setOpenDropdown}
|
||||
>
|
||||
<Button
|
||||
data-testid={`docs-grid-actions-button-${doc.id}`}
|
||||
aria-label={t(
|
||||
'Open the menu of actions for the document: {{title}}',
|
||||
{
|
||||
title: doc.title || untitledDocument,
|
||||
},
|
||||
)}
|
||||
size="small"
|
||||
icon={<MoreSVG width={16} height={16} aria-hidden="true" />}
|
||||
color="neutral"
|
||||
variant="tertiary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setOpenDropdown((o) => !o);
|
||||
addLastFocus(e.currentTarget);
|
||||
}}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
|
||||
<DocsGridDropdown doc={doc} options={options} />
|
||||
{isModalRemoveOpen && (
|
||||
<ModalRemoveDoc
|
||||
onClose={() => {
|
||||
@@ -217,3 +209,103 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
interface DocsGridTrashbinActionsProps {
|
||||
doc: Doc;
|
||||
}
|
||||
|
||||
export const DocsGridTrashbinActions = ({
|
||||
doc,
|
||||
}: DocsGridTrashbinActionsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToastProvider();
|
||||
const { mutate: restoreDoc } = useRestoreDoc({
|
||||
listInvalidQueries: [
|
||||
KEY_LIST_DOC,
|
||||
KEY_LIST_DOC_TRASHBIN,
|
||||
KEY_LIST_FAVORITE_DOC,
|
||||
],
|
||||
options: {
|
||||
onSuccess: (_data) => {
|
||||
toast(t('The document has been restored.'), VariantType.SUCCESS, {
|
||||
duration: 4000,
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast(
|
||||
t('An error occurred while restoring the document: {{error}}', {
|
||||
error: error?.message,
|
||||
}),
|
||||
VariantType.ERROR,
|
||||
{
|
||||
duration: 4000,
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!doc.abilities.restore) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const options: DropdownMenuItem[] = [
|
||||
{
|
||||
label: t('Restore'),
|
||||
icon: (
|
||||
<Icon
|
||||
$size="20px"
|
||||
iconName="undo"
|
||||
aria-hidden="true"
|
||||
variant="symbols-outlined"
|
||||
/>
|
||||
),
|
||||
callback: () => {
|
||||
restoreDoc({
|
||||
docId: doc.id,
|
||||
});
|
||||
},
|
||||
testId: `docs-grid-actions-restore-${doc.id}`,
|
||||
},
|
||||
];
|
||||
|
||||
return <DocsGridDropdown doc={doc} options={options} />;
|
||||
};
|
||||
|
||||
interface DocsGridDropdownProps {
|
||||
doc: Doc;
|
||||
options: DropdownMenuItem[];
|
||||
}
|
||||
|
||||
const DocsGridDropdown = ({ doc, options }: DocsGridDropdownProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [openDropdown, setOpenDropdown] = useState(false);
|
||||
const { addLastFocus } = useFocusStore();
|
||||
const { untitledDocument } = useTrans();
|
||||
|
||||
return (
|
||||
<DropdownMenu
|
||||
options={options}
|
||||
isOpen={openDropdown}
|
||||
shouldCloseOnInteractOutside={() => true}
|
||||
onOpenChange={setOpenDropdown}
|
||||
>
|
||||
<Button
|
||||
data-testid={`docs-grid-actions-button-${doc.id}`}
|
||||
aria-label={t('Open the menu of actions for the document: {{title}}', {
|
||||
title: doc.title || untitledDocument,
|
||||
})}
|
||||
size="small"
|
||||
icon={<MoreSVG width={16} height={16} aria-hidden="true" />}
|
||||
color="neutral"
|
||||
variant="tertiary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setOpenDropdown((o) => !o);
|
||||
addLastFocus(e.currentTarget);
|
||||
}}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Tooltip } from '@gouvfr-lasuite/cunningham-react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { KeyboardEvent } from 'react';
|
||||
import type { KeyboardEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import type { BoxType } from '@/components';
|
||||
import { Box, Icon, StyledLink, Text } from '@/components';
|
||||
import { useConfig } from '@/core';
|
||||
import { useCunninghamTheme } from '@/cunningham';
|
||||
@@ -12,27 +13,27 @@ import { useLeftPanelStore } from '@/features/left-panel';
|
||||
import { useDate } from '@/hooks';
|
||||
import { useResponsiveStore } from '@/stores';
|
||||
|
||||
import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
|
||||
|
||||
import { DocsGridActions } from './DocsGridActions';
|
||||
import { DocsGridItemSharedButton } from './DocsGridItemSharedButton';
|
||||
import { DocsGridTrashbinActions } from './DocsGridTrashbinActions';
|
||||
|
||||
type DocsGridItemProps = {
|
||||
type DocsGridItemProps = BoxType & {
|
||||
doc: Doc;
|
||||
dragMode?: boolean;
|
||||
};
|
||||
|
||||
export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
|
||||
export const DocsGridItem = ({
|
||||
doc,
|
||||
dragMode = false,
|
||||
$css,
|
||||
...boxProps
|
||||
}: DocsGridItemProps) => {
|
||||
const searchParams = useSearchParams();
|
||||
const target = searchParams.get('target');
|
||||
const isInTrashbin = target === 'trashbin';
|
||||
const { untitledDocument } = useTrans();
|
||||
|
||||
const { t } = useTranslation();
|
||||
const { isDesktop, isLargeScreen } = useResponsiveStore();
|
||||
const { flexLeft, flexRight } = useResponsiveDocGrid();
|
||||
const { spacingsTokens } = useCunninghamTheme();
|
||||
const { isSmallMobile, isLargeScreen } = useResponsiveStore();
|
||||
const dateToDisplay = useDateToDisplay(doc, isInTrashbin);
|
||||
const { openPanel } = useLeftPanelStore();
|
||||
|
||||
@@ -53,16 +54,42 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
$display="grid"
|
||||
$padding={{ vertical: '4xs' }}
|
||||
$align="center"
|
||||
$cursor="pointer"
|
||||
$css={css`
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
|
||||
&:nth-child(1n):not(:last-child) {
|
||||
border-bottom: 1px solid
|
||||
var(--c--contextuals--border--surface--primary);
|
||||
}
|
||||
|
||||
${$css}
|
||||
`}
|
||||
className="--docs--doc-grid-item"
|
||||
aria-label={t('Open document: {{title}}', {
|
||||
title: doc.title || untitledDocument,
|
||||
})}
|
||||
{...boxProps}
|
||||
role="listitem"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Box
|
||||
tabIndex={0}
|
||||
$display="grid"
|
||||
$direction="row"
|
||||
$width="100%"
|
||||
$align="center"
|
||||
role="listitem"
|
||||
$gap="20px"
|
||||
$padding={{ vertical: '4xs', horizontal: isDesktop ? 'base' : 'xs' }}
|
||||
$margin={{
|
||||
vertical: '3xs',
|
||||
}}
|
||||
$padding={{ right: '3xs' }}
|
||||
$css={css`
|
||||
cursor: pointer;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 1 / -1;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: ${
|
||||
@@ -72,13 +99,8 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
|
||||
};
|
||||
}
|
||||
`}
|
||||
className="--docs--doc-grid-item"
|
||||
aria-label={t('Open document: {{title}}', {
|
||||
title: doc.title || untitledDocument,
|
||||
})}
|
||||
>
|
||||
<Box
|
||||
$flex={flexLeft}
|
||||
$css={css`
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
@@ -98,13 +120,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
|
||||
</StyledLink>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
$flex={flexRight}
|
||||
$direction="row"
|
||||
$align="center"
|
||||
$justify={isDesktop ? 'space-between' : 'flex-end'}
|
||||
$gap="32px"
|
||||
>
|
||||
{!isSmallMobile && (
|
||||
<StyledLink
|
||||
href={`/docs/${doc.id}`}
|
||||
tabIndex={-1}
|
||||
@@ -113,26 +129,24 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
|
||||
date: dateToDisplay,
|
||||
})}
|
||||
>
|
||||
<DocsGridItemDate
|
||||
doc={doc}
|
||||
isDesktop={isDesktop}
|
||||
isInTrashbin={isInTrashbin}
|
||||
/>
|
||||
<DocsGridItemDate doc={doc} isInTrashbin={isInTrashbin} />
|
||||
</StyledLink>
|
||||
)}
|
||||
|
||||
<Box $direction="row" $align="center" $gap={spacingsTokens.lg}>
|
||||
{isDesktop && (
|
||||
<DocsGridItemSharedButton doc={doc} disabled={isInTrashbin} />
|
||||
)}
|
||||
{isInTrashbin ? (
|
||||
<DocsGridTrashbinActions doc={doc} />
|
||||
) : (
|
||||
<DocsGridActions doc={doc} />
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
$direction="row"
|
||||
$align="center"
|
||||
$justify="flex-end"
|
||||
$gap="sm"
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{!isSmallMobile && (
|
||||
<DocsGridItemSharedButton doc={doc} disabled={isInTrashbin} />
|
||||
)}
|
||||
<DocsGridActions doc={doc} isInTrashbin={isInTrashbin} />
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -144,7 +158,7 @@ export const DocsGridItemTitle = ({
|
||||
withTooltip: boolean;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { isDesktop } = useResponsiveStore();
|
||||
const { isDesktop, isSmallMobile } = useResponsiveStore();
|
||||
const { spacingsTokens } = useCunninghamTheme();
|
||||
const isPublic = doc.link_reach === LinkReach.PUBLIC;
|
||||
const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
|
||||
@@ -159,7 +173,11 @@ export const DocsGridItemTitle = ({
|
||||
$padding={{ right: isDesktop ? 'md' : '3xs' }}
|
||||
$maxWidth="100%"
|
||||
>
|
||||
<SimpleDocItem isPinned={doc.is_favorite} doc={doc} />
|
||||
<SimpleDocItem
|
||||
isPinned={doc.is_favorite}
|
||||
doc={doc}
|
||||
showDate={isSmallMobile}
|
||||
/>
|
||||
{isShared && (
|
||||
<Box
|
||||
$padding={{ top: !isDesktop ? '4xs' : undefined }}
|
||||
@@ -237,19 +255,13 @@ const useDateToDisplay = (doc: Doc, isInTrashbin: boolean) => {
|
||||
|
||||
export const DocsGridItemDate = ({
|
||||
doc,
|
||||
isDesktop,
|
||||
isInTrashbin,
|
||||
}: {
|
||||
doc: Doc;
|
||||
isDesktop: boolean;
|
||||
isInTrashbin: boolean;
|
||||
}) => {
|
||||
const dateToDisplay = useDateToDisplay(doc, isInTrashbin);
|
||||
|
||||
if (!isDesktop) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Text
|
||||
$size="xs"
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
import { Loader } from '@gouvfr-lasuite/cunningham-react';
|
||||
import { createGlobalStyle, css } from 'styled-components';
|
||||
|
||||
import { Box } from '@/components';
|
||||
|
||||
const DocsGridLoaderStyle = createGlobalStyle`
|
||||
body, main {
|
||||
overflow: hidden!important;
|
||||
overflow-y: hidden!important;
|
||||
}
|
||||
`;
|
||||
|
||||
type DocsGridLoaderProps = {
|
||||
isLoading: boolean;
|
||||
};
|
||||
|
||||
export const DocsGridLoader = ({ isLoading }: DocsGridLoaderProps) => {
|
||||
if (!isLoading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DocsGridLoaderStyle />
|
||||
<Box
|
||||
data-testid="grid-loader"
|
||||
$align="center"
|
||||
$justify="center"
|
||||
$height="100%"
|
||||
$width="100%"
|
||||
$background="rgba(255, 255, 255, 0.5)"
|
||||
$zIndex={998}
|
||||
$position="absolute"
|
||||
className="--docs--doc-grid-loader"
|
||||
$css={css`
|
||||
pointer-events: none;
|
||||
`}
|
||||
>
|
||||
<Loader />
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
-105
@@ -1,105 +0,0 @@
|
||||
import {
|
||||
VariantType,
|
||||
useToastProvider,
|
||||
} from '@gouvfr-lasuite/cunningham-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
|
||||
import {
|
||||
Doc,
|
||||
KEY_LIST_DOC,
|
||||
KEY_LIST_FAVORITE_DOC,
|
||||
useRestoreDoc,
|
||||
useTrans,
|
||||
} from '@/docs/doc-management';
|
||||
|
||||
import { KEY_LIST_DOC_TRASHBIN } from '../api';
|
||||
|
||||
interface DocsGridTrashbinActionsProps {
|
||||
doc: Doc;
|
||||
}
|
||||
|
||||
export const DocsGridTrashbinActions = ({
|
||||
doc,
|
||||
}: DocsGridTrashbinActionsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { untitledDocument } = useTrans();
|
||||
const { toast } = useToastProvider();
|
||||
const { mutate: restoreDoc, error } = useRestoreDoc({
|
||||
listInvalidQueries: [
|
||||
KEY_LIST_DOC,
|
||||
KEY_LIST_DOC_TRASHBIN,
|
||||
KEY_LIST_FAVORITE_DOC,
|
||||
],
|
||||
options: {
|
||||
onSuccess: (_data) => {
|
||||
toast(t('The document has been restored.'), VariantType.SUCCESS, {
|
||||
duration: 4000,
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast(
|
||||
t('An error occurred while restoring the document: {{error}}', {
|
||||
error: error?.message,
|
||||
}),
|
||||
VariantType.ERROR,
|
||||
{
|
||||
duration: 4000,
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const options: DropdownMenuOption[] = [
|
||||
{
|
||||
label: t('Restore'),
|
||||
icon: (
|
||||
<Icon
|
||||
$size="20px"
|
||||
iconName="undo"
|
||||
aria-hidden="true"
|
||||
variant="symbols-outlined"
|
||||
/>
|
||||
),
|
||||
callback: () => {
|
||||
restoreDoc({
|
||||
docId: doc.id,
|
||||
});
|
||||
},
|
||||
testId: `docs-grid-actions-restore-${doc.id}`,
|
||||
},
|
||||
];
|
||||
|
||||
const documentTitle = doc.title || untitledDocument;
|
||||
const menuLabel = t('Open the menu of actions for the document: {{title}}', {
|
||||
title: documentTitle,
|
||||
});
|
||||
|
||||
return (
|
||||
<DropdownMenu
|
||||
options={options}
|
||||
label={menuLabel}
|
||||
aria-label={t('More options')}
|
||||
buttonCss={css`
|
||||
&:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon
|
||||
data-testid={`docs-grid-actions-button-${doc.id}`}
|
||||
iconName="more_horiz"
|
||||
$theme="brand"
|
||||
$variation="secondary"
|
||||
$css={css`
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Data, useDraggable } from '@dnd-kit/core';
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
type DraggableProps<T> = {
|
||||
id: string;
|
||||
data?: Data<T>;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const Draggable = <T,>(props: PropsWithChildren<DraggableProps<T>>) => {
|
||||
const { attributes, listeners, setNodeRef } = useDraggable({
|
||||
id: props.id,
|
||||
data: props.data,
|
||||
disabled: props.disabled,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
{...listeners}
|
||||
{...attributes}
|
||||
data-testid={`draggable-doc-${props.id}`}
|
||||
className="--docs--grid-draggable"
|
||||
role="none"
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,54 +0,0 @@
|
||||
import { Data, useDroppable } from '@dnd-kit/core';
|
||||
import { PropsWithChildren, useEffect } from 'react';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import { Box } from '@/components';
|
||||
import { Doc } from '@/docs/doc-management';
|
||||
|
||||
type DroppableProps = {
|
||||
id: string;
|
||||
onOver?: (isOver: boolean, data?: Data<Doc>) => void;
|
||||
data?: Data<Doc>;
|
||||
enabledDrop?: boolean;
|
||||
canDrop?: boolean;
|
||||
};
|
||||
|
||||
export const Droppable = ({
|
||||
onOver,
|
||||
canDrop,
|
||||
data,
|
||||
children,
|
||||
id,
|
||||
}: PropsWithChildren<DroppableProps>) => {
|
||||
const { isOver, setNodeRef } = useDroppable({
|
||||
id,
|
||||
data,
|
||||
});
|
||||
|
||||
const enableHover = canDrop && isOver;
|
||||
|
||||
useEffect(() => {
|
||||
onOver?.(isOver, data);
|
||||
}, [isOver, data, onOver]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={setNodeRef}
|
||||
data-testid={`droppable-doc-${id}`}
|
||||
role="none"
|
||||
$css={css`
|
||||
border-radius: var(--c--globals--spacings--st);
|
||||
background-color: ${
|
||||
enableHover ? 'var(--c--globals--colors--brand-100)' : 'transparent'
|
||||
};
|
||||
border: 1.5px solid
|
||||
${
|
||||
enableHover ? 'var(--c--globals--colors--brand-500)' : 'transparent'
|
||||
};
|
||||
`}
|
||||
className="--docs--grid-droppable"
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
-20
@@ -16,23 +16,6 @@ describe('DocsGridItemDate', () => {
|
||||
fetchMock.mockGlobal();
|
||||
});
|
||||
|
||||
it('should not render date when not on desktop', () => {
|
||||
render(
|
||||
<DocsGridItemDate
|
||||
doc={
|
||||
{ updated_at: DateTime.now().minus({ minutes: 1 }).toISO() } as Doc
|
||||
}
|
||||
isDesktop={false}
|
||||
isInTrashbin={false}
|
||||
/>,
|
||||
{
|
||||
wrapper: AppWrapper,
|
||||
},
|
||||
);
|
||||
|
||||
expect(screen.queryByText('1 minute ago')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
[
|
||||
{
|
||||
updated_at: DateTime.now().minus({ seconds: 1 }).toISO(),
|
||||
@@ -63,7 +46,6 @@ describe('DocsGridItemDate', () => {
|
||||
updated_at,
|
||||
} as Doc
|
||||
}
|
||||
isDesktop={true}
|
||||
isInTrashbin={false}
|
||||
/>,
|
||||
{ wrapper: AppWrapper },
|
||||
@@ -85,7 +67,6 @@ describe('DocsGridItemDate', () => {
|
||||
updated_at: DateTime.now().minus({ days: 5 }).toISO(),
|
||||
} as Doc
|
||||
}
|
||||
isDesktop={true}
|
||||
isInTrashbin={false}
|
||||
/>,
|
||||
{ wrapper: AppWrapper },
|
||||
@@ -133,7 +114,6 @@ describe('DocsGridItemDate', () => {
|
||||
updated_at,
|
||||
} as Doc
|
||||
}
|
||||
isDesktop={true}
|
||||
isInTrashbin={true}
|
||||
/>,
|
||||
{ wrapper: AppWrapper },
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
export * from './DocsGrid';
|
||||
export * from './DocsGridActions';
|
||||
export * from './DocsGridLoader';
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { useResponsiveStore } from '@/stores';
|
||||
|
||||
export const useResponsiveDocGrid = () => {
|
||||
const { isDesktop, screenWidth } = useResponsiveStore();
|
||||
|
||||
const flexLeft = useMemo(() => {
|
||||
if (!isDesktop) {
|
||||
return 1;
|
||||
} else if (screenWidth <= 1100) {
|
||||
return 6;
|
||||
} else if (screenWidth < 1200) {
|
||||
return 8;
|
||||
}
|
||||
return 8;
|
||||
}, [isDesktop, screenWidth]);
|
||||
|
||||
const flexRight = useMemo(() => {
|
||||
if (!isDesktop) {
|
||||
return undefined;
|
||||
} else if (screenWidth <= 1200) {
|
||||
return 5;
|
||||
}
|
||||
return 4;
|
||||
}, [isDesktop, screenWidth]);
|
||||
|
||||
return { flexLeft, flexRight };
|
||||
};
|
||||
@@ -37,9 +37,10 @@ export const LeftPanel = ({ isResizable }: { isResizable?: boolean }) => {
|
||||
data-testid="left-panel"
|
||||
aria-label={t('Left panel')}
|
||||
$width={isResizable ? '100%' : '300px'}
|
||||
$height="100dvh"
|
||||
$overflow="hidden"
|
||||
$css={css`
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
background-color: var(--c--contextuals--background--surface--primary);
|
||||
box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
||||
transition:
|
||||
|
||||
@@ -46,6 +46,7 @@ const Page: NextPageWithLayout = () => {
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
}}
|
||||
loading="eager"
|
||||
/>
|
||||
|
||||
<Text
|
||||
|
||||
@@ -38,7 +38,8 @@ Page.getLayout = function getLayout(page: ReactElement) {
|
||||
return (
|
||||
<MainLayout
|
||||
propsContent={{
|
||||
$background: 'var(--c--contextuals--background--surface--tertiary)',
|
||||
$background:
|
||||
'linear-gradient(53deg, var(--c--contextuals--background--surface--primary) 39.96%, var(--c--contextuals--background--semantic--brand--tertiary) 125.64%)',
|
||||
}}
|
||||
>
|
||||
{page}
|
||||
|
||||
Reference in New Issue
Block a user