Skip to content

Commit c344ac7

Browse files
cjpaiscjpais
authored
Merge pull request #712 from corebonts/button-arrangement
Unify button look and rearrange buttons to make them more compact
2 parents 0e529dd + 43d8f44 commit c344ac7

File tree

6 files changed

+71
-126
lines changed

6 files changed

+71
-126
lines changed

‎llamafile/server/www/chatbot.css‎

Lines changed: 54 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ p {
4545
.chat-header h1 {
4646
font-size: 2rem;
4747
color: #212529;
48+
word-break: break-word;
4849
}
4950

5051
.chat-header img {
@@ -172,40 +173,79 @@ ul li:first-child {
172173
background-color: transparent;
173174
}
174175

175-
.chat-input:focus {
176+
.chat-input:focus,
177+
#completions-input:focus {
176178
border-color: #86b7fe;
177179
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
178180
}
179181

180-
.send-button {
181-
padding: 0.75rem 1.5rem;
182-
background: #0d6efd;
182+
.chat-input-container button,
183+
.menu-trigger,
184+
.completions-content button {
185+
display: flex;
186+
align-items: center;
187+
justify-content: center;
183188
color: white;
184189
border: none;
185190
border-radius: 6px;
186191
cursor: pointer;
192+
transition: color 0.2s;
193+
}
194+
195+
.chat-input-button-container {
196+
display: flex;
197+
flex-direction: column;
198+
align-self: flex-end;
199+
gap: 0.5em;
200+
}
201+
202+
.chat-input-button-container button img,
203+
.menu-trigger img,
204+
.completions-controls img {
205+
width: 24px;
206+
height: 24px;
207+
}
208+
209+
.chat-input-button-row {
210+
display: flex;
211+
gap: 0.5rem;
212+
}
213+
214+
.chat-input-button-row button,
215+
.menu-trigger,
216+
.completions-controls button {
217+
padding: 0.5rem .5rem;
218+
background: #9299a0;
219+
}
220+
221+
.chat-input-button-row button:hover,
222+
.menu-trigger:hover,
223+
.completions-controls button:hover {
224+
background: #5c636a;
225+
}
226+
227+
.send-button,
228+
button.complete-button {
229+
padding: 0.75rem 1.5rem;
230+
background: #0d6efd;
187231
font-size: 1rem;
188-
transition: background-color 0.2s;
189232
}
190233

191-
.send-button:hover {
234+
.send-button:hover,
235+
button.complete-button:hover {
192236
background: #0b5ed7;
193237
}
194238

195-
.send-button:disabled {
239+
.send-button:disabled,
240+
button.complete-button:disabled {
196241
background: #6c757d;
197242
cursor: not-allowed;
198243
}
199244

200245
.stop-button {
201246
padding: 0.75rem 1.5rem;
202247
background: #dc3545;
203-
color: white;
204-
border: none;
205-
border-radius: 6px;
206-
cursor: pointer;
207248
font-size: 1rem;
208-
transition: background-color 0.2s;
209249
}
210250

211251
.stop-button:hover {
@@ -268,37 +308,6 @@ ul li:first-child {
268308
display: block;
269309
}
270310

271-
.redo-button {
272-
padding: 0.5rem .5rem;
273-
background: #6c757d;
274-
color: white;
275-
padding: 8px;
276-
border: none;
277-
border-radius: 6px;
278-
cursor: pointer;
279-
font-size: 20px;
280-
transition: color 0.2s;
281-
}
282-
283-
.redo-button:hover {
284-
background: #5c636a;
285-
}
286-
287-
.settings-button {
288-
padding: 0.5rem .5rem;
289-
background: #6c757d;
290-
color: white;
291-
border: none;
292-
border-radius: 6px;
293-
cursor: pointer;
294-
font-size: 1rem;
295-
transition: background-color 0.2s;
296-
}
297-
298-
.settings-button:hover {
299-
background: #5c636a;
300-
}
301-
302311
.settings-modal {
303312
position: fixed;
304313
top: 0;
@@ -464,46 +473,14 @@ ul li:first-child {
464473
font-size: 1rem;
465474
font-family: inherit;
466475
resize: none;
476+
outline: none ;
467477
}
468478

469479
.completions-controls {
470480
display: flex;
471481
gap: 0.5rem;
472482
}
473483

474-
.complete-button {
475-
padding: 0.75rem 1.5rem;
476-
background: #0d6efd;
477-
color: white;
478-
border: none;
479-
border-radius: 6px;
480-
cursor: pointer;
481-
font-size: 1rem;
482-
transition: background-color 0.2s;
483-
}
484-
485-
.complete-button:hover {
486-
background: #0b5ed7;
487-
}
488-
489-
.upload-button {
490-
padding: 0.5rem .5rem;
491-
background: #6c757d;
492-
color: white;
493-
border: none;
494-
border-radius: 6px;
495-
cursor: pointer;
496-
transition: color 0.2s;
497-
}
498-
499-
.upload-button img {
500-
vertical-align: middle;
501-
}
502-
503-
.upload-button:hover {
504-
background: #5c636a;
505-
}
506-
507484
.mode-dropdown {
508485
display: none;
509486
}
@@ -527,20 +504,7 @@ ul li:first-child {
527504
.menu-dropdown {
528505
position: relative;
529506
display: inline-block;
530-
}
531-
532-
.menu-trigger {
533-
padding: 0.5rem;
534-
background: transparent;
535-
border: none;
536-
cursor: pointer;
537-
font-size: 0.8rem;
538-
color: #666;
539-
transition: color 0.2s;
540-
}
541-
542-
.menu-trigger:hover {
543-
color: #000;
507+
align-self: flex-start;
544508
}
545509

546510
.menu {

‎llamafile/server/www/gear.svg‎

Lines changed: 1 addition & 4 deletions
Loading

‎llamafile/server/www/index.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h1>
1616
<span id="model">loading...</span>
1717
</h1>
1818
<div class="menu-dropdown">
19-
<button class="menu-trigger">▼</button>
19+
<button class="menu-trigger"><img src="menu.svg" alt="[menu]"></button>
2020
<div class="menu">
2121
<button class="menu-item" id="chat-mode-switch">Switch to Completions Mode</button>
2222
</div>
@@ -34,12 +34,16 @@ <h1>
3434
</div>
3535
<div class="chat-input-container noprint">
3636
<textarea class="chat-input" id="chat-input" placeholder="Type your message..." rows="1" autocomplete="off"></textarea>
37-
<button class="send-button" id="send-button">Send</button>
38-
<button class="stop-button" id="stop-button" style="display:none">Stop</button>
39-
<button class="settings-button" id="settings-button" title="Settings"><img src="gear.svg" alt="[settings]" width="30" height="30"></button>
40-
<button class="redo-button" id="redo-button" title="Redo last message"><img src="redo.svg" alt="[redo]" width="30" height="30"></button>
41-
<button class="upload-button" id="upload-button" title="Upload"><img src="upload.svg" alt="[upload]" width="30" height="30"></button>
42-
<input type="file" id="file-upload" style="display: none">
37+
<div class="chat-input-button-container">
38+
<button class="send-button" id="send-button">Send</button>
39+
<button class="stop-button" id="stop-button" style="display:none">Stop</button>
40+
<div class="chat-input-button-row">
41+
<button class="settings-button" id="settings-button" title="Settings"><img src="gear.svg" alt="[settings]"></button>
42+
<button class="redo-button" id="redo-button" title="Redo last message"><img src="redo.svg" alt="[redo]"></button>
43+
<button class="upload-button" id="upload-button" title="Upload"><img src="upload.svg" alt="[upload]" ></button>
44+
<input type="file" id="file-upload" style="display: none">
45+
</div>
46+
</div>
4347
</div>
4448
</div>
4549

@@ -50,7 +54,7 @@ <h1>
5054
<span id="model-completions">llamafile</span>
5155
</h1>
5256
<div class="menu-dropdown">
53-
<button class="menu-trigger">▼</button>
57+
<button class="menu-trigger"><img src="menu.svg" alt="[menu]"></button>
5458
<div class="menu">
5559
<button class="menu-item" id="completions-mode-switch">Switch to Chat Mode</button>
5660
</div>
@@ -61,7 +65,7 @@ <h1>
6165
<div class="completions-controls">
6266
<button class="complete-button" id="complete-button">Complete</button>
6367
<button class="stop-button" id="completions-stop-button" style="display:none">Stop</button>
64-
<button class="settings-button" id="completions-settings-button" title="Settings">⚙️</button>
68+
<button class="settings-button" id="completions-settings-button" title="Settings"><img src="gear.svg" alt="[settings]"></button>
6569
</div>
6670
</div>
6771
</div>

‎llamafile/server/www/menu.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎llamafile/server/www/redo.svg‎

Lines changed: 1 addition & 19 deletions
Loading

‎llamafile/server/www/upload.svg‎

Lines changed: 1 addition & 4 deletions
Loading

0 commit comments

Comments
 (0)