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
<turbo-frame class="lui-v2-card" id="card-15954ff21">
  <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; background-color: #F8F9FA;">
          <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">running</span>
      </span>
    </div>
  </div>
  <div class="z-10 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="z-10 w-full">
    <div class="lui-action_buttons">
      <div class="lui-action_buttons__button-group">
        <a class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button" 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>
          <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>
          <span class="lui-button__text" data-lui--button-target="text">
            Details
          </span>
        </a>
        <a class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button" 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">
              Open Core
            </div>
          </div>
          <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>
          <span class="lui-button__text" data-lui--button-target="text">
            Open
          </span>
        </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_linear_238_1315)"/>
          <defs>
            <linearGradient id="paint0_linear_238_1315" 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>

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

-

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
<%
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: "/") %>

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.

Arguments

Property Default Type Required Description
title nil String Title of the card (uses LooposUi::TitleDescription)
description nil String Description of the card (uses LooposUi::TitleDescription)
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
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::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