Hi, I wrote a simple TODO List Widget. Maybe somebody will find it as useful as I do 🙂

unit qtx.dom.todo;

interface

uses
  qtx.sysutils, qtx.classes, qtx.dom.widgets;

type
 TQTXTodoList = class;
 TQTXTodoListConstructor = procedure (Dashboard: TQTXTodoList);

  TQTXTodoList = class(TQTXWidget)
  private
   FItems: Array of TQTXWidget;
  public
   constructor Create(AOwner: TQTXComponent; CB: TQTXTodoListConstructor); reintroduce; virtual;
   procedure Add(ADescription: String);
   procedure Clear;

   property  Items[index: int32]: TQTXWidget read ( FItems[index] );
   property  ItemCount: integer read (FItems.length);
  end;

implementation uses qtx.dom.stylesheet;

constructor TQTXTodoList.Create(AOwner: TQTXComponent; CB: TQTXTodoListConstructor);
begin
  inherited Create(AOwner, procedure(Widget: TQTXWidget)
  begin
    TQTXWidget.create(AOwner, procedure(Widget: TQTXWidget)
    begin
       Widget.InnerHtml := #'
        <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
        <defs>
          <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
            <stop offset="0%"   stop-color="#27FDC7"/>
            <stop offset="100%" stop-color="#0FC0F5"/>
          </linearGradient>

          <linearGradient id="lineGradient">
            <stop offset="0%"    stop-color="#0FC0F5"/>
            <stop offset="100%"  stop-color="#27FDC7"/>
          </linearGradient>

          <path id="TQTXTodoLine" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
          <path id="TQTXTodoBox" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
          <path id="TQTXTodoCheck" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
          <circle id="TQTXTodoCircle" cx="13.5" cy="12.5" r="10"></circle>
        </defs>
      </svg>
      ';
    end);

    Widget.Width := 500;
    Widget.Height := 300;
    Widget.Style.overflowY := 'auto';
    if assigned(CB) then CB(self);
  end);
end;

procedure TQTXTodoList.Clear;
begin
 FItems.Clear;
end;


procedure TQTXTodoList.Add(ADescription: String);
begin
 var LItem = TQTXWidget.Create(self, procedure(Widget: TQTXWidget)
 begin
  Widget.CssClasses.ClassRemove('TQTXWidget');
  Widget.DisplayMode := TQTXWidgetDisplayMode.cdBlock;
  Widget.InnerHtml :=   '<label class="TQTXTodo">'+
  '  <input class="TQTXTodoState" type="checkbox" />'+
  '  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="TQTXTodoIcon">'+
  '    <use xlink:href="#TQTXTodoLine" class="TQTXTodoLine"></use>'+
  '    <use xlink:href="#TQTXTodoBox" class="TQTXTodoBox"></use>'+
  '    <use xlink:href="#TQTXTodoCheck" class="TQTXTodoCheck"></use>'+
  '    <use xlink:href="#TQTXTodoCircle" class="TQTXTodoCircle"></use>'+
  '  </svg>'+
  '  <div class="TQTXTodoText">'+ADescription+'</div>'+
  '</label>';
 end);
 FItems.Push(LItem);
end;

initialization
begin
 var lSheet := TQTXCSSRules.Global;
  lSheet.AddStyles(
   #'
      .TQTXTodoList {
        background: #FFF;
        font-size: 20px;
        max-width: 15em;
        margin: auto;
        padding: 0.5em 1em;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
      }
      .TQTXTodoList::-webkit-scrollbar {
        width: 8px;
      }

      .TQTXTodoList::-webkit-scrollbar-track {
        background-color: transparent; /* Hintergrundfarbe der Scrollleisten-Spur */
      }

      .TQTXTodoList::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2); /* Farbe des Scrollleisten-Griffs */
      }

      .TQTXTodo {
        display: block;
        position: relative;
        padding: 1em 1em 1em 16%;
        margin: 0 auto;
        cursor: pointer;
        border-bottom: solid 1px #ddd;
      }
      .TQTXTodo:last-child {
        border-bottom: none;
      }
      .TQTXTodoState {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      .TQTXTodoText {
        color: #135156;
        transition: all 0.4s linear 0.4s;
      }
      .TQTXTodoIcon {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        margin: auto;
        fill: none;
        stroke: #27FDC7;
        stroke-width: 2;
        stroke-linejoin: round;
        stroke-linecap: round;
      }
      .TQTXTodoLine,
      .TQTXTodoBox,
      .TQTXTodoCheck {
        transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1);
      }
      .TQTXTodoCircle {
        stroke: #27FDC7;
        stroke-dasharray: 1 6;
        stroke-width: 0;
        transform-origin: 13.5px 12.5px;
        transform: scale(0.4) rotate(0deg);
        -webkit-animation: none 0.8s linear;
                animation: none 0.8s linear;
      }
      .TQTXTodoBox {
        stroke-dasharray: 56.1053, 56.1053;
        stroke-dashoffset: 0;
        transition-delay: 0.16s;
      }
      .TQTXTodoCheck {
        stroke: #27FDC7;
        stroke-dasharray: 9.8995, 9.8995;
        stroke-dashoffset: 9.8995;
        transition-duration: 0.32s;
      }
      .TQTXTodoLine {
        stroke-dasharray: 168, 1684;
        stroke-dashoffset: 168;
      }
      .TQTXTodoCircle {
        -webkit-animation-delay: 0.56s;
                animation-delay: 0.56s;
        -webkit-animation-duration: 0.56s;
                animation-duration: 0.56s;
      }
      .TQTXTodoState:checked ~ .TQTXTodoText {
        transition-delay: 0s;
        color: #5EBEC1;
        opacity: 0.6;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoBox {
        stroke-dashoffset: 56.1053;
        transition-delay: 0s;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoLine {
        stroke-dashoffset: -8;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoCheck {
        stroke-dashoffset: 0;
        transition-delay: 0.48s;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoCircle {
        -webkit-animation-name: explode;
                animation-name: explode;
      }
   ');
end;
end.

Regards,

Christian