f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-14 08:18:44 +00:00
Code Wiki Activity

bunch of things that should have been commits

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-10-10 20:21:38 +02:00
parent 7b1edb889c
commit 428b018835
10 changed files with 73 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/navbar/error-navitem.less
+9 -48
View File
@@ -1,69 +1,30 @@
@import '@sharedStyles/core.less';
@keyframes glideDown {
0% {
opacity : 0;transform : translate(-50% + 3px, 0px);}
100% {
opacity : 1;transform : translate(-50% + 3px, 10px);}
}
.navItem.error {
position : relative;
background-color : @red;
}
.errorContainer {
position : absolute;
top : 100%;
left : 50%;
z-index : 1000;
width : 140px;
padding : 3px;
padding : 5px !important;
font-size : 10px;
font-weight : 800;
line-height: 1.5em;
color : white;
text-align : center;
text-transform : uppercase;
background-color : #333333;
border : 3px solid #444444;
border-radius : 5px;
transform : translate(-50% + 3px, 10px);
animation-name : glideDown;
animation-duration : 0.4s;
flex-direction: column;
outline:1px solid red;
border:1px solid red;
border-width: 1px 3px;
border-radius:5px;
.lowercase { text-transform : none; }
a { color : @teal; }
&::before {
position : absolute;
top : -23px;
left : 53px;
width : 0px;
height : 0px;
content : '';
border-top : 10px solid transparent;
border-right : 10px solid transparent;
border-bottom : 10px solid #444444;
border-left : 10px solid transparent;
}
&::after {
position : absolute;
top : -19px;
left : 53px;
width : 0px;
height : 0px;
content : '';
border-top : 10px solid transparent;
border-right : 10px solid transparent;
border-bottom : 10px solid #333333;
border-left : 10px solid transparent;
}
.deny {
display : inline-block;
width : 48%;
padding : 5px;
margin : 1px;
background-color : #333333;
border-left : 1px solid #666666;
background:@orange;
.animate(background-color);
&:hover { background-color : red; }
}
@@ -73,7 +34,7 @@
padding : 5px;
margin : 1px;
color : white;
background-color : #333333;
background:@orange;
.animate(background-color);
&:hover { background-color : teal; }
}
client/homebrew/navbar/nav.jsx
+7 -46
View File
@@ -25,7 +25,7 @@ const Nav = {
</div>;
},
item : ({ icon, kbd,href, newTab, onClick, color, children, className, disabled, ...props })=>{
item : ({ icon, kbd,href, newTab, onClick, color, children, className, disabled, noDismiss, ...props })=>{
const classes = cx('navItem', color, className);
if(disabled) {
return <button className={classes} disabled>{children}{icon && <i className={icon}></i>}</button>
@@ -36,57 +36,18 @@ const Nav = {
{icon && <i className={icon}></i>}
</a>;
} else {
return <button {...props} className={classes} onClick={onClick} >
return <button {...props} no-dismiss={noDismiss ? 'true' : 'false'} className={classes} onClick={onClick} >
{children}
{icon && <i className={icon}></i>}
{kbd && <kbd>{kbd}</kbd>}
</button>;
}
},
dropdown : function dropdown(props) {
props = Object.assign({}, props, {
trigger : 'hover click'
});
const myRef = useRef(null);
const [showDropdown, setShowDropdown] = useState(false);
useEffect(()=>{
document.addEventListener('click', handleClickOutside);
return ()=>{
document.removeEventListener('click', handleClickOutside);
};
}, []);
function handleClickOutside(e) {
// Close dropdown when clicked outside
if(!myRef.current?.contains(e.target)) {
handleDropdown(false);
}
}
function handleDropdown(show) {
setShowDropdown(show ?? !showDropdown);
}
const dropdownChildren = React.Children.map(props.children, (child, i)=>{
if(i < 1) return;
return child;
});
return (
<div className={`navDropdownContainer ${props.className ?? ''}`}
ref={myRef}
onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true) : undefined }
onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }
onClick = { props.trigger.includes('click') ? ()=>handleDropdown(true) : undefined }
>
{props.children[0] || props.children /*children is not an array when only one child*/}
{showDropdown && <div className='navDropdown'>{dropdownChildren}</div>}
</div>
);
}
header: ({span, className, children, ...props})=>{
return <li className={cx([`navItem header`, className])} no-dismiss='true'>
{children}
</li>;
},
};
client/homebrew/navbar/navbar.jsx
+1 -1
View File
@@ -146,7 +146,7 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
</Dropdown>
);
};
console.log(navSlots);
return (
<nav>
<ul>
client/homebrew/navbar/navbar.less
+31 -43
View File
@@ -3,19 +3,6 @@
@navbarHeight: 29px;
@viewerToolsHeight: 32px;
@keyframes glideDropDown {
0% {
background-color: #333333;
opacity: 0;
transform: translate(0px, -100%);
}
100% {
background-color: #333333;
opacity: 1;
transform: translate(0px, 0px);
}
}
.homebrew nav {
position: relative;
z-index: 2;
@@ -25,6 +12,7 @@
color: #ccc;
height: @navbarHeight;
font-size: 14px;
font-family:
Alata,
open sans;
@@ -36,11 +24,12 @@
height: 100%;
padding: 5px;
cursor: pointer;
max-width:140px;
text-wrap:wrap;
&:has(> button, > a) {
padding: 0;
}
&.brewTitle {
display: block;
width: 100%;
@@ -54,7 +43,6 @@
white-space: nowrap;
background-color: transparent;
}
&.metadata {
position: relative;
display: flex;
@@ -165,27 +153,9 @@
text-transform: none;
}
}
button,
a {
&:disabled {
color: #777;
}
display: grid;
place-items: center;
height: 100%;
width: 100%;
padding: 5px 10px;
}
a {
color: inherit;
text-decoration: none;
}
&.header {
justify-content: center;
}
&.save {
width: 90px;
@@ -204,17 +174,21 @@
}
}
&.googleDriveStorage {
position: relative;
img {
height: 18px;
padding: 0px;
margin: -5px;
&.inactive {
filter: grayscale(1);
}
button,
a {
&:disabled {
color: #777;
}
display: grid;
place-items: center;
height: 100%;
width: 100%;
padding: 5px 10px;
}
a {
color: inherit;
text-decoration: none;
}
i.fa-power-off {
@@ -235,7 +209,7 @@
&:hover {
background: #484848;
}
&:has(> i, > kbd) {
&:has(> i, > kbd, >img) {
display: flex;
gap: 5px;
justify-content: space-between;
@@ -298,6 +272,20 @@
}
}
}
.googleDriveStorage {
position: relative;
img {
height: 18px;
padding: 0px;
margin: -5px;
translate:-5px;
&.inactive {
filter: grayscale(1);
}
}
}
}
> ul {
client/homebrew/navbar/recent.navitem.jsx
+2 -2
View File
@@ -156,11 +156,11 @@ const RecentItems = createReactClass({
return <>
{(this.props.showEdit && this.props.showView) ?
<Nav.item className='header'>edited</Nav.item> : null }
<Nav.header>edited</Nav.header> : null }
{this.props.showEdit ?
makeItems(this.state.edit) : null }
{(this.props.showEdit && this.props.showView) ?
<Nav.item className='header'>viewed</Nav.item> : null }
<Nav.header>viewed</Nav.header> : null }
{this.props.showView ?
makeItems(this.state.view) : null }
</>;
client/homebrew/pages/basePages/editPage/editorPage.jsx
+23 -14
View File
@@ -306,49 +306,55 @@ const EditorPage = (props)=>{
trySave(true, true, newSaveGoogle);
};
const renderGoogleDriveIcon = ()=>(
<Nav.item className='googleDriveStorage' onClick={handleGoogleClick}>
<img src={googleDriveIcon} className={saveGoogle ? '' : 'inactive'} alt='Google Drive icon' />
const renderGoogleDriveIcon = ()=>{
const errorExists = alertNoGoogleToTransfer || alertOwnershipToTransfer || alertTrashedGoogleBrew || confirmGoogleTransfer;
return (<>
<Nav.header>This brew is in {saveGoogle ? 'Google Drive' : 'The Homebrewery'}</Nav.header>
<Nav.item className='googleDriveStorage' noDismiss={errorExists} onClick={handleGoogleClick}>
{saveGoogle ? 'Transfer to Homebrewery' : 'Transfer to Drive'}
{saveGoogle? '' : <img src={googleDriveIcon} className={saveGoogle ? '' : 'inactive'} alt='Google Drive icon' /> }
</Nav.item>
{errorExists && <Nav.item className='errorContainer' >
{alertOwnershipToTransfer && (
<div className='errorContainer'>
<>
You must be the Owner to transfer between the Homebrewery and Google Drive!
The owner of this file is {currentBrew.authors[0]}.
<br></br>
<div className='confirm' onClick={closeAlerts}> Okay </div>
</div>
</>
)}
{alertNoGoogleToTransfer && (
<div className='errorContainer'>
<>
You must be signed in to a Google account to transfer between the Homebrewery and Google Drive!
<a target='_blank' rel='noopener noreferrer' href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
<div className='confirm' onClick={closeAlerts}> Sign In </div>
</a>
<div className='deny' onClick={closeAlerts}> Not Now </div>
</div>
</>
)}
{alertTrashedGoogleBrew && (
<div className='errorContainer'>
<>
This brew is currently in your Trash folder on Google Drive!<br />
If you want to keep it, make sure to move it before it is deleted permanently!<br />
<div className='confirm' onClick={toggleGoogleStorage}> Save my brew </div>
</div>
</>
)}
{confirmGoogleTransfer && (
<div className='errorContainer'>
<>
{saveGoogle
? 'Would you like to transfer this brew from your Google Drive storage back to the Homebrewery?'
: 'Would you like to transfer this brew from the Homebrewery to your personal Google Drive storage?'}
<br />
<div className='confirm' onClick={toggleGoogleStorage}> Yes </div>
<div className='deny' onClick={closeAlerts}> No </div>
</div>
</>
)}
</Nav.item>
);
</Nav.item>}
</>
)};
const renderAutoSaveButton = ()=>(
@@ -381,6 +387,9 @@ const EditorPage = (props)=>{
save now
</Nav.item>
{(pageName == 'editPage') && renderAutoSaveButton()}
{pageName === 'editPage' && <div className="nav-section">
{renderGoogleDriveIcon()}
</div>}
</Navbar.File>
<Navbar.Menu>
{error? <ErrorNavItem error={error} clearError={clearError} /> : renderSaveButton()}
client/homebrew/pages/editPage/editPage.jsx
-2
View File
@@ -1,5 +1,3 @@
import './editPage.less';
import React from 'react';
import request from '../../utils/request-middleware.js';
import _ from 'lodash';
client/homebrew/pages/editPage/editPage.less
-4
View File
@@ -1,4 +0,0 @@
.editPage {
}
client/homebrew/pages/newPage/newPage.jsx
-2
View File
@@ -1,5 +1,3 @@
import './newPage.less';
import React from 'react';
import request from '../../utils/request-middleware.js';
import _ from 'lodash';
client/homebrew/pages/newPage/newPage.less
-6
View File
@@ -1,6 +0,0 @@
@import '@sharedStyles/colors.less';
.newPage {
}