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
<div class="main-menu">
  <!-- Meant to be rendered inside the left-handed sidebar and is currently depending on that -->
  <!-- Please note, that due to that not all styles are correctly applied in the lookbook -->
  <div class="op-submenu" data-controller="filter--filter-list" data-application-target="dynamic" data-test-selector="op-submenu">
    <div class="op-submenu--body" data-test-selector="op-submenu--body">
      <ul class="op-submenu--items">
        <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
          <a class="op-submenu--item-action selected" href="" data-test-selector="op-submenu--item-action">
            <span class="op-submenu--item-title">
              Global query
            </span>
          </a>
        </li>
        <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
          <a class="op-submenu--item-action " href="" data-test-selector="op-submenu--item-action">
            <span class="op-submenu--item-title">
              A second query
            </span>
          </a>
        </li>
      </ul>
      <div data-controller="menus--submenu"
           data-application-target="dynamic">
        <button class="op-submenu--title"
                type="button"
                data-action="click->menus--submenu#toggleContainer">
          Favourite
          <span class="icon-small icon-arrow-up1"
                aria-hidden="true"
                data-menus--submenu-target="indicator">
          </span>
        </button>
        <ul class="op-submenu--items"
            data-menus--submenu-target="container">
          <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
            <a class="op-submenu--item-action " href="" data-test-selector="op-submenu--item-action">
              <span class="op-submenu--item-title">
                Very important version
              </span>
            </a>
          </li>
          <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
            <a class="op-submenu--item-action selected" href="" data-test-selector="op-submenu--item-action">
              <span class="op-submenu--item-title">
                A baseline view
              </span>
            </a>
          </li>
        </ul>
      </div>
      <div data-controller="menus--submenu"
           data-application-target="dynamic">
        <button class="op-submenu--title"
                type="button"
                data-action="click->menus--submenu#toggleContainer">
          Private
          <span class="icon-small icon-arrow-up1"
                aria-hidden="true"
                data-menus--submenu-target="indicator">
          </span>
        </button>
        <ul class="op-submenu--items"
            data-menus--submenu-target="container">
          <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
            <a class="op-submenu--item-action " href="" data-test-selector="op-submenu--item-action">
              <span class="op-submenu--item-title">
                My query
              </span>
            </a>
          </li>
          <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
            <a class="op-submenu--item-action " href="" data-test-selector="op-submenu--item-action">
              <span class="op-submenu--item-title">
                An awesome query
              </span>
            </a>
          </li>
          <li class="op-submenu--item" data-filter--filter-list-target="searchItem">
            <a class="op-submenu--item-action " href="" data-test-selector="op-submenu--item-action">
              <span class="op-submenu--item-title">
                A third query
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

No notes provided.

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
<% sidebar_menu_items =
     [
       OpenProject::Menu::MenuGroup.new(
         header: nil,
         children: [
           OpenProject::Menu::MenuItem.new(title: "Global query", href: "", selected: true),
           OpenProject::Menu::MenuItem.new(title: "A second query", href: "", selected: false)
         ]
       ),
       OpenProject::Menu::MenuGroup.new(
         header: "Favourite",
         children: [
           OpenProject::Menu::MenuItem.new(title: "Very important version", href: "", selected: false),
           OpenProject::Menu::MenuItem.new(title: "A baseline view", href: "", selected: true)
         ]
       ),
       OpenProject::Menu::MenuGroup.new(
         header: "Private",
         children: [
           OpenProject::Menu::MenuItem.new(title: "My query", href: "", selected: false),
           OpenProject::Menu::MenuItem.new(title: "An awesome query", href: "", selected: false),
           OpenProject::Menu::MenuItem.new(title: "A third query", href: "", selected: false)
         ]
       )
     ] %>
<div class="main-menu">
  <!-- Meant to be rendered inside the left-handed sidebar and is currently depending on that -->
  <!-- Please note, that due to that not all styles are correctly applied in the lookbook -->
  <%= render OpenProject::Common::SubmenuComponent.new(
        sidebar_menu_items: sidebar_menu_items
      ) %>
</div>

No params configured.