Merge pull request #328 from glitch-soc/feature/glitchy-elephant-friend

Add glitchy elephant friend

app/javascript/flavours/glitch/actions/compose.js

@@ -12,6 +12,7 @@ import {
 } from './timelines';
 
 export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
+export const COMPOSE_CYCLE_ELEFRIEND = 'COMPOSE_CYCLE_ELEFRIEND';
 export const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
 export const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
 export const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
@@ -54,6 +55,12 @@ export function changeCompose(text) {
   };
 };
 
+export function cycleElefriendCompose() {
+  return {
+    type: COMPOSE_CYCLE_ELEFRIEND,
+  };
+};
+
 export function replyCompose(status, router) {
   return (dispatch, getState) => {
     dispatch({

app/javascript/flavours/glitch/features/drawer/index.js

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import classNames from 'classnames';
 
 //  Actions.
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -11,6 +12,7 @@ import {
   showSearch,
   submitSearch,
 } from 'flavours/glitch/actions/search';
+import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
 
 //  Components.
 import Composer from 'flavours/glitch/features/composer';
@@ -27,6 +29,7 @@ import { wrap } from 'flavours/glitch/util/redux_helpers';
 const mapStateToProps = state => ({
   account: state.getIn(['accounts', me]),
   columns: state.getIn(['settings', 'columns']),
+  elefriend: state.getIn(['compose', 'elefriend']),
   results: state.getIn(['search', 'results']),
   searchHidden: state.getIn(['search', 'hidden']),
   searchValue: state.getIn(['search', 'value']),
@@ -37,6 +40,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = {
   onChange: changeSearch,
   onClear: clearSearch,
+  onClickElefriend: cycleElefriendCompose,
   onShow: showSearch,
   onSubmit: submitSearch,
   onOpenSettings: openModal.bind(null, 'SETTINGS', {}),
@@ -55,10 +59,12 @@ class Drawer extends React.Component {
     const {
       account,
       columns,
+      elefriend,
       intl,
       multiColumn,
       onChange,
       onClear,
+      onClickElefriend,
       onOpenSettings,
       onShow,
       onSubmit,
@@ -68,6 +74,10 @@ class Drawer extends React.Component {
       submitted,
     } = this.props;
 
+    let innerDrawerAttrs = {
+      className: classNames('drawer--inner', 'mbstobon-' + elefriend),
+    };
+
     //  The result.
     return (
       <div className='drawer'>
@@ -89,7 +99,10 @@ class Drawer extends React.Component {
         />
         <div className='contents'>
           <DrawerAccount account={account} />
-          <Composer />
+          <div {...innerDrawerAttrs}>
+            <Composer />
+            {multiColumn && <button className='mastodon' onClick={onClickElefriend} />}
+          </div>
           <DrawerResults
             results={results}
             visible={submitted && !searchHidden}
@@ -110,6 +123,7 @@ Drawer.propTypes = {
   account: ImmutablePropTypes.map,
   columns: ImmutablePropTypes.list,
   results: ImmutablePropTypes.map,
+  elefriend: PropTypes.number,
   searchHidden: PropTypes.bool,
   searchValue: PropTypes.string,
   submitted: PropTypes.bool,
@@ -117,6 +131,7 @@ Drawer.propTypes = {
   //  Dispatch props.
   onChange: PropTypes.func,
   onClear: PropTypes.func,
+  onClickElefriend: PropTypes.func,
   onShow: PropTypes.func,
   onSubmit: PropTypes.func,
   onOpenSettings: PropTypes.func,

app/javascript/flavours/glitch/reducers/compose.js

@@ -2,6 +2,7 @@ import {
   COMPOSE_MOUNT,
   COMPOSE_UNMOUNT,
   COMPOSE_CHANGE,
+  COMPOSE_CYCLE_ELEFRIEND,
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
   COMPOSE_MENTION,
@@ -35,6 +36,12 @@ import uuid from 'flavours/glitch/util/uuid';
 import { me } from 'flavours/glitch/util/initial_state';
 import { overwrite } from 'flavours/glitch/util/js_helpers';
 
+const totalElefriends = 3;
+
+// ~4% chance you'll end up with an unexpected friend
+// glitch-soc/mastodon repo created_at date: 2017-04-20T21:55:28Z
+const glitchProbability = 1 - 0.0420215528;
+
 const initialState = ImmutableMap({
   mounted: false,
   advanced_options: ImmutableMap({
@@ -42,6 +49,7 @@ const initialState = ImmutableMap({
     threaded_mode: false,
   }),
   sensitive: false,
+  elefriend: Math.random() < glitchProbability ? Math.floor(Math.random() * totalElefriends) : totalElefriends,
   spoiler: false,
   spoiler_text: '',
   privacy: null,
@@ -259,6 +267,9 @@ export default function compose(state = initialState, action) {
     return state
       .set('text', action.text)
       .set('idempotencyKey', uuid());
+  case COMPOSE_CYCLE_ELEFRIEND:
+    return state
+      .set('elefriend', (state.get('elefriend') + 1) % totalElefriends);
   case COMPOSE_REPLY:
     return state.withMutations(map => {
       map.set('in_reply_to', action.status.get('id'));

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -49,6 +49,44 @@
     overflow-y: auto;
     contain: strict;
   }
+
+  .drawer--inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+
+    .mastodon {
+      flex: 1;
+      border: none;
+      cursor: inherit;
+    }
+  }
+
+  @for $i from 0 through 3 {
+    .drawer--inner.mbstobon-#{$i} {
+      @if $i == 3 {
+        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto;
+      } @else {
+        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto;
+      }
+
+      .mastodon {
+        background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+
+        @if $i != 3 {
+          filter: contrast(50%) brightness(50%);
+        }
+      }
+    }
+  }
 }
 
 .drawer--header {