Added expenses to sidebar in app

2020-01-21 16:07:58 -05:00 · 2020-01-21 16:07:58 -05:00 · 05d4c921a8
commit 05d4c921a8
parent 5a8d386683
12 changed files with 146 additions and 8 deletions
--- a/app/controllers/settings/expenses_controller.rb
+++ b/app/controllers/settings/expenses_controller.rb
@ -0,0 +1,11 @@
+class Settings::ExpensesController < Admin::BaseController
+	def index
+    @ammount = Redis.current.get("monthly_funding_ammount") || 0
+	end
+
+  def create
+    Redis.current.set("monthly_funding_ammount", params[:ammount])
+		redirect_to settings_expenses_path
+	end
+
+end
--- 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;
+		}
+	}
+}
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@ -37,6 +37,7 @@ class InitialStateSerializer < ActiveModel::Serializer
      store[:group_in_home_feed] = object.current_account.user.setting_group_in_home_feed
      store[:is_staff]           = object.current_account.user.staff?
      store[:unread_count]       = unread_count object.current_account
+      store[:monthly_expenses_complete] = Redis.current.get("monthly_funding_ammount") || 0
    end

    store
--- a/app/views/settings/expenses/index.html.haml
+++ b/app/views/settings/expenses/index.html.haml
@ -0,0 +1,6 @@
+- content_for :page_title do
+  = t('monthly_funding.title')
+
+= form_tag settings_expenses_url, :method => :post do
+  = text_field_tag "ammount", "", placeholder: "0-100", :value => @ammount
+  = submit_tag "Submit"
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -72,6 +72,8 @@ en:
    unfollow: Unfollow
  promotions:
      title: Promotions
+  monthly_funding:
+    title: Monthly Funding
  admin:
    account_actions:
      action: Perform action
--- a/config/navigation.rb
+++ b/config/navigation.rb
@ -60,6 +60,7 @@ SimpleNavigation::Configuration.run do |navigation|
      s.item :pghero, safe_join([fa_icon('database fw'), 'PgHero']), pghero_url, link_html: { target: 'pghero' }, if: -> { current_user.admin? }
      s.item :moderation, safe_join([fa_icon('id-card-o fw'), t('verifications.moderation.title')]), settings_verifications_moderation_url, if: -> { current_user.admin? }
      s.item :promotions, safe_join([fa_icon('star fw'), t('promotions.title')]), settings_promotions_url, if: -> { current_user.admin? }
+      s.item :monthly_funding, safe_join([fa_icon('money fw'), t('monthly_funding.title')]), settings_expenses_url, if: -> { current_user.admin? }
    end

    n.item :logout, safe_join([fa_icon('sign-out fw'), t('auth.logout')]), destroy_user_session_url, link_html: { 'data-method' => 'delete' }
--- a/config/routes.rb
+++ b/config/routes.rb
@ -90,6 +90,7 @@ Rails.application.routes.draw do
    end

    resources :promotions, only: [:index, :new, :create, :edit, :update, :destroy]
+    resources :expenses, only: [:index, :new, :create, :edit, :update, :destroy]

    namespace :verifications do
      get :moderation, to: 'moderation#index', as: :moderation