plutonium 0.32.0 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +5 -0
- data/app/assets/plutonium.css +2 -2
- data/lib/plutonium/ui/action_button.rb +5 -11
- data/lib/plutonium/ui/block.rb +1 -4
- data/lib/plutonium/ui/breadcrumbs.rb +8 -10
- data/lib/plutonium/ui/color_mode_selector.rb +2 -2
- data/lib/plutonium/ui/component/behaviour.rb +0 -8
- data/lib/plutonium/ui/component/kit.rb +1 -1
- data/lib/plutonium/ui/display/components/attachment.rb +2 -2
- data/lib/plutonium/ui/display/theme.rb +16 -16
- data/lib/plutonium/ui/empty_card.rb +2 -5
- data/lib/plutonium/ui/form/components/key_value_store.rb +11 -11
- data/lib/plutonium/ui/form/components/secure_association.rb +2 -2
- data/lib/plutonium/ui/form/components/uppy.rb +5 -5
- data/lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb +5 -5
- data/lib/plutonium/ui/form/query.rb +11 -11
- data/lib/plutonium/ui/form/resource.rb +2 -2
- data/lib/plutonium/ui/form/theme.rb +17 -17
- data/lib/plutonium/ui/layout/base.rb +2 -2
- data/lib/plutonium/ui/layout/header.rb +7 -10
- data/lib/plutonium/ui/layout/rodauth_layout.rb +5 -5
- data/lib/plutonium/ui/layout/sidebar.rb +2 -2
- data/lib/plutonium/ui/nav_grid_menu.rb +6 -6
- data/lib/plutonium/ui/nav_user.rb +7 -8
- data/lib/plutonium/ui/page/interactive_action.rb +4 -4
- data/lib/plutonium/ui/page_header.rb +4 -7
- data/lib/plutonium/ui/panel.rb +3 -3
- data/lib/plutonium/ui/sidebar_menu.rb +12 -12
- data/lib/plutonium/ui/skeleton_table.rb +8 -8
- data/lib/plutonium/ui/tab_list.rb +3 -5
- data/lib/plutonium/ui/table/components/attachment.rb +2 -2
- data/lib/plutonium/ui/table/components/pagy_info.rb +3 -3
- data/lib/plutonium/ui/table/components/pagy_pagination.rb +3 -3
- data/lib/plutonium/ui/table/components/scopes_bar.rb +14 -14
- data/lib/plutonium/ui/table/display_theme.rb +3 -3
- data/lib/plutonium/ui/table/resource.rb +2 -2
- data/lib/plutonium/ui/table/theme.rb +13 -13
- data/lib/plutonium/version.rb +1 -1
- data/package.json +1 -1
- data/src/css/core.css +2 -2
- data/src/css/easymde.css +8 -8
- data/src/css/intl_tel_input.css +7 -7
- data/src/css/slim_select.css +5 -5
- data/tailwind.options.js +2 -30
- metadata +1 -3
- data/docs/guide/theming.md +0 -431
- data/lib/plutonium/ui/component/theme.rb +0 -47
|
@@ -41,7 +41,7 @@ module Plutonium
|
|
|
41
41
|
# @return [void]
|
|
42
42
|
def view_template
|
|
43
43
|
nav(
|
|
44
|
-
class:
|
|
44
|
+
class: "bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50",
|
|
45
45
|
data: {
|
|
46
46
|
controller: "resource-header",
|
|
47
47
|
resource_header_sidebar_outlet: "#sidebar-navigation"
|
|
@@ -59,7 +59,7 @@ module Plutonium
|
|
|
59
59
|
# Renders the color mode toggle controls
|
|
60
60
|
# @private
|
|
61
61
|
def render_color_mode_controls
|
|
62
|
-
div(class: "bg-
|
|
62
|
+
div(class: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700") do
|
|
63
63
|
render ColorModeSelector.new
|
|
64
64
|
end
|
|
65
65
|
end
|
|
@@ -80,13 +80,10 @@ module Plutonium
|
|
|
80
80
|
button(
|
|
81
81
|
data_action: "resource-header#toggleDrawer",
|
|
82
82
|
aria_controls: "#sidebar-navigation",
|
|
83
|
-
class:
|
|
84
|
-
|
|
85
|
-
%(p-2 mr-sm text-gray-600 rounded-sm cursor-pointer lg:hidden hover:text-gray-900
|
|
86
|
-
hover:bg-interactive focus:bg-interactive dark:focus:bg-interactive-dark focus:ring-2
|
|
83
|
+
class: %(p-2 mr-2 text-gray-600 rounded-lg cursor-pointer lg:hidden hover:text-gray-900
|
|
84
|
+
hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2
|
|
87
85
|
focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-200
|
|
88
|
-
dark:hover:bg-
|
|
89
|
-
)
|
|
86
|
+
dark:hover:bg-gray-700 dark:hover:text-white)
|
|
90
87
|
) do
|
|
91
88
|
render_toggle_icons
|
|
92
89
|
end
|
|
@@ -95,7 +92,7 @@ module Plutonium
|
|
|
95
92
|
# Renders the brand section with logo and/or name
|
|
96
93
|
# @private
|
|
97
94
|
def render_brand
|
|
98
|
-
a(href: root_path, class: "flex items-center space-x-
|
|
95
|
+
a(href: root_path, class: "flex items-center space-x-2 md:min-w-60") do
|
|
99
96
|
render brand_logo_slot if brand_logo_slot?
|
|
100
97
|
if brand_name_slot?
|
|
101
98
|
span(class: "self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden xs:block") do
|
|
@@ -122,7 +119,7 @@ module Plutonium
|
|
|
122
119
|
# Renders the action buttons section
|
|
123
120
|
# @private
|
|
124
121
|
def render_actions
|
|
125
|
-
div(class: "flex items-center space-x-
|
|
122
|
+
div(class: "flex items-center space-x-2") do
|
|
126
123
|
render_color_mode_controls
|
|
127
124
|
|
|
128
125
|
div(class: "flex items-center lg:order-2") do
|
|
@@ -11,14 +11,14 @@ module Plutonium
|
|
|
11
11
|
end
|
|
12
12
|
|
|
13
13
|
def main_attributes = mix(super, {
|
|
14
|
-
class: "flex flex-col items-center justify-center gap-
|
|
14
|
+
class: "flex flex-col items-center justify-center gap-2 px-6 py-8 mx-auto lg:py-0"
|
|
15
15
|
})
|
|
16
16
|
|
|
17
17
|
def render_content(&)
|
|
18
18
|
render_logo
|
|
19
19
|
|
|
20
|
-
div(class: "w-full bg-
|
|
21
|
-
div(class: "p-
|
|
20
|
+
div(class: "w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700") {
|
|
21
|
+
div(class: "p-6 space-y-4 md:space-y-6 sm:p-8", &)
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
render_links
|
|
@@ -26,12 +26,12 @@ module Plutonium
|
|
|
26
26
|
|
|
27
27
|
def render_logo
|
|
28
28
|
link_to root_path, class: "flex items-center text-2xl font-semibold text-gray-900 dark:text-white mb-2" do
|
|
29
|
-
helpers.resource_logo_tag classname: "w-24 h-24 mr-
|
|
29
|
+
helpers.resource_logo_tag classname: "w-24 h-24 mr-2 rounded-md"
|
|
30
30
|
end
|
|
31
31
|
end
|
|
32
32
|
|
|
33
33
|
def render_links
|
|
34
|
-
div(class: "mt-
|
|
34
|
+
div(class: "mt-4 flex items-center font-medium text-secondary-600 dark:text-secondary-400 hover:underline") {
|
|
35
35
|
render Phlex::TablerIcons::Home2.new
|
|
36
36
|
link_to "Home", root_path, class: "font-medium text-secondary-600 dark:text-secondary-400"
|
|
37
37
|
}
|
|
@@ -26,7 +26,7 @@ module Plutonium
|
|
|
26
26
|
data: {controller: "sidebar"},
|
|
27
27
|
id: "sidebar-navigation",
|
|
28
28
|
aria: {label: "Sidebar Navigation"},
|
|
29
|
-
class:
|
|
29
|
+
class: "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0",
|
|
30
30
|
&
|
|
31
31
|
)
|
|
32
32
|
end
|
|
@@ -36,7 +36,7 @@ module Plutonium
|
|
|
36
36
|
div(
|
|
37
37
|
id: "sidebar-navigation-content",
|
|
38
38
|
data: {turbo_permanent: true},
|
|
39
|
-
class:
|
|
39
|
+
class: "overflow-y-auto py-5 px-3 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700",
|
|
40
40
|
&
|
|
41
41
|
)
|
|
42
42
|
end
|
|
@@ -32,7 +32,7 @@ module Plutonium
|
|
|
32
32
|
|
|
33
33
|
def view_template
|
|
34
34
|
a(
|
|
35
|
-
class:
|
|
35
|
+
class: "block p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group",
|
|
36
36
|
href: @href
|
|
37
37
|
) do
|
|
38
38
|
render @icon.new(
|
|
@@ -55,7 +55,7 @@ module Plutonium
|
|
|
55
55
|
end
|
|
56
56
|
|
|
57
57
|
def view_template
|
|
58
|
-
div(
|
|
58
|
+
div(data: {controller: "resource-drop-down"}) do
|
|
59
59
|
render_trigger_button
|
|
60
60
|
render_dropdown_menu
|
|
61
61
|
end
|
|
@@ -67,7 +67,7 @@ module Plutonium
|
|
|
67
67
|
button(
|
|
68
68
|
type: "button",
|
|
69
69
|
data: {resource_drop_down_target: "trigger"},
|
|
70
|
-
class:
|
|
70
|
+
class: "p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
|
71
71
|
) do
|
|
72
72
|
span(class: "sr-only") { "View #{@label}" }
|
|
73
73
|
render @icon.new(class: "w-6 h-6")
|
|
@@ -76,14 +76,14 @@ module Plutonium
|
|
|
76
76
|
|
|
77
77
|
def render_dropdown_menu
|
|
78
78
|
div(
|
|
79
|
-
class:
|
|
79
|
+
class: "hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white divide-y divide-gray-100 shadow-lg dark:bg-gray-700 dark:divide-gray-600 rounded-xl",
|
|
80
80
|
data: {resource_drop_down_target: "menu"}
|
|
81
81
|
) do
|
|
82
82
|
div(
|
|
83
|
-
class: "block py-
|
|
83
|
+
class: "block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300"
|
|
84
84
|
) { @label }
|
|
85
85
|
|
|
86
|
-
div(class: "grid grid-cols-3 gap-
|
|
86
|
+
div(class: "grid grid-cols-3 gap-4 p-4") do
|
|
87
87
|
item_slots.each { |item| render item }
|
|
88
88
|
end
|
|
89
89
|
end
|
|
@@ -18,8 +18,7 @@ module Plutonium
|
|
|
18
18
|
def view_template
|
|
19
19
|
a(
|
|
20
20
|
class: tokens(
|
|
21
|
-
|
|
22
|
-
"flex justify-between items-center py-sm px-md text-sm hover:bg-interactive dark:hover:bg-interactive-dark dark:hover:text-white",
|
|
21
|
+
"flex justify-between items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
|
|
23
22
|
@attributes.delete(:class)
|
|
24
23
|
),
|
|
25
24
|
href: @href,
|
|
@@ -41,7 +40,7 @@ module Plutonium
|
|
|
41
40
|
|
|
42
41
|
def view_template
|
|
43
42
|
ul(
|
|
44
|
-
class:
|
|
43
|
+
class: "text-gray-700 dark:text-gray-300",
|
|
45
44
|
aria: {labelledby: "user-nav-dropdown-toggle"}
|
|
46
45
|
) do
|
|
47
46
|
link_slots.each do |link|
|
|
@@ -60,7 +59,7 @@ module Plutonium
|
|
|
60
59
|
end
|
|
61
60
|
|
|
62
61
|
def view_template
|
|
63
|
-
div(
|
|
62
|
+
div(data: {controller: "resource-drop-down"}) do
|
|
64
63
|
render_trigger_button
|
|
65
64
|
render_dropdown_menu
|
|
66
65
|
end
|
|
@@ -79,7 +78,7 @@ module Plutonium
|
|
|
79
78
|
def render_avatar_button
|
|
80
79
|
button(
|
|
81
80
|
type: "button",
|
|
82
|
-
class:
|
|
81
|
+
class: "flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600",
|
|
83
82
|
aria: {expanded: "false"},
|
|
84
83
|
id: "user-nav-dropdown-toggle",
|
|
85
84
|
data: {resource_drop_down_target: "trigger"}
|
|
@@ -92,7 +91,7 @@ module Plutonium
|
|
|
92
91
|
def render_default_button
|
|
93
92
|
button(
|
|
94
93
|
type: "button",
|
|
95
|
-
class:
|
|
94
|
+
class: "flex mx-3 text-sm border border-gray-600 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600",
|
|
96
95
|
aria: {expanded: "false"},
|
|
97
96
|
id: "user-nav-dropdown-toggle",
|
|
98
97
|
data: {resource_drop_down_target: "trigger"}
|
|
@@ -104,10 +103,10 @@ module Plutonium
|
|
|
104
103
|
|
|
105
104
|
def render_dropdown_menu
|
|
106
105
|
div(
|
|
107
|
-
class:
|
|
106
|
+
class: "hidden z-50 my-4 w-56 text-base list-none bg-white divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600 rounded-xl",
|
|
108
107
|
data: {resource_drop_down_target: "menu"}
|
|
109
108
|
) do
|
|
110
|
-
div(class: "py-
|
|
109
|
+
div(class: "py-3 px-4") do
|
|
111
110
|
if @name.present?
|
|
112
111
|
span(class: "block text-sm font-semibold text-gray-900 dark:text-white") { @name }
|
|
113
112
|
end
|
|
@@ -20,13 +20,13 @@ module Plutonium
|
|
|
20
20
|
if helpers.current_turbo_frame == "remote_modal"
|
|
21
21
|
dialog(
|
|
22
22
|
closedby: "any",
|
|
23
|
-
class: "rounded w-full max-w-3xl
|
|
24
|
-
bg-
|
|
23
|
+
class: "rounded-md w-full max-w-3xl
|
|
24
|
+
bg-white dark:bg-gray-800
|
|
25
25
|
border border-gray-200 dark:border-gray-700
|
|
26
26
|
shadow-lg dark:shadow-gray-900/20
|
|
27
27
|
backdrop:bg-black/60 backdrop:backdrop-blur-sm
|
|
28
28
|
top-auto md:top-1/2 md:-translate-y-1/2 left-1/2 -translate-x-1/2
|
|
29
|
-
max-h-[80%] p-
|
|
29
|
+
max-h-[80%] p-6
|
|
30
30
|
hidden open:flex flex-col
|
|
31
31
|
relative opacity-0 open:opacity-100
|
|
32
32
|
transition-opacity duration-300 ease-in-out",
|
|
@@ -35,7 +35,7 @@ module Plutonium
|
|
|
35
35
|
# Close button
|
|
36
36
|
button(
|
|
37
37
|
type: "button",
|
|
38
|
-
class: "absolute top-4 right-4 p-
|
|
38
|
+
class: "absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200",
|
|
39
39
|
data: {action: "remote-modal#close"},
|
|
40
40
|
"aria-label": "Close dialog"
|
|
41
41
|
) do
|
|
@@ -8,10 +8,7 @@ module Plutonium
|
|
|
8
8
|
end
|
|
9
9
|
|
|
10
10
|
def view_template
|
|
11
|
-
div(class:
|
|
12
|
-
theme_class(:page, element: :header),
|
|
13
|
-
"sm:flex sm:space-y-0 sm:space-x-md sm:flex-row items-center justify-between space-y-sm mb-lg"
|
|
14
|
-
)) {
|
|
11
|
+
div(class: "sm:flex sm:space-y-0 sm:space-x-4 sm:flex-row items-center justify-between space-y-3 mb-6") {
|
|
15
12
|
div {
|
|
16
13
|
phlexi_render(@title) {
|
|
17
14
|
render_title @title
|
|
@@ -21,7 +18,7 @@ module Plutonium
|
|
|
21
18
|
render_description @description
|
|
22
19
|
}
|
|
23
20
|
}
|
|
24
|
-
div(class: "flex flex-row space-x-
|
|
21
|
+
div(class: "flex flex-row space-x-2") {
|
|
25
22
|
render_actions
|
|
26
23
|
}
|
|
27
24
|
}
|
|
@@ -30,13 +27,13 @@ module Plutonium
|
|
|
30
27
|
private
|
|
31
28
|
|
|
32
29
|
def render_title(title)
|
|
33
|
-
h2(class:
|
|
30
|
+
h2(class: "mb-2 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-4xl dark:text-white") {
|
|
34
31
|
title
|
|
35
32
|
}
|
|
36
33
|
end
|
|
37
34
|
|
|
38
35
|
def render_description(description)
|
|
39
|
-
p(class:
|
|
36
|
+
p(class: "text-gray-500 dark:text-gray-400") {
|
|
40
37
|
description
|
|
41
38
|
}
|
|
42
39
|
end
|
data/lib/plutonium/ui/panel.rb
CHANGED
|
@@ -32,17 +32,17 @@ module Plutonium
|
|
|
32
32
|
private
|
|
33
33
|
|
|
34
34
|
def wrapped(&)
|
|
35
|
-
div(class:
|
|
35
|
+
div(class: "mt-6", &)
|
|
36
36
|
end
|
|
37
37
|
|
|
38
38
|
def render_toolbar
|
|
39
|
-
div(class: %(flex justify-between items-center mb-
|
|
39
|
+
div(class: %(flex justify-between items-center mb-4)) do
|
|
40
40
|
if @title
|
|
41
41
|
h5(class: %(text-2xl font-bold tracking-tight text-gray-900 dark:text-white)) do
|
|
42
42
|
@title
|
|
43
43
|
end
|
|
44
44
|
end
|
|
45
|
-
div(class: "flex space-x-
|
|
45
|
+
div(class: "flex space-x-4") do
|
|
46
46
|
@items.each do |item|
|
|
47
47
|
render item
|
|
48
48
|
end
|
|
@@ -13,34 +13,34 @@ module Plutonium
|
|
|
13
13
|
def self.theme
|
|
14
14
|
super.merge({
|
|
15
15
|
# Base container styles
|
|
16
|
-
nav: "
|
|
17
|
-
items_container: "
|
|
16
|
+
nav: "space-y-2 pb-6 mb-6",
|
|
17
|
+
items_container: "space-y-2",
|
|
18
18
|
|
|
19
19
|
# Item wrapper styles
|
|
20
|
-
item_wrapper: "
|
|
20
|
+
item_wrapper: "w-full transition-colors duration-200 ease-in-out",
|
|
21
21
|
item_parent: nil,
|
|
22
22
|
|
|
23
23
|
# Link and button base styles
|
|
24
|
-
item_link: "
|
|
25
|
-
item_span: "
|
|
24
|
+
item_link: "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group",
|
|
25
|
+
item_span: "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
|
|
26
26
|
|
|
27
27
|
# Label and content styles
|
|
28
|
-
item_label: ->(depth) { "
|
|
28
|
+
item_label: ->(depth) { "flex-1 #{(depth > 0) ? "ml-9" : "ml-3"} text-left whitespace-nowrap" },
|
|
29
29
|
|
|
30
30
|
# Badge styles
|
|
31
|
-
leading_badge: "
|
|
32
|
-
trailing_badge: "
|
|
31
|
+
leading_badge: "inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800",
|
|
32
|
+
trailing_badge: "inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300",
|
|
33
33
|
|
|
34
34
|
# Icon styles
|
|
35
|
-
icon_wrapper: "
|
|
36
|
-
icon: "
|
|
35
|
+
icon_wrapper: "shrink-0 w-6 h-6 flex items-center justify-center",
|
|
36
|
+
icon: "text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white",
|
|
37
37
|
|
|
38
38
|
# Collapse icon styles
|
|
39
|
-
collapse_icon: "
|
|
39
|
+
collapse_icon: "w-6 h-6 ml-auto transition-transform duration-200",
|
|
40
40
|
collapse_icon_expanded: "transform rotate-180",
|
|
41
41
|
|
|
42
42
|
# Submenu styles
|
|
43
|
-
sub_items_container: "
|
|
43
|
+
sub_items_container: "hidden py-2 space-y-2",
|
|
44
44
|
|
|
45
45
|
# Due to how we use turbo frames, we can't set active states
|
|
46
46
|
active: nil
|
|
@@ -5,21 +5,21 @@ module Plutonium
|
|
|
5
5
|
div(
|
|
6
6
|
role: "status",
|
|
7
7
|
class:
|
|
8
|
-
"p-
|
|
8
|
+
"p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow motion-safe:animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
|
|
9
9
|
) do
|
|
10
10
|
div(class: "flex items-center justify-between") do
|
|
11
11
|
div do
|
|
12
|
-
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-
|
|
13
|
-
div(class: "w-32 h-2 bg-
|
|
12
|
+
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5")
|
|
13
|
+
div(class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700")
|
|
14
14
|
end
|
|
15
|
-
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-
|
|
15
|
+
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
|
|
16
16
|
end
|
|
17
|
-
div(class: "flex items-center justify-between pt-
|
|
17
|
+
div(class: "flex items-center justify-between pt-4") do
|
|
18
18
|
div do
|
|
19
|
-
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-
|
|
20
|
-
div(class: "w-32 h-2 bg-
|
|
19
|
+
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5")
|
|
20
|
+
div(class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700")
|
|
21
21
|
end
|
|
22
|
-
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-
|
|
22
|
+
div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
|
|
23
23
|
end
|
|
24
24
|
span(class: "sr-only") { "Loading..." }
|
|
25
25
|
end
|
|
@@ -20,20 +20,19 @@ module Plutonium
|
|
|
20
20
|
|
|
21
21
|
def view_template
|
|
22
22
|
div(
|
|
23
|
-
class: theme_class(:tab, element: :list),
|
|
24
23
|
data_controller: "resource-tab-list",
|
|
25
24
|
data_resource_tab_list_active_classes_value: "focus:outline-none text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 border-primary-600 dark:border-primary-500",
|
|
26
25
|
data_resource_tab_list_in_active_classes_value: "dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
|
|
27
26
|
) do
|
|
28
|
-
div(class: "mb-
|
|
27
|
+
div(class: "mb-4 border-b border-gray-200 dark:border-gray-700") do
|
|
29
28
|
ul(
|
|
30
|
-
class: "flex flex-wrap -mb-px text-sm font-medium text-center space-x-
|
|
29
|
+
class: "flex flex-wrap -mb-px text-sm font-medium text-center space-x-2",
|
|
31
30
|
role: "tablist"
|
|
32
31
|
) do
|
|
33
32
|
@tabs.each do |tab|
|
|
34
33
|
li(role: "presentation") do
|
|
35
34
|
button(
|
|
36
|
-
class:
|
|
35
|
+
class: "inline-block p-4 border-b-2 rounded-t-lg",
|
|
37
36
|
id: "#{tab[:identifier]}-tab",
|
|
38
37
|
type: "button",
|
|
39
38
|
role: "tab",
|
|
@@ -55,7 +54,6 @@ module Plutonium
|
|
|
55
54
|
div do
|
|
56
55
|
@tabs.each do |tab|
|
|
57
56
|
div(
|
|
58
|
-
class: theme_class(:tab, element: :panel),
|
|
59
57
|
hidden: true,
|
|
60
58
|
id: "#{tab[:identifier]}-tabpanel",
|
|
61
59
|
role: "tabpanel",
|
|
@@ -19,7 +19,7 @@ module Plutonium
|
|
|
19
19
|
|
|
20
20
|
def render_thumbnail(attachment)
|
|
21
21
|
div(
|
|
22
|
-
class: "w-24 h-24 bg-white border border-gray-200 rounded-
|
|
22
|
+
class: "w-24 h-24 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
|
|
23
23
|
data: {
|
|
24
24
|
controller: "attachment-preview",
|
|
25
25
|
attachment_preview_mime_type_value: attachment.content_type,
|
|
@@ -30,7 +30,7 @@ module Plutonium
|
|
|
30
30
|
) do
|
|
31
31
|
a(
|
|
32
32
|
href: attachment.url,
|
|
33
|
-
class: "block aspect-square overflow-hidden rounded-
|
|
33
|
+
class: "block aspect-square overflow-hidden rounded-lg",
|
|
34
34
|
target: :blank,
|
|
35
35
|
data: {
|
|
36
36
|
attachment_preview_target: "thumbnailLink"
|
|
@@ -35,11 +35,11 @@ module Plutonium
|
|
|
35
35
|
|
|
36
36
|
def per_page_selector
|
|
37
37
|
div(
|
|
38
|
-
class: "flex items-center space-x-
|
|
38
|
+
class: "flex items-center space-x-2 mt-2 md:mt-0",
|
|
39
39
|
data_controller: "select-navigator"
|
|
40
40
|
) do
|
|
41
41
|
id = "perPage#{SecureRandom.hex}"
|
|
42
|
-
label(for: id, class: "mr-
|
|
42
|
+
label(for: id, class: "mr-2") { "Per page" }
|
|
43
43
|
select(
|
|
44
44
|
id: id, name: "items", class: select_classes,
|
|
45
45
|
data_action: "change->select-navigator#navigate",
|
|
@@ -53,7 +53,7 @@ module Plutonium
|
|
|
53
53
|
end
|
|
54
54
|
|
|
55
55
|
def select_classes
|
|
56
|
-
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-
|
|
56
|
+
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 min-w-[5em]"
|
|
57
57
|
end
|
|
58
58
|
|
|
59
59
|
def page_url(limit)
|
|
@@ -12,7 +12,7 @@ module Plutonium
|
|
|
12
12
|
end
|
|
13
13
|
|
|
14
14
|
def view_template
|
|
15
|
-
nav(aria_label: "Page navigation", class: "flex justify-center mt-
|
|
15
|
+
nav(aria_label: "Page navigation", class: "flex justify-center mt-4") do
|
|
16
16
|
ul(class: "inline-flex -space-x-px text-sm") do
|
|
17
17
|
prev_link
|
|
18
18
|
page_links
|
|
@@ -79,14 +79,14 @@ module Plutonium
|
|
|
79
79
|
end
|
|
80
80
|
|
|
81
81
|
def link_classes(first = false, last = false)
|
|
82
|
-
classes = ["flex", "items-center", "justify-center", "px-
|
|
82
|
+
classes = ["flex", "items-center", "justify-center", "px-3", "h-8", "leading-tight", "text-gray-500", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "hover:text-gray-700", "dark:bg-gray-800", "dark:border-gray-700", "dark:text-gray-400", "dark:hover:bg-gray-700", "dark:hover:text-white"]
|
|
83
83
|
classes << "rounded-s-lg" if first
|
|
84
84
|
classes << "rounded-e-lg" if last
|
|
85
85
|
classes.join(" ")
|
|
86
86
|
end
|
|
87
87
|
|
|
88
88
|
def current_link_classes
|
|
89
|
-
"flex items-center justify-center px-
|
|
89
|
+
"flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed"
|
|
90
90
|
end
|
|
91
91
|
|
|
92
92
|
def disabled_link_classes(first = false, last = false)
|
|
@@ -10,24 +10,24 @@ module Plutonium
|
|
|
10
10
|
def view_template
|
|
11
11
|
div(
|
|
12
12
|
class:
|
|
13
|
-
# "flex flex-wrap justify-between items-center gap-
|
|
14
|
-
"flex flex-wrap justify-between items-center gap-
|
|
13
|
+
# "flex flex-wrap justify-between items-center gap-4 p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 mb-4"
|
|
14
|
+
"flex flex-wrap justify-between items-center gap-4 mb-4"
|
|
15
15
|
) do
|
|
16
|
-
div(class: "flex flex-wrap items-center gap-
|
|
16
|
+
div(class: "flex flex-wrap items-center gap-2") do
|
|
17
17
|
name = "all"
|
|
18
18
|
if current_scope.blank?
|
|
19
19
|
a(
|
|
20
20
|
id: "#{name}-scope",
|
|
21
21
|
href: current_query_object.build_url(scope: nil),
|
|
22
22
|
class:
|
|
23
|
-
"px-
|
|
23
|
+
"px-4 py-2 text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-lg hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
|
24
24
|
) { name.humanize }
|
|
25
25
|
else
|
|
26
26
|
a(
|
|
27
27
|
id: "#{name}-scope",
|
|
28
28
|
href: current_query_object.build_url(scope: nil),
|
|
29
29
|
class:
|
|
30
|
-
"px-
|
|
30
|
+
"px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
|
|
31
31
|
) { name.humanize }
|
|
32
32
|
end
|
|
33
33
|
|
|
@@ -37,26 +37,26 @@ module Plutonium
|
|
|
37
37
|
id: "#{name}-scope",
|
|
38
38
|
href: current_query_object.build_url(scope: name),
|
|
39
39
|
class:
|
|
40
|
-
"px-
|
|
40
|
+
"px-4 py-2 text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-lg hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
|
41
41
|
) { name.humanize }
|
|
42
42
|
else
|
|
43
43
|
a(
|
|
44
44
|
id: "#{name}-scope",
|
|
45
45
|
href: current_query_object.build_url(scope: name),
|
|
46
46
|
class:
|
|
47
|
-
"px-
|
|
47
|
+
"px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
|
|
48
48
|
) { name.humanize }
|
|
49
49
|
end
|
|
50
50
|
end
|
|
51
51
|
end
|
|
52
52
|
|
|
53
|
-
# div(class: "flex flex-wrap items-center gap-
|
|
53
|
+
# div(class: "flex flex-wrap items-center gap-2") do
|
|
54
54
|
# button(
|
|
55
55
|
# class:
|
|
56
|
-
# "inline-flex items-center px-
|
|
56
|
+
# "inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
|
|
57
57
|
# ) do
|
|
58
58
|
# svg(
|
|
59
|
-
# class: "w-4 h-4 mr-
|
|
59
|
+
# class: "w-4 h-4 mr-2",
|
|
60
60
|
# fill: "none",
|
|
61
61
|
# stroke: "currentColor",
|
|
62
62
|
# viewbox: "0 0 24 24",
|
|
@@ -74,10 +74,10 @@ module Plutonium
|
|
|
74
74
|
# end
|
|
75
75
|
# button(
|
|
76
76
|
# class:
|
|
77
|
-
# "inline-flex items-center px-
|
|
77
|
+
# "inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800"
|
|
78
78
|
# ) do
|
|
79
79
|
# svg(
|
|
80
|
-
# class: "w-4 h-4 mr-
|
|
80
|
+
# class: "w-4 h-4 mr-2",
|
|
81
81
|
# fill: "none",
|
|
82
82
|
# stroke: "currentColor",
|
|
83
83
|
# viewbox: "0 0 24 24",
|
|
@@ -97,13 +97,13 @@ module Plutonium
|
|
|
97
97
|
# id: "dropdownActionButton",
|
|
98
98
|
# data_dropdown_toggle: "dropdownAction",
|
|
99
99
|
# class:
|
|
100
|
-
# "inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-
|
|
100
|
+
# "inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-2 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700",
|
|
101
101
|
# type: "button"
|
|
102
102
|
# ) do
|
|
103
103
|
# span(class: "sr-only") { "Action button" }
|
|
104
104
|
# plain " More Actions "
|
|
105
105
|
# svg(
|
|
106
|
-
# class: "w-2.5 h-2.5 ml-
|
|
106
|
+
# class: "w-2.5 h-2.5 ml-2.5",
|
|
107
107
|
# aria_hidden: "true",
|
|
108
108
|
# xmlns: "http://www.w3.org/2000/svg",
|
|
109
109
|
# fill: "none",
|
|
@@ -7,14 +7,14 @@ module Plutonium
|
|
|
7
7
|
def self.theme
|
|
8
8
|
super.merge({
|
|
9
9
|
value_wrapper: "max-h-[150px] overflow-y-auto",
|
|
10
|
-
prefixed_icon: "w-4 h-4 mr-
|
|
10
|
+
prefixed_icon: "w-4 h-4 mr-1",
|
|
11
11
|
link: "text-primary-600 dark:text-primary-500",
|
|
12
12
|
color: "flex items-center",
|
|
13
|
-
color_indicator: "w-10 h-10 rounded-full mr-
|
|
13
|
+
color_indicator: "w-10 h-10 rounded-full mr-2",
|
|
14
14
|
email: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
|
|
15
15
|
phone: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
|
|
16
16
|
json: " whitespace-pre font-mono shadow-inner p-4",
|
|
17
|
-
attachment_value_wrapper: "flex flex-wrap gap-
|
|
17
|
+
attachment_value_wrapper: "flex flex-wrap gap-1"
|
|
18
18
|
})
|
|
19
19
|
end
|
|
20
20
|
end
|
|
@@ -91,7 +91,7 @@ module Plutonium
|
|
|
91
91
|
record = wrapped_object.unwrapped
|
|
92
92
|
policy = policy_for(record:)
|
|
93
93
|
|
|
94
|
-
div(class: "flex space-x-
|
|
94
|
+
div(class: "flex space-x-2") do
|
|
95
95
|
resource_definition.defined_actions
|
|
96
96
|
.select { |k, a| a.collection_record_action? && policy.allowed_to?(:"#{k}?") }
|
|
97
97
|
.values
|
|
@@ -105,7 +105,7 @@ module Plutonium
|
|
|
105
105
|
end
|
|
106
106
|
|
|
107
107
|
def render_footer
|
|
108
|
-
div(class:
|
|
108
|
+
div(class: "lg:sticky lg:dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-30 bg-gray-50 dark:bg-gray-900") {
|
|
109
109
|
TableInfo(pagy_instance)
|
|
110
110
|
TablePagination(pagy_instance)
|
|
111
111
|
}
|