Настройте домашнюю страницу Gerrit: логотип и цвет

Я установил и настроил Gerrit, я вижу, что он имеет белый цвет фона вместо зеленого, как https://codereview.qt-project.org/ (вероятно, изменен с зеленого на белый в последних версиях), но хочу знать, можем ли мы настроить цвет и добавить логотип.

Из gerrit-документации я вижу, что мы должны создать приведенные ниже файлы и поместить их в $ site_path / etc /, но я не уверен, как их создавать, я плох в HTML.

$site_path/etc/GerritSiteHeader.html and 
$site_path/etc/GerritSiteFooter.html
$site_path/etc/GerritSite.css
$site_path/static/logo.png

  1. Можно ли изменить цвет страниц геррита, я имею в виду белый цвет по умолчанию на любой другой?

  2. Пожалуйста, предоставьте мне образцы GerritSiteHeader.html и GerritSiteFooter.html, чтобы я мог вносить в них изменения и использовать их в моем gerrit. Я не использовал HTML раньше.

Источник

2 ответа

Решение
  1. Есть несколько настроек для изменения цвета в gerrit.conf: настройки темы.

  2. Пример файлов нашей темы, которые мы используем на http://review.typo3.org/: GerritSiteHeader.html:

    <h2 class="typo3-logo">
<a href="/"><img src="/static/typo3-logo.cache.png" alt="TYPO3" /></a>
</h2>

Я не буду вставлять наш CSS-файл (GerritSite.css), так как он вам мало поможет.

Если вы запишите, что вы хотите поместить в верхний или нижний колонтитул, вам может помочь. Но когда вы говорите, что не знаете HTML (это очень просто...) и не говорите, что вы хотите, трудно сказать вам точное решение. Я, по крайней мере, надеюсь, что https://review.typo3.org/ даст вам представление о том, как вы можете настроить его. Найти кого-то, кто напишет вам 5 строк HTML или CSS, должно быть легко.

Источник

Если у вас есть Gerrit 3+ с пользовательским интерфейсом PolyGerrit, вы больше не можете использовать GerritSiteHeaders.htmlа также GerritSite.css

Для этого нужно добавить пользовательский .jsплагин

Логотип

Разместите свои логотипы на /gerrit_root/static/logo.pngи ваш плагин к /gerrit_root/plugins/plugin.js

Вот хакерский пример плагина, который добавляет как темные, так и светлые логотипы для темной и светлой тем соответственно (может быть лучший способ, но этот работает)

      Gerrit.install(plugin => {

  const domHook = plugin.hook('header-title', {replace: true});
  domHook.onAttached(element => {
    console.log(plugin);
    const img = document.createElement("img");

    if (document.getElementById('dark-theme') == null) {
      img.src = "/static/dark.png";
    } else {
      img.src = "/static/light.png";
    }

    img.height = 24;
    img.align = "top";
    element.appendChild(img);
  });
});

В некоторых версиях требуется обновить страницу после смены темы, но в последних версиях она обновится сама.

Цвета и стили

Чтобы изменить цвета, вы можете переопределить стили в новом плагине:

      
const customTheme = document.createElement('dom-module');
customTheme.innerHTML = `
  <template>
    <style>
    html {
      // Here's how you can change default background
      --background-color-primary: yellow;
      // This is how to make header Qt Green
      --header-background-color: #41cd52;
      // You can change header's border as well
      // And you can use existing css variables
      --header-border-bottom: 1px solid var(--border-color);
    }
    </style>
  </template>
`;
customTheme.register('theme-plugin');

const darkCustomTheme = document.createElement('dom-module');
darkCustomTheme.innerHTML = `
  <template>
    <style>
    html {
      // The same way you can modify dark theme
      --primary-text-color: red;
    }
    </style>
  </template>
`;
darkCustomTheme.register('dark-theme-plugin');


Gerrit.install(plugin => {
  plugin.registerStyleModule('app-theme', 'theme-plugin');
  plugin.registerStyleModule('app-theme-dark', 'dark-theme-plugin');

  // LOGO related stuff from above and everything else
});

См. несколько примеров: polygerrit-ui/app/samples/

Связанный вопрос с аналогичным ответом

Источник
Другие вопросы по тегам