mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-14 06:08:45 +00:00
some suggested changes
This commit is contained in:
@@ -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>;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user