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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div id="lui-token_list_5793709857" class="lui-token-list lui-token-list--horizontal"
    data-controller="token-list"
    data-token-list-frame-id-value="lui-token_list_5793709857_frame"
    data-token-list-model-association-overlay-outlet="#lui-token_list_5793709857 .lui-association-overlay">
  <turbo-frame class="lui-token-list__items" id="lui-token_list_5793709857_frame">
    <div data-controller="drag" class="lui-token-list__items">
      <span class="lui-icon_tooltip">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            Email Service
          </div>
        </div>
        <div class="lui-icon h-[16px] w-[16px]">
          <i class="fa-regular fa-envelope lui-icon__icon" style="font-size: 16px; color: black;"></i>
          <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
            <span class="lui-counter__text">5</span>
          </span>
        </div>
      </span>
      <span class="lui-icon_tooltip">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            Incoming Payments
          </div>
        </div>
        <div class="lui-icon h-[16px] w-[16px]">
          <i class="fa-regular fa-envelope-open-dollar lui-icon__icon" style="font-size: 16px; color: black;"></i>
          <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
            <span class="lui-counter__text">4</span>
          </span>
        </div>
      </span>
      <span class="lui-icon_tooltip">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            Invoices Service
          </div>
        </div>
        <div class="lui-icon h-[16px] w-[16px]">
          <i class="fa-regular fa-file-invoice lui-icon__icon" style="font-size: 16px; color: black;"></i>
          <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
            <span class="lui-counter__text">1</span>
          </span>
        </div>
      </span>
      <span class="lui-icon_tooltip">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            Payment Service
          </div>
        </div>
        <div class="lui-icon h-[16px] w-[16px]">
          <i class="fa-regular fa-credit-card lui-icon__icon" style="font-size: 16px; color: black;"></i>
          <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
            <span class="lui-counter__text">2</span>
          </span>
        </div>
      </span>
      <span class="lui-icon_tooltip">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            SMS Service
          </div>
        </div>
        <div class="lui-icon h-[16px] w-[16px]">
          <i class="fa-regular fa-message-sms lui-icon__icon" style="font-size: 16px; color: black;"></i>
          <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
            <span class="lui-counter__text">3</span>
          </span>
        </div>
      </span>
      <span class="lui-icon_tooltip">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            Shipping Service
          </div>
        </div>
        <div class="lui-icon h-[16px] w-[16px]">
          <i class="fa-regular fa-truck lui-icon__icon" style="font-size: 16px; color: black;"></i>
          <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
            <span class="lui-counter__text">6</span>
          </span>
        </div>
      </span>
    </div>
  </turbo-frame>
</div>

(Apps/Features/Services)::List

When using component, remember to declare the module of what element you're gonna use (per example, LooposUi::Apps::List for Apps)

Used Components Components where is Used
Table

Usage rules

  • ✅ Do Use in Tables
  • ❌ Don't
1
2
3
4
5
6
7
8
<%= render LooposUi::Services::List.new(list: {
  emails: { count: 5, tooltip: "Email Service" },
  sms: { count: 3, tooltip: "SMS Service" },
  payments: { count: 2, tooltip: "Payment Service" },
  incoming_payments: { count: 4, tooltip: "Incoming Payments" },
  invoices: { count: 1, tooltip: "Invoices Service" },
  shippings: { count: 6, tooltip: "Shipping Service" }
}) %>

No notes provided.

No params configured.

List

Description

The 'List' component compiles a list of elements from 3 different types. Apps, Features, and Services. These types cannot be mixed. Each of them have their own arguments and properties.

The Apps List features a list of IconToolips components of all apps that you declare it with. Other than the hash keys, it will also automatically use the icon of the chosen apps.

The Features List is a list of EntityTokens that correspond to the current Features: flows, protocols, pricing_rules, forward_trade_in, acceptable, acceptable_online, saleable_as_new. The tokens show as well the name of the Feature as text, the respective icon and the general color as well.

The Services List is a TokenList of the current Services: emails, incoming_payments, invoices, payments, sms, shippings. This list is composed of IconTooltips, which means it will also use the respective icon of the service.

Arguments

Property Description
list Hash that will contain the elements you want to pass. These can also have their own hash, with their own keys. These keys can be seen below

Element hash keys

Property Default Description
tooltip nil Text that will show up on the tooltip
count nil Number that will show up in the counter. Not avaiable in LooposUi::Features::List
url nil URL of the EntityToken in the List. This is only avaiable when using LooposUi::Features::List