remove categories swapping

2024-12-06 16:49:33 +03:00
parent 70702268fb
commit 49c5dd0035
3 changed files with 131 additions and 108 deletions
--- a/lzipus/src/browser_action/popup.css
+++ b/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;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  font-weight: normal;
-  color: #333;
+  padding: 10px;
+  font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт для категорий */
+  font-size: 16px; /* Уменьшен размер шрифта */
+  font-weight: normal; /* Уменьшен вес шрифта для минималистичного вида */
+  color: #333; /* Цвет шрифта для категорий */
+}
+
+i {
+  width: 20px;
 }

-/* Кнопки шаблонов */
 button.template-add,
 button.template-edit,
 button.template-delete {
-  margin: 0 4px;
-  padding: 5px 10px;
-  background-color: transparent;
-  border: 1px solid #abcef5;
-  color: #333;
+  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;
+  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;
+  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);
+  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%;
+  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-radius: 8px;
+  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;
+  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;
+  background: #d0e6ff; /* Подсветка для светлой темы */
+  border-color: #a56fbf; /* Немного темнее рамка при наведении */
 }

 .dark-theme span.template:hover {
-  background: #444;
-  color: #fff;
+  background: #444; /* Подсветка для тёмной темы */
+  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;
-  width: 100%;
-  box-sizing: border-box;
+  box-shadow: 5px 3px 5px #8888c6; /* Легкая тень для категории */
+  width: 100%; /* Категория растягивается на всю ширину */
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
 }

 .category h3 {
  display: flex;
-  justify-content: space-between;
+  justify-content: space-between; /* Располагаем элементы по краям */
  align-items: center;
-  cursor: pointer;
-  width: 100%;
-  box-sizing: border-box;
+  cursor: pointer; /* Курсор при наведении на весь блок */
+  width: 100%; /* Заголовок занимает всю ширину */
+  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;
-  color: white;
+  background: #333; /* Темный фон */
+  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;
+}
+
--- a/lzipus/src/browser_action/popup.html
+++ b/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>
@@ -102,16 +99,13 @@
              </span>
            </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>
@@ -153,16 +147,13 @@
              </span>
            </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>
@@ -279,16 +270,14 @@
              </span>
            </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">
@@ -311,7 +300,6 @@
          </span>
        </div>
      </div>
-    </div>
  </div>

  <script src="popup.js"></script>
--- a/lzipus/src/browser_action/popup.js
+++ b/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');
-  });
-});
 });