From 086a3ecf5ed2dd1889000fda189c1a0889d35fc4 Mon Sep 17 00:00:00 2001 From: Dmitriy Gorshenin Date: Thu, 5 Dec 2024 00:35:02 +0300 Subject: [PATCH] add toggle categories --- lzipus/src/browser_action/popup.css | 74 +++++++++++++++++++++++----- lzipus/src/browser_action/popup.html | 47 +++++++++++++----- lzipus/src/browser_action/popup.js | 35 ++++++++++++- 3 files changed, 131 insertions(+), 25 deletions(-) diff --git a/lzipus/src/browser_action/popup.css b/lzipus/src/browser_action/popup.css index 9550ef4..3974a35 100644 --- a/lzipus/src/browser_action/popup.css +++ b/lzipus/src/browser_action/popup.css @@ -4,7 +4,7 @@ body { max-width: 3000px; width: 400px; background: #abcef5; /* Светлый фон */ - font-family: Helvetica; + font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт */ box-sizing: border-box; } @@ -27,6 +27,10 @@ h1 { h3 { padding: 6px; + font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт для категорий */ + font-size: 16px; /* Уменьшен размер шрифта */ + font-weight: normal; /* Уменьшен вес шрифта для минималистичного вида */ + color: #333; /* Цвет шрифта для категорий */ } i { @@ -36,11 +40,32 @@ i { button.template-add, button.template-edit, button.template-delete { - margin: 1px; - padding: 7px; - background-color: #abcef5; /* Светлый фон кнопок */ - border-color: #abcef5; /* Цвет рамки кнопок */ - cursor: pointer; /* Указатель при наведении */ + margin: 0 4px; /* Меньше отступов */ + padding: 5px 10px; /* Более компактные кнопки */ + background-color: transparent; /* Без фона */ + border: 1px solid #abcef5; /* Тонкая рамка */ + color: #333; /* Цвет текста */ + cursor: pointer; + font-size: 14px; /* Меньший размер текста */ + border-radius: 5px; /* Скругленные углы */ + transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Плавные переходы */ +} + +/* Эффект при наведении */ +button.template-add:hover, +button.template-edit:hover, +button.template-delete:hover { + background-color: #abcef5; /* Подсветка фоном */ + color: #fff; /* Белый цвет текста */ + border-color: #88aee5; /* Немного темнее рамка */ +} + +/* Эффект при фокусе */ +button.template-add:focus, +button.template-edit:focus, +button.template-delete:focus { + outline: none; /* Убираем стандартную обводку */ + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* Легкая тень для фокуса */ } div.templates { @@ -55,15 +80,16 @@ span.template { justify-content: space-between; height: fit-content; padding: 8px 7px; - border: 2px solid #8844aa; /* Цвет рамки */ - border-radius: 10px 100px / 120px; + border: 1px solid #8888c6; /* Цвет рамки совпадает с рамкой категории */ + border-radius: 8px; /* Скругленные углы */ overflow: hidden; - transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход при наведении */ + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Плавный переход при наведении */ } /* Подсветка шаблонов при наведении */ span.template:hover { background: #d0e6ff; /* Подсветка для светлой темы */ + border-color: #a56fbf; /* Немного темнее рамка при наведении */ } .dark-theme span.template:hover { @@ -99,9 +125,9 @@ span.template:hover { .category { margin-bottom: 10px; - border: solid #8888c6 4px; + border: solid #8888c6 1px; /* Тонкая рамка для категории */ border-radius: 1px 10px / 12px; - box-shadow: 10px 5px 5px #8888c6; + box-shadow: 5px 3px 5px #8888c6; /* Легкая тень для категории */ } /* Стили для темной темы */ @@ -140,3 +166,29 @@ body.dark-theme { .dark-theme .theme-btn { color: #fff; } + +.category h3 { + display: flex; + justify-content: space-between; /* Располагаем элементы по краям */ + align-items: center; + cursor: pointer; /* Курсор при наведении на весь блок */ +} + +.toggle-icon { + cursor: pointer; + margin-left: 10px; +} + +.category-content { + display: none; + padding-left: 20px; +} + +.category-content.show { + display: block; +} + +.category h3 i { + transition: transform 0.3s ease; +} + \ No newline at end of file diff --git a/lzipus/src/browser_action/popup.html b/lzipus/src/browser_action/popup.html index 38bdb1a..b593ba2 100644 --- a/lzipus/src/browser_action/popup.html +++ b/lzipus/src/browser_action/popup.html @@ -19,14 +19,20 @@

Твои шаблоны

+
-

Промежуточные ответы

- - Приняли в работу - - RU - ENG +

+ Промежуточные ответы + + +

+
+ + Приняли в работу + + RU + ENG @@ -73,24 +79,29 @@ ENG - + Появились ли новости? RU ENG - - + + Передали ответственной команде RU ENG - + +
-

Запросы партнерам

+

+ Запросы партнерам + +

+
Запрос: Недоставка @@ -127,9 +138,14 @@
+
-

Ответы клиентам

+

+ Ответы клиентам + +

+
Не фиксируем на платформе @@ -231,9 +247,14 @@
+
-

Даофис

+

+ Даофис + +

+
Внести номер телефона в аксапту diff --git a/lzipus/src/browser_action/popup.js b/lzipus/src/browser_action/popup.js index a6b0bbf..354e537 100644 --- a/lzipus/src/browser_action/popup.js +++ b/lzipus/src/browser_action/popup.js @@ -350,4 +350,37 @@ themeToggle.addEventListener('click', () => { document.addEventListener('DOMContentLoaded', () => { applySavedTheme(); -}); \ No newline at end of file +}); + +document.querySelectorAll('.category h3').forEach(function(header) { + const categoryId = header.textContent.trim(); // Уникальный идентификатор категории по названию + + // Проверка состояния категории при загрузке страницы + const isCategoryOpen = localStorage.getItem(categoryId) === 'true'; + const content = header.nextElementSibling; // Содержимое категории + const icon = header.querySelector('.toggle-icon'); // Иконка стрелки + + // Если категория была открыта ранее, делаем ее открытой + if (isCategoryOpen) { + content.classList.add('show'); + icon.classList.remove('fa-chevron-down'); + icon.classList.add('fa-chevron-up'); + } + + // Обработчик клика по заголовку категории + header.addEventListener('click', function() { + content.classList.toggle('show'); // Переключаем видимость категории + + if (content.classList.contains('show')) { + icon.classList.remove('fa-chevron-down'); + icon.classList.add('fa-chevron-up'); + // Сохраняем состояние категории как открытое + localStorage.setItem(categoryId, 'true'); + } else { + icon.classList.remove('fa-chevron-up'); + icon.classList.add('fa-chevron-down'); + // Сохраняем состояние категории как закрытое + localStorage.setItem(categoryId, 'false'); + } + }); +});