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
<div data-view-component="true" class="Box position-relative">
  <div id="header-49add134-ce3f-4c06-9d1f-4d8a7f60a643" 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-49add134-ce3f-4c06-9d1f-4d8a7f60a643" 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">
          <span data-view-component="true" class="op-border-box-grid--row-label">Bar column: </span>
          bar
        </div>
        <div data-view-component="true" class="op-border-box-grid--row-action d-flex flex-row">
          <div data-view-component="true" class="mr-1"><a href="#" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
                <span class="Button-label">Edit</span>
              </span>
            </a>
          </div>
          <div data-view-component="true"><a href="#" id="icon-button-97866349-6b12-4567-8e5a-586d632876e5" aria-labelledby="tooltip-0d9c5ca2-553d-4f05-b93f-5c6525297ad7" data-view-component="true" class="Button Button--iconOnly Button--danger 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-trash Button-visual">
                <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path>
              </svg>
            </a><tool-tip id="tooltip-0d9c5ca2-553d-4f05-b93f-5c6525297ad7" for="icon-button-97866349-6b12-4567-8e5a-586d632876e5" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Delete</tool-tip>
          </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">
          <span data-view-component="true" class="op-border-box-grid--row-label">Bar column: </span>
          bar
        </div>
        <div data-view-component="true" class="op-border-box-grid--row-action d-flex flex-row">
          <div data-view-component="true" class="mr-1"><a href="#" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
                <span class="Button-label">Edit</span>
              </span>
            </a>
          </div>
          <div data-view-component="true"><a href="#" id="icon-button-76038957-745c-4dd8-8a01-1a46f816f5fb" aria-labelledby="tooltip-dd68ae92-51f5-4bcb-a0b7-a61662950dda" data-view-component="true" class="Button Button--iconOnly Button--danger 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-trash Button-visual">
                <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path>
              </svg>
            </a><tool-tip id="tooltip-dd68ae92-51f5-4bcb-a0b7-a61662950dda" for="icon-button-76038957-745c-4dd8-8a01-1a46f816f5fb" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Delete</tool-tip>
          </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
65
<%=
  table = Class.new(OpPrimer::BorderBoxTableComponent) do
    columns :foo, :bar
    mobile_labels :bar
    def self.name
      "MyTable"
    end
    def mobile_title
      "Mobile foo"
    end
    ## This method is just a hack used for the preview
    ## Create your components under your namespace like so instead
    ## MyNamespace::TableComponent
    ## MyNamespace::RowComponent
    ## and the other class will be autoloaded
    def row_class
      @row_class ||= Class.new(OpPrimer::BorderBoxRowComponent) do
        def self.name
          "MyRow"
        end
        def button_links
          [
            edit_button,
            delete_button
          ]
        end
        def edit_button
          render(Primer::Beta::Button.new(scheme: :secondary, tag: :a, href: "#")) { "Edit" }
        end
        def delete_button
          render(Primer::Beta::IconButton.new(icon: :trash, scheme: :danger, tag: :a, href: "#", "aria-label": "Delete"))
        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.