Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update drop drown for logged in desktop (library) #2021

Merged
merged 10 commits into from
Nov 20, 2024
Merged

Update drop drown for logged in desktop (library) #2021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1b6585a
feat(secondary nav): First pass at logged-in desktop for library
saengel Aug 7, 2024
8deea5f
feat(secondary nav): First pass at working language toggle
saengel Aug 7, 2024
5c14761
feat(secondary nav): style polish
saengel Aug 11, 2024
5fb7fec
feat(secondary nav): fix language spacing
saengel Aug 15, 2024
7dc05f1
feat(secondary nav): module switcher refactor to accept component for…
saengel Sep 4, 2024
22308f8
chore(secondary nav): remove chevron css, no longer in spec
saengel Sep 4, 2024
2317486
chore(secondary nav): Fix alignment
saengel Sep 4, 2024
ac5353b
chore(secondary nav): Hebrew language fixes, css ironing out
saengel Sep 4, 2024
e09d442
chore(secondary nav): remove logged_out.svg file
saengel Nov 10, 2024
b737125
chore(logged-in): Merge in modularization-main, resolve missing piece…
saengel Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions static/css/s2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7640,7 +7640,6 @@ But not to use a display block directive that might break continuous mode for ot
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 4px;
}
.profile-page {
background-color: var(--lightest-grey);
Expand Down Expand Up @@ -13495,6 +13494,7 @@ span.ref-link-color-3 {color: blue}
padding: 10px 5px !important;
flex-direction: column;
margin-inline-start: 5px;

}

.dropdownSeparator {
Expand All @@ -13504,6 +13504,7 @@ span.ref-link-color-3 {color: blue}
display: block;
align-items: center;
margin-top: 2px;
margin-bottom: 4px;
color: #666;
cursor: pointer;
position: relative;
Expand All @@ -13525,15 +13526,15 @@ span.ref-link-color-3 {color: blue}
margin-inline-end: 6px;
}

.header .dropdownLinks a.dropdownLinks-button::after {
/* .header .dropdownLinks a.dropdownLinks-button::after {
display: inline-block;
background: no-repeat url("/static/icons/chevron-down.svg");
height: 10px;
width: 12px;
vertical-align: middle;
content: "";
transform: scale(0.75);
}
} */
.header .dropdownLinks .dropdownLinks-menu {
top: 35px;
position: absolute;
Expand Down Expand Up @@ -13812,7 +13813,6 @@ span.ref-link-color-3 {color: blue}
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
color: var(--medium-grey);

}
Expand Down
105 changes: 78 additions & 27 deletions static/js/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {Autocomplete} from './Autocomplete'
import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu';


const LoggedOutMenu = () => {
const LoggedOutDropdown = () => {
const [isClient, setIsClient] = useState(false);
const [next, setNext] = useState("/");
const [loginLink, setLoginLink] = useState("/login?next=/");
Expand All @@ -40,12 +40,12 @@ const LoggedOutMenu = () => {
return encodeURIComponent(Sefaria.util.currentPath());
}
return (
<DropdownMenu menu_icon={'/static/icons/logged_out.svg'}>
<DropdownMenu menuIconComponent={<img src='/static/icons/logged_out.svg' />}>
<DropdownMenuItem url={loginLink}>
Log in
<InterfaceText text={{'en': 'Log in', 'he': 'התחברות'}} />
</DropdownMenuItem>
<DropdownMenuItem url={registerLink}>
Sign up
<InterfaceText text={{'en': 'Sign up', 'he': 'להרשמה'}} />
</DropdownMenuItem>
<DropdownMenuSeparator />
<div className="languageHeader">
Expand All @@ -64,37 +64,88 @@ const LoggedOutMenu = () => {
</div>
<DropdownMenuSeparator />
<DropdownMenuItem url={'/updates'}>
New additions
<InterfaceText text={{'en': 'New Additions', 'he': 'חידושים בארון הספרים של ספריא'}} />
</DropdownMenuItem>
<DropdownMenuItem url={'/help'}>
Help
<InterfaceText text={{'en': 'Help', 'he': 'עזרה'}} />
</DropdownMenuItem>

</DropdownMenu>
);
}


const ModuleSwitcher = () => {
const LoggedInDropdown = () => {

const getCurrentPage = () => {
return encodeURIComponent(Sefaria.util.currentPath());
}

return (
<DropdownMenu menu_icon={'/static/icons/module_switcher_icon.svg'}>
<DropdownMenuItem url={'/'} newTab={true}>
<DropdownMenuItemWithIcon icon={'/static/icons/library_icon.svg'} textEn={'Library'} textHe={'ספריה'} />
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'//sheets.sefaria.org'} newTab={true}>
<DropdownMenuItemWithIcon icon={'/static/icons/sheets_icon.svg'} textEn={'Sheets'} textHe={'דפים'}/>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'//developers.sefaria.org'} newTab={true}>
<DropdownMenuItemWithIcon icon={'/static/icons/developers_icon.svg'} textEn={'Developers'} textHe={'מפתחים'}/>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'//sefaria.org/products'} newTab={true}>
<InterfaceText text={{'he':'לכל המוצרים שלנו', 'en': 'See all products ›'}} />
</DropdownMenuItem>
<DropdownMenu menuIconComponent={<ProfilePic
url={Sefaria.profile_pic_url}
name={Sefaria.full_name}
len={25}
/>
}>
<DropdownMenuItem>
<strong>{Sefaria.full_name}</strong>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'/settings/account'}>
<InterfaceText>Account Settings</InterfaceText>
</DropdownMenuItem>
<DropdownMenuItem url={'/torahtracker'}>
<InterfaceText text={{'en': 'Torah Tracker', 'he': 'לימוד במספרים'}} />
</DropdownMenuItem>
<DropdownMenuSeparator />
<div className="languageHeader">
<InterfaceText>Site Language</InterfaceText>
</div>
<div className='languageToggleFlexContainer'>
<DropdownMenuItem url={`/interface/english?next=${getCurrentPage()}`}>
English
</DropdownMenuItem>
<span className="languageDot">&#183;</span>
<DropdownMenuItem url={`/interface/hebrew?next=${getCurrentPage()}`}>
עברית
</DropdownMenuItem>
</div>
<DropdownMenuSeparator />
<DropdownMenuItem url={'/notifications'}>
<InterfaceText text={{'en': 'New Additions', 'he': 'חידושים בארון הספרים של ספריא'}} />
</DropdownMenuItem>
<DropdownMenuItem url={'/help'}>
<InterfaceText text={{'en': 'Help', 'he': 'עזרה'}} />
</DropdownMenuItem>
<DropdownMenuSeparator/>
<DropdownMenuItem url={'/logout'}>
<InterfaceText text={{'en': 'Log Out', 'he': 'ניתוק'}} />
</DropdownMenuItem>
</DropdownMenu>
);
}

</DropdownMenu>

const ModuleSwitcher = () => {
return (
<DropdownMenu menuIconComponent={<img src='/static/icons/module_switcher_icon.svg'/>}>
<DropdownMenuItem url={'/'} newTab={true}>
<DropdownMenuItemWithIcon icon={'/static/icons/library_icon.svg'} textEn={'Library'} textHe={'ספריה'} />
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'/sheets'} newTab={true}>
<DropdownMenuItemWithIcon icon={'/static/icons/sheets_icon.svg'} textEn={'Sheets'} textHe={'דפים'}/>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'https://developers.sefaria.org'} newTab={true}>
<DropdownMenuItemWithIcon icon={'/static/icons/developers_icon.svg'} textEn={'Developers'} textHe={'מפתחים'}/>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'/products'} newTab={true}>
<InterfaceText text={{'he':'לכל המוצרים שלנו', 'en': 'See all products ›'}} />
</DropdownMenuItem>
</DropdownMenu>
);
}
class Header extends Component {
Expand Down Expand Up @@ -143,7 +194,7 @@ class Header extends Component {
openURL={this.props.openURL}
/>

{ !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
{ !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
<InterfaceLanguageMenu
currentLang={Sefaria.interfaceLang}
translationLanguagePreference={this.props.translationLanguagePreference}
Expand All @@ -153,8 +204,8 @@ class Header extends Component {
<ModuleSwitcher />

{ Sefaria._uid ?
<LoggedInButtons headerMode={this.props.headerMode}/>
: <LoggedOutMenu currentLang={Sefaria.interfaceLang}/>
<LoggedInDropdown />
: <LoggedOutDropdown currentLang={Sefaria.interfaceLang}/>
}

</div>
Expand Down
11 changes: 4 additions & 7 deletions static/js/common/DropdownMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import React, {useContext, useEffect, useRef, useState} from 'react';
import { InterfaceText } from '../Misc';


// Todo
// Fix the styling on the 'dropdown item' (regular one)
// Restore the header to also show the globe icon

const DropdownMenuSeparator = () => {

return (
Expand Down Expand Up @@ -45,7 +40,7 @@ const DropdownMenuItemWithIcon = ({icon, textEn, textHe}) => {
);
}

const DropdownMenu = ({children, menu_icon}) => {
const DropdownMenu = ({children, menuIconComponent}) => {
saengel marked this conversation as resolved.
Show resolved Hide resolved
const [isOpen, setIsOpen] = useState(false);
const wrapperRef = useRef(null);

Expand Down Expand Up @@ -78,7 +73,9 @@ const DropdownMenu = ({children, menu_icon}) => {

return (
<div className="dropdownLinks" ref={wrapperRef}>
<a className="dropdownLinks-button" onClick={handleClick}><img src={menu_icon} alt={Sefaria._('Dropdown menu')}/></a>
<a className="dropdownLinks-button" onClick={handleClick}>
{menuIconComponent}
</a>
<div className={`dropdownLinks-menu ${ isOpen ? "open" : "closed"}`}>
<div className="dropdownLinks-options">
{children}
Expand Down
Loading