ciyidogan commited on
Commit
c9df367
·
verified ·
1 Parent(s): b532a8f

Update flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.scss

Browse files
flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.scss CHANGED
@@ -36,6 +36,19 @@
36
  }
37
  }
38
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  .headers-section {
40
  mat-form-field {
41
  width: calc(50% - 8px);
@@ -47,6 +60,66 @@
47
  }
48
  }
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  .add-header-button {
51
  margin-top: 8px;
52
  }
@@ -60,6 +133,59 @@
60
  }
61
  }
62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  .test-section {
64
  .test-url {
65
  margin-bottom: 24px;
@@ -70,32 +196,103 @@
70
  word-break: break-all;
71
  }
72
 
 
 
 
 
73
  .test-actions {
74
  display: flex;
75
  gap: 16px;
76
  margin-bottom: 24px;
77
  }
78
 
79
- .test-results {
80
- border: 1px solid #e0e0e0;
81
- border-radius: 4px;
82
- padding: 16px;
83
- background-color: #fafafa;
84
 
85
- pre {
86
- margin: 0;
87
- white-space: pre-wrap;
88
- word-break: break-word;
89
- }
 
 
 
 
 
 
 
 
 
 
 
 
90
 
91
- &.success {
92
- border-color: #4caf50;
93
- background-color: #f1f8e9;
 
 
 
 
 
 
 
 
94
  }
95
 
96
- &.error {
97
- border-color: #f44336;
 
 
 
98
  background-color: #ffebee;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  }
100
  }
101
  }
@@ -111,6 +308,10 @@
111
  }
112
  }
113
 
 
 
 
 
114
  mat-dialog-actions {
115
  padding: 16px 24px;
116
  margin: 0;
 
36
  }
37
  }
38
 
39
+ .section-header {
40
+ display: flex;
41
+ justify-content: space-between;
42
+ align-items: center;
43
+ margin-bottom: 16px;
44
+
45
+ h4 {
46
+ margin: 0;
47
+ font-size: 16px;
48
+ font-weight: 500;
49
+ }
50
+ }
51
+
52
  .headers-section {
53
  mat-form-field {
54
  width: calc(50% - 8px);
 
60
  }
61
  }
62
 
63
+ .headers-list, .response-mappings-list {
64
+ .header-row, .mapping-row {
65
+ display: flex;
66
+ gap: 16px;
67
+ align-items: flex-start;
68
+ margin-bottom: 16px;
69
+
70
+ mat-form-field {
71
+ flex: 1;
72
+ }
73
+
74
+ .header-value {
75
+ flex: 2;
76
+ }
77
+
78
+ .json-path-field {
79
+ flex: 2;
80
+ }
81
+
82
+ button {
83
+ margin-top: 8px;
84
+ }
85
+ }
86
+ }
87
+
88
+ .empty-state, .empty-state-small {
89
+ text-align: center;
90
+ padding: 24px;
91
+ background-color: #f5f5f5;
92
+ border-radius: 4px;
93
+ margin: 16px 0;
94
+
95
+ mat-icon {
96
+ font-size: 48px;
97
+ width: 48px;
98
+ height: 48px;
99
+ color: #ccc;
100
+ }
101
+
102
+ p {
103
+ margin-top: 16px;
104
+ color: #666;
105
+ }
106
+ }
107
+
108
+ .empty-state-small {
109
+ padding: 16px;
110
+
111
+ mat-icon {
112
+ font-size: 24px;
113
+ width: 24px;
114
+ height: 24px;
115
+ }
116
+
117
+ p {
118
+ margin-top: 8px;
119
+ font-size: 14px;
120
+ }
121
+ }
122
+
123
  .add-header-button {
124
  margin-top: 8px;
125
  }
 
133
  }
134
  }
135
 
136
+ .template-helpers {
137
+ margin-top: 8px;
138
+
139
+ .template-list {
140
+ display: flex;
141
+ flex-wrap: wrap;
142
+ gap: 8px;
143
+ padding: 16px;
144
+ }
145
+
146
+ .template-chip {
147
+ cursor: pointer;
148
+ transition: all 0.2s;
149
+
150
+ &:hover {
151
+ transform: scale(1.05);
152
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
153
+ }
154
+ }
155
+
156
+ .hint-text {
157
+ padding: 16px;
158
+ color: #666;
159
+ font-size: 14px;
160
+ line-height: 1.5;
161
+ }
162
+ }
163
+
164
+ .json-editor {
165
+ position: relative;
166
+
167
+ .json-textarea {
168
+ width: 100%;
169
+ font-family: 'Monaco', 'Consolas', monospace;
170
+ font-size: 13px;
171
+ padding: 12px;
172
+ border: 1px solid #ccc;
173
+ border-radius: 4px;
174
+ background-color: #f8f8f8;
175
+ resize: vertical;
176
+
177
+ &:focus {
178
+ outline: none;
179
+ border-color: #3f51b5;
180
+ background-color: #fff;
181
+ }
182
+ }
183
+
184
+ button {
185
+ margin-top: 8px;
186
+ }
187
+ }
188
+
189
  .test-section {
190
  .test-url {
191
  margin-bottom: 24px;
 
196
  word-break: break-all;
197
  }
198
 
199
+ .test-info {
200
+ margin-bottom: 24px;
201
+ }
202
+
203
  .test-actions {
204
  display: flex;
205
  gap: 16px;
206
  margin-bottom: 24px;
207
  }
208
 
209
+ .test-result {
210
+ margin-top: 24px;
 
 
 
211
 
212
+ .result-status {
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 12px;
216
+ padding: 16px;
217
+ border-radius: 4px;
218
+ margin-bottom: 16px;
219
+
220
+ &.success {
221
+ background-color: #e8f5e9;
222
+ color: #2e7d32;
223
+ }
224
+
225
+ &.error {
226
+ background-color: #ffebee;
227
+ color: #c62828;
228
+ }
229
 
230
+ mat-icon {
231
+ font-size: 28px;
232
+ width: 28px;
233
+ height: 28px;
234
+ }
235
+
236
+ .status-code, .response-time {
237
+ margin-left: auto;
238
+ font-size: 14px;
239
+ opacity: 0.8;
240
+ }
241
  }
242
 
243
+ .error-message {
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 8px;
247
+ padding: 12px;
248
  background-color: #ffebee;
249
+ color: #c62828;
250
+ border-radius: 4px;
251
+ margin-bottom: 16px;
252
+ }
253
+
254
+ .response-section {
255
+ margin-bottom: 16px;
256
+
257
+ h5 {
258
+ margin-bottom: 8px;
259
+ font-size: 14px;
260
+ font-weight: 500;
261
+ }
262
+
263
+ pre {
264
+ padding: 12px;
265
+ background-color: #f5f5f5;
266
+ border-radius: 4px;
267
+ overflow-x: auto;
268
+ font-size: 12px;
269
+ margin: 0;
270
+ white-space: pre-wrap;
271
+ word-break: break-word;
272
+ }
273
+ }
274
+ }
275
+
276
+ .test-note {
277
+ display: flex;
278
+ align-items: flex-start;
279
+ gap: 8px;
280
+ padding: 12px;
281
+ background-color: #e3f2fd;
282
+ border-radius: 4px;
283
+ margin-top: 16px;
284
+
285
+ mat-icon {
286
+ color: #1976d2;
287
+ font-size: 20px;
288
+ width: 20px;
289
+ height: 20px;
290
+ }
291
+
292
+ p {
293
+ margin: 0;
294
+ font-size: 14px;
295
+ color: #1976d2;
296
  }
297
  }
298
  }
 
308
  }
309
  }
310
 
311
+ .auth-settings {
312
+ margin-top: 16px;
313
+ }
314
+
315
  mat-dialog-actions {
316
  padding: 16px 24px;
317
  margin: 0;