diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx index 1cb66fe43..2b2df6fe3 100644 --- a/client/homebrew/homebrew.jsx +++ b/client/homebrew/homebrew.jsx @@ -62,7 +62,6 @@ const Homebrew = (props)=>{ return (
- } /> @@ -74,7 +73,6 @@ const Homebrew = (props)=>{ return (
- } /> } /> diff --git a/client/homebrew/navbar/error-navitem.less b/client/homebrew/navbar/error-navitem.less index 4da665915..8aeeae212 100644 --- a/client/homebrew/navbar/error-navitem.less +++ b/client/homebrew/navbar/error-navitem.less @@ -1,5 +1,13 @@ @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; diff --git a/client/homebrew/navbar/navbar.jsx b/client/homebrew/navbar/navbar.jsx index ba105110a..86a5ab0c2 100644 --- a/client/homebrew/navbar/navbar.jsx +++ b/client/homebrew/navbar/navbar.jsx @@ -11,14 +11,25 @@ import Account from './account.navitem.jsx'; const { both: RecentNavItem } = RecentNavItems; import Nav from './nav.jsx'; -const Navbar = ({ account, brew, title = '', props }) => { +const Navbar = ({ children, brew, title = '', props }) => { const version = global.version || '0.0.0'; const isMac = navigator.platform.toUpperCase().includes('MAC'); const mod = isMac ? '⌘' : 'Ctrl'; + const isBrew = !!brew && brew.shareId; + const account = global.account; + + const slots = React.Children.toArray(children).reduce((acc, child) => { + if (React.isValidElement(child)) { + if (child.type === Navbar.File) acc.file = child; + if (child.type === Navbar.Edit) acc.edit = child; + if (child.type === Navbar.Go) acc.go = child; + } + return acc; + }, {}); const renderTitle = () => { const cleanTitle = title.replace(/^\/+|\/+$/g, ''); - if (!brew.shareId) return {cleanTitle || 'Home'}; + if (!isBrew) return {cleanTitle || 'Home'}; return ( {brew.title} @@ -26,43 +37,44 @@ const Navbar = ({ account, brew, title = '', props }) => { ); }; - const renderEditLink = () => { - if (!brew.editId) return null; - - const editLink = brew.googleId && !brew.stubbed ? brew.googleId + brew.editId : brew.editId; - - return ( - - edit - - ); - }; - - const renderDownloadLink = () =>{ - if(!brew.shareId) return Get txt + const renderDownloadLink = () => { + if (!isBrew) return Get txt; let shareLink = brew.shareId; - if(brew.googleId && !brew.stubbed) { + if (brew.googleId && !brew.stubbed) { shareLink = brew.googleId + shareLink; } - return Get txt - } + return ( + + Get txt + + ); + }; const renderFile = () => { return ( File} icon={null} key={'file'}> - Save document + + Save document +
- + {renderDownloadLink()}
- +
- Delete File - Publish File - Transfer File + + Delete File + + + Publish File + + + Transfer File +
+ {slots.file?.props.children}
); }; @@ -71,14 +83,25 @@ const Navbar = ({ account, brew, title = '', props }) => { return ( Edit} icon={null} key={'edit'}>
- + {slots.edit} + Undo - Redo - cut - copy - paste - Find / Replace + + Redo + + + cut + + + copy + + + paste + + + Find / Replace +
); @@ -128,4 +151,9 @@ const Navbar = ({ account, brew, title = '', props }) => { ); }; + +Navbar.File = () => null; +Navbar.Edit = () => null; +Navbar.Go = () => null; + export default Navbar; diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less index 79698dc3a..85fc7857a 100644 --- a/client/homebrew/navbar/navbar.less +++ b/client/homebrew/navbar/navbar.less @@ -197,7 +197,9 @@ background: #333; min-height: 29px; font-size: 14px; - font-family: Alata, open sans; + font-family: + Alata, + open sans; button, a { &:disabled { @@ -217,7 +219,7 @@ .menu-wrapper { --activeTriggerColor: #666; &:has(ul):not(:has(ul button:not(:disabled))) { - color:grey; //faux disabled if all buttons are disabled + color: grey; //faux disabled if all buttons are disabled } &:hover { background: #484848; @@ -288,13 +290,43 @@ } .navItem { - &.header { justify-content: center; } &.beta { - color:@red; + color: @red; + } + + &.neverSaved { + background-color: @orange; + color: white; + transition: all 0.2s; + &:hover { + background-color: @green; + } + } + + &.save { + position: relative; + width: 106px; + text-align: center; + } + + &.saved { + color: #666666; + cursor: initial; + } + + &.googleDriveStorage { + position : relative; + + img { + height: 18px; + padding: 0px; + margin: -5px; + &.inactive { filter : grayscale(1); } + } } } @@ -322,12 +354,12 @@ padding-bottom: 5px; .navItem { - min-height:2.2em; + min-height: 2.2em; } .nav-section:not(:last-child, :has(+ .header)) { border-bottom: 1px solid; - padding-bottom:5px; + padding-bottom: 5px; margin-bottom: 5px; } diff --git a/client/homebrew/navbar/share.navitem.jsx b/client/homebrew/navbar/share.navitem.jsx index 786681b74..d2aeaf378 100644 --- a/client/homebrew/navbar/share.navitem.jsx +++ b/client/homebrew/navbar/share.navitem.jsx @@ -2,11 +2,12 @@ import React from 'react'; import dedent from 'dedent'; import Nav from './nav.jsx'; -const getShareId = (brew)=>( - brew.googleId && !brew.stubbed +const getShareId = (brew)=>{ + if (!brew) return null; + return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId -); +}; const getRedditLink = (brew)=>{ const text = dedent` diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 76f15b471..79a8ee713 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -5,6 +5,7 @@ import moment from 'moment'; import _ from 'lodash'; import BrewItem from './brewItem/brewItem.jsx'; +import Navbar from '../../../navbar/navbar.jsx'; const USERPAGE_SORT_DIR = 'HB_listPage_sortDir'; const USERPAGE_SORT_TYPE = 'HB_listPage_sortType'; @@ -328,7 +329,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI return (
- {navItems} + {navItems} {renderNav()} diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.jsx b/client/homebrew/pages/basePages/uiPage/uiPage.jsx index c8a0f0941..6bf6ff74b 100644 --- a/client/homebrew/pages/basePages/uiPage/uiPage.jsx +++ b/client/homebrew/pages/basePages/uiPage/uiPage.jsx @@ -1,13 +1,14 @@ import './uiPage.less'; import React from 'react'; import createReactClass from 'create-react-class'; +import Navbar from '../../../navbar/navbar.jsx'; const UIPage = createReactClass({ displayName : 'UIPage', render : function(){ return
- +
{this.props.children}
diff --git a/client/homebrew/pages/editPage/editPage.less b/client/homebrew/pages/editPage/editPage.less index 184aaa1f7..71465013b 100644 --- a/client/homebrew/pages/editPage/editPage.less +++ b/client/homebrew/pages/editPage/editPage.less @@ -1,25 +1,4 @@ -@keyframes glideDown { - 0% { - opacity : 0;transform : translate(-50% + 3px, 0px);} - 100% { - opacity : 1;transform : translate(-50% + 3px, 10px);} -} -.editPage { - .navItem.save { - position : relative; - width : 106px; - text-align : center; - &.saved { - color : #666666; - cursor : initial; - } - } - .googleDriveStorage { position : relative; } - .googleDriveStorage img { - height : 18px; - padding : 0px; - margin : -5px; - &.inactive { filter : grayscale(1); } - } +.editPage { + } diff --git a/client/homebrew/pages/homePage/homePage.less b/client/homebrew/pages/homePage/homePage.less index 07e2e890e..0f93d8082 100644 --- a/client/homebrew/pages/homePage/homePage.less +++ b/client/homebrew/pages/homePage/homePage.less @@ -34,17 +34,4 @@ &:hover { background-color : darken(@blue, 20%); } &.show { right : 350px; } } - - .navItem.save { - background-color : @orange; - transition : all 0.2s; - &:hover { background-color : @green; } - - &.neverSaved { - cursor : auto; - background-color : #333333; - opacity : 0; - translate : -100%; - } - } } diff --git a/client/homebrew/pages/newPage/newPage.less b/client/homebrew/pages/newPage/newPage.less index 762471418..b0591bd19 100644 --- a/client/homebrew/pages/newPage/newPage.less +++ b/client/homebrew/pages/newPage/newPage.less @@ -1,17 +1,6 @@ @import '@sharedStyles/colors.less'; .newPage { - .navItem.save { - background-color : @orange; - transition : all 0.2s; - &:hover { background-color : @green; } - - &.neverSaved { - cursor : auto; - background-color : #333333; - opacity : 0; - translate : -100%; - } - } + } diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx index 27cbc98ea..d81c47cf2 100644 --- a/client/homebrew/pages/sharePage/sharePage.jsx +++ b/client/homebrew/pages/sharePage/sharePage.jsx @@ -4,7 +4,8 @@ import Headtags from '../../../../vitreum/headtags.js'; const Meta = Headtags.Meta; import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; - +import Navbar from '../../navbar/navbar.jsx'; +import Nav from '../../navbar/nav.jsx'; import request from '../../utils/request-middleware.js'; import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js'; @@ -63,12 +64,25 @@ const SharePage = (props)=>{ document.removeEventListener('keydown', handleControlKeys); }; }, []); + + const renderEditLink = () => { + if (!currentBrew.editId) return null; + const editLink = currentBrew.googleId && !currentBrew.stubbed ? currentBrew.googleId + currentBrew.editId : currentBrew.editId; + + return ( + + + edit + + + ); + }; return (
- + {renderEditLink()}
{ const [pageState, setPageState] = useState(parseInt(props.query.page) || 1); @@ -392,6 +393,7 @@ const VaultPage = (props)=>{
+
{renderForm()}
diff --git a/client/homebrew/utils/commonEditPageFunctions.jsx b/client/homebrew/utils/commonEditPageFunctions.jsx index 156ab30cb..b13ddaaf5 100644 --- a/client/homebrew/utils/commonEditPageFunctions.jsx +++ b/client/homebrew/utils/commonEditPageFunctions.jsx @@ -24,6 +24,7 @@ import ShareNavItem from '@navbar/share.navitem.jsx'; import RecentNavItems from '@navbar/recent.navitem.jsx'; const { both: RecentNavItem } = RecentNavItems; import googleDriveIcon from '../googleDrive.svg'; +import {Dropdown} from '../../components/dropdown/dropdown.jsx'; const AUTOSAVE_KEY = 'HB_editor_autoSaveOn'; const BREWKEY = 'HB_newPage_content'; @@ -401,6 +402,15 @@ export default function useCommonEditPageFunctions(dependencies) {
{(pageName == 'editPage') && } + + + {error + ? () : (Save}> + {renderSaveButton()} + {(pageName == 'editPage') && renderAutoSaveButton()} + )} + + {currentBrew.lock && }