LoopOS UI v1.1.48.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<turbo-frame id="card-15954ff21" class="lui-v2-card">
  <div class="lui-card_v2-top">
    <div class="lui-title_description lui-title_description--small">
      <span class="lui-title_description__title">
        MyApp
      </span>
      <span class="lui-title_description__description">
        <span id="lui-token_9912568611" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529;">
          <i class="lui-token__icon fa-regular fa-regular fa-horse-head"></i>
          <span class="lui-token__text">Loop Partner</span>
          <div class="lui-token__actions">
          </div>
        </span>
      </span>
    </div>
    <div class="lui-card_v2-corner">
      <span class="lui-label" style="color: #1a883f; background-color: #f3f9f5;">
        <i class="fa-regular fa-check-circle lui-label__icon"></i>
        <span class="lui-label__text" data-lui--label="content">running</span>
      </span>
    </div>
  </div>
  
  <div class="w-full">
    <div class="lui-app_card-content">
      <div class="lui-app_card-content-info">
        <span class="lui-app_card-content-info__title">
          Release
        </span>
        <span class="lui-app_card-content-info__text">
          ops-02-rcl
        </span>
      </div>
      <div class="lui-app_card-content-info">
        <span class="lui-app_card-content-info__title">
          ID
        </span>
        <span class="lui-app_card-content-info__text">
          316
        </span>
      </div>
    </div>
  </div>
  <div class="w-full">
    <div class="lui-action_buttons">
      <div class="lui-action_buttons__button-group">
        <a class="lui-button lui-button--size-small lui-button--neutral--secondary w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/">
          <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">
              View details
            </div>
          </div>
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 14px; height: 14px;"><i class="lui-button__icon lui-button__icon--small fa-sharp fa-regular fa-arrow-up-right-from-square" data-lui--button-target="leadingIcon"></i></div>
          </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
            Details
          </span>          
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 14px;">
              progress_activity
            </i>
          </div>
        </a>
        <a class="lui-button lui-button--size-small lui-button--neutral--secondary w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/" target="_blank">
          <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">
              Open Core
            </div>
          </div>
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 14px; height: 14px;"><i class="lui-button__icon lui-button__icon--small fa-sharp fa-regular fa-arrow-up-right-from-square" data-lui--button-target="leadingIcon"></i></div>
          </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
            Open
          </span>          
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 14px;">
              progress_activity
            </i>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="lui-card_v2-img">
    <div style="width: 108px; height: 108px; overflow: hidden; position: relative;">
      <div style="position: absolute; bottom: -20px; right: -20px;">
        <svg height="128" width="128" viewBox="0 0 12 12">
          <path d="M5.94853 12.0007C5.35232 12.0007 4.69999 11.7762 4.07192 11.1481C3.76092 10.8371 3.53185 10.5018 3.39076 10.1484C3.04487 10.0118 2.72629 9.80398 2.46232 9.54002L0.852712 7.93041C0.185204 7.2629 -0.674971 5.59565 0.852712 4.06797C1.16371 3.75697 1.49898 3.52789 1.85246 3.3868C1.98899 3.04091 2.19683 2.72233 2.4608 2.45836L4.0704 0.848758C4.09013 0.829036 4.55738 0.367849 5.25371 0.135738C5.92577 -0.0887876 6.93614 -0.146436 7.93133 0.848758C8.24233 1.15976 8.47141 1.49503 8.61249 1.8485C8.95838 1.98504 9.27697 2.19288 9.54094 2.45685L11.1505 4.06645C11.1703 4.08617 11.6315 4.55343 11.8636 5.24976C12.0881 5.92182 12.1457 6.93218 11.1505 7.92738C10.8395 8.23837 10.5043 8.46745 10.1508 8.60854C10.0143 8.95443 9.80642 9.27149 9.54245 9.53698L7.93285 11.1466C7.53993 11.5395 6.80112 11.9992 5.94701 11.9992L5.94853 12.0007ZM4.17812 9.63407L4.18722 9.66593C4.27066 9.95417 4.44815 10.2363 4.71667 10.5049C5.95611 11.7443 7.15915 10.6338 7.29265 10.5049L8.90074 8.89678C8.9417 8.85582 8.98114 8.81182 9.01907 8.76783C8.03298 8.6586 7.33057 7.96985 7.29265 7.93193L6.00466 6.64394L4.71667 7.93193C4.71667 7.93193 4.13412 8.53268 4.13412 9.2806C4.13412 9.39589 4.14777 9.51423 4.17963 9.63407H4.17812ZM2.37129 4.17264L2.3364 4.18175C2.04816 4.26518 1.76598 4.44268 1.49746 4.7112C0.258023 5.95064 1.36851 7.15367 1.49746 7.28718L3.10555 8.89526C3.14651 8.93622 3.19051 8.97567 3.2345 9.01359C3.34373 8.02599 4.03399 7.32359 4.0704 7.28718L5.35839 5.99919L4.0704 4.7112C4.0704 4.7112 3.27546 3.93902 2.36978 4.17264H2.37129ZM7.93285 7.28566C7.9465 7.29931 8.60491 7.93344 9.41047 7.86366C9.48481 7.85759 9.55914 7.84394 9.63651 7.82422L9.66989 7.81511C9.95813 7.73168 10.2403 7.55418 10.5088 7.28566C11.7483 6.04622 10.6378 4.84319 10.5088 4.70968L8.90074 3.1016C8.85977 3.06064 8.81578 3.02119 8.77178 2.98478C8.66256 3.97239 7.97229 4.67479 7.93437 4.7112L6.64789 5.99767L7.93437 7.28414L7.93285 7.28566ZM2.98874 3.23206C3.97635 3.34129 4.67875 4.03004 4.71516 4.06797L6.00314 5.35595L7.29113 4.06797C7.29113 4.06797 7.87368 3.46721 7.87368 2.7193C7.87368 2.604 7.86003 2.48567 7.82817 2.36582L7.81907 2.33396C7.73563 2.04572 7.55813 1.76355 7.28961 1.49503C6.05017 0.255586 4.84714 1.36608 4.71364 1.49503L3.10555 3.10311C3.06459 3.14407 3.02515 3.18807 2.98722 3.23206H2.98874Z" fill="url(#paint0_svg_ad33cd3a8d3d)"/>
          <defs>
            <linearGradient id="paint0_svg_ad33cd3a8d3d" x1="6.00163" y1="12.0007" x2="6.00163" y2="0.00071859" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F27335"/>
              <stop offset="1" stop-color="#FCAA30"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  </div>
</turbo-frame>
<turbo-frame id="card-8a694c24" class="lui-v2-card">
  <div class="lui-card_v2-top">
    <div class="lui-title_description lui-title_description--small">
      <span class="lui-title_description__title">
        MyApp
      </span>
      <span class="lui-title_description__description">
        <span id="lui-token_6597424226" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529;">
          <i class="lui-token__icon fa-regular fa-regular fa-horse-head"></i>
          <span class="lui-token__text">Loop Partner</span>
          <div class="lui-token__actions">
          </div>
        </span>
      </span>
    </div>
    <div class="lui-card_v2-corner">
      <span class="lui-label" style="color: #1a883f; background-color: #f3f9f5;">
        <i class="fa-regular fa-check-circle lui-label__icon"></i>
        <span class="lui-label__text" data-lui--label="content">running</span>
      </span>
    </div>
  </div>
  
  <div class="w-full">
    <div class="lui-app_card-content">
      <div class="lui-app_card-content-info">
        <span class="lui-app_card-content-info__title">
          Release
        </span>
        <span class="lui-app_card-content-info__text">
          ops-02-rcl
        </span>
      </div>
      <div class="lui-app_card-content-info">
        <span class="lui-app_card-content-info__title">
          ID
        </span>
        <span class="lui-app_card-content-info__text">
          316
        </span>
      </div>
    </div>
  </div>
  <div class="w-full">
    <div class="lui-action_buttons">
      <div class="lui-action_buttons__button-group">
        <a class="lui-button lui-button--size-small lui-button--neutral--secondary w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/">
          <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">
              View details
            </div>
          </div>
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 14px; height: 14px;"><i class="lui-button__icon lui-button__icon--small fa-sharp fa-regular fa-arrow-up-right-from-square" data-lui--button-target="leadingIcon"></i></div>
          </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
            Details
          </span>          
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 14px;">
              progress_activity
            </i>
          </div>
        </a>
        <a class="lui-button lui-button--size-small lui-button--neutral--secondary w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/" target="_blank">
          <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">
              Open Lookbsdfsdfdook
            </div>
          </div>
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 14px; height: 14px;"><i class="lui-button__icon lui-button__icon--small fa-sharp fa-regular fa-arrow-up-right-from-square" data-lui--button-target="leadingIcon"></i></div>
          </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
            Open
          </span>          
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 14px;">
              progress_activity
            </i>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="lui-card_v2-img">
    <div style="width: 108px; height: 108px; overflow: hidden; position: relative;">
      <div style="position: absolute; bottom: -20px; right: -20px;">
        <svg height="128" width="128" viewBox="0 0 12 14">
          <g filter="url(#paint0_svg_941686445d7d)">
            <path d="M5.94188 13C5.26327 13 4.63272 12.7139 4.06832 12.1492C3.07259 11.1534 3.13062 10.1429 3.35497 9.47059C3.46807 9.13128 3.63514 8.84668 3.77929 8.64155L2.45904 7.3213C1.39419 6.25645 1.39419 4.52372 2.45904 3.45887L4.06832 1.84958C4.08791 1.82999 4.55473 1.36872 5.25218 1.13624C5.92451 0.912251 6.93502 0.853853 7.93075 1.84958C8.49626 2.41509 8.78271 3.04712 8.7816 3.72721C8.78049 4.42614 8.46706 5.00791 8.22053 5.35793L9.53967 6.67707C10.0556 7.19305 10.3395 7.87904 10.3395 8.60828C10.3395 9.33753 10.0553 10.0239 9.53967 10.5395L7.93075 12.1484C7.89712 12.1821 7.07437 12.9974 5.94594 12.9993C5.94484 12.9993 5.94336 12.9993 5.94225 12.9993L5.94188 13ZM4.71181 8.93059C4.70516 8.93761 4.36808 9.28689 4.20988 9.78439C4.01214 10.4072 4.17625 10.9701 4.71181 11.5053C5.24738 12.0405 5.81251 12.2076 6.4342 12.0094C6.93391 11.8501 7.28357 11.5083 7.28689 11.5049L8.89544 9.89638C9.23955 9.55227 9.42879 9.09506 9.42879 8.60865C9.42879 8.12225 9.23955 7.66504 8.89544 7.32093L7.60845 6.03395L4.71181 8.93059ZM6.06163 1.91094C5.90048 1.91094 5.73527 1.93792 5.56561 1.99188C5.06479 2.15082 4.71403 2.49197 4.71034 2.49529L3.10253 4.1031C2.39251 4.81312 2.39251 5.96816 3.10253 6.67781L4.38988 7.96516L7.28652 5.06852C7.28948 5.06557 7.63137 4.71592 7.79067 4.2162C7.98878 3.59452 7.82394 3.03123 7.28652 2.49382C6.89695 2.10425 6.4926 1.91094 6.06126 1.91094H6.06163Z" fill="url(#paint0_linear_106_5274)"/>
          </g>
          <defs>
            <filter id="paint0_svg_941686445d7d" x="0.97736" y="0.54464" width="10.0452" height="13.3661" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
              <feOffset dy="0.22768"/>
              <feGaussianBlur stdDeviation="0.34152"/>
              <feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.592157 0 0 0 0 0.54902 0 0 0 0.35 0"/>
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_106_5274"/>
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_106_5274" result="shape"/>
            </filter>
            <linearGradient id="paint0_svg_941686445d7d" x1="5.99991" y1="13" x2="5.99991" y2="1.00022" gradientUnits="userSpaceOnUse">
              <stop stop-color="#11978C"/>
              <stop offset="1" stop-color="#38ED7D"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  </div>
</turbo-frame>

V2::Card

The V2::Card component is a flexible container used to display related information in a concise, visually grouped layout. This component has 7 subtypes:

  • V2::Card::Draft: Basic card with draft styles
  • V2::Card::AppInstance: App instance cards
  • V2::Card::FinancialLog: Financial Data
  • V2::Card::Script: Checking and running scripts
  • V2::Card::Favorites: Favorites card
  • V2::Card::Dashboard: Dashboards currently only existing in Core's main page

-

Header (title / description)

The title/description block is omitted when both title and description are blank or nil and there is no custom_description slot, so the card does not reserve empty top spacing.

Usage rules

  • ✅ Do
    • Use for visually grouping related content
    • Maintain a consistent card layout across similar content
    • Prioritize using card variants if applicable
  • ❌ Don't
    • Don’t overload the card with too much information
    • Don’t use inconsistent styles or sizes within a card group
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
<%
app_instance = OpenStruct.new(
  name: "MyApp",
  partner: OpenStruct.new(
    name: "Loop Partner",
    icon: "fa-regular fa-horse-head"),
  app: "core",
  status: "running",
  app_release:"ops-02-rcl",
  id: "316"
)
%>
<%= render LooposUi::V2::Card::AppInstance.new(app_instance: app_instance, open_href: "/", details_href: "/") %>
<%
app_instance = OpenStruct.new(
  name: "MyApp",
  partner: OpenStruct.new(
    name: "Loop Partner",
    icon: "fa-regular fa-horse-head"),
  app: "lookbsdfsdfdook",
  status: "running",
  app_release:"ops-02-rcl",
  id: "316"
)
%>
<%= render LooposUi::V2::Card::AppInstance.new(app_instance: app_instance, open_href: "/", details_href: "/") %>

No notes provided.

No params configured.

V2 Card Components

The V2 Card system provides a flexible, modular approach to displaying information in card layouts. It consists of a base V2::Card component and several specialized card types for different use cases.

Base V2::Card Component

The foundation component that all specialized cards are built upon.

If title and description are both absent or blank (nil or ""), and there is no custom_description slot content, the card does not render the title/description header (no extra top spacing). You can still use with_title_description to supply a custom header, or use corner alone to show only the corner area.

Arguments

Property Default Type Required Description
title nil String Title of the card (uses LooposUi::TitleDescription). Optional if header not needed.
description nil String Description of the card (uses LooposUi::TitleDescription). Optional if header not needed.
logo nil String Image URL to display
draft false Boolean Applies draft styling to the card
full false Boolean Makes the card take full width
borderless false Boolean Removes card padding and border
id nil String Unique identifier for lazy loading
src nil String URL for lazy loading content

Slots

Slot Description
title_description Custom title and description component (overrides title/description props)
custom_description Custom description content (not just plain string)
footer Content displayed at the bottom of the card
corner Content displayed at the top right corner
logo_img Custom logo component (not just image URL)

V2::Card::Script

Displays script information with execution details and download capabilities.

Arguments

Property Default Type Required Description
script - Object ✓ Script object with properties: name, last_run_result_file, last_run_result_file_name, last_run_date, last_run_result_level
href - String ✓ URL for the script action button
scheduled false Boolean Indicates if the script is scheduled

Slots

Slot Description
modal Modal content for script actions (auto-includes trigger button)

Script Object Structure

The script object should respond to:

  • name - Script name
  • last_run_result_file - URL to download result file
  • last_run_result_file_name - Display name for result file
  • last_run_date - Date of last execution
  • last_run_result_level - Result level/status

V2::Card::FinancialLog

Displays financial transaction information with amounts, status, and timestamps.

Arguments

Property Default Type Required Description
header_info - Object ✓ Object with title and description properties
item_value - Object ✓ Object with amount, status, and updated_at properties
fti false Boolean Adds an FTI Entity Token after the state label

Slots

Slot Description
modal Modal content for Financial Log (auto-includes trigger button)
title_info Open slot, whatever you put in here will appear after the title. Usefull for Entity Tokens

You can pass trigger_args to the with_modal call to pass additional arguments to the trigger button, which will initialize the Button component.

<%= render LooposUi::V2::Card::FinancialLog.new(...) do |fl| %>
  <% fl.with_modal(trigger_args: { disabled: true }) do |modal| %>
    ...Modal content...
  <% end %>
<% end %>

Object Structures

header_info should respond to:

  • title - Transaction title
  • description - Transaction description

item_value should respond to:

  • amount - Money object with amount
  • status - Status string (agreed, waiting_agreement, draft, etc.)
  • updated_at - Timestamp

Status Colors

The component automatically applies color coding based on status:

  • agreed → Success (green)
  • waiting_agreement, draft → Warning (yellow)
  • Other statuses → Neutral (gray)

V2::Card::FinancialTransaction

Displays a single financial transaction (either incoming or outgoing) with its amount, status, paid date, provider information and optional barcodes.

Arguments

Property Default Type Required Description
financial_transaction - Object ✓ Wrapper object for the transaction, built from either an incoming payment or a payment resource.

This component also supports lazy loading through the shared LazyLoading module (id and src options), as described in the Lazy Loading section below.

Slots

Slot Description
title_info Content displayed next to the card title (for example, entity tokens or additional metadata).

V2::Card::Dashboard

Full-width cards for dashboard displays with optional form controls.

Arguments

Property Default Type Required Description
dashboard_info - Object ✓ Object with title, description, and tooltip properties

Slots

Slot Description
select_form Form component for the corner slot (typically contains a Select component)

Dashboard Object Structure

The dashboard_info object should respond to:

  • title - Dashboard title
  • description - Dashboard description
  • tooltip - Tooltip text

V2::Card::Draft

Cards with draft styling for preview or incomplete content.

Arguments

Property Default Type Required Description
draft_info - Object ✓ Object with title and description properties

Slots

Slot Description
corner Content for the top right corner

Draft Object Structure

The draft_info object should respond to:

  • title - Draft title
  • description - Draft description

V2::Card::AppInstance

Displays application instance information with status indicators and action buttons.

Arguments

Property Default Type Required Description
app_instance - Object ✓ App instance object with various properties
open_href - String ✓ URL for the "Open" button
details_href - String ✓ URL for the "Details" button

App Instance Object Structure

The app_instance object should respond to:

  • name - Instance name (used as title)
  • partner - Partner information
  • app - App type/name
  • status - Instance status
  • app_release - Release version
  • id - Instance ID

Status Indicators

The component automatically applies status colors and icons:

  • Creating/Updating/Deleting/Stopped → Notice (yellow) with exclamation icon
  • Created/To Create/Running → Success (green) with check icon
  • Error states → Danger (red) with X icon
  • Other → Informative (gray) with circle icon

V2::Card::Favorites

Collapsible favorites section with expand/collapse functionality.

Arguments

None required.

Slots

Slot Description
content Content to display in the collapsible section

Lazy Loading

All V2 card components support lazy loading through the LazyLoading module. This adds id and src options to the component. Providing src makes the card lazy loadable, appending the id and src to the turbo-frame wrapping the card.

To create a lazy loading card, you can still use all the slots and arguments, and you may populate them with

Skeleton and Skeleton::Bar

Lazy Loading Arguments

Property Default Type Required Description
id nil String ✓ Unique identifier for the card
src nil String ✓ URL to load content from