Обновлены компоненты NoteEditor и NoteItem для улучшения отображения текста кнопок с добавлением обертки в span. Изменены стили кнопок для улучшения их внешнего вида и адаптивности, включая изменения отступов и размеров. Эти изменения способствуют более удобному взаимодействию пользователя с интерфейсом.
This commit is contained in:
parent
cb40f032d2
commit
80946a3c4a
@ -1078,7 +1078,9 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
|
||||
title="Улучшить или создать текст через ИИ"
|
||||
>
|
||||
<Icon icon="mdi:robot" />
|
||||
{isAiLoading ? "Обработка..." : "Помощь ИИ"}
|
||||
<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" />
|
||||
{isGeneratingTags ? "Генерация..." : "Теги ИИ"}
|
||||
<span className="btnAI-text">
|
||||
{isGeneratingTags ? "Генерация..." : "Теги ИИ"}
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1490,7 +1490,9 @@ export const NoteItem: React.FC<NoteItemProps> = ({
|
||||
title="Улучшить или создать текст через ИИ"
|
||||
>
|
||||
<Icon icon="mdi:robot" />
|
||||
{isAiLoading ? "Обработка..." : "Помощь ИИ"}
|
||||
<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" />
|
||||
{isGeneratingTags ? "Генерация..." : "Теги ИИ"}
|
||||
<span className="btnAI-text">
|
||||
{isGeneratingTags ? "Генерация..." : "Теги ИИ"}
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user