small fix

add toggle categories
2024-12-06 02:28:59 +03:00 · 2024-12-05 00:35:02 +03:00
3 changed files with 143 additions and 26 deletions
--- a/lzipus/src/browser_action/popup.css
+++ b/lzipus/src/browser_action/popup.css
@@ -2,9 +2,9 @@ body {
  margin: 0;
  min-width: 300px;
  max-width: 3000px;
-  width: 400px;
+  width: 100%; /* Используем 100%, чтобы не ограничивать ширину */
  background: #abcef5; /* Светлый фон */
-  font-family: Helvetica;
+  font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт */
  box-sizing: border-box;
 }

@@ -12,6 +12,7 @@ div.container {
  display: flex;
  flex-direction: column;
  padding: 1px;
+  width: 100%; /* Обеспечиваем, чтобы контейнер растягивался по ширине */
 }

 div.header {
@@ -27,6 +28,10 @@ h1 {

 h3 {
  padding: 6px;
+  font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт для категорий */
+  font-size: 16px; /* Уменьшен размер шрифта */
+  font-weight: normal; /* Уменьшен вес шрифта для минималистичного вида */
+  color: #333; /* Цвет шрифта для категорий */
 }

 i {
@@ -36,17 +41,40 @@ 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 {
  display: flex;
  flex-direction: column;
  min-height: 200px;
+  width: 100%; /* Обеспечиваем, чтобы шаблоны занимали всю доступную ширину */
+  padding: 0;
 }

 span.template {
@@ -55,15 +83,18 @@ 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; /* Плавный переход при наведении */
+  width: 100%; /* Шаблоны должны растягиваться на всю ширину */
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
+  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 +130,39 @@ 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; /* Легкая тень для категории */
+  width: 100%; /* Категория растягивается на всю ширину */
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
+}
+
+.category h3 {
+  display: flex;
+  justify-content: space-between; /* Располагаем элементы по краям */
+  align-items: center;
+  cursor: pointer; /* Курсор при наведении на весь блок */
+  width: 100%; /* Заголовок занимает всю ширину */
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
+}
+
+.toggle-icon {
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.category-content {
+  display: none;
+  padding-left: 20px;
+  width: 100%; /* Содержимое категории растягивается на всю ширину */
+}
+
+.category-content.show {
+  display: block;
+}
+
+.category h3 i {
+  transition: transform 0.3s ease;
 }

 /* Стили для темной темы */
@@ -140,3 +201,4 @@ body.dark-theme {
 .dark-theme .theme-btn {
  color: #fff;
 }
+
--- a/lzipus/src/browser_action/popup.html
+++ b/lzipus/src/browser_action/popup.html
@@ -19,14 +19,20 @@
 			<h1 class="name fs-4 fw-lighter font-monospace">Твои шаблоны</h1>
 			<button class="template-add btn btn-primary" type="button"><i class="fa-duotone fa-plus"></i></button>
 		</div>
+		
 		<div class="templates" id="template-list">
 			<div class="category">
-				<h3 class="font-monospace">Промежуточные ответы</h3>
-				<span class="template">
-					<span class="template-title font-monospace">Приняли в работу</span>
-					<span class="buttons">
-						<span class="btn btn-light" id="inWorkRu">RU</span>
-						<span class="btn btn-light" id="inWorkEn">ENG</span>
+				<h3 class="font-monospace">
+					Промежуточные ответы
+					<i class="fa fa-chevron-down toggle-icon"></i>
+
+				</h3>
+				<div class="category-content">
+					<span class="template">
+						<span class="template-title font-monospace">Приняли в работу</span>
+							<span class="buttons">
+								<span class="btn btn-light" id="inWorkRu">RU</span>
+								<span class="btn btn-light" id="inWorkEn">ENG</span>
 						<!-- <button class="template-edit-existed btn"><i class="fa-solid fa-pen-to-square"></i></button> -->
 					</span>
 				</span>
@@ -73,24 +79,29 @@
 						<span id="theywork2En" class="btn btn-light">ENG</span>
 					</span>
 				</span>
-				<span class="template">
+					<span class="template">
 					<span class="template-title font-monospace">Появились ли новости?</span>
 					<span class="buttons">
 						<span id="theywork3Ru" class="btn btn-light">RU</span>
 						<span id="theywork3En" class="btn btn-light">ENG</span>
 					</span>
-				</span>
-				<span class="template">
+					</span>
+					<span class="template">
 					<span class="template-title font-monospace">Передали ответственной команде</span>
 					<span class="buttons">
 						<span id="fwd2treadRU" class="btn btn-light">RU</span>
 						<span id="fwd2treadEn" class="btn btn-light">ENG</span>
 					</span>
-				</span>
+					</span>
+				</div>
 			</div>

 			<div class="category">
-				<h3 class="font-monospace">Запросы партнерам</h3>
+				<h3 class="font-monospace">
+					Запросы партнерам
+					<i class="fa fa-chevron-down toggle-icon"></i>
+				</h3>
+				<div class="category-content">
 				<span class="template">
 					<span class="template-title font-monospace">Запрос: Недоставка</span>
 					<span class="buttons">
@@ -127,9 +138,14 @@
 					</span>
 				</span>
 			</div>
+			</div>

 			<div class="category">
-				<h3 class="font-monospace">Ответы клиентам</h3>
+				<h3 class="font-monospace">
+					Ответы клиентам
+					<i class="fa fa-chevron-down toggle-icon"></i>
+				</h3>
+				<div class="category-content">
 				<span class="template">
 					<span class="template-title font-monospace">Не фиксируем на платформе</span>
 					<span class="buttons">
@@ -231,9 +247,14 @@
 					</span>
 				</span>
 			</div>
+			</div>

 			<div class="category">
-				<h3 class="font-monospace">Даофис</h3>
+				<h3 class="font-monospace">
+					Даофис
+					<i class="fa fa-chevron-down toggle-icon"></i>
+				</h3>
+				<div class="category-content">
 				<span class="template">
 					<span class="template-title font-monospace">Внести номер телефона в аксапту</span>
 					<span class="buttons">
--- a/lzipus/src/browser_action/popup.js
+++ b/lzipus/src/browser_action/popup.js
@@ -350,4 +350,38 @@ themeToggle.addEventListener('click', () => {

 document.addEventListener('DOMContentLoaded', () => {
    applySavedTheme();
-});
+});
+
+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');
+      }
+  });
+});
+
Author	SHA1	Message	Date
Dmitriy Gorshenin	b89af2ca0d	small fix	2024-12-06 02:28:59 +03:00
Dmitriy Gorshenin	086a3ecf5e	add toggle categories	2024-12-05 00:35:02 +03:00