Added expenses to sidebar in app

2020-01-21 16:07:58 -05:00
parent 5a8d386683
commit 05d4c921a8
12 changed files with 146 additions and 8 deletions
--- a/app/javascript/gabsocial/components/sidebar_menu.js
+++ b/app/javascript/gabsocial/components/sidebar_menu.js
@@ -14,6 +14,7 @@ import { closeSidebar } from '../actions/sidebar';
 import { shortNumberFormat } from '../utils/numbers';
 import { me } from '../initial_state';
 import { makeGetAccount } from '../selectors';
+import ProgressPanel from '../features/ui/components/progress_panel';

 const messages = defineMessages({
  followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -33,6 +34,7 @@ const messages = defineMessages({
  trends: { id: 'promo.trends', defaultMessage: 'Trends' },
  search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
  shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
+  donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
 })

 const mapStateToProps = state => {
@@ -139,6 +141,10 @@ class SidebarMenu extends ImmutablePureComponent {

            </div>

+            <div className='sidebar-menu__section'>
+              <ProgressPanel />
+            </div>
+
            <div className='sidebar-menu__section sidebar-menu__section--borderless'>
              <NavLink className='sidebar-menu-item' to={`/${acct}`} onClick={this.handleSidebarClose}>
                <Icon id='user' fixedWidth />
@@ -151,10 +157,14 @@ class SidebarMenu extends ImmutablePureComponent {
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.pro)}</span>
                </a>
              }
-                <a className='sidebar-menu-item' href='https://shop.dissenter.com'>
-                  <Icon id='shopping-cart' fixedWidth />
-                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.shop)}</span>
-                </a>
+              <a className='sidebar-menu-item' href='https://shop.dissenter.com/category/donations'>
+                <Icon id='heart' fixedWidth />
+                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate)}</span>
+              </a>
+              <a className='sidebar-menu-item' href='https://shop.dissenter.com'>
+                <Icon id='shopping-cart' fixedWidth />
+                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.shop)}</span>
+              </a>
              <a className='sidebar-menu-item' href='https://trends.gab.com'>
                <Icon id='signal' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.trends)}</span>
@@ -163,10 +173,6 @@ class SidebarMenu extends ImmutablePureComponent {
                <Icon id='search' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.search)}</span>
              </NavLink>
-              <a className='sidebar-menu-item' href='https://apps.gab.com'>
-                <Icon id='th' fixedWidth />
-                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.apps)}</span>
-              </a>
              <a className='sidebar-menu-item' href='/settings/preferences'>
                <Icon id='cog' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.preferences)}</span>
--- a/app/javascript/gabsocial/features/ui/components/progress_panel.js
+++ b/app/javascript/gabsocial/features/ui/components/progress_panel.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { monthlyExpensesComplete } from '../../../initial_state';
+
+export default class ProgressPanel extends React.PureComponent {
+  render() {
+    if (!monthlyExpensesComplete) return null;
+
+    const style = {
+      width: `${monthlyExpensesComplete}%`,
+    };
+
+    return (
+      <div className='wtf-panel progress-panel'>
+        <div className='wtf-panel-header progress-panel-header'>
+          <div className='wtf-panel-header__label'>Gab's Operational Expenses</div>
+        </div>
+        <div className='wtf-panel__content progress-panel__content'>
+          <span className='progress-panel__text'>We are 100% funded by you.</span>
+          <div className='progress-panel__bar-container'>
+            <a className='progress-panel__bar' style={style} href='https://shop.dissenter.com/category/donations'>
+              <span className='progress-panel__bar__text'>{monthlyExpensesComplete}% covered this month</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
--- a/app/javascript/gabsocial/features/ui/components/promo_panel.js
+++ b/app/javascript/gabsocial/features/ui/components/promo_panel.js
@@ -35,6 +35,13 @@ class PromoPanel extends React.PureComponent {
          }

          <div className={`promo-panel-item ${!isPro ? 'promo-panel-item--top-rounded' : ''}`}>
+            <a className='promo-panel-item__btn promo-panel-item__btn--special' href='https://shop.dissenter.com/category/donations'>
+              <Icon id='heart' className='promo-panel-item__icon' fixedWidth />
+              <FormattedMessage id='promo.donation' defaultMessage='Make a Donation' />
+            </a>
+          </div>
+
+          <div className='promo-panel-item'>
            <a className='promo-panel-item__btn' href='https://shop.dissenter.com'>
              <Icon id='shopping-cart' className='promo-panel-item__icon' fixedWidth />
              <FormattedMessage id='promo.store' defaultMessage='Store - Buy Merch' />
--- a/app/javascript/gabsocial/initial_state.js
+++ b/app/javascript/gabsocial/initial_state.js
@@ -25,5 +25,6 @@ export const isStaff = getMeta('is_staff');
 export const forceSingleColumn = !getMeta('advanced_layout');
 export const promotions = initialState && initialState.promotions;
 export const unreadCount = getMeta('unread_count');
+export const monthlyExpensesComplete = getMeta('monthly_expenses_complete');

 export default initialState;
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -10,6 +10,7 @@ import UserPanel from '../features/ui/components/user_panel';
 import ComposeFormContainer from '../features/compose/containers/compose_form_container';
 import Avatar from '../components/avatar';
 import GroupSidebarPanel from '../features/groups/sidebar_panel';
+import ProgressPanel from '../features/ui/components/progress_panel';

 const mapStateToProps = state => ({
  account: state.getIn(['accounts', me]),
@@ -28,6 +29,7 @@ class HomePage extends ImmutablePureComponent {
            <div className='columns-area__panels__pane columns-area__panels__pane--left'>
              <div className='columns-area__panels__pane__inner'>
                <UserPanel />
+                <ProgressPanel />
                <PromoPanel />
                <LinkFooter />
              </div>
--- a/app/javascript/styles/gabsocial/components.scss
+++ b/app/javascript/styles/gabsocial/components.scss
@@ -1702,6 +1702,12 @@ a.account__display-name {
 		font-size: 15px;
 		padding: 0 20px;

+		&--special {
+			i {
+				color: #30CE7D;
+			}
+		}
+
 		&:hover {
 			color: darken($primary-text-color, 14%);

@@ -5356,3 +5362,69 @@ noscript {
 		margin-left: 2px;
 	}
 }
+
+.sidebar-menu .progress-panel {
+	padding-left: 12px;
+	padding-right: 12px;
+}
+
+.progress-panel {
+	background: none !important;
+	background-color: transparent !important;
+	box-shadow: none !important;
+	margin-top: 15px;
+
+	.progress-panel-header {
+		padding: 5px;
+    margin-bottom: 0;
+	}
+
+	&__content {
+		display: block;
+		padding: 0 5px;
+		box-sizing: border-box;
+	}
+
+	&__text {
+		display: block;
+    margin-bottom: 5px;
+    font-size: 14px;
+    color: $darker-text-color;
+	}
+
+	&__bar-container {
+		display: block;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 12px;
+    height: 22px;
+    overflow: hidden;
+		position: relative;
+		background-color: #555;
+		margin-top: 15px;
+		margin-bottom: 15px;
+	}
+
+	&__bar {
+		display: block;
+    width: 100%;
+    background-color: #32a269;
+    box-sizing: border-box;
+    border-radius: 10px;
+    height: 22px;
+		margin: -1px;
+
+		&__text {
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			text-align: center;
+			font-size: 14px;
+			line-height: 22px;
+			font-weight: 600;
+			color: #fff;
+		}
+	}
+}