mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 10:33:59 -05:00
55dc09017e
Alrighty, round 2! This PR makes the compiler picker dropdown taller (max height is to the bottom of the screen)  I've added a toolbar button for opening the popout as well as a button when the dropdown is open:   Then the modal interface allows text searching, filtering by compiler category, and filtering by compiler instruction set. In the future I'd like to replace the instructionSet property with an architecture property so the filtering here can be a little better.  Demo of the category filtering:  The text filtering highlights results the same as tomselect does:  I moved the favorites permanently to their own column so compilers aren't jarringly shifted around the screen when favoriting / unfavoriting. Also added media queries so the modal looks ok on smaller screens:   I think the only other two changes from the first PR are now the active compiler is highlighted like it is in the tomselect dropdown and I figured out how to reliably focus the search bar on modal open. (Oh, and now clicking a compiler actually does something!) --------- Co-authored-by: Matt Godbolt <matt@godbolt.org>
20 lines
1.4 KiB
Plaintext
20 lines
1.4 KiB
Plaintext
#compiler-selector
|
|
.form-row
|
|
.input-group
|
|
.input-group-prepend
|
|
.input-group
|
|
select.compiler-picker
|
|
.input-group-append
|
|
button.btn.btn-sm.btn-light.input-group-text.picker-popout-button(data-trigger="click" style="cursor: pointer;" role="button" title="Compiler picker popout")
|
|
span
|
|
i.fa-solid.fa-arrow-up-right-from-square
|
|
.input-group-append
|
|
button.btn.btn-sm.btn-light.input-group-text.prepend-options(tabindex="0" data-trigger="focus" style="cursor: pointer;" role="button" title="All compilation options")
|
|
span.btn.btn-sm.btn-light.status-icon
|
|
input.conformance-options.form-control(type="text" placeholder="Compiler options..." size="256" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false")
|
|
.input-group-append
|
|
button.btn.btn-sm.fas.fa-receipt.d-none.compiler-out.compiler-selector-icon(disabled=true style="cursor: help;" title="This compiler has generated some output. Open its associated pane to read it.")
|
|
button.btn.btn-sm.fas.fa-times.close.compiler-selector-icon(aria-label="Close" title="Close")
|
|
button.btn.btn-sm.fas.fa-share.close.extract-compiler.compiler-selector-icon(aria-label="Pop compiler" title="Show compiler")
|
|
button.btn.btn-sm.fas.fa-copy.close.copy-compiler.compiler-selector-icon(aria-label="Copy compiler" title="Copy compiler")
|