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
136
137
138
139
140
141
142
<turbo-frame id="lui-sidebar" target="lui-main-layout" data-controller="sidebar">
  <aside class="lui-sidebar">
    <div class="lui-sidebar__item-list">
      <div id="active_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show">
        <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="#">
          <div class="lui-sidebar__item lui-sidebar__item--active " style="">
            <icon class="lui-sidebar-item__icon fa-regular fa-house"></icon>
            <div class="lui-sidebar__item__short-title">
              <p class="lui-sidebar__item__label">Active</p>
            </div>
          </div>
        </a></div>
      <div id="inactive_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show">
        <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="#">
          <div class="lui-sidebar__item  " style="">
            <icon class="lui-sidebar-item__icon fa-regular fa-house"></icon>
            <div class="lui-sidebar__item__short-title">
              <p class="lui-sidebar__item__label">Inactive</p>
              <span class="lui-counter lui-counter--tinny" style="color: #ffffff; background-color: #df8620;">
                <span class="lui-counter__text">5</span>
              </span>
            </div>
          </div>
        </a></div>
      <div id="disabled_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="right"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            Disabled
          </div>
        </div>
        <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="#">
          <div class="lui-sidebar__item  lui-sidebar__item--disabled" style="">
            <icon class="lui-sidebar-item__icon fa-regular fa-house"></icon>
            <div class="lui-sidebar__item__short-title">
              <p class="lui-sidebar__item__label">Disabled</p>
            </div>
          </div>
        </a></div>
      <div id="impact-color_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show">
        <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="#">
          <div class="lui-sidebar__item lui-sidebar__item--active " style="color: #40A77F; border-color: #40A77F;">
            <img class="h-4" src="/assets/loopos-icon-7668bd7d.png" />
            <div class="lui-sidebar__item__short-title">
              <p class="lui-sidebar__item__label">Impact Color</p>
            </div>
          </div>
        </a></div>
      <div id="highlighted_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show">
        <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="#">
          <div class="lui-sidebar__item lui-sidebar__item--active " style="">
            <div class="lui-sidebar__highlight">
              <span class="lui-sidebar__highlight lui-sidebar__highlight--animation"></span>
              <span class="lui-sidebar__highlight lui-sidebar__highlight--circle"></span>
            </div>
            <icon class="lui-sidebar-item__icon fa-regular fa-house"></icon>
            <div class="lui-sidebar__item__short-title">
              <p class="lui-sidebar__item__label">Highlighted</p>
              <span class="lui-counter lui-counter--tinny" style="color: #ffffff; background-color: #df8620;">
                <span class="lui-counter__text">35</span>
              </span>
            </div>
          </div>
        </a></div>
      <div id="conditional-highlight_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show">
        <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="right"
    data-tooltips-interactive-value="false"
  >
          <div class="lui-tooltip__title">
            Will highlight if you toggle the Param
          </div>
        </div>
        <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="#">
          <div class="lui-sidebar__item lui-sidebar__item--active " style="">
            <icon class="lui-sidebar-item__icon fa-regular fa-sparkles"></icon>
            <div class="lui-sidebar__item__short-title">
              <p class="lui-sidebar__item__label">Conditional highlight</p>
              <span class="lui-counter lui-counter--tinny" style="color: #ffffff; background-color: #df8620;">
                <span class="lui-counter__text">23</span>
              </span>
            </div>
          </div>
        </a></div>
      <div class="w-full"
  data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"
  data-id="conditional-highlight-menu_looposui-sidebar-v1-draweritem-data-target-modal"
  >
        <a data-turbo-action="advance" href="#">
          <div id=conditional-highlight-menu_looposui-sidebar-v1-draweritem class="lui-sidebar__item  "
        style="">
            <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="right"
    data-tooltips-interactive-value="false"
  >
              <div class="lui-tooltip__title">
                🐎🐎🐎🐎🐎🐎🐎🐎🐎
              </div>
            </div>
            <icon class="lui-sidebar-item__icon fa-regular fa-horse"></icon>
            <div class="lui-sidebar__item__short-title">
              <p class="lui-sidebar__item__label">Conditional highlight</p>
              <span class="lui-counter lui-counter--tinny" style="color: #ffffff; background-color: #df8620;">
                <span class="lui-counter__text">42</span>
              </span>
            </div>
          </div>
        </a>  
        <div class="hidden lui-sidebar__drawer">
          <div class="lui-sidebar__drawer__header">
            <div class="lui-sidebar__drawer__header-title">
              <div>
                <icon class="lui-sidebar__drawer__icon lui-sidebar-item__icon fa-regular fa-horse"></icon>
              </div>
              <div>
                Conditional highlight menu
              </div>
            </div>
            <div class="lui-sidebar__drawer__header-description">
              Why is this icon a horse? I dont really know.
            </div>
          </div>
          <div class="lui-sidebar__drawer__items">
            <a class="lui-sidebar__drawer__entry  " data-turbo-action="advance" href="/foo">
              Foo
            </a><a class="lui-sidebar__drawer__entry  " data-turbo-action="advance" href="/bar">
              Bar
            </a>
          </div>
        </div>
      </div>
    </div>
  </aside>
</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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<%
    config = LooposUi::Sidebar::Configuration.new.tap do |config|
        config.items= [
        {
            title: 'Active',
            icon: 'fa-regular fa-house',
            active: true
        },
        {
            title: 'Inactive',
            icon: 'fa-regular fa-house',
            active: false,
            counter: 5,
            tooltip: "This is a tooltip"
        },
        {
            title: 'Disabled',
            icon: 'fa-regular fa-house',
            disabled: true,
            tooltip: "This is a tooltip"
        },
        {
            title: 'Impact Color',
            image: 'loopos-icon.png',
            color: :impact,
            active: true
        },
        {
            title: 'Highlighted',
            icon: :house,
            active: true,
            highlight: true,
            counter: -> { 1 + rand(100) }
        },
        {
            title: 'Conditional highlight',
            icon: :sparkles,
            active: true,
            tooltip_title: "Will highlight if you toggle the Param",
            highlight: -> { params["highlight"].present? },
            counter: -> { 1 + rand(100) }
        },
        {
            short_title: 'Conditional highlight',
            title: 'Conditional highlight menu',
            description: "Why is this icon a horse? I dont really know.",
            icon: :horse,
            highlight: -> { params["highlight"].present? },
            tooltip_title: "🐎🐎🐎🐎🐎🐎🐎🐎🐎",
            counter: -> { 42 },
            menu_items: [
                { title: "Foo", path: "/foo" },
                { title: "Bar", path: "/bar" },
            ]
        }
    ]
  end
%>
<%= render LooposUi::Sidebar.new(config: config) %>

No notes provided.

Param Description Input

Highlight

Sidebar

The Sidebar component can be configured using a Sidebar::Configuration object.

Currently there are three types of sidebar items:

  • Sidebar::Item - (private) The base class for all sidebar items.
  • Sidebar::SingleItem - A single item with an icon and a title that opens a new page.
  • Sidebar::DrawerItem - A single item with an icon and a title that opens a drawer with more items.
  • Sidebar::Divider - A divider between items. Does not inherit from Sidebar::Item.

Item properties

Following are the properties available for the **Sidebar**::SingleItem and Sidebar::DrawerItem components:

Common properties (Single and Drawer Items)

Key Default Description
title nil The title of the sidebar item and of the drawer component. Also accepts callable.
short_title nil The title of the sidebar item. Takes priority over title. Also accepts callable.
icon nil The icon to be displayed next to the title. Expects FontAwesome classes. eg: fa-regular fa-house or just a symbol eg: :house
image nil Displayed instead of the icon, taking precedence. Will be resized to fit. Expects a path to a rails asset, or an URI to an image. eg: fa-regular fa-house.
active false Boolean or any callable to set the active state. the lambda will be executed in the context of the Sidebar::Item instance. currently you can use any Rails URL helper methods inside the block as is if you have your own helpers you want to use, call them on the helpers proxy eg: -> { helpers.my_custom_helper(...) }.
visible true Controls if the component is rendered to the page. Accepts boolean or callable, like the active attribute.
counter nil If present and positive, will create a Counter next to the short_title. Accepts a number of a callable. Callable will be evaluated in the context of the Item ViewComponent.
disabled false Controls if the Icon is clickable. Expects a boolean value.
tooltip_title nil Optional tooltip to show on hover. If disabled is true, will default to "Disabled".
color nil Overrides the icon and title color. The set color is not the accent color, it's fixed. Disables color change on hover. Expects hexadecimal value, or a registered symbol. Available symbols: :impact (#40A77F). Also accepts callable.
bg_color nil Expects hexadecimal value or accepts callable.
path "#" Target location URL. Accepts boolean or callable.

When active is not set, it will be determined by the current URL.

DrawerItem properties

Key Default Description
description nil Text that should appear under the main title.
menu_items nil An array of Hash. Accepts title, path, visible, active, and disabled. These properties work the same was as the ones mentioned above.

Configuration

The sidebar can be configured in an initializer file, usually in config/initializers/loopos_ui.rb.

Each sidebar item is initialized with a hash of properties, or a symbol. This is done by the factory method Sidebar::Item.from_hash, where it guesses the type of the item based on the properties provided.

If the value passed in a symbol with the value :divider, it will create a Divider item. If the menu_items property is present, it will create a DrawerItem, otherwise a SingleItem.

You can override this by passing the type property. This way, the factory method will camelize the value and try to instantiate the class with the same name: LooposUi::Sidebar::#{type}.

Following is an example configuration to get you started:

# config/initializers/loopos_ui.rb
LooposUi.configure do |config|
  #...
  config.sidebar do |sidebar|
    sidebar.items = [
      {
        title: "The Home Page of your application",
        short_title: "Home"
        # Will expand to "fa-regular fa-house"
        icon: :house,
        # image: "https://cataas.com/cat",
        # image: 'loopos-icon.png',
        active: true,
        path: "?clicked_button=title",
        # path: "https://google.com",
        # path: -> { user.admin? ? "page 1" : "page 2" },
      },
      {
        title: "Services",
        icon: "fa-regular fa-cubes",
        menu_items: [
          {
            title: "Active",
            active: true
          },
          {
            title: "Hover me"
          },
          {
            title: "Disabled",
            disabled: -> { !user.admin? }
            # disabled: true
          },
        ]
      },
      :divider,
      # {type: :divider}, # equivalent to the above
      {
        title: "Impact",
        image: 'loopos-icon.png',
        color: :impact
        # color: "#40A77F"
      },
    ]
  end
end