Skip to content

Commit cc41f51

Browse files
Paul-BobPaul-Bob
authored
Merge branch '4-dev' into mount_lookbook
2 parents 353b2b2 + 0af4567 commit cc41f51

15 files changed

Lines changed: 136 additions & 74 deletions

File tree

‎app/assets/stylesheets/css/components/field-wrapper.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,20 @@
105105
@apply w-full;
106106
}
107107
}
108+
109+
/* Density: compact - tighter spacing for previews/popovers */
110+
.field-wrapper.field-wrapper--density-compact {
111+
@apply py-0.5 gap-y-0;
112+
113+
.field-wrapper__label {
114+
@apply min-h-0 py-1;
115+
}
116+
117+
.field-wrapper__content {
118+
@apply py-0;
119+
}
120+
}
121+
122+
.field-wrapper.field-wrapper--density-compact.field-wrapper--stacked {
123+
@apply py-1 gap-y-0.5;
124+
}

‎app/assets/stylesheets/css/components/tooltip.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,16 @@
2323
@apply text-content;
2424
}
2525

26+
/* Preview theme: transparent wrapper so the card inside provides all the chrome */
27+
.tippy-box[data-theme~='preview'] {
28+
@apply bg-transparent border-0 shadow-none text-content;
29+
}
30+
31+
.tippy-box[data-theme~='preview'] .tippy-content {
32+
@apply p-0 text-content;
33+
}
34+
35+
.tippy-box[data-theme~='preview'] .tippy-arrow {
36+
@apply hidden;
37+
}
38+

‎app/assets/stylesheets/css/fields/trix.css‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,14 @@
2525
}
2626

2727
trix-editor {
28-
@apply border border-tertiary rounded-lg bg-primary text-content;
28+
@apply block w-full bg-primary text-content rounded-lg p-3;
29+
border: none !important;
2930

3031
&:empty::before {
3132
@apply !text-content-secondary;
3233
}
3334
}
3435

35-
trix-toolbar {
36-
.trix-button-row {
37-
@apply flex-wrap gap-x-5;
38-
}
39-
40-
.trix-button-group {
41-
@apply border border-tertiary;
42-
}
43-
44-
.trix-button-group:not(:first-child) {
45-
@apply ms-0;
46-
}
47-
}
4836

4937
/* Hack to remove border from trix when rendered from ActionText */
5038
.trix-content {
@@ -53,18 +41,41 @@ trix-toolbar {
5341
}
5442
}
5543

56-
/* Theme-token based Trix styling */
57-
.trix-content pre {
58-
@apply bg-tertiary text-content;
44+
/* Theme Trix content with Avo tokens. */
45+
.trix-content pre,
46+
trix-editor pre {
47+
@apply !bg-tertiary text-content rounded;
48+
}
49+
50+
.trix-content code,
51+
trix-editor code {
52+
@apply !bg-tertiary text-content rounded px-1 py-0.5 text-sm;
53+
}
54+
55+
.trix-content pre code,
56+
trix-editor pre code {
57+
@apply !bg-transparent p-0;
5958
}
6059

6160
trix-toolbar {
61+
@apply !block bg-transparent border-0 p-0;
62+
63+
.trix-button-row {
64+
@apply !flex !flex-wrap gap-x-3 gap-y-1 items-center;
65+
}
66+
6267
.trix-button-group {
63-
@apply bg-secondary border-tertiary;
68+
@apply !flex !flex-nowrap border border-tertiary rounded bg-primary overflow-hidden flex-shrink-0;
69+
@apply !mb-0;
70+
}
71+
72+
.trix-button-group:not(:first-child) {
73+
@apply !ms-0 me-0;
6474
}
6575

6676
.trix-button {
67-
@apply text-content border-tertiary;
77+
@apply flex items-center justify-center border-0 border-s border-tertiary first:border-s-0 size-8 text-content;
78+
@apply !border-b-0;
6879

6980
&:not(:disabled):hover {
7081
@apply bg-tertiary;
@@ -97,6 +108,6 @@ trix-toolbar {
97108
}
98109

99110
/* Trix toolbar icons are image-based and need inversion only in dark mode. */
100-
.dark trix-toolbar .trix-button--icon::before {
111+
.dark trix-toolbar .trix-button--icon:not(.trix-active)::before {
101112
filter: invert(1);
102113
}

‎app/assets/stylesheets/dependencies.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
@import "./../../../node_modules/@yaireo/tagify/dist/tagify.css";
77
@import "./../../../node_modules/trix/dist/trix.css";
88
@import "./../../../node_modules/codemirror/lib/codemirror.css";
9+
@import "./../../../node_modules/codemirror/theme/monokai.css";
910

‎app/components/avo/field_wrapper_component.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ class Avo::FieldWrapperComponent < Avo::BaseComponent
55

66
prop :dash_if_blank, default: true
77
prop :data, default: {}.freeze
8-
prop :compact, default: false
8+
prop :density, default: :default
99
prop :help
1010
prop :label_help
1111
prop :field
@@ -35,6 +35,7 @@ def classes(extra_classes = "")
3535
{
3636
"field-wrapper--stacked": stacked?,
3737
"field-wrapper--full-width": full_width?,
38+
"field-wrapper--density-#{@density}": @density && @density != :default,
3839
})
3940
end
4041

‎app/components/avo/fields/area_field/show_component.html.erb‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<%= field_wrapper(**field_wrapper_args) do %>
1+
<%= field_wrapper(**field_wrapper_args, full_width: true) do %>
22
<% if field.value.present? %>
3-
<%= area_map field.map_data, **field.mapkick_options %>
3+
<div class="w-full" data-controller="map-dark-mode">
4+
<%= area_map field.map_data, **field.mapkick_options %>
5+
</div>
46
<% else %>
57
—
68
<% end %>

‎app/components/avo/fields/location_field/show_component.html.erb‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1-
<%= field_wrapper(**field_wrapper_args) do %>
2-
<%= field.render_map(params) %>
1+
<%= field_wrapper(**field_wrapper_args, full_width: true) do %>
2+
<% if field.static_map?(params) %>
3+
<%= field.render_map(params) %>
4+
<% else %>
5+
<div class="w-full" data-controller="map-dark-mode">
6+
<%= field.render_map(params) %>
7+
</div>
8+
<% end %>
39
<% end %>

‎app/components/avo/fields/show_component.rb‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ class Avo::Fields::ShowComponent < Avo::BaseComponent
1010
attr_reader :stacked
1111
attr_reader :view
1212
attr_reader :full_width
13+
attr_reader :density
1314

14-
def initialize(field: nil, resource: nil, index: 0, form: nil, stacked: nil, full_width: nil, **kwargs)
15+
def initialize(field: nil, resource: nil, index: 0, form: nil, stacked: nil, full_width: nil, density: :default, **kwargs)
1516
@field = field
1617
@index = index
1718
@resource = resource
1819
@stacked = stacked
1920
@kwargs = kwargs
2021
@view = Avo::ViewInquirer.new("show")
2122
@full_width = full_width
23+
@density = density
2224
end
2325

2426
def wrapper_data
@@ -51,6 +53,7 @@ def field_wrapper_args
5153
resource: resource,
5254
stacked: stacked,
5355
full_width: full_width,
56+
density: density,
5457
view: view
5558
}
5659
end

‎app/components/avo/fields/trix_field/edit_component.html.erb‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
11
<%= field_wrapper(**field_wrapper_args, full_width: true) do %>
2+
<% toolbar_id = "#{@input_id}-toolbar" %>
23
<%= content_tag :div,
3-
class: class_names("relative block overflow-x-auto max-w-4xl", @input_id),
4+
class: class_names("card card--full-width card--compact-header max-w-4xl", @input_id),
45
data: do %>
5-
<%= content_tag 'trix-editor',
6-
class: 'trix-content',
7-
data: {
8-
"trix-field-target": "editor",
9-
**@field.get_html(:data, view: view, element: :input)
10-
},
11-
input: @input_id,
12-
placeholder: @field.placeholder do %>
13-
<%= sanitize @field.value.to_s %>
14-
<% end %>
15-
<%= @form.text_area @field.id,
16-
value: @field.value.try(:to_trix_html) || @field.value,
17-
class: classes("w-full !hidden"),
18-
data: @field.get_html(:data, view: view, element: :input),
19-
disabled: disabled?,
20-
id: @input_id,
21-
placeholder: @field.placeholder,
22-
style: @field.get_html(:style, view: view, element: :input)
23-
%>
6+
<div class="card__wrapper">
7+
<div class="card__header !p-1">
8+
<%= content_tag 'trix-toolbar', '', id: toolbar_id %>
9+
</div>
10+
<div class="card__body">
11+
<%= content_tag 'trix-editor',
12+
class: 'trix-content',
13+
toolbar: toolbar_id,
14+
data: {
15+
"trix-field-target": "editor",
16+
**@field.get_html(:data, view: view, element: :input)
17+
},
18+
input: @input_id,
19+
placeholder: @field.placeholder do %>
20+
<%= sanitize @field.value.to_s %>
21+
<% end %>
22+
</div>
23+
<%= @form.text_area @field.id,
24+
value: @field.value.try(:to_trix_html) || @field.value,
25+
class: classes("w-full !hidden"),
26+
data: @field.get_html(:data, view: view, element: :input),
27+
disabled: disabled?,
28+
id: @input_id,
29+
placeholder: @field.placeholder,
30+
style: @field.get_html(:style, view: view, element: :input)
31+
%>
32+
</div>
2433
<% end %>
2534
<% end %>

‎app/javascript/js/controllers/fields/code_field_controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default class extends Controller {
2626
}
2727

2828
get resolvedTheme() {
29-
return this.isDark ? 'material-darker' : (this.elementTarget.dataset.theme || 'default')
29+
return this.isDark ? 'monokai' : (this.elementTarget.dataset.theme || 'default')
3030
}
3131

3232
connect() {

0 commit comments

Comments
 (0)