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 8 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
38 changes: 35 additions & 3 deletions static/css/s2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13264,8 +13264,9 @@ span.ref-link-color-3 {color: blue}
}

.dropdownItem {
padding: 10px 0px 5px 10px !important;
padding: 10px 5px !important;
flex-direction: column;
margin-inline-start: 5px;
}

.dropdownSeparator {
Expand Down Expand Up @@ -13296,15 +13297,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 @@ -13349,6 +13350,37 @@ span.ref-link-color-3 {color: blue}
color: #666666;
}

.languageHeader {
padding-right: 10px;
padding-left: 10px;
padding-top: 4px;
padding-bottom: 2px;
font-size: 12px;
font-weight: 400;
line-height: 18px;
/* text-align: left; */
color: var(--medium-grey);

}

.languageToggleFlexContainer{
display: flex;
flex-direction: row;
/* padding: 10px 0px; */
align-items: baseline;
line-height: 18px;
height: 23px;
padding-bottom: 15px;
}

.languageDot{
font-size: 25px;
padding: 10px 2px;
}

.dropdownLinks-button .profile-pic {
padding-top: 7px;
}

@-webkit-keyframes load5 {
0%,100%{box-shadow:0 -2.6em 0 0 #ffffff,1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.5),-1.8em -1.8em 0 0 rgba(0,0,0,0.7)}
Expand Down
3 changes: 3 additions & 0 deletions static/icons/logged_out.svg
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this icon in this PR if the PR is for logged in menu?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mistake, taking out. Thanks for catching :)

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 66 additions & 15 deletions static/js/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,74 @@ import {Autocomplete} from './Autocomplete'
import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu';


const LoggedInDropdown = () => {

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

return (
<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>
);
}


const ModuleSwitcher = () => {
return (
<DropdownMenu>
<DropdownMenuItem url={'/'}>
<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.sefaria.org'}>
<DropdownMenuItem url={'//sheets.sefaria.org'} newTab={true}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are these double slashes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To make the URL not relative (i.e. route to sheets.sefaria.org vs localhost:8000/sheets.sefaria.org). It's a bit hacky, is there a better way to do this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be /sheets, confirm with SK.

<DropdownMenuItemWithIcon icon={'/static/icons/sheets_icon.svg'} textEn={'Sheets'} textHe={'דפים'}/>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'//developers.sefaria.org'}>
<DropdownMenuItem url={'//developers.sefaria.org'} newTab={true}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switch to full URL

<DropdownMenuItemWithIcon icon={'/static/icons/developers_icon.svg'} textEn={'Developers'} textHe={'מפתחים'}/>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem url={'//sefaria.org/products'}>
<DropdownMenuItem url={'//sefaria.org/products'} newTab={true}>
<InterfaceText text={{'he':'לכל המוצרים שלנו', 'en': 'See all products ›'}} />
</DropdownMenuItem>

Expand Down Expand Up @@ -87,21 +139,20 @@ class Header extends Component {
openURL={this.props.openURL}
/>

{ !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
<InterfaceLanguageMenu
currentLang={Sefaria.interfaceLang}
translationLanguagePreference={this.props.translationLanguagePreference}
setTranslationLanguagePreference={this.props.setTranslationLanguagePreference} /> : null}


<ModuleSwitcher />

{ Sefaria._uid ?
<LoggedInButtons headerMode={this.props.headerMode}/>
<LoggedInDropdown />
: <LoggedOutButtons headerMode={this.props.headerMode}/>
}

{ !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
<ModuleSwitcher /> : null}

{ !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ?
<InterfaceLanguageMenu
currentLang={Sefaria.interfaceLang}
translationLanguagePreference={this.props.translationLanguagePreference}
setTranslationLanguagePreference={this.props.setTranslationLanguagePreference} /> : null}

</div>
</>
);
Expand Down
19 changes: 13 additions & 6 deletions static/js/common/DropdownMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,15 @@ const DropdownMenuSeparator = () => {

}

const DropdownMenuItem = ({url, children}) => {
const DropdownMenuItem = ({url, children, newTab}) => {

if (!newTab){
newTab = false;
}

return (

<a className={`interfaceLinks-option int-bi dropdownItem`} href={url} target="_blank">
<a className={`interfaceLinks-option int-bi dropdownItem`} href={url} target={newTab ? '_blank' : null}>
{children}
</a>

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

const DropdownMenu = ({children}) => {
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 @@ -73,7 +78,9 @@ const DropdownMenu = ({children}) => {

return (
<div className="dropdownLinks" ref={wrapperRef}>
<a className="dropdownLinks-button" onClick={handleClick}><img src="/static/icons/module_switcher_icon.svg" alt={Sefaria._('Toggle Module Switcher')}/></a>
<a className="dropdownLinks-button" onClick={handleClick}>
{menuIconComponent}
</a>
<div className={`dropdownLinks-menu ${ isOpen ? "open" : "closed"}`}>
<div className="dropdownLinks-options">
{children}
Expand All @@ -87,6 +94,6 @@ const DropdownMenu = ({children}) => {
export {
DropdownMenu,
DropdownMenuSeparator,
DropdownMenuItem,
DropdownMenuItemWithIcon
DropdownMenuItemWithIcon,
DropdownMenuItem
};
Loading