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 />
<DahboardGeographySection />
</div>
<FilesTable fileType={'all'} />
<DashboardLastCheck />
</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 PageTitle from '@/app/ui/page-title';
import UploadSectionFile from '@/app/components/upload-section-file';
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 ProtectionStatistic from '@/app/ui/marking-page/new/protection-statistic';
@@ -46,7 +42,6 @@ export default async function Page() {
title="image-protection"
description="multi-layered-protection-for-your-images"
/>
<TestComponent />
<ProtectionStatistic fileType={FILE_TYPE}/>
{/* <div className="split-blocks">
<ProtectionSummary fileType={FILE_TYPE} />
src/app/components/tanstakTable.tsx
+53 -20
View File
@@ -98,7 +98,7 @@ const cutFileName = (fileName: string) => {
const extension = fileName.substring(lastDotIndex);
if (fileName.length <= MAX_FILE_NAME_LENGTH) {
return nameWithoutExtension;
return fileName;
}
const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
@@ -199,14 +199,15 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div>
),
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} />
<div>
<div className="font-medium w-full truncate" title={row.original.fileName}>
{/* {row.original.fileName} */}
<span className="font-semibold">
{cutFileName(row.original.fileName)}
</span>
<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>
@@ -283,7 +284,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div>
),
cell: ({ row }) => (
<div className="text-center">
<div className="text-center table-item">
{row.original.size !== undefined ? convertBytes(row.original.size) : '-'}
</div>
),
@@ -317,7 +318,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
),
cell: ({ row }) => {
return (
<div className="text-center">
<div className="text-center table-item">
{row.original.uploadDate ? (
<>
{formatDate(row.original.uploadDate)}
@@ -361,8 +362,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
),
cell: ({ row }) => {
return (
<div className={`text-center font-semibold`}>
<div className="text-center font-semibold table-item">
<span className="table-item-status">
{t('status')}
</span>
</div>
)
},
@@ -378,33 +381,39 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
},
cell: ({ row }) => (
<div className="actions">
<div className="actions-group">
<div className="actions-group" style={{ display: "none" }}>
<button
onClick={() => handleView(row.original)}
className="bg-blue-500 hover:bg-blue-600"
>
<IconEye />
</button>
<button
onClick={() => handleDownload(row.original)}
disabled={isFileLoading}
className="bg-green-500 hover:bg-green-600"
>
<IconFileDownload />
</button>
</div>
<div className="actions-group">
<button
onClick={() => handleProtect(row.original)}
className="bg-violet-500 hover:bg-violet-600"
>
<IconShieldExclamation />
</button>
</div>
<div className="actions-group">
<button
onClick={() => handleDownload(row.original)}
disabled={isFileLoading}
className="table-action-download"
>
<IconFileDownload />
<span>
{t('download')}
</span>
</button>
<button
onClick={() => handleOpenWindowForRemove(row.original)}
className="bg-red-700 hover:bg-red-800"
className="table-action-delete"
>
<IconDelete />
<span>
{t('delete')}
</span>
</button>
</div>
@@ -624,9 +633,25 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
return (
<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-item">
<div className="table-filtres-label">{t('date-filter')}:</div>
@@ -779,6 +804,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div>
<div className="pagination-controls">
{table.getCanPreviousPage() && (
<button
className="arrow"
onClick={() => table.firstPage()}
@@ -786,6 +812,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
>
<IconDoubleArrowLeft />
</button>
)}
{table.getCanPreviousPage() && (
<button
className="arrow"
onClick={() => table.previousPage()}
@@ -793,6 +821,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
>
<IconArrowLeft />
</button>
)}
<div className="pagination-controls-pages">
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
@@ -822,6 +851,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
})}
</div>
{table.getCanNextPage() && (
<button
className="arrow"
onClick={() => table.nextPage()}
@@ -829,6 +859,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
>
<IconArrowRight />
</button>
)}
{table.getCanNextPage() && (
<button
className="arrow"
onClick={() => table.lastPage()}
@@ -836,6 +868,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
>
<IconDoubleArrowRight />
</button>
)}
</div>
</div>
</div >
src/app/styles/global-styles.scss
+12 -3
View File
@@ -370,15 +370,24 @@
.color {
&-image {
color: v.$color-image;
color: v.$white;
background: v.$color-image;
padding: 8px;
border-radius: 6px;
}
&-audio {
color: v.$color-audio;
color: v.$white;
background: v.$color-audio;
padding: 8px;
border-radius: 6px;
}
&-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);
}
.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 {
display: flex;
flex-direction: column;
@@ -544,6 +562,12 @@
border: 2px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 1px 2px #0000000d;
color: v.$p-color;
.icon {
width: 18px;
}
/* */
&:hover {
@@ -562,12 +586,10 @@
gap: 0.25rem;
button {
border: 2px solid v.$p-color;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border: 2px solid #e2e8f0;
padding: 0.25rem 0.75rem;
border-radius: 10px;
color: v.$p-color;
&.current {
background-color: v.$p-color;
@@ -592,8 +614,7 @@
.tanstak-table {
width: 100%;
table-layout: fixed;
/* table-layout: auto; */
/* table-layout: fixed; */
@media (max-width: 1200px) {
width: 1200px;
@@ -663,11 +684,49 @@
}
td {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
padding: 15px 0;
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 {
@@ -685,15 +744,43 @@
padding: 4px 12px;
font-size: 14px;
line-height: 20px;
border-radius: 4px;
border-radius: 8px;
color: v.$white;
cursor: pointer;
transition: all 0.3s ease-in;
.icon {}
.icon {
width: 18px;
}
@media (max-width: 1200px) {
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%;
width: 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;
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/ */
import { CLIENT_STATIC_FILES_RUNTIME_WEBPACK } from 'next/dist/shared/lib/constants'
export function IconImageFile() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<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>
<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>
)
}
src/i18n/messages/en.json
+7 -1
View File
@@ -174,7 +174,13 @@
"monitoring-copyright-infringements": "Monitoring copyright infringements",
"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.",
"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": {
"and": "and",
src/i18n/messages/ru.json
+7 -1
View File
@@ -174,7 +174,13 @@
"monitoring-copyright-infringements": "Мониторинг нарушений авторских прав",
"monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете",
"referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение.",
"upload-date": "Дата загрузки"
"upload-date": "Дата загрузки",
"download": "Скачать",
"delete": "Удалить",
"table-description": "Таблица всех файлов",
"protected-image": "Защищенные изображения",
"protected-video": "Защищенные видео",
"protected-audio": "Защищенные аудио"
},
"Login-register-form": {
"and": "и",