basic changes

This commit is contained in:
Víctor Losada Hernández
2026-10-08 00:17:00 +02:00
parent 7222d28773
commit 208ac4046f
3 changed files with 80 additions and 61 deletions
+65 -55
View File
@@ -11,24 +11,22 @@ import Account from './account.navitem.jsx';
const { both: RecentNavItem } = RecentNavItems;
import Nav from './nav.jsx';
const Navbar = ({ account, brew, title, props }) => {
const Navbar = ({ account, brew, title = '', props }) => {
const version = global.version || '0.0.0';
const isMac = navigator.platform.toUpperCase().includes("MAC");
const mod = isMac ? "⌘" : "Ctrl";
const isMac = navigator.platform.toUpperCase().includes('MAC');
const mod = isMac ? '⌘' : 'Ctrl';
const renderTitle = () => {
//if vault
const cleanTitle = title.replace(/^\/+|\/+$/g, '');
if (!brew.shareId) return <Nav.item className='brewTitle'>{cleanTitle || 'Home'}</Nav.item>;
return (
<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
<Nav.item className='brewTitle' style={title.includes('edit') ? { cursor: 'default' } : {}}>
{brew.title}
</Nav.item>
);
};
const renderEdit = () => {
const renderEditLink = () => {
if (!brew.editId) return null;
const editLink = brew.googleId && !brew.stubbed ? brew.googleId + brew.editId : brew.editId;
@@ -40,60 +38,72 @@ const Navbar = ({ account, brew, title, props }) => {
);
};
const renderFile = () => {
return (
<Dropdown groupName={'File'} customTrigger={<>File</>} icon={null} key={'file'}>
<NewBrew />
<Nav.item disabled={!brew.shareId}>Save document</Nav.item>
<div className='nav-section'>
<PrintNavitem disabled={!brew.shareId}/>
<Nav.item disabled={!brew.shareId}>Get txt</Nav.item>
</div>
<ShareNavitem />
<div className='nav-section'>
<Nav.item disabled={!brew.shareId}>Delete File</Nav.item>
<Nav.item disabled={!brew.shareId}>Publish File</Nav.item>
<Nav.item disabled={!brew.shareId}>Transfer File</Nav.item>
</div>
</Dropdown>
);
};
const renderEdit = () => {
return (
<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
<div className='nav-section'>
<Nav.item kbd={mod + ' + z'} disabled={!brew.shareId}>
Undo
</Nav.item>
<Nav.item kbd={mod + ' + Shift + z'} disabled={!brew.shareId}>Redo</Nav.item>
<Nav.item kbd={mod + ' + x'} disabled={!brew.shareId}>cut</Nav.item>
<Nav.item kbd={mod + ' + c'} disabled={!brew.shareId}>copy</Nav.item>
<Nav.item kbd={mod + ' + v'} disabled={!brew.shareId}>paste</Nav.item>
<Nav.item kbd={mod + ' + f'} disabled={!brew.shareId}>Find / Replace</Nav.item>
</div>
</Dropdown>
);
};
const renderGo = () => {
return (
<Dropdown groupName={'Go'} customTrigger={<>Go</>} icon={null} key={'go'}>
<div className='nav-section'>
<Nav.item className='patreon' newTab={true} href='https://www.patreon.com/NaturalCrit' color='green' icon='fas fa-heart'>
Patreon
</Nav.item>
<Nav.item color='purple' icon='fas fa-dungeon' href='/vault' newTab={false} rel='noopener noreferrer'>
Vault
</Nav.item>
<Nav.item color='purple' icon='fas fa-dungeon' href='/changelog' newTab={false} rel='noopener noreferrer'>
Changelog
</Nav.item>
</div>
<Dropdown className='navItem recent' groupName={'Recent Brews'} customTrigger={<>Recent Brews</>} icon={null} key={'recent'}>
<RecentNavItem />
</Dropdown>
</Dropdown>
);
};
return (
<nav>
<ul>
<li className='menu-wrapper'>
<a href='/'>Home</a>
</li>
<Dropdown groupName={'File'} customTrigger={<>File</>} icon={null} key={'file'}>
<NewBrew />
<li className='navItem'>Save document</li>
<div className='nav-section'>
<PrintNavitem />
<li className='navItem'>Get txt</li>
</div>
<ShareNavitem />
<div className='nav-section'>
<li className='navItem'>Delete File</li>
<li className='navItem'>Publish File</li>
<li className='navItem'>Transfer File</li>
</div>
</Dropdown>
<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
<div className='nav-section'>
<Nav.item kbd={mod + ' + z'} disabled>Undo</Nav.item>
<Nav.item kbd={mod + ' + Shift + z'}>Redo</Nav.item>
<Nav.item kbd={mod + ' + x'}>cut</Nav.item>
<Nav.item kbd={mod + ' + c'}>copy</Nav.item>
<Nav.item kbd={mod + ' + v'}>paste</Nav.item>
<Nav.item kbd={mod + ' + f'}>Find / Replace</Nav.item>
</div>
</Dropdown>
<Dropdown groupName={'Go'} customTrigger={<>Go</>} icon={null} key={'go'}>
<div className='nav-section'>
<Nav.item className='patreon' newTab={true} href='https://www.patreon.com/NaturalCrit' color='green' icon='fas fa-heart'>
Patreon
</Nav.item>
<Nav.item color='purple' icon='fas fa-dungeon' href='/vault' newTab={false} rel='noopener noreferrer'>
Vault
</Nav.item>
<Nav.item color='purple' icon='fas fa-dungeon' href='/changelog' newTab={false} rel='noopener noreferrer'>
Changelog
</Nav.item>
</div>
<div className='nav-section'>
<Nav.item href={`/user/${encodeURIComponent(global.account.username)}`} color='yellow' icon='fas fa-beer'>
brews
</Nav.item>
<Nav.item className='account' color='orange' icon='fas fa-user' href='/account'>
account
</Nav.item>
</div>
<Dropdown className='navItem recent' groupName={'Recent Brews'} customTrigger={<>Recent Brews</>} icon={null} key={'recent'}>
<RecentNavItem />
</Dropdown>
</Dropdown>
{renderFile()}
{renderEdit()}
{renderGo()}
<Dropdown groupName={'Help'} customTrigger={<>Help</>} icon={null} key={'help'}>
<HelpNavitem />
</Dropdown>
+13 -4
View File
@@ -229,8 +229,13 @@
}
.navItem,
.menu-wrapper {
--activeTriggerColor: #666;
&:has(ul):not(:has(ul button:not(:disabled))) {
color:grey; //faux disabled if all buttons are disabled
}
&:hover {
background: #555;
background: #484848;
}
&:has(> i, > kbd) {
display: flex;
@@ -298,7 +303,6 @@
}
.navItem {
height: 2em;
&.header {
justify-content: center;
@@ -328,9 +332,14 @@
text-transform: capitalize;
padding-bottom: 5px;
.nav-section:not(:last-child, + .header) {
.navItem {
min-height:2.2em;
}
.nav-section:not(:last-child, :has(+ .header)) {
border-bottom: 1px solid;
margin-bottom: 10px;
padding-bottom:5px;
margin-bottom: 5px;
}
li {
+2 -2
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import Nav from './nav.jsx';
import { printCurrentBrew } from '@shared/helpers.js';
export default function(){
export default function({disabled}){
const [printing, setPrinting] = useState(false);
// listen for print cycle events to display "loading" message since it can take some time.
@@ -19,7 +19,7 @@ export default function(){
const handlePrintPrepFinished = ()=>{ setPrinting(false); };
return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf' disabled={disabled}>
{printing ? 'loading' : 'get PDF'}
</Nav.item>;
};