OpenProject Lookbook

Previews

No matching results.

x
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div data-view-component="true" class="Box position-relative">
  <div id="header-90ac5f1c-d2a3-46bf-9b57-a318970d84e0" data-view-component="true" class="Box-header op-border-box-grid color-fg-muted">
    <span data-view-component="true" class="op-border-box-grid--heading text-semibold">Foo column</span><span data-view-component="true" class="op-border-box-grid--heading text-semibold">Bar column</span><span data-view-component="true" class="op-border-box-grid--mobile-heading text-semibold">Mobile foo</span>
    <div data-view-component="true" class="op-border-box-grid--heading"></div>
  </div>
  <ul aria-labelledby="header-90ac5f1c-d2a3-46bf-9b57-a318970d84e0" data-view-component="true">
    <li data-view-component="true" class="Box-row">
      <div data-view-component="true" class="op-border-box-grid ">
        <div data-view-component="true" class="op-border-box-grid--row-item foo ellipsis">
          <a href="#" data-view-component="true" class="Link--primary Link">Some link</a>
          <p data-view-component="true" class="text-small color-fg-subtle">Hello there</p>
        </div>
    
        <div data-view-component="true" class="op-border-box-grid--row-item bar ellipsis">
          bar
        </div>
        <div data-view-component="true" class="op-border-box-grid--row-action d-flex flex-row">
          <div data-view-component="true"><action-menu data-select-variant="none" data-view-component="true">
              <focus-group direction="vertical" mnemonics retain>
                <button id="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-button" popovertarget="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-overlay" aria-controls="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-list" aria-haspopup="true" aria-labelledby="tooltip-e50ba230-b69f-442c-9d1d-01727ea64402" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual">
                    <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-e50ba230-b69f-442c-9d1d-01727ea64402" for="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">More</tool-tip>
                <anchored-position data-target="action-menu.overlay" id="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-overlay" anchor="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true">
                  <div data-view-component="true" class="Overlay Overlay--size-auto">
                    <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone">          <action-list>
                        <div data-view-component="true">
                          <ul aria-labelledby="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-button" id="action-menu-e5103aea-59b2-4671-8feb-4f0a65e1dbdc-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap">
                            <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                              <a href="#" tabindex="-1" id="item-077f95bd-190b-42e4-8051-e0a64e943b62" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
                                <span class="ActionListItem-visual ActionListItem-visual--leading">
                                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil">
                                    <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path>
                                  </svg>
                                </span>
                                <span data-view-component="true" class="ActionListItem-label">
                                  Edit
                                </span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </action-list>
                    </div>
                  </div>
                </anchored-position>  </focus-group>
            </action-menu></div>
        </div>
      </div>
    </li>
    <li data-view-component="true" class="Box-row">
      <div data-view-component="true" class="op-border-box-grid ">
        <div data-view-component="true" class="op-border-box-grid--row-item foo ellipsis">
          <a href="#" data-view-component="true" class="Link--primary Link">Some link</a>
          <p data-view-component="true" class="text-small color-fg-subtle">Hello there</p>
        </div>
    
        <div data-view-component="true" class="op-border-box-grid--row-item bar ellipsis">
          bar
        </div>
        <div data-view-component="true" class="op-border-box-grid--row-action d-flex flex-row">
          <div data-view-component="true"><action-menu data-select-variant="none" data-view-component="true">
              <focus-group direction="vertical" mnemonics retain>
                <button id="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-button" popovertarget="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-overlay" aria-controls="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-list" aria-haspopup="true" aria-labelledby="tooltip-1f6b6216-822d-4aa3-8213-1e8e854af5ac" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual">
                    <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-1f6b6216-822d-4aa3-8213-1e8e854af5ac" for="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">More</tool-tip>
                <anchored-position data-target="action-menu.overlay" id="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-overlay" anchor="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true">
                  <div data-view-component="true" class="Overlay Overlay--size-auto">
                    <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone">          <action-list>
                        <div data-view-component="true">
                          <ul aria-labelledby="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-button" id="action-menu-d7ca743f-ada3-464e-8fa6-b9cf99fa2f14-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap">
                            <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                              <a href="#" tabindex="-1" id="item-e5fa581b-a562-4119-8d5c-b079d7f7aa63" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
                                <span class="ActionListItem-visual ActionListItem-visual--leading">
                                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil">
                                    <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path>
                                  </svg>
                                </span>
                                <span data-view-component="true" class="ActionListItem-label">
                                  Edit
                                </span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </action-list>
                    </div>
                  </div>
                </anchored-position>  </focus-group>
            </action-menu></div>
        </div>
      </div>
    </li>
  </ul>
</div>

See the component documentation for more details.

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
<%=
  table = Class.new(OpPrimer::BorderBoxTableComponent) do
    columns :foo, :bar
    def self.name
      "MyTable"
    end
    def mobile_title
      "Mobile foo"
    end
    def row_class
      @row_class ||= Class.new(OpPrimer::BorderBoxRowComponent) do
        def self.name
          "MyRow"
        end
        def button_links
          [
            action_menu
          ]
        end
        def action_menu
          render(Primer::Alpha::ActionMenu.new) do |menu|
            menu.with_show_button(icon: "kebab-horizontal", "aria-label": "More", scheme: :invisible)
            menu.with_item(
              tag: :a,
              label: "Edit",
              href: "#"
            ) do |item|
              item.with_leading_visual_icon(icon: :pencil)
              "bla"
            end
          end
        end
        def foo
          concat render(Primer::Beta::Link.new(scheme: :primary, href: "#")) { "Some link" }
          render(Primer::Beta::Text.new(tag: :p, font_size: :small, color: :subtle)) { "Hello there" }
        end
        def bar
          "bar"
        end
      end
    end
    def has_actions?
      true
    end
    def headers
      [
        [:foo, { caption: "Foo column" }],
        [:bar, { caption: "Bar column" }]
      ]
    end
  end
  render(table.new(rows: [1, 2]))
%>

No params configured.