Skip to content

Commit 7e6b9f3

Browse files
Tim-MaesTim-Maes
committed
Better popup
1 parent 8c2d596 commit 7e6b9f3

File tree

1 file changed

+110
-32
lines changed

1 file changed

+110
-32
lines changed

‎src/popup.html‎

Lines changed: 110 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,51 @@
88
margin: 0;
99
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1010
padding: 12px;
11-
width: 520px;
12-
min-height: 450px;
11+
width: 880px;
12+
height: 700px;
13+
max-height: 700px;
1314
font-size: 14px;
15+
overflow: hidden;
16+
box-sizing: border-box;
1417
}
18+
19+
.container {
20+
display: flex;
21+
flex-direction: column;
22+
height: 100%;
23+
gap: 8px;
24+
}
25+
1526
textarea, pre {
1627
width: 100%;
1728
box-sizing: border-box;
1829
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
1930
font-size: 12px;
2031
}
32+
2133
textarea {
22-
height: 120px;
34+
height: 100px;
2335
border: 1px solid #ccc;
2436
border-radius: 4px;
2537
padding: 8px;
26-
resize: vertical;
27-
margin-bottom: 12px;
38+
resize: none;
39+
flex-shrink: 0;
2840
}
41+
2942
pre {
3043
white-space: pre-wrap;
31-
margin: 8px 0;
44+
margin: 0;
3245
padding: 12px;
3346
background: #f8f9fa;
3447
border: 1px solid #e9ecef;
3548
border-radius: 4px;
36-
max-height: 300px;
3749
overflow-y: auto;
3850
font-size: 11px;
3951
line-height: 1.4;
52+
flex: 1;
53+
min-height: 0;
4054
}
55+
4156
button {
4257
margin-right: 8px;
4358
padding: 8px 16px;
@@ -48,30 +63,53 @@
4863
cursor: pointer;
4964
font-size: 14px;
5065
}
66+
5167
button:hover {
5268
background: #106ebe;
5369
}
70+
71+
.header {
72+
flex-shrink: 0;
73+
}
74+
75+
.input-section {
76+
flex-shrink: 0;
77+
}
78+
5479
.button-row {
55-
margin: 12px 0;
80+
margin: 8px 0;
5681
display: flex;
5782
align-items: center;
5883
gap: 12px;
84+
flex-shrink: 0;
5985
}
86+
6087
.options-row {
6188
margin: 8px 0;
6289
display: flex;
6390
align-items: center;
6491
gap: 16px;
6592
font-size: 13px;
93+
flex-shrink: 0;
6694
}
95+
6796
.option-group {
6897
display: flex;
6998
align-items: center;
7099
gap: 6px;
71100
}
101+
102+
.result-section {
103+
flex: 1;
104+
min-height: 0;
105+
display: flex;
106+
flex-direction: column;
107+
}
108+
72109
input[type="radio"] {
73110
margin: 0;
74111
}
112+
75113
h3 {
76114
margin: 0 0 8px 0;
77115
color: #323130;
@@ -80,48 +118,86 @@
80118
align-items: center;
81119
gap: 8px;
82120
}
121+
83122
.status {
84123
font-size: 12px;
85124
color: #666;
86125
font-weight: normal;
87126
}
127+
88128
.exact-copy {
89129
color: #107c10;
90130
font-weight: 600;
91131
}
132+
92133
.clean-copy {
93134
color: #0078d4;
94135
font-weight: 600;
95136
}
137+
138+
/* Enhanced scrolling for better code visibility */
139+
pre::-webkit-scrollbar {
140+
width: 12px;
141+
}
142+
pre::-webkit-scrollbar-track {
143+
background: #f1f1f1;
144+
border-radius: 6px;
145+
}
146+
pre::-webkit-scrollbar-thumb {
147+
background: #c1c1c1;
148+
border-radius: 6px;
149+
}
150+
pre::-webkit-scrollbar-thumb:hover {
151+
background: #a8a8a8;
152+
}
153+
154+
/* Better labels and spacing */
155+
label {
156+
font-weight: 600;
157+
color: #323130;
158+
margin-bottom: 4px;
159+
display: block;
160+
}
161+
162+
/* Better spacing for the result area */
163+
#result {
164+
margin-top: 4px;
165+
}
96166
</style>
97167
</head>
98168
<body>
99-
<h3>
100-
BlazorSnap - HTML to Blazor
101-
<span class="status" id="mode-status">Exact Visual Copy</span>
102-
</h3>
103-
104-
<label for="source">Selected HTML:</label>
105-
<textarea id="source" placeholder="Right-click an element and select 'Convert Element to Blazor Component'"></textarea>
106-
107-
<div class="options-row">
108-
<div class="option-group">
109-
<input type="radio" id="exact-mode" name="conversion-mode" value="exact" checked>
110-
<label for="exact-mode" class="exact-copy">Exact Visual Copy</label>
169+
<div class="container">
170+
<div class="header">
171+
<h3>
172+
BlazorSnap - HTML to Blazor
173+
<span class="status" id="mode-status">Exact Visual Copy</span>
174+
</h3>
111175
</div>
112-
<div class="option-group">
113-
<input type="radio" id="clean-mode" name="conversion-mode" value="clean">
114-
<label for="clean-mode" class="clean-copy">Clean/Simplified</label>
176+
177+
<div class="input-section">
178+
<label for="source">Selected HTML:</label>
179+
<textarea id="source" placeholder="Right-click an element and select 'Convert Element to Blazor Component'"></textarea>
180+
181+
<div class="options-row">
182+
<div class="option-group">
183+
<input type="radio" id="exact-mode" name="conversion-mode" value="exact" checked>
184+
<label for="exact-mode" class="exact-copy">Exact Visual Copy</label>
185+
</div>
186+
<div class="option-group">
187+
<input type="radio" id="clean-mode" name="conversion-mode" value="clean">
188+
<label for="clean-mode" class="clean-copy">Clean/Simplified</label>
189+
</div>
190+
</div>
191+
192+
<div class="button-row">
193+
<button id="convert">Generate .razor</button>
194+
<button id="copy">Copy to Clipboard</button>
195+
</div>
115196
</div>
116-
</div>
117-
118-
<div class="button-row">
119-
<button id="convert">Generate .razor</button>
120-
<button id="copy">Copy to Clipboard</button>
121-
</div>
122-
123-
<label for="result">Generated Blazor Component:</label>
124-
<pre id="result">// Generated component will appear here...
197+
198+
<div class="result-section">
199+
<label for="result">Generated Blazor Component:</label>
200+
<pre id="result">// Generated component will appear here...
125201
//
126202
// EXACT VISUAL COPY MODE:
127203
// - Preserves all computed styles for identical appearance
@@ -132,6 +208,8 @@ <h3>
132208
// - Converts utility classes to semantic CSS
133209
// - Removes unnecessary attributes
134210
// - Best for maintainable components</pre>
211+
</div>
212+
</div>
135213

136214
<script src="popup.js"></script>
137215
</body>

0 commit comments

Comments
 (0)