extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-02-20 19:50:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor/ Implement Focusable Buttons in the Generate Code Modal (#3310)

Browse Source 
* refactor: GenerateCodeItem component to fix width issue

* feat: tab switch for languages

* style: add logic to handle different screen sizes

* feat: enhance keyboard navigation for language selection in GenerateCodeItem
This commit is contained in:
Pragadesh-45 2025-01-02 11:17:56 +05:30 committed by GitHub
parent 7d67239b11
commit 548f958a0f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
View File

@ -35,6 +35,28 @@ const StyledWrapper = styled.div`
background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
}
}
.flexible-container {
width: 100%;
}
@media (max-width: 600px) {
.flexible-container {
width: 500px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.flexible-container {
width: 800px;
}
}
@media (min-width: 1201px) {
.flexible-container {
width: 900px;
}
}
`;
export default StyledWrapper;

22
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
View File

@ -48,7 +48,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
return (
<Modal size="lg" title="Generate Code" handleCancel={onClose} hideFooter={true}>
<StyledWrapper>
<div className="flex w-full">
<div className="flex w-full flexible-container">
<div>
<div className="generate-code-sidebar">
{languages &&
@ -59,7 +59,27 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
className={
language.name === selectedLanguage.name ? 'generate-code-item active' : 'generate-code-item'
}
role="button"
tabIndex={0}
onClick={() => setSelectedLanguage(language)}
onKeyDown={(e) => {
if (e.key === 'Tab') {
e.preventDefault();
const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
const nextIndex = e.shiftKey
? (currentIndex - 1 + languages.length) % languages.length
: (currentIndex + 1) % languages.length;
setSelectedLanguage(languages[nextIndex]);
}
if (e.shiftKey && e.key === 'Tab') {
e.preventDefault();
const currentIndex = languages.findIndex((lang) => lang.name === selectedLanguage.name);
const nextIndex = (currentIndex - 1 + languages.length) % languages.length;
setSelectedLanguage(languages[nextIndex]);
}
}}
aria-pressed={language.name === selectedLanguage.name}
>
<span className="capitalize">{language.name}</span>
</div>