playbook_ui 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605 → 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +0 -9
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +3 -8
- data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +11 -17
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +0 -13
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +12 -31
- data/app/pb_kits/playbook/pb_button/_button.tsx +1 -4
- data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/button.rb +0 -4
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -3
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -20
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +0 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +25 -43
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -6
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +0 -4
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +13 -49
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +7 -0
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +5 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +13 -49
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +12 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +23 -23
- data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +27 -19
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +11 -21
- data/app/pb_kits/playbook/pb_star_rating/index.js +41 -78
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -4
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +0 -17
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +2 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +1 -0
- data/app/pb_kits/playbook/pb_time/_time.tsx +8 -12
- data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
- data/app/pb_kits/playbook/pb_time/time.rb +0 -4
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +3 -20
- data/dist/chunks/_typeahead-B6CmTH6o.js +22 -0
- data/dist/chunks/_weekday_stacked-CNZpeoOR.js +45 -0
- data/dist/chunks/{lib-DErGXNy3.js → lib-XlOB2yGW.js} +2 -2
- data/dist/chunks/{pb_form_validation-BC6kh7Hu.js → pb_form_validation-mwEv7D-z.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/classnames.rb +0 -1
- data/lib/playbook/spacing.rb +2 -31
- data/lib/playbook/version.rb +1 -1
- metadata +9 -23
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +0 -46
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +0 -164
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +0 -19
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +0 -62
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/data.js +0 -23
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -2
- data/app/pb_kits/playbook/tokens/_container.scss +0 -21
- data/app/pb_kits/playbook/utilities/_min_width.scss +0 -45
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +0 -59
- data/app/pb_kits/playbook/utilities/icons/clock.svg +0 -9
- data/app/pb_kits/playbook/utilities/icons/spinner.svg +0 -3
- data/app/pb_kits/playbook/utilities/icons/times.svg +0 -3
- data/dist/chunks/_typeahead-Cq7RLPBA.js +0 -22
- data/dist/chunks/_weekday_stacked-Cykj5kLZ.js +0 -45
- /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default_rails.md → _pagination_default.md} +0 -0
@@ -5,11 +5,11 @@ examples:
|
|
5
5
|
- form_pill_size: Form Pill Size
|
6
6
|
- form_pill_tag: Form Pill Tag
|
7
7
|
- form_pill_example: Example
|
8
|
-
- form_pill_icon: Form Pill Icon
|
8
|
+
# - form_pill_icon: Form Pill Icon
|
9
9
|
|
10
10
|
react:
|
11
11
|
- form_pill_user: Form Pill User
|
12
12
|
- form_pill_size: Form Pill Size
|
13
13
|
- form_pill_tag: Form Pill Tag
|
14
14
|
- form_pill_example: Example
|
15
|
-
- form_pill_icon: Form Pill Icon
|
15
|
+
# - form_pill_icon: Form Pill Icon
|
@@ -1,19 +1,19 @@
|
|
1
1
|
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
|
2
2
|
<% if object.name.present? %>
|
3
|
-
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "
|
3
|
+
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
|
4
4
|
<%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
|
5
5
|
<% if object.icon.present? %>
|
6
|
-
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon",
|
6
|
+
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
|
7
7
|
<% end %>
|
8
8
|
<% elsif object.text.present? %>
|
9
9
|
<% if object.icon.present? %>
|
10
|
-
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon",
|
10
|
+
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
|
11
11
|
<% end %>
|
12
12
|
<% if object.text.present? %>
|
13
13
|
<%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
|
14
14
|
<% end %>
|
15
15
|
<% end %>
|
16
16
|
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
|
17
|
-
<%= pb_rails("icon", props: { icon: 'times', fixed_width: true
|
17
|
+
<%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
|
18
18
|
<% end %>
|
19
19
|
<% end %>
|
@@ -28,7 +28,7 @@ type IconProps = {
|
|
28
28
|
data?: {[key: string]: string},
|
29
29
|
fixedWidth?: boolean,
|
30
30
|
flip?: "horizontal" | "vertical" | "both" | "none",
|
31
|
-
icon
|
31
|
+
icon: string | ReactSVGElement,
|
32
32
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
33
33
|
id?: string,
|
34
34
|
inverse?: boolean,
|
@@ -469,6 +469,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
469
469
|
<FormPill
|
470
470
|
key={index}
|
471
471
|
onClick={(event: any) => handlePillClose(event, item)}
|
472
|
+
size="small"
|
472
473
|
text={item.label}
|
473
474
|
/>
|
474
475
|
))
|
@@ -481,6 +482,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
481
482
|
<FormPill
|
482
483
|
key={index}
|
483
484
|
onClick={(event: any) => handlePillClose(event, item)}
|
485
|
+
size="small"
|
484
486
|
text={item.label}
|
485
487
|
/>
|
486
488
|
))
|
@@ -3,45 +3,36 @@
|
|
3
3
|
@import "../tokens/border_radius";
|
4
4
|
@import "../tokens/shadows";
|
5
5
|
|
6
|
-
|
7
6
|
$pagination_padding: 7px 13px 6px 13px;
|
8
7
|
$top_bottom_radius: 0px;
|
9
8
|
|
10
|
-
@mixin hover-state {
|
11
|
-
background-color: $active_light !important;
|
12
|
-
color: $primary;
|
13
|
-
border-radius: $border_rad_light;
|
14
|
-
}
|
15
|
-
|
16
9
|
.pb_pagination {
|
17
10
|
display: inline-block;
|
18
11
|
border-radius: $border_rad_light;
|
19
12
|
border: $border_rad_lightest solid $border_light;
|
20
13
|
background-color: $white;
|
21
|
-
padding: $
|
22
|
-
li
|
14
|
+
padding: $space_xxs 0px !important;
|
15
|
+
li {
|
23
16
|
display: inline;
|
24
|
-
> a, li > span
|
17
|
+
> a, li > span {
|
25
18
|
padding: $pagination_padding;
|
26
19
|
text-decoration: none;
|
27
20
|
}}
|
28
|
-
li:first-child > a, li:first-child > span
|
29
|
-
background-color: $white;
|
21
|
+
li:first-child > a, li:first-child > span {
|
30
22
|
padding: $pagination_padding;
|
31
23
|
border-right: $border_rad_lightest solid $border_light;
|
32
24
|
z-index: 2;
|
33
25
|
border-top-right-radius: $top_bottom_radius;
|
34
26
|
border-bottom-right-radius: $top_bottom_radius;
|
35
|
-
cursor: pointer;
|
36
27
|
}
|
37
|
-
li:last-child > a, li:last-child > span
|
28
|
+
li:last-child > a, li:last-child > span {
|
38
29
|
padding: $pagination_padding;
|
39
30
|
border-left: $border_rad_lightest solid $border_light;
|
40
31
|
z-index: 2;
|
41
32
|
border-top-left-radius: $top_bottom_radius;
|
42
33
|
border-bottom-left-radius: $top_bottom_radius;
|
43
34
|
}
|
44
|
-
a
|
35
|
+
a {
|
45
36
|
color: $text_lt_default;
|
46
37
|
font-size: $text_small;
|
47
38
|
font-weight: $regular;
|
@@ -49,7 +40,9 @@ $top_bottom_radius: 0px;
|
|
49
40
|
transition: all $transition_default ease-out;
|
50
41
|
|
51
42
|
&:hover {
|
52
|
-
|
43
|
+
background-color: $active_light;
|
44
|
+
color: $primary;
|
45
|
+
border-radius: $border_rad_light;
|
53
46
|
}
|
54
47
|
|
55
48
|
&:focus-visible {
|
@@ -59,8 +52,8 @@ $top_bottom_radius: 0px;
|
|
59
52
|
transition: none;
|
60
53
|
}
|
61
54
|
}
|
62
|
-
.active > span
|
63
|
-
background-color: $primary
|
55
|
+
.active > span {
|
56
|
+
background-color: $primary;
|
64
57
|
border-radius: $border_rad_light;
|
65
58
|
color: #fff;
|
66
59
|
padding: $pagination_padding;
|
@@ -69,37 +62,8 @@ $top_bottom_radius: 0px;
|
|
69
62
|
font-weight: $bold;
|
70
63
|
font-size: $text_small;
|
71
64
|
}
|
72
|
-
.disabled {
|
73
|
-
|
74
|
-
opacity: 0.5;
|
75
|
-
color: grey;
|
76
|
-
|
77
|
-
& > span {
|
78
|
-
padding: $pagination_padding;
|
79
|
-
font-size: $text_small;
|
80
|
-
}
|
81
|
-
}
|
82
|
-
|
83
|
-
.pagination-right,
|
84
|
-
.pagination-left {
|
85
|
-
background-color: $white;
|
86
|
-
border-top: none;
|
87
|
-
border-bottom: none;
|
88
|
-
cursor: pointer;
|
89
|
-
padding: 7px 11px 6px;
|
65
|
+
.disabled > span {
|
66
|
+
padding: $pagination_padding;
|
90
67
|
font-size: $text_small;
|
91
|
-
|
92
|
-
&:hover {
|
93
|
-
@include hover-state;
|
94
|
-
}
|
95
|
-
}
|
96
|
-
.pagination-left {
|
97
|
-
border-left: none;
|
98
|
-
margin-right: $space_xxs;
|
99
|
-
}
|
100
|
-
|
101
|
-
.pagination-right {
|
102
|
-
border-right: none;
|
103
|
-
margin-left: $space_xxs;
|
104
68
|
}
|
105
69
|
}
|
@@ -60,6 +60,7 @@ $flag-min-resolution: 192dpi;
|
|
60
60
|
}
|
61
61
|
|
62
62
|
.iti__flag {
|
63
|
+
background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
|
63
64
|
border-radius: 1px;
|
64
65
|
}
|
65
66
|
|
@@ -196,4 +197,10 @@ $flag-min-resolution: 192dpi;
|
|
196
197
|
}
|
197
198
|
}
|
198
199
|
}
|
200
|
+
|
201
|
+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
|
202
|
+
.iti__flag {
|
203
|
+
background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
|
204
|
+
}
|
205
|
+
}
|
199
206
|
}
|
@@ -21,8 +21,6 @@ import classnames from "classnames";
|
|
21
21
|
import { globalProps, GlobalProps } from "../utilities/globalProps";
|
22
22
|
import { uniqueId } from 'lodash';
|
23
23
|
|
24
|
-
type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
|
25
|
-
|
26
24
|
type PbPopoverProps = {
|
27
25
|
aria?: { [key: string]: string };
|
28
26
|
className?: string;
|
@@ -34,7 +32,7 @@ type PbPopoverProps = {
|
|
34
32
|
reference: PopperReference & any;
|
35
33
|
show?: boolean;
|
36
34
|
shouldClosePopover?: (arg0: boolean) => void;
|
37
|
-
} &
|
35
|
+
} & GlobalProps & Omit<PopperProps<any>, 'children'>
|
38
36
|
& { children?: React.ReactChild[] | React.ReactChild }
|
39
37
|
|
40
38
|
// Prop enabled default modifiers here
|
@@ -82,13 +80,10 @@ const Popover = (props: PbPopoverProps) => {
|
|
82
80
|
targetId,
|
83
81
|
} = props;
|
84
82
|
|
85
|
-
const items = globalProps(props).split(' ')
|
86
|
-
const filteredItems = items.filter(item => !item.includes('min_width'))
|
87
|
-
const filteredGlobalProps = filteredItems.join(' ')
|
88
83
|
const popoverSpacing =
|
89
|
-
|
84
|
+
globalProps(props).includes("dark") || !globalProps(props)
|
90
85
|
? "p_sm"
|
91
|
-
:
|
86
|
+
: globalProps(props);
|
92
87
|
const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
|
93
88
|
const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
|
94
89
|
const widthHeightStyles = () => {
|
@@ -105,7 +100,7 @@ const Popover = (props: PbPopoverProps) => {
|
|
105
100
|
const htmlProps = buildHtmlProps(htmlOptions);
|
106
101
|
const classes = classnames(
|
107
102
|
buildCss("pb_popover_kit"),
|
108
|
-
|
103
|
+
globalProps(props),
|
109
104
|
className
|
110
105
|
);
|
111
106
|
|
@@ -255,4 +250,4 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
|
|
255
250
|
);
|
256
251
|
};
|
257
252
|
|
258
|
-
export default PbReactPopover;
|
253
|
+
export default PbReactPopover;
|
@@ -3,20 +3,18 @@
|
|
3
3
|
@import "../tokens/spacing";
|
4
4
|
@import "../tokens/typography";
|
5
5
|
|
6
|
-
|
7
|
-
// Tiptap mixins section (React Advanced Editor)
|
8
|
-
@mixin preview_tiptap_first_child {
|
6
|
+
@mixin preview_first_child {
|
9
7
|
:first-child {
|
10
8
|
margin-top: 0;
|
11
9
|
}
|
12
10
|
}
|
13
11
|
|
14
|
-
@mixin
|
12
|
+
@mixin preview_p {
|
15
13
|
margin: 1rem 0 0 0;
|
16
14
|
min-height: 1rem;
|
17
15
|
}
|
18
16
|
|
19
|
-
@mixin
|
17
|
+
@mixin preview_code {
|
20
18
|
font-family: monospace;
|
21
19
|
background: $bg_light;
|
22
20
|
padding: 0.1rem 0.3rem;
|
@@ -25,7 +23,7 @@
|
|
25
23
|
overflow: hidden;
|
26
24
|
}
|
27
25
|
|
28
|
-
@mixin
|
26
|
+
@mixin preview_pre_codeblock {
|
29
27
|
display: inline-block;
|
30
28
|
width: 100%;
|
31
29
|
vertical-align: top;
|
@@ -46,7 +44,7 @@
|
|
46
44
|
}
|
47
45
|
}
|
48
46
|
|
49
|
-
@mixin
|
47
|
+
@mixin preview_a {
|
50
48
|
color: $primary;
|
51
49
|
border-bottom: 1px solid $primary;
|
52
50
|
&:hover {
|
@@ -55,7 +53,7 @@
|
|
55
53
|
}
|
56
54
|
}
|
57
55
|
|
58
|
-
@mixin
|
56
|
+
@mixin preview_blockquote {
|
59
57
|
font-size: $font_larger;
|
60
58
|
padding: $space_sm $space_md;
|
61
59
|
font-style: italic;
|
@@ -65,7 +63,7 @@
|
|
65
63
|
}
|
66
64
|
}
|
67
65
|
|
68
|
-
@mixin
|
66
|
+
@mixin preview_h1 {
|
69
67
|
font-size: $text_largest;
|
70
68
|
line-height: $text_larger;
|
71
69
|
font-weight: $bolder;
|
@@ -73,7 +71,7 @@
|
|
73
71
|
margin: 2.1rem 0 0 0;
|
74
72
|
}
|
75
73
|
|
76
|
-
@mixin
|
74
|
+
@mixin preview_h2 {
|
77
75
|
font-size: $text_larger;
|
78
76
|
line-height: $text_larger;
|
79
77
|
font-weight: $bolder;
|
@@ -81,7 +79,7 @@
|
|
81
79
|
margin: 1.9rem 0 0 0;
|
82
80
|
}
|
83
81
|
|
84
|
-
@mixin
|
82
|
+
@mixin preview_h3 {
|
85
83
|
font-size: $text_large;
|
86
84
|
line-height: $text_large;
|
87
85
|
font-weight: $bolder;
|
@@ -89,7 +87,7 @@
|
|
89
87
|
margin: 1.7rem 0 0 0;
|
90
88
|
}
|
91
89
|
|
92
|
-
@mixin
|
90
|
+
@mixin preview_smaller_headings {
|
93
91
|
font-size: $text_base;
|
94
92
|
line-height: $text_base;
|
95
93
|
letter-spacing: $lspace_tight;
|
@@ -97,7 +95,7 @@
|
|
97
95
|
margin: 1rem 0 0 0;
|
98
96
|
}
|
99
97
|
|
100
|
-
@mixin
|
98
|
+
@mixin preview_hr {
|
101
99
|
margin: 2.2rem 0;
|
102
100
|
box-sizing: content-box;
|
103
101
|
overflow: hidden;
|
@@ -109,7 +107,7 @@
|
|
109
107
|
border: 0;
|
110
108
|
}
|
111
109
|
|
112
|
-
@mixin
|
110
|
+
@mixin preview_ol {
|
113
111
|
margin: 1rem 0 0 0;
|
114
112
|
padding-left: $space_md;
|
115
113
|
list-style: decimal;
|
@@ -121,7 +119,7 @@
|
|
121
119
|
}
|
122
120
|
}
|
123
121
|
|
124
|
-
@mixin
|
122
|
+
@mixin preview_ul {
|
125
123
|
list-style-position: disc;
|
126
124
|
margin: 1rem 0 0 0;
|
127
125
|
padding-left: $space_md;
|
@@ -132,37 +130,3 @@
|
|
132
130
|
}
|
133
131
|
}
|
134
132
|
}
|
135
|
-
|
136
|
-
// Trix mixins section (Rails and React default editor)
|
137
|
-
@mixin preview_trix_div {
|
138
|
-
line-height: 1.4;
|
139
|
-
}
|
140
|
-
|
141
|
-
@mixin preview_trix_h1 {
|
142
|
-
font-size: 2em;
|
143
|
-
line-height: 1.4;
|
144
|
-
}
|
145
|
-
@mixin preview_trix_blockquote {
|
146
|
-
border: 0 solid #ccc;
|
147
|
-
border-left-width: 0.3em;
|
148
|
-
margin-left: 0.3em;
|
149
|
-
padding-left: 0.6em;
|
150
|
-
line-height: 1.4;
|
151
|
-
}
|
152
|
-
|
153
|
-
@mixin preview_trix_li {
|
154
|
-
line-height: 1.4;
|
155
|
-
margin-left: $space_sm;
|
156
|
-
}
|
157
|
-
|
158
|
-
@mixin preview_trix_pre {
|
159
|
-
display: inline-block;
|
160
|
-
width: 100%;
|
161
|
-
vertical-align: top;
|
162
|
-
font-family: monospace;
|
163
|
-
font-size: 0.9em;
|
164
|
-
padding: 0.5em;
|
165
|
-
white-space: pre;
|
166
|
-
background-color: #eee;
|
167
|
-
overflow-x: auto;
|
168
|
-
}
|
@@ -10,6 +10,18 @@
|
|
10
10
|
@import "./trix_styles";
|
11
11
|
@import "./tiptap_styles";
|
12
12
|
|
13
|
+
.trix-content pre {
|
14
|
+
display: inline-block;
|
15
|
+
width: 100%;
|
16
|
+
vertical-align: top;
|
17
|
+
font-family: monospace;
|
18
|
+
font-size: 0.9em;
|
19
|
+
padding: 0.5em;
|
20
|
+
white-space: pre;
|
21
|
+
background-color: #ccc !important;
|
22
|
+
color: black !important;
|
23
|
+
overflow-x: auto;
|
24
|
+
}
|
13
25
|
[class^=pb_rich_text_editor_kit] {
|
14
26
|
// Disables File Attatchment Button in Toolbar
|
15
27
|
trix-toolbar [data-trix-button-group="file-tools"] {
|
@@ -86,44 +86,44 @@
|
|
86
86
|
}
|
87
87
|
|
88
88
|
code {
|
89
|
-
@include
|
89
|
+
@include preview_code;
|
90
90
|
}
|
91
91
|
|
92
92
|
pre {
|
93
|
-
@include
|
93
|
+
@include preview_pre_codeblock;
|
94
94
|
}
|
95
95
|
a {
|
96
|
-
@include
|
96
|
+
@include preview_a;
|
97
97
|
}
|
98
98
|
blockquote {
|
99
|
-
@include
|
99
|
+
@include preview_blockquote;
|
100
100
|
}
|
101
101
|
&:focus-visible {
|
102
102
|
outline: unset;
|
103
103
|
@include transition_default;
|
104
104
|
}
|
105
105
|
h1 {
|
106
|
-
@include
|
106
|
+
@include preview_h1;
|
107
107
|
}
|
108
108
|
h2 {
|
109
|
-
@include
|
109
|
+
@include preview_h2;
|
110
110
|
}
|
111
111
|
h3 {
|
112
|
-
@include
|
112
|
+
@include preview_h3;
|
113
113
|
}
|
114
114
|
h4,
|
115
115
|
h5,
|
116
116
|
h6 {
|
117
|
-
@include
|
117
|
+
@include preview_smaller_headings;
|
118
118
|
}
|
119
119
|
hr {
|
120
|
-
@include
|
120
|
+
@include preview_hr;
|
121
121
|
}
|
122
122
|
ol {
|
123
|
-
@include
|
123
|
+
@include preview_ol;
|
124
124
|
}
|
125
125
|
ul {
|
126
|
-
@include
|
126
|
+
@include preview_ul;
|
127
127
|
}
|
128
128
|
}
|
129
129
|
}
|
@@ -170,40 +170,40 @@
|
|
170
170
|
}
|
171
171
|
}
|
172
172
|
.tiptap-content {
|
173
|
-
@include
|
173
|
+
@include preview_first_child;
|
174
174
|
a {
|
175
|
-
@include
|
175
|
+
@include preview_a;
|
176
176
|
}
|
177
177
|
blockquote {
|
178
|
-
@include
|
178
|
+
@include preview_blockquote;
|
179
179
|
}
|
180
180
|
h1 {
|
181
|
-
@include
|
181
|
+
@include preview_h1;
|
182
182
|
}
|
183
183
|
h2 {
|
184
|
-
@include
|
184
|
+
@include preview_h2;
|
185
185
|
}
|
186
186
|
h3 {
|
187
|
-
@include
|
187
|
+
@include preview_h3;
|
188
188
|
}
|
189
189
|
h4,
|
190
190
|
h5,
|
191
191
|
h6 {
|
192
|
-
@include
|
192
|
+
@include preview_smaller_headings;
|
193
193
|
}
|
194
194
|
hr {
|
195
|
-
@include
|
195
|
+
@include preview_hr;
|
196
196
|
}
|
197
197
|
ol {
|
198
|
-
@include
|
198
|
+
@include preview_ol;
|
199
199
|
}
|
200
200
|
p {
|
201
|
-
@include
|
201
|
+
@include preview_p;
|
202
202
|
}
|
203
203
|
pre {
|
204
|
-
@include
|
204
|
+
@include preview_pre_codeblock;
|
205
205
|
}
|
206
206
|
ul {
|
207
|
-
@include
|
207
|
+
@include preview_ul;
|
208
208
|
}
|
209
209
|
}
|
@@ -1,5 +1,3 @@
|
|
1
|
-
@import "previewer_mixin";
|
2
|
-
|
3
1
|
@charset "UTF-8";
|
4
2
|
/*
|
5
3
|
Trix 1.3.0
|
@@ -299,31 +297,41 @@ trix-editor .attachment__metadata {
|
|
299
297
|
trix-editor .attachment__metadata .attachment__size {
|
300
298
|
margin-left: 0.2em;
|
301
299
|
white-space: nowrap; }
|
302
|
-
trix-editor blockquote {
|
303
|
-
@include preview_trix_blockquote; }
|
304
|
-
trix-editor [dir=rtl] blockquote,
|
305
|
-
trix-editor blockquote[dir=rtl] {
|
306
|
-
@include preview_trix_blockquote }
|
307
300
|
@charset "UTF-8";
|
308
|
-
.trix-content
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
301
|
+
.trix-content {
|
302
|
+
line-height: 1.5; }
|
303
|
+
.trix-content * {
|
304
|
+
box-sizing: border-box;
|
305
|
+
margin: 0;
|
306
|
+
padding: 0; }
|
314
307
|
.trix-content h1 {
|
315
|
-
|
308
|
+
font-size: 1.2em;
|
309
|
+
line-height: 1.2; }
|
316
310
|
.trix-content blockquote {
|
317
|
-
|
311
|
+
border: 0 solid #ccc;
|
312
|
+
border-left-width: 0.3em;
|
313
|
+
margin-left: 0.3em;
|
314
|
+
padding-left: 0.6em; }
|
318
315
|
.trix-content [dir=rtl] blockquote,
|
319
316
|
.trix-content blockquote[dir=rtl] {
|
320
|
-
|
317
|
+
border-width: 0;
|
318
|
+
border-right-width: 0.3em;
|
319
|
+
margin-right: 0.3em;
|
320
|
+
padding-right: 0.6em; }
|
321
321
|
.trix-content li {
|
322
|
-
|
322
|
+
margin-left: 1em; }
|
323
323
|
.trix-content [dir=rtl] li {
|
324
|
-
|
324
|
+
margin-right: 1em; }
|
325
325
|
.trix-content pre {
|
326
|
-
|
326
|
+
display: inline-block;
|
327
|
+
width: 100%;
|
328
|
+
vertical-align: top;
|
329
|
+
font-family: monospace;
|
330
|
+
font-size: 0.9em;
|
331
|
+
padding: 0.5em;
|
332
|
+
white-space: pre;
|
333
|
+
background-color: #eee;
|
334
|
+
overflow-x: auto; }
|
327
335
|
.trix-content img {
|
328
336
|
max-width: 100%;
|
329
337
|
height: auto; }
|
@@ -1,7 +1,7 @@
|
|
1
1
|
|
2
2
|
<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
|
3
3
|
<div id="card-obfuscation" style="display:none">
|
4
|
-
<%= pb_rails("card", props: { margin_top: "md"
|
4
|
+
<%= pb_rails("card", props: { margin_top: "md" }) do %>
|
5
5
|
<div id="content-preview" class="trix-content">
|
6
6
|
</div>
|
7
7
|
<% end %>
|
@@ -11,25 +11,15 @@
|
|
11
11
|
<% end %>
|
12
12
|
|
13
13
|
<script>
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
14
|
+
// Button event handler
|
15
|
+
const button = document.getElementById('preview-button');
|
16
|
+
button.addEventListener('click', function() {
|
17
|
+
const content = document.getElementById('content-preview-editor');
|
18
|
+
const previewArea = document.getElementById('content-preview');
|
19
|
+
const cardDiv = document.getElementById('card-obfuscation');
|
18
20
|
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
const editorContent = inputElement?.value || ''
|
24
|
-
const previewArea = document.getElementById('content-preview')
|
25
|
-
const cardDiv = document.getElementById('card-obfuscation')
|
26
|
-
|
27
|
-
if (previewArea && cardDiv) {
|
28
|
-
previewArea.innerHTML = editorContent
|
29
|
-
cardDiv.style.display = 'block'
|
30
|
-
}
|
31
|
-
}
|
32
|
-
|
33
|
-
document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
|
34
|
-
})
|
21
|
+
previewArea.innerHTML = content.value;
|
22
|
+
cardDiv.classList.add('mt_md');
|
23
|
+
cardDiv.style.display = 'block';
|
24
|
+
});
|
35
25
|
</script>
|