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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<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">
            Manager Tooltip
          </div>
        </div>
        <div class="lui-logo">
          <div data-react-class="LogoApp" data-react-props="{"app":"manager","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
          <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">
            Core Tooltip
          </div>
        </div>
        <div class="lui-logo">
          <div data-react-class="LogoApp" data-react-props="{"app":"core","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
          <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">
            Submission Tooltip
          </div>
        </div>
        <div class="lui-logo">
          <div data-react-class="LogoApp" data-react-props="{"app":"submission","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
          <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">
            Validation Tooltip
          </div>
        </div>
        <div class="lui-logo">
          <div data-react-class="LogoApp" data-react-props="{"app":"validation","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
          <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">
            Hubs Tooltip
          </div>
        </div>
        <div class="lui-logo">
          <div data-react-class="LogoApp" data-react-props="{"app":"hubs","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
          <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">
            Handling Tooltip
          </div>
        </div>
        <div class="lui-logo">
          <div data-react-class="LogoApp" data-react-props="{"app":"handling","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
          <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>
      <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">
            Exit Tooltip
          </div>
        </div>
        <div class="lui-logo">
          <div data-react-class="LogoApp" data-react-props="{"app":"exit","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
          <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">7</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
9
<%= render LooposUi::Apps::List.new(list: {
  handling: { count: 6, tooltip: "Handling Tooltip" },
  manager: { count: 1, tooltip: "Manager Tooltip" },
  exit: { count: 7, tooltip: "Exit Tooltip" },
  core: { count: 2, tooltip: "Core Tooltip" },
  hubs: { count: 5, tooltip: "Hubs Tooltip" },
  submission: { count: 3, tooltip: "Submission Tooltip" },
  validation: { count: 4, tooltip: "Validation Tooltip" }
}) %>

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