solara 0.2.2 → 0.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/solara/lib/core/aliases/alias_generator.rb +231 -57
  3. data/solara/lib/core/aliases/{solara_terminal_setup.rb → terminal_setup.rb} +69 -34
  4. data/solara/lib/core/brands/brands_manager.rb +15 -0
  5. data/solara/lib/core/dashboard/brand/BrandDetailView.js +1 -0
  6. data/solara/lib/core/dashboard/brand/brand.html +131 -132
  7. data/solara/lib/core/dashboard/brand/source/BrandRemoteSource.js +4 -4
  8. data/solara/lib/core/dashboard/brands/brands.html +79 -79
  9. data/solara/lib/core/dashboard/component/AddFieldSheet.js +105 -142
  10. data/solara/lib/core/dashboard/component/AliasesBottomSheet.js +85 -79
  11. data/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js +68 -67
  12. data/solara/lib/core/dashboard/component/ConfirmationDialog.js +66 -64
  13. data/solara/lib/core/dashboard/component/MessageBottomSheet.js +48 -48
  14. data/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js +128 -125
  15. data/solara/lib/core/dashboard/dashboard_server.rb +1 -1
  16. data/solara/lib/core/dashboard/handler/brand_alisases_handler.rb +1 -1
  17. data/solara/lib/core/dashboard/handler/brand_configurations_manager.rb +2 -2
  18. data/solara/lib/core/dashboard/handler/brand_icon_handler.rb +1 -1
  19. data/solara/lib/core/doctor/doctor_manager.rb +15 -1
  20. data/solara/lib/core/scripts/file_path.rb +9 -1
  21. data/solara/lib/core/scripts/solara_status_manager.rb +4 -0
  22. data/solara/lib/core/solara_configurator.rb +1 -1
  23. data/solara/lib/solara/version.rb +1 -1
  24. data/solara/lib/solara.rb +4 -2
  25. metadata +4 -5
  26. data/solara/lib/core/aliases/alias_generator_manager.rb +0 -29
data/solara/lib/core/dashboard/brands/brands.html CHANGED
@@ -13,7 +13,7 @@
13
13
  --text-color: #333;
14
14
  --border-color: #E1E4E8;
15
15
  --offboard-color: #dc3545;
16
- --field-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
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: 110px;
24
+ padding-top: 77px;
25
25
  }
26
26
  .container {
27
- max-width: 1000px;
27
+ max-width: 700px;
28
28
  margin: 0 auto;
29
- padding: 20px;
29
+ padding: 14px;
30
30
  }
31
31
 
32
32
  h1 {
33
33
  margin: 0;
34
- font-size: 2.5em;
34
+ font-size: 1.75em;
35
35
  }
36
36
  .brand-list {
37
- max-width: 700px;
37
+ max-width: 490px;
38
38
  margin: 0 auto;
39
39
  }
40
40
  .brand-item {
41
41
  background-color: #fff;
42
- border-radius: 12px;
43
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
44
- padding: 20px;
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: 20px;
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 6px 12px rgba(0, 0, 0, 0.15);
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: 80px;
59
- height: 80px;
58
+ width: 56px;
59
+ height: 56px;
60
60
  display: flex;
61
61
  justify-content: center;
62
62
  align-items: center;
63
- margin-right: 20px;
64
- border-radius: 12px;
63
+ margin-right: 14px;
64
+ border-radius: 8.4px;
65
65
  overflow: hidden;
66
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
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: 20px;
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: 14px;
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: 10px 20px;
95
- border-radius: 5px;
94
+ padding: 7px 14px;
95
+ border-radius: 3.5px;
96
96
  cursor: pointer;
97
- font-size: 16px;
97
+ font-size: 11.2px;
98
98
  transition: background-color 0.3s ease;
99
- margin-right: 15px;
100
- min-width: 130px;
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: 20px;
107
+ font-size: 14px;
108
108
  color: #7f8c8d;
109
109
  transition: color 0.3s ease;
110
- padding: 10px;
111
- margin: -10px;
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: 40px;
119
- max-width: 700px;
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 20px 0;
125
- font-size: 1.8em;
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.5em;
129
+ font-size: 1.05em;
130
130
  color: var(--primary-color);
131
- margin-bottom: 20px;
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: 20px;
139
- margin-right: 40px;
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: 10px 20px;
146
- border-radius: 5px;
145
+ padding: 7px 14px;
146
+ border-radius: 3.5px;
147
147
  cursor: pointer;
148
- font-size: 16px;
148
+ font-size: 11.2px;
149
149
  transition: background-color 0.3s ease;
150
- min-width: 130px;
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: 15px;
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: 10px;
171
+ padding: 7px;
172
172
  border: 1px solid var(--border-color);
173
- border-radius: 5px;
174
- font-size: 16px;
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: 75px;
183
- height: 75px;
184
- margin-right: 20px;
185
- filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
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.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: 10px 0;
203
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
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: 50px;
222
- height: 50px;
223
- margin-right: 20px;
224
- filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
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.1);
228
+ transform: scale(1.07);
229
229
  }
230
230
  h1 {
231
231
  margin: 0;
232
- font-size: 2.5em;
232
+ font-size: 1.75em;
233
233
  }
234
234
 
235
235
  .search-container {
236
- margin-top: 20px;
237
- margin-bottom: 20px;
236
+ margin-top: 14px;
237
+ margin-bottom: 14px;
238
238
  }
239
239
 
240
240
  #brandSearch {
241
- padding: 15px;
242
- margin-bottom: 15px;
241
+ padding: 10.5px;
242
+ margin-bottom: 10.5px;
243
243
  border: 1px solid var(--border-color);
244
- border-radius: 5px;
245
- font-size: 16px;
244
+ border-radius: 3.5px;
245
+ font-size: 11.2px;
246
246
  width: 100%;
247
- max-width: 670px;
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: 20px;
254
+ margin-bottom: 14px;
255
255
  }
256
256
 
257
257
  #error-button {
258
258
  position: fixed;
259
- bottom: 20px;
260
- right: 20px;
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: 60px;
266
- height: 60px;
267
- font-size: 24px;
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 2px 10px rgba(0, 0, 0, 0.2);
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.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: 24px;
288
- height: 24px;
289
- font-size: 14px;
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;
data/solara/lib/core/dashboard/component/AddFieldSheet.js CHANGED
@@ -17,150 +17,113 @@ class AddFieldSheet extends HTMLElement {
17
17
 
18
18
  render() {
19
19
  this.shadowRoot.innerHTML = `
20
- <style>
21
- .bottom-sheet {
22
- position: fixed;
23
- bottom: -100%;
24
- left: 0;
25
- right: 0;
26
- background-color: white;
27
- padding: 30px;
28
- box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
29
- transition: bottom 0.3s ease-out;
30
- z-index: 1000;
31
- border-top-left-radius: 25px;
32
- border-top-right-radius: 25px;
33
- height: 60vh;
34
- max-height: 500px;
35
- overflow-y: auto;
36
- max-width: 600px;
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: 20px;
46
- font-size: 24px;
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: 20px;
63
- }
64
- .form-group label {
65
- display: block;
66
- margin-bottom: 8px;
67
- font-weight: bold;
68
- }
69
- .form-group input {
70
- width: 100%;
71
- padding: 12px;
72
- border: 1px solid var(--border-color);
73
- border-radius: 4px;
74
- font-size: 16px;
75
- }
76
- .tooltip {
77
- position: relative;
78
- display: inline-block;
79
- margin-left: 5px;
80
- }
81
- .tooltip .tooltiptext {
82
- visibility: hidden;
83
- width: 200px;
84
- background-color: #555;
85
- color: #fff;
86
- text-align: center;
87
- border-radius: 6px;
88
- padding: 5px;
89
- position: absolute;
90
- z-index: 1;
91
- bottom: 125%;
92
- left: 50%;
93
- transform: translateX(-50%);
94
- opacity: 0;
95
- transition: opacity 0.3s;
96
- }
97
- .tooltip:hover .tooltiptext {
98
- visibility: visible;
99
- opacity: 1;
100
- }
101
- .add-field-button {
102
- width: 100%;
103
- padding: 15px;
104
- font-size: 18px;
105
- background-color: var(--primary-color);
106
- color: white;
107
- border: none;
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
- #colorPicker::-webkit-color-swatch {
142
- border: none; /* No border on the color swatch */
143
- border-radius: 4px; /* Optional: Rounded corners */
144
- }
145
- </style>
146
- <div id="overlay" class="overlay"></div>
147
- <div class="bottom-sheet" id="addFieldSheet">
148
- <h3>Add New Field</h3>
149
- <form id="addFieldForm">
150
- <div class="form-group">
151
- <label for="fieldName">Field Name</label>
152
- <input type="text" id="fieldName" name="fieldName" required>
153
- </div>
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