hollow/examples/ui-styling.lua at main · sudo-tee/hollow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
-- Load with dofile("/path/to/hollow/examples/ui-styling.lua")().
-- Public APIs only; no private recipe or computed-style helpers.
return function()
  local ui = hollow.ui
  local active = "Projects"
  local selected = "Hollow"
  local groups = { Projects = { "Hollow", "Plugin" }, Recent = { "Notes", "Scratch" } }
  local modal

  modal = ui.modal({
    theme = "select",
    width = 44,
    render = function(theme)
      local c = ui.components
      return c.column({
        c.text("Choose workspace", { fg = theme.title, bold = true }),
        c.row(
          ui.each({ "Projects", "Recent" }, function(name)
            return c.button({
              id = "styling:tab:" .. name,
              text = name,
              theme = theme,
              style = { bg = active == name and theme.selection_bg or nil },
              on_click = function()
                active, selected = name, groups[name][1]
              end,
            })
          end),
          { gap = 8 }
        ),
        ui.each(groups[active], function(name)
          return c.button({
            id = "styling:choice:" .. name,
            text = name,
            theme = theme,
            width = "grow",
            style = { bg = selected == name and theme.selection_bg or nil },
            on_click = function()
              selected = name
            end,
          })
        end),
        c.row({
          c.button({
            id = "styling:done",
            text = "Done",
            variant = "primary",
            size = "sm",
            theme = theme,
            on_click = function()
              modal.close()
            end,
          }),
        }),
      }, { width = "grow", gap = 8 })
    end,
    keys = function(key)
      if key == "escape" or key == "<Esc>" then
        modal.close()
        return true
      end
      return false
    end,
  })
  return modal
end