Skip to content

Commit

Permalink
New theme - fluent
Browse files Browse the repository at this point in the history 
This theme should match the once Miscrosoft uses on windows 11, Fluent3.
  • Loading branch information
@diegoiast
diegoiast committed Mar 9, 2024
1 parent cff8b07 commit 59ece3a
Show file tree
Hide file tree
Showing 6 changed files with 292 additions and 250 deletions.
2 changes: 2 additions & 0 deletions CMakeLists.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ set(SVISION_SOURCES
src/textfield.h
src/widget.cpp
src/widget.h
src/themes/fluent.cpp
src/themes/fluent.h
)

if (UNIX)
Expand Down
7 changes: 4 additions & 3 deletions src/main.cxx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
#include <stackwidget.h>
#include <tabheader.h>
#include <textfield.h>
#include <themes/fluent.h>

#include <spdlog/spdlog.h>
#include <timer.h>
Expand Down Expand Up @@ -109,8 +110,8 @@ int main() {
int timer_count = 0;
auto platform = ThePlatform();
platform.init();
platform.default_theme = std::make_shared<ThemeFluent>(*platform.default_font);
// platform.default_theme = std::make_shared<ThemeVision>(*platform.default_font, 0x00ff00);
// platform.default_theme = std::make_shared<ThemeVision>(*platform.default_font);
// platform.default_theme = std::make_shared<ThemeRedmond>(*platform.default_font);
// platform.default_theme = std::make_shared<ThemePlasma>(*platform.default_font, 0xff6737);
// platform.default_theme = std::make_shared<ThemePlasma>(*platform.default_font);
Expand All @@ -120,7 +121,7 @@ int main() {
// spdlog::info("timer");
});

#if 1
#if 0
auto w2 = platform.open_window(300, 300, 640, 480, "test 2");
w2->main_widget.content.background_color = 0x00FF00;
w2->main_widget.layout->padding.set_vertical(0);
Expand Down Expand Up @@ -158,7 +159,7 @@ int main() {
platform.show_window(w2);
#endif

#if 0
#if 1
auto w1 = platform.open_window(100, 100, 640, 480, "test 1");
auto l =
w1->add_new<Label>(Position{10, 10}, Size{300, 20}, "test 1 - Hello world! glqi שלום עולם");
Expand Down
216 changes: 0 additions & 216 deletions src/theme.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,57 +333,6 @@ auto ThemeRedmond::draw_input_background(Bitmap &content, const bool has_focus)
content.fill_rect(1, 1, content.size.width - 2, content.size.height - 2, background);
}

auto ThemeVision::get_light_colors(int32_t accent) -> ColorStyle {
// https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/color
auto background = MakeColor(240, 240, 240);
auto disabled = MakeColor(130, 130, 130);

auto colors = ColorStyle();
colors.window_background = background;

colors.frame_normal_color1 = MakeColor(173, 173, 173);
colors.frame_normal_color2 = colors.frame_normal_color1;
colors.frame_normal_color3 = colors.frame_normal_color1;
colors.frame_normal_color4 = colors.frame_normal_color1;

colors.frame_hover_color1 = (accent);
colors.frame_hover_color2 = colors.frame_hover_color1;
colors.frame_hover_color3 = colors.frame_hover_color1;
colors.frame_hover_color4 = colors.frame_hover_color1;

colors.frame_selected_color1 = (accent);
colors.frame_selected_color2 = colors.frame_selected_color1;
colors.frame_selected_color3 = colors.frame_selected_color1;
colors.frame_selected_color4 = colors.frame_selected_color1;

colors.frame_disabled_color1 = disabled;
colors.frame_disabled_color2 = colors.frame_disabled_color1;
colors.frame_disabled_color3 = colors.frame_disabled_color1;
colors.frame_disabled_color4 = colors.frame_disabled_color1;

colors.input_background_normal = MakeColor(255, 255, 255);
colors.input_background_hover = MakeColor(255, 255, 255);
colors.input_background_disabled = colors.input_background_normal;
colors.input_background_selected = accent;

colors.button_background_1 = MakeColor(225, 225, 225);
colors.button_background_2 = MakeColor(225, 225, 225);
colors.button_selected_background = accent;
colors.button_selected_text = MakeColor(255, 255, 255);

colors.text_color = MakeColor(0, 0, 0);
colors.text_color_disabled = disabled;

colors.text_selection_color = MakeColor(255, 255, 255);
colors.text_selection_background = accent;
colors.text_selection_background_hover = Lighter(accent);
return colors;
}

auto ThemeVision::get_dark_colors(int32_t accent) -> ColorStyle {
ColorStyle colors;
return colors;
}

auto ThemeRedmond::draw_listview_background(Bitmap &content, const bool has_focus,
bool draw_background) -> void {
Expand Down Expand Up @@ -449,138 +398,6 @@ LayoutParams ThemeRedmond::get_padding(PaddingStyle t) {
return defaultPadding;
}

auto ThemeVision::draw_widget_background(Bitmap &content, bool has_focus) -> void {
content.fill(colors.window_background);
}

auto ThemeVision::draw_window_background(Bitmap &content) -> void {
content.fill(colors.window_background);
}

auto ThemeVision::draw_scrollbar_background(Bitmap &content) -> void {
draw_frame(content, {0, 0}, content.size, FrameStyles::Normal, FrameSize::SingleFrame);
content.fill_rect(1, 1, content.size.width - 1, content.size.height - 1,
colors.window_background);
}

auto ThemeVision::draw_button(Bitmap &content, bool has_focus, bool is_default, bool is_enabled,
ButtonStates state, const std::string &text) -> void {

auto text_padding = 5;
auto background = colors.button_background_1;
auto color = colors.text_color;
auto frame = FrameStyles::Normal;

switch (state) {
case ButtonStates::Normal:
break;
case ButtonStates::Hovered:
frame = FrameStyles::Hover;
break;
case ButtonStates::ClickedInside:
color = colors.button_selected_text;
background = colors.button_selected_background;
break;
case ButtonStates::ClickedOutside:
break;
}

if (has_focus) {
color = colors.button_selected_text;
background = colors.button_selected_background;
draw_frame(content, {0, 0}, content.size, FrameStyles::Hover,
is_default ? FrameSize::DoubleFrame : FrameSize::SingleFrame);
} else {
draw_frame(content, {0, 0}, content.size, frame,
is_default ? FrameSize::DoubleFrame : FrameSize::SingleFrame);
}
content.fill_rect(1, 1, content.size.width - 2, content.size.height - 2, background);

auto text_size = font.text_size(text);
auto centered = content.size.centered(text_size, text_padding);
font.write(content, centered, text, color);
}

auto ThemeVision::draw_checkbox(Bitmap &content, bool has_focus, bool is_enabled, bool is_checked,
ButtonStates state, const std::string &text, CheckboxShape shape,
const LayoutParams &padding3) -> void {
auto background_color = colors.window_background;
auto checkbox_size = content.size.height;
auto checkbox_color = colors.frame_hover_color1;
auto padding = 2;

switch (state) {
case ButtonStates::ClickedInside:
checkbox_color = colors.frame_hover_color1;
is_checked = true;
break;
case ButtonStates::ClickedOutside:
if (is_checked) {
checkbox_color = colors.frame_hover_color1;
} else {
checkbox_color = colors.frame_disabled_color1;
}
break;
case ButtonStates::Hovered:
break;
case ButtonStates::Normal:
break;
}

content.fill(background_color);
{
auto p = Position{padding, padding};
auto w = Size{checkbox_size - padding * 2, checkbox_size - padding * 2};
auto m = checkbox_size / 2;

switch (shape) {
case CheckboxShape::Checkbox:
content.draw_rounded_rectangle(p.x, p.y, w.width, w.height, 1,
colors.frame_hover_color1, colors.frame_hover_color2);
break;
case CheckboxShape::RadioButton:
content.draw_circle(m, m, checkbox_size / 2 - padding,
is_enabled ? checkbox_color : colors.text_color_disabled);
break;
}
}

switch (shape) {
case CheckboxShape::Checkbox:
if (is_checked) {
auto padding = 1;
auto p = Position{padding, padding};
auto w = Size{checkbox_size - padding * 2, checkbox_size - padding * 2};
content.fill_rect(p.x, p.y, w.width, w.height, checkbox_color);
content.line(p.x + 5, p.y + w.height - 10, p.x + 8, p.y + w.height - 5, 0xffffff);

content.line(p.x + 8, p.y + w.height - 5, p.x + 13, p.y + w.height - 15, 0xffffff);
}
break;
case CheckboxShape::RadioButton:
if (is_checked) {
auto m = checkbox_size / 2;
content.fill_circle(m, m, checkbox_size / 2 - padding,
is_enabled ? checkbox_color : colors.text_color_disabled);
}
break;
}

auto text_size = font.text_size(text);
auto content_rect = content.size;
auto centered = content_rect.centeredY(text_size);
centered.x += checkbox_size + padding;
font.write(content, centered, text,
is_enabled ? colors.text_color : colors.text_color_disabled);
}

auto ThemeVision::draw_input_background(Bitmap &content, const bool has_focus) -> void {
// TODO - padding should be the frame size
auto padding = 1;
auto background = has_focus ? colors.input_background_hover : colors.input_background_normal;
content.fill_rect(padding, padding, content.size.width - padding * 2,
content.size.height - padding * 2, background);
}

// static constexpr int32_t DefaultAccentLight = 0x3daee9;

Expand Down Expand Up @@ -673,39 +490,6 @@ auto ThemePlasma::get_dark_colors(int32_t accent) -> ColorStyle {
return colors;
}

auto ThemeVision::draw_listview_background(Bitmap &content, const bool has_focus,
bool draw_background) -> void {

draw_frame(content, {0, 0}, content.size, has_focus ? FrameStyles::Hover : FrameStyles::Normal,
FrameSize::SingleFrame);
if (draw_background) {
content.fill_rect(1, 1, content.size.width - 2, content.size.height - 2,
colors.input_background_normal);
}
}

void ThemeVision::draw_listview_item(Bitmap &content, const std::string_view text,
const ItemStatus status, const bool is_hover) {
auto text_color = status.is_active ? colors.text_selection_color : colors.text_color;
auto background_color =
status.is_active ? colors.text_selection_background : colors.input_background_normal;
if (is_hover && !status.is_active)
background_color = colors.text_selection_background_hover;
content.fill(background_color);

// TODO properly center
auto text_padding = 5;
auto text_size = font.text_size(text);
auto centered = Position{text_padding, text_padding};
font.write(content, centered, text, text_color);
}

auto ThemeVision::draw_single_tab(Bitmap &content, const int offset, const bool is_active,
const bool is_hover, const LayoutParams &padding,
const std::string_view name) -> int {
// TODO
return 0;
}

auto ThemePlasma::draw_widget_background(Bitmap &content, bool has_focus) -> void {
content.fill(colors.window_background);
Expand Down
31 changes: 0 additions & 31 deletions src/theme.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,37 +137,6 @@ struct ThemeRedmond : Theme {
virtual auto get_padding(PaddingStyle t = PaddingStyle::Label) -> LayoutParams override;
};

struct ThemeVision : Theme {
static constexpr int32_t DefaultAccentLight = 0xff0078d7;
static auto get_light_colors(int32_t accent = DefaultAccentLight) -> ColorStyle;
static auto get_dark_colors(int32_t accent = DefaultAccentLight) -> ColorStyle;

explicit ThemeVision(FontProvider &f, int32_t accent = DefaultAccentLight) : Theme(f) {
colors = get_light_colors(accent);
}

virtual auto init() -> void override{};
virtual auto draw_widget_background(Bitmap &content, bool has_focus) -> void override;
virtual auto draw_window_background(Bitmap &content) -> void override;
virtual auto draw_scrollbar_background(Bitmap &content) -> void override;
virtual auto draw_button(Bitmap &content, bool has_focus, bool is_default, bool is_enabled,
ButtonStates state, const std::string &text) -> void override;
virtual auto draw_checkbox(Bitmap &content, bool has_focus, bool is_enabled, bool is_checked,
ButtonStates state, const std::string &text, CheckboxShape shape,
const LayoutParams &padding) -> void override;
virtual auto draw_input_background(Bitmap &content, const bool has_focus) -> void override;
virtual auto draw_listview_background(Bitmap &content, const bool has_focus,
bool draw_background) -> void override;
virtual auto draw_listview_item(Bitmap &content, const std::string_view text,
const ItemStatus status, const bool is_hover) -> void override;
virtual auto draw_single_tab(Bitmap &content, const int offset, const bool is_active,
const bool is_hover, const LayoutParams &padding,
const std::string_view name) -> int override;

virtual auto needs_frame_for_focus() const -> bool override { return false; };
virtual auto scrollbar_size() const -> int override { return 16; };
};

struct ThemePlasma : Theme {
static constexpr int32_t DefaultAccentLight = 0x3daee9;
static auto get_light_colors(int32_t accent = DefaultAccentLight) -> ColorStyle;
Expand Down
Loading

0 comments on commit 59ece3a

Please sign in to comment.