Обновлены компоненты NoteEditor и NoteItem для улучшения отображения текста кнопок с добавлением обертки в span. Изменены стили кнопок для улучшения их внешнего вида и адаптивности, включая изменения отступов и размеров. Эти изменения способствуют более удобному взаимодействию пользователя с интерфейсом.

This commit is contained in:
Fovway 2025-11-07 16:45:38 +07:00
parent cb40f032d2
commit 80946a3c4a
3 changed files with 54 additions and 13 deletions

View File

@ -1078,7 +1078,9 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
title="Улучшить или создать текст через ИИ"
>
<Icon icon="mdi:robot" />
<span className="btnAI-text">
{isAiLoading ? "Обработка..." : "Помощь ИИ"}
</span>
</button>
<button
className="btnSave btnAI"
@ -1087,7 +1089,9 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
title="Сгенерировать теги через ИИ"
>
<Icon icon="mdi:tag-multiple" />
<span className="btnAI-text">
{isGeneratingTags ? "Генерация..." : "Теги ИИ"}
</span>
</button>
</>
)}

View File

@ -1490,7 +1490,9 @@ export const NoteItem: React.FC<NoteItemProps> = ({
title="Улучшить или создать текст через ИИ"
>
<Icon icon="mdi:robot" />
<span className="btnAI-text">
{isAiLoading ? "Обработка..." : "Помощь ИИ"}
</span>
</button>
<button
className="btnSave btnAI"
@ -1499,7 +1501,9 @@ export const NoteItem: React.FC<NoteItemProps> = ({
title="Сгенерировать теги через ИИ"
>
<Icon icon="mdi:tag-multiple" />
<span className="btnAI-text">
{isGeneratingTags ? "Генерация..." : "Теги ИИ"}
</span>
</button>
</>
)}

View File

@ -1072,7 +1072,9 @@ textarea:focus {
.action-buttons {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
padding-right: 0;
flex-wrap: wrap;
}
.btnAI {
@ -1080,7 +1082,13 @@ textarea:focus {
color: white;
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
gap: 4px;
padding: 8px 12px;
min-height: 44px;
white-space: nowrap;
flex-shrink: 0;
font-size: 13px;
}
.btnAI:hover {
@ -1103,7 +1111,7 @@ textarea:focus {
}
.btnSave {
padding: 10px 20px;
padding: 8px 16px;
cursor: pointer;
border-width: 1px;
background: var(--bg-secondary);
@ -1112,7 +1120,13 @@ textarea:focus {
border-radius: 5px;
font-family: "Open Sans", sans-serif;
transition: all 0.3s ease;
font-size: 16px;
font-size: 14px;
min-height: 44px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btnSave:hover {
@ -1567,6 +1581,8 @@ textarea:focus {
user-select: none;
-webkit-user-select: none;
min-height: 44px;
min-width: 44px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
@ -1580,6 +1596,8 @@ textarea:focus {
@media (max-width: 768px) {
.markdown-buttons.markdown-buttons--edit .btnMarkdown {
min-height: 48px;
min-width: 48px;
flex-shrink: 0;
padding: 8px 12px;
margin: 0;
}
@ -1600,6 +1618,8 @@ textarea:focus {
user-select: none;
-webkit-user-select: none;
min-height: 44px; /* Минимальная высота для touch */
min-width: 44px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
@ -1720,8 +1740,9 @@ textarea:focus {
align-items: center;
justify-content: center;
transition: all 0.2s ease;
min-width: 32px;
min-height: 32px;
min-width: 36px;
min-height: 36px;
flex-shrink: 0;
}
.floating-toolbar-btn:hover {
@ -3018,8 +3039,8 @@ textarea:focus {
}
.markdown-buttons .btnMarkdown {
flex: 0 1 auto;
min-width: auto;
flex: 0 0 auto;
min-width: 44px;
margin-right: 0;
padding: 8px 12px;
font-size: 14px;
@ -3924,6 +3945,8 @@ textarea:focus {
/* Улучшения для мобильных устройств */
.markdown-buttons .btnMarkdown {
min-height: 48px; /* Увеличиваем высоту для touch */
min-width: 48px;
flex-shrink: 0;
padding: 8px 12px;
margin: 2px;
}
@ -4241,11 +4264,17 @@ textarea:focus {
background-color: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-secondary);
padding: 10px 20px;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
min-height: 44px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-secondary:hover {
@ -5045,6 +5074,8 @@ textarea:focus {
/* Markdown кнопки */
.markdown-buttons .btnMarkdown {
min-height: 44px;
min-width: 44px;
flex-shrink: 0;
padding: 8px 10px;
margin: 2px;
font-size: 13px;
@ -5094,6 +5125,8 @@ textarea:focus {
}
.markdown-buttons .btnMarkdown {
min-width: 40px;
flex-shrink: 0;
padding: 6px 8px;
font-size: 12px;
}