ToDo GUI

ToDo Applications created using various GUI tools.

Language

• Dart

  • Flutter
  • Rikulo UI

• Python

  • Flet
  • tkinter
  • Kivy
  • Remi
  • Reflex
  • PyQt
  • TkEasyGUI
  • Toga
  • PyForms
  • PyGTK
  • wxPython
  • Azul

• C++

  • QT
  • wxWidgets
  • GTK
  • GTKmm
  • FLTK (Fast Light Toolkit)
  • NanoGUI
  • Ultimate++ (U++)
  • CEGUI (Crazy Eddie's GUI)
  • Cinder
  • ImGui (Immediate Mode GUI)
  • Azul

• JavaScript

  • Electron
  • Tauri
  • Neutralino.js
  • NW.js
  • React Native
  • Wails
  • Lorca
  • Remi
  • Reflex
  • Dioxus
  • Proton Native
  • DeskGap
  • Carlo
  • Sciter
  • Ultralight

• Go

  • Fyne
  • Lorca
  • Wails
  • Gio
  • Walk
  • Go-GTK
  • shiny
  • Qt for Go
  • go-sciter
  • nuklear

• Rust

  • Druid
  • Slint
  • Tauri
  • Iced
  • Dioxus
  • Xilem
  • gtk-rs
  • egui
  • OrbTk
  • fltk-rs
  • Relm4
  • KAS
  • Conrod
  • vizia
  • Azul
  • rui
  • fui
  • silvia
  • Leptos

• C#

  • Avalonia
  • Uno Platform
  • WPF
  • UWP
  • Prism
  • Xamarin.Forms
  • WinForms
  • GTK#
  • MAUI
  • Electron.NET
  • OpenTK

Application Specification

• Default Window Size
  • width: 800px
  • height: 600px

Architecture

Class Diagram

classDiagram
    class Todo {
      + int id
      + string task
      + boolean isCompleted
    }
    
    class TodoModel {
      + List~Todo~ list
      + addTodo(string task)
      + getData() List~Todo~
      + findById(int id) Todo
      + changeCompleted(Todo todo) void
      + getFilteredTodos(TabMenu tab) List~Todo~
      + removeData(int id) void
    }
    
    TodoModel "1" --> "*" Todo : has
    
    class TabMenu {
      + string text
      + boolean isActive
    }
    
    class MenuModel {
      + List~TabMenu~ tabList
      + TabMenu activeTab
      + setActiveTab(TabMenu tabItem)
      + getActiveTab() TabMenu
      + getTabList() List~TabMenu~
    }
    
    MenuModel "1" --> "*" TabMenu : has
    MenuModel "1" --> "1" TabMenu : activeTab

Loading

Architecture Style

It is based on the MVC pattern and adapted to the architectural style of each framework.

This may be the MVC pattern, MVP pattern, MVVM pattern, etc., but at a minimum, it should be done in the MV** format.

Design

• Contents
  • BackGroundColor
    • #1C1C1C
  • padding
    • Top, Bottom 10px
    • Left, Right 24px
• Title
  • Color #FFFFFF
  • FontSize 18px
  • MarginBottom 14px
• ToDoInput
  • Padding
    • Top, Bottom 4px
    • Left, Right 16px
  • TextColor #FFFFFF
  • PlaceHolderText
    • Add Task
  • PlaceHolderTextColor #9B9B9B
  • BackGroundColor #303030
  • MinWidth 430px
  • Height 35px
  • RoundedCorners 4px
  • MarginBottom 14px
• TabMenu
  • MenuText
    • All
    • Active
    • Completed
  • TextColor #D2D2D2
  • FontSize 14px
  • lineHeight 28px
  • ActiveStyle
    • FontBold
  • MenuItemPadding
    • Left, Right 8px
  • MarginBottom 3px
• ToDoItem
  • MinWidth 430px
  • Height 35px
  • Padding 10px
  • RoundedCorners 4px
  • BackGroundColor #2A2A2A
  • MarginBottom 5px
  • ToDoItemCheckBox
    • Width 16px
    • Height 16px
    • RoundedCorners 8px
    • borderColor 2px #D9D9D9
    • MarginRight 18px
    • CheckedBorder 2px solid
    • CheckedBorderColor #5DC2AF
  • FontSize 14px
  • TextColor #D2D2D2

Style CSS

/* Input Style */
input {
    border: 1px solid transparent;
}

input:focus {
    outline: none;
    border: 1px solid #5DC2AF;
}

.input.todo {
    margin-bottom: 14px;
}

.input.todo input {
    width: 100%;
    min-width: 430px;
    height: 35px;
    padding: 4px 16px;
    background: #303030;
    border-radius: 4px;
    color: #FFFFFF;
}

/* Menu List Style */
.list.menu {
    display: flex;
    list-style: none;
    margin-bottom: 3px;
}

.list.menu > li {
    height: 28px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 28px;
    align-items: center;
    justify-content: center;
}

.list.menu > li.isActive {
    font-weight: bold;
}

.list.menu a {
    color: #D2D2D2;
    text-decoration: none;
}

/* Task List Style */
.list.task {
    list-style: none;
}

.list.task > li {
    display: flex;
    width: 100%;
    min-width: 430px;
    height: 35px;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: #2A2A2A;
    align-items: center;
    cursor: pointer;
}

.list.task > li .checkbox {
    height: 20px;
    margin-right: 18px;
}

.list.task > li .checkbox input {
    position: relative;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 2px solid #D9D9D9;
}

.list.task > li .checkbox input:checked::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 1px;
    display: block;
    width: 4px;
    height: 6px;
    border: 2px solid #5DC2AF;
    border-top: transparent;
    border-left: transparent;
    transform: rotate(45deg);
}

.list.task > li .text {
    font-size: 14px;
    color: #D2D2D2;
    line-height: 20px;
}

.list.task > li.isCompleted .text {
    text-decoration: line-through;
}

GUI Tools official website

Author

Daisuke Takayama

• @webcyou
• @panicdragon
• https://github.com/webcyou
• https://github.com/webcyou-org
• https://github.com/panicdragon
• http://www.webcyou.com/

License

Copyright (c) 2024 Daisuke Takayama Released under the MIT license