solara 0.2.2 → 0.2.4
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/bin/solara +2 -2
- data/solara/lib/core/aliases/alias_generator.rb +231 -57
- data/solara/lib/core/aliases/{solara_terminal_setup.rb → terminal_setup.rb} +69 -34
- data/solara/lib/core/brands/brands_manager.rb +15 -0
- data/solara/lib/core/dashboard/brand/BrandDetailView.js +1 -0
- data/solara/lib/core/dashboard/brand/brand.html +131 -132
- data/solara/lib/core/dashboard/brand/source/BrandRemoteSource.js +4 -4
- data/solara/lib/core/dashboard/brands/brands.html +79 -79
- data/solara/lib/core/dashboard/component/AddFieldSheet.js +105 -142
- data/solara/lib/core/dashboard/component/AliasesBottomSheet.js +85 -79
- data/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js +68 -67
- data/solara/lib/core/dashboard/component/ConfirmationDialog.js +66 -64
- data/solara/lib/core/dashboard/component/MessageBottomSheet.js +48 -48
- data/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js +128 -125
- data/solara/lib/core/dashboard/dashboard_server.rb +1 -1
- data/solara/lib/core/dashboard/handler/brand_alisases_handler.rb +1 -1
- data/solara/lib/core/dashboard/handler/brand_configurations_manager.rb +2 -2
- data/solara/lib/core/dashboard/handler/brand_icon_handler.rb +1 -1
- data/solara/lib/core/doctor/doctor_manager.rb +15 -1
- data/solara/lib/core/scripts/file_path.rb +9 -1
- data/solara/lib/core/scripts/solara_status_manager.rb +4 -0
- data/solara/lib/core/solara_configurator.rb +1 -1
- data/solara/lib/solara/version.rb +1 -1
- data/solara/lib/solara.rb +4 -2
- metadata +4 -5
- data/solara/lib/core/aliases/alias_generator_manager.rb +0 -29
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
--text-color: #333;
|
|
14
14
|
--border-color: #E1E4E8;
|
|
15
15
|
--offboard-color: #dc3545;
|
|
16
|
-
--field-shadow: 0
|
|
16
|
+
--field-shadow: 0 1.4px 3.5px rgba(0, 0, 0, 0.1);
|
|
17
17
|
}
|
|
18
18
|
body {
|
|
19
19
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
@@ -21,49 +21,49 @@
|
|
|
21
21
|
color: var(--text-color);
|
|
22
22
|
line-height: 1.6;
|
|
23
23
|
margin: 0;
|
|
24
|
-
padding-top:
|
|
24
|
+
padding-top: 77px;
|
|
25
25
|
}
|
|
26
26
|
.container {
|
|
27
|
-
max-width:
|
|
27
|
+
max-width: 700px;
|
|
28
28
|
margin: 0 auto;
|
|
29
|
-
padding:
|
|
29
|
+
padding: 14px;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
h1 {
|
|
33
33
|
margin: 0;
|
|
34
|
-
font-size:
|
|
34
|
+
font-size: 1.75em;
|
|
35
35
|
}
|
|
36
36
|
.brand-list {
|
|
37
|
-
max-width:
|
|
37
|
+
max-width: 490px;
|
|
38
38
|
margin: 0 auto;
|
|
39
39
|
}
|
|
40
40
|
.brand-item {
|
|
41
41
|
background-color: #fff;
|
|
42
|
-
border-radius:
|
|
43
|
-
box-shadow: 0
|
|
44
|
-
padding:
|
|
42
|
+
border-radius: 8.4px;
|
|
43
|
+
box-shadow: 0 2.8px 4.2px rgba(0, 0, 0, 0.1);
|
|
44
|
+
padding: 14px;
|
|
45
45
|
display: flex;
|
|
46
46
|
align-items: center;
|
|
47
47
|
cursor: pointer;
|
|
48
48
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
49
|
-
margin-bottom:
|
|
49
|
+
margin-bottom: 14px;
|
|
50
50
|
position: relative;
|
|
51
51
|
overflow: hidden;
|
|
52
52
|
}
|
|
53
53
|
.brand-item:hover {
|
|
54
|
-
transform: translateY(-5px);
|
|
55
|
-
box-shadow: 0
|
|
54
|
+
transform: translateY(-3.5px);
|
|
55
|
+
box-shadow: 0 4.2px 8.4px rgba(0, 0, 0, 0.15);
|
|
56
56
|
}
|
|
57
57
|
.brand-image {
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
58
|
+
width: 56px;
|
|
59
|
+
height: 56px;
|
|
60
60
|
display: flex;
|
|
61
61
|
justify-content: center;
|
|
62
62
|
align-items: center;
|
|
63
|
-
margin-right:
|
|
64
|
-
border-radius:
|
|
63
|
+
margin-right: 14px;
|
|
64
|
+
border-radius: 8.4px;
|
|
65
65
|
overflow: hidden;
|
|
66
|
-
box-shadow: 0
|
|
66
|
+
box-shadow: 0 1.4px 3.5px rgba(0, 0, 0, 0.1);
|
|
67
67
|
}
|
|
68
68
|
.brand-image img {
|
|
69
69
|
width: 100%;
|
|
@@ -74,13 +74,13 @@
|
|
|
74
74
|
flex-grow: 1;
|
|
75
75
|
}
|
|
76
76
|
.brand-name {
|
|
77
|
-
font-size:
|
|
77
|
+
font-size: 14px;
|
|
78
78
|
font-weight: bold;
|
|
79
|
-
margin-bottom: 5px;
|
|
79
|
+
margin-bottom: 3.5px;
|
|
80
80
|
color: var(--primary-color);
|
|
81
81
|
}
|
|
82
82
|
.brand-key {
|
|
83
|
-
font-size:
|
|
83
|
+
font-size: 9.8px;
|
|
84
84
|
color: #7f8c8d;
|
|
85
85
|
}
|
|
86
86
|
.brand-actions {
|
|
@@ -91,63 +91,63 @@
|
|
|
91
91
|
background-color: var(--primary-color);
|
|
92
92
|
color: white;
|
|
93
93
|
border: none;
|
|
94
|
-
padding:
|
|
95
|
-
border-radius: 5px;
|
|
94
|
+
padding: 7px 14px;
|
|
95
|
+
border-radius: 3.5px;
|
|
96
96
|
cursor: pointer;
|
|
97
|
-
font-size:
|
|
97
|
+
font-size: 11.2px;
|
|
98
98
|
transition: background-color 0.3s ease;
|
|
99
|
-
margin-right:
|
|
100
|
-
min-width:
|
|
99
|
+
margin-right: 10.5px;
|
|
100
|
+
min-width: 91px;
|
|
101
101
|
}
|
|
102
102
|
.switch-button:hover {
|
|
103
103
|
background-color: #3a7bc8;
|
|
104
104
|
}
|
|
105
105
|
.overflow-menu {
|
|
106
106
|
cursor: pointer;
|
|
107
|
-
font-size:
|
|
107
|
+
font-size: 14px;
|
|
108
108
|
color: #7f8c8d;
|
|
109
109
|
transition: color 0.3s ease;
|
|
110
|
-
padding:
|
|
111
|
-
margin: -
|
|
110
|
+
padding: 7px;
|
|
111
|
+
margin: -7px;
|
|
112
112
|
}
|
|
113
113
|
.overflow-menu:hover {
|
|
114
114
|
color: var(--primary-color);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.current-brand, .brands-list {
|
|
118
|
-
margin-bottom:
|
|
119
|
-
max-width:
|
|
118
|
+
margin-bottom: 28px;
|
|
119
|
+
max-width: 490px;
|
|
120
120
|
margin-left: auto;
|
|
121
121
|
margin-right: auto;
|
|
122
122
|
}
|
|
123
123
|
.current-brand h2, .brands-list h2 {
|
|
124
|
-
margin: 0 0
|
|
125
|
-
font-size: 1.
|
|
124
|
+
margin: 0 0 14px 0;
|
|
125
|
+
font-size: 1.26em;
|
|
126
126
|
color: var(--primary-color);
|
|
127
127
|
}
|
|
128
128
|
.section-title {
|
|
129
|
-
font-size: 1.
|
|
129
|
+
font-size: 1.05em;
|
|
130
130
|
color: var(--primary-color);
|
|
131
|
-
margin-bottom:
|
|
131
|
+
margin-bottom: 14px;
|
|
132
132
|
text-align: center;
|
|
133
133
|
}
|
|
134
134
|
.brands-list-header {
|
|
135
135
|
display: flex;
|
|
136
136
|
justify-content: space-between;
|
|
137
137
|
align-items: center;
|
|
138
|
-
margin-bottom:
|
|
139
|
-
margin-right:
|
|
138
|
+
margin-bottom: 14px;
|
|
139
|
+
margin-right: 28px;
|
|
140
140
|
}
|
|
141
141
|
.onboard-brand-button {
|
|
142
142
|
background-color: var(--primary-color);
|
|
143
143
|
color: white;
|
|
144
144
|
border: none;
|
|
145
|
-
padding:
|
|
146
|
-
border-radius: 5px;
|
|
145
|
+
padding: 7px 14px;
|
|
146
|
+
border-radius: 3.5px;
|
|
147
147
|
cursor: pointer;
|
|
148
|
-
font-size:
|
|
148
|
+
font-size: 11.2px;
|
|
149
149
|
transition: background-color 0.3s ease;
|
|
150
|
-
min-width:
|
|
150
|
+
min-width: 91px;
|
|
151
151
|
}
|
|
152
152
|
.onboard-brand-button:hover {
|
|
153
153
|
background-color: #3a7bc8;
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
.onboard-brand-form {
|
|
156
156
|
display: flex;
|
|
157
157
|
flex-direction: column;
|
|
158
|
-
gap:
|
|
158
|
+
gap: 10.5px;
|
|
159
159
|
}
|
|
160
160
|
.form-group {
|
|
161
161
|
display: flex;
|
|
@@ -164,29 +164,29 @@
|
|
|
164
164
|
.form-group label {
|
|
165
165
|
display: flex;
|
|
166
166
|
align-items: center;
|
|
167
|
-
margin-bottom: 5px;
|
|
167
|
+
margin-bottom: 3.5px;
|
|
168
168
|
font-weight: bold;
|
|
169
169
|
}
|
|
170
170
|
.form-group input {
|
|
171
|
-
padding:
|
|
171
|
+
padding: 7px;
|
|
172
172
|
border: 1px solid var(--border-color);
|
|
173
|
-
border-radius: 5px;
|
|
174
|
-
font-size:
|
|
173
|
+
border-radius: 3.5px;
|
|
174
|
+
font-size: 11.2px;
|
|
175
175
|
}
|
|
176
176
|
.question-icon {
|
|
177
|
-
margin-left: 5px;
|
|
177
|
+
margin-left: 3.5px;
|
|
178
178
|
cursor: pointer;
|
|
179
179
|
color: var(--primary-color);
|
|
180
180
|
}
|
|
181
181
|
.logo {
|
|
182
|
-
width:
|
|
183
|
-
height:
|
|
184
|
-
margin-right:
|
|
185
|
-
filter: drop-shadow(
|
|
182
|
+
width: 52.5px;
|
|
183
|
+
height: 52.5px;
|
|
184
|
+
margin-right: 14px;
|
|
185
|
+
filter: drop-shadow(2.1px 2.1px 2.1px rgba(0, 0, 0, 0.3));
|
|
186
186
|
transition: transform 0.3s ease;
|
|
187
187
|
}
|
|
188
188
|
.logo:hover {
|
|
189
|
-
transform: scale(1.
|
|
189
|
+
transform: scale(1.07);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
.header-container {
|
|
@@ -199,8 +199,8 @@
|
|
|
199
199
|
background-color: var(--primary-color);
|
|
200
200
|
color: white;
|
|
201
201
|
text-align: center;
|
|
202
|
-
padding:
|
|
203
|
-
box-shadow: 0
|
|
202
|
+
padding: 7px 0;
|
|
203
|
+
box-shadow: 0 1.4px 7px rgba(0, 0, 0, 0.1);
|
|
204
204
|
display: flex;
|
|
205
205
|
justify-content: center;
|
|
206
206
|
align-items: center;
|
|
@@ -218,75 +218,75 @@
|
|
|
218
218
|
transform: translateY(-100%);
|
|
219
219
|
}
|
|
220
220
|
.logo {
|
|
221
|
-
width:
|
|
222
|
-
height:
|
|
223
|
-
margin-right:
|
|
224
|
-
filter: drop-shadow(
|
|
221
|
+
width: 35px;
|
|
222
|
+
height: 35px;
|
|
223
|
+
margin-right: 14px;
|
|
224
|
+
filter: drop-shadow(2.1px 2.1px 2.1px rgba(0, 0, 0, 0.3));
|
|
225
225
|
transition: transform 0.3s ease;
|
|
226
226
|
}
|
|
227
227
|
.logo:hover {
|
|
228
|
-
transform: scale(1.
|
|
228
|
+
transform: scale(1.07);
|
|
229
229
|
}
|
|
230
230
|
h1 {
|
|
231
231
|
margin: 0;
|
|
232
|
-
font-size:
|
|
232
|
+
font-size: 1.75em;
|
|
233
233
|
}
|
|
234
234
|
|
|
235
235
|
.search-container {
|
|
236
|
-
margin-top:
|
|
237
|
-
margin-bottom:
|
|
236
|
+
margin-top: 14px;
|
|
237
|
+
margin-bottom: 14px;
|
|
238
238
|
}
|
|
239
239
|
|
|
240
240
|
#brandSearch {
|
|
241
|
-
padding:
|
|
242
|
-
margin-bottom:
|
|
241
|
+
padding: 10.5px;
|
|
242
|
+
margin-bottom: 10.5px;
|
|
243
243
|
border: 1px solid var(--border-color);
|
|
244
|
-
border-radius: 5px;
|
|
245
|
-
font-size:
|
|
244
|
+
border-radius: 3.5px;
|
|
245
|
+
font-size: 11.2px;
|
|
246
246
|
width: 100%;
|
|
247
|
-
max-width:
|
|
247
|
+
max-width: 469px;
|
|
248
248
|
}
|
|
249
249
|
|
|
250
250
|
.brands-list-header {
|
|
251
251
|
display: flex;
|
|
252
252
|
justify-content: space-between;
|
|
253
253
|
align-items: center;
|
|
254
|
-
margin-bottom:
|
|
254
|
+
margin-bottom: 14px;
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
#error-button {
|
|
258
258
|
position: fixed;
|
|
259
|
-
bottom:
|
|
260
|
-
right:
|
|
259
|
+
bottom: 14px;
|
|
260
|
+
right: 14px;
|
|
261
261
|
background-color: #ff4136;
|
|
262
262
|
color: white;
|
|
263
263
|
border: none;
|
|
264
264
|
border-radius: 50%;
|
|
265
|
-
width:
|
|
266
|
-
height:
|
|
267
|
-
font-size:
|
|
265
|
+
width: 42px;
|
|
266
|
+
height: 42px;
|
|
267
|
+
font-size: 16.8px;
|
|
268
268
|
cursor: pointer;
|
|
269
269
|
justify-content: center;
|
|
270
270
|
align-items: center;
|
|
271
|
-
box-shadow: 0
|
|
271
|
+
box-shadow: 0 1.4px 7px rgba(0, 0, 0, 0.2);
|
|
272
272
|
transition: transform 0.2s;
|
|
273
273
|
display: none;
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
#error-button:hover {
|
|
277
|
-
transform: scale(1.
|
|
277
|
+
transform: scale(1.07);
|
|
278
278
|
}
|
|
279
279
|
|
|
280
280
|
.count {
|
|
281
281
|
position: absolute;
|
|
282
|
-
top: -5px;
|
|
283
|
-
right: -5px;
|
|
282
|
+
top: -3.5px;
|
|
283
|
+
right: -3.5px;
|
|
284
284
|
background-color: #ffdc00;
|
|
285
285
|
color: #111;
|
|
286
286
|
border-radius: 50%;
|
|
287
|
-
width:
|
|
288
|
-
height:
|
|
289
|
-
font-size:
|
|
287
|
+
width: 16.8px;
|
|
288
|
+
height: 16.8px;
|
|
289
|
+
font-size: 9.8px;
|
|
290
290
|
font-weight: bold;
|
|
291
291
|
display: flex;
|
|
292
292
|
justify-content: center;
|
|
@@ -17,150 +17,113 @@ class AddFieldSheet extends HTMLElement {
|
|
|
17
17
|
|
|
18
18
|
render() {
|
|
19
19
|
this.shadowRoot.innerHTML = `
|
|
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
|
-
border-radius: 4px;
|
|
109
|
-
cursor: pointer;
|
|
110
|
-
transition: background-color 0.3s ease;
|
|
111
|
-
}
|
|
112
|
-
.add-field-button:hover {
|
|
113
|
-
background-color: #3A7BC8;
|
|
114
|
-
}
|
|
115
|
-
.color-picker-container {
|
|
116
|
-
display: none;
|
|
117
|
-
margin-top: 10px;
|
|
118
|
-
}
|
|
119
|
-
#fieldValue[type="color"] {
|
|
120
|
-
-webkit-appearance: none;
|
|
121
|
-
border: none;
|
|
122
|
-
width: 32px;
|
|
123
|
-
height: 32px;
|
|
124
|
-
cursor: pointer;
|
|
125
|
-
}
|
|
126
|
-
#fieldValue[type="color"]::-webkit-color-swatch-wrapper {
|
|
127
|
-
padding: 0;
|
|
128
|
-
}
|
|
129
|
-
#fieldValue[type="color"]::-webkit-color-swatch {
|
|
130
|
-
border: none;
|
|
131
|
-
}
|
|
132
|
-
#colorPicker {
|
|
133
|
-
-webkit-appearance: none; /* Remove default styling */
|
|
134
|
-
border: none; /* No border */
|
|
135
|
-
width: 100%; /* Set a fixed width */
|
|
136
|
-
height: 60px; /* Increase the height */
|
|
137
|
-
cursor: pointer; /* Pointer cursor on hover */
|
|
138
|
-
border-radius: 4px; /* Optional: Rounded corners */
|
|
139
|
-
}
|
|
20
|
+
<style>
|
|
21
|
+
.bottom-sheet {
|
|
22
|
+
position: fixed;
|
|
23
|
+
bottom: -100%;
|
|
24
|
+
left: 0;
|
|
25
|
+
right: 0;
|
|
26
|
+
background-color: white;
|
|
27
|
+
padding: 21px;
|
|
28
|
+
box-shadow: 0 -3.5px 14px rgba(0, 0, 0, 0.2);
|
|
29
|
+
transition: bottom 0.3s ease-out;
|
|
30
|
+
z-index: 1000;
|
|
31
|
+
border-top-left-radius: 17.5px;
|
|
32
|
+
border-top-right-radius: 17.5px;
|
|
33
|
+
height: 42vh;
|
|
34
|
+
max-height: 350px;
|
|
35
|
+
overflow-y: auto;
|
|
36
|
+
max-width: 420px;
|
|
37
|
+
margin: 0 auto;
|
|
38
|
+
}
|
|
39
|
+
.bottom-sheet.show {
|
|
40
|
+
bottom: 0;
|
|
41
|
+
}
|
|
42
|
+
.bottom-sheet h3 {
|
|
43
|
+
color: var(--primary-color);
|
|
44
|
+
margin-top: 0;
|
|
45
|
+
margin-bottom: 14px;
|
|
46
|
+
font-size: 16.8px;
|
|
47
|
+
}
|
|
48
|
+
.overlay {
|
|
49
|
+
display: none;
|
|
50
|
+
position: fixed;
|
|
51
|
+
top: 0;
|
|
52
|
+
left: 0;
|
|
53
|
+
right: 0;
|
|
54
|
+
bottom: 0;
|
|
55
|
+
background: rgba(0, 0, 0, 0.5);
|
|
56
|
+
z-index: 999;
|
|
57
|
+
}
|
|
58
|
+
.show {
|
|
59
|
+
display: block;
|
|
60
|
+
}
|
|
61
|
+
.form-group {
|
|
62
|
+
margin-bottom: 14px;
|
|
63
|
+
}
|
|
64
|
+
.form-group label {
|
|
65
|
+
display: block;
|
|
66
|
+
margin-bottom: 5.6px;
|
|
67
|
+
font-weight: bold;
|
|
68
|
+
font-size: 11.2px;
|
|
69
|
+
}
|
|
70
|
+
.form-group input {
|
|
71
|
+
width: 100%;
|
|
72
|
+
padding: 8.4px;
|
|
73
|
+
border: 1px solid var(--border-color);
|
|
74
|
+
border-radius: 2.8px;
|
|
75
|
+
font-size: 11.2px;
|
|
76
|
+
}
|
|
77
|
+
.add-field-button {
|
|
78
|
+
width: 100%;
|
|
79
|
+
padding: 10.5px;
|
|
80
|
+
font-size: 12.6px;
|
|
81
|
+
background-color: var(--primary-color);
|
|
82
|
+
color: white;
|
|
83
|
+
border: none;
|
|
84
|
+
border-radius: 2.8px;
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
transition: background-color 0.3s ease;
|
|
87
|
+
}
|
|
88
|
+
.add-field-button:hover {
|
|
89
|
+
background-color: #3A7BC8;
|
|
90
|
+
}
|
|
91
|
+
.color-picker-container {
|
|
92
|
+
display: none;
|
|
93
|
+
margin-top: 7px;
|
|
94
|
+
}
|
|
95
|
+
#colorPicker {
|
|
96
|
+
-webkit-appearance: none;
|
|
97
|
+
border: none;
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 42px;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
border-radius: 2.8px;
|
|
102
|
+
}
|
|
103
|
+
#colorPicker::-webkit-color-swatch {
|
|
104
|
+
border: none;
|
|
105
|
+
border-radius: 2.8px;
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
140
108
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
<
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
<div class="form-group">
|
|
155
|
-
<label for="fieldValue">Field Value</label>
|
|
156
|
-
<input type="text" id="fieldValue" name="fieldValue" required>
|
|
157
|
-
<div class="color-picker-container">
|
|
158
|
-
<input type="color" id="colorPicker" name="colorPicker">
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
<button type="submit" class="add-field-button">Add Field</button>
|
|
162
|
-
</form>
|
|
109
|
+
<div id="overlay" class="overlay"></div>
|
|
110
|
+
<div class="bottom-sheet" id="addFieldSheet">
|
|
111
|
+
<h3>Add New Field</h3>
|
|
112
|
+
<form id="addFieldForm">
|
|
113
|
+
<div class="form-group">
|
|
114
|
+
<label for="fieldName">Field Name</label>
|
|
115
|
+
<input type="text" id="fieldName" name="fieldName" required>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="form-group">
|
|
118
|
+
<label for="fieldValue">Field Value</label>
|
|
119
|
+
<input type="text" id="fieldValue" name="fieldValue" required>
|
|
120
|
+
<div class="color-picker-container">
|
|
121
|
+
<input type="color" id="colorPicker" name="colorPicker">
|
|
163
122
|
</div>
|
|
123
|
+
</div>
|
|
124
|
+
<button type="submit" class="add-field-button">Add Field</button>
|
|
125
|
+
</form>
|
|
126
|
+
</div>
|
|
164
127
|
`;
|
|
165
128
|
}
|
|
166
129
|
|