Last active
April 21, 2022 07:11
-
-
Save lazalong/056fda030c9ff127a07d77847939afec to your computer and use it in GitHub Desktop.
Test to have menu item hidden by default and then toggle them from hidding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import ui | |
| import gx | |
| import ui.component as uic | |
| const ( | |
| win_width = 800 | |
| win_height = 400 | |
| win_title = 'VOGEd' | |
| win_resizable = true | |
| ) | |
| struct App { | |
| mut: | |
| window &ui.Window = 0 | |
| title string | |
| } | |
| [console] | |
| fn main() { | |
| mut app := &App{} | |
| mut menu_file := ui.menu( | |
| id: 'File' | |
| text: 'File' | |
| //width: 30 | |
| items: [ | |
| ui.MenuItem{on_save, 'Save'} | |
| ui.MenuItem{on_save_as, 'Save As'} | |
| ] | |
| ) | |
| mut window := ui.window( | |
| width: win_width | |
| height: win_height | |
| title: win_title | |
| state: app | |
| mode: .resizable | |
| on_init: win_init // essential for sokol | |
| on_mouse_move: on_mouse_mvt | |
| bg_color: gx.Color{87, 87, 87, 128} | |
| children: [ | |
| ui.column( | |
| heights: [20.0, ui.stretch, ui.compact] | |
| children: [ | |
| // -----------Menu bar ------------- | |
| ui.row( | |
| id: 'menu bar' | |
| spacing: 3 | |
| // TODO If ui.compact is used it will set the width to the 'largest' child - not the top menu button | |
| //widths: [ui.compact, ui.compact,ui.compact,ui.compact,ui.compact] //, ui.stretch] | |
| widths: [50.0, 50.0, 50.0, 50.0] //, ui.stretch] | |
| //heights: [ui.compact, ui.compact, ui.compact, ui.compact] | |
| heights: [18.0, 18.0, 18.0, 18.0] | |
| children: [ | |
| ui.column( | |
| margin_: 1 | |
| spacing: 1 | |
| widths: [ui.compact,ui.compact]//, ui.stretch] // aka one per child | |
| children: [ | |
| ui.button( | |
| text: 'File' | |
| width: 30 | |
| onclick: | |
| onclick_menu_edit // test to see if more flexible | |
| ), | |
| menu_file, // test to see if more flexible | |
| ] | |
| ), | |
| ui.column( | |
| margin_: 1 | |
| spacing: 1 | |
| widths: [ui.compact, ui.compact] //, ui.stretch] | |
| children: [ | |
| ui.button( | |
| text: 'Edit' | |
| width: 30 | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| mut menu_e := b.ui.window.menu('Edit') | |
| menu_e.hidden = !menu_e.hidden | |
| b.ui.window.update_layout() | |
| } | |
| ), | |
| ui.menu( | |
| id: 'Edit' | |
| text: 'Edit' | |
| //width: 30 | |
| items: [ | |
| ui.MenuItem{on_undo, 'Undo'} | |
| ui.MenuItem{on_redo, 'Redo'} | |
| ] | |
| ), | |
| ] | |
| ), | |
| ui.column( | |
| margin_: 1 | |
| spacing: 1 | |
| widths: [ui.compact,ui.compact] //, ui.stretch] | |
| children: [ | |
| ui.button( | |
| text: 'View' | |
| width: 30 | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| mut v := b.ui.window.menu('View') | |
| v.hidden = !v.hidden | |
| b.ui.window.update_layout() | |
| } | |
| ), | |
| ui.row( | |
| //id: 'menu bar' | |
| spacing: 3 | |
| //widths: [ui.compact, ui.compact,ui.compact,ui.compact,ui.compact] //, ui.stretch] | |
| widths: [ui.compact, ui.compact, ui.compact] //, ui.stretch] | |
| //heights: [ui.compact, ui.compact, ui.compact, ui.compact] | |
| heights: [18.0, 18.0] | |
| children: [ | |
| ui.menu( | |
| id: 'View' | |
| text: 'View' | |
| //width: 30 | |
| items: [ | |
| ui.MenuItem{on_reset_layout, 'Reset Default Layout'} // TODO MenuItemSelect | |
| ui.MenuItem{on_set_theme, 'Set Theme'} | |
| ui.MenuItem{on_view_panel, 'Show/Hide Panels'} // TODO MenuItemRadio | |
| ] | |
| ), | |
| // part of MenuItemSelect | |
| // TODO Set vertical position based on the 'Set Theme' menuitem | |
| ui.at(120, 30, | |
| ui.dropdown( | |
| id: 'SelectTheme' | |
| width: 140 | |
| height: 20 | |
| def_text: 'Select a theme' | |
| on_selection_changed: on_select_theme | |
| items: [ | |
| ui.DropdownItem{ | |
| text: 'classic' | |
| }, | |
| ui.DropdownItem{ | |
| text: 'blue' | |
| }, | |
| ui.DropdownItem{ | |
| text: 'red' | |
| }, | |
| ] | |
| ) | |
| ), // end MenuItemSelect | |
| ui.at(-60, 60, | |
| ui.radio( | |
| id: 'ShowHidePanels' | |
| horizontal: false | |
| compact: true | |
| //title: 'Show/Hide panels' | |
| on_click: on_showhide_panel | |
| values: [ | |
| 'TopLeft', 'TopCenter', 'TopRight', | |
| 'BottomLeft', 'BottomCenter', 'BottomRight' | |
| ] | |
| ), | |
| ), // end second MenuItemSelect | |
| ] | |
| ), | |
| ] | |
| ), | |
| ui.column( | |
| margin_: 1 | |
| spacing: 1 | |
| widths: [ui.compact,ui.compact] //, ui.stretch] | |
| children: [ | |
| ui.button( | |
| text: 'Help' | |
| width: 30 | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| mut h := b.ui.window.menu('Help') | |
| h.hidden = !h.hidden | |
| b.ui.window.update_layout() | |
| } | |
| ), | |
| ui.menu( | |
| id: 'Help' | |
| text: 'Help' | |
| //width: 30 | |
| items: [ | |
| ui.MenuItem{on_show_doc, 'Show Documentation'} | |
| ui.MenuItem{on_about, 'About'} | |
| ] | |
| ), | |
| ] | |
| ), | |
| ] | |
| ), | |
| // ---------- Workspace ----------- | |
| // Two rows: | |
| // - left/split-center/righ tab panels : project/hierarchy, visual/edit, properties | |
| // - left/center/right panels : debug console, terminal, output | |
| ui.column( | |
| id: 'Workspace' | |
| heights: [ui.stretch, 100] // TODO Bug? why is the bottom part dissapearing when window resized to large size???? | |
| widths: [ui.stretch, ui.stretch] | |
| spacing: 0.01 | |
| margin_: 1 | |
| bg_color: gx.Color{50, 100, 0, 50} | |
| scrollview: true | |
| children: [ | |
| ui.row( | |
| id: 'Top' | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| // not scrollable | |
| children: [ | |
| ui.column( | |
| id: 'TopLeft' | |
| scrollview: true | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| children: [ | |
| // test to change to a tabbed panel | |
| uic.tabs( | |
| id: 'Tabs' | |
| tabs: ['tab1', 'tab2'] | |
| pages: [ | |
| ui.column( | |
| heights: ui.compact | |
| widths: ui.compact | |
| children: [ | |
| ui.button(id: 'left1', text: 'left1') | |
| ui.button(id: 'left2', text: 'left2') | |
| ] | |
| ), | |
| ui.column( | |
| heights: ui.compact | |
| widths: ui.compact | |
| children: [ | |
| ui.button(id: 'right1', text: 'right1') | |
| ui.button(id: 'right2', text: 'right2') | |
| ] | |
| ), | |
| ] | |
| ) | |
| ] | |
| ), | |
| ui.column( | |
| id: 'TopCenter' | |
| scrollview: true | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| children: [ | |
| ui.button( | |
| text: 'TopCenter' | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| println('TopCenter') | |
| } | |
| ) | |
| ] | |
| ), | |
| ui.column( | |
| id: 'TopRight' | |
| scrollview: true | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| children: [ | |
| ui.button( | |
| text: 'TopRight' | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| println('TopRight') | |
| } | |
| ) | |
| ] | |
| ), | |
| ] | |
| ), | |
| ui.row( | |
| id: 'Bottom' | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| // not scrollable | |
| children: [ | |
| ui.column( | |
| id: 'BottomLeft' | |
| scrollview: true | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| children: [ | |
| ui.button( | |
| text: 'BottomLeft' | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| println('BottomLeft') | |
| } | |
| ) | |
| ] | |
| ), | |
| ui.column( | |
| id: 'BottomCenter' | |
| scrollview: true | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| children: [ | |
| ui.button( | |
| text: 'BottomCenter' | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| println('BottomCenter') | |
| } | |
| ) | |
| ] | |
| ), | |
| ui.column( | |
| id: 'BottomRight' | |
| scrollview: true | |
| widths: ui.stretch | |
| heights: ui.stretch | |
| children: [ | |
| ui.button( | |
| text: 'BottomRight' | |
| onclick: | |
| fn (a voidptr, b &ui.Button) { | |
| println('BottomRight') | |
| } | |
| ) | |
| ] | |
| ), | |
| ] | |
| ), | |
| ] | |
| ), | |
| // -------- Footer ----------------- | |
| ui.row( | |
| id: 'footer_bar' | |
| margin_: 1 | |
| spacing: 1 | |
| // TODO align: [.left,.left] | |
| widths: [80.0,ui.compact] | |
| heights: [18.0,18.0] | |
| bg_color: gx.Color{87, 87, 87, 128} | |
| children: [ | |
| ui.button( | |
| id: 'cursor_pos' | |
| text: '<-,->' | |
| ) | |
| ui.button( | |
| id: 'mode' | |
| text: 'normal' | |
| ) | |
| ] | |
| ), | |
| ] | |
| ) // end window's column | |
| ] | |
| ) | |
| app.window = window | |
| ui.run(window) // note: blocking! | |
| } | |
| fn win_init(w &ui.Window) { | |
| // TODO Menu should have visible attribute settable at creation | |
| mut m := w.menu("File") | |
| m.hidden = true | |
| m = w.menu("Edit") | |
| m.hidden = true | |
| m = w.menu("View") | |
| m.hidden = true | |
| m = w.menu("Help") | |
| m.hidden = true | |
| // TODO Should be a MenuItemSelect with visible attribute settable at creation | |
| mut mi := w.dropdown("SelectTheme") | |
| mi.hidden = true | |
| /* Bug? Doesn't work as expected. I tried to inactivate it so that the 'ShowHidePanels' will align to the menu... | |
| mut s:= w.stack("SelectTheme") | |
| state := true | |
| if state { | |
| s.set_children_depth(ui.z_index_hidden, 0) | |
| } else { | |
| s.set_children_depth(0, 0) | |
| } */ | |
| mut mr := w.radio("ShowHidePanels") | |
| mr.hidden = true | |
| w.update_layout() | |
| } | |
| fn onclick_menu_edit(a voidptr, b &ui.Button) { | |
| mut menu := b.ui.window.menu('File') | |
| menu.set_visible(menu.hidden) | |
| //menu.hidden = !menu.hidden | |
| //b.ui.window.update_layout() | |
| } | |
| fn on_save(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("save") | |
| } | |
| fn on_save_as(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("save as") | |
| } | |
| fn on_undo(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("undo") | |
| } | |
| fn on_redo(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("redo") | |
| } | |
| fn on_reset_layout(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("reset layout") | |
| mut menu := m | |
| menu.hidden = true | |
| } | |
| fn on_set_theme(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("set theme") | |
| mut mi := m.ui.window.dropdown("SelectTheme") // should be a MenuItemSelect | |
| mi.set_visible(true) | |
| } | |
| fn on_view_panel(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("view/hide panels") | |
| mut mr := m.ui.window.radio("ShowHidePanels") // should be a MenuItemRadio | |
| //mr.set_visible(true) // TODO set_visible is private | |
| mr.hidden = false | |
| } | |
| fn on_show_doc(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("show documentation") | |
| mut menu := m | |
| menu.hidden = true | |
| } | |
| fn on_about(m &ui.Menu, item &ui.MenuItem, state voidptr) { | |
| println("about") | |
| mut menu := m | |
| menu.hidden = true | |
| ui.message_box('About This App\nThis a test by lazalong') | |
| } | |
| fn on_mouse_mvt(e ui.MouseMoveEvent, w &ui.Window) { | |
| mut tb := w.button('cursor_pos') | |
| tb.set_text('<$e.x, $e.y>') | |
| w.update_layout() | |
| } | |
| fn on_select_theme(app voidptr, dd &ui.Dropdown) { | |
| println(dd.selected().text) | |
| mut temp := dd | |
| temp.set_visible(false) | |
| mut m := dd.ui.window.menu("View") | |
| m.hidden = true | |
| } | |
| fn on_showhide_panel(app voidptr, dd &ui.Radio) { | |
| s := dd.values[dd.selected_index] | |
| println(s) | |
| if s == "TopLeft" { | |
| println("TopLeft selected to hide...") | |
| mut c := dd.ui.window.button("TopLeft") // TODO it doesn't find it... | |
| c.hidden = true | |
| } else if s == "TopCentre" { | |
| } else if s == "TopRight" { | |
| } else if s == "BottomLeft" { | |
| } else if s == "BottomCentre" { | |
| } else if s == "BottomRight" { | |
| } | |
| mut m := dd.ui.window.menu("View") | |
| m.hidden = true | |
| mut temp := dd | |
| temp.hidden = true | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment