Add some more button state designs
This commit is contained in:
Kevin Lange
parent
aeb45645a5
commit
e04aaa0678
180
ttk-demo.c
180
ttk-demo.c
@ -7,6 +7,9 @@
|
||||
#include <assert.h>
|
||||
#include <math.h>
|
||||
#include <cairo.h>
|
||||
#include <ft2build.h>
|
||||
#include FT_FREETYPE_H
|
||||
#include FT_CACHE_H
|
||||
|
||||
#include "lib/window.h"
|
||||
#include "lib/graphics.h"
|
||||
@ -83,6 +86,176 @@ void _ttk_draw_button(cairo_t * cr, int x, int y, int width, int height) {
|
||||
cairo_pattern_destroy(pat);
|
||||
}
|
||||
|
||||
{
|
||||
cairo_surface_t * surface = cairo_get_target(cr);
|
||||
gfx_context_t fake_context = {
|
||||
.width = cairo_image_surface_get_width(surface),
|
||||
.height = cairo_image_surface_get_height(surface),
|
||||
.depth = 32,
|
||||
.buffer = NULL,
|
||||
.backbuffer = cairo_image_surface_get_data(surface)
|
||||
};
|
||||
|
||||
set_font_face(FONT_SANS_SERIF);
|
||||
set_font_size(13);
|
||||
|
||||
char * title = "Regular Button";
|
||||
int str_width = draw_string_width(title);
|
||||
draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(49,49,49), title);
|
||||
}
|
||||
|
||||
cairo_restore(cr);
|
||||
}
|
||||
|
||||
void _ttk_draw_button_hover(cairo_t * cr, int x, int y, int width, int height) {
|
||||
cairo_save(cr);
|
||||
|
||||
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
|
||||
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
|
||||
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source_rgba(cr, 44.0/255.0, 71.0/255.0, 91.0/255.0, 29.0/255.0);
|
||||
cairo_set_line_width(cr, 4);
|
||||
cairo_stroke(cr);
|
||||
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source_rgba(cr, 158.0/255.0, 169.0/255.0, 177.0/255.0, 1.0);
|
||||
cairo_set_line_width(cr, 2);
|
||||
cairo_stroke(cr);
|
||||
|
||||
{
|
||||
cairo_pattern_t * pat = cairo_pattern_create_linear(2 + x, 2 + y, 2 + x, 2 + y + height - 4);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 0, 1, 1, 1, 1);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 1, 229.0/255.0, 229.0/255.0, 246.0/255.0, 1);
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source(cr, pat);
|
||||
cairo_fill(cr);
|
||||
cairo_pattern_destroy(pat);
|
||||
}
|
||||
|
||||
{
|
||||
cairo_pattern_t * pat = cairo_pattern_create_linear(3 + x, 3 + y, 3 + x, 3 + y + height - 4);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 0, 252.0/255.0, 252.0/255.0, 254.0/255.0, 1);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 1, 212.0/255.0, 223.0/255.0, 251.0/255.0, 1);
|
||||
cairo_rounded_rectangle(cr, 3 + x, 3 + y, width - 5, height - 5, 2.0);
|
||||
cairo_set_source(cr, pat);
|
||||
cairo_fill(cr);
|
||||
cairo_pattern_destroy(pat);
|
||||
}
|
||||
|
||||
{
|
||||
cairo_surface_t * surface = cairo_get_target(cr);
|
||||
gfx_context_t fake_context = {
|
||||
.width = cairo_image_surface_get_width(surface),
|
||||
.height = cairo_image_surface_get_height(surface),
|
||||
.depth = 32,
|
||||
.buffer = NULL,
|
||||
.backbuffer = cairo_image_surface_get_data(surface)
|
||||
};
|
||||
|
||||
set_font_face(FONT_SANS_SERIF);
|
||||
set_font_size(13);
|
||||
|
||||
char * title = "Button with Hover Highlight";
|
||||
int str_width = draw_string_width(title);
|
||||
draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(49,49,49), title);
|
||||
}
|
||||
|
||||
cairo_restore(cr);
|
||||
|
||||
}
|
||||
|
||||
void _ttk_draw_button_select(cairo_t * cr, int x, int y, int width, int height) {
|
||||
cairo_save(cr);
|
||||
|
||||
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
|
||||
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
|
||||
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source_rgba(cr, 134.0/255.0, 173.0/255.0, 201.0/255.0, 1.0);
|
||||
cairo_set_line_width(cr, 2);
|
||||
cairo_stroke(cr);
|
||||
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source_rgba(cr, 202.0/255.0, 211.0/255.0, 232.0/255.0, 1.0);
|
||||
cairo_fill(cr);
|
||||
|
||||
{
|
||||
cairo_surface_t * surface = cairo_get_target(cr);
|
||||
gfx_context_t fake_context = {
|
||||
.width = cairo_image_surface_get_width(surface),
|
||||
.height = cairo_image_surface_get_height(surface),
|
||||
.depth = 32,
|
||||
.buffer = NULL,
|
||||
.backbuffer = cairo_image_surface_get_data(surface)
|
||||
};
|
||||
|
||||
set_font_face(FONT_SANS_SERIF);
|
||||
set_font_size(13);
|
||||
|
||||
char * title = "Selected Button";
|
||||
int str_width = draw_string_width(title);
|
||||
draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(49,49,49), title);
|
||||
}
|
||||
|
||||
cairo_restore(cr);
|
||||
|
||||
}
|
||||
|
||||
void _ttk_draw_button_disabled(cairo_t * cr, int x, int y, int width, int height) {
|
||||
cairo_save(cr);
|
||||
|
||||
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
|
||||
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
|
||||
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source_rgba(cr, 44.0/255.0, 71.0/255.0, 91.0/255.0, 29.0/255.0);
|
||||
cairo_set_line_width(cr, 4);
|
||||
cairo_stroke(cr);
|
||||
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source_rgba(cr, 152.0/255.0, 152.0/255.0, 152.0/255.0, 1.0);
|
||||
cairo_set_line_width(cr, 2);
|
||||
cairo_stroke(cr);
|
||||
|
||||
{
|
||||
cairo_pattern_t * pat = cairo_pattern_create_linear(2 + x, 2 + y, 2 + x, 2 + y + height - 4);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 0, 229.0/255.0, 229.0/255.0, 229.0/255.0, 1);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 1, 178.0/255.0, 178.0/255.0, 178.0/255.0, 1);
|
||||
cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0);
|
||||
cairo_set_source(cr, pat);
|
||||
cairo_fill(cr);
|
||||
cairo_pattern_destroy(pat);
|
||||
}
|
||||
|
||||
{
|
||||
cairo_pattern_t * pat = cairo_pattern_create_linear(3 + x, 3 + y, 3 + x, 3 + y + height - 4);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 0, 210.0/255.0, 210.0/255.0, 210.0/255.0, 1);
|
||||
cairo_pattern_add_color_stop_rgba(pat, 1, 165.0/255.0, 166.0/255.0, 170.0/255.0, 1);
|
||||
cairo_rounded_rectangle(cr, 3 + x, 3 + y, width - 5, height - 5, 2.0);
|
||||
cairo_set_source(cr, pat);
|
||||
cairo_fill(cr);
|
||||
cairo_pattern_destroy(pat);
|
||||
}
|
||||
|
||||
{
|
||||
cairo_surface_t * surface = cairo_get_target(cr);
|
||||
gfx_context_t fake_context = {
|
||||
.width = cairo_image_surface_get_width(surface),
|
||||
.height = cairo_image_surface_get_height(surface),
|
||||
.depth = 32,
|
||||
.buffer = NULL,
|
||||
.backbuffer = cairo_image_surface_get_data(surface)
|
||||
};
|
||||
|
||||
set_font_face(FONT_SANS_SERIF);
|
||||
set_font_size(13);
|
||||
|
||||
char * title = "Disabled Button";
|
||||
int str_width = draw_string_width(title);
|
||||
draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(100,100,100), title);
|
||||
}
|
||||
|
||||
cairo_restore(cr);
|
||||
}
|
||||
|
||||
@ -104,9 +277,12 @@ void ttk_window_draw(ttk_window_t * window) {
|
||||
_ttk_draw_button(cr, 4, 4, window->width - 8, 40);
|
||||
|
||||
_ttk_draw_button(cr, 4, 48 + 4, (window->width / 2) - 8, 40);
|
||||
_ttk_draw_button(cr, 4 + (window->width / 2), 48 + 4, (window->width / 2) - 8, 40);
|
||||
_ttk_draw_button_hover(cr, 4 + (window->width / 2), 48 + 4, (window->width / 2) - 8, 40);
|
||||
|
||||
_ttk_draw_button(cr, 4, 48 + 48 + 4, window->width - 8, window->height - 48 - 48 - 8);
|
||||
_ttk_draw_button_select(cr, 4, 2 * 48 + 4, (window->width / 2) - 8, 40);
|
||||
_ttk_draw_button_disabled(cr, 4 + (window->width / 2), 2 * 48 + 4, (window->width / 2) - 8, 40);
|
||||
|
||||
_ttk_draw_button(cr, 4, 3 * 48 + 4, window->width - 8, window->height - (3 * 48) - 8);
|
||||
|
||||
/* Paint the window's internal surface onto the backbuffer */
|
||||
cairo_set_source_surface(cr_main, internal_surface, (double)window->off_x, (double)window->off_y);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user