Discourse/discourse-subscriptions
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Campaign topic footer (#72)

Browse Source 
* UX: Restyle banner, add topic footer functionality, other updates
This commit is contained in:
Jordan Vidrine
2021-06-10 16:02:54 -05:00
committed by GitHub
parent 227c55e6f5
commit a4f36e4966
9 changed files with 189 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/javascripts/discourse/components/campaign-banner.js.es6
+12 -5
View File
@@ -10,6 +10,9 @@ export default Component.extend({
router: service(),
dismissed: false,
loading: false,
dropShadowColor: setting(
"discourse_subscriptions_campaign_banner_shadow_color"
),
isSidebar: equal(
"siteSettings.discourse_subscriptions_campaign_banner_location",
"Sidebar"
@@ -25,10 +28,6 @@ export default Component.extend({
showContributors: setting(
"discourse_subscriptions_campaign_show_contributors"
),
classNameBindings: [
"isSidebar:campaign-banner-sidebar",
"shouldShow:campaign-banner",
],
init() {
this._super(...arguments);
@@ -47,7 +46,7 @@ export default Component.extend({
didInsertElement() {
this._super(...arguments);
if (this.isSidebar && this.shouldShow) {
if (this.isSidebar && this.shouldShow && !this.site.mobileView) {
document.body.classList.add("subscription-campaign-sidebar");
} else {
document.body.classList.remove("subscription-campaign-sidebar");
@@ -67,6 +66,14 @@ export default Component.extend({
!currentRoute.split(".")[0].includes("admin") &&
currentRoute.split(".")[0] !== "s";
// make sure not to render above main container when inside a topic
if (
this.connectorName === "above-main-container" &&
currentRoute.includes("topic")
) {
return false;
}
return showOnRoute && currentUser && enabled && visible;
},
assets/javascripts/discourse/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.js
+9
View File
@@ -0,0 +1,9 @@
export default {
shouldRender(args, component) {
const { siteSettings } = component;
const bannerLocation =
siteSettings.discourse_subscriptions_campaign_banner_location;
return bannerLocation === "Top" || bannerLocation === "Sidebar";
},
};
assets/javascripts/discourse/templates/components/campaign-banner.hbs
+73 -71
View File
@@ -1,78 +1,80 @@
{{#if shouldShow}}
{{d-button
icon="times"
action="dismissBanner"
class="close"
}}
<div class="campaign-banner-info">
<h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
<p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.body'}}</p>
{{#if product}}
{{#link-to "s.show" product disabled=product.subscribed class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{else}}
{{#link-to "s" class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{/if}}
</div>
<div class="campaign-banner-progress">
{{#if isGoalMet}}
<p class="campaign-banner-progress-success">{{i18n 'discourse_subscriptions.campaign.goal'}}!</p>
{{#if subscriberGoal}}
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{else}}
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
<div class="campaign-banner" style="box-shadow: 5px 5px #{{dropShadowColor}}">
{{d-button
icon="times"
action="dismissBanner"
class="close"
}}
<div class="campaign-banner-info">
<h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
<p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.body'}}</p>
{{#if product}}
{{#link-to "s.show" product disabled=product.subscribed class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{else}}
{{#link-to "s" class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{/if}}
</div>
<div class="campaign-banner-progress">
{{#if isGoalMet}}
<p class="campaign-banner-progress-success">{{i18n 'discourse_subscriptions.campaign.goal'}}!</p>
{{#if subscriberGoal}}
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{else}}
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
</div>
</div>
</div>
{{/conditional-loading-spinner}}
{{/if}}
{{/if}}
{{else}}
{{#if subscriberGoal}}
<progress class="campaign-banner-progress-bar" value="{{subscribers}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{/conditional-loading-spinner}}
{{/if}}
{{/if}}
{{else}}
<progress class="campaign-banner-progress-bar" value="{{amountRaised}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{/if}}
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
{{#if subscriberGoal}}
<progress class="campaign-banner-progress-bar" value="{{subscribers}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}
{{i18n 'discourse_subscriptions.campaign.subscribers'}}
</p>
{{else}}
<progress class="campaign-banner-progress-bar" value="{{amountRaised}}" max="{{siteSettings.discourse_subscriptions_campaign_goal}}"/>
<p class="campaign-banner-progress-description">
{{html-safe (i18n 'discourse_subscriptions.campaign.goal_comparison' current=(format-currency currency amountRaised) goal=(format-currency currency goalTarget))}}
{{i18n 'discourse_subscriptions.campaign.raised'}}
</p>
{{/if}}
{{#if showContributors}}
{{#conditional-loading-spinner condition=loading size="small"}}
<div class="campaign-banner-progress-users">
<p class="campaign-banner-progress-users-title">
<strong>{{i18n 'discourse_subscriptions.campaign.recent_contributors'}}</strong>
</p>
<div class="campaign-banner-progress-users-avatars">
{{#each contributors as |contributor|}}
{{avatar contributor avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
{{/each}}
</div>
</div>
</div>
{{/conditional-loading-spinner}}
{{/conditional-loading-spinner}}
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{/if}}
assets/javascripts/discourse/templates/connectors/above-main-container/subscriptions-campaign.hbs
+1 -1
View File
@@ -1 +1 @@
{{campaign-banner}}
{{campaign-banner connectorName='above-main-container'}}
assets/javascripts/discourse/templates/connectors/after-topic-footer-buttons/subscriptions-campaign-topic-footer.hbs
+1
View File
@@ -0,0 +1 @@
{{campaign-banner connectorName='after-topic-footer-buttons'}}
assets/javascripts/discourse/templates/connectors/before-topic-list/subscriptions-campaign-sidebar.hbs
+1 -1
View File
@@ -1 +1 @@
{{campaign-banner}}
{{campaign-banner connectorName='before-topic-list'}}