Fix Flow Box Configure Hub

source/ubinstall-gtk-config-hub.c

@@ -137,26 +137,91 @@ void yon_configuration_hub_add(GtkFlowBox *target, char *name, char *icon, enum
     g_return_if_fail(GTK_IS_FLOW_BOX(target));
     config_hub_icon *cur_icon = malloc(sizeof(config_hub_icon));
     memset(cur_icon,0,sizeof(config_hub_icon));
-
     GtkIconInfo *info = gtk_icon_theme_lookup_icon_for_scale(gtk_icon_theme_get_default(),icon,54,1,GTK_ICON_LOOKUP_FORCE_SIZE);
 
-    char *name_wrapped = yon_char_wrap_to_length_str(name,30);
+    if(!info){
-    cur_icon->MainBox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL,5);
+        free(cur_icon);
-    cur_icon->Label = gtk_label_new(name_wrapped);
+        return;
+    }
+
+    cur_icon->MainBox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 8);
+
     cur_icon->Image = gtk_image_new_from_pixbuf(gtk_icon_info_load_icon(info,NULL));
+    gtk_image_set_pixel_size(GTK_IMAGE(cur_icon->Image), 32);
+
+    cur_icon->Label = gtk_label_new(name);
     cur_icon->page = page;
-    GtkWidget *flow = gtk_flow_box_child_new();
+
-    gtk_style_context_add_class(gtk_widget_get_style_context(flow),"bggrey");
+    GtkWidget *flow_child = gtk_flow_box_child_new();
-    gtk_widget_set_margin_end(cur_icon->Label,5);
+    gtk_style_context_add_class(gtk_widget_get_style_context(flow_child),"bggrey");
-
+
-    gtk_label_set_xalign(GTK_LABEL(cur_icon->Label),0);
+    gtk_label_set_line_wrap(GTK_LABEL(cur_icon->Label), TRUE);
-    g_object_set_data(G_OBJECT(flow),"config_hub_icon",cur_icon);
+    gtk_label_set_line_wrap_mode(GTK_LABEL(cur_icon->Label), PANGO_WRAP_WORD_CHAR);
-    gtk_container_add(GTK_CONTAINER(flow),cur_icon->MainBox);
+    gtk_label_set_ellipsize(GTK_LABEL(cur_icon->Label), PANGO_ELLIPSIZE_END);
-    gtk_box_pack_start(GTK_BOX(cur_icon->MainBox),cur_icon->Image,0,0,0);
+    
-    gtk_box_pack_start(GTK_BOX(cur_icon->MainBox),cur_icon->Label,0,0,0);
+
-    gtk_flow_box_insert(target,flow,-1);
+    gtk_label_set_width_chars(GTK_LABEL(cur_icon->Label), 5);
-    gtk_widget_show_all(flow);
+    gtk_label_set_max_width_chars(GTK_LABEL(cur_icon->Label), 15); 
-    free(name_wrapped);
+    
+    gtk_label_set_lines(GTK_LABEL(cur_icon->Label), 3);
+
+    gtk_label_set_single_line_mode(GTK_LABEL(cur_icon->Label), TRUE);
+    
+
+    gtk_label_set_xalign(GTK_LABEL(cur_icon->Label), GTK_ALIGN_FILL);
+    gtk_label_set_justify(GTK_LABEL(cur_icon->Label), GTK_JUSTIFY_LEFT);
+    
+    gtk_widget_set_hexpand(cur_icon->Label, TRUE);
+    gtk_widget_set_vexpand(cur_icon->Label, FALSE);
+    gtk_widget_set_halign(cur_icon->Label, GTK_ALIGN_FILL);
+    gtk_widget_set_valign(cur_icon->Label, GTK_ALIGN_START);
+    
+    gtk_widget_set_margin_start(cur_icon->Label, 0);
+    gtk_widget_set_margin_end(cur_icon->Label, 2);
+
+    gtk_widget_set_valign(cur_icon->Image, GTK_ALIGN_CENTER);
+    gtk_widget_set_halign(cur_icon->Image, GTK_ALIGN_CENTER);
+    gtk_widget_set_margin_start(cur_icon->Image, 3);
+    gtk_widget_set_margin_end(cur_icon->Image, 1);
+    gtk_widget_set_hexpand(cur_icon->Image, FALSE);
+    gtk_widget_set_vexpand(cur_icon->Image, FALSE);
+
+    gtk_widget_set_size_request(flow_child, 90, 40);
+    gtk_widget_set_hexpand(flow_child, TRUE);
+    gtk_widget_set_vexpand(flow_child, FALSE);
+    
+    gtk_flow_box_set_homogeneous(GTK_FLOW_BOX(target), TRUE);
+    
+    gtk_flow_box_set_min_children_per_line(GTK_FLOW_BOX(target), 2);
+    gtk_flow_box_set_max_children_per_line(GTK_FLOW_BOX(target), 10);
+    
+    gtk_flow_box_set_activate_on_single_click(GTK_FLOW_BOX(target), FALSE);
+    gtk_flow_box_set_selection_mode(GTK_FLOW_BOX(target), GTK_SELECTION_SINGLE);
+
+    g_object_set_data(G_OBJECT(flow_child),"config_hub_icon",cur_icon);
+    gtk_container_add(GTK_CONTAINER(flow_child),cur_icon->MainBox);
+
+    gtk_widget_set_valign(cur_icon->MainBox, GTK_ALIGN_CENTER);
+    gtk_widget_set_halign(cur_icon->MainBox, GTK_ALIGN_FILL);
+    gtk_widget_set_hexpand(cur_icon->MainBox, TRUE);
+    gtk_widget_set_vexpand(cur_icon->MainBox, FALSE);
+    
+    gtk_container_set_border_width(GTK_CONTAINER(flow_child), 1);
+
+    gtk_widget_set_margin_start(cur_icon->MainBox, 1);
+    gtk_widget_set_margin_end(cur_icon->MainBox, 1);
+    gtk_widget_set_margin_top(cur_icon->MainBox, 1);
+    gtk_widget_set_margin_bottom(cur_icon->MainBox, 1);
+
+    gtk_box_pack_start(GTK_BOX(cur_icon->MainBox), cur_icon->Image, FALSE, FALSE, 0);
+    gtk_box_pack_start(GTK_BOX(cur_icon->MainBox), cur_icon->Label, TRUE, TRUE, 0);
+    
+    gtk_widget_set_sensitive(flow_child, TRUE);
+
+    gtk_flow_box_insert(target,flow_child,-1);
+    gtk_widget_show_all(flow_child);
+    
+    g_object_unref(info);
 }
 
 void yon_flow_box_clear(GtkFlowBox *target){

ubinstall-gtk.css

@@ -34,7 +34,18 @@ background:transparent;
 	border-color:@theme_text_color;
 	border-style:solid;
 	border-width:0.3px;
-	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+	min-width: 120px;
+    	max-width: 250px;
+    	min-height: 50px;
+    	padding: 0px;
+    	margin: 0px;
+    	transition: all 0.2s ease;
+}
+
+.bggrey image {
+    min-width: 32px;
+    min-height: 32px;
+    margin: 0px 2px;
 }
 
 .inherited>* {

ubinstall-gtk.glade

@@ -646,6 +646,7 @@
                             <property name="margin-start">5</property>
                             <property name="margin-end">5</property>
                             <property name="label" translatable="yes">Welcome</property>
+                            <property name="wrap">True</property>
                             <property name="xalign">0</property>
                           </object>
                         </child>
@@ -675,6 +676,7 @@
                             <property name="margin-end">5</property>
                             <property name="label" translatable="yes">Licence
 agreement</property>
+                            <property name="wrap">True</property>
                             <property name="xalign">0</property>
                           </object>
                         </child>
@@ -702,6 +704,7 @@ agreement</property>
                             <property name="margin-start">5</property>
                             <property name="margin-end">5</property>
                             <property name="label" translatable="yes">Preparation</property>
+                            <property name="wrap">True</property>
                             <property name="xalign">0</property>
                           </object>
                         </child>
@@ -729,6 +732,7 @@ agreement</property>
                             <property name="margin-start">5</property>
                             <property name="margin-end">5</property>
                             <property name="label" translatable="yes">Configuration</property>
+                            <property name="wrap">True</property>
                             <property name="xalign">0</property>
                           </object>
                         </child>
@@ -756,6 +760,7 @@ agreement</property>
                             <property name="margin-start">5</property>
                             <property name="margin-end">5</property>
                             <property name="label" translatable="yes">Installation</property>
+                            <property name="wrap">True</property>
                             <property name="xalign">0</property>
                           </object>
                         </child>
@@ -783,6 +788,7 @@ agreement</property>
                             <property name="margin-start">5</property>
                             <property name="margin-end">5</property>
                             <property name="label" translatable="yes">Completion</property>
+                            <property name="wrap">True</property>
                             <property name="xalign">0</property>
                           </object>
                         </child>