Added expenses to sidebar in app

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

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'>
+              <a className='sidebar-menu-item' href='https://shop.dissenter.com/category/donations'>
-                  <Icon id='shopping-cart' fixedWidth />
+                <Icon id='heart' fixedWidth />
-                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.shop)}</span>
+                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate)}</span>
-                </a>
+              </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>

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>
+    )
+  }
+}

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' />

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;

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>

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;
+		}
+	}
+}

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

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"

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

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' }

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