Update menubar and support dark native theme

malisipi · Feb 10, 2023 · 7d3f91c · 7d3f91c
1 parent 05dffb2
commit 7d3f91c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/events.v b/events.v
@@ -27,7 +27,7 @@ fn click_fn(x f32, y f32, mb gg.MouseButton, mut app &Window) {
 						return
 					}
 				}
-			} else if app.focus.starts_with("@menubar#") {
+			} else if app.focus.starts_with("@menubar#") && !app.prefer_native {
 				selected_item:=app.focus.replace("@menubar#","").int()
 				if x>=app.menubar_config.width*selected_item && x<=app.menubar_config.width*selected_item+app.menubar_config.sub_width {
 					menubar_sub_items_len:=app.menubar[selected_item]["items"].lst.len

diff --git a/examples/demo_with_menubar.v b/examples/demo_with_menubar.v
@@ -28,7 +28,7 @@ fn about_dialog(event_details m.EventDetails, mut app &m.Window, mut app_data vo
 	m.messagebox("MUI Demo","A User System Created for MUI Examples","ok","info")
 }
 
-mut app:=m.create(m.WindowConfig{ title:"MUI Demo",
+mut app:=m.create(m.WindowConfig{ title:"MUI Demo", 
 	menubar: [
 		{"text":m.WindowData{str:"Edit"}, "items":m.WindowData{lst:[
 			{"text":m.WindowData{str:"Add User"}, "fn": m.WindowData{fun:add_user}}

diff --git a/examples/notepad.v b/examples/notepad.v
@@ -64,7 +64,10 @@ menubar:=[
     ]}},
 ]
 
-mut app:=m.create(m.WindowConfig{ title:"Notepad - MUI Examples", width:400, height: 300, menubar:menubar, file_handler:load_file, ask_quit:true, app_data:&AppData{}, toolbar:25, statusbar:25 })
+mut app:=m.create(m.WindowConfig{ title:"Notepad - MUI Examples", width:400, height: 300, menubar:menubar, file_handler:load_file, ask_quit:true, app_data:&AppData{}, toolbar:25, statusbar:25, prefer_native:true })
+
+app.get_object_by_id("@toolbar")[0]["bg"].clr = app.color_scheme[0]
+app.get_object_by_id("@statusbar")[0]["bg"].clr = app.color_scheme[0]
 
 app.button(id:"open", x:0, y:0 width:25, height:25, text:open_file_emoji, onclick:load_file, icon:true, frame:"@toolbar")
 app.button(id:"save", x:30, y:0 width:25, height:25, text:save_file_emoji, onclick:save_file, icon:true, frame:"@toolbar")
@@ -73,7 +76,7 @@ app.slider(id:"text_size", x:180, y:5 width:80, height:15, value_min:8, value_ma
 
 app.label(id:"status_info", x:0, y:0, height:25, width:"100%x" text_align:0, text:"Welcome to Notepad!", frame:"@statusbar")
 
-app.textarea(id:"textarea", x:0, y:0, width:"100%x -20", height:"100%y", placeholder:"Open/Drop a file to edit\nOr create a new file")
-app.scrollbar(id:"textarea_scrollbar", x:"# 0", y:"# 0", width: 20, height:"100%y", vertical:true, connected_widget:app.get_object_by_id("textarea")[0], value_min:0, value_max:250, value:0)
+app.textarea(id:"textarea", x:0, y:0, width:"100%x -15", height:"100%y", placeholder:"Open/Drop a file to edit\nOr create a new file")
+app.scrollbar(id:"textarea_scrollbar", x:"# 0", y:"# 0", width: 15, height:"100%y", vertical:true, connected_widget:app.get_object_by_id("textarea")[0], value_min:0, value_max:250, value:0)
 
 app.run()
diff --git a/menubar.v b/menubar.v
@@ -11,10 +11,10 @@ fn draw_menubar(mut app &Window, size &gg.Size){
             clicked_item=app.focus.replace("@menubar#","").int()
         }
 
-        app.gg.draw_rect_filled(0,0,size.width,app.menubar_config.height,app.color_scheme[1])
+        app.gg.draw_rounded_rect_filled(0, 0, size.width, app.menubar_config.height, app.round_corners, app.color_scheme[1])
         for which_item,items in app.menubar{
 
-            app.gg.draw_rect_empty(app.menubar_config.width*which_item,0,app.menubar_config.width,app.menubar_config.height,app.color_scheme[0])
+            app.gg.draw_rounded_rect_empty(app.menubar_config.width*which_item, 0, app.menubar_config.width,app.menubar_config.height, app.round_corners, app.color_scheme[0])
 
             app.gg.draw_text(app.menubar_config.width*which_item+app.menubar_config.width/2,app.menubar_config.height/2,items["text"].str, gx.TextCfg{
                 color: app.color_scheme[3]
@@ -24,10 +24,20 @@ fn draw_menubar(mut app &Window, size &gg.Size){
             })
 
             if clicked_item==which_item {
+                if app.prefer_native {
+                    if !app.native_focus {
+                        selected:=app.create_popup_menu(items["items"].lst.map(it["text"].str), app.menubar_config.width * which_item, window_titlebar_height + app.menubar_config.height)
+                        if selected != -1 {
+                            app.menubar[which_item]["items"].lst[selected]["fn"].fun(EventDetails{event:"click",trigger:"mouse_left",value:"true",target_type:"menubar",target_id:"menubar"},mut app, mut app.app_data)
+                        }
+                        app.native_focus = true
+                    }
+                    continue
+                }
                 for which_sub_item, sub_item in items["items"].lst{
 
-                    app.gg.draw_rect_filled(app.menubar_config.width*which_item,app.menubar_config.height*(which_sub_item+1),app.menubar_config.sub_width,app.menubar_config.height,app.color_scheme[1])
-                    app.gg.draw_rect_empty(app.menubar_config.width*which_item,app.menubar_config.height*(which_sub_item+1),app.menubar_config.sub_width,app.menubar_config.height,app.color_scheme[0])
+                    app.gg.draw_rounded_rect_filled(app.menubar_config.width*which_item, app.menubar_config.height*(which_sub_item+1), app.menubar_config.sub_width, app.menubar_config.height, app.round_corners, app.color_scheme[1])
+                    app.gg.draw_rounded_rect_empty(app.menubar_config.width*which_item, app.menubar_config.height*(which_sub_item+1), app.menubar_config.sub_width, app.menubar_config.height, app.round_corners, app.color_scheme[0])
 
                     app.gg.draw_text(app.menubar_config.width*which_item+4,app.menubar_config.height*(which_sub_item+1)+app.menubar_config.height/2, sub_item["text"].str, gx.TextCfg{
                         color: app.color_scheme[3]

diff --git a/mui.v b/mui.v
@@ -12,7 +12,11 @@ pub fn create(args &WindowConfig) &Window {
 		if !prefer_native {
 			create_gx_color_from_color_scheme()
 		} else {
-			[gx.Color{r:240,g:240,b:240}, gx.Color{r:253,g:253,b:253}, gx.Color{r:0,g:120,b:212}, gx.Color{r:0,g:0,b:0}], true
+			if user_light_theme {
+				[gx.Color{r:240,g:240,b:240}, gx.Color{r:253,g:253,b:253}, gx.Color{r:0,g:120,b:212}, gx.Color{r:0,g:0,b:0}], true
+			} else {
+				[gx.Color{r:32,g:33,b:36}, gx.Color{r:53,g:54,b:58}, gx.Color{r:0,g:120,b:212}, gx.Color{r:243,g:243,b:243}], false
+			}
 		}
 	}
     mut app := &Window{
@@ -86,8 +90,7 @@ pub fn create(args &WindowConfig) &Window {
 	}
 
 	app.scrollbar(Widget{ id:"@scrollbar:horizontal", x:"!& 0", y:"!&# 0", width:"! 100%x -15", height:"! 15", value_max:args.view_area[0]+app.x_offset+app.xn_offset, size_thumb:args.width, onchange: update_scroll_hor, z_index:999999, hidden:!app.scrollbar})
-	app.scrollbar(Widget{ id:"@scrollbar:vertical", x:"!&# 0", y:"!& 0", width:"! 15", height:"! 100%y -15", value_max:args.view_area[1]+app.y_offset+app.yn_offset, size_thumb:args.height, onchange: update_scroll_ver, vertical:true, z_index:999999, hidden:!app.scrollbar})
-	app.rect(Widget{ id:"@scrollbar:extra", x:"!&# 0", y:"!&# 0", width:"15", height:"15", background: app.color_scheme[1], z_index:999999, hidden:!app.scrollbar})
+	app.scrollbar(Widget{ id:"@scrollbar:vertical", x:"!&# 0", y:"!& 0", width:"! 15", height:"! 100%y", value_max:args.view_area[1]+app.y_offset+app.yn_offset, size_thumb:args.height, onchange: update_scroll_ver, vertical:true, z_index:999999, hidden:!app.scrollbar})
 
 	if args.toolbar != 0 {
 		menubar_height := if args.menubar!=[]map["string"]WindowData{} { args.menubar_config.height } else { 0 }