Skip to content

Commit 70f23f9

Browse files
Merge pull request #2353 from Sefaria/feature/sc-32572/stopgap-banner-in-new-editor-encourages-learning
Feature/sc 32572/stopgap banner in new editor encourages learning
2 parents 257a51d + d80a56b commit 70f23f9

File tree

5 files changed

+106
-48
lines changed

5 files changed

+106
-48
lines changed

e2e-tests/tests/banner.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ test('Banner links exist - English', async ({ context }) => {
2121
expect(getPathAndParams(page.url())).toBe("/texts")
2222

2323
// Testing Topics link
24-
await page.getByRole('banner').getByRole('link', { name: 'Topics' }).click();
24+
await page.getByRole('banner').getByRole('link', { name: 'Explore' }).click();
2525
expect(getPathAndParams(page.url())).toBe("/topics")
2626

2727
// Testing Community link

static/css/s2.css

+19-9
Original file line numberDiff line numberDiff line change
@@ -395,19 +395,23 @@ body.hasBannerMessage #s2.headerOnly {
395395
.interface-hebrew #bannerMessage {
396396
direction: rtl;
397397
}
398+
.genericBanner #bannerMessageClose {
399+
font-size: 40px;
400+
opacity: revert;
401+
inset-inline-end: 60px;
402+
top: revert;
403+
border: none;
404+
background: none;
405+
}
398406
#bannerMessageClose {
399407
position: absolute;
400408
top: -3px;
401-
right: 7px;
409+
inset-inline-end: 7px;
402410
color: white;
403411
opacity: 0.5;
404412
font-size: 26px;
405413
cursor: pointer;
406414
}
407-
.interface-hebrew #bannerMessageClose {
408-
right: auto;
409-
left: 7px;
410-
}
411415
#bannerMessageContent {
412416
display: flex;
413417
flex: 1;
@@ -9295,7 +9299,7 @@ body.interface-english .publishBox .react-tags__suggestions ul {
92959299
}
92969300
.editorSidebarToggle {
92979301
position: fixed;
9298-
top: 150px;
9302+
top: 200px;
92999303
right: 30px;
93009304
height: 30px;
93019305
width: 30px;
@@ -11882,7 +11886,7 @@ cursor: pointer;
1188211886
#staticContentWrapper .editorToggleHeader {
1188311887
margin: revert;
1188411888
}
11885-
.editorToggleHeader {
11889+
.editorToggleHeader, .genericBanner {
1188611890
padding-inline: 10%;
1188711891
background-color: var(--sefaria-blue);
1188811892
color: white;
@@ -11892,14 +11896,20 @@ cursor: pointer;
1189211896
margin-bottom: 80px;
1189311897
display: flex;
1189411898
justify-content: center;
11899+
--english-font: var(--english-sans-serif-font-family);
11900+
--hebrew-font: var(--hebrew-sans-serif-font-family);
1189511901
gap: 5px;
1189611902
align-items: center;
1189711903
}
1189811904

11899-
.interface-hebrew .editorToggleHeader {
11905+
.genericBanner {
11906+
margin-block: revert;
11907+
}
11908+
11909+
.interface-hebrew .editorToggleHeader, .interface-hebrew .genericBanner {
1190011910
direction: rtl;
1190111911
}
11902-
.editorToggleHeader .button {
11912+
.editorToggleHeader .button, .genericBanner .button {
1190311913
white-space: nowrap;
1190411914
padding: 5px 8px;
1190511915
height: 30px;

static/js/Misc.jsx

+42
Original file line numberDiff line numberDiff line change
@@ -2064,6 +2064,47 @@ const InterruptingMessage = ({
20642064
};
20652065
InterruptingMessage.displayName = "InterruptingMessage";
20662066

2067+
const GenericBanner = ({message, children}) => {
2068+
return (
2069+
<div className="genericBanner">
2070+
{<InterfaceText>{message}</InterfaceText> }
2071+
{children}
2072+
</div>);
2073+
}
2074+
2075+
const LearnAboutNewEditorBanner = () => {
2076+
const cookieName = "learned_about_new_editor";
2077+
const shouldShowNotification = Sefaria._inBrowser && !document.cookie.includes(cookieName);
2078+
const [showNotification, toggleShowNotification] = useState(shouldShowNotification);
2079+
const [enURL, heURL] = ["/sheets/393695", "/sheets/399333"];
2080+
const linkURL = Sefaria._v({en: enURL, he: heURL});
2081+
2082+
const handleLearnMoreClick = () => {
2083+
window.open(linkURL, '_blank');
2084+
};
2085+
2086+
const setCookie = () => {
2087+
$.cookie(cookieName, 1, {path: "/", expires: 20*365});
2088+
toggleShowNotification(false);
2089+
}
2090+
2091+
if (!showNotification) {
2092+
return null;
2093+
}
2094+
return (
2095+
<GenericBanner
2096+
message="Welcome to the updated source sheet editor! Check out our step-by-step guide to the new interface."
2097+
>
2098+
{
2099+
<button className="button white" onClick={() => {handleLearnMoreClick(); setCookie();}}>
2100+
<InterfaceText>Get Started</InterfaceText>
2101+
</button>
2102+
}
2103+
<button id="bannerMessageClose" onClick={setCookie}>×</button>
2104+
</GenericBanner>
2105+
);
2106+
};
2107+
20672108
const Banner = ({ onClose }) => {
20682109
const [bannerShowDelayHasElapsed, setBannerShowDelayHasElapsed] =
20692110
useState(false);
@@ -3265,4 +3306,5 @@ export {
32653306
LangSelectInterface,
32663307
PencilSourceEditor,
32673308
SmallBlueButton,
3309+
LearnAboutNewEditorBanner
32683310
};

static/js/Sheet.jsx

+42-38
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
SheetAuthorStatement,
1616
SheetTitle,
1717
CollectionStatement,
18+
LearnAboutNewEditorBanner,
1819
} from './Misc';
1920
import {ProfilePic} from "./ProfilePic";
2021

@@ -105,50 +106,53 @@ class Sheet extends Component {
105106
}
106107
else {
107108
content = (
108-
<SheetContent
109-
sheetNotice={sheet.sheetNotice}
110-
sources={sheet.sources}
111-
title={sheet.title}
112-
handleClick={this.handleClick}
113-
sheetSourceClick={this.props.onSegmentClick}
114-
highlightedNode={this.props.highlightedNode}
115-
highlightedRefsInSheet={this.props.highlightedRefsInSheet}
116-
scrollToHighlighted={this.props.scrollToHighlighted}
117-
authorStatement={sheet.ownerName}
118-
authorUrl={sheet.ownerProfileUrl}
119-
authorImage={sheet.ownerImageUrl}
120-
collectionName={sheet.collectionName}
121-
collectionSlug={sheet.displayedCollection}
122-
collectionImage={sheet.collectionImage}
123-
editable={Sefaria._uid === sheet.owner}
124-
hasSidebar={this.props.hasSidebar}
125-
setSelectedWords={this.props.setSelectedWords}
126-
sheetNumbered={sheet.options.numbered}
127-
hideImages={!!sheet.hideImages}
128-
sheetID={sheet.id}
129-
/>
130-
);
131-
}
132-
return (
133-
<div className={classes}>
134-
{ sheet && Sefaria._uid === sheet.owner && Sefaria._uses_new_editor ?
135-
<div className="sheetContent">
136-
<SefariaEditor
137-
data={sheet}
138-
hasSidebar={this.props.hasSidebar}
109+
<div className={classes}>
110+
<SheetContent
111+
sheetNotice={sheet.sheetNotice}
112+
sources={sheet.sources}
113+
title={sheet.title}
139114
handleClick={this.handleClick}
140-
multiPanel={this.props.multiPanel}
141115
sheetSourceClick={this.props.onSegmentClick}
142116
highlightedNode={this.props.highlightedNode}
143117
highlightedRefsInSheet={this.props.highlightedRefsInSheet}
144-
setDivineNameReplacement={this.props.setDivineNameReplacement}
145-
divineNameReplacement={this.props.divineNameReplacement}
118+
scrollToHighlighted={this.props.scrollToHighlighted}
119+
authorStatement={sheet.ownerName}
120+
authorUrl={sheet.ownerProfileUrl}
121+
authorImage={sheet.ownerImageUrl}
122+
collectionName={sheet.collectionName}
123+
collectionSlug={sheet.displayedCollection}
124+
collectionImage={sheet.collectionImage}
125+
editable={Sefaria._uid === sheet.owner}
126+
hasSidebar={this.props.hasSidebar}
127+
setSelectedWords={this.props.setSelectedWords}
128+
sheetNumbered={sheet.options.numbered}
129+
hideImages={!!sheet.hideImages}
130+
sheetID={sheet.id}
146131
/>
147-
</div>
148-
:
149-
content }
150132
</div>
151-
);
133+
);
134+
}
135+
const editor = (
136+
<>
137+
<LearnAboutNewEditorBanner/>
138+
<div className={classes}>
139+
<div className="sheetContent">
140+
<SefariaEditor
141+
data={sheet}
142+
hasSidebar={this.props.hasSidebar}
143+
handleClick={this.handleClick}
144+
multiPanel={this.props.multiPanel}
145+
sheetSourceClick={this.props.onSegmentClick}
146+
highlightedNode={this.props.highlightedNode}
147+
highlightedRefsInSheet={this.props.highlightedRefsInSheet}
148+
setDivineNameReplacement={this.props.setDivineNameReplacement}
149+
divineNameReplacement={this.props.divineNameReplacement}
150+
/>
151+
</div>
152+
</div>
153+
</>);
154+
const usingEditor = sheet && Sefaria._uid === sheet.owner && Sefaria._uses_new_editor;
155+
return ( usingEditor ? editor : content )
152156
}
153157
}
154158

static/js/sefaria/strings.js

+2
Original file line numberDiff line numberDiff line change
@@ -535,8 +535,10 @@ const Strings = {
535535
"Go back to old version": "חזרה לגרסה הישנה",
536536
"Request for Feedback": "נא למלא משוב",
537537
"Thank you for trying the new Sefaria editor! We’d love to hear what you thought. Please take a few minutes to give us feedback on your experience.": "תודה שניסית את עורך ספריא החדש! נשמח מאוד לשמוע את דעתך עליו. אנו מבקשים ממך להקדיש כמה דקות למילוי משוב על חוויית השימוש שלך.",
538+
"Welcome to the updated source sheet editor! Check out our step-by-step guide to the new interface.": "תחדשו! הנכם משתמשים כעת בתוכנה העדכנית לעריכת דפי מקורות בספריא. למדו עוד על השימוש בתוכנה בעזרת המדריך המלא למשתמשים חדשים.",
538539
"Did you encounter any issues while using the new editor? For example:": "האם נתקלת בבעיות בעת השימוש בעורך החדש? למשל...",
539540
"Technical problems": "בעיות טכניות",
541+
"Get Started": "התחילו כאן",
540542
"Difficulties using the editor": "קושי להשתמש בעורך",
541543
"Missing features": "תכונות חסרות",
542544
"Tell us about it...": "ספר/י לנו על כך...",

0 commit comments

Comments
 (0)