some suggested changes

This commit is contained in:
Víctor Losada Hernández
2026-10-13 19:48:22 +02:00
parent 00bcbac55e
commit fbc54f5ab0
5 changed files with 47 additions and 19 deletions
+3 -3
View File
@@ -27,17 +27,17 @@ const Nav = {
item : ({ icon, kbd, href, newTab, onClick, children, className, disabled, noDismiss, ...props })=>{
const classes = cx('navItem', className);
if(disabled) {
return <button className={classes} disabled>{children}{icon && <i className={icon}></i>}</button>;
return <button className={classes} disabled>{icon && <i className={icon}></i>}{children}</button>;
}
if(href){
return <a className={classes} href={href} target={newTab ? '_blank' : '_self'} {...props}>
{children}
{icon && <i className={icon}></i>}
{children}
</a>;
} else {
return <button {...props} no-dismiss={noDismiss ? 'true' : undefined} className={classes} onClick={onClick} >
{children}
{icon && <i className={icon}></i>}
{children}
{kbd && <kbd>{kbd}</kbd>}
</button>;
}
+6 -6
View File
@@ -60,19 +60,19 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
return (
<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
<div className='nav-section'>
<Nav.item onClick={()=>editor?.undo()} kbd={`${mod} + z`} disabled={!editor}>
<Nav.item icon={'fas fa-undo'} onClick={()=>editor?.undo()} kbd={`${mod} + z`} disabled={!editor}>
Undo
</Nav.item>
<Nav.item onClick={()=>editor?.redo()} kbd={`${mod} + Shift + z`} disabled={!editor}>
<Nav.item icon={'fas fa-redo'} onClick={()=>editor?.redo()} kbd={`${mod} + Shift + z`} disabled={!editor}>
Redo
</Nav.item>
<Nav.item onClick={()=>editor?.find()} kbd={`${mod} + f`} disabled={!editor}>
<Nav.item icon={'fas fa-search'} onClick={()=>editor?.find()} kbd={`${mod} + f`} disabled={!editor}>
Find / Replace
</Nav.item>
<Nav.item onClick={()=>editor?.foldCode()} disabled={!editor}>
<Nav.item icon={'fas fa-compress-alt'} onClick={()=>editor?.foldCode()} disabled={!editor}>
Fold all lines
</Nav.item>
<Nav.item onClick={()=>editor?.unfoldCode()} disabled={!editor}>
<Nav.item icon={'fas fa-expand-alt'} onClick={()=>editor?.unfoldCode()} disabled={!editor}>
Unfold all lines
</Nav.item>
</div>
@@ -97,7 +97,7 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
</div>
<ShareNavItem brew={brew} disabled={!brew?.shareId} currentPage={currentPage} />
{navSlots.go}
<Dropdown className='navItem recent' groupName={'Recent Brews'} customTrigger={<>Recent Brews</>} icon={null} key={'recent'}>
<Dropdown className='navItem recent' groupName={'Recent Brews'} icon={'fas fa-history'} key={'recent'}>
<RecentNavItem />
</Dropdown>
</Dropdown>
+31 -5
View File
@@ -21,7 +21,7 @@
height: 100%;
padding: 5px;
cursor: pointer;
max-width: 150px;
max-width: 220px;
text-wrap: pretty;
&:has(> button, > a) {
@@ -153,7 +153,10 @@
}
}
&.save {
width: 90px;
width: 100px;
display:grid;
place-items: stretch;
&.neverSaved {
background-color: @orange;
color: #fff;
@@ -173,18 +176,32 @@
.navItem,
.menu-wrapper {
--activeTriggerColor: #666;
&:has(ul):not(:has(ul :is(button, a):not(:disabled))) {
color: grey; //faux disabled if all buttons are disabled
}
&:not(.header):hover {
background: #484848;
}
&:has(> i, > kbd, > img) {
&:not(.header):has(:popover-open) {
background: var(--activeTriggerColor);
}
&:has(> kbd) {
display: flex;
gap: 5px;
justify-content: space-between;
}
i {
position:absolute;
left:5px;
&.caret {
left:unset;
right:5px;
}
}
&.header {
cursor: default;
place-content: center;
@@ -197,6 +214,7 @@
gap: 5px;
height: 2.7em;
isolation: isolate;
padding-left:5px;
&.header {
padding: 5px 0;
@@ -245,6 +263,10 @@
translate: -5px;
}
}
span {
text-align: left;
}
}
> ul {
@@ -269,10 +291,11 @@
font-size: 13px;
text-transform: capitalize;
padding-bottom: 5px;
min-width: 80px;
min-width: 130px;
.navItem {
min-height: 2.2em;
padding-left: 25px;
&.save {
width: 100%;
@@ -285,6 +308,9 @@
margin-bottom: 5px;
}
button.menu-item {
padding:0;
}
li {
margin-block: 2px;
}
@@ -302,7 +328,7 @@
color: #777;
}
display: grid;
place-items: center;
place-items: stretch;
height: 100%;
width: 100%;
padding: 5px 10px;
+4 -4
View File
@@ -25,13 +25,13 @@ const getRedditLink = (brew)=>{
export default ({ brew, disabled, currentPage })=>{
return (
<div className='nav-section'>
<Nav.item href={`/edit/${getEditId(brew)}`} disabled={disabled || !brew?.editId}>
<Nav.item icon={'fas fa-pencil'} href={`/edit/${getEditId(brew)}`} disabled={disabled || !brew?.editId}>
edit this brew
</Nav.item>
<Nav.item href={`/share/${getShareId(brew)}`} disabled={disabled}>
<Nav.item icon={'fas fa-share-alt'} href={`/share/${getShareId(brew)}`} disabled={disabled}>
view share page
</Nav.item>
<Nav.item onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}} disabled={disabled}>
<Nav.item icon={'far fa-copy'} onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}} disabled={disabled}>
copy share url
</Nav.item>
{currentPage > 1 &&
@@ -39,7 +39,7 @@ export default ({ brew, disabled, currentPage })=>{
onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}#p${currentPage}`);}}>
copy url (page {currentPage})
</Nav.item>}
<Nav.item href={!disabled && getRedditLink(brew)} newTab rel='noopener noreferrer' disabled={disabled}>
<Nav.item icon={'fab fa-reddit-alien'} href={!disabled && getRedditLink(brew)} newTab rel='noopener noreferrer' disabled={disabled}>
post to reddit
</Nav.item>
</div>
@@ -390,7 +390,9 @@ const EditorPage = (props)=>{
</div>}
</Navbar.File>
<Navbar.Menu>
{error? <ErrorNavItem error={error} clearError={clearError} /> : renderSaveButton()}
<li className='menu-wrapper'>
{error? <ErrorNavItem error={error} clearError={clearError} /> : renderSaveButton()}
</li>
</Navbar.Menu>
</Navbar>