Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit 4521b1f

Browse files
jjeffryesjjeffryes
authored
Merge pull request #1861 from OpenBazaar/addSocialReminder
Add social reminder
2 parents da059b5 + c466a63 commit 4521b1f

File tree

7 files changed

+265
-5
lines changed

7 files changed

+265
-5
lines changed

‎css/obBase.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,63 @@ h6, .h6 {
414414
padding: 0;
415415
}
416416

417+
.modal-about .supportWrapper {
418+
display: flex;
419+
height: 220px;
420+
margin: 10px 0 20px 0;
421+
}
422+
423+
.modal-about .socialReminder {
424+
position: static;
425+
width: 50%;
426+
padding: 10px;
427+
opacity: 1;
428+
background: none;
429+
box-shadow: none;
430+
transition: none;
431+
box-sizing: border-box;
432+
height: 100%;
433+
}
434+
435+
.modal-about .supportPayWrapper {
436+
display: flex;
437+
justify-content: center;
438+
align-items: center;
439+
padding: 10px;
440+
width: 50%;
441+
442+
}
443+
444+
.modal-about .socialReminder .socialLinkWrapper {
445+
flex-direction: column;
446+
height: 100%;
447+
}
448+
449+
.modal-about .socialReminder .socialLinkWrapper a {
450+
font-size: 12px;
451+
}
452+
453+
.modal-about .socialReminder .socialLink {
454+
background: #141414;
455+
width: 28px;
456+
height: 28px;
457+
padding: 0;
458+
margin-right: 2px;
459+
display: inline-block;
460+
}
461+
462+
.modal-about .socialReminder .socialLink .socialIcon {
463+
font-size: 14px;
464+
}
465+
466+
.modal-about .socialReminder .socialLink .socialIcon:before {
467+
line-height: 28px;
468+
}
469+
470+
.modal-about .socialTitle {
471+
margin-bottom: 10px;
472+
}
473+
417474
.navMoreButtons {
418475
border-bottom-left-radius: 2px;
419476
border-bottom-right-radius: 2px;
@@ -3666,6 +3723,11 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
36663723
text-decoration: none;
36673724
}
36683725

3726+
.popMenu-navBar a [class *= "ion-"]:before {
3727+
/*standardize the icon width*/
3728+
width: 1em;
3729+
}
3730+
36693731
.popMenu-navBar hr {
36703732
width: 100%;
36713733
border: 1px solid rgba(255,255,255,0.08);
@@ -4876,6 +4938,85 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
48764938
word-wrap: break-word;
48774939
}
48784940

4941+
.socialReminder {
4942+
position: fixed;
4943+
bottom: -150px;
4944+
right: 0;
4945+
z-index: 1;
4946+
width: 360px;
4947+
padding: 32px;
4948+
opacity: 0;
4949+
background: #141414;
4950+
color: #fff;
4951+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.70);
4952+
transition: bottom 1s, opacity 1s;
4953+
}
4954+
4955+
.socialReminder.show {
4956+
bottom: 0;
4957+
opacity: 1;
4958+
}
4959+
4960+
.socialReminder .socialTitle {
4961+
margin-bottom: 16px;
4962+
font-size: 16px;
4963+
}
4964+
4965+
.socialReminder .socialInfoLink {
4966+
font-style: normal;
4967+
cursor: pointer;
4968+
}
4969+
4970+
.socialReminder .socialInfoLinkInner {
4971+
font-style: normal;
4972+
text-decoration: underline;
4973+
cursor: pointer;
4974+
}
4975+
4976+
.socialReminder .socialParagraph {
4977+
line-height: 1.4;
4978+
margin-bottom: 10px;
4979+
}
4980+
4981+
.socialReminder .socialDisclaimer {
4982+
font-size: 10px;
4983+
font-style: italic;
4984+
line-height: 1.4;
4985+
margin-bottom: 20px;
4986+
}
4987+
4988+
.socialReminder .closeBtn {
4989+
position: absolute;
4990+
top: 0;
4991+
right: 0;
4992+
padding: 14px;
4993+
cursor: pointer;
4994+
font-size: 12px;
4995+
}
4996+
4997+
.socialReminder .socialLinkWrapper {
4998+
display: flex;
4999+
justify-content: space-between;
5000+
}
5001+
5002+
.socialReminder .socialLink {
5003+
background: #106DA3;
5004+
display: block;
5005+
padding: 10px;
5006+
border-radius: 50%;
5007+
width: 34px;
5008+
height: 34px;
5009+
text-align: center;
5010+
}
5011+
5012+
.socialReminder .socialIcon {
5013+
font-size: 28px;
5014+
}
5015+
5016+
.socialReminder .socialIcon:before {
5017+
line-height: 34px;
5018+
}
5019+
48795020
/*========== utility classes ==========*/
48805021

48815022
/* the #ov1 id is on the HTML tag. It is used to force specificity

‎js/languages/en-US.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -603,6 +603,7 @@
603603
"restart": "Restart Application",
604604
"about": "About OpenBazaar",
605605
"support": "Support OpenBazaar",
606+
"share": "Post About OpenBazaar",
606607
"Forward": "Forward",
607608
"Back": "Back",
608609
"newServer": "New Server",
@@ -731,6 +732,20 @@
731732
"newConfigTitle": "New Configuration",
732733
"new": "New"
733734
},
735+
"socialReminder": {
736+
"title": "OpenBazaar",
737+
"explanationLink": "(%{linkText})",
738+
"explanationLinkText": "<span class='socialInfoLinkInner'>more</span>",
739+
"explanation": "Want to see more great buyers and sellers on this worldwide marketplace with no restrictions or fees? Please click below to share a link on social media and invite more people to #TradeFree.",
740+
"disclaimer": "A page will open in your browser with some suggested content. This panel won't appear again after you close it.",
741+
"blurb": "Buy%20%26%20sell%20whatever%20you%20want%20online%20with%20no%20fees%2C%20no%20middlemen%20and%20no%20restrictions.%20Join%20%40OpenBazaar!",
742+
"shareTwitter": "Post about OB on Twitter",
743+
"shareFacebook": "Post about OB on Facebook",
744+
"sharePinterest": "Post about OB on Pinterest",
745+
"shareLinkedIn": "Post about OB on LinkedIn",
746+
"shareTumblr": "Post about OB on Tumblr",
747+
"reminder": "Help OpenBazaar Grow!"
748+
},
734749
"langChangeRestartTitle": "Restart needed for language change",
735750
"langChangeRestartMessage": "In order for your language change to fully take effect, you must restart the app.",
736751
"restartNow": "Restart Now",

‎js/start.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -571,6 +571,7 @@ launchOnboarding = function(guidCreating) {
571571
loadProfile('#userPage/' + guid + '/store', true);
572572
startUpLoadingModal.open();
573573
});
574+
localStorage.setItem('firstTime', 'true');
574575
};
575576

576577
// start - server connection and app initialization flow

‎js/templates/aboutModal.html‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,47 @@
3838
</div>
3939
<% } else if (ob.tab === 'support') { %>
4040
<div class="modal-section custCol-primary modal-about-section js-externalLinks customThemeScrollbar lineHeight20">
41-
<div class="width100 alignCenter marginBottom12">
42-
<img src="./imgs/donations.png" />
41+
<% var shareURL = "https%3A%2F%2Fopenbazaar.org" %>
42+
<div class="supportWrapper">
43+
<div class="supportPayWrapper">
44+
<img src="./imgs/donations.png" />
45+
</div>
46+
<div class="socialReminder">
47+
<div class="socialLinkWrapper">
48+
<a href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialReminder.blurb') %>&url=<%= shareURL %>&hashtags=TradeFree&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
49+
<span class="socialLink">
50+
<span class="ion-social-twitter socialIcon"></span>
51+
</span>
52+
<%= polyglot.t('socialReminder.shareTwitter') %>
53+
</a>
54+
<a href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
55+
<span class="socialLink">
56+
<span class="ion-social-facebook socialIcon"></span>
57+
</span>
58+
<%= polyglot.t('socialReminder.shareFacebook') %>
59+
</a>
60+
<a href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialReminder.blurb') %>">
61+
<span class="socialLink">
62+
<span class="ion-social-pinterest socialIcon"></span>
63+
</span>
64+
<%= polyglot.t('socialReminder.sharePinterest') %>
65+
</a>
66+
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialReminder.title') %>&summary=<%= polyglot.t('socialReminder.blurb') %>&source=OpenBazaar">
67+
<span class="socialLink">
68+
<span class="ion-social-linkedin socialIcon"></span>
69+
</span>
70+
<%= polyglot.t('socialReminder.shareLinkedIn') %>
71+
</a>
72+
<a href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialReminder.blurb') %>">
73+
<span class="socialLink">
74+
<span class="ion-social-tumblr socialIcon"></span>
75+
</span>
76+
<%= polyglot.t('socialReminder.shareTumblr') %>
77+
</a>
78+
</div>
79+
</div>
4380
</div>
81+
<h2 class="socialTitle txt-center"><%= polyglot.t('socialReminder.reminder') %></h2>
4482
<%= polyglot.t('aboutSection.support') %>
4583
</div>
4684
<% } else if (ob.tab === 'contributors') { %>

‎js/templates/pageNav.html‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@
7070
<span class="ion-android-favorite fontSize11 marginRight2 textOpacity1"></span>
7171
<%= polyglot.t('nav.support') %>
7272
</a>
73+
<a class="js-showSupportModal">
74+
<span class="ion-android-share fontSize11 marginRight2 textOpacity1"></span>
75+
<%= polyglot.t('nav.share') %>
76+
</a>
7377
</div>
7478

7579
<div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers"></div>
@@ -96,7 +100,7 @@
96100
<%= polyglot.t('nav.testMode') %>
97101
</div>
98102
<% } %>
99-
103+
100104
</div>
101105
</div>
102106
<div class="ctrlGroup">
@@ -147,3 +151,32 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
147151
<div class="fontSize11 textOpacity75 marginTop8 marginLeft7 floatLeft js-navDismisslUpdate clickable"><%= polyglot.t('softwareUpdate.dismiss') %></div>
148152
</div>
149153
</div>
154+
155+
<div class="socialReminder js-socialReminder">
156+
<% var shareURL = "https%3A%2F%2Fopenbazaar.org" %>
157+
<h3 class="socialTitle"><%= polyglot.t('socialReminder.reminder') %>&nbsp;
158+
<span class="socialInfoLink js-socialInfoLink">
159+
<%= polyglot.t('socialReminder.explanationLink', { linkText: polyglot.t('socialReminder.explanationLinkText') }) %>
160+
</span>
161+
</h3>
162+
<p class="socialParagraph hide js-socialParagraph"><%= polyglot.t('socialReminder.explanation') %></p>
163+
<p class="socialDisclaimer hide js-socialParagraph"><%= polyglot.t('socialReminder.disclaimer') %></p>
164+
<div class="closeBtn js-socialCloseBtn"><i class="ion-close"></i></div>
165+
<div class="socialLinkWrapper">
166+
<a class="socialLink" href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialReminder.blurb') %>&url=<%= shareURL %>&hashtags=TradeFree&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
167+
<span class="ion-social-twitter socialIcon"></span>
168+
</a>
169+
<a class="socialLink" href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
170+
<span class="ion-social-facebook socialIcon"></span>
171+
</a>
172+
<a class="socialLink" href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialReminder.blurb') %>">
173+
<span class="ion-social-pinterest socialIcon"></span>
174+
</a>
175+
<a class="socialLink" href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialReminder.title') %>&summary=<%= polyglot.t('socialReminder.blurb') %>&source=OpenBazaar">
176+
<span class="ion-social-linkedin socialIcon"></span>
177+
</a>
178+
<a class="socialLink" href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialReminder.blurb') %>">
179+
<span class="ion-social-tumblr socialIcon"></span>
180+
</a>
181+
</div>
182+
</div>

‎js/views/buyWizardVw.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -670,6 +670,13 @@ module.exports = baseModal.extend({
670670
var notificationSound = document.createElement('audio');
671671
notificationSound.setAttribute('src', './audio/notification.mp3');
672672
notificationSound.play();
673+
674+
// if this is a new user, show the social sharing panel
675+
if (localStorage.getItem('firstTime') === 'true') {
676+
$('.js-socialReminder').addClass('show');
677+
localStorage.setItem('firstTime', 'false');
678+
}
679+
673680
},
674681

675682
openCountrySelect: function(){

‎js/views/pageNavVw.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,9 @@ module.exports = baseVw.extend({
4343
'mouseenter .js-serverSubmenuTrigger': 'mouseenterServerSubmenuTrigger',
4444
'mouseleave .js-serverSubmenuTrigger': 'mouseleaveServerSubmenuTrigger',
4545
'mouseenter .js-serverSubmenu': 'mouseenterServerSubmenu',
46-
'mouseleave .js-serverSubmenu': 'mouseleaveServerSubmenu'
46+
'mouseleave .js-serverSubmenu': 'mouseleaveServerSubmenu',
47+
'click .js-socialCloseBtn': 'clickSocialCloseBtn',
48+
'click .js-socialInfoLink': 'clickSocialInfoLink',
4749
},
4850

4951
initialize: function(options){
@@ -56,6 +58,9 @@ module.exports = baseVw.extend({
5658
this.languages = new languagesModel();
5759
this.showDiscIntro = options.showDiscIntro;
5860

61+
this.showSocial = localStorage.getItem('showSocial') !== 'hide' &&
62+
localStorage.getItem('firstTime') !== 'true';
63+
5964
this.listenTo(window.obEventBus, "updateProfile", function(){
6065
this.refreshProfile();
6166
});
@@ -331,7 +336,9 @@ module.exports = baseVw.extend({
331336
var connectedServer = app.serverConnectModal.getConnectedServer();
332337

333338
self.$el.html(loadedTemplate(
334-
__.extend(self.model.toJSON(), { connectedServer: connectedServer && connectedServer.toJSON() })
339+
__.extend(self.model.toJSON(), {
340+
connectedServer: connectedServer && connectedServer.toJSON(),
341+
})
335342
));
336343

337344
self.$notifMenu = self.$('.js-navNotificationsMenu');
@@ -372,6 +379,8 @@ module.exports = baseVw.extend({
372379
self.$statusBar = self.$el.find('.js-navStatusBar');
373380
self.$serverSubmenu = self.$('.js-serverSubmenu');
374381
self.$serverSubmenuTrigger = self.$('.js-serverSubmenuTrigger');
382+
self.$socialReminder = self.$('.js-socialReminder');
383+
self.$socialParagraph = self.$('.js-socialParagraph');
375384

376385
self.suggestionsVw && self.suggestionsVw.remove();
377386
self.suggestionsVw = new SuggestionsVw({
@@ -400,11 +409,27 @@ module.exports = baseVw.extend({
400409
self.aboutModal.render();
401410
self.registerChild(self.aboutModal);
402411
}
412+
413+
if (self.showSocial) {
414+
setTimeout(function() {
415+
self.$socialReminder.addClass('show');
416+
}, 10000);
417+
}
418+
403419
});
404420

405421
return this;
406422
},
407423

424+
clickSocialCloseBtn: function() {
425+
this.$socialReminder.removeClass('show');
426+
localStorage.setItem('showSocial', 'hide');
427+
},
428+
429+
clickSocialInfoLink: function() {
430+
this.$socialParagraph.toggleClass('hide');
431+
},
432+
408433
showAboutModal: function(){
409434
this.cleanNav();
410435
this.aboutModal.setTab('about')

0 commit comments

Comments
 (0)