remove categories swapping

lzipus/src/browser_action/popup.css

@@ -1,107 +1,107 @@
-/* Общие стили */
 body {
   margin: 0;
   min-width: 300px;
   max-width: 3000px;
-  width: 100%;
+  width: 100%; /* Используем 100%, чтобы не ограничивать ширину */
   background: #abcef5; /* Светлый фон */
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт */
   box-sizing: border-box;
 }
 
-/* Контейнер */
 div.container {
   display: flex;
   flex-direction: column;
   padding: 1px;
-  width: 100%;
+  width: 100%; /* Обеспечиваем, чтобы контейнер растягивался по ширине */
 }
 
-/* Заголовок */
 div.header {
   display: flex;
+  flex-direction: row;
   justify-content: center;
-  padding: 6px;
+  padding: 10px;
 }
 
 h1 {
-  padding: 6px;
+  padding: 10px;
 }
 
-/* Стили для категорий */
 h3 {
-  padding: 6px;
+  padding: 10px;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт для категорий */
-  font-size: 16px;
+  font-size: 16px; /* Уменьшен размер шрифта */
-  font-weight: normal;
+  font-weight: normal; /* Уменьшен вес шрифта для минималистичного вида */
-  color: #333;
+  color: #333; /* Цвет шрифта для категорий */
+}
+
+i {
+  width: 20px;
 }
 
-/* Кнопки шаблонов */
 button.template-add,
 button.template-edit,
 button.template-delete {
-  margin: 0 4px;
+  margin: 0 4px; /* Меньше отступов */
-  padding: 5px 10px;
+  padding: 5px 10px; /* Более компактные кнопки */
-  background-color: transparent;
+  background-color: transparent; /* Без фона */
-  border: 1px solid #abcef5;
+  border: 1px solid #abcef5; /* Тонкая рамка */
-  color: #333;
+  color: #333; /* Цвет текста */
   cursor: pointer;
-  font-size: 14px;
+  font-size: 14px; /* Меньший размер текста */
-  border-radius: 5px;
+  border-radius: 5px; /* Скругленные углы */
-  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+  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;
+  background-color: #abcef5; /* Подсветка фоном */
-  color: #fff;
+  color: #fff; /* Белый цвет текста */
-  border-color: #88aee5;
+  border-color: #88aee5; /* Немного темнее рамка */
 }
 
-/* Эффекты при фокусе */
+/* Эффект при фокусе */
 button.template-add:focus,
 button.template-edit:focus,
 button.template-delete:focus {
-  outline: none;
+  outline: none; /* Убираем стандартную обводку */
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* Легкая тень для фокуса */
 }
 
-/* Шаблоны */
 div.templates {
   display: flex;
   flex-direction: column;
   min-height: 200px;
-  width: 100%;
+  width: 100%; /* Обеспечиваем, чтобы шаблоны занимали всю доступную ширину */
   padding: 0;
 }
 
 span.template {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
+  height: fit-content;
   padding: 8px 7px;
-  border: 1px solid #8888c6;
+  border: 1px solid #8888c6; /* Цвет рамки совпадает с рамкой категории */
-  border-radius: 8px;
+  border-radius: 8px; /* Скругленные углы */
   overflow: hidden;
-  width: 100%;
+  width: 100%; /* Шаблоны должны растягиваться на всю ширину */
-  box-sizing: border-box;
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Плавный переход при наведении */
 }
 
-/* Подсветка при наведении */
+/* Подсветка шаблонов при наведении */
 span.template:hover {
-  background: #d0e6ff;
+  background: #d0e6ff; /* Подсветка для светлой темы */
-  border-color: #a56fbf;
+  border-color: #a56fbf; /* Немного темнее рамка при наведении */
 }
 
 .dark-theme span.template:hover {
-  background: #444;
+  background: #444; /* Подсветка для тёмной темы */
-  color: #fff;
+  color: #fff; /* Белый цвет текста в тёмной теме */
 }
 
-/* Формы */
 .formochka {
   margin-left: 10px;
 }
@@ -120,28 +120,30 @@ span.buttonsLong {
   justify-content: center;
 }
 
-/* Скрытые элементы */
+span.template:hover {
+  background: #d0e6ff; /* Подсветка при наведении */
+}
+
 .hidden {
   display: none;
 }
 
-/* Категории */
 .category {
   margin-bottom: 10px;
-  border: 1px solid #8888c6;
+  border: solid #8888c6 1px; /* Тонкая рамка для категории */
   border-radius: 1px 10px / 12px;
-  box-shadow: 5px 3px 5px #8888c6;
+  box-shadow: 5px 3px 5px #8888c6; /* Легкая тень для категории */
-  width: 100%;
+  width: 100%; /* Категория растягивается на всю ширину */
-  box-sizing: border-box;
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
 }
 
 .category h3 {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-between; /* Располагаем элементы по краям */
   align-items: center;
-  cursor: pointer;
+  cursor: pointer; /* Курсор при наведении на весь блок */
-  width: 100%;
+  width: 100%; /* Заголовок занимает всю ширину */
-  box-sizing: border-box;
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
 }
 
 .toggle-icon {
@@ -149,11 +151,10 @@ span.buttonsLong {
   margin-left: 10px;
 }
 
-/* Содержимое категории */
 .category-content {
   display: none;
   padding-left: 20px;
-  width: 100%;
+  width: 100%; /* Содержимое категории растягивается на всю ширину */
 }
 
 .category-content.show {
@@ -164,26 +165,26 @@ span.buttonsLong {
   transition: transform 0.3s ease;
 }
 
-/* Тема */
+/* Стили для темной темы */
 body.dark-theme {
-  background: #333;
+  background: #333; /* Темный фон */
-  color: white;
+  color: white; /* Светлый текст */
 }
 
-/* Базовые стили для кнопок */
+/* Базовый стиль кнопок */
 .btn {
   color: #000;
   background-color: #fff;
   border: 1px solid #8888c6;
 }
 
+/* Стили для кнопок в тёмной теме */
 .dark-theme .btn {
   color: #fff;
   background-color: #333;
   border: 1px solid #555;
 }
 
-/* Кнопка переключения темы */
 .theme-btn {
   position: absolute;
   top: 10px;
@@ -200,3 +201,67 @@ body.dark-theme {
 .dark-theme .theme-btn {
   color: #fff;
 }
+
+/* Кнопка добавления шаблона */
+.add-template-btn {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  padding: 10px 20px;
+  background-color: #abcef5;
+  color: white;
+  font-size: 16px;
+  border: none;
+  border-radius: 50px;
+  cursor: pointer;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s, box-shadow 0.3s;
+  z-index: 1000;
+}
+
+.add-template-btn i {
+  margin-right: 8px;
+}
+
+.add-template-btn:hover {
+  background-color: #88aee5;
+  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
+}
+
+.add-template-btn:focus {
+  outline: none;
+}
+
+/* Для кнопок и textarea, чтобы не "гуляли" */
+.template {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 8px 7px;
+  border: 1px solid #8888c6;
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Скрытие полей */
+.hidden {
+  display: none;
+}
+
+/* Стили для input и textarea */
+input, textarea {
+  width: 100%;
+  height: 40px; /* Сделаем высоту фиксированной */
+  padding: 8px;
+  box-sizing: border-box;
+  margin-top: 4px;
+}
+
+/* Убираем возможность изменения размеров textarea */
+textarea {
+  resize: none;
+}
+

lzipus/src/browser_action/popup.html

@@ -11,7 +11,7 @@
 </head>
 
 <body>
-  <!-- Тема переключатель -->
+  
   <button id="theme-toggle" class="theme-btn">
     <i id="theme-icon" class="fa-moon fa-solid"></i>
   </button>
@@ -20,15 +20,12 @@
     <div class="header">
       <h1 class="name fs-4 fw-lighter font-monospace">Твои шаблоны</h1>
     </div>
-
     <div id="template-list">
-      <!-- Промежуточные ответы -->
+      
       <div class="category">
         <h3 class="font-monospace">
           Промежуточные ответы
-          <i class="fa fa-chevron-down toggle-icon"></i>
         </h3>
-        <div class="category-content">
           <div class="template-group">
             <span class="template">
               <span class="template-title">Приняли в работу</span>
@@ -103,15 +100,12 @@
             </span>
           </div>
       </div>
-      </div>
 
-      <!-- Запросы партнерам -->
+      
       <div class="category">
         <h3 class="font-monospace">
           Запросы партнерам
-          <i class="fa fa-chevron-down toggle-icon"></i>
         </h3>
-        <div class="category-content">
           <div class="template-group">
             <span class="template">
               <span class="template-title">Запрос: Недоставка</span>
@@ -154,15 +148,12 @@
             </span>
           </div>
       </div>
-      </div>
 
-      <!-- Ответы клиентам -->
+      
       <div class="category">
         <h3 class="font-monospace">
           Ответы клиентам
-          <i class="fa fa-chevron-down toggle-icon"></i>
         </h3>
-        <div class="category-content">
           <div class="template-group">
             <span class="template">
               <span class="template-title">Не фиксируем на платформе</span>
@@ -280,15 +271,13 @@
             </span>
           </div>
       </div>
-      </div>
 
-      <!-- Даофис -->
+      
       <div class="category">
         <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">Внести номер телефона в аксапту</span>
             <span class="buttons">
@@ -312,7 +301,6 @@
         </div>
       </div>
   </div>
-  </div>
 
   <script src="popup.js"></script>
 </body>

lzipus/src/browser_action/popup.js

@@ -108,34 +108,4 @@ if (themeToggle && themeIcon) {
 // Применить сохраненную тему при загрузке страницы
 applySavedTheme();
 
-// Управление категориями
-document.querySelectorAll('.category h3').forEach(function(header) {
-  const categoryId = header.textContent.trim(); // Уникальный идентификатор категории по названию
-  const content = header.nextElementSibling; // Содержимое категории
-  const icon = header.querySelector('.toggle-icon'); // Иконка стрелки
-
-  // Проверка состояния категории при загрузке страницы
-  const isCategoryOpen = localStorage.getItem(categoryId) === 'true';
-
-  if (isCategoryOpen) {
-    content.classList.add('show');
-    if (icon) {
-      icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
-    }
-  } else {
-    content.classList.remove('show');
-    if (icon) {
-      icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
-    }
-  }
-
-  // Обработчик клика по заголовку категории
-  header.addEventListener('click', function() {
-    content.classList.toggle('show'); // Переключаем видимость категории
-    icon.classList.toggle('fa-chevron-down');
-    icon.classList.toggle('fa-chevron-up');
-    // Сохраняем состояние категории как открытое или закрытое
-    localStorage.setItem(categoryId, content.classList.contains('show') ? 'true' : 'false');
-  });
-});
 });