element border

def_style.h

@@ -25,11 +25,14 @@ static const ug_style_t default_style = {
 	},
 	.btn = {
 		.color = {
-			.active = RGB_FORMAT(0x440044),
+			.act = RGB_FORMAT(0x440044),
-			.bg     = RGB_FORMAT(0x00ff00),
+			.bg  = RGB_FORMAT(0x006600),
-			.fg     = RGB_FORMAT(0xffff00),
+			.fg  = RGB_FORMAT(0xffff00),
+			.sel = RGB_FORMAT(0xff0000),
+			.br  = RGB_FORMAT(0xff00ff),
 		},
 		.font_size = SIZE_PX(10),
+		.border    = SIZE_PX(11),
 	},
 };
 

test/main.c

@@ -191,7 +191,7 @@ int main(void)
 		//	ug_container_remove(ctx, "Menu fichissimo");
 		//}
 
-		ug_container_floating(ctx, "stupid name", (ug_div_t){.x=SIZE_PX(0), .y=SIZE_PX(0), .w=SIZE_PX(100), .h=SIZE_MM(75.0)});
+		//ug_container_floating(ctx, "stupid name", (ug_div_t){.x=SIZE_PX(0), .y=SIZE_PX(0), .w=SIZE_PX(100), .h=SIZE_MM(75.0)});
 
 		//ug_container_floating(ctx, "floating windoooooooow", (ug_div_t){.x=SIZE_PX(100), .y=SIZE_PX(0), .w=SIZE_PX(100), .h=SIZE_MM(75.0)});
 
@@ -208,11 +208,13 @@ int main(void)
 
 		ug_layout_row(ctx);
 		
+		ug_layout_row(ctx);
 		ug_element_button(ctx, "button 1", "", (ug_div_t){SQUARE(SIZE_MM(10))});
 		ug_element_button(ctx, "button 2", "", (ug_div_t){SQUARE(SIZE_MM(10))});
-		//ug_element_button(ctx, "button 3", "", (ug_div_t){SQUARE(SIZE_MM(10))});
+		ug_layout_next_row(ctx);
-		ug_layout_column(ctx);
+		ug_element_button(ctx, "button 3", "", (ug_div_t){SQUARE(SIZE_MM(10))});
 		ug_element_button(ctx, "button 4", "", (ug_div_t){SQUARE(SIZE_MM(10))});
+		ug_layout_next_row(ctx);
 		ug_element_button(ctx, "button 5", "", (ug_div_t){SQUARE(SIZE_MM(10))});
 		//ug_element_button(ctx, "button 6", "", (ug_div_t){SQUARE(SIZE_MM(10)),.x=SIZE_PX(-10)});
 

ugui.c

@@ -1225,9 +1225,14 @@ static int position_element(ug_ctx_t *ctx, ug_container_t *cnt, ug_element_t *el
 	const ug_style_t *s = ctx->style_px;
 	int b  = SZ_INT(s->border.size);
 	int m  = SZ_INT(s->margin);
-	// TODO: element borders
+	// TODO: different element borders
-	int eb = 0; 
 	int cx, cy, cw, ch;
+	int eb = 0;
+	
+	switch (elem->type) {
+	case UG_ELEM_BUTTON: eb = SZ_INT(s->btn.border); break;
+	default: break;
+	} 
 
 	// FIXME: this may not work
 	cw = MAX(cnt->rca.w - cnt->space.w, 0);
@@ -1242,49 +1247,49 @@ static int position_element(ug_ctx_t *ctx, ug_container_t *cnt, ug_element_t *el
 
 	// handle relative sizes
 	if (rect->w == 0) rca->w = cw;
-	else rca->w += b;
+	else rca->w += 2*eb;
 	if (rect->h == 0) rca->h = ch;
-	else rca->h += b;
+	else rca->h += 2*eb;
 	// for elements x and y are offsets	
 	rca->x = cx + rect->x;
 	rca->y = cy + rect->y;
 
 	// if the element was put outside of the container return, this can happen
 	// because of the element offset
-	if (OUTSIDE((*rca), eb, cnt->rca, b))
+	if (OUTSIDE((*rca), 0, cnt->rca, b))
 		return -1;
 
-	if (R_MARGIN((*rca), eb) > R_MARGIN(cnt->rca, b))
+	if (R_MARGIN((*rca), 0) > R_MARGIN(cnt->rca, b))
-		rca->w = R_MARGIN(cnt->rca, b) - L_MARGIN((*rca), eb);
+		rca->w = R_MARGIN(cnt->rca, b) - L_MARGIN((*rca), 0);
 
-	if (L_MARGIN((*rca), eb) < L_MARGIN(cnt->rca, b)) {
+	if (L_MARGIN((*rca), 0) < L_MARGIN(cnt->rca, b)) {
 		rca->x = L_MARGIN(cnt->rca, b);
-		rca->w -= L_MARGIN(cnt->rca, b) - L_MARGIN((*rca), eb);
+		rca->w -= L_MARGIN(cnt->rca, b) - L_MARGIN((*rca), 0);
 	}
 
-	if (T_MARGIN((*rca), eb) < T_MARGIN(cnt->rca, b)) {
+	if (T_MARGIN((*rca), 0) < T_MARGIN(cnt->rca, b)) {
 		rca->y = T_MARGIN(cnt->rca, b);
-		rca->h -= T_MARGIN(cnt->rca, b) - T_MARGIN((*rca), eb);
+		rca->h -= T_MARGIN(cnt->rca, b) - T_MARGIN((*rca), 0);
 	}
 	
-	if (B_MARGIN((*rca), eb) > B_MARGIN(cnt->rca, b))
+	if (B_MARGIN((*rca), 0) > B_MARGIN(cnt->rca, b))
-		rca->h = B_MARGIN(cnt->rca, b) - T_MARGIN((*rca), eb);
+		rca->h = B_MARGIN(cnt->rca, b) - T_MARGIN((*rca), 0);
 	
 
 	if (TEST(cnt->flags, CNT_LAYOUT_COLUMN)) {
 		cnt->c_orig.y += rca->h + m;
-		cnt->r_orig.x = R_MARGIN((*rca), eb) + m;
+		cnt->r_orig.x = R_MARGIN((*rca), 0) + m;
-		cnt->r_orig.y = T_MARGIN((*rca), eb);
+		cnt->r_orig.y = T_MARGIN((*rca), 0);
 
 	} else {
 		cnt->r_orig.x += rca->w + m;
-		cnt->c_orig.x = L_MARGIN((*rca), eb);
+		cnt->c_orig.x = L_MARGIN((*rca), 0);
-		cnt->c_orig.y = B_MARGIN((*rca), eb) + m;
+		cnt->c_orig.y = B_MARGIN((*rca), 0) + m;
 	}
-	if (B_MARGIN(cnt->space, 0) < B_MARGIN((*rca), eb))
+	if (B_MARGIN(cnt->space, 0) < B_MARGIN((*rca), 0))
-		cnt->space.h = B_MARGIN((*rca), eb) - T_MARGIN(cnt->space, 0);
+		cnt->space.h = B_MARGIN((*rca), 0) - T_MARGIN(cnt->space, 0);
-	if (R_MARGIN(cnt->space, 0) < R_MARGIN((*rca), eb))
+	if (R_MARGIN(cnt->space, 0) < R_MARGIN((*rca), 0))
-		cnt->space.w = R_MARGIN((*rca), eb) - L_MARGIN(cnt->space, 0);
+		cnt->space.w = R_MARGIN((*rca), 0) - L_MARGIN(cnt->space, 0);
 	
 	return 0;
 }
@@ -1315,13 +1320,23 @@ void draw_elements(ug_ctx_t *ctx, ug_container_t *cnt)
 
 	for (int i = 0; i < cnt->elem_stack.idx; i++) {
 		ug_element_t *e = &(cnt->elem_stack.items[i]);
-		ug_color_t col = RGB_FORMAT(0);
+		ug_color_t col = RGB_FORMAT(0), bcol = RGB_FORMAT(0);
+		ug_rect_t r = e->rca;
+		int eb;
 
 		switch (e->type) {
 		case UG_ELEM_BUTTON:
 			// TODO: draw borders, different color for selected element
-			col = cnt->hover_elem == e->id ? s->btn.color.active : s->btn.color.bg;
+			col  = cnt->hover_elem == e->id ? s->btn.color.act : s->btn.color.bg;
-			push_rect_command(ctx, &e->rca, col);
+			bcol = cnt->selected_elem == e->id ? s->btn.color.sel : s->btn.color.br;
+			eb = SZ_INT(ctx->style_px->btn.border);
+
+			push_rect_command(ctx, &r, bcol);
+			r.x += eb;
+			r.y += eb;
+			r.w -= 2*eb;
+			r.h -= 2*eb; 
+			push_rect_command(ctx, &r, col);
 			break;
 		default: break;
 		}

ugui.h

@@ -114,8 +114,8 @@ typedef struct {
 		ug_size_t  height, font_size;
 	} title;
 	struct {
-		struct { ug_color_t active, bg, fg; } color;
+		struct { ug_color_t act, bg, fg, sel, br; } color;
-		ug_size_t font_size;
+		ug_size_t font_size, border;
 	} btn;
 } ug_style_t;