LoopOS UI v1.1.26.2

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
<turbo-frame id="lui-show-header" class="lui-show-header">
<div class="loopui-form-layout__main-info">
  <div class="loopui-form-layout__details">
    <div class="loopui-form-layout__details-section">
      <div class="loopui-form-layout__info-section">
        <div class="loopui-form-layout__line-wrapper">
          <span class="lui-label" style="color: #b53c00; background-color: #fbf5f2;">
            <i class="fa-regular fa-tag lui-label__icon"></i>
            <span class="lui-label__text">text</span>
          </span>
          <span class="lui-label" style="color: #006053; background-color: #f2f7f6;">
            <i class="fa-regular fa-tag lui-label__icon"></i>
            <span class="lui-label__text">text</span>
          </span>
        </div>
        <div class="loopui-form-layout__middle-wrapper--small">
          <div class="flex">
            <h1 class="lui-show-header__title">Mewto-#150</h1>
            <div class="flex gap-2 ml-2">
            </div>
          </div>
          <div class="loopui-form-layout__line-wrapper">
            <div class="pl-1">
              <turbo-frame class="editComponents flex flex-row gap-base" id="user_email">
                <div class="tooltip-wrapper w-fit">
                  <div class="w-fit inline-flex gap-2 text-gray-base items-center">
                    <i class="fa-regular fa-envelope"></i>
                    <div class="text-primary-sm-regular">Slot for description</div>
                  </div>
                </div>
              </turbo-frame>
            </div>
          </div>
        </div>
        <div class="loopui-form-layout__middle-wrapper">
          <div class="loopui-form-layout__line-wrapper">
            <div class="pl-1">
              <div data-react-class="TagList" data-react-props="{"catList":[],"maxDisplayed":"2","tagList":[],"tSize":"large"}" data-react-cache-id="TagList-0"></div>
              <div data-controller="async-select-component" data-async-select-component-param-key-value="category_id">
                <div data-async-select-component-target='dropdown' data-dropdown-toggle-target="5c56800922ec3a4e919f" class="loopui-async-select__tag">
                  <div data-react-class="Tag" data-react-props="{"text":"Fake assign","variant":"primary","kind":"neutral","tSize":"large","icon":"fa-regular fa-plus","line":"solid","cursorType":"pointer","dataAttributes":{"action":"click-\u003easync-select-component#filterInput"}}" data-react-cache-id="Tag-0"></div>
                </div>
                <div id="5c56800922ec3a4e919f" class="hidden loopui-async-select__dropdown">
                  <div class="p-3">
                    <label for="input-group-search" class="loopui-async-select__label">Search</label>
                    <div class="relative">
                      <div class="loopui-async-select__search-icon">
                        <i class="fa-regular fa-magnifying-glass"></i>
                      </div>
                      <input
        id="input-group-search"
        type="text"
        data-action='keydown->async-select-component#filterKeyDown input->async-select-component#filterInput'
                        class="loopui-async-select__search-input"
                        placeholder="Search...">
                      </div>
                    </div>
                    <div class="tags-filter-container loopui-async-select__filter-container" aria-labelledby="dropdownSearchButton">
                      <turbo-frame data-async-select-component-target="dropdownTurbo" id="children_filter_container_null}">
                      </turbo-frame>    </div>
                  </div>
                </div>
                <div data-react-class="TagList" data-react-props="{"catList":[],"maxDisplayed":"3","tagList":[],"tSize":"large"}" data-react-cache-id="TagList-0"></div>
                <div data-react-class="TagList" data-react-props="{"catList":[],"maxDisplayed":"3","tagList":[],"tSize":"large"}" data-react-cache-id="TagList-0"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="loopui-form-layout__right">
          <div style="width: 151px; height: 50px; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap: 8px; display: inline-flex">
            <div style="text-align: center; color: #78818A; font-size: 14px; font-family: Satoshi; font-weight: 400; line-height: 21px; word-wrap: break-word">Invited at: 20/03/2023</div>
            <div style="text-align: center; color: #78818A; font-size: 14px; font-family: Satoshi; font-weight: 400; line-height: 21px; word-wrap: break-word">Updated at: 10/04/2023</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</turbo-frame>

No Usage documentation to display.

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
<%= render LooposUi::ShowHeader.new(title: "Mewto-#150") do |header| %>
    <%# TODO: update with token when implemented %>
    <% header.with_token do %>
        <%= render LooposUi::CounterLabel.new(text: "text", icon: "fa-regular fa-tag") %>
    <% end %>
    <% header.with_token do %>
        <%= render LooposUi::CounterLabel.new(text: "text", icon: "fa-regular fa-tag", color: :manager) %>
    <% end %>
    <%= header.with_details do %>
        <%= turbo_frame_tag 'user_email', class: "editComponents flex flex-row gap-base" do %>
            <div class="tooltip-wrapper w-fit">
                <div class="w-fit inline-flex gap-2 text-gray-base items-center">
                <i class="fa-regular fa-envelope"></i>
                <div class="text-primary-sm-regular">Slot for description</div>
                </div>
                <%#= render partial: "shared/components/tooltips", locals: { tooltip_content: "tooltip", tooltip_side: 'tooltip--top' } %>
            </div>
        <% end %>
    <% end %>
    <%= header.with_bottom_side do %>
        <% list = [] %>
        <%= react_component("TagList", { catList: list, maxDisplayed: '2', tagList: list, tSize: 'large'}) %>
        <%= render LooposUi::AsyncSelect::AsyncSelectComponent.new(
        filter_path: nil,
        assign_path: nil,
        filter_wrapper_id: "children_filter_container_null}",
        param_key: "category_id",
        ) do |select_component| %>
        <%= select_component.with_toggler do %>
            <%= react_component("Tag", { text: "Fake assign", variant: 'primary', kind: "neutral", tSize: 'large', icon: "fa-regular fa-plus", line: "solid",cursorType: "pointer", dataAttributes: { action: "click->async-select-component#filterInput"}}) %>
        <% end %>
        <% end %>
        <%= react_component("TagList", { catList: list, maxDisplayed: '3', tagList: list, tSize: 'large'}) %>
        <%= react_component("TagList", { catList: list, maxDisplayed: '3', tagList: list, tSize: 'large'}) %>
    <% end %>
    <% header.with_right_side do %>
        <div style="width: 151px; height: 50px; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap: 8px; display: inline-flex">
            <div style="text-align: center; color: #78818A; font-size: 14px; font-family: Satoshi; font-weight: 400; line-height: 21px; word-wrap: break-word">Invited at: 20/03/2023</div>
            <div style="text-align: center; color: #78818A; font-size: 14px; font-family: Satoshi; font-weight: 400; line-height: 21px; word-wrap: break-word">Updated at: 10/04/2023</div>
        </div>
    <% end %>
<% end %>

No notes provided.

No params configured.

No documentation to display.