Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 7729bac

Browse files
committed
feat(utils): basic frontend test workflow
1 parent 414b9e7 commit 7729bac

File tree

6 files changed

+144
-5
lines changed

6 files changed

+144
-5
lines changed

lib/helper/converter/editor_to_html/class.ex

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,14 @@ defmodule Helper.Converter.EditorToHTML.Class do
3232
"label__warn" => "list-label__warn",
3333
"checklist_item" => "list-checklist__item",
3434
"checklist_checkbox" => "checklist__item-checkbox",
35-
"checklist_checkbox_checked" => "checklist__item-check-sign-active",
35+
"checklist_checkbox_checked" => "checklist__item-check-sign-checked",
3636
"checklist_checksign" => "checklist__item-check-sign",
3737
"text" => "list-item-text",
38-
"checklist_text" => "list-checklist__item-text"
38+
"checklist_text" => "list-checklist__item-text",
39+
"indent_0" => "",
40+
"indent_1" => "list-indent-1",
41+
"indent_2" => "list-indent-2",
42+
"indent_3" => "list-indent-3"
3943
}
4044
}
4145
end

lib/helper/converter/editor_to_html/frags/list.ex

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ defmodule Helper.Converter.EditorToHTML.Frags.List do
2323
text_frag = frag(:checkbox, :text, text)
2424

2525
item_class = @class["checklist_item"]
26+
indent_class = @class["indent_#{indent}"]
2627

27-
~s(<div class="#{item_class}">
28+
~s(<div class="#{item_class} #{indent_class}">
2829
#{checkbox_frag}
2930
#{label_frag}
3031
#{text_frag}

lib/helper/converter/editor_to_html/frontend_test/script.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

lib/helper/converter/editor_to_html/frontend_test/styles.css

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,124 @@ body {
1717
-webkit-font-smoothing: antialiased !important;
1818
}
1919

20+
.article-viewer-wrapper svg {
21+
fill: currentColor;
22+
vertical-align: middle;
23+
max-height: 100%;
24+
}
25+
2026
.article-viewer-wrapper .list-wrapper {
2127
padding: 1.2em 0;
2228
}
29+
30+
.article-viewer-wrapper .list-wrapper .list-checklist__item {
31+
display: flex;
32+
align-items: baseline;
33+
box-sizing: content-box;
34+
position: relative;
35+
}
36+
37+
.article-viewer-wrapper .list-wrapper .list-indent-1 {
38+
margin-left: 30px;
39+
width: calc(100% - 30px);
40+
}
41+
42+
.article-viewer-wrapper .list-wrapper .list-indent-2 {
43+
margin-left: 60px;
44+
width: calc(100% - 60px);
45+
}
46+
47+
.article-viewer-wrapper .list-wrapper .list-indent-3 {
48+
margin-left: 90px;
49+
width: calc(100% - 90px);
50+
}
51+
52+
.article-viewer-wrapper
53+
.list-wrapper
54+
.list-checklist__item
55+
.checklist__item-checkbox {
56+
display: flex;
57+
align-items: center;
58+
position: relative;
59+
margin-right: 15px;
60+
user-select: none;
61+
border: 1px solid #bccfd2;
62+
border-radius: 100%;
63+
height: 15px;
64+
width: 15px;
65+
}
66+
67+
.article-viewer-wrapper
68+
.list-wrapper
69+
.list-checklist__item
70+
.checklist__item-check-sign-checked {
71+
height: 16px;
72+
width: 16px;
73+
background: #6e8f94;
74+
}
75+
76+
.article-viewer-wrapper
77+
.list-wrapper
78+
.list-checklist__item
79+
.checklist__item-check-sign {
80+
outline: none;
81+
margin-top: -3px;
82+
}
83+
84+
.article-viewer-wrapper
85+
.list-wrapper
86+
.list-checklist__item
87+
.checklist__item-check-sign
88+
svg {
89+
fill: #6a8f94;
90+
width: 15px;
91+
height: 15px;
92+
opacity: 0;
93+
}
94+
95+
.article-viewer-wrapper
96+
.list-wrapper
97+
.list-checklist__item
98+
.checklist__item-check-sign-checked
99+
svg {
100+
opacity: 1;
101+
fill: white;
102+
margin-left: 1px;
103+
}
104+
105+
.article-viewer-wrapper .list-label {
106+
font-style: italic;
107+
padding: 2px 8px;
108+
padding-left: 5px;
109+
border-radius: 4px;
110+
margin-right: 10px;
111+
margin-left: -3px;
112+
font-size: 12px;
113+
font-family: sans-serif;
114+
word-break: keep-all;
115+
}
116+
117+
.article-viewer-wrapper .list-label__default {
118+
background: #f0f5f9;
119+
color: #70777c;
120+
}
121+
.article-viewer-wrapper .list-label__red {
122+
background: #fdf2f1;
123+
color: #e66161;
124+
}
125+
.article-viewer-wrapper .list-label__green {
126+
background: #f4ffe7;
127+
color: #86b724;
128+
}
129+
.article-viewer-wrapper .list-label__warn {
130+
background: #fef7e9;
131+
color: #eea564;
132+
}
133+
134+
.article-viewer-wrapper .list-wrapper .list-checklist__item-text {
135+
outline: none;
136+
flex-grow: 1;
137+
padding: 10px 0;
138+
color: #526c73;
139+
word-break: break-all;
140+
}

lib/helper/converter/editor_to_html/validator/editor_schema.ex

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ defmodule Helper.Converter.EditorToHTML.Validator.EditorSchema do
77
# list
88
@valid_list_mode ["checklist", "order_list", "unorder_list"]
99
@valid_list_label_type ["green", "red", "warn", "default"]
10-
@valid_list_indent [0, 1, 2, 3, 4]
10+
@valid_list_indent [0, 1, 2, 3]
1111

1212
def get("editor") do
1313
%{

test/helper/converter/editor_to_html_test/list_test.exs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,22 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.List do
2727
"label" => "label",
2828
"labelType" => "default",
2929
"text" => "list item"
30+
},
31+
%{
32+
"checked" => false,
33+
"hideLabel" => false,
34+
"indent" => 1,
35+
"label" => "green",
36+
"labelType" => "green",
37+
"text" => "list item"
38+
},
39+
%{
40+
"checked" => false,
41+
"hideLabel" => false,
42+
"indent" => 1,
43+
"label" => "red",
44+
"labelType" => "red",
45+
"text" => "list item"
3046
}
3147
]
3248
@editor_json %{

0 commit comments

Comments
 (0)