Уникальная пользовательская иконка только для страницы отзывов

[Joart]

Здравствуйте,
Я хотел бы заменить иконки галочки только на странице отзывов. Их можно найти здесь:

<span class="approved">
        <svg class="fa d-icon d-icon-check svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#check"></use></svg>
        Одобрено
</span>

Если я использую это:
api.replaceIcon('check', 'full-circle-icon');
то все галочки на форуме будут заменены на полный круг…
Но я не хочу заменять иконку на других страницах.

Как я могу это сделать? Спасибо за ответ

[Canapin (Coin-coin le Canapin)]

Не уверен на 100%, что это сработает, так как я не пробовал, но можно попробовать получить текущую страницу через JavaScript, проверить, является ли она страницей ревью, и затем изменить иконку с помощью вашего кода.

Полагаю, где-то на meta был пример на JS с использованием API для получения текущей страницы, но я не могу его найти.

Или, возможно, можно просто вернуть текущий URL, чтобы проверить, находитесь ли вы на /review.

[Joart]

Я попробовал это:

    api.onPageChange((url) => {
       if (window.location.href.indexOf("review") > -1) {
             api.replaceIcon('check', 'full-circle-icon');
       }
    }

Но это не работает…
У меня вот такая ошибка:

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Unexpected token, expected “,” (97:5)

Я что-то сделал не так?

[Canapin (Coin-coin le Canapin)]

Вы забыли ); в конце вашего кода, отсюда и ошибка.

Что-то вроде этого может сработать (не обращайте внимания на парсинг URI, есть много способов это сделать):

    api.onPageChange((url) => {
       if (location.pathname.split('/')[1] == "review") {
            api.replaceIcon('check', 'full-circle-icon');
       }
    });

Но имейте в виду, что onPageChange не срабатывает при первой загрузке страницы. Если вы откроете вашфорум/обзоры напрямую в браузере, то onPageChange не сработает, и иконка не будет заменена.

Я не знаю, как запустить изменение иконки и при первой загрузке страницы, и при её смене. Возможно, для этого есть метод API, но я его не нашёл.

К тому же, после изменения иконка останется изменённой на других страницах при навигации, поэтому вам следует возвращать исходную иконку, если URL не является /review.

Короче говоря… думаю, для полной функциональности потребуется немного больше работы. Обратите внимание, что я не совсем эксперт в коде Discourse или JavaScript. Возможно, кто-то более сведущий сможет помочь дальше.

---

edit: код не работает, когда вы переходите на /review в первый раз; полагаю, это связано с тем, что страница загружается, а иконка не меняется динамически. Значит, нужно найти другой способ. Извините, что не могу помочь больше с этим.

[Joart]

@Canapin

следует вернуть иконку

Ты знаешь, как это сделать?

[Don]

Привет,

Я также подготовил решение на CSS.

Оно скроет стандартную галочку и добавит пользовательскую иконку через псевдоэлемент ::before.

1. Создайте новый компонент темы.

2. Загрузите иконку в раздел Загрузки и укажите имя переменной SCSS: review-approved-icon
   

   

3. Нажмите кнопку Редактировать CSS/HTML и вставьте следующий код в раздел Common / CSS.

Используйте это, если хотите использовать var(--success) для добавления цвета к пользовательской иконке

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) цвет для светлой темы #090 (цвет пользовательской иконки)
      // вы можете рассчитать новый фильтр цвета для светлой темы здесь: https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
      @media (prefers-color-scheme: dark) {
        // var(--success) цвет для темной темы #1ca551 (цвет пользовательской иконки)
        // вы можете рассчитать новый фильтр цвета для темной темы здесь: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Используйте это, если ваша иконка уже имеет нужный вам цвет

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Используйте это, если хотите использовать разные иконки для светлой и темной темы

Если вы выберете этот вариант, вам нужно загрузить две разные иконки с разными цветами.

Имена переменных SCSS: review-approved-icon-light и review-approved-icon-dark

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon-light);
      @media (prefers-color-scheme: dark) {
        content: url($review-approved-icon-dark);
      }
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---