frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit styles

Browse Source
This commit is contained in:
smanylov
2026-01-21 15:05:02 +07:00
parent fb661df8a1
commit fc7efbfa07
8 changed files with 212 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/pages/dashboard/page.tsx
-1
View File
@@ -37,7 +37,6 @@ export default function Page() {
<DahboardLimitsSection /> <DahboardLimitsSection />
<DahboardGeographySection /> <DahboardGeographySection />
</div> </div>
<FilesTable fileType={'all'} />
<DashboardLastCheck /> <DashboardLastCheck />
</Suspense> </Suspense>
); );
src/app/[locale]/pages/marking-photo/page.tsx
-5
View File
@@ -1,10 +1,6 @@
import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
import FilesTable from '@/app/ui/dashboard/files-table'; import FilesTable from '@/app/ui/dashboard/files-table';
import PageTitle from '@/app/ui/page-title';
import UploadSectionFile from '@/app/components/upload-section-file'; import UploadSectionFile from '@/app/components/upload-section-file';
import { getAllowedFilesExtensions } from '@/app/actions/fileUpload'; import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
import { StackedBarChart } from '@/app/components/StackedBarChart';
import { TestComponent } from '@/app/components/test-component';
import PageTitleColorFrame from '@/app/ui/page-title-color-frame'; import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
import ProtectionStatistic from '@/app/ui/marking-page/new/protection-statistic'; import ProtectionStatistic from '@/app/ui/marking-page/new/protection-statistic';
@@ -46,7 +42,6 @@ export default async function Page() {
title="image-protection" title="image-protection"
description="multi-layered-protection-for-your-images" description="multi-layered-protection-for-your-images"
/> />
<TestComponent />
<ProtectionStatistic fileType={FILE_TYPE}/> <ProtectionStatistic fileType={FILE_TYPE}/>
{/* <div className="split-blocks"> {/* <div className="split-blocks">
<ProtectionSummary fileType={FILE_TYPE} /> <ProtectionSummary fileType={FILE_TYPE} />
src/app/components/tanstakTable.tsx
+84 -51
View File
@@ -98,7 +98,7 @@ const cutFileName = (fileName: string) => {
const extension = fileName.substring(lastDotIndex); const extension = fileName.substring(lastDotIndex);
if (fileName.length <= MAX_FILE_NAME_LENGTH) { if (fileName.length <= MAX_FILE_NAME_LENGTH) {
return nameWithoutExtension; return fileName;
} }
const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3; const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
@@ -199,14 +199,15 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div> </div>
), ),
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2 table-item">
<FileTypeIcon type={row.original.fileType} /> <FileTypeIcon type={row.original.fileType} />
<div> <div>
<div className="font-medium w-full truncate" title={row.original.fileName}> <div className="font-medium w-full truncate" title={row.original.fileName}>
{/* {row.original.fileName} */} <span className="font-semibold">
{cutFileName(row.original.fileName)} {cutFileName(row.original.fileName)}
</span>
<br /> <br />
{cutFileExtension(row.original.fileName)} • <span className="text-[#10b981]">{row.original?.status}</span> <span className="table-item-extension">{cutFileExtension(row.original.fileName)}</span> <span className="table-item-protected">{row.original?.status}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -283,7 +284,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div> </div>
), ),
cell: ({ row }) => ( cell: ({ row }) => (
<div className="text-center"> <div className="text-center table-item">
{row.original.size !== undefined ? convertBytes(row.original.size) : '-'} {row.original.size !== undefined ? convertBytes(row.original.size) : '-'}
</div> </div>
), ),
@@ -317,7 +318,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
), ),
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<div className="text-center"> <div className="text-center table-item">
{row.original.uploadDate ? ( {row.original.uploadDate ? (
<> <>
{formatDate(row.original.uploadDate)} {formatDate(row.original.uploadDate)}
@@ -361,8 +362,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
), ),
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<div className={`text-center font-semibold`}> <div className="text-center font-semibold table-item">
{t('status')} <span className="table-item-status">
{t('status')}
</span>
</div> </div>
) )
}, },
@@ -378,33 +381,39 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
}, },
cell: ({ row }) => ( cell: ({ row }) => (
<div className="actions"> <div className="actions">
<div className="actions-group"> <div className="actions-group" style={{ display: "none" }}>
<button <button
onClick={() => handleView(row.original)} onClick={() => handleView(row.original)}
className="bg-blue-500 hover:bg-blue-600" className="bg-blue-500 hover:bg-blue-600"
> >
<IconEye /> <IconEye />
</button> </button>
<button
onClick={() => handleDownload(row.original)}
disabled={isFileLoading}
className="bg-green-500 hover:bg-green-600"
>
<IconFileDownload />
</button>
</div>
<div className="actions-group">
<button <button
onClick={() => handleProtect(row.original)} onClick={() => handleProtect(row.original)}
className="bg-violet-500 hover:bg-violet-600" className="bg-violet-500 hover:bg-violet-600"
> >
<IconShieldExclamation /> <IconShieldExclamation />
</button> </button>
</div>
<div className="actions-group">
<button
onClick={() => handleDownload(row.original)}
disabled={isFileLoading}
className="table-action-download"
>
<IconFileDownload />
<span>
{t('download')}
</span>
</button>
<button <button
onClick={() => handleOpenWindowForRemove(row.original)} onClick={() => handleOpenWindowForRemove(row.original)}
className="bg-red-700 hover:bg-red-800" className="table-action-delete"
> >
<IconDelete /> <IconDelete />
<span>
{t('delete')}
</span>
</button> </button>
</div> </div>
@@ -624,9 +633,25 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
return ( return (
<div className="tanstak-table-wrapper"> <div className="tanstak-table-wrapper">
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow> <h3
className="tanstak-table-title"
>
{(() => {
switch (fileType) {
case 'image':
return t('protected-image')
case 'video':
return t('protected-video')
case 'audio':
return t('protected-audio')
default:
return t('table-description')
}
})()}
</h3>
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow} />
{/* Фильтры */} {/* Фильтры */}
<div className="tanstak-table-filtres"> <div className="tanstak-table-filtres" style={{ display: "none" }}>
<div className="table-filtres-wrapper"> <div className="table-filtres-wrapper">
<div className="table-filtres-item"> <div className="table-filtres-item">
<div className="table-filtres-label">{t('date-filter')}:</div> <div className="table-filtres-label">{t('date-filter')}:</div>
@@ -779,20 +804,24 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div> </div>
<div className="pagination-controls"> <div className="pagination-controls">
<button {table.getCanPreviousPage() && (
className="arrow" <button
onClick={() => table.firstPage()} className="arrow"
disabled={!table.getCanPreviousPage()} onClick={() => table.firstPage()}
> disabled={!table.getCanPreviousPage()}
<IconDoubleArrowLeft /> >
</button> <IconDoubleArrowLeft />
<button </button>
className="arrow" )}
onClick={() => table.previousPage()} {table.getCanPreviousPage() && (
disabled={!table.getCanPreviousPage()} <button
> className="arrow"
<IconArrowLeft /> onClick={() => table.previousPage()}
</button> disabled={!table.getCanPreviousPage()}
>
<IconArrowLeft />
</button>
)}
<div className="pagination-controls-pages"> <div className="pagination-controls-pages">
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => { {Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
@@ -822,22 +851,26 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
})} })}
</div> </div>
<button {table.getCanNextPage() && (
className="arrow" <button
onClick={() => table.nextPage()} className="arrow"
disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}
> disabled={!table.getCanNextPage()}
<IconArrowRight /> >
</button> <IconArrowRight />
<button </button>
className="arrow" )}
onClick={() => table.lastPage()} {table.getCanNextPage() && (
disabled={!table.getCanNextPage()} <button
> className="arrow"
<IconDoubleArrowRight /> onClick={() => table.lastPage()}
</button> disabled={!table.getCanNextPage()}
>
<IconDoubleArrowRight />
</button>
)}
</div> </div>
</div> </div>
</div> </div >
); );
} }
src/app/styles/global-styles.scss
+12 -3
View File
@@ -370,15 +370,24 @@
.color { .color {
&-image { &-image {
color: v.$color-image; color: v.$white;
background: v.$color-image;
padding: 8px;
border-radius: 6px;
} }
&-audio { &-audio {
color: v.$color-audio; color: v.$white;
background: v.$color-audio;
padding: 8px;
border-radius: 6px;
} }
&-video { &-video {
color: v.$color-video; color: v.$white;
background: v.$color-video;
padding: 8px;
border-radius: 6px;
} }
} }
src/app/styles/pages-styles.scss
+101 -14
View File
@@ -463,6 +463,24 @@
border-bottom: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200);
} }
.tanstak-table-title {
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
color: #1f2937;
margin-bottom: 20px;
&::before {
content: '';
width: 6px;
height: 6px;
background: #6366f1;
border-radius: 50%;
margin-right: 10px;
}
}
.tanstak-table-filtres { .tanstak-table-filtres {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -544,6 +562,12 @@
border: 2px solid #e2e8f0; border: 2px solid #e2e8f0;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 1px 2px #0000000d; box-shadow: 0 1px 2px #0000000d;
color: v.$p-color;
.icon {
width: 18px;
}
/* */ /* */
&:hover { &:hover {
@@ -562,12 +586,10 @@
gap: 0.25rem; gap: 0.25rem;
button { button {
border: 2px solid v.$p-color; border: 2px solid #e2e8f0;
padding-left: 0.75rem; padding: 0.25rem 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-radius: 10px; border-radius: 10px;
color: v.$p-color;
&.current { &.current {
background-color: v.$p-color; background-color: v.$p-color;
@@ -592,8 +614,7 @@
.tanstak-table { .tanstak-table {
width: 100%; width: 100%;
table-layout: fixed; /* table-layout: fixed; */
/* table-layout: auto; */
@media (max-width: 1200px) { @media (max-width: 1200px) {
width: 1200px; width: 1200px;
@@ -663,11 +684,49 @@
} }
td { td {
padding-left: 1rem; padding: 15px 0;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
white-space: nowrap; white-space: nowrap;
&:first-child {
padding-left: 15px;
}
&:last-child {
padding-right: 15px;
}
}
.table-item {
color: v.$text-s;
font-size: 14px;
}
.table-item-protected {
color: #10b981;
font-size: 12px;
position: relative;
margin-left: 5px;
padding-left: 5px;
&::before {
content: '•';
color: v.$text-s;
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
}
}
.table-item-extension {
text-transform: uppercase;
font-size: 14px;
}
.table-item-status {
padding: 2px 10px;
border-radius: 15px;
background-color: v.$b-color-2;
} }
.actions { .actions {
@@ -685,15 +744,43 @@
padding: 4px 12px; padding: 4px 12px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
border-radius: 4px; border-radius: 8px;
color: v.$white; color: v.$white;
cursor: pointer;
transition: all 0.3s ease-in;
.icon {} .icon {
width: 18px;
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
padding: 4px; padding: 4px;
} }
} }
span {
padding-left: 5px;
}
}
.table-action-download {
display: flex;
background-color: #3b72e0;
align-items: center;
&:hover {
background-color: #2d56a8;
}
}
.table-action-delete {
display: flex;
background-color: #e80a14;
align-items: center;
&:hover {
background-color: #9f0712;
}
} }
} }
} }
@@ -1245,7 +1332,7 @@
right: -50%; right: -50%;
width: 200%; width: 200%;
height: 200%; height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
opacity: 0; opacity: 0;
transition: opacity 0.4s ease; transition: opacity 0.4s ease;
} }
src/app/ui/icons/icons.tsx
+1 -5
View File
@@ -1,12 +1,8 @@
/* https://icon-sets.iconify.design/ic/ */ /* https://icon-sets.iconify.design/ic/ */
import { CLIENT_STATIC_FILES_RUNTIME_WEBPACK } from 'next/dist/shared/lib/constants'
export function IconImageFile() { export function IconImageFile() {
return ( return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m14 2l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4 18V9h-5V4H6v16zm-1-7v6H7l5-5l2 2m-4-5.5A1.5 1.5 0 0 1 8.5 12A1.5 1.5 0 0 1 7 10.5A1.5 1.5 0 0 1 8.5 9a1.5 1.5 0 0 1 1.5 1.5" /></svg>
<path fill="currentColor" d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86l-3 3.87L9 13.14L6 17h12z" />
</svg>
) )
} }
src/i18n/messages/en.json
+7 -1
View File
@@ -174,7 +174,13 @@
"monitoring-copyright-infringements": "Monitoring copyright infringements", "monitoring-copyright-infringements": "Monitoring copyright infringements",
"monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online", "monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online",
"referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded.", "referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded.",
"upload-date": "Upload date" "upload-date": "Upload date",
"download": "Download",
"delete": "Delete",
"table-description": "Table of all files",
"protected-image": "Protected images",
"protected-video": "Protected videos",
"protected-audio": "Protected audio"
}, },
"Login-register-form": { "Login-register-form": {
"and": "and", "and": "and",
src/i18n/messages/ru.json
+7 -1
View File
@@ -174,7 +174,13 @@
"monitoring-copyright-infringements": "Мониторинг нарушений авторских прав", "monitoring-copyright-infringements": "Мониторинг нарушений авторских прав",
"monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете", "monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете",
"referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение.", "referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение.",
"upload-date": "Дата загрузки" "upload-date": "Дата загрузки",
"download": "Скачать",
"delete": "Удалить",
"table-description": "Таблица всех файлов",
"protected-image": "Защищенные изображения",
"protected-video": "Защищенные видео",
"protected-audio": "Защищенные аудио"
}, },
"Login-register-form": { "Login-register-form": {
"and": "и", "and": "и",