Как roundcube окрашивает электронные письма и как реализовать цветовую схему roundcube в Delphi?

RoundCube дает красивую цветовую схему для простого текстового сообщения ниже.

Мне интересно, как это делает RoundCube и как реализовать эту цветовую схему в Delphi?

>>>> Peter says: 
>>>> Peter says: 
>>> Jane says:
>>> Jane says:
>> Peter says: 
>> Peter says:
> Jane says:
> Jane says:
Peter says: 
Peter says:

roundcube


delphi roundcube
person SOUser    schedule 10.04.2014    source источник
comment
Не очень приятно, если вы посмотрите на один и тот же цвет для 4 внутренних сообщений от 2 разных людей :) Кроме того, я бы использовал общий элемент управления Rich Edit, а для этих строк потока я бы использовал │ символы (фактически, каждый > символ из начало строки может быть преобразовано в │ char, каждый из которых будет отличаться цветом в зависимости от уровня потока).   -  person TLama    schedule 10.04.2014
comment
Какая часть вам кажется трудной?   -  person David Heffernan    schedule 10.04.2014
comment
@TLama Спасибо за комментарии! Замена ›на | хорошая идея! Следует отметить, что в версии roundcube нельзя выбрать вертикальные линии. Не могли бы вы помочь прокомментировать? (Действительно, цвет внутренних / старых сообщений такой же ... Отличный улов!)   -  person SOUser    schedule 10.04.2014
comment
@DavidHeffernan Вертикальные линии (которые нельзя выбрать) и определение цветовой схемы. : D   -  person SOUser    schedule 10.04.2014
comment
Мне кажется, это настраиваемый элемент управления. Цветовая гамма проста. Синий, затем зеленый, затем все остальное красное. Отчасти хромой на самом деле.   -  person David Heffernan    schedule 10.04.2014
comment
@DavidHeffernan Текстовый элемент управления, который может рисовать линии на своем фоне и может делать отступы для текста? По крайней мере, цвет намного привлекательнее, чем обычный текст? ...   -  person SOUser    schedule 10.04.2014
comment
Должно быть довольно просто воспроизвести подобный макет с помощью HTML и CSS. Поместите каждый уровень цитаты во вложенный div (или даже вложенный blockquote, если они могут быть вложенными) и настройте цвета границ и отступы на основе уровня вложенности в CSS. Самой сложной частью будет анализ текста для определения блоков текста одного уровня.   -  person Rob Kennedy    schedule 10.04.2014
comment
@RobKennedy Спасибо за комментарии!   -  person SOUser    schedule 10.04.2014
comment
Это довольно хорошая идея от Роба   -  person David Heffernan    schedule 10.04.2014

Ответы (1)


arrow_upward
5
arrow_downward

Я понятия не имею, как это делает RoundCube; Я не знаком с продуктом. Тем не менее, эффекта легко достичь с помощью HTML и CSS.

Я использовал вложенные blockquote элементы для цитат по электронной почте:

<blockquote>
  <blockquote>
    <blockquote>
      <blockquote>
        <blockquote>
          <blockquote>
            Peter says:<br/>
            Peter says:
          </blockquote>
          Jane says:<br/>
          Jane says:
        </blockquote>
        Peter says:<br/>
        Peter says:
      </blockquote>
      Jane says:<br/>
      Jane says:
    </blockquote>
    Peter says:<br/>
    Peter says
  </blockquote>
  Jane says:<br/>
  Jane says:
</blockquote>
Peter says:</br>
Peter says:

Затем я раскрасил границы и текст в соответствии с уровнем вложенности в CSS:

body {
  font-family: 'Times';
}
blockquote {
  background-color: #eee;
  border-left: 3px solid #00f;
  border-right: 3px solid #00f;
  color: #00f;
  padding: 0.6em 0.9em 0.3em;
  margin: 0 0 0.3em;
}
blockquote > blockquote {
  color: #0f0;
  border-color: #0f0;
}
blockquote > blockquote > blockquote {
  color: #b22;
  border-color: #b22;
}

Вы можете посмотреть живую демонстрацию.

RoundCube - это программа электронной почты в Интернете, поэтому вы можете посмотреть на генерируемый ею HTML, если хотите убедиться, что именно так она работает.

Самым сложным в этой задаче будет анализ электронной почты для определения блоков текста одного уровня, но это выходит за рамки этого вопроса.

person Rob Kennedy    schedule 10.04.2014
comment
Большое спасибо за ваше время и усилия! Живая демонстрация фантастическая! - person SOUser; 11.04.2014