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

Jump to bottom

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

Open
wants to merge 9 commits into
base: modularization-main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 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
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
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}) => {
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 you passing in here? another react component as a prop? thats generally not considered a good practice...

Copy link
Contributor

Choose a reason for hiding this comment

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

If you need to be able to insert a dynamic component the way to do it is composability, as we have done with the rest of the menu.
Further break down the top components so you can render the menu icon component inline as children.
For example

  <DropdownMenu>
     <ProfilePic>
     <DropDownMenuContents>
        <DropDownMenuItem>
        .....
     </DropDownMenuContents>
 </DropdownMenu>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for pointing this out! I didn't realize, and really appreciate learning about better React practices.

I will push back a drop - in this case, I needed parity with the code that renders the "initials" when a profile image is not present, and needed to structure the code this way iirc to enable that in both PRs. Happy to discuss more, and hear your insights as to if there's a better and more proper React way of doing this. Thanks!

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
};