public/AdGuardHome
1
0
Fork 0
mirror of https://git.vectorsigma.ru/public/AdGuardHome.git synced 2026-08-03 22:59:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

rm unused

Browse Source
This commit is contained in:
Ildar Kamalov
2025-08-11 11:23:00 +03:00
parent c285ea978a
commit 7df7d60ec9
12 changed files with 7 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
client_v2/src/components/ui/Card.css
View File

@@ -1,155 +0,0 @@
.card-header {
align-items: center;
justify-content: space-between;
padding: 0.6rem 1.5rem;
flex-shrink: 0;
}
.card-subtitle {
margin: 4px 0;
line-height: 1.4;
}
.card-table-overflow {
overflow-y: auto;
max-height: 100%;
}
.card-table-overflow--limited {
overflow-y: auto;
max-height: 17.5rem;
}
.dashboard .card-table {
overflow: hidden;
}
.dashboard .card-table-overflow--limited {
max-height: 292px;
}
.dashboard .ReactTable .rt-tr-group {
min-height: 52px;
}
.card-actions {
margin-top: 20px;
}
.card-actions-top {
margin-bottom: 20px;
}
.card-graph {
display: flex;
align-items: center;
justify-content: center;
}
.card-body--status {
padding: 2.5rem 1.5rem;
text-align: center;
}
.card-body--loading {
position: relative;
}
.card-body--loading:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
}
.card-body--loading:after {
content: '';
position: absolute;
z-index: 101;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047.6%2047.6%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20opacity%3D%22.235%22%20fill%3D%22%23979797%22%20d%3D%22M44.4%2011.9l-5.2%203c1.5%202.6%202.4%205.6%202.4%208.9%200%209.8-8%2017.8-17.8%2017.8-6.6%200-12.3-3.6-15.4-8.9l-5.2%203C7.3%2042.8%2015%2047.6%2023.8%2047.6c13.1%200%2023.8-10.7%2023.8-23.8%200-4.3-1.2-8.4-3.2-11.9z%22%2F%3E%3Cpath%20fill%3D%22%2366b574%22%20d%3D%22M3.2%2035.7C0%2030.2-.8%2023.8.8%2017.6%202.5%2011.5%206.4%206.4%2011.9%203.2%2017.4%200%2023.8-.8%2030%20.8c6.1%201.6%2011.3%205.6%2014.4%2011.1l-5.2%203c-2.4-4.1-6.2-7.1-10.8-8.3C23.8%205.4%2019%206%2014.9%208.4s-7.1%206.2-8.3%2010.8c-1.2%204.6-.6%209.4%201.8%2013.5l-5.2%203z%22%2F%3E%3C%2Fsvg%3E');
will-change: transform;
animation: clockwise 2s linear infinite;
}
.card-title-stats {
font-size: 13px;
color: #9aa0ac;
}
.card-body-stats {
position: relative;
flex: 1 1 auto;
margin: 0;
padding: 1rem 1.5rem;
}
.card-value-stats {
display: block;
font-size: 2.1rem;
line-height: 2.7rem;
height: 2.7rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.card-value-percent {
position: absolute;
top: 15px;
right: 15px;
font-size: 0.9rem;
line-height: 1;
height: auto;
}
.card-value-percent:after {
content: '%';
}
.card--full {
height: calc(100% - 1.5rem);
}
.card-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
@media screen and (min-width: 1280px) {
.card-title-stats {
font-size: 14px;
}
}
@media (min-width: 992px) {
.dashboard .card:not(.card--full) {
height: 360px;
}
}
.card .logs__cell--red {
background-color: #fff4f2;
}
.card .logs__cell--green {
background-color: #f1faf3;
}
.card .logs__row--blue {
background-color: #ecf7ff;
}
[data-theme='dark'] .card .logs__row--blue {
background-color: var(--logs__row--blue-bgcolor);
}

33
client_v2/src/components/ui/Card.tsx
View File

@@ -1,33 +0,0 @@
import React from 'react';
import './Card.css';
interface CardProps {
id?: string;
title?: string;
subtitle?: string;
bodyType?: string;
type?: string;
refresh?: React.ReactNode;
children: React.ReactNode;
}
const Card = ({ type, id, title, subtitle, refresh, bodyType, children }: CardProps) => (
<div className={type ? `card ${type}` : 'card'} id={id || ''}>
{(title || subtitle) && (
<div className="card-header with-border">
<div className="card-inner">
{title && <div className="card-title">{title}</div>}
{subtitle && <div className="card-subtitle" dangerouslySetInnerHTML={{ __html: subtitle }} />}
</div>
{refresh && <div className="card-options">{refresh}</div>}
</div>
)}
<div className={bodyType || 'card-body'}>{children}</div>
</div>
);
export default Card;

113
client_v2/src/components/ui/Controls/Checkbox/checkbox.css
View File

@@ -1,113 +0,0 @@
.checkbox {
display: inline-block;
margin: 0;
}
.checkbox--single {
display: block;
margin: 2px auto 6px;
}
.checkbox--single .checkbox__label:before {
margin-right: 0;
}
.checkbox--settings .checkbox__label:before {
top: 2px;
margin-right: 20px;
}
.checkbox--settings .checkbox__label-title {
margin-bottom: 2px;
font-weight: 600;
}
.checkbox--form .checkbox__label:before {
top: 1px;
margin-right: 10px;
}
.checkbox__label {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
font-size: 14px;
font-weight: 400;
user-select: none;
cursor: pointer;
}
.checkbox__label:before {
content: '';
position: relative;
top: 1px;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
min-width: 20px;
margin-right: 10px;
background-color: var(--checkbox-bg);
background-repeat: no-repeat;
background-position: center center;
background-size: 12px 10px;
border-radius: 3px;
transition:
0.3s ease-in-out box-shadow,
0.3s ease-in-out opacity;
}
.checkbox__label .checkbox__label-text {
line-height: 1.3;
}
.checkbox__label .checkbox__label-text .md__paragraph {
display: inline-block;
vertical-align: baseline;
margin: 0;
text-align: left;
line-height: 1.3;
}
.checkbox__input {
position: absolute;
opacity: 0;
}
.checkbox__input:checked + .checkbox__label:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=);
}
.checkbox__input:focus + .checkbox__label:before {
box-shadow: 0 0 1px 1px rgba(74, 74, 74, 0.32);
}
.checkbox__input:disabled + .checkbox__label {
cursor: default;
color: var(--gray);
}
.checkbox__input:disabled + .checkbox__label:before {
opacity: 0.6;
}
.checkbox__label-text {
max-width: 515px;
line-height: 1.5;
}
.checkbox__label-text--long {
max-width: initial;
}
.checkbox__label-title {
display: block;
line-height: 1.5;
}
.checkbox__label-subtitle {
display: block;
line-height: 1.5;
color: var(--scolor);
}

50
client_v2/src/components/ui/Controls/Checkbox/index.tsx
View File

@@ -1,50 +0,0 @@
import React, { forwardRef, ReactNode } from 'react';
import clsx from 'clsx';
import './checkbox.css';
type Props = {
title: string;
subtitle?: ReactNode;
value: boolean;
name?: string;
disabled?: boolean;
className?: string;
error?: string;
onChange: (value: boolean) => void;
onBlur?: () => void;
};
export const Checkbox = forwardRef<HTMLInputElement, Props>(
(
{ title, subtitle, value, name, disabled, error, className = 'checkbox--form', onChange, onBlur, ...rest },
ref,
) => (
<>
<label className={clsx('checkbox', className)}>
<span className="checkbox__marker" />
<input
name={name}
type="checkbox"
className="checkbox__input"
disabled={disabled}
checked={value}
onChange={(e) => onChange(e.target.checked)}
onBlur={onBlur}
ref={ref}
{...rest}
/>
<span className="checkbox__label">
<span className="checkbox__label-text checkbox__label-text--long">
<span className="checkbox__label-title">{title}</span>
{subtitle && <span className="checkbox__label-subtitle">{subtitle}</span>}
</span>
</span>
</label>
{error && <div className="form__message form__message--error">{error}</div>}
</>
),
);
Checkbox.displayName = 'Checkbox';

45
client_v2/src/components/ui/Controls/Input.tsx
View File

@@ -1,45 +0,0 @@
import React, { ComponentProps, forwardRef, ReactNode } from 'react';
import clsx from 'clsx';
type Props = ComponentProps<'input'> & {
label?: string;
desc?: string;
leftAddon?: ReactNode;
rightAddon?: ReactNode;
error?: string;
trimOnBlur?: boolean;
};
export const Input = forwardRef<HTMLInputElement, Props>(
({ name, label, desc, className, leftAddon, rightAddon, error, trimOnBlur, onBlur, ...rest }, ref) => (
<div className={clsx('form-group', { 'has-error': !!error })}>
{label && (
<label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
{label}
</label>
)}
{desc && <div className="form__desc form__desc--top">{desc}</div>}
<div className="input-group">
{leftAddon && <div>{leftAddon}</div>}
<input
className={clsx('form-control', { 'is-invalid': !!error }, className)}
ref={ref}
onBlur={(e) => {
if (trimOnBlur) {
e.target.value = e.target.value.trim();
rest.onChange(e);
}
if (onBlur) {
onBlur(e);
}
}}
{...rest}
/>
{rightAddon && <div>{rightAddon}</div>}
</div>
{error && <div className="form__message form__message--error mt-1">{error}</div>}
</div>
),
);
Input.displayName = 'Input';

27
client_v2/src/components/ui/Controls/Select.tsx
View File

@@ -1,27 +0,0 @@
import React, { ComponentProps, forwardRef } from 'react';
import clsx from 'clsx';
type SelectProps = ComponentProps<'select'> & {
label?: string;
error?: string;
};
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
({ name, label, className, error, children, ...rest }, ref) => (
<div className={clsx('form-group', { 'has-error': !!error })}>
{label && (
<label className="form__label" htmlFor={name}>
{label}
</label>
)}
<div className="input-group">
<select className={clsx('form-control custom-select', className)} ref={ref} {...rest}>
{children}
</select>
</div>
{error && <div className="form__message form__message--error mt-1">{error}</div>}
</div>
),
);
Select.displayName = 'Select';

45
client_v2/src/components/ui/Controls/Textarea.tsx
View File

@@ -1,45 +0,0 @@
import React, { ComponentProps, forwardRef } from 'react';
import clsx from 'clsx';
import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
type Props = ComponentProps<'textarea'> & {
className?: string;
wrapperClassName?: string;
label?: string;
desc?: string;
error?: string;
trimOnBlur?: boolean;
};
export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
({ name, label, desc, className, wrapperClassName, error, trimOnBlur, onBlur, ...rest }, ref) => (
<div className={clsx('form-group', wrapperClassName, { 'has-error': !!error })}>
{label && (
<label className={clsx('form__label', { 'form__label--with-desc': !!desc })} htmlFor={name}>
{label}
</label>
)}
{desc && <div className="form__desc form__desc--top">{desc}</div>}
<textarea
className={clsx(
'form-control form-control--textarea form-control--textarea-small font-monospace',
className,
)}
ref={ref}
onBlur={(e) => {
if (trimOnBlur) {
const normalizedValue = trimLinesAndRemoveEmpty(e.target.value);
rest.onChange(normalizedValue);
}
if (onBlur) {
onBlur(e);
}
}}
{...rest}
/>
{error && <div className="form__message form__message--error">{error}</div>}
</div>
),
);
Textarea.displayName = 'Textarea';

52
client_v2/src/components/ui/Loading.css
View File

@@ -1,52 +0,0 @@
.loading {
position: relative;
z-index: 101;
opacity: 0;
animation: opacity 0.2s linear 0.2s forwards;
}
.loading:before {
content: '';
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
min-height: 100vh;
background-color: var(--loading-bg);
}
.loading:after {
content: '';
position: fixed;
z-index: 101;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047.6%2047.6%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20opacity%3D%22.235%22%20fill%3D%22%23979797%22%20d%3D%22M44.4%2011.9l-5.2%203c1.5%202.6%202.4%205.6%202.4%208.9%200%209.8-8%2017.8-17.8%2017.8-6.6%200-12.3-3.6-15.4-8.9l-5.2%203C7.3%2042.8%2015%2047.6%2023.8%2047.6c13.1%200%2023.8-10.7%2023.8-23.8%200-4.3-1.2-8.4-3.2-11.9z%22%2F%3E%3Cpath%20fill%3D%22%2366b574%22%20d%3D%22M3.2%2035.7C0%2030.2-.8%2023.8.8%2017.6%202.5%2011.5%206.4%206.4%2011.9%203.2%2017.4%200%2023.8-.8%2030%20.8c6.1%201.6%2011.3%205.6%2014.4%2011.1l-5.2%203c-2.4-4.1-6.2-7.1-10.8-8.3C23.8%205.4%2019%206%2014.9%208.4s-7.1%206.2-8.3%2010.8c-1.2%204.6-.6%209.4%201.8%2013.5l-5.2%203z%22%2F%3E%3C%2Fsvg%3E');
will-change: transform;
animation: clockwise 2s linear infinite;
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@keyframes clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

17
client_v2/src/components/ui/Loading.tsx
View File

@@ -1,17 +0,0 @@
import React from 'react';
import classNames from 'clsx';
import { useTranslation } from 'react-i18next';
import './Loading.css';
interface LoadingProps {
className?: string;
text?: string;
}
const Loading = ({ className, text }: LoadingProps) => {
const { t } = useTranslation();
return <div className={classNames('loading', className)}>{t(text)}</div>;
};
export default Loading;

38
client_v2/src/components/ui/PageTitle.css
View File

@@ -1,38 +0,0 @@
.page-header {
flex-direction: column;
align-items: flex-start;
}
.page-header--logs {
flex-direction: row;
align-items: flex-end;
margin: 0.5rem 0 2.8rem;
}
.page-header--logs .page-title {
display: inline-flex;
align-items: center;
}
@media (max-width: 991px) {
.page-header--logs {
flex-direction: column;
align-items: center;
margin-bottom: 0 0 1.1rem;
}
.page-header--logs .page-title {
margin-bottom: 1.1rem;
font-size: 1.8rem;
}
}
.page-subtitle {
margin-left: 0;
font-size: 0.9rem;
}
.page-title--large {
font-size: 36px;
line-height: 46px;
}

23
client_v2/src/components/ui/PageTitle.tsx
View File

@@ -1,23 +0,0 @@
import React from 'react';
import './PageTitle.css';
interface PageTitleProps {
title: string;
subtitle?: string;
children?: React.ReactNode;
containerClass?: string;
}
const PageTitle = ({ title, subtitle, children, containerClass }: PageTitleProps) => (
<div className="page-header">
<div className={containerClass}>
<h1 className="page-title pr-2">{title}</h1>
{children}
</div>
{subtitle && <div className="page-subtitle">{subtitle}</div>}
</div>
);
export default PageTitle;

15
client_v2/src/install/Setup/Settings.tsx
View File

@@ -20,9 +20,8 @@ import {
import { validateRequiredValue } from '../../helpers/validators';
import { InstallInterface } from '../../initialState';
import { Input } from '../../components/ui/Controls/Input';
import { Select } from '../../components/ui/Controls/Select';
import { toNumber } from '../../helpers/form';
import { Input } from 'panel/common/controls/Input';
const validateInstallPort = (value: number) => {
if (value < MIN_PORT || value > MAX_PORT) {
@@ -253,12 +252,12 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
name="web.ip"
control={control}
render={({ field }) => (
<Select {...field} data-testid="install_web_ip">
<select {...field} data-testid="install_web_ip">
<option value={ALL_INTERFACES_IP}>
{t('install_settings_all_interfaces')}
</option>
{renderInterfaces(interfaces)}
</Select>
</select>
)}
/>
</div>
@@ -284,7 +283,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
type="number"
data-testid="install_web_port"
placeholder={STANDARD_WEB_PORT.toString()}
error={fieldState.error?.message}
errorMessage={fieldState.error?.message}
onChange={(e) => {
const { value } = e.target;
field.onChange(toNumber(value));
@@ -343,12 +342,12 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
name="dns.ip"
control={control}
render={({ field }) => (
<Select {...field} data-testid="install_dns_ip">
<select {...field} data-testid="install_dns_ip">
<option value={ALL_INTERFACES_IP}>
{t('install_settings_all_interfaces')}
</option>
{renderInterfaces(interfaces)}
</Select>
</select>
)}
/>
</div>
@@ -374,7 +373,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
{...field}
type="number"
data-testid="install_dns_port"
error={fieldState.error?.message}
errorMessage={fieldState.error?.message}
placeholder={STANDARD_WEB_PORT.toString()}
onChange={(e) => {
const { value } = e.target;