Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-21 02:45:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement split button dropdown for install options

Browse Source 
- Replace separate VS Code/Insiders buttons with single Install dropdown
- Primary 'Install' button opens in VS Code, dropdown chevron reveals options
- Dropdown shows 'VS Code' and 'VS Code Insiders' choices
- Add CSS for split button styling with glassmorphism dropdown
- Apply to modal and all list views (agents, prompts, instructions)
This commit is contained in:
Aaron Powell
2026-01-29 09:33:49 +11:00
parent 1887d9ba56
commit 7e7b5c8610
8 changed files with 236 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
website/src/components/Modal.astro
View File

@@ -14,18 +14,29 @@
</svg>
Copy
</button>
<a id="install-btn" class="btn btn-primary" target="_blank" rel="noopener" title="Install to VS Code">
<svg viewBox="0 0 100 100" width="16" height="16" fill="currentColor">
<path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/>
</svg>
VS Code
</a>
<a id="install-insiders-btn" class="btn btn-secondary" target="_blank" rel="noopener" title="Install to VS Code Insiders">
<svg viewBox="0 0 100 100" width="16" height="16" fill="currentColor">
<path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/>
</svg>
Insiders
</a>
<div id="install-dropdown" class="install-dropdown" style="display: none;">
<a id="install-btn-main" class="btn btn-primary install-btn-main" target="_blank" rel="noopener">
<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
<path d="M7.47 10.78a.75.75 0 0 0 1.06 0l3.75-3.75a.75.75 0 0 0-1.06-1.06L8.75 8.44V1.75a.75.75 0 0 0-1.5 0v6.69L4.78 5.97a.75.75 0 0 0-1.06 1.06l3.75 3.75ZM3.75 13a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"/>
</svg>
Install
</a>
<button type="button" class="btn btn-primary install-btn-toggle" aria-label="Install options">
<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>
</svg>
</button>
<div class="install-dropdown-menu">
<a id="install-vscode" target="_blank" rel="noopener">
<svg viewBox="0 0 100 100" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
VS Code
</a>
<a id="install-insiders" target="_blank" rel="noopener">
<svg viewBox="0 0 100 100" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
VS Code Insiders
</a>
</div>
</div>
<button id="close-modal" class="btn btn-icon" title="Close">
<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
<path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>