chore: remove sketches directory
This commit is contained in:
M57 committed
1 parent
4c075be026
commit
bd5977fc92
1 file changed
-400
@@ -1,400 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ChatInputBar — Layout (v2)</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #888;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
background: rgba(30,30,35,0.92);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 24px;
|
||||
padding: 4px 8px;
|
||||
backdrop-filter: blur(8px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
color: #999;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.icon-btn:hover { background: rgba(255,255,255,0.08); }
|
||||
.icon-btn:disabled { opacity: 0.25; cursor: default; }
|
||||
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
background: var(--btn-bg, rgba(255,255,255,0.08));
|
||||
color: var(--btn-color, #999);
|
||||
}
|
||||
.send-btn.mic { --btn-bg: rgba(255,255,255,0.08); --btn-color: #ccc; }
|
||||
.send-btn.send { --btn-bg: #4f8cff; --btn-color: #fff; }
|
||||
.send-btn.stop { --btn-bg: #e53935; --btn-color: #fff; }
|
||||
|
||||
.input-field {
|
||||
flex: 1;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 20px;
|
||||
background: transparent;
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
outline: none;
|
||||
min-height: 36px;
|
||||
max-height: 120px;
|
||||
transition: border-color 0.15s;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.input-field:focus { border-color: #4f8cff; }
|
||||
.input-field::placeholder { color: #666; }
|
||||
|
||||
.input-field:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.chips-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 4px 12px;
|
||||
max-width: 500px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.10);
|
||||
border-radius: 16px;
|
||||
padding: 4px 6px 4px 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.chip:hover { background: rgba(255,255,255,0.10); }
|
||||
.chip .thumb {
|
||||
width: 20px; height: 20px;
|
||||
border-radius: 4px;
|
||||
background: #333;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
.chip .name {
|
||||
font-size: 12px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #ccc;
|
||||
}
|
||||
.chip .close {
|
||||
width: 18px; height: 18px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chip .close:hover { background: rgba(255,255,255,0.12); }
|
||||
|
||||
/* Dropdown menu */
|
||||
.menu-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.menu {
|
||||
position: absolute;
|
||||
bottom: 36px;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: rgba(42,42,50,0.98);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 4px 0;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
transition: background 0.1s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.menu-item:hover { background: rgba(255,255,255,0.06); }
|
||||
.menu-item .icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
|
||||
|
||||
.variant { margin-bottom: 8px; }
|
||||
|
||||
.note {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.states {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Simple arrow for "tap here" */
|
||||
.tap-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(79,140,255,0.12);
|
||||
color: #7aadff;
|
||||
padding: 2px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2 style="color:#ddd; font-weight:500; font-size:18px; margin-bottom:4px;">📱 ChatInputBar (v2)</h2>
|
||||
<p style="color:#777; font-size:13px; margin-bottom:20px;">
|
||||
Single 📎 attach button → dropdown menu with Camera / Image / File
|
||||
</p>
|
||||
|
||||
<div class="states">
|
||||
|
||||
<!-- 1. Empty + menu open -->
|
||||
<div class="variant">
|
||||
<div class="label">1. Empty — mic visible, dropdown open</div>
|
||||
<div class="bar">
|
||||
<div class="menu-wrapper">
|
||||
<button class="icon-btn" title="Attach" style="background:rgba(255,255,255,0.08);">📎</button>
|
||||
<div class="menu">
|
||||
<button class="menu-item"><span class="icon">📷</span> Camera</button>
|
||||
<button class="menu-item"><span class="icon">🖼️</span> Image</button>
|
||||
<button class="menu-item"><span class="icon">📄</span> File</button>
|
||||
</div>
|
||||
</div>
|
||||
<input class="input-field" placeholder="Type a message…" disabled />
|
||||
<div style="width:4px;flex-shrink:0;"></div>
|
||||
<button class="send-btn mic" title="Voice input">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note">📎 button opens a Material 3 DropdownMenu with three options. Selecting one fires the launcher and closes the menu.</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Empty, menu closed -->
|
||||
<div class="variant">
|
||||
<div class="label">2. Empty — normal state</div>
|
||||
<div class="bar">
|
||||
<button class="icon-btn" title="Attach">📎</button>
|
||||
<input class="input-field" placeholder="Type a message…" disabled />
|
||||
<div style="width:4px;flex-shrink:0;"></div>
|
||||
<button class="send-btn mic" title="Voice input">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note">Default look — single 📎, no clutter. Mic visible when input is blank & no attachments.</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Typing -->
|
||||
<div class="variant">
|
||||
<div class="label">3. Typing — send shown</div>
|
||||
<div class="bar">
|
||||
<button class="icon-btn" title="Attach">📎</button>
|
||||
<input class="input-field" placeholder="Type a message…" value="Deploy the new config, but keep the old one as backup" style="color:#eee;" />
|
||||
<div style="width:4px;flex-shrink:0;"></div>
|
||||
<button class="send-btn send" title="Send">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note">Mic → Send (blue) when text or attachments present.</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Attachments -->
|
||||
<div class="variant">
|
||||
<div class="label">4. With attachments — preview chips</div>
|
||||
<div class="chips-row">
|
||||
<div class="chip">
|
||||
<span class="thumb">📷</span>
|
||||
<span class="name">photo_20260629.jpg</span>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
<div class="chip">
|
||||
<span class="thumb">📄</span>
|
||||
<span class="name">config.yaml</span>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
<div class="chip">
|
||||
<span class="thumb">📷</span>
|
||||
<span class="name">screenshot.png</span>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar" style="margin-top:0;">
|
||||
<button class="icon-btn" title="Attach">📎</button>
|
||||
<input class="input-field" placeholder="Type a message…" value="Here's what I'm looking at" style="color:#eee;" />
|
||||
<div style="width:4px;flex-shrink:0;"></div>
|
||||
<button class="send-btn send" title="Send">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note">Image chips → AsyncImage thumbnail. File chips → file icon. Close ✕ removes.</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. Listening -->
|
||||
<div class="variant">
|
||||
<div class="label">5. Listening — stop shown</div>
|
||||
<div class="bar">
|
||||
<button class="icon-btn" title="Attach" disabled>📎</button>
|
||||
<input class="input-field" placeholder="Type a message…" disabled />
|
||||
<div style="width:4px;flex-shrink:0;"></div>
|
||||
<button class="send-btn stop" title="Stop listening">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note">While listening, input + attach disabled. Red Stop replaces Mic.</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. Disconnected -->
|
||||
<div class="variant">
|
||||
<div class="label">6. Disconnected — everything disabled</div>
|
||||
<div class="bar" style="opacity:0.5;">
|
||||
<button class="icon-btn" disabled title="Attach">📎</button>
|
||||
<input class="input-field" placeholder="Not connected" disabled />
|
||||
<div style="width:4px;flex-shrink:0;"></div>
|
||||
<button class="send-btn mic" disabled title="Voice input">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note">Everything dimmed, placeholder "Not connected".</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Full structural diagram -->
|
||||
<hr style="border-color:rgba(255,255,255,0.06); margin: 28px 0 16px;" />
|
||||
|
||||
<h3 style="color:#ddd; font-weight:500; font-size:14px; margin-bottom:12px;">📐 Structural hierarchy</h3>
|
||||
|
||||
<pre style="font-size:12px; color:#aaa; line-height:1.6; background:rgba(255,255,255,0.03); padding:16px; border-radius:12px; max-width:600px;">
|
||||
Card (roundedCornerShape(24dp), surface alpha 0.85)
|
||||
└ Column
|
||||
├ [conditional] Slash command suggestions
|
||||
│ └ LazyColumn (maxHeight 200dp)
|
||||
├ [conditional] Attachment preview chips
|
||||
│ └ Row
|
||||
│ └ AttachmentChip × N
|
||||
│ └ Surface (roundedCorner 16dp)
|
||||
│ ├ [if image] AsyncImage(20dp)
|
||||
│ ├ [else] Icon(InsertDriveFile, 16dp)
|
||||
│ └ name + Close IconButton(18dp)
|
||||
└ Row (main input area)
|
||||
├ Box (positioned for dropdown)
|
||||
│ ├ IconButton 📎 AttachFile (36dp)
|
||||
│ └ DropdownMenu (expanded = showAttachmentMenu)
|
||||
│ ├ DropdownMenuItem: 📷 Camera → onCameraTap()
|
||||
│ ├ DropdownMenuItem: 🖼️ Image → onImageTap() → launch("image/*")
|
||||
│ └ DropdownMenuItem: 📄 File → onFileTap() → launch("*/*")
|
||||
├ OutlinedTextField (weight=1f, maxLines=4, rounded 20dp)
|
||||
├ Spacer(4dp)
|
||||
└ AnimatedContent (mic ↔ send ↔ listening)
|
||||
├ mic: FilledTonalButton(Mic icon, 40dp, circle)
|
||||
├ send: FilledTonalButton(Send icon, 40dp, circle, blue)
|
||||
└ listening: FilledTonalButton(Stop icon, 40dp, circle, red)
|
||||
</pre>
|
||||
|
||||
<hr style="border-color:rgba(255,255,255,0.06); margin: 28px 0 16px;" />
|
||||
|
||||
<h3 style="color:#ddd; font-weight:500; font-size:14px; margin-bottom:12px;">🎯 What each dropdown option does</h3>
|
||||
|
||||
<table style="font-size:13px; color:#ccc; border-collapse: collapse; max-width:600px;">
|
||||
<tr style="border-bottom:1px solid rgba(255,255,255,0.06);">
|
||||
<th style="padding:8px 12px; text-align:left; color:#888;">Option</th>
|
||||
<th style="padding:8px 12px; text-align:left; color:#888;">Launcher</th>
|
||||
<th style="padding:8px 12px; text-align:left; color:#888;">MIME</th>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid rgba(255,255,255,0.06);">
|
||||
<td style="padding:8px 12px;">📷 Camera</td>
|
||||
<td style="padding:8px 12px;"><code>TakePicture</code> → temp FileProvider URI</td>
|
||||
<td style="padding:8px 12px;">image/jpeg</td>
|
||||
</tr>
|
||||
<tr style="border-bottom:1px solid rgba(255,255,255,0.06);">
|
||||
<td style="padding:8px 12px;">🖼️ Image</td>
|
||||
<td style="padding:8px 12px;"><code>GetContent("image/*")</code></td>
|
||||
<td style="padding:8px 12px;">image/* (gallery picker)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:8px 12px;">📄 File</td>
|
||||
<td style="padding:8px 12px;"><code>GetContent("*/*")</code></td>
|
||||
<td style="padding:8px 12px;">*/* (system file picker)</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user