diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index a88dba1b13..c463871044 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/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({ diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js index 9ade1f87a9..375954cb65 100644 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ b/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 (
@@ -89,7 +99,10 @@ class Drawer extends React.Component { />
- +
+ + {multiColumn &&
{ map.set('in_reply_to', action.status.get('id')); diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 865ab4343d..727dcd93ef 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/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 {