Merge tootsuite/master at 3023725936
commit
35fbdc36f9
|
@ -29,6 +29,11 @@ settings:
|
|||
import/ignore:
|
||||
- node_modules
|
||||
- \\.(css|scss|json)$
|
||||
import/resolver:
|
||||
node:
|
||||
moduleDirectory:
|
||||
- node_modules
|
||||
- app/javascript
|
||||
|
||||
rules:
|
||||
brace-style: warn
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "app/javascript/themes/mastodon-go"]
|
||||
path = app/javascript/themes/mastodon-go
|
||||
url = https://github.com/marrus-sh/mastodon-go
|
|
@ -1,3 +1,36 @@
|
|||
# Contributing to Mastodon Glitch Edition #
|
||||
|
||||
Thank you for your interest in contributing to the `glitch-soc` project!
|
||||
Here are some guidelines, and ways you can help.
|
||||
|
||||
> (This document is a bit of a work-in-progress, so please bear with us.
|
||||
> If you don't see what you're looking for here, please don't hesitate to reach out!)
|
||||
|
||||
## Planning ##
|
||||
|
||||
Right now a lot of the planning for this project takes place in our development Discord, or through GitHub Issues and Projects.
|
||||
We're working on ways to improve the planning structure and better solicit feedback, and if you feel like you can help in this respect, feel free to give us a holler.
|
||||
|
||||
## Documentation ##
|
||||
|
||||
The documentation for this repository is available at [`glitch-soc/docs`](https://github.com/glitch-soc/docs) (online at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/)).
|
||||
Right now, we've mostly focused on the features that make this fork different from upstream in some manner.
|
||||
Adding screenshots, improving descriptions, and so forth are all ways to help contribute to the project even if you don't know any code.
|
||||
|
||||
## Frontend Development ##
|
||||
|
||||
Check out [the documentation here](https://glitch-soc.github.io/docs/contributing/frontend/) for more information.
|
||||
|
||||
## Backend Development ##
|
||||
|
||||
See the guidelines below.
|
||||
|
||||
- - -
|
||||
|
||||
You should also try to follow the guidelines set out in the original `CONTRIBUTING.md` from `tootsuite/mastodon`, reproduced below.
|
||||
|
||||
<blockquote>
|
||||
|
||||
CONTRIBUTING
|
||||
============
|
||||
|
||||
|
@ -49,3 +82,5 @@ It is expected that you have a working development environment set up (see back-
|
|||
* If you are introducing new strings, they must be using localization methods
|
||||
|
||||
If the JavaScript or CSS assets won't compile due to a syntax error, it's a good sign that the pull request isn't ready for submission yet.
|
||||
|
||||
</blockquote>
|
||||
|
|
87
README.md
87
README.md
|
@ -1,85 +1,10 @@
|
|||
![Mastodon](https://i.imgur.com/NhZc40l.png)
|
||||
========
|
||||
# Mastodon Glitch Edition #
|
||||
|
||||
[![Build Status](https://img.shields.io/travis/tootsuite/mastodon.svg)][travis]
|
||||
[![Code Climate](https://img.shields.io/codeclimate/maintainability/tootsuite/mastodon.svg)][code_climate]
|
||||
> Now with automated deploys!
|
||||
|
||||
[travis]: https://travis-ci.org/tootsuite/mastodon
|
||||
[code_climate]: https://codeclimate.com/github/tootsuite/mastodon
|
||||
[![Build Status](https://travis-ci.org/glitch-soc/mastodon.svg?branch=master)](https://travis-ci.org/glitch-soc/mastodon)
|
||||
|
||||
Mastodon is a **free, open-source social network server** based on **open web protocols** like ActivityPub and OStatus. The social focus of the project is a viable decentralized alternative to commercial social media silos that returns the control of the content distribution channels to the people. The technical focus of the project is a good user interface, a clean REST API for 3rd party apps and robust anti-abuse tools.
|
||||
So here's the deal: we all work on this code, and then it runs on dev.glitch.social and anyone who uses that does so absolutely at their own risk. can you dig it?
|
||||
|
||||
Click on the screenshot below to watch a demo of the UI:
|
||||
|
||||
[![Screenshot](https://i.imgur.com/pG3Nnz3.jpg)][youtube_demo]
|
||||
|
||||
[youtube_demo]: https://www.youtube.com/watch?v=YO1jQ8_rAMU
|
||||
|
||||
**Ruby on Rails** is used for the back-end, while **React.js** and Redux are used for the dynamic front-end. A static front-end for public resources (profiles and statuses) is also provided.
|
||||
|
||||
If you would like, you can [support the development of this project on Patreon][patreon]. Alternatively, you can donate to this BTC address: `17j2g7vpgHhLuXhN4bueZFCvdxxieyRVWd`
|
||||
|
||||
[patreon]: https://www.patreon.com/user?u=619786
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Frequently Asked Questions](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md)
|
||||
- [Use this tool to find Twitter friends on Mastodon](https://bridge.joinmastodon.org)
|
||||
- [API overview](https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md)
|
||||
- [List of Mastodon instances](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/List-of-Mastodon-instances.md)
|
||||
- [List of apps](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md)
|
||||
- [List of sponsors](https://joinmastodon.org/sponsors)
|
||||
|
||||
## Features
|
||||
|
||||
**No vendor lock-in: Fully interoperable with any conforming platform**
|
||||
|
||||
It doesn't have to be Mastodon, whatever implements ActivityPub or OStatus is part of the social network!
|
||||
|
||||
**Real-time timeline updates**
|
||||
|
||||
See the updates of people you're following appear in real-time in the UI via WebSockets. There's a firehose view as well!
|
||||
|
||||
**Federated thread resolving**
|
||||
|
||||
If someone you follow replies to a user unknown to the server, the server fetches the full thread so you can view it without leaving the UI
|
||||
|
||||
**Media attachments like images and short videos**
|
||||
|
||||
Upload and view images and WebM/MP4 videos attached to the updates. Videos with no audio track are treated like GIFs; normal videos are looped - like vines!
|
||||
|
||||
**OAuth2 and a straightforward REST API**
|
||||
|
||||
Mastodon acts as an OAuth2 provider so 3rd party apps can use the API
|
||||
|
||||
**Fast response times**
|
||||
|
||||
Mastodon tries to be as fast and responsive as possible, so all long-running tasks are delegated to background processing
|
||||
|
||||
**Deployable via Docker**
|
||||
|
||||
You don't need to mess with dependencies and configuration if you want to try Mastodon, if you have Docker and Docker Compose the deployment is extremely easy
|
||||
|
||||
---
|
||||
|
||||
## Development
|
||||
|
||||
Please follow the [development guide](https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Development-guide.md) from the documentation repository.
|
||||
|
||||
## Deployment
|
||||
|
||||
There are guides in the documentation repository for [deploying on various platforms](https://github.com/tootsuite/documentation#running-mastodon).
|
||||
|
||||
## Contributing
|
||||
|
||||
You can open issues for bugs you've found or features you think are missing. You can also submit pull requests to this repository. [Here are the guidelines for code contributions](CONTRIBUTING.md)
|
||||
|
||||
**IRC channel**: #mastodon on irc.freenode.net
|
||||
|
||||
---
|
||||
|
||||
## Extra credits
|
||||
|
||||
The elephant friend illustrations are created by [Dopatwo](https://mastodon.social/@dopatwo)
|
||||
- You can view documentation for this project at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/).
|
||||
- And contributing guidelines are available [here](CONTRIBUTING.md) and [here](https://glitch-soc.github.io/docs/contributing/).
|
||||
|
|
|
@ -83,7 +83,7 @@ Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
|
|||
|
||||
config.vm.provider :virtualbox do |vb|
|
||||
vb.name = "mastodon"
|
||||
vb.customize ["modifyvm", :id, "--memory", "2048"]
|
||||
vb.customize ["modifyvm", :id, "--memory", "4096"]
|
||||
|
||||
# Disable VirtualBox DNS proxy to skip long-delay IPv6 resolutions.
|
||||
# https://github.com/mitchellh/vagrant/issues/1172
|
||||
|
|
|
@ -13,9 +13,11 @@ class Api::V1::AccountsController < Api::BaseController
|
|||
end
|
||||
|
||||
def follow
|
||||
FollowService.new.call(current_user.account, @account.acct)
|
||||
reblogs_arg = { reblogs: params[:reblogs] }
|
||||
|
||||
FollowService.new.call(current_user.account, @account.acct, reblogs_arg)
|
||||
|
||||
options = @account.locked? ? {} : { following_map: { @account.id => true }, requested_map: { @account.id => false } }
|
||||
options = @account.locked? ? {} : { following_map: { @account.id => reblogs_arg }, requested_map: { @account.id => false } }
|
||||
|
||||
render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships(options)
|
||||
end
|
||||
|
|
|
@ -8,10 +8,15 @@ class Api::V1::MutesController < Api::BaseController
|
|||
respond_to :json
|
||||
|
||||
def index
|
||||
@accounts = load_accounts
|
||||
@data = @accounts = load_accounts
|
||||
render json: @accounts, each_serializer: REST::AccountSerializer
|
||||
end
|
||||
|
||||
def details
|
||||
@data = @mutes = load_mutes
|
||||
render json: @mutes, each_serializer: REST::MuteSerializer
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_accounts
|
||||
|
@ -22,6 +27,10 @@ class Api::V1::MutesController < Api::BaseController
|
|||
Account.includes(:muted_by).references(:muted_by)
|
||||
end
|
||||
|
||||
def load_mutes
|
||||
paginated_mutes.includes(:account, :target_account).to_a
|
||||
end
|
||||
|
||||
def paginated_mutes
|
||||
Mute.where(account: current_account).paginate_by_max_id(
|
||||
limit_param(DEFAULT_ACCOUNTS_LIMIT),
|
||||
|
@ -36,26 +45,34 @@ class Api::V1::MutesController < Api::BaseController
|
|||
|
||||
def next_path
|
||||
if records_continue?
|
||||
api_v1_mutes_url pagination_params(max_id: pagination_max_id)
|
||||
url_for pagination_params(max_id: pagination_max_id)
|
||||
end
|
||||
end
|
||||
|
||||
def prev_path
|
||||
unless @accounts.empty?
|
||||
api_v1_mutes_url pagination_params(since_id: pagination_since_id)
|
||||
unless@data.empty?
|
||||
url_for pagination_params(since_id: pagination_since_id)
|
||||
end
|
||||
end
|
||||
|
||||
def pagination_max_id
|
||||
@accounts.last.muted_by_ids.last
|
||||
if params[:action] == "details"
|
||||
@mutes.last.id
|
||||
else
|
||||
@accounts.last.muted_by_ids.last
|
||||
end
|
||||
end
|
||||
|
||||
def pagination_since_id
|
||||
@accounts.first.muted_by_ids.first
|
||||
if params[:action] == "details"
|
||||
@mutes.first.id
|
||||
else
|
||||
@accounts.first.muted_by_ids.first
|
||||
end
|
||||
end
|
||||
|
||||
def records_continue?
|
||||
@accounts.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
|
||||
@data.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
|
||||
end
|
||||
|
||||
def pagination_params(core_params)
|
||||
|
|
|
@ -24,11 +24,20 @@ class Api::V1::NotificationsController < Api::BaseController
|
|||
render_empty
|
||||
end
|
||||
|
||||
def destroy
|
||||
dismiss
|
||||
end
|
||||
|
||||
def dismiss
|
||||
current_account.notifications.find_by!(id: params[:id]).destroy!
|
||||
render_empty
|
||||
end
|
||||
|
||||
def destroy_multiple
|
||||
current_account.notifications.where(id: params[:ids]).destroy_all
|
||||
render_empty
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_notifications
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
class Api::V1::SearchController < Api::BaseController
|
||||
include Authorization
|
||||
|
||||
RESULTS_LIMIT = 5
|
||||
RESULTS_LIMIT = 10
|
||||
|
||||
before_action -> { doorkeeper_authorize! :read }
|
||||
before_action :require_user!
|
||||
|
|
|
@ -0,0 +1,60 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
class Api::V1::Timelines::DirectController < Api::BaseController
|
||||
before_action -> { doorkeeper_authorize! :read }, only: [:show]
|
||||
before_action :require_user!, only: [:show]
|
||||
after_action :insert_pagination_headers, unless: -> { @statuses.empty? }
|
||||
|
||||
respond_to :json
|
||||
|
||||
def show
|
||||
@statuses = load_statuses
|
||||
render json: @statuses, each_serializer: REST::StatusSerializer, relationships: StatusRelationshipsPresenter.new(@statuses, current_user&.account_id)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_statuses
|
||||
cached_direct_statuses
|
||||
end
|
||||
|
||||
def cached_direct_statuses
|
||||
cache_collection direct_statuses, Status
|
||||
end
|
||||
|
||||
def direct_statuses
|
||||
direct_timeline_statuses.paginate_by_max_id(
|
||||
limit_param(DEFAULT_STATUSES_LIMIT),
|
||||
params[:max_id],
|
||||
params[:since_id]
|
||||
)
|
||||
end
|
||||
|
||||
def direct_timeline_statuses
|
||||
Status.as_direct_timeline(current_account)
|
||||
end
|
||||
|
||||
def insert_pagination_headers
|
||||
set_pagination_headers(next_path, prev_path)
|
||||
end
|
||||
|
||||
def pagination_params(core_params)
|
||||
params.permit(:local, :limit).merge(core_params)
|
||||
end
|
||||
|
||||
def next_path
|
||||
api_v1_timelines_direct_url pagination_params(max_id: pagination_max_id)
|
||||
end
|
||||
|
||||
def prev_path
|
||||
api_v1_timelines_direct_url pagination_params(since_id: pagination_since_id)
|
||||
end
|
||||
|
||||
def pagination_max_id
|
||||
@statuses.last.id
|
||||
end
|
||||
|
||||
def pagination_since_id
|
||||
@statuses.first.id
|
||||
end
|
||||
end
|
|
@ -6,6 +6,7 @@ class HomeController < ApplicationController
|
|||
|
||||
def index
|
||||
@body_classes = 'app-body'
|
||||
@frontend = (params[:frontend] and Rails.configuration.x.available_frontends.include? params[:frontend] + '.js') ? params[:frontend] : 'mastodon'
|
||||
end
|
||||
|
||||
private
|
||||
|
|
|
@ -0,0 +1,64 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
class Settings::KeywordMutesController < ApplicationController
|
||||
layout 'admin'
|
||||
|
||||
before_action :authenticate_user!
|
||||
before_action :load_keyword_mute, only: [:edit, :update, :destroy]
|
||||
|
||||
def index
|
||||
@keyword_mutes = paginated_keyword_mutes_for_account
|
||||
end
|
||||
|
||||
def new
|
||||
@keyword_mute = keyword_mutes_for_account.build
|
||||
end
|
||||
|
||||
def create
|
||||
@keyword_mute = keyword_mutes_for_account.create(keyword_mute_params)
|
||||
|
||||
if @keyword_mute.persisted?
|
||||
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg')
|
||||
else
|
||||
render :new
|
||||
end
|
||||
end
|
||||
|
||||
def update
|
||||
if @keyword_mute.update(keyword_mute_params)
|
||||
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg')
|
||||
else
|
||||
render :edit
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
@keyword_mute.destroy!
|
||||
|
||||
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg')
|
||||
end
|
||||
|
||||
def destroy_all
|
||||
keyword_mutes_for_account.delete_all
|
||||
|
||||
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg')
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def keyword_mutes_for_account
|
||||
Glitch::KeywordMute.where(account: current_account)
|
||||
end
|
||||
|
||||
def load_keyword_mute
|
||||
@keyword_mute = keyword_mutes_for_account.find(params[:id])
|
||||
end
|
||||
|
||||
def keyword_mute_params
|
||||
params.require(:keyword_mute).permit(:keyword, :whole_word)
|
||||
end
|
||||
|
||||
def paginated_keyword_mutes_for_account
|
||||
keyword_mutes_for_account.order(:keyword).page params[:page]
|
||||
end
|
||||
end
|
|
@ -48,7 +48,7 @@ class StreamEntriesController < ApplicationController
|
|||
@type = @stream_entry.activity_type.downcase
|
||||
|
||||
raise ActiveRecord::RecordNotFound if @stream_entry.activity.nil?
|
||||
authorize @stream_entry.activity, :show? if @stream_entry.hidden?
|
||||
authorize @stream_entry.activity, :show? if @stream_entry.hidden? || @stream_entry.local_only?
|
||||
rescue Mastodon::NotPermittedError
|
||||
# Reraise in order to get a 404
|
||||
raise ActiveRecord::RecordNotFound
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
module Settings::KeywordMutesHelper
|
||||
end
|
|
@ -0,0 +1,93 @@
|
|||
/*
|
||||
|
||||
`actions/local_settings`
|
||||
========================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - kibigo! [@kibi@glitch.social]
|
||||
|
||||
This file provides our Redux actions related to local settings. It
|
||||
consists of the following:
|
||||
|
||||
- __`changesLocalSetting(key, value)` :__
|
||||
Changes the local setting with the given `key` to the given
|
||||
`value`. `key` **MUST** be an array of strings, as required by
|
||||
`Immutable.Map.prototype.getIn()`.
|
||||
|
||||
- __`saveLocalSettings()` :__
|
||||
Saves the local settings to `localStorage` as a JSON object. We
|
||||
shouldn't ever need to call this ourselves.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Constants:
|
||||
----------
|
||||
|
||||
We provide the following constants:
|
||||
|
||||
- __`LOCAL_SETTING_CHANGE` :__
|
||||
This string constant is used to dispatch a setting change to our
|
||||
reducer in `reducers/local_settings`, where the setting is
|
||||
actually changed.
|
||||
|
||||
*/
|
||||
|
||||
export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
`changeLocalSetting(key, value)`:
|
||||
---------------------------------
|
||||
|
||||
Changes the local setting with the given `key` to the given `value`.
|
||||
`key` **MUST** be an array of strings, as required by
|
||||
`Immutable.Map.prototype.getIn()`.
|
||||
|
||||
To accomplish this, we just dispatch a `LOCAL_SETTING_CHANGE` to our
|
||||
reducer in `reducers/local_settings`.
|
||||
|
||||
*/
|
||||
|
||||
export function changeLocalSetting(key, value) {
|
||||
return dispatch => {
|
||||
dispatch({
|
||||
type: LOCAL_SETTING_CHANGE,
|
||||
key,
|
||||
value,
|
||||
});
|
||||
|
||||
dispatch(saveLocalSettings());
|
||||
};
|
||||
};
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
`saveLocalSettings()`:
|
||||
----------------------
|
||||
|
||||
Saves the local settings to `localStorage` as a JSON object.
|
||||
`changeLocalSetting()` calls this whenever it changes a setting. We
|
||||
shouldn't ever need to call this ourselves.
|
||||
|
||||
> __TODO :__
|
||||
> Right now `saveLocalSettings()` doesn't keep track of which user
|
||||
> is currently signed in, but it might be better to give each user
|
||||
> their *own* local settings.
|
||||
|
||||
*/
|
||||
|
||||
export function saveLocalSettings() {
|
||||
return (_, getState) => {
|
||||
const localSettings = getState().get('local_settings').toJS();
|
||||
localStorage.setItem('mastodon-settings', JSON.stringify(localSettings));
|
||||
};
|
||||
};
|
|
@ -0,0 +1,227 @@
|
|||
/*
|
||||
|
||||
`<AccountHeader>`
|
||||
=================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - kibigo! [@kibi@glitch.social]
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. We've expanded it in order to handle user bio
|
||||
frontmatter.
|
||||
|
||||
The `<AccountHeader>` component provides the header for account
|
||||
timelines. It is a fairly simple component which mostly just consists
|
||||
of a `render()` method.
|
||||
|
||||
__Props:__
|
||||
|
||||
- __`account` (`ImmutablePropTypes.map`) :__
|
||||
The account to render a header for.
|
||||
|
||||
- __`me` (`PropTypes.number.isRequired`) :__
|
||||
The id of the currently-signed-in account.
|
||||
|
||||
- __`onFollow` (`PropTypes.func.isRequired`) :__
|
||||
The function to call when the user clicks the "follow" button.
|
||||
|
||||
- __`intl` (`PropTypes.object.isRequired`) :__
|
||||
Our internationalization object, inserted by `@injectIntl`.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
import emojify from '../../../mastodon/features/emoji/emoji';
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import Avatar from '../../../mastodon/components/avatar';
|
||||
import { me } from '../../../mastodon/initial_state';
|
||||
|
||||
// Our imports //
|
||||
import { processBio } from '../../util/bio_metadata';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Inital setup:
|
||||
-------------
|
||||
|
||||
The `messages` constant is used to define any messages that we need
|
||||
from inside props. In our case, these are the `unfollow`, `follow`, and
|
||||
`requested` messages used in the `title` of our buttons.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
|
||||
});
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Implementation:
|
||||
---------------
|
||||
|
||||
*/
|
||||
|
||||
@injectIntl
|
||||
export default class AccountHeader extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account : ImmutablePropTypes.map,
|
||||
onFollow : PropTypes.func.isRequired,
|
||||
intl : PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
### `render()`
|
||||
|
||||
The `render()` function is used to render our component.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const { account, intl } = this.props;
|
||||
|
||||
/*
|
||||
|
||||
If no `account` is provided, then we can't render a header. Otherwise,
|
||||
we get the `displayName` for the account, if available. If it's blank,
|
||||
then we set the `displayName` to just be the `username` of the account.
|
||||
|
||||
*/
|
||||
|
||||
if (!account) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let displayName = account.get('display_name_html');
|
||||
let info = '';
|
||||
let actionBtn = '';
|
||||
let following = false;
|
||||
|
||||
/*
|
||||
|
||||
Next, we handle the account relationships. If the account follows the
|
||||
user, then we add an `info` message. If the user has requested a
|
||||
follow, then we disable the `actionBtn` and display an hourglass.
|
||||
Otherwise, if the account isn't blocked, we set the `actionBtn` to the
|
||||
appropriate icon.
|
||||
|
||||
*/
|
||||
|
||||
if (me !== account.get('id')) {
|
||||
if (account.getIn(['relationship', 'followed_by'])) {
|
||||
info = (
|
||||
<span className='account--follows-info'>
|
||||
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (account.getIn(['relationship', 'requested'])) {
|
||||
actionBtn = (
|
||||
<div className='account--action-button'>
|
||||
<IconButton size={26} disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />
|
||||
</div>
|
||||
);
|
||||
} else if (!account.getIn(['relationship', 'blocking'])) {
|
||||
following = account.getIn(['relationship', 'following']);
|
||||
actionBtn = (
|
||||
<div className='account--action-button'>
|
||||
<IconButton
|
||||
size={26}
|
||||
icon={following ? 'user-times' : 'user-plus'}
|
||||
active={following ? true : false}
|
||||
title={intl.formatMessage(following ? messages.unfollow : messages.follow)}
|
||||
onClick={this.props.onFollow}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
we extract the `text` and
|
||||
`metadata` from our account's `note` using `processBio()`.
|
||||
|
||||
*/
|
||||
|
||||
const { text, metadata } = processBio(account.get('note'));
|
||||
|
||||
/*
|
||||
|
||||
Here, we render our component using all the things we've defined above.
|
||||
|
||||
*/
|
||||
|
||||
return (
|
||||
<div className='account__header__wrapper'>
|
||||
<div
|
||||
className='account__header'
|
||||
style={{ backgroundImage: `url(${account.get('header')})` }}
|
||||
>
|
||||
<div>
|
||||
<a href={account.get('url')} target='_blank' rel='noopener'>
|
||||
<span className='account__header__avatar'>
|
||||
<Avatar account={account} size={90} />
|
||||
</span>
|
||||
<span
|
||||
className='account__header__display-name'
|
||||
dangerouslySetInnerHTML={{ __html: displayName }}
|
||||
/>
|
||||
</a>
|
||||
<span className='account__header__username'>
|
||||
@{account.get('acct')}
|
||||
{account.get('locked') ? <i className='fa fa-lock' /> : null}
|
||||
</span>
|
||||
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
|
||||
|
||||
{info}
|
||||
{actionBtn}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{metadata.length && (
|
||||
<table className='account__metadata'>
|
||||
<tbody>
|
||||
{(() => {
|
||||
let data = [];
|
||||
for (let i = 0; i < metadata.length; i++) {
|
||||
data.push(
|
||||
<tr key={i}>
|
||||
<th scope='row'><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][0]) }} /></th>
|
||||
<td><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][1]) }} /></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
return data;
|
||||
})()}
|
||||
</tbody>
|
||||
</table>
|
||||
) || null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,80 @@
|
|||
/*
|
||||
|
||||
`<NotificationPurgeButtonsContainer>`
|
||||
=========================
|
||||
|
||||
This container connects `<NotificationPurgeButtons>`s to the Redux store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Our imports //
|
||||
import NotificationPurgeButtons from './notification_purge_buttons';
|
||||
import {
|
||||
deleteMarkedNotifications,
|
||||
enterNotificationClearingMode,
|
||||
markAllNotifications,
|
||||
} from '../../../../mastodon/actions/notifications';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { openModal } from '../../../../mastodon/actions/modal';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We only need to provide a dispatch for
|
||||
deleting notifications.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
clearMessage: { id: 'notifications.marked_clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all selected notifications?' },
|
||||
clearConfirm: { id: 'notifications.marked_clear', defaultMessage: 'Clear selected notifications' },
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
onEnterCleaningMode(yes) {
|
||||
dispatch(enterNotificationClearingMode(yes));
|
||||
},
|
||||
|
||||
onDeleteMarked() {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.clearMessage),
|
||||
confirm: intl.formatMessage(messages.clearConfirm),
|
||||
onConfirm: () => dispatch(deleteMarkedNotifications()),
|
||||
}));
|
||||
},
|
||||
|
||||
onMarkAll() {
|
||||
dispatch(markAllNotifications(true));
|
||||
},
|
||||
|
||||
onMarkNone() {
|
||||
dispatch(markAllNotifications(false));
|
||||
},
|
||||
|
||||
onInvert() {
|
||||
dispatch(markAllNotifications(null));
|
||||
},
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
markNewForDelete: state.getIn(['notifications', 'markNewForDelete']),
|
||||
});
|
||||
|
||||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons));
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* Buttons widget for controlling the notification clearing mode.
|
||||
* In idle state, the cleaning mode button is shown. When the mode is active,
|
||||
* a Confirm and Abort buttons are shown in its place.
|
||||
*/
|
||||
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
const messages = defineMessages({
|
||||
btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
|
||||
btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' },
|
||||
btnInvert : { id: 'notification_purge.btn_invert', defaultMessage: 'Invert\nselection' },
|
||||
btnApply : { id: 'notification_purge.btn_apply', defaultMessage: 'Clear\nselected' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class NotificationPurgeButtons extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onDeleteMarked : PropTypes.func.isRequired,
|
||||
onMarkAll : PropTypes.func.isRequired,
|
||||
onMarkNone : PropTypes.func.isRequired,
|
||||
onInvert : PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
markNewForDelete: PropTypes.bool,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { intl, markNewForDelete } = this.props;
|
||||
|
||||
//className='active'
|
||||
return (
|
||||
<div className='column-header__notif-cleaning-buttons'>
|
||||
<button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}>
|
||||
<b>∀</b><br />{intl.formatMessage(messages.btnAll)}
|
||||
</button>
|
||||
|
||||
<button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}>
|
||||
<b>∅</b><br />{intl.formatMessage(messages.btnNone)}
|
||||
</button>
|
||||
|
||||
<button onClick={this.props.onInvert}>
|
||||
<b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
|
||||
</button>
|
||||
|
||||
<button onClick={this.props.onDeleteMarked}>
|
||||
<i className='fa fa-trash' /><br />{intl.formatMessage(messages.btnApply)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,66 @@
|
|||
/*
|
||||
|
||||
`<ComposeAdvancedOptionsContainer>`
|
||||
===================================
|
||||
|
||||
This container connects `<ComposeAdvancedOptions>` to the Redux store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Mastodon imports //
|
||||
import { toggleComposeAdvancedOption } from '../../../../mastodon/actions/compose';
|
||||
|
||||
// Our imports //
|
||||
import ComposeAdvancedOptions from '.';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
State mapping:
|
||||
--------------
|
||||
|
||||
The `mapStateToProps()` function maps various state properties to the
|
||||
props of our component. The only property we care about is
|
||||
`compose.advanced_options`.
|
||||
|
||||
*/
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
values: state.getIn(['compose', 'advanced_options']),
|
||||
});
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We just need to provide a dispatch for
|
||||
when an advanced option toggle changes.
|
||||
|
||||
*/
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onChange (option) {
|
||||
dispatch(toggleComposeAdvancedOption(option));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ComposeAdvancedOptions);
|
|
@ -0,0 +1,163 @@
|
|||
/*
|
||||
|
||||
`<ComposeAdvancedOptions>`
|
||||
==========================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - surinna [@srn@dev.glitch.social]
|
||||
|
||||
This adds an advanced options dropdown to the toot compose box, for
|
||||
toggles that don't necessarily fit elsewhere.
|
||||
|
||||
__Props:__
|
||||
|
||||
- __`values` (`ImmutablePropTypes.contains(…).isRequired`) :__
|
||||
An Immutable map with the following values:
|
||||
|
||||
- __`do_not_federate` (`PropTypes.bool.isRequired`) :__
|
||||
Specifies whether or not to federate the status.
|
||||
|
||||
- __`onChange` (`PropTypes.func.isRequired`) :__
|
||||
The function to call when a toggle is changed. We pass this from
|
||||
our container to the toggle.
|
||||
|
||||
- __`intl` (`PropTypes.object.isRequired`) :__
|
||||
Our internationalization object, inserted by `@injectIntl`.
|
||||
|
||||
__State:__
|
||||
|
||||
- __`open` :__
|
||||
This tells whether the dropdown is currently open or closed.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
|
||||
// Our imports //
|
||||
import ComposeAdvancedOptionsToggle from './toggle';
|
||||
import ComposeDropdown from '../dropdown/index';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Inital setup:
|
||||
-------------
|
||||
|
||||
The `messages` constant is used to define any messages that we need
|
||||
from inside props. These are the various titles and labels on our
|
||||
toggles.
|
||||
|
||||
`iconStyle` styles the icon used for the dropdown button.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
local_only_short :
|
||||
{ id: 'advanced-options.local-only.short', defaultMessage: 'Local-only' },
|
||||
local_only_long :
|
||||
{ id: 'advanced-options.local-only.long', defaultMessage: 'Do not post to other instances' },
|
||||
advanced_options_icon_title :
|
||||
{ id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
|
||||
});
|
||||
|
||||
/*
|
||||
|
||||
Implementation:
|
||||
---------------
|
||||
|
||||
*/
|
||||
|
||||
@injectIntl
|
||||
export default class ComposeAdvancedOptions extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
values : ImmutablePropTypes.contains({
|
||||
do_not_federate : PropTypes.bool.isRequired,
|
||||
}).isRequired,
|
||||
onChange : PropTypes.func.isRequired,
|
||||
intl : PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
|
||||
### `render()`
|
||||
|
||||
`render()` actually puts our component on the screen.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const { intl, values } = this.props;
|
||||
|
||||
/*
|
||||
|
||||
The `options` array provides all of the available advanced options
|
||||
alongside their icon, text, and name.
|
||||
|
||||
*/
|
||||
const options = [
|
||||
{ icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, name: 'do_not_federate' },
|
||||
];
|
||||
|
||||
/*
|
||||
|
||||
`anyEnabled` tells us if any of our advanced options have been enabled.
|
||||
|
||||
*/
|
||||
|
||||
const anyEnabled = values.some((enabled) => enabled);
|
||||
|
||||
/*
|
||||
|
||||
`optionElems` takes our `options` and creates
|
||||
`<ComposeAdvancedOptionsToggle>`s out of them. We use the `name` of the
|
||||
toggle as its `key` so that React can keep track of it.
|
||||
|
||||
*/
|
||||
|
||||
const optionElems = options.map((option) => {
|
||||
return (
|
||||
<ComposeAdvancedOptionsToggle
|
||||
onChange={this.props.onChange}
|
||||
active={values.get(option.name)}
|
||||
key={option.name}
|
||||
name={option.name}
|
||||
shortText={intl.formatMessage(option.shortText)}
|
||||
longText={intl.formatMessage(option.longText)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
/*
|
||||
|
||||
Finally, we can render our component.
|
||||
|
||||
*/
|
||||
return (
|
||||
<ComposeDropdown
|
||||
title={intl.formatMessage(messages.advanced_options_icon_title)}
|
||||
icon='home'
|
||||
highlight={anyEnabled}
|
||||
>
|
||||
{optionElems}
|
||||
</ComposeDropdown>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,103 @@
|
|||
/*
|
||||
|
||||
`<ComposeAdvancedOptionsToggle>`
|
||||
================================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - surinna [@srn@dev.glitch.social]
|
||||
|
||||
This creates the toggle used by `<ComposeAdvancedOptions>`.
|
||||
|
||||
__Props:__
|
||||
|
||||
- __`onChange` (`PropTypes.func`) :__
|
||||
This provides the function to call when the toggle is
|
||||
(de-?)activated.
|
||||
|
||||
- __`active` (`PropTypes.bool`) :__
|
||||
This prop controls whether the toggle is currently active or not.
|
||||
|
||||
- __`name` (`PropTypes.string`) :__
|
||||
This identifies the toggle, and is sent to `onChange()` when it is
|
||||
called.
|
||||
|
||||
- __`shortText` (`PropTypes.string`) :__
|
||||
This is a short string used as the title of the toggle.
|
||||
|
||||
- __`longText` (`PropTypes.string`) :__
|
||||
This is a longer string used as a subtitle for the toggle.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Implementation:
|
||||
---------------
|
||||
|
||||
*/
|
||||
|
||||
export default class ComposeAdvancedOptionsToggle extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
active: PropTypes.bool.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
shortText: PropTypes.string.isRequired,
|
||||
longText: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
### `onToggle()`
|
||||
|
||||
The `onToggle()` function simply calls the `onChange()` prop with the
|
||||
toggle's `name`.
|
||||
|
||||
*/
|
||||
|
||||
onToggle = () => {
|
||||
this.props.onChange(this.props.name);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
### `render()`
|
||||
|
||||
The `render()` function is used to render our component. We just render
|
||||
a `<Toggle>` and place next to it our text.
|
||||
|
||||
*/
|
||||
|
||||
render() {
|
||||
const { active, shortText, longText } = this.props;
|
||||
return (
|
||||
<div role='button' tabIndex='0' className='advanced-options-dropdown__option' onClick={this.onToggle}>
|
||||
<div className='advanced-options-dropdown__option__toggle'>
|
||||
<Toggle checked={active} onChange={this.onToggle} />
|
||||
</div>
|
||||
<div className='advanced-options-dropdown__option__content'>
|
||||
<strong>{shortText}</strong>
|
||||
{longText}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,133 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
|
||||
// Our imports //
|
||||
import ComposeDropdown from '../dropdown/index';
|
||||
import { uploadCompose } from '../../../../mastodon/actions/compose';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { openModal } from '../../../../mastodon/actions/modal';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
const messages = defineMessages({
|
||||
upload :
|
||||
{ id: 'compose.attach.upload', defaultMessage: 'Upload a file' },
|
||||
doodle :
|
||||
{ id: 'compose.attach.doodle', defaultMessage: 'Draw something' },
|
||||
attach :
|
||||
{ id: 'compose.attach', defaultMessage: 'Attach...' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
// This horrible expression is copied from vanilla upload_button_container
|
||||
disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
|
||||
resetFileKey: state.getIn(['compose', 'resetFileKey']),
|
||||
acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onSelectFile (files) {
|
||||
dispatch(uploadCompose(files));
|
||||
},
|
||||
onOpenDoodle () {
|
||||
dispatch(openModal('DOODLE', { noEsc: true }));
|
||||
},
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
export default class ComposeAttachOptions extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl : PropTypes.object.isRequired,
|
||||
resetFileKey: PropTypes.number,
|
||||
acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
onSelectFile: PropTypes.func.isRequired,
|
||||
onOpenDoodle: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
handleItemClick = bt => {
|
||||
if (bt === 'upload') {
|
||||
this.fileElement.click();
|
||||
}
|
||||
|
||||
if (bt === 'doodle') {
|
||||
this.props.onOpenDoodle();
|
||||
}
|
||||
|
||||
this.dropdown.setState({ open: false });
|
||||
};
|
||||
|
||||
handleFileChange = (e) => {
|
||||
if (e.target.files.length > 0) {
|
||||
this.props.onSelectFile(e.target.files);
|
||||
}
|
||||
}
|
||||
|
||||
setFileRef = (c) => {
|
||||
this.fileElement = c;
|
||||
}
|
||||
|
||||
setDropdownRef = (c) => {
|
||||
this.dropdown = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
|
||||
|
||||
const options = [
|
||||
{ icon: 'cloud-upload', text: messages.upload, name: 'upload' },
|
||||
{ icon: 'paint-brush', text: messages.doodle, name: 'doodle' },
|
||||
];
|
||||
|
||||
const optionElems = options.map((item) => {
|
||||
const hdl = () => this.handleItemClick(item.name);
|
||||
return (
|
||||
<div
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
key={item.name}
|
||||
onClick={hdl}
|
||||
className='privacy-dropdown__option'
|
||||
>
|
||||
<div className='privacy-dropdown__option__icon'>
|
||||
<i className={`fa fa-fw fa-${item.icon}`} />
|
||||
</div>
|
||||
|
||||
<div className='privacy-dropdown__option__content'>
|
||||
<strong>{intl.formatMessage(item.text)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ComposeDropdown
|
||||
title={intl.formatMessage(messages.attach)}
|
||||
icon='paperclip'
|
||||
disabled={disabled}
|
||||
ref={this.setDropdownRef}
|
||||
>
|
||||
{optionElems}
|
||||
</ComposeDropdown>
|
||||
<input
|
||||
key={resetFileKey}
|
||||
ref={this.setFileRef}
|
||||
type='file'
|
||||
multiple={false}
|
||||
accept={acceptContentTypes.toArray().join(',')}
|
||||
onChange={this.handleFileChange}
|
||||
disabled={disabled}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,77 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// Mastodon imports //
|
||||
import IconButton from '../../../../mastodon/components/icon_button';
|
||||
|
||||
const iconStyle = {
|
||||
height : null,
|
||||
lineHeight : '27px',
|
||||
};
|
||||
|
||||
export default class ComposeDropdown extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string,
|
||||
highlight: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
open: false,
|
||||
};
|
||||
|
||||
onGlobalClick = (e) => {
|
||||
if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
|
||||
this.setState({ open: false });
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('click', this.onGlobalClick);
|
||||
window.addEventListener('touchstart', this.onGlobalClick);
|
||||
}
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('click', this.onGlobalClick);
|
||||
window.removeEventListener('touchstart', this.onGlobalClick);
|
||||
}
|
||||
|
||||
onToggleDropdown = () => {
|
||||
if (this.props.disabled) return;
|
||||
this.setState({ open: !this.state.open });
|
||||
};
|
||||
|
||||
setRef = (c) => {
|
||||
this.node = c;
|
||||
};
|
||||
|
||||
render () {
|
||||
const { open } = this.state;
|
||||
let { highlight, title, icon, disabled } = this.props;
|
||||
|
||||
if (!icon) icon = 'ellipsis-h';
|
||||
|
||||
return (
|
||||
<div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}>
|
||||
<div className='advanced-options-dropdown__value'>
|
||||
<IconButton
|
||||
className={'inverted'}
|
||||
title={title}
|
||||
icon={icon} active={open || highlight}
|
||||
size={18}
|
||||
style={iconStyle}
|
||||
disabled={disabled}
|
||||
onClick={this.onToggleDropdown}
|
||||
/>
|
||||
</div>
|
||||
<div className='advanced-options-dropdown__dropdown'>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Mastodon imports //
|
||||
import { closeModal } from '../../../mastodon/actions/modal';
|
||||
|
||||
// Our imports //
|
||||
import { changeLocalSetting } from '../../../glitch/actions/local_settings';
|
||||
import LocalSettings from '.';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: state.get('local_settings'),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onChange (setting, value) {
|
||||
dispatch(changeLocalSetting(setting, value));
|
||||
},
|
||||
onClose () {
|
||||
dispatch(closeModal());
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(LocalSettings);
|
|
@ -0,0 +1,50 @@
|
|||
// Package imports
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
|
||||
// Our imports
|
||||
import LocalSettingsPage from './page';
|
||||
import LocalSettingsNavigation from './navigation';
|
||||
|
||||
// Stylesheet imports
|
||||
import './style.scss';
|
||||
|
||||
export default class LocalSettings extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
currentIndex: 0,
|
||||
};
|
||||
|
||||
navigateTo = (index) =>
|
||||
this.setState({ currentIndex: +index });
|
||||
|
||||
render () {
|
||||
|
||||
const { navigateTo } = this;
|
||||
const { onChange, onClose, settings } = this.props;
|
||||
const { currentIndex } = this.state;
|
||||
|
||||
return (
|
||||
<div className='glitch modal-root__modal local-settings'>
|
||||
<LocalSettingsNavigation
|
||||
index={currentIndex}
|
||||
onClose={onClose}
|
||||
onNavigate={navigateTo}
|
||||
/>
|
||||
<LocalSettingsPage
|
||||
index={currentIndex}
|
||||
onChange={onChange}
|
||||
settings={settings}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,74 @@
|
|||
// Package imports
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
|
||||
// Our imports
|
||||
import LocalSettingsNavigationItem from './item';
|
||||
|
||||
// Stylesheet imports
|
||||
import './style.scss';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
const messages = defineMessages({
|
||||
general: { id: 'settings.general', defaultMessage: 'General' },
|
||||
collapsed: { id: 'settings.collapsed_statuses', defaultMessage: 'Collapsed toots' },
|
||||
media: { id: 'settings.media', defaultMessage: 'Media' },
|
||||
preferences: { id: 'settings.preferences', defaultMessage: 'Preferences' },
|
||||
close: { id: 'settings.close', defaultMessage: 'Close' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class LocalSettingsNavigation extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
index : PropTypes.number,
|
||||
intl : PropTypes.object.isRequired,
|
||||
onClose : PropTypes.func.isRequired,
|
||||
onNavigate : PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
|
||||
const { index, intl, onClose, onNavigate } = this.props;
|
||||
|
||||
return (
|
||||
<nav className='glitch local-settings__navigation'>
|
||||
<LocalSettingsNavigationItem
|
||||
active={index === 0}
|
||||
index={0}
|
||||
onNavigate={onNavigate}
|
||||
title={intl.formatMessage(messages.general)}
|
||||
/>
|
||||
<LocalSettingsNavigationItem
|
||||
active={index === 1}
|
||||
index={1}
|
||||
onNavigate={onNavigate}
|
||||
title={intl.formatMessage(messages.collapsed)}
|
||||
/>
|
||||
<LocalSettingsNavigationItem
|
||||
active={index === 2}
|
||||
index={2}
|
||||
onNavigate={onNavigate}
|
||||
title={intl.formatMessage(messages.media)}
|
||||
/>
|
||||
<LocalSettingsNavigationItem
|
||||
active={index === 3}
|
||||
href='/settings/preferences'
|
||||
index={3}
|
||||
icon='cog'
|
||||
title={intl.formatMessage(messages.preferences)}
|
||||
/>
|
||||
<LocalSettingsNavigationItem
|
||||
active={index === 4}
|
||||
className='close'
|
||||
index={4}
|
||||
onNavigate={onClose}
|
||||
title={intl.formatMessage(messages.close)}
|
||||
/>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,69 @@
|
|||
// Package imports
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// Stylesheet imports
|
||||
import './style.scss';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
export default class LocalSettingsPage extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
index: PropTypes.number.isRequired,
|
||||
onNavigate: PropTypes.func,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
handleClick = (e) => {
|
||||
const { index, onNavigate } = this.props;
|
||||
if (onNavigate) {
|
||||
onNavigate(index);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { handleClick } = this;
|
||||
const {
|
||||
active,
|
||||
className,
|
||||
href,
|
||||
icon,
|
||||
onNavigate,
|
||||
title,
|
||||
} = this.props;
|
||||
|
||||
const finalClassName = classNames('glitch', 'local-settings__navigation__item', {
|
||||
active,
|
||||
}, className);
|
||||
|
||||
const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null;
|
||||
|
||||
if (href) return (
|
||||
<a
|
||||
href={href}
|
||||
className={finalClassName}
|
||||
>
|
||||
{iconElem} {title}
|
||||
</a>
|
||||
);
|
||||
else if (onNavigate) return (
|
||||
<a
|
||||
onClick={handleClick}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
className={finalClassName}
|
||||
>
|
||||
{iconElem} {title}
|
||||
</a>
|
||||
);
|
||||
else return null;
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
@import 'styles/mastodon/variables';
|
||||
|
||||
.glitch.local-settings__navigation__item {
|
||||
display: block;
|
||||
padding: 15px 20px;
|
||||
color: inherit;
|
||||
background: $primary-text-color;
|
||||
border-bottom: 1px $ui-primary-color solid;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
background: $ui-secondary-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $ui-highlight-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&.close, &.close:hover {
|
||||
background: $error-value-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
@import 'styles/mastodon/variables';
|
||||
|
||||
.glitch.local-settings__navigation {
|
||||
background: $primary-text-color;
|
||||
color: $ui-base-color;
|
||||
width: 200px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
|
@ -0,0 +1,212 @@
|
|||
// Package imports
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
|
||||
|
||||
// Our imports
|
||||
import LocalSettingsPageItem from './item';
|
||||
|
||||
// Stylesheet imports
|
||||
import './style.scss';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
const messages = defineMessages({
|
||||
layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' },
|
||||
layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' },
|
||||
layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' },
|
||||
side_arm_none: { id: 'settings.side_arm.none', defaultMessage: 'None' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class LocalSettingsPage extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
index : PropTypes.number,
|
||||
intl : PropTypes.object.isRequired,
|
||||
onChange : PropTypes.func.isRequired,
|
||||
settings : ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
pages = [
|
||||
({ intl, onChange, settings }) => (
|
||||
<div className='glitch local-settings__page general'>
|
||||
<h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['layout']}
|
||||
id='mastodon-settings--layout'
|
||||
options={[
|
||||
{ value: 'auto', message: intl.formatMessage(messages.layout_auto) },
|
||||
{ value: 'multiple', message: intl.formatMessage(messages.layout_desktop) },
|
||||
{ value: 'single', message: intl.formatMessage(messages.layout_mobile) },
|
||||
]}
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.layout' defaultMessage='Layout:' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['stretch']}
|
||||
id='mastodon-settings--stretch'
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['navbar_under']}
|
||||
id='mastodon-settings--navbar_under'
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' />
|
||||
</LocalSettingsPageItem>
|
||||
<section>
|
||||
<h2><FormattedMessage id='settings.compose_box_opts' defaultMessage='Compose box options' /></h2>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['side_arm']}
|
||||
id='mastodon-settings--side_arm'
|
||||
options={[
|
||||
{ value: 'none', message: intl.formatMessage(messages.side_arm_none) },
|
||||
{ value: 'direct', message: intl.formatMessage({ id: 'privacy.direct.short' }) },
|
||||
{ value: 'private', message: intl.formatMessage({ id: 'privacy.private.short' }) },
|
||||
{ value: 'unlisted', message: intl.formatMessage({ id: 'privacy.unlisted.short' }) },
|
||||
{ value: 'public', message: intl.formatMessage({ id: 'privacy.public.short' }) },
|
||||
]}
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.side_arm' defaultMessage='Secondary toot button:' />
|
||||
</LocalSettingsPageItem>
|
||||
</section>
|
||||
</div>
|
||||
),
|
||||
({ onChange, settings }) => (
|
||||
<div className='glitch local-settings__page collapsed'>
|
||||
<h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'enabled']}
|
||||
id='mastodon-settings--collapsed-enabled'
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' />
|
||||
</LocalSettingsPageItem>
|
||||
<section>
|
||||
<h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'auto', 'all']}
|
||||
id='mastodon-settings--collapsed-auto-all'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
>
|
||||
<FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'auto', 'notifications']}
|
||||
id='mastodon-settings--collapsed-auto-notifications'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||
>
|
||||
<FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'auto', 'lengthy']}
|
||||
id='mastodon-settings--collapsed-auto-lengthy'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||
>
|
||||
<FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'auto', 'reblogs']}
|
||||
id='mastodon-settings--collapsed-auto-reblogs'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||
>
|
||||
<FormattedMessage id='settings.auto_collapse_reblogs' defaultMessage='Boosts' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'auto', 'replies']}
|
||||
id='mastodon-settings--collapsed-auto-replies'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||
>
|
||||
<FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'auto', 'media']}
|
||||
id='mastodon-settings--collapsed-auto-media'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||
>
|
||||
<FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' />
|
||||
</LocalSettingsPageItem>
|
||||
</section>
|
||||
<section>
|
||||
<h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'backgrounds', 'user_backgrounds']}
|
||||
id='mastodon-settings--collapsed-user-backgrouns'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
>
|
||||
<FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'backgrounds', 'preview_images']}
|
||||
id='mastodon-settings--collapsed-preview-images'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
>
|
||||
<FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' />
|
||||
</LocalSettingsPageItem>
|
||||
</section>
|
||||
</div>
|
||||
),
|
||||
({ onChange, settings }) => (
|
||||
<div className='glitch local-settings__page media'>
|
||||
<h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['media', 'letterbox']}
|
||||
id='mastodon-settings--media-letterbox'
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['media', 'fullwidth']}
|
||||
id='mastodon-settings--media-fullwidth'
|
||||
onChange={onChange}
|
||||
>
|
||||
<FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' />
|
||||
</LocalSettingsPageItem>
|
||||
</div>
|
||||
),
|
||||
];
|
||||
|
||||
render () {
|
||||
const { pages } = this;
|
||||
const { index, intl, onChange, settings } = this.props;
|
||||
const CurrentPage = pages[index] || pages[0];
|
||||
|
||||
return <CurrentPage intl={intl} onChange={onChange} settings={settings} />;
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,90 @@
|
|||
// Package imports
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
|
||||
// Stylesheet imports
|
||||
import './style.scss';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
export default class LocalSettingsPageItem extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
dependsOn: PropTypes.array,
|
||||
dependsOnNot: PropTypes.array,
|
||||
id: PropTypes.string.isRequired,
|
||||
item: PropTypes.array.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
options: PropTypes.arrayOf(PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
message: PropTypes.string.isRequired,
|
||||
})),
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
const { target } = e;
|
||||
const { item, onChange, options } = this.props;
|
||||
if (options && options.length > 0) onChange(item, target.value);
|
||||
else onChange(item, target.checked);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { handleChange } = this;
|
||||
const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props;
|
||||
let enabled = true;
|
||||
|
||||
if (dependsOn) {
|
||||
for (let i = 0; i < dependsOn.length; i++) {
|
||||
enabled = enabled && settings.getIn(dependsOn[i]);
|
||||
}
|
||||
}
|
||||
if (dependsOnNot) {
|
||||
for (let i = 0; i < dependsOnNot.length; i++) {
|
||||
enabled = enabled && !settings.getIn(dependsOnNot[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if (options && options.length > 0) {
|
||||
const currentValue = settings.getIn(item);
|
||||
const optionElems = options && options.length > 0 && options.map((opt) => (
|
||||
<option
|
||||
key={opt.value}
|
||||
value={opt.value}
|
||||
>
|
||||
{opt.message}
|
||||
</option>
|
||||
));
|
||||
return (
|
||||
<label className='glitch local-settings__page__item' htmlFor={id}>
|
||||
<p>{children}</p>
|
||||
<p>
|
||||
<select
|
||||
id={id}
|
||||
disabled={!enabled}
|
||||
onBlur={handleChange}
|
||||
onChange={handleChange}
|
||||
value={currentValue}
|
||||
>
|
||||
{optionElems}
|
||||
</select>
|
||||
</p>
|
||||
</label>
|
||||
);
|
||||
} else return (
|
||||
<label className='glitch local-settings__page__item' htmlFor={id}>
|
||||
<input
|
||||
id={id}
|
||||
type='checkbox'
|
||||
checked={settings.getIn(item)}
|
||||
onChange={handleChange}
|
||||
disabled={!enabled}
|
||||
/>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
@import 'styles/mastodon/variables';
|
||||
|
||||
.glitch.local-settings__page__item {
|
||||
select {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
@import 'styles/mastodon/variables';
|
||||
|
||||
.glitch.local-settings__page {
|
||||
display: block;
|
||||
flex: auto;
|
||||
padding: 15px 20px 15px 20px;
|
||||
width: 360px;
|
||||
overflow-y: auto;
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
@import 'styles/mastodon/variables';
|
||||
|
||||
.glitch.local-settings {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: $ui-secondary-color;
|
||||
color: $ui-base-color;
|
||||
border-radius: 8px;
|
||||
height: 80vh;
|
||||
width: 80vw;
|
||||
max-width: 740px;
|
||||
max-height: 450px;
|
||||
overflow: hidden;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,48 @@
|
|||
/*
|
||||
|
||||
`<NotificationContainer>`
|
||||
=========================
|
||||
|
||||
This container connects `<Notification>`s to the Redux store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Our imports //
|
||||
import Notification from '.';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
// replace account id with object
|
||||
let leNotif = props.notification.set('account', state.getIn(['accounts', props.notification.get('account')]));
|
||||
|
||||
// populate markedForDelete from state - is mysteriously lost somewhere
|
||||
for (let n of state.getIn(['notifications', 'items'])) {
|
||||
if (n.get('id') === props.notification.get('id')) {
|
||||
leNotif = leNotif.set('markedForDelete', n.get('markedForDelete'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return ({
|
||||
notification: leNotif,
|
||||
settings: state.get('local_settings'),
|
||||
notifCleaning: state.getIn(['notifications', 'cleaningMode']),
|
||||
});
|
||||
};
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
export default connect(mapStateToProps)(Notification);
|
|
@ -0,0 +1,72 @@
|
|||
// `<NotificationFollow>`
|
||||
// ======================
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Imports
|
||||
// -------
|
||||
|
||||
// Package imports.
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports.
|
||||
import Permalink from '../../../mastodon/components/permalink';
|
||||
import AccountContainer from '../../../mastodon/containers/account_container';
|
||||
|
||||
// Our imports.
|
||||
import NotificationOverlayContainer from '../notification/overlay/container';
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Implementation
|
||||
// --------------
|
||||
|
||||
export default class NotificationFollow extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
id : PropTypes.string.isRequired,
|
||||
account : ImmutablePropTypes.map.isRequired,
|
||||
notification : ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account, notification } = this.props;
|
||||
|
||||
// Links to the display name.
|
||||
const displayName = account.get('display_name_html') || account.get('username');
|
||||
const link = (
|
||||
<Permalink
|
||||
className='notification__display-name'
|
||||
href={account.get('url')}
|
||||
title={account.get('acct')}
|
||||
to={`/accounts/${account.get('id')}`}
|
||||
dangerouslySetInnerHTML={{ __html: displayName }}
|
||||
/>
|
||||
);
|
||||
|
||||
// Renders.
|
||||
return (
|
||||
<div className='notification notification-follow'>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__favourite-icon-wrapper'>
|
||||
<i className='fa fa-fw fa-user-plus' />
|
||||
</div>
|
||||
|
||||
<FormattedMessage
|
||||
id='notification.follow'
|
||||
defaultMessage='{name} followed you'
|
||||
values={{ name: link }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AccountContainer id={account.get('id')} withNote={false} />
|
||||
<NotificationOverlayContainer notification={notification} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,82 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
|
||||
// Our imports //
|
||||
import StatusContainer from '../status/container';
|
||||
import NotificationFollow from './follow';
|
||||
|
||||
export default class Notification extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
notification: ImmutablePropTypes.map.isRequired,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
renderFollow (notification) {
|
||||
return (
|
||||
<NotificationFollow
|
||||
id={notification.get('id')}
|
||||
account={notification.get('account')}
|
||||
notification={notification}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderMention (notification) {
|
||||
return (
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
notification={notification}
|
||||
withDismiss
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderFavourite (notification) {
|
||||
return (
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
account={notification.get('account')}
|
||||
prepend='favourite'
|
||||
muted
|
||||
notification={notification}
|
||||
withDismiss
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderReblog (notification) {
|
||||
return (
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
account={notification.get('account')}
|
||||
prepend='reblog'
|
||||
muted
|
||||
notification={notification}
|
||||
withDismiss
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { notification } = this.props;
|
||||
|
||||
switch(notification.get('type')) {
|
||||
case 'follow':
|
||||
return this.renderFollow(notification);
|
||||
case 'mention':
|
||||
return this.renderMention(notification);
|
||||
case 'favourite':
|
||||
return this.renderFavourite(notification);
|
||||
case 'reblog':
|
||||
return this.renderReblog(notification);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,49 @@
|
|||
/*
|
||||
|
||||
`<NotificationOverlayContainer>`
|
||||
=========================
|
||||
|
||||
This container connects `<NotificationOverlay>`s to the Redux store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Our imports //
|
||||
import NotificationOverlay from './notification_overlay';
|
||||
import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We only need to provide a dispatch for
|
||||
deleting notifications.
|
||||
|
||||
*/
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onMarkForDelete(id, yes) {
|
||||
dispatch(markNotificationForDelete(id, yes));
|
||||
},
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
show: state.getIn(['notifications', 'cleaningMode']),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);
|
|
@ -0,0 +1,61 @@
|
|||
/**
|
||||
* Notification overlay
|
||||
*/
|
||||
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
const messages = defineMessages({
|
||||
markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class NotificationOverlay extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
notification : ImmutablePropTypes.map.isRequired,
|
||||
onMarkForDelete : PropTypes.func.isRequired,
|
||||
show : PropTypes.bool.isRequired,
|
||||
intl : PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
onToggleMark = () => {
|
||||
const mark = !this.props.notification.get('markedForDelete');
|
||||
const id = this.props.notification.get('id');
|
||||
this.props.onMarkForDelete(id, mark);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { notification, show, intl } = this.props;
|
||||
|
||||
const active = notification.get('markedForDelete');
|
||||
const label = intl.formatMessage(messages.markForDeletion);
|
||||
|
||||
return show ? (
|
||||
<div
|
||||
aria-label={label}
|
||||
role='checkbox'
|
||||
aria-checked={active}
|
||||
tabIndex={0}
|
||||
className={`notification__dismiss-overlay ${active ? 'active' : ''}`}
|
||||
onClick={this.onToggleMark}
|
||||
>
|
||||
<div className='wrappy'>
|
||||
<div className='ckbox' aria-hidden='true' title={label}>
|
||||
{active ? (<i className='fa fa-check' />) : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,187 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
import RelativeTimestamp from '../../../mastodon/components/relative_timestamp';
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import DropdownMenuContainer from '../../../mastodon/containers/dropdown_menu_container';
|
||||
import { me } from '../../../mastodon/initial_state';
|
||||
|
||||
const messages = defineMessages({
|
||||
delete: { id: 'status.delete', defaultMessage: 'Delete' },
|
||||
mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
|
||||
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
|
||||
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
||||
reply: { id: 'status.reply', defaultMessage: 'Reply' },
|
||||
share: { id: 'status.share', defaultMessage: 'Share' },
|
||||
replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
|
||||
reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
|
||||
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
|
||||
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
||||
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
||||
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
|
||||
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
||||
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
|
||||
pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
|
||||
unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
|
||||
embed: { id: 'status.embed', defaultMessage: 'Embed' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusActionBar extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
onReply: PropTypes.func,
|
||||
onFavourite: PropTypes.func,
|
||||
onReblog: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onMention: PropTypes.func,
|
||||
onMute: PropTypes.func,
|
||||
onBlock: PropTypes.func,
|
||||
onReport: PropTypes.func,
|
||||
onEmbed: PropTypes.func,
|
||||
onMuteConversation: PropTypes.func,
|
||||
onPin: PropTypes.func,
|
||||
withDismiss: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
// Avoid checking props that are functions (and whose equality will always
|
||||
// evaluate to false. See react-immutable-pure-component for usage.
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'withDismiss',
|
||||
]
|
||||
|
||||
handleReplyClick = () => {
|
||||
this.props.onReply(this.props.status, this.context.router.history);
|
||||
}
|
||||
|
||||
handleShareClick = () => {
|
||||
navigator.share({
|
||||
text: this.props.status.get('search_index'),
|
||||
url: this.props.status.get('url'),
|
||||
});
|
||||
}
|
||||
|
||||
handleFavouriteClick = () => {
|
||||
this.props.onFavourite(this.props.status);
|
||||
}
|
||||
|
||||
handleReblogClick = (e) => {
|
||||
this.props.onReblog(this.props.status, e);
|
||||
}
|
||||
|
||||
handleDeleteClick = () => {
|
||||
this.props.onDelete(this.props.status);
|
||||
}
|
||||
|
||||
handlePinClick = () => {
|
||||
this.props.onPin(this.props.status);
|
||||
}
|
||||
|
||||
handleMentionClick = () => {
|
||||
this.props.onMention(this.props.status.get('account'), this.context.router.history);
|
||||
}
|
||||
|
||||
handleMuteClick = () => {
|
||||
this.props.onMute(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleBlockClick = () => {
|
||||
this.props.onBlock(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
|
||||
}
|
||||
|
||||
handleEmbed = () => {
|
||||
this.props.onEmbed(this.props.status);
|
||||
}
|
||||
|
||||
handleReport = () => {
|
||||
this.props.onReport(this.props.status);
|
||||
}
|
||||
|
||||
handleConversationMuteClick = () => {
|
||||
this.props.onMuteConversation(this.props.status);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { status, intl, withDismiss } = this.props;
|
||||
|
||||
const mutingConversation = status.get('muted');
|
||||
const anonymousAccess = !me;
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
||||
|
||||
let menu = [];
|
||||
let reblogIcon = 'retweet';
|
||||
let replyIcon;
|
||||
let replyTitle;
|
||||
|
||||
menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
|
||||
|
||||
if (publicStatus) {
|
||||
menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
|
||||
}
|
||||
|
||||
menu.push(null);
|
||||
|
||||
if (status.getIn(['account', 'id']) === me || withDismiss) {
|
||||
menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
|
||||
menu.push(null);
|
||||
}
|
||||
|
||||
if (status.getIn(['account', 'id']) === me) {
|
||||
if (publicStatus) {
|
||||
menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
|
||||
}
|
||||
|
||||
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
|
||||
menu.push(null);
|
||||
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
|
||||
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
|
||||
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
|
||||
}
|
||||
|
||||
if (status.get('in_reply_to_id', null) === null) {
|
||||
replyIcon = 'reply';
|
||||
replyTitle = intl.formatMessage(messages.reply);
|
||||
} else {
|
||||
replyIcon = 'reply-all';
|
||||
replyTitle = intl.formatMessage(messages.replyAll);
|
||||
}
|
||||
|
||||
const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
|
||||
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='status__action-bar'>
|
||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
|
||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
||||
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||
{shareButton}
|
||||
|
||||
<div className='status__action-bar-dropdown'>
|
||||
<DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
|
||||
</div>
|
||||
|
||||
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,263 @@
|
|||
/*
|
||||
|
||||
`<StatusContainer>`
|
||||
===================
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
|
||||
detecting reblogs has been moved here from <Status>.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
defineMessages,
|
||||
injectIntl,
|
||||
FormattedMessage,
|
||||
} from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import { makeGetStatus } from '../../../mastodon/selectors';
|
||||
import {
|
||||
replyCompose,
|
||||
mentionCompose,
|
||||
} from '../../../mastodon/actions/compose';
|
||||
import {
|
||||
reblog,
|
||||
favourite,
|
||||
unreblog,
|
||||
unfavourite,
|
||||
pin,
|
||||
unpin,
|
||||
} from '../../../mastodon/actions/interactions';
|
||||
import { blockAccount } from '../../../mastodon/actions/accounts';
|
||||
import { initMuteModal } from '../../../mastodon/actions/mutes';
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
deleteStatus,
|
||||
} from '../../../mastodon/actions/statuses';
|
||||
import { initReport } from '../../../mastodon/actions/reports';
|
||||
import { openModal } from '../../../mastodon/actions/modal';
|
||||
|
||||
// Our imports //
|
||||
import Status from '.';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Inital setup:
|
||||
-------------
|
||||
|
||||
The `messages` constant is used to define any messages that we will
|
||||
need in our component. In our case, these are the various confirmation
|
||||
messages used with statuses.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteConfirm : {
|
||||
id : 'confirmations.delete.confirm',
|
||||
defaultMessage : 'Delete',
|
||||
},
|
||||
deleteMessage : {
|
||||
id : 'confirmations.delete.message',
|
||||
defaultMessage : 'Are you sure you want to delete this status?',
|
||||
},
|
||||
blockConfirm : {
|
||||
id : 'confirmations.block.confirm',
|
||||
defaultMessage : 'Block',
|
||||
},
|
||||
});
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
State mapping:
|
||||
--------------
|
||||
|
||||
The `mapStateToProps()` function maps various state properties to the
|
||||
props of our component. We wrap this in a `makeMapStateToProps()`
|
||||
function to give us closure and preserve `getStatus()` across function
|
||||
calls.
|
||||
|
||||
*/
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
let status = getStatus(state, ownProps.id);
|
||||
|
||||
if(status === null) {
|
||||
console.error(`ERROR! NULL STATUS! ${ownProps.id}`);
|
||||
// work-around: find first good status
|
||||
for (let k of state.get('statuses').keys()) {
|
||||
status = getStatus(state, k);
|
||||
if (status !== null) break;
|
||||
}
|
||||
}
|
||||
|
||||
let reblogStatus = status.get('reblog', null);
|
||||
let account = undefined;
|
||||
let prepend = undefined;
|
||||
|
||||
/*
|
||||
|
||||
Here we process reblogs. If our status is a reblog, then we create a
|
||||
`prependMessage` to pass along to our `<Status>` along with the
|
||||
reblogger's `account`, and set `coreStatus` (the one we will actually
|
||||
render) to the status which has been reblogged.
|
||||
|
||||
*/
|
||||
|
||||
if (reblogStatus !== null && typeof reblogStatus === 'object') {
|
||||
account = status.get('account');
|
||||
status = reblogStatus;
|
||||
prepend = 'reblogged_by';
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Here are the props we pass to `<Status>`.
|
||||
|
||||
*/
|
||||
|
||||
return {
|
||||
status : status,
|
||||
account : account || ownProps.account,
|
||||
settings : state.get('local_settings'),
|
||||
prepend : prepend || ownProps.prepend,
|
||||
reblogModal : state.getIn(['meta', 'boost_modal']),
|
||||
deleteModal : state.getIn(['meta', 'delete_modal']),
|
||||
};
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We need to provide dispatches for all
|
||||
of the things you can do with a status: reply, reblog, favourite, et
|
||||
cetera.
|
||||
|
||||
For a few of these dispatches, we open up confirmation modals; the rest
|
||||
just immediately execute their corresponding actions.
|
||||
|
||||
*/
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
|
||||
onReply (status, router) {
|
||||
dispatch(replyCompose(status, router));
|
||||
},
|
||||
|
||||
onModalReblog (status) {
|
||||
dispatch(reblog(status));
|
||||
},
|
||||
|
||||
onReblog (status, e) {
|
||||
if (status.get('reblogged')) {
|
||||
dispatch(unreblog(status));
|
||||
} else {
|
||||
if (e.shiftKey || !this.reblogModal) {
|
||||
this.onModalReblog(status);
|
||||
} else {
|
||||
dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onFavourite (status) {
|
||||
if (status.get('favourited')) {
|
||||
dispatch(unfavourite(status));
|
||||
} else {
|
||||
dispatch(favourite(status));
|
||||
}
|
||||
},
|
||||
|
||||
onPin (status) {
|
||||
if (status.get('pinned')) {
|
||||
dispatch(unpin(status));
|
||||
} else {
|
||||
dispatch(pin(status));
|
||||
}
|
||||
},
|
||||
|
||||
onEmbed (status) {
|
||||
dispatch(openModal('EMBED', { url: status.get('url') }));
|
||||
},
|
||||
|
||||
onDelete (status) {
|
||||
if (!this.deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.deleteMessage),
|
||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'))),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
onMention (account, router) {
|
||||
dispatch(mentionCompose(account, router));
|
||||
},
|
||||
|
||||
onOpenMedia (media, index) {
|
||||
dispatch(openModal('MEDIA', { media, index }));
|
||||
},
|
||||
|
||||
onOpenVideo (media, time) {
|
||||
dispatch(openModal('VIDEO', { media, time }));
|
||||
},
|
||||
|
||||
onBlock (account) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
|
||||
confirm: intl.formatMessage(messages.blockConfirm),
|
||||
onConfirm: () => dispatch(blockAccount(account.get('id'))),
|
||||
}));
|
||||
},
|
||||
|
||||
onReport (status) {
|
||||
dispatch(initReport(status.get('account'), status));
|
||||
},
|
||||
|
||||
onMute (account) {
|
||||
dispatch(initMuteModal(account));
|
||||
},
|
||||
|
||||
onMuteConversation (status) {
|
||||
if (status.get('muted')) {
|
||||
dispatch(unmuteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(muteStatus(status.get('id')));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default injectIntl(
|
||||
connect(makeMapStateToProps, mapDispatchToProps)(Status)
|
||||
);
|
|
@ -0,0 +1,241 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classnames from 'classnames';
|
||||
|
||||
// Mastodon imports //
|
||||
import { isRtl } from '../../../mastodon/rtl';
|
||||
import Permalink from '../../../mastodon/components/permalink';
|
||||
|
||||
export default class StatusContent extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
expanded: PropTypes.oneOf([true, false, null]),
|
||||
setExpansion: PropTypes.func,
|
||||
onHeightUpdate: PropTypes.func,
|
||||
media: PropTypes.element,
|
||||
mediaIcon: PropTypes.string,
|
||||
parseClick: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
state = {
|
||||
hidden: true,
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
const node = this.node;
|
||||
const links = node.querySelectorAll('a');
|
||||
|
||||
for (let i = 0; i < links.length; ++i) {
|
||||
let link = links[i];
|
||||
let mention = this.props.status.get('mentions').find(item => link.href === item.get('url'));
|
||||
|
||||
if (mention) {
|
||||
link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
|
||||
link.setAttribute('title', mention.get('acct'));
|
||||
} else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
|
||||
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
|
||||
} else {
|
||||
link.addEventListener('click', this.onLinkClick.bind(this), false);
|
||||
link.setAttribute('title', link.href);
|
||||
}
|
||||
|
||||
link.setAttribute('target', '_blank');
|
||||
link.setAttribute('rel', 'noopener');
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (this.props.onHeightUpdate) {
|
||||
this.props.onHeightUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
onLinkClick = (e) => {
|
||||
if (this.props.expanded === false) {
|
||||
if (this.props.parseClick) this.props.parseClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
onMentionClick = (mention, e) => {
|
||||
if (this.props.parseClick) {
|
||||
this.props.parseClick(e, `/accounts/${mention.get('id')}`);
|
||||
}
|
||||
}
|
||||
|
||||
onHashtagClick = (hashtag, e) => {
|
||||
hashtag = hashtag.replace(/^#/, '').toLowerCase();
|
||||
|
||||
if (this.props.parseClick) {
|
||||
this.props.parseClick(e, `/timelines/tag/${hashtag}`);
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseDown = (e) => {
|
||||
this.startXY = [e.clientX, e.clientY];
|
||||
}
|
||||
|
||||
handleMouseUp = (e) => {
|
||||
const { parseClick } = this.props;
|
||||
|
||||
if (!this.startXY) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [ startX, startY ] = this.startXY;
|
||||
const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
|
||||
|
||||
if (e.target.localName === 'button' || e.target.localName === 'a' || (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (deltaX + deltaY < 5 && e.button === 0 && parseClick) {
|
||||
parseClick(e);
|
||||
}
|
||||
|
||||
this.startXY = null;
|
||||
}
|
||||
|
||||
handleSpoilerClick = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.props.setExpansion) {
|
||||
this.props.setExpansion(this.props.expanded ? null : true);
|
||||
} else {
|
||||
this.setState({ hidden: !this.state.hidden });
|
||||
}
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
status,
|
||||
media,
|
||||
mediaIcon,
|
||||
parseClick,
|
||||
disabled,
|
||||
} = this.props;
|
||||
|
||||
const hidden = (
|
||||
this.props.setExpansion ?
|
||||
!this.props.expanded :
|
||||
this.state.hidden
|
||||
);
|
||||
|
||||
const content = { __html: status.get('contentHtml') };
|
||||
const spoilerContent = { __html: status.get('spoilerHtml') };
|
||||
const directionStyle = { direction: 'ltr' };
|
||||
const classNames = classnames('status__content', {
|
||||
'status__content--with-action': parseClick && !disabled,
|
||||
});
|
||||
|
||||
if (isRtl(status.get('search_index'))) {
|
||||
directionStyle.direction = 'rtl';
|
||||
}
|
||||
|
||||
if (status.get('spoiler_text').length > 0) {
|
||||
let mentionsPlaceholder = '';
|
||||
|
||||
const mentionLinks = status.get('mentions').map(item => (
|
||||
<Permalink
|
||||
to={`/accounts/${item.get('id')}`}
|
||||
href={item.get('url')}
|
||||
key={item.get('id')}
|
||||
className='mention'
|
||||
>
|
||||
@<span>{item.get('username')}</span>
|
||||
</Permalink>
|
||||
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
|
||||
|
||||
const toggleText = hidden ? [
|
||||
<FormattedMessage
|
||||
id='status.show_more'
|
||||
defaultMessage='Show more'
|
||||
key='0'
|
||||
/>,
|
||||
mediaIcon ? (
|
||||
<i
|
||||
className={
|
||||
`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`
|
||||
}
|
||||
aria-hidden='true'
|
||||
key='1'
|
||||
/>
|
||||
) : null,
|
||||
] : [
|
||||
<FormattedMessage
|
||||
id='status.show_less'
|
||||
defaultMessage='Show less'
|
||||
key='0'
|
||||
/>,
|
||||
];
|
||||
|
||||
if (hidden) {
|
||||
mentionsPlaceholder = <div>{mentionLinks}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames}>
|
||||
<p
|
||||
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
>
|
||||
<span dangerouslySetInnerHTML={spoilerContent} />
|
||||
{' '}
|
||||
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
|
||||
{toggleText}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
{mentionsPlaceholder}
|
||||
|
||||
<div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
|
||||
<div
|
||||
ref={this.setRef}
|
||||
style={directionStyle}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
dangerouslySetInnerHTML={content}
|
||||
/>
|
||||
{media}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
} else if (parseClick) {
|
||||
return (
|
||||
<div
|
||||
className={classNames}
|
||||
style={directionStyle}
|
||||
>
|
||||
<div
|
||||
ref={this.setRef}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
dangerouslySetInnerHTML={content}
|
||||
/>
|
||||
{media}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
className='status__content'
|
||||
style={directionStyle}
|
||||
>
|
||||
<div ref={this.setRef} dangerouslySetInnerHTML={content} />
|
||||
{media}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,79 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import IconButton from '../../../../mastodon/components/icon_button';
|
||||
|
||||
// Our imports //
|
||||
import StatusGalleryItem from './item';
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusGallery extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
sensitive: PropTypes.bool,
|
||||
media: ImmutablePropTypes.list.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
fullwidth: PropTypes.bool,
|
||||
height: PropTypes.number.isRequired,
|
||||
onOpenMedia: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
autoPlayGif: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: !this.props.sensitive,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ visible: !this.state.visible });
|
||||
}
|
||||
|
||||
handleClick = (index) => {
|
||||
this.props.onOpenMedia(this.props.media, index);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { media, intl, sensitive, letterbox, fullwidth } = this.props;
|
||||
|
||||
let children;
|
||||
|
||||
if (!this.state.visible) {
|
||||
let warning;
|
||||
|
||||
if (sensitive) {
|
||||
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
|
||||
} else {
|
||||
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
|
||||
}
|
||||
|
||||
children = (
|
||||
<div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
|
||||
<span className='media-spoiler__warning'>{warning}</span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const size = media.take(4).size;
|
||||
children = media.take(4).map((attachment, i) => <StatusGalleryItem key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
|
||||
<div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
|
||||
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,158 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// Mastodon imports //
|
||||
import { isIOS } from '../../../../mastodon/is_mobile';
|
||||
|
||||
export default class StatusGalleryItem extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
attachment: ImmutablePropTypes.map.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
autoPlayGif: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
handleMouseEnter = (e) => {
|
||||
if (this.hoverToPlay()) {
|
||||
e.target.play();
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseLeave = (e) => {
|
||||
if (this.hoverToPlay()) {
|
||||
e.target.pause();
|
||||
e.target.currentTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
hoverToPlay () {
|
||||
const { attachment, autoPlayGif } = this.props;
|
||||
return !autoPlayGif && attachment.get('type') === 'gifv';
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
const { index, onClick } = this.props;
|
||||
|
||||
if (e.button === 0) {
|
||||
e.preventDefault();
|
||||
onClick(index);
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { attachment, index, size, letterbox } = this.props;
|
||||
|
||||
let width = 50;
|
||||
let height = 100;
|
||||
let top = 'auto';
|
||||
let left = 'auto';
|
||||
let bottom = 'auto';
|
||||
let right = 'auto';
|
||||
|
||||
if (size === 1) {
|
||||
width = 100;
|
||||
}
|
||||
|
||||
if (size === 4 || (size === 3 && index > 0)) {
|
||||
height = 50;
|
||||
}
|
||||
|
||||
if (size === 2) {
|
||||
if (index === 0) {
|
||||
right = '2px';
|
||||
} else {
|
||||
left = '2px';
|
||||
}
|
||||
} else if (size === 3) {
|
||||
if (index === 0) {
|
||||
right = '2px';
|
||||
} else if (index > 0) {
|
||||
left = '2px';
|
||||
}
|
||||
|
||||
if (index === 1) {
|
||||
bottom = '2px';
|
||||
} else if (index > 1) {
|
||||
top = '2px';
|
||||
}
|
||||
} else if (size === 4) {
|
||||
if (index === 0 || index === 2) {
|
||||
right = '2px';
|
||||
}
|
||||
|
||||
if (index === 1 || index === 3) {
|
||||
left = '2px';
|
||||
}
|
||||
|
||||
if (index < 2) {
|
||||
bottom = '2px';
|
||||
} else {
|
||||
top = '2px';
|
||||
}
|
||||
}
|
||||
|
||||
let thumbnail = '';
|
||||
|
||||
if (attachment.get('type') === 'image') {
|
||||
const previewUrl = attachment.get('preview_url');
|
||||
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
|
||||
|
||||
const originalUrl = attachment.get('url');
|
||||
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
|
||||
|
||||
const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
|
||||
const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`;
|
||||
|
||||
thumbnail = (
|
||||
<a
|
||||
className='media-gallery__item-thumbnail'
|
||||
href={attachment.get('remote_url') || originalUrl}
|
||||
onClick={this.handleClick}
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
className={letterbox ? 'letterbox' : ''}
|
||||
src={previewUrl} srcSet={srcSet}
|
||||
sizes={sizes}
|
||||
alt={attachment.get('description')}
|
||||
title={attachment.get('description')}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
} else if (attachment.get('type') === 'gifv') {
|
||||
const autoPlay = !isIOS() && this.props.autoPlayGif;
|
||||
|
||||
thumbnail = (
|
||||
<div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
|
||||
<video
|
||||
className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`}
|
||||
role='application'
|
||||
src={attachment.get('url')}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
autoPlay={autoPlay}
|
||||
loop
|
||||
muted
|
||||
/>
|
||||
|
||||
<span className='media-gallery__gifv__label'>GIF</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
|
||||
{thumbnail}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,146 @@
|
|||
/*
|
||||
|
||||
`<StatusHeader>`
|
||||
================
|
||||
|
||||
Originally a part of `<Status>`, but extracted into a separate
|
||||
component for better documentation and maintainance by
|
||||
@kibi@glitch.social as a part of glitch-soc/mastodon.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Imports
|
||||
// -------
|
||||
|
||||
// Package imports.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
// Mastodon imports.
|
||||
import Avatar from '../../../mastodon/components/avatar';
|
||||
import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
|
||||
import DisplayName from '../../../mastodon/components/display_name';
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import VisibilityIcon from './visibility_icon';
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Initial setup
|
||||
// -------------
|
||||
|
||||
// Messages for use with internationalization stuff.
|
||||
const messages = defineMessages({
|
||||
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
|
||||
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
|
||||
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
|
||||
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
|
||||
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
|
||||
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
|
||||
});
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// The component
|
||||
// -------------
|
||||
|
||||
@injectIntl
|
||||
export default class StatusHeader extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
friend: ImmutablePropTypes.map,
|
||||
mediaIcon: PropTypes.string,
|
||||
collapsible: PropTypes.bool,
|
||||
collapsed: PropTypes.bool,
|
||||
parseClick: PropTypes.func.isRequired,
|
||||
setExpansion: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
// Handles clicks on collapsed button
|
||||
handleCollapsedClick = (e) => {
|
||||
const { collapsed, setExpansion } = this.props;
|
||||
if (e.button === 0) {
|
||||
setExpansion(collapsed ? null : false);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// Handles clicks on account name/image
|
||||
handleAccountClick = (e) => {
|
||||
const { status, parseClick } = this.props;
|
||||
parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
|
||||
}
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
status,
|
||||
friend,
|
||||
mediaIcon,
|
||||
collapsible,
|
||||
collapsed,
|
||||
intl,
|
||||
} = this.props;
|
||||
|
||||
const account = status.get('account');
|
||||
|
||||
return (
|
||||
<header className='status__info'>
|
||||
<a
|
||||
href={account.get('url')}
|
||||
target='_blank'
|
||||
className='status__avatar'
|
||||
onClick={this.handleAccountClick}
|
||||
>
|
||||
{
|
||||
friend ? (
|
||||
<AvatarOverlay account={account} friend={friend} />
|
||||
) : (
|
||||
<Avatar account={account} size={48} />
|
||||
)
|
||||
}
|
||||
</a>
|
||||
<a
|
||||
href={account.get('url')}
|
||||
target='_blank'
|
||||
className='status__display-name'
|
||||
onClick={this.handleAccountClick}
|
||||
>
|
||||
<DisplayName account={account} />
|
||||
</a>
|
||||
<div className='status__info__icons'>
|
||||
{mediaIcon ? (
|
||||
<i
|
||||
className={`fa fa-fw fa-${mediaIcon}`}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
) : null}
|
||||
{(
|
||||
<VisibilityIcon visibility={status.get('visibility')} />
|
||||
)}
|
||||
{collapsible ? (
|
||||
<IconButton
|
||||
className='status__collapse-button'
|
||||
animate flip
|
||||
active={collapsed}
|
||||
title={
|
||||
collapsed ?
|
||||
intl.formatMessage(messages.uncollapse) :
|
||||
intl.formatMessage(messages.collapse)
|
||||
}
|
||||
icon='angle-double-up'
|
||||
onClick={this.handleCollapsedClick}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,760 @@
|
|||
/*
|
||||
|
||||
`<Status>`
|
||||
==========
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. *Heavily* rewritten (and documented!) by
|
||||
@kibi@glitch.social as a part of glitch-soc/mastodon. The following
|
||||
features have been added:
|
||||
|
||||
- Better separating the "guts" of statuses from their wrapper(s)
|
||||
- Collapsing statuses
|
||||
- Moving images inside of CWs
|
||||
|
||||
A number of aspects of this original file have been split off into
|
||||
their own components for better maintainance; for these, see:
|
||||
|
||||
- <StatusHeader>
|
||||
- <StatusPrepend>
|
||||
|
||||
…And, of course, the other <Status>-related components as well.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
import scheduleIdleTask from '../../../mastodon/features/ui/util/schedule_idle_task';
|
||||
import { autoPlayGif } from '../../../mastodon/initial_state';
|
||||
|
||||
// Our imports //
|
||||
import StatusPrepend from './prepend';
|
||||
import StatusHeader from './header';
|
||||
import StatusContent from './content';
|
||||
import StatusActionBar from './action_bar';
|
||||
import StatusGallery from './gallery';
|
||||
import StatusPlayer from './player';
|
||||
import NotificationOverlayContainer from '../notification/overlay/container';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
The `<Status>` component:
|
||||
-------------------------
|
||||
|
||||
The `<Status>` component is a container for statuses. It consists of a
|
||||
few parts:
|
||||
|
||||
- The `<StatusPrepend>`, which contains tangential information about
|
||||
the status, such as who reblogged it.
|
||||
- The `<StatusHeader>`, which contains the avatar and username of the
|
||||
status author, as well as a media icon and the "collapse" toggle.
|
||||
- The `<StatusContent>`, which contains the content of the status.
|
||||
- The `<StatusActionBar>`, which provides actions to be performed
|
||||
on statuses, like reblogging or sending a reply.
|
||||
|
||||
### Context
|
||||
|
||||
- __`router` (`PropTypes.object`) :__
|
||||
We need to get our router from the surrounding React context.
|
||||
|
||||
### Props
|
||||
|
||||
- __`id` (`PropTypes.number`) :__
|
||||
The id of the status.
|
||||
|
||||
- __`status` (`ImmutablePropTypes.map`) :__
|
||||
The status object, straight from the store.
|
||||
|
||||
- __`account` (`ImmutablePropTypes.map`) :__
|
||||
Don't be confused by this one! This is **not** the account which
|
||||
posted the status, but the associated account with any further
|
||||
action (eg, a reblog or a favourite).
|
||||
|
||||
- __`settings` (`ImmutablePropTypes.map`) :__
|
||||
These are our local settings, fetched from our store. We need this
|
||||
to determine how best to collapse our statuses, among other things.
|
||||
|
||||
- __`onFavourite`, `onReblog`, `onModalReblog`, `onDelete`,
|
||||
`onMention`, `onMute`, `onMuteConversation`, onBlock`, `onReport`,
|
||||
`onOpenMedia`, `onOpenVideo` (`PropTypes.func`) :__
|
||||
These are all functions passed through from the
|
||||
`<StatusContainer>`. We don't deal with them directly here.
|
||||
|
||||
- __`reblogModal`, `deleteModal` (`PropTypes.bool`) :__
|
||||
These tell whether or not the user has modals activated for
|
||||
reblogging and deleting statuses. They are used by the `onReblog`
|
||||
and `onDelete` functions, but we don't deal with them here.
|
||||
|
||||
- __`muted` (`PropTypes.bool`) :__
|
||||
This has nothing to do with a user or conversation mute! "Muted" is
|
||||
what Mastodon internally calls the subdued look of statuses in the
|
||||
notifications column. This should be `true` for notifications, and
|
||||
`false` otherwise.
|
||||
|
||||
- __`collapse` (`PropTypes.bool`) :__
|
||||
This prop signals a directive from a higher power to (un)collapse
|
||||
a status. Most of the time it should be `undefined`, in which case
|
||||
we do nothing.
|
||||
|
||||
- __`prepend` (`PropTypes.string`) :__
|
||||
The type of prepend: `'reblogged_by'`, `'reblog'`, or
|
||||
`'favourite'`.
|
||||
|
||||
- __`withDismiss` (`PropTypes.bool`) :__
|
||||
Whether or not the status can be dismissed. Used for notifications.
|
||||
|
||||
- __`intersectionObserverWrapper` (`PropTypes.object`) :__
|
||||
This holds our intersection observer. In Mastodon parlance,
|
||||
an "intersection" is just when the status is viewable onscreen.
|
||||
|
||||
### State
|
||||
|
||||
- __`isExpanded` :__
|
||||
Should be either `true`, `false`, or `null`. The meanings of
|
||||
these values are as follows:
|
||||
|
||||
- __`true` :__ The status contains a CW and the CW is expanded.
|
||||
- __`false` :__ The status is collapsed.
|
||||
- __`null` :__ The status is not collapsed or expanded.
|
||||
|
||||
- __`isIntersecting` :__
|
||||
This boolean tells us whether or not the status is currently
|
||||
onscreen.
|
||||
|
||||
- __`isHidden` :__
|
||||
This boolean tells us if the status has been unrendered to save
|
||||
CPUs.
|
||||
|
||||
*/
|
||||
|
||||
export default class Status extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router : PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
id : PropTypes.string,
|
||||
status : ImmutablePropTypes.map,
|
||||
account : ImmutablePropTypes.map,
|
||||
settings : ImmutablePropTypes.map,
|
||||
notification : ImmutablePropTypes.map,
|
||||
onFavourite : PropTypes.func,
|
||||
onReblog : PropTypes.func,
|
||||
onModalReblog : PropTypes.func,
|
||||
onDelete : PropTypes.func,
|
||||
onPin : PropTypes.func,
|
||||
onMention : PropTypes.func,
|
||||
onMute : PropTypes.func,
|
||||
onMuteConversation : PropTypes.func,
|
||||
onBlock : PropTypes.func,
|
||||
onEmbed : PropTypes.func,
|
||||
onHeightChange : PropTypes.func,
|
||||
onReport : PropTypes.func,
|
||||
onOpenMedia : PropTypes.func,
|
||||
onOpenVideo : PropTypes.func,
|
||||
reblogModal : PropTypes.bool,
|
||||
deleteModal : PropTypes.bool,
|
||||
muted : PropTypes.bool,
|
||||
collapse : PropTypes.bool,
|
||||
prepend : PropTypes.string,
|
||||
withDismiss : PropTypes.bool,
|
||||
intersectionObserverWrapper : PropTypes.object,
|
||||
};
|
||||
|
||||
state = {
|
||||
isExpanded : null,
|
||||
isIntersecting : true,
|
||||
isHidden : false,
|
||||
markedForDelete : false,
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
### Implementation
|
||||
|
||||
#### `updateOnProps` and `updateOnStates`.
|
||||
|
||||
`updateOnProps` and `updateOnStates` tell the component when to update.
|
||||
We specify them explicitly because some of our props are dynamically=
|
||||
generated functions, which would otherwise always trigger an update.
|
||||
Of course, this means that if we add an important prop, we will need
|
||||
to remember to specify it here.
|
||||
|
||||
*/
|
||||
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'account',
|
||||
'settings',
|
||||
'prepend',
|
||||
'boostModal',
|
||||
'muted',
|
||||
'collapse',
|
||||
'notification',
|
||||
]
|
||||
|
||||
updateOnStates = [
|
||||
'isExpanded',
|
||||
'markedForDelete',
|
||||
]
|
||||
|
||||
/*
|
||||
|
||||
#### `componentWillReceiveProps()`.
|
||||
|
||||
If our settings have changed to disable collapsed statuses, then we
|
||||
need to make sure that we uncollapse every one. We do that by watching
|
||||
for changes to `settings.collapsed.enabled` in
|
||||
`componentWillReceiveProps()`.
|
||||
|
||||
We also need to watch for changes on the `collapse` prop---if this
|
||||
changes to anything other than `undefined`, then we need to collapse or
|
||||
uncollapse our status accordingly.
|
||||
|
||||
*/
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
|
||||
if (this.state.isExpanded === false) {
|
||||
this.setExpansion(null);
|
||||
}
|
||||
} else if (
|
||||
nextProps.collapse !== this.props.collapse &&
|
||||
nextProps.collapse !== undefined
|
||||
) this.setExpansion(nextProps.collapse ? false : null);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentDidMount()`.
|
||||
|
||||
When mounting, we just check to see if our status should be collapsed,
|
||||
and collapse it if so. We don't need to worry about whether collapsing
|
||||
is enabled here, because `setExpansion()` already takes that into
|
||||
account.
|
||||
|
||||
The cases where a status should be collapsed are:
|
||||
|
||||
- The `collapse` prop has been set to `true`
|
||||
- The user has decided in local settings to collapse all statuses.
|
||||
- The user has decided to collapse all notifications ('muted'
|
||||
statuses).
|
||||
- The user has decided to collapse long statuses and the status is
|
||||
over 400px (without media, or 650px with).
|
||||
- The status is a reply and the user has decided to collapse all
|
||||
replies.
|
||||
- The status contains media and the user has decided to collapse all
|
||||
statuses with media.
|
||||
|
||||
We also start up our intersection observer to monitor our statuses.
|
||||
`componentMounted` lets us know that everything has been set up
|
||||
properly and our intersection observer is good to go.
|
||||
|
||||
*/
|
||||
|
||||
componentDidMount () {
|
||||
const { node, handleIntersection } = this;
|
||||
const {
|
||||
status,
|
||||
settings,
|
||||
collapse,
|
||||
muted,
|
||||
id,
|
||||
intersectionObserverWrapper,
|
||||
prepend,
|
||||
} = this.props;
|
||||
const autoCollapseSettings = settings.getIn(['collapsed', 'auto']);
|
||||
|
||||
if (
|
||||
collapse ||
|
||||
autoCollapseSettings.get('all') || (
|
||||
autoCollapseSettings.get('notifications') && muted
|
||||
) || (
|
||||
autoCollapseSettings.get('lengthy') &&
|
||||
node.clientHeight > (
|
||||
status.get('media_attachments').size && !muted ? 650 : 400
|
||||
)
|
||||
) || (
|
||||
autoCollapseSettings.get('reblogs') &&
|
||||
prepend === 'reblogged_by'
|
||||
) || (
|
||||
autoCollapseSettings.get('replies') &&
|
||||
status.get('in_reply_to_id', null) !== null
|
||||
) || (
|
||||
autoCollapseSettings.get('media') &&
|
||||
!(status.get('spoiler_text').length) &&
|
||||
status.get('media_attachments').size
|
||||
)
|
||||
) this.setExpansion(false);
|
||||
|
||||
if (!intersectionObserverWrapper) return;
|
||||
else intersectionObserverWrapper.observe(
|
||||
id,
|
||||
node,
|
||||
handleIntersection
|
||||
);
|
||||
|
||||
this.componentMounted = true;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `shouldComponentUpdate()`.
|
||||
|
||||
If the status is about to be both offscreen (not intersecting) and
|
||||
hidden, then we only need to update it if it's not that way currently.
|
||||
If the status is moving from offscreen to onscreen, then we *have* to
|
||||
re-render, so that we can unhide the element if necessary.
|
||||
|
||||
If neither of these cases are true, we can leave it up to our
|
||||
`updateOnProps` and `updateOnStates` arrays.
|
||||
|
||||
*/
|
||||
|
||||
shouldComponentUpdate (nextProps, nextState) {
|
||||
switch (true) {
|
||||
case !nextState.isIntersecting && nextState.isHidden:
|
||||
return this.state.isIntersecting || !this.state.isHidden;
|
||||
case nextState.isIntersecting && !this.state.isIntersecting:
|
||||
return true;
|
||||
default:
|
||||
return super.shouldComponentUpdate(nextProps, nextState);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentDidUpdate()`.
|
||||
|
||||
If our component is being rendered for any reason and an update has
|
||||
triggered, this will save its height.
|
||||
|
||||
This is, frankly, a bit overkill, as the only instance when we
|
||||
actually *need* to update the height right now should be when the
|
||||
value of `isExpanded` has changed. But it makes for more readable
|
||||
code and prevents bugs in the future where the height isn't set
|
||||
properly after some change.
|
||||
|
||||
*/
|
||||
|
||||
componentDidUpdate () {
|
||||
if (
|
||||
this.state.isIntersecting || !this.state.isHidden
|
||||
) this.saveHeight();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentWillUnmount()`.
|
||||
|
||||
If our component is about to unmount, then we'd better unset
|
||||
`this.componentMounted`.
|
||||
|
||||
*/
|
||||
|
||||
componentWillUnmount () {
|
||||
this.componentMounted = false;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `handleIntersection()`.
|
||||
|
||||
`handleIntersection()` either hides the status (if it is offscreen) or
|
||||
unhides it (if it is onscreen). It's called by
|
||||
`intersectionObserverWrapper.observe()`.
|
||||
|
||||
If our status isn't intersecting, we schedule an idle task (using the
|
||||
aptly-named `scheduleIdleTask()`) to hide the status at the next
|
||||
available opportunity.
|
||||
|
||||
tootsuite/mastodon left us with the following enlightening comment
|
||||
regarding this function:
|
||||
|
||||
> Edge 15 doesn't support isIntersecting, but we can infer it
|
||||
|
||||
It then implements a polyfill (intersectionRect.height > 0) which isn't
|
||||
actually sufficient. The short answer is, this behaviour isn't really
|
||||
supported on Edge but we can get kinda close.
|
||||
|
||||
*/
|
||||
|
||||
handleIntersection = (entry) => {
|
||||
const isIntersecting = (
|
||||
typeof entry.isIntersecting === 'boolean' ?
|
||||
entry.isIntersecting :
|
||||
entry.intersectionRect.height > 0
|
||||
);
|
||||
this.setState(
|
||||
(prevState) => {
|
||||
if (prevState.isIntersecting && !isIntersecting) {
|
||||
scheduleIdleTask(this.hideIfNotIntersecting);
|
||||
}
|
||||
return {
|
||||
isIntersecting : isIntersecting,
|
||||
isHidden : false,
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `hideIfNotIntersecting()`.
|
||||
|
||||
This function will hide the status if we're still not intersecting.
|
||||
Hiding the status means that it will just render an empty div instead
|
||||
of actual content, which saves RAMS and CPUs or some such.
|
||||
|
||||
*/
|
||||
|
||||
hideIfNotIntersecting = () => {
|
||||
if (!this.componentMounted) return;
|
||||
this.setState(
|
||||
(prevState) => ({ isHidden: !prevState.isIntersecting })
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `saveHeight()`.
|
||||
|
||||
`saveHeight()` saves the height of our status so that when whe hide it
|
||||
we preserve its dimensions. We only want to store our height, though,
|
||||
if our status has content (otherwise, it would imply that it is
|
||||
already hidden).
|
||||
|
||||
*/
|
||||
|
||||
saveHeight = () => {
|
||||
if (this.node && this.node.children.length) {
|
||||
this.height = this.node.getBoundingClientRect().height;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `setExpansion()`.
|
||||
|
||||
`setExpansion()` sets the value of `isExpanded` in our state. It takes
|
||||
one argument, `value`, which gives the desired value for `isExpanded`.
|
||||
The default for this argument is `null`.
|
||||
|
||||
`setExpansion()` automatically checks for us whether toot collapsing
|
||||
is enabled, so we don't have to.
|
||||
|
||||
We use a `switch` statement to simplify our code.
|
||||
|
||||
*/
|
||||
|
||||
setExpansion = (value) => {
|
||||
switch (true) {
|
||||
case value === undefined || value === null:
|
||||
this.setState({ isExpanded: null });
|
||||
break;
|
||||
case !value && this.props.settings.getIn(['collapsed', 'enabled']):
|
||||
this.setState({ isExpanded: false });
|
||||
break;
|
||||
case !!value:
|
||||
this.setState({ isExpanded: true });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `handleRef()`.
|
||||
|
||||
`handleRef()` just saves a reference to our status node to `this.node`.
|
||||
It also saves our height, in case the height of our node has changed.
|
||||
|
||||
*/
|
||||
|
||||
handleRef = (node) => {
|
||||
this.node = node;
|
||||
this.saveHeight();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `parseClick()`.
|
||||
|
||||
`parseClick()` takes a click event and responds appropriately.
|
||||
If our status is collapsed, then clicking on it should uncollapse it.
|
||||
If `Shift` is held, then clicking on it should collapse it.
|
||||
Otherwise, we open the url handed to us in `destination`, if
|
||||
applicable.
|
||||
|
||||
*/
|
||||
|
||||
parseClick = (e, destination) => {
|
||||
const { router } = this.context;
|
||||
const { status } = this.props;
|
||||
const { isExpanded } = this.state;
|
||||
if (!router) return;
|
||||
if (destination === undefined) {
|
||||
destination = `/statuses/${
|
||||
status.getIn(['reblog', 'id'], status.get('id'))
|
||||
}`;
|
||||
}
|
||||
if (e.button === 0) {
|
||||
if (isExpanded === false) this.setExpansion(null);
|
||||
else if (e.shiftKey) {
|
||||
this.setExpansion(false);
|
||||
document.getSelection().removeAllRanges();
|
||||
} else router.history.push(destination);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `render()`.
|
||||
|
||||
`render()` actually puts our element on the screen. The particulars of
|
||||
this operation are further explained in the code below.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const {
|
||||
parseClick,
|
||||
setExpansion,
|
||||
saveHeight,
|
||||
handleRef,
|
||||
} = this;
|
||||
const { router } = this.context;
|
||||
const {
|
||||
status,
|
||||
account,
|
||||
settings,
|
||||
collapsed,
|
||||
muted,
|
||||
prepend,
|
||||
intersectionObserverWrapper,
|
||||
onOpenVideo,
|
||||
onOpenMedia,
|
||||
notification,
|
||||
...other
|
||||
} = this.props;
|
||||
const { isExpanded, isIntersecting, isHidden } = this.state;
|
||||
let background = null;
|
||||
let attachments = null;
|
||||
let media = null;
|
||||
let mediaIcon = null;
|
||||
|
||||
/*
|
||||
|
||||
If we don't have a status, then we don't render anything.
|
||||
|
||||
*/
|
||||
|
||||
if (status === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
If our status is offscreen and hidden, then we render an empty <div> in
|
||||
its place. We fill it with "content" but note that opacity is set to 0.
|
||||
|
||||
*/
|
||||
|
||||
if (!isIntersecting && isHidden) {
|
||||
return (
|
||||
<div
|
||||
ref={this.handleRef}
|
||||
data-id={status.get('id')}
|
||||
style={{
|
||||
height : `${this.height}px`,
|
||||
opacity : 0,
|
||||
overflow : 'hidden',
|
||||
}}
|
||||
>
|
||||
{
|
||||
status.getIn(['account', 'display_name']) ||
|
||||
status.getIn(['account', 'username'])
|
||||
}
|
||||
{status.get('content')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
If user backgrounds for collapsed statuses are enabled, then we
|
||||
initialize our background accordingly. This will only be rendered if
|
||||
the status is collapsed.
|
||||
|
||||
*/
|
||||
|
||||
if (
|
||||
settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])
|
||||
) background = status.getIn(['account', 'header']);
|
||||
|
||||
/*
|
||||
|
||||
This handles our media attachments. Note that we don't show media on
|
||||
muted (notification) statuses. If the media type is unknown, then we
|
||||
simply ignore it.
|
||||
|
||||
After we have generated our appropriate media element and stored it in
|
||||
`media`, we snatch the thumbnail to use as our `background` if media
|
||||
backgrounds for collapsed statuses are enabled.
|
||||
|
||||
*/
|
||||
|
||||
attachments = status.get('media_attachments');
|
||||
if (attachments.size && !muted) {
|
||||
if (attachments.some((item) => item.get('type') === 'unknown')) {
|
||||
|
||||
} else if (
|
||||
attachments.getIn([0, 'type']) === 'video'
|
||||
) {
|
||||
media = ( // Media type is 'video'
|
||||
<StatusPlayer
|
||||
media={attachments.get(0)}
|
||||
sensitive={status.get('sensitive')}
|
||||
letterbox={settings.getIn(['media', 'letterbox'])}
|
||||
fullwidth={settings.getIn(['media', 'fullwidth'])}
|
||||
height={250}
|
||||
onOpenVideo={onOpenVideo}
|
||||
/>
|
||||
);
|
||||
mediaIcon = 'video-camera';
|
||||
} else { // Media type is 'image' or 'gifv'
|
||||
media = (
|
||||
<StatusGallery
|
||||
media={attachments}
|
||||
sensitive={status.get('sensitive')}
|
||||
letterbox={settings.getIn(['media', 'letterbox'])}
|
||||
fullwidth={settings.getIn(['media', 'fullwidth'])}
|
||||
height={250}
|
||||
onOpenMedia={onOpenMedia}
|
||||
autoPlayGif={autoPlayGif}
|
||||
/>
|
||||
);
|
||||
mediaIcon = 'picture-o';
|
||||
}
|
||||
|
||||
if (
|
||||
!status.get('sensitive') &&
|
||||
!(status.get('spoiler_text').length > 0) &&
|
||||
settings.getIn(['collapsed', 'backgrounds', 'preview_images'])
|
||||
) background = attachments.getIn([0, 'preview_url']);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Here we prepare extra data-* attributes for CSS selectors.
|
||||
Users can use those for theming, hiding avatars etc via UserStyle
|
||||
|
||||
*/
|
||||
|
||||
const selectorAttribs = {
|
||||
'data-status-by': `@${status.getIn(['account', 'acct'])}`,
|
||||
};
|
||||
|
||||
if (prepend && account) {
|
||||
const notifKind = {
|
||||
favourite: 'favourited',
|
||||
reblog: 'boosted',
|
||||
reblogged_by: 'boosted',
|
||||
}[prepend];
|
||||
|
||||
selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Finally, we can render our status. We just put the pieces together
|
||||
from above. We only render the action bar if the status isn't
|
||||
collapsed.
|
||||
|
||||
*/
|
||||
|
||||
return (
|
||||
<article
|
||||
className={
|
||||
`status${
|
||||
muted ? ' muted' : ''
|
||||
} status-${status.get('visibility')}${
|
||||
isExpanded === false ? ' collapsed' : ''
|
||||
}${
|
||||
isExpanded === false && background ? ' has-background' : ''
|
||||
}${
|
||||
this.state.markedForDelete ? ' marked-for-delete' : ''
|
||||
}`
|
||||
}
|
||||
style={{
|
||||
backgroundImage: (
|
||||
isExpanded === false && background ?
|
||||
`url(${background})` :
|
||||
'none'
|
||||
),
|
||||
}}
|
||||
ref={handleRef}
|
||||
{...selectorAttribs}
|
||||
>
|
||||
{prepend && account ? (
|
||||
<StatusPrepend
|
||||
type={prepend}
|
||||
account={account}
|
||||
parseClick={parseClick}
|
||||
notificationId={this.props.notificationId}
|
||||
/>
|
||||
) : null}
|
||||
<StatusHeader
|
||||
status={status}
|
||||
friend={account}
|
||||
mediaIcon={mediaIcon}
|
||||
collapsible={settings.getIn(['collapsed', 'enabled'])}
|
||||
collapsed={isExpanded === false}
|
||||
parseClick={parseClick}
|
||||
setExpansion={setExpansion}
|
||||
/>
|
||||
<StatusContent
|
||||
status={status}
|
||||
media={media}
|
||||
mediaIcon={mediaIcon}
|
||||
expanded={isExpanded}
|
||||
setExpansion={setExpansion}
|
||||
onHeightUpdate={saveHeight}
|
||||
parseClick={parseClick}
|
||||
disabled={!router}
|
||||
/>
|
||||
{isExpanded !== false ? (
|
||||
<StatusActionBar
|
||||
{...other}
|
||||
status={status}
|
||||
account={status.get('account')}
|
||||
/>
|
||||
) : null}
|
||||
{notification ? (
|
||||
<NotificationOverlayContainer
|
||||
notification={notification}
|
||||
/>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,203 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import { isIOS } from '../../../mastodon/is_mobile';
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
|
||||
toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusPlayer extends React.PureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
media: ImmutablePropTypes.map.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
fullwidth: PropTypes.bool,
|
||||
height: PropTypes.number,
|
||||
sensitive: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
autoplay: PropTypes.bool,
|
||||
onOpenVideo: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
height: 110,
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: !this.props.sensitive,
|
||||
preview: true,
|
||||
muted: true,
|
||||
hasAudio: true,
|
||||
videoError: false,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.setState({ muted: !this.state.muted });
|
||||
}
|
||||
|
||||
handleVideoClick = (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const node = this.video;
|
||||
|
||||
if (node.paused) {
|
||||
node.play();
|
||||
} else {
|
||||
node.pause();
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ preview: !this.state.preview });
|
||||
}
|
||||
|
||||
handleVisibility = () => {
|
||||
this.setState({
|
||||
visible: !this.state.visible,
|
||||
preview: true,
|
||||
});
|
||||
}
|
||||
|
||||
handleExpand = () => {
|
||||
this.video.pause();
|
||||
this.props.onOpenVideo(this.props.media, this.video.currentTime);
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.video = c;
|
||||
}
|
||||
|
||||
handleLoadedData = () => {
|
||||
if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
|
||||
this.setState({ hasAudio: false });
|
||||
}
|
||||
}
|
||||
|
||||
handleVideoError = () => {
|
||||
this.setState({ videoError: true });
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.addEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.addEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.addEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.addEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.removeEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.removeEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
|
||||
|
||||
let spoilerButton = (
|
||||
<div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
|
||||
<IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
|
||||
</div>
|
||||
);
|
||||
|
||||
let expandButton = !this.context.router ? '' : (
|
||||
<div className='status__video-player-expand'>
|
||||
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
|
||||
</div>
|
||||
);
|
||||
|
||||
let muteButton = '';
|
||||
|
||||
if (this.state.hasAudio) {
|
||||
muteButton = (
|
||||
<div className='status__video-player-mute'>
|
||||
<IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.state.visible) {
|
||||
if (sensitive) {
|
||||
return (
|
||||
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
|
||||
{spoilerButton}
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
|
||||
{spoilerButton}
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.preview && !autoplay) {
|
||||
return (
|
||||
<div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
|
||||
{spoilerButton}
|
||||
<div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.videoError) {
|
||||
return (
|
||||
<div style={{ height: `${height}px` }} className='video-error-cover' >
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
|
||||
{spoilerButton}
|
||||
{muteButton}
|
||||
{expandButton}
|
||||
|
||||
<video
|
||||
className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
ref={this.setRef}
|
||||
src={media.get('url')}
|
||||
autoPlay={!isIOS()}
|
||||
loop
|
||||
muted={this.state.muted}
|
||||
onClick={this.handleVideoClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
|
||||
`<StatusPrepend>`
|
||||
=================
|
||||
|
||||
Originally a part of `<Status>`, but extracted into a separate
|
||||
component for better documentation and maintainance by
|
||||
@kibi@glitch.social as a part of glitch-soc/mastodon.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
The `<StatusPrepend>` component:
|
||||
--------------------------------
|
||||
|
||||
The `<StatusPrepend>` component holds a status's prepend, ie the text
|
||||
that says “X reblogged this,” etc. It is represented by an `<aside>`
|
||||
element.
|
||||
|
||||
### Props
|
||||
|
||||
- __`type` (`PropTypes.string`) :__
|
||||
The type of prepend. One of `'reblogged_by'`, `'reblog'`,
|
||||
`'favourite'`.
|
||||
|
||||
- __`account` (`ImmutablePropTypes.map`) :__
|
||||
The account associated with the prepend.
|
||||
|
||||
- __`parseClick` (`PropTypes.func.isRequired`) :__
|
||||
Our click parsing function.
|
||||
|
||||
*/
|
||||
|
||||
export default class StatusPrepend extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
type: PropTypes.string.isRequired,
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
parseClick: PropTypes.func.isRequired,
|
||||
notificationId: PropTypes.number,
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
### Implementation
|
||||
|
||||
#### `handleClick()`.
|
||||
|
||||
This is just a small wrapper for `parseClick()` that gets fired when
|
||||
an account link is clicked.
|
||||
|
||||
*/
|
||||
|
||||
handleClick = (e) => {
|
||||
const { account, parseClick } = this.props;
|
||||
parseClick(e, `/accounts/${+account.get('id')}`);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `<Message>`.
|
||||
|
||||
`<Message>` is a quick functional React component which renders the
|
||||
actual prepend message based on our provided `type`. First we create a
|
||||
`link` for the account's name, and then use `<FormattedMessage>` to
|
||||
generate the message.
|
||||
|
||||
*/
|
||||
|
||||
Message = () => {
|
||||
const { type, account } = this.props;
|
||||
let link = (
|
||||
<a
|
||||
onClick={this.handleClick}
|
||||
href={account.get('url')}
|
||||
className='status__display-name'
|
||||
>
|
||||
<b
|
||||
dangerouslySetInnerHTML={{
|
||||
__html : account.get('display_name_html') || account.get('username'),
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
switch (type) {
|
||||
case 'reblogged_by':
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='status.reblogged_by'
|
||||
defaultMessage='{name} boosted'
|
||||
values={{ name : link }}
|
||||
/>
|
||||
);
|
||||
case 'favourite':
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='notification.favourite'
|
||||
defaultMessage='{name} favourited your status'
|
||||
values={{ name : link }}
|
||||
/>
|
||||
);
|
||||
case 'reblog':
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='notification.reblog'
|
||||
defaultMessage='{name} boosted your status'
|
||||
values={{ name : link }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `render()`.
|
||||
|
||||
Our `render()` is incredibly simple; we just render the icon and then
|
||||
the `<Message>` inside of an <aside>.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const { Message } = this;
|
||||
const { type } = this.props;
|
||||
|
||||
return !type ? null : (
|
||||
<aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
|
||||
<div className={type === 'reblogged_by' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}>
|
||||
<i
|
||||
className={`fa fa-fw fa-${
|
||||
type === 'favourite' ? 'star star-icon' : 'retweet'
|
||||
} status__prepend-icon`}
|
||||
/>
|
||||
</div>
|
||||
<Message />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,48 @@
|
|||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
const messages = defineMessages({
|
||||
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
|
||||
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
|
||||
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
|
||||
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class VisibilityIcon extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
visibility: PropTypes.string,
|
||||
intl: PropTypes.object.isRequired,
|
||||
withLabel: PropTypes.bool,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { withLabel, visibility, intl } = this.props;
|
||||
|
||||
const visibilityClass = {
|
||||
public: 'globe',
|
||||
unlisted: 'unlock-alt',
|
||||
private: 'lock',
|
||||
direct: 'envelope',
|
||||
}[visibility];
|
||||
|
||||
const label = intl.formatMessage(messages[visibility]);
|
||||
|
||||
const icon = (<i
|
||||
className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
|
||||
title={label}
|
||||
aria-hidden='true'
|
||||
/>);
|
||||
|
||||
if (withLabel) {
|
||||
return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>);
|
||||
} else {
|
||||
return icon;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"getting_started.open_source_notice": "Glitchsoc is free open source software forked from {Mastodon}. You can contribute or report issues on GitHub at {github}.",
|
||||
"layout.auto": "Auto",
|
||||
"layout.current_is": "Your current layout is:",
|
||||
"layout.desktop": "Desktop",
|
||||
"layout.mobile": "Mobile",
|
||||
"navigation_bar.app_settings": "App settings",
|
||||
"getting_started.onboarding": "Show me around",
|
||||
"onboarding.page_one.federation": "{domain} is an 'instance' of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
|
||||
"onboarding.page_one.welcome": "Welcome to {domain}!",
|
||||
"onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}, and is compatible with any Mastodon instance or app. Glitchsoc is entirely free and open-source. You can report bugs, request features, or contribute to the code on {github}.",
|
||||
"settings.auto_collapse": "Automatic collapsing",
|
||||
"settings.auto_collapse_all": "Everything",
|
||||
"settings.auto_collapse_lengthy": "Lengthy toots",
|
||||
"settings.auto_collapse_media": "Toots with media",
|
||||
"settings.auto_collapse_notifications": "Notifications",
|
||||
"settings.auto_collapse_reblogs": "Boosts",
|
||||
"settings.auto_collapse_replies": "Replies",
|
||||
"settings.close": "Close",
|
||||
"settings.collapsed_statuses": "Collapsed toots",
|
||||
"settings.enable_collapsed": "Enable collapsed toots",
|
||||
"settings.general": "General",
|
||||
"settings.image_backgrounds": "Image backgrounds",
|
||||
"settings.image_backgrounds_media": "Preview collapsed toot media",
|
||||
"settings.image_backgrounds_users": "Give collapsed toots an image background",
|
||||
"settings.media": "Media",
|
||||
"settings.media_letterbox": "Letterbox media",
|
||||
"settings.media_fullwidth": "Full-width media previews",
|
||||
"settings.preferences": "User preferences",
|
||||
"settings.wide_view": "Wide view (Desktop mode only)",
|
||||
"settings.navbar_under": "Navbar at the bottom (Mobile only)",
|
||||
"status.collapse": "Collapse",
|
||||
"status.uncollapse": "Uncollapse",
|
||||
|
||||
"notification.markForDeletion": "Mark for deletion",
|
||||
"notifications.clear": "Clear all my notifications",
|
||||
"notifications.marked_clear_confirmation": "Are you sure you want to permanently clear all selected notifications?",
|
||||
"notifications.marked_clear": "Clear selected notifications",
|
||||
|
||||
"notification_purge.btn_all": "Select\nall",
|
||||
"notification_purge.btn_none": "Select\nnone",
|
||||
"notification_purge.btn_invert": "Invert\nselection",
|
||||
"notification_purge.btn_apply": "Clear\nselected"
|
||||
}
|
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
|
||||
`reducers/local_settings`
|
||||
========================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - kibigo! [@kibi@glitch.social]
|
||||
|
||||
This file provides our Redux reducers related to local settings. The
|
||||
associated actions are:
|
||||
|
||||
- __`STORE_HYDRATE` :__
|
||||
Used to hydrate the store with its initial values.
|
||||
|
||||
- __`LOCAL_SETTING_CHANGE` :__
|
||||
Used to change the value of a local setting in the store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
// Mastodon imports //
|
||||
import { STORE_HYDRATE } from '../../mastodon/actions/store';
|
||||
|
||||
// Our imports //
|
||||
import { LOCAL_SETTING_CHANGE } from '../actions/local_settings';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
initialState:
|
||||
-------------
|
||||
|
||||
You can see the default values for all of our local settings here.
|
||||
These are only used if no previously-saved values exist.
|
||||
|
||||
*/
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
layout : 'auto',
|
||||
stretch : true,
|
||||
navbar_under : false,
|
||||
side_arm : 'none',
|
||||
collapsed : ImmutableMap({
|
||||
enabled : true,
|
||||
auto : ImmutableMap({
|
||||
all : false,
|
||||
notifications : true,
|
||||
lengthy : true,
|
||||
reblogs : false,
|
||||
replies : false,
|
||||
media : false,
|
||||
}),
|
||||
backgrounds : ImmutableMap({
|
||||
user_backgrounds : false,
|
||||
preview_images : false,
|
||||
}),
|
||||
}),
|
||||
media : ImmutableMap({
|
||||
letterbox : true,
|
||||
fullwidth : true,
|
||||
}),
|
||||
});
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Helper functions:
|
||||
-----------------
|
||||
|
||||
### `hydrate(state, localSettings)`
|
||||
|
||||
`hydrate()` is used to hydrate the `local_settings` part of our store
|
||||
with its initial values. The `state` will probably just be the
|
||||
`initialState`, and the `localSettings` should be whatever we pulled
|
||||
from `localStorage`.
|
||||
|
||||
*/
|
||||
|
||||
const hydrate = (state, localSettings) => state.mergeDeep(localSettings);
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
`localSettings(state = initialState, action)`:
|
||||
----------------------------------------------
|
||||
|
||||
This function holds our actual reducer.
|
||||
|
||||
If our action is `STORE_HYDRATE`, then we call `hydrate()` with the
|
||||
`local_settings` property of the provided `action.state`.
|
||||
|
||||
If our action is `LOCAL_SETTING_CHANGE`, then we set `action.key` in
|
||||
our state to the provided `action.value`. Note that `action.key` MUST
|
||||
be an array, since we use `setIn()`.
|
||||
|
||||
> __Note :__
|
||||
> We call this function `localSettings`, but its associated object
|
||||
> in the store is `local_settings`.
|
||||
|
||||
*/
|
||||
|
||||
export default function localSettings(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case STORE_HYDRATE:
|
||||
return hydrate(state, action.state.get('local_settings'));
|
||||
case LOCAL_SETTING_CHANGE:
|
||||
return state.setIn(action.key, action.value);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
|
@ -0,0 +1,331 @@
|
|||
/*
|
||||
|
||||
`util/bio_metadata`
|
||||
===================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - kibigo! [@kibi@glitch.social]
|
||||
|
||||
This file provides two functions for dealing with bio metadata. The
|
||||
functions are:
|
||||
|
||||
- __`processBio(content)` :__
|
||||
Processes `content` to extract any frontmatter. The returned
|
||||
object has two properties: `text`, which contains the text of
|
||||
`content` sans-frontmatter, and `metadata`, which is an array
|
||||
of key-value pairs (in two-element array format). If no
|
||||
frontmatter was provided in `content`, then `metadata` will be
|
||||
an empty array.
|
||||
|
||||
- __`createBio(note, data)` :__
|
||||
Reverses the process in `processBio()`; takes a `note` and an
|
||||
array of two-element arrays (which should give keys and values)
|
||||
and outputs a string containing a well-formed bio with
|
||||
frontmatter.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*********************************************************************\
|
||||
|
||||
To my lovely code maintainers,
|
||||
|
||||
The syntax recognized by the Mastodon frontend for its bio metadata
|
||||
feature is a subset of that provided by the YAML 1.2 specification.
|
||||
In particular, Mastodon recognizes metadata which is provided as an
|
||||
implicit YAML map, where each key-value pair takes up only a single
|
||||
line (no multi-line values are permitted). To simplify the level of
|
||||
processing required, Mastodon metadata frontmatter has been limited
|
||||
to only allow those characters in the `c-printable` set, as defined
|
||||
by the YAML 1.2 specification, instead of permitting those from the
|
||||
`nb-json` characters inside double-quoted strings like YAML proper.
|
||||
¶ It is important to note that Mastodon only borrows the *syntax*
|
||||
of YAML, not its semantics. This is to say, Mastodon won't make any
|
||||
attempt to interpret the data it receives. `true` will not become a
|
||||
boolean; `56` will not be interpreted as a number. Rather, each key
|
||||
and every value will be read as a string, and as a string they will
|
||||
remain. The order of the pairs is unchanged, and any duplicate keys
|
||||
are preserved. However, YAML escape sequences will be replaced with
|
||||
the proper interpretations according to the YAML 1.2 specification.
|
||||
¶ The implementation provided below interprets `<br>` as `\n` and
|
||||
allows for an open <p> tag at the beginning of the bio. It replaces
|
||||
the escaped character entities `'` and `"` with single or
|
||||
double quotes, respectively, prior to processing. However, no other
|
||||
escaped characters are replaced, not even those which might have an
|
||||
impact on the syntax otherwise. These minor allowances are provided
|
||||
because the Mastodon backend will insert these things automatically
|
||||
into a bio before sending it through the API, so it is important we
|
||||
account for them. Aside from this, the YAML frontmatter must be the
|
||||
very first thing in the bio, leading with three consecutive hyphen-
|
||||
minues (`---`), and ending with the same or, alternatively, instead
|
||||
with three periods (`...`). No limits have been set with respect to
|
||||
the number of characters permitted in the frontmatter, although one
|
||||
should note that only limited space is provided for them in the UI.
|
||||
¶ The regular expression used to check the existence of, and then
|
||||
process, the YAML frontmatter has been split into a number of small
|
||||
components in the code below, in the vain hope that it will be much
|
||||
easier to read and to maintain. I leave it to the future readers of
|
||||
this code to determine the extent of my successes in this endeavor.
|
||||
|
||||
UPDATE 19 Oct 2017: We no longer allow character escapes inside our
|
||||
double-quoted strings for ease of processing. We now internally use
|
||||
the name "ƔAML" in our code to clarify that this is Not Quite YAML.
|
||||
|
||||
Sending love + warmth eternal,
|
||||
- kibigo [@kibi@glitch.social]
|
||||
|
||||
\*********************************************************************/
|
||||
|
||||
/* "u" FLAG COMPATABILITY */
|
||||
|
||||
let compat_mode = false;
|
||||
try {
|
||||
new RegExp('.', 'u');
|
||||
} catch (e) {
|
||||
compat_mode = true;
|
||||
}
|
||||
|
||||
/* CONVENIENCE FUNCTIONS */
|
||||
|
||||
const unirex = str => compat_mode ? new RegExp(str) : new RegExp(str, 'u');
|
||||
const rexstr = exp => '(?:' + exp.source + ')';
|
||||
|
||||
/* CHARACTER CLASSES */
|
||||
|
||||
const DOCUMENT_START = /^/;
|
||||
const DOCUMENT_END = /$/;
|
||||
const ALLOWED_CHAR = unirex( // `c-printable` in the YAML 1.2 spec.
|
||||
compat_mode ? '[\t\n\r\x20-\x7e\x85\xa0-\ufffd]' : '[\t\n\r\x20-\x7e\x85\xa0-\ud7ff\ue000-\ufffd\u{10000}-\u{10FFFF}]'
|
||||
);
|
||||
const WHITE_SPACE = /[ \t]/;
|
||||
const LINE_BREAK = /\r?\n|\r|<br\s*\/?>/;
|
||||
const INDICATOR = /[-?:,[\]{}&#*!|>'"%@`]/;
|
||||
const FLOW_CHAR = /[,[\]{}]/;
|
||||
|
||||
/* NEGATED CHARACTER CLASSES */
|
||||
|
||||
const NOT_WHITE_SPACE = unirex('(?!' + rexstr(WHITE_SPACE) + ')[^]');
|
||||
const NOT_LINE_BREAK = unirex('(?!' + rexstr(LINE_BREAK) + ')[^]');
|
||||
const NOT_INDICATOR = unirex('(?!' + rexstr(INDICATOR) + ')[^]');
|
||||
const NOT_FLOW_CHAR = unirex('(?!' + rexstr(FLOW_CHAR) + ')[^]');
|
||||
const NOT_ALLOWED_CHAR = unirex(
|
||||
'(?!' + rexstr(ALLOWED_CHAR) + ')[^]'
|
||||
);
|
||||
|
||||
/* BASIC CONSTRUCTS */
|
||||
|
||||
const ANY_WHITE_SPACE = unirex(rexstr(WHITE_SPACE) + '*');
|
||||
const ANY_ALLOWED_CHARS = unirex(rexstr(ALLOWED_CHAR) + '*');
|
||||
const NEW_LINE = unirex(
|
||||
rexstr(ANY_WHITE_SPACE) + rexstr(LINE_BREAK)
|
||||
);
|
||||
const SOME_NEW_LINES = unirex(
|
||||
'(?:' + rexstr(NEW_LINE) + ')+'
|
||||
);
|
||||
const POSSIBLE_STARTS = unirex(
|
||||
rexstr(DOCUMENT_START) + rexstr(/<p[^<>]*>/) + '?'
|
||||
);
|
||||
const POSSIBLE_ENDS = unirex(
|
||||
rexstr(SOME_NEW_LINES) + '|' +
|
||||
rexstr(DOCUMENT_END) + '|' +
|
||||
rexstr(/<\/p>/)
|
||||
);
|
||||
const QUOTE_CHAR = unirex(
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')[^"]'
|
||||
);
|
||||
const ANY_QUOTE_CHAR = unirex(
|
||||
rexstr(QUOTE_CHAR) + '*'
|
||||
);
|
||||
|
||||
const ESCAPED_APOS = unirex(
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')' + rexstr(/[^']|''/)
|
||||
);
|
||||
const ANY_ESCAPED_APOS = unirex(
|
||||
rexstr(ESCAPED_APOS) + '*'
|
||||
);
|
||||
const FIRST_KEY_CHAR = unirex(
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')' +
|
||||
'(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
|
||||
rexstr(NOT_INDICATOR) + '|' +
|
||||
rexstr(/[?:-]/) +
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')' +
|
||||
'(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
|
||||
'(?=' + rexstr(NOT_FLOW_CHAR) + ')'
|
||||
);
|
||||
const FIRST_VALUE_CHAR = unirex(
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')' +
|
||||
'(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
|
||||
rexstr(NOT_INDICATOR) + '|' +
|
||||
rexstr(/[?:-]/) +
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')' +
|
||||
'(?=' + rexstr(NOT_WHITE_SPACE) + ')'
|
||||
// Flow indicators are allowed in values.
|
||||
);
|
||||
const LATER_KEY_CHAR = unirex(
|
||||
rexstr(WHITE_SPACE) + '|' +
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')' +
|
||||
'(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
|
||||
'(?=' + rexstr(NOT_FLOW_CHAR) + ')' +
|
||||
rexstr(/[^:#]#?/) + '|' +
|
||||
rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
|
||||
);
|
||||
const LATER_VALUE_CHAR = unirex(
|
||||
rexstr(WHITE_SPACE) + '|' +
|
||||
'(?=' + rexstr(NOT_LINE_BREAK) + ')' +
|
||||
'(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
|
||||
// Flow indicators are allowed in values.
|
||||
rexstr(/[^:#]#?/) + '|' +
|
||||
rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
|
||||
);
|
||||
|
||||
/* YAML CONSTRUCTS */
|
||||
|
||||
const ƔAML_START = unirex(
|
||||
rexstr(ANY_WHITE_SPACE) + '---'
|
||||
);
|
||||
const ƔAML_END = unirex(
|
||||
rexstr(ANY_WHITE_SPACE) + '(?:---|\.\.\.)'
|
||||
);
|
||||
const ƔAML_LOOKAHEAD = unirex(
|
||||
'(?=' +
|
||||
rexstr(ƔAML_START) +
|
||||
rexstr(ANY_ALLOWED_CHARS) + rexstr(NEW_LINE) +
|
||||
rexstr(ƔAML_END) + rexstr(POSSIBLE_ENDS) +
|
||||
')'
|
||||
);
|
||||
const ƔAML_DOUBLE_QUOTE = unirex(
|
||||
'"' + rexstr(ANY_QUOTE_CHAR) + '"'
|
||||
);
|
||||
const ƔAML_SINGLE_QUOTE = unirex(
|
||||
'\'' + rexstr(ANY_ESCAPED_APOS) + '\''
|
||||
);
|
||||
const ƔAML_SIMPLE_KEY = unirex(
|
||||
rexstr(FIRST_KEY_CHAR) + rexstr(LATER_KEY_CHAR) + '*'
|
||||
);
|
||||
const ƔAML_SIMPLE_VALUE = unirex(
|
||||
rexstr(FIRST_VALUE_CHAR) + rexstr(LATER_VALUE_CHAR) + '*'
|
||||
);
|
||||
const ƔAML_KEY = unirex(
|
||||
rexstr(ƔAML_DOUBLE_QUOTE) + '|' +
|
||||
rexstr(ƔAML_SINGLE_QUOTE) + '|' +
|
||||
rexstr(ƔAML_SIMPLE_KEY)
|
||||
);
|
||||
const ƔAML_VALUE = unirex(
|
||||
rexstr(ƔAML_DOUBLE_QUOTE) + '|' +
|
||||
rexstr(ƔAML_SINGLE_QUOTE) + '|' +
|
||||
rexstr(ƔAML_SIMPLE_VALUE)
|
||||
);
|
||||
const ƔAML_SEPARATOR = unirex(
|
||||
rexstr(ANY_WHITE_SPACE) +
|
||||
':' + rexstr(WHITE_SPACE) +
|
||||
rexstr(ANY_WHITE_SPACE)
|
||||
);
|
||||
const ƔAML_LINE = unirex(
|
||||
'(' + rexstr(ƔAML_KEY) + ')' +
|
||||
rexstr(ƔAML_SEPARATOR) +
|
||||
'(' + rexstr(ƔAML_VALUE) + ')'
|
||||
);
|
||||
|
||||
/* FRONTMATTER REGEX */
|
||||
|
||||
const ƔAML_FRONTMATTER = unirex(
|
||||
rexstr(POSSIBLE_STARTS) +
|
||||
rexstr(ƔAML_LOOKAHEAD) +
|
||||
rexstr(ƔAML_START) + rexstr(SOME_NEW_LINES) +
|
||||
'(?:' +
|
||||
rexstr(ANY_WHITE_SPACE) + rexstr(ƔAML_LINE) + rexstr(SOME_NEW_LINES) +
|
||||
'){0,5}' +
|
||||
rexstr(ƔAML_END) + rexstr(POSSIBLE_ENDS)
|
||||
);
|
||||
|
||||
/* SEARCHES */
|
||||
|
||||
const FIND_ƔAML_LINE = unirex(
|
||||
rexstr(NEW_LINE) + rexstr(ANY_WHITE_SPACE) + rexstr(ƔAML_LINE)
|
||||
);
|
||||
|
||||
/* STRING PROCESSING */
|
||||
|
||||
function processString (str) {
|
||||
switch (str.charAt(0)) {
|
||||
case '"':
|
||||
return str.substring(1, str.length - 1);
|
||||
case '\'':
|
||||
return str
|
||||
.substring(1, str.length - 1)
|
||||
.replace(/''/g, '\'');
|
||||
default:
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
/* BIO PROCESSING */
|
||||
|
||||
export function processBio(content) {
|
||||
content = content.replace(/"/g, '"').replace(/'/g, '\'');
|
||||
let result = {
|
||||
text: content,
|
||||
metadata: [],
|
||||
};
|
||||
let ɣaml = content.match(ƔAML_FRONTMATTER);
|
||||
if (!ɣaml) {
|
||||
return result;
|
||||
} else {
|
||||
ɣaml = ɣaml[0];
|
||||
}
|
||||
const start = content.search(ƔAML_START);
|
||||
const end = start + ɣaml.length - ɣaml.search(ƔAML_START);
|
||||
result.text = content.substr(end);
|
||||
let metadata = null;
|
||||
let query = new RegExp(rexstr(FIND_ƔAML_LINE), 'g'); // Some browsers don't allow flags unless both args are strings
|
||||
while ((metadata = query.exec(ɣaml))) {
|
||||
result.metadata.push([
|
||||
processString(metadata[1]),
|
||||
processString(metadata[2]),
|
||||
]);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/* BIO CREATION */
|
||||
|
||||
export function createBio(note, data) {
|
||||
if (!note) note = '';
|
||||
let frontmatter = '';
|
||||
if ((data && data.length) || note.match(/^\s*---\s+/)) {
|
||||
if (!data) frontmatter = '---\n...\n';
|
||||
else {
|
||||
frontmatter += '---\n';
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let key = '' + data[i][0];
|
||||
let val = '' + data[i][1];
|
||||
|
||||
// Key processing
|
||||
if (key === (key.match(ƔAML_SIMPLE_KEY) || [])[0]) /* do nothing */;
|
||||
else if (key === (key.match(ANY_QUOTE_CHAR) || [])[0]) key = '"' + key + '"';
|
||||
else {
|
||||
key = key
|
||||
.replace(/'/g, '\'\'')
|
||||
.replace(new RegExp(rexstr(NOT_ALLOWED_CHAR), compat_mode ? 'g' : 'gu'), '<27>');
|
||||
key = '\'' + key + '\'';
|
||||
}
|
||||
|
||||
// Value processing
|
||||
if (val === (val.match(ƔAML_SIMPLE_VALUE) || [])[0]) /* do nothing */;
|
||||
else if (val === (val.match(ANY_QUOTE_CHAR) || [])[0]) val = '"' + val + '"';
|
||||
else {
|
||||
key = key
|
||||
.replace(/'/g, '\'\'')
|
||||
.replace(new RegExp(rexstr(NOT_ALLOWED_CHAR), compat_mode ? 'g' : 'gu'), '<27>');
|
||||
key = '\'' + key + '\'';
|
||||
}
|
||||
|
||||
frontmatter += key + ': ' + val + '\n';
|
||||
}
|
||||
frontmatter += '...\n';
|
||||
}
|
||||
}
|
||||
return frontmatter + note;
|
||||
}
|
Binary file not shown.
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 45 KiB |
|
@ -105,12 +105,13 @@ export function fetchAccountFail(id, error) {
|
|||
};
|
||||
};
|
||||
|
||||
export function followAccount(id) {
|
||||
export function followAccount(id, reblogs = true) {
|
||||
return (dispatch, getState) => {
|
||||
const alreadyFollowing = getState().getIn(['relationships', id, 'following']);
|
||||
dispatch(followAccountRequest(id));
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/follow`).then(response => {
|
||||
dispatch(followAccountSuccess(response.data));
|
||||
api(getState).post(`/api/v1/accounts/${id}/follow`, { reblogs }).then(response => {
|
||||
dispatch(followAccountSuccess(response.data, alreadyFollowing));
|
||||
}).catch(error => {
|
||||
dispatch(followAccountFail(error));
|
||||
});
|
||||
|
@ -136,10 +137,11 @@ export function followAccountRequest(id) {
|
|||
};
|
||||
};
|
||||
|
||||
export function followAccountSuccess(relationship) {
|
||||
export function followAccountSuccess(relationship, alreadyFollowing) {
|
||||
return {
|
||||
type: ACCOUNT_FOLLOW_SUCCESS,
|
||||
relationship,
|
||||
alreadyFollowing,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
refreshHomeTimeline,
|
||||
refreshCommunityTimeline,
|
||||
refreshPublicTimeline,
|
||||
refreshDirectTimeline,
|
||||
} from './timelines';
|
||||
|
||||
export const COMPOSE_CHANGE = 'COMPOSE_CHANGE';
|
||||
|
@ -31,6 +32,7 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT';
|
|||
export const COMPOSE_MOUNT = 'COMPOSE_MOUNT';
|
||||
export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
|
||||
|
||||
export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE';
|
||||
export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
|
||||
export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE';
|
||||
export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
|
||||
|
@ -44,6 +46,8 @@ export const COMPOSE_UPLOAD_CHANGE_REQUEST = 'COMPOSE_UPLOAD_UPDATE_REQUEST'
|
|||
export const COMPOSE_UPLOAD_CHANGE_SUCCESS = 'COMPOSE_UPLOAD_UPDATE_SUCCESS';
|
||||
export const COMPOSE_UPLOAD_CHANGE_FAIL = 'COMPOSE_UPLOAD_UPDATE_FAIL';
|
||||
|
||||
export const COMPOSE_DOODLE_SET = 'COMPOSE_DOODLE_SET';
|
||||
|
||||
export function changeCompose(text) {
|
||||
return {
|
||||
type: COMPOSE_CHANGE,
|
||||
|
@ -91,14 +95,16 @@ export function mentionCompose(account, router) {
|
|||
|
||||
export function submitCompose() {
|
||||
return function (dispatch, getState) {
|
||||
const status = getState().getIn(['compose', 'text'], '');
|
||||
let status = getState().getIn(['compose', 'text'], '');
|
||||
|
||||
if (!status || !status.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(submitComposeRequest());
|
||||
|
||||
if (getState().getIn(['compose', 'advanced_options', 'do_not_federate'])) {
|
||||
status = status + ' 👁️';
|
||||
}
|
||||
api(getState).post('/api/v1/statuses', {
|
||||
status,
|
||||
in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
|
||||
|
@ -128,6 +134,8 @@ export function submitCompose() {
|
|||
if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
|
||||
insertOrRefresh('community', refreshCommunityTimeline);
|
||||
insertOrRefresh('public', refreshPublicTimeline);
|
||||
} else if (response.data.visibility === 'direct') {
|
||||
insertOrRefresh('direct', refreshDirectTimeline);
|
||||
}
|
||||
}).catch(function (error) {
|
||||
dispatch(submitComposeFail(error));
|
||||
|
@ -155,6 +163,13 @@ export function submitComposeFail(error) {
|
|||
};
|
||||
};
|
||||
|
||||
export function doodleSet(options) {
|
||||
return {
|
||||
type: COMPOSE_DOODLE_SET,
|
||||
options: options,
|
||||
};
|
||||
};
|
||||
|
||||
export function uploadCompose(files) {
|
||||
return function (dispatch, getState) {
|
||||
if (getState().getIn(['compose', 'media_attachments']).size > 3) {
|
||||
|
@ -334,6 +349,13 @@ export function unmountCompose() {
|
|||
};
|
||||
};
|
||||
|
||||
export function toggleComposeAdvancedOption(option) {
|
||||
return {
|
||||
type: COMPOSE_ADVANCED_OPTIONS_CHANGE,
|
||||
option: option,
|
||||
};
|
||||
}
|
||||
|
||||
export function changeComposeSensitivity() {
|
||||
return {
|
||||
type: COMPOSE_SENSITIVITY_CHANGE,
|
||||
|
|
|
@ -6,6 +6,17 @@ import { defineMessages } from 'react-intl';
|
|||
|
||||
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
|
||||
|
||||
// tracking the notif cleaning request
|
||||
export const NOTIFICATIONS_DELETE_MARKED_REQUEST = 'NOTIFICATIONS_DELETE_MARKED_REQUEST';
|
||||
export const NOTIFICATIONS_DELETE_MARKED_SUCCESS = 'NOTIFICATIONS_DELETE_MARKED_SUCCESS';
|
||||
export const NOTIFICATIONS_DELETE_MARKED_FAIL = 'NOTIFICATIONS_DELETE_MARKED_FAIL';
|
||||
export const NOTIFICATIONS_MARK_ALL_FOR_DELETE = 'NOTIFICATIONS_MARK_ALL_FOR_DELETE';
|
||||
export const NOTIFICATIONS_ENTER_CLEARING_MODE = 'NOTIFICATIONS_ENTER_CLEARING_MODE'; // arg: yes
|
||||
// Unmark notifications (when the cleaning mode is left)
|
||||
export const NOTIFICATIONS_UNMARK_ALL_FOR_DELETE = 'NOTIFICATIONS_UNMARK_ALL_FOR_DELETE';
|
||||
// Mark one for delete
|
||||
export const NOTIFICATION_MARK_FOR_DELETE = 'NOTIFICATION_MARK_FOR_DELETE';
|
||||
|
||||
export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
|
||||
export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
|
||||
export const NOTIFICATIONS_REFRESH_FAIL = 'NOTIFICATIONS_REFRESH_FAIL';
|
||||
|
@ -188,3 +199,67 @@ export function scrollTopNotifications(top) {
|
|||
top,
|
||||
};
|
||||
};
|
||||
|
||||
export function deleteMarkedNotifications() {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(deleteMarkedNotificationsRequest());
|
||||
|
||||
let ids = [];
|
||||
getState().getIn(['notifications', 'items']).forEach((n) => {
|
||||
if (n.get('markedForDelete')) {
|
||||
ids.push(n.get('id'));
|
||||
}
|
||||
});
|
||||
|
||||
if (ids.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
api(getState).delete(`/api/v1/notifications/destroy_multiple?ids[]=${ids.join('&ids[]=')}`).then(() => {
|
||||
dispatch(deleteMarkedNotificationsSuccess());
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
dispatch(deleteMarkedNotificationsFail(error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function enterNotificationClearingMode(yes) {
|
||||
return {
|
||||
type: NOTIFICATIONS_ENTER_CLEARING_MODE,
|
||||
yes: yes,
|
||||
};
|
||||
};
|
||||
|
||||
export function markAllNotifications(yes) {
|
||||
return {
|
||||
type: NOTIFICATIONS_MARK_ALL_FOR_DELETE,
|
||||
yes: yes, // true, false or null. null = invert
|
||||
};
|
||||
};
|
||||
|
||||
export function deleteMarkedNotificationsRequest() {
|
||||
return {
|
||||
type: NOTIFICATIONS_DELETE_MARKED_REQUEST,
|
||||
};
|
||||
};
|
||||
|
||||
export function deleteMarkedNotificationsFail() {
|
||||
return {
|
||||
type: NOTIFICATIONS_DELETE_MARKED_FAIL,
|
||||
};
|
||||
};
|
||||
|
||||
export function markNotificationForDelete(id, yes) {
|
||||
return {
|
||||
type: NOTIFICATION_MARK_FOR_DELETE,
|
||||
id: id,
|
||||
yes: yes,
|
||||
};
|
||||
};
|
||||
|
||||
export function deleteMarkedNotificationsSuccess() {
|
||||
return {
|
||||
type: NOTIFICATIONS_DELETE_MARKED_SUCCESS,
|
||||
};
|
||||
};
|
||||
|
|
|
@ -51,3 +51,4 @@ export const connectCommunityStream = () => connectTimelineStream('community', '
|
|||
export const connectMediaStream = () => connectTimelineStream('community', 'public:local');
|
||||
export const connectPublicStream = () => connectTimelineStream('public', 'public');
|
||||
export const connectHashtagStream = (tag) => connectTimelineStream(`hashtag:${tag}`, `hashtag&tag=${tag}`);
|
||||
export const connectDirectStream = () => connectTimelineStream('direct', 'direct');
|
||||
|
|
|
@ -115,6 +115,7 @@ export function refreshTimeline(timelineId, path, params = {}) {
|
|||
export const refreshHomeTimeline = () => refreshTimeline('home', '/api/v1/timelines/home');
|
||||
export const refreshPublicTimeline = () => refreshTimeline('public', '/api/v1/timelines/public');
|
||||
export const refreshCommunityTimeline = () => refreshTimeline('community', '/api/v1/timelines/public', { local: true });
|
||||
export const refreshDirectTimeline = () => refreshTimeline('direct', '/api/v1/timelines/direct');
|
||||
export const refreshAccountTimeline = accountId => refreshTimeline(`account:${accountId}`, `/api/v1/accounts/${accountId}/statuses`);
|
||||
export const refreshAccountMediaTimeline = accountId => refreshTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { only_media: true });
|
||||
export const refreshHashtagTimeline = hashtag => refreshTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`);
|
||||
|
@ -155,6 +156,7 @@ export function expandTimeline(timelineId, path, params = {}) {
|
|||
export const expandHomeTimeline = () => expandTimeline('home', '/api/v1/timelines/home');
|
||||
export const expandPublicTimeline = () => expandTimeline('public', '/api/v1/timelines/public');
|
||||
export const expandCommunityTimeline = () => expandTimeline('community', '/api/v1/timelines/public', { local: true });
|
||||
export const expandDirectTimeline = () => expandTimeline('direct', '/api/v1/timelines/direct');
|
||||
export const expandAccountTimeline = accountId => expandTimeline(`account:${accountId}`, `/api/v1/accounts/${accountId}/statuses`);
|
||||
export const expandAccountMediaTimeline = accountId => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { only_media: true });
|
||||
export const expandHashtagTimeline = hashtag => expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`);
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
|
||||
<div
|
||||
className="account__avatar"
|
||||
data-avatar-of="@alice"
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
style={
|
||||
|
@ -19,6 +20,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
|
|||
exports[`<Avatar /> Still renders a still avatar 1`] = `
|
||||
<div
|
||||
className="account__avatar"
|
||||
data-avatar-of="@alice"
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
style={
|
||||
|
|
|
@ -6,6 +6,7 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
|
|||
>
|
||||
<div
|
||||
className="account__avatar-overlay-base"
|
||||
data-avatar-of="@alice"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "url(/static/alice.jpg)",
|
||||
|
@ -14,6 +15,7 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
|
|||
/>
|
||||
<div
|
||||
className="account__avatar-overlay-overlay"
|
||||
data-avatar-of="@eve@blackhat.lair"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "url(/static/eve.jpg)",
|
||||
|
|
|
@ -112,3 +112,19 @@ exports[`<Button /> renders the props.text instead of children 1`] = `
|
|||
foo
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`<Button /> renders title if props.title is given 1`] = `
|
||||
<button
|
||||
className="button"
|
||||
disabled={undefined}
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"height": "36px",
|
||||
"lineHeight": "36px",
|
||||
"padding": "0 16px",
|
||||
}
|
||||
}
|
||||
title="foo"
|
||||
/>
|
||||
`;
|
||||
|
|
|
@ -72,4 +72,11 @@ describe('<Button />', () => {
|
|||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders title if props.title is given', () => {
|
||||
const component = renderer.create(<Button title='foo' />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -15,8 +15,8 @@ const messages = defineMessages({
|
|||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
|
||||
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
|
||||
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
|
||||
mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
|
||||
unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
|
||||
mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'You are not currently muting notifications from @{name}. Click to mute notifications' },
|
||||
unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'You are currently muting notifications from @{name}. Click to unmute notifications' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
|
@ -93,7 +93,7 @@ export default class Account extends ImmutablePureComponent {
|
|||
</div>
|
||||
);
|
||||
} else {
|
||||
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
|
||||
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following ? true : false} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -11,8 +11,8 @@ import classNames from 'classnames';
|
|||
const textAtCursorMatchesToken = (str, caretPosition) => {
|
||||
let word;
|
||||
|
||||
let left = str.slice(0, caretPosition).search(/\S+$/);
|
||||
let right = str.slice(caretPosition).search(/\s/);
|
||||
let left = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
|
||||
let right = str.slice(caretPosition).search(/[\s\u200B]/);
|
||||
|
||||
if (right < 0) {
|
||||
word = str.slice(left);
|
||||
|
|
|
@ -64,6 +64,7 @@ export default class Avatar extends React.PureComponent {
|
|||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
style={style}
|
||||
data-avatar-of={`@${account.get('acct')}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -21,8 +21,8 @@ export default class AvatarOverlay extends React.PureComponent {
|
|||
|
||||
return (
|
||||
<div className='account__avatar-overlay'>
|
||||
<div className='account__avatar-overlay-base' style={baseStyle} />
|
||||
<div className='account__avatar-overlay-overlay' style={overlayStyle} />
|
||||
<div className='account__avatar-overlay-base' style={baseStyle} data-avatar-of={`@${account.get('acct')}`} />
|
||||
<div className='account__avatar-overlay-overlay' style={overlayStyle} data-avatar-of={`@${friend.get('acct')}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@ export default class Button extends React.PureComponent {
|
|||
className: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
children: PropTypes.node,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -35,26 +36,26 @@ export default class Button extends React.PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const style = {
|
||||
padding: `0 ${this.props.size / 2.25}px`,
|
||||
height: `${this.props.size}px`,
|
||||
lineHeight: `${this.props.size}px`,
|
||||
...this.props.style,
|
||||
let attrs = {
|
||||
className: classNames('button', this.props.className, {
|
||||
'button-secondary': this.props.secondary,
|
||||
'button--block': this.props.block,
|
||||
}),
|
||||
disabled: this.props.disabled,
|
||||
onClick: this.handleClick,
|
||||
ref: this.setRef,
|
||||
style: {
|
||||
padding: `0 ${this.props.size / 2.25}px`,
|
||||
height: `${this.props.size}px`,
|
||||
lineHeight: `${this.props.size}px`,
|
||||
...this.props.style,
|
||||
},
|
||||
};
|
||||
|
||||
const className = classNames('button', this.props.className, {
|
||||
'button-secondary': this.props.secondary,
|
||||
'button--block': this.props.block,
|
||||
});
|
||||
if (this.props.title) attrs.title = this.props.title;
|
||||
|
||||
return (
|
||||
<button
|
||||
className={className}
|
||||
disabled={this.props.disabled}
|
||||
onClick={this.handleClick}
|
||||
ref={this.setRef}
|
||||
style={style}
|
||||
>
|
||||
<button {...attrs}>
|
||||
{this.props.text || this.props.children}
|
||||
</button>
|
||||
);
|
||||
|
|
|
@ -7,6 +7,8 @@ export default class Column extends React.PureComponent {
|
|||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
extraClasses: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
};
|
||||
|
||||
scrollTop () {
|
||||
|
@ -40,10 +42,10 @@ export default class Column extends React.PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
const { children, extraClasses, name } = this.props;
|
||||
|
||||
return (
|
||||
<div role='region' className='column' ref={this.setRef}>
|
||||
<div role='region' data-column={name} className={`column ${extraClasses || ''}`} ref={this.setRef}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -9,7 +9,8 @@ export default class ColumnBackButton extends React.PureComponent {
|
|||
};
|
||||
|
||||
handleClick = () => {
|
||||
if (window.history && window.history.length === 1) {
|
||||
// if history is exhausted, or we would leave mastodon, just go to root.
|
||||
if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
|
||||
this.context.router.history.push('/');
|
||||
} else {
|
||||
this.context.router.history.goBack();
|
||||
|
|
|
@ -9,8 +9,12 @@ export default class ColumnBackButtonSlim extends React.PureComponent {
|
|||
};
|
||||
|
||||
handleClick = () => {
|
||||
if (window.history && window.history.length === 1) this.context.router.history.push('/');
|
||||
else this.context.router.history.goBack();
|
||||
// if history is exhausted, or we would leave mastodon, just go to root.
|
||||
if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
|
||||
this.context.router.history.push('/');
|
||||
} else {
|
||||
this.context.router.history.goBack();
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
|
||||
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
|
||||
// Glitch imports
|
||||
import NotificationPurgeButtonsContainer from '../../glitch/components/column/notif_cleaning_widget/container';
|
||||
|
||||
const messages = defineMessages({
|
||||
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
||||
hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
|
||||
moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
|
||||
moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
|
||||
enterNotifCleaning : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
|
@ -22,14 +27,19 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
title: PropTypes.node.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
active: PropTypes.bool,
|
||||
localSettings : ImmutablePropTypes.map,
|
||||
multiColumn: PropTypes.bool,
|
||||
focusable: PropTypes.bool,
|
||||
showBackButton: PropTypes.bool,
|
||||
notifCleaning: PropTypes.bool, // true only for the notification column
|
||||
notifCleaningActive: PropTypes.bool,
|
||||
onEnterCleaningMode: PropTypes.func,
|
||||
children: PropTypes.node,
|
||||
pinned: PropTypes.bool,
|
||||
onPin: PropTypes.func,
|
||||
onMove: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -39,6 +49,7 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
state = {
|
||||
collapsed: true,
|
||||
animating: false,
|
||||
animatingNCD: false,
|
||||
};
|
||||
|
||||
handleToggleClick = (e) => {
|
||||
|
@ -59,17 +70,32 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
}
|
||||
|
||||
handleBackClick = () => {
|
||||
if (window.history && window.history.length === 1) this.context.router.history.push('/');
|
||||
else this.context.router.history.goBack();
|
||||
// if history is exhausted, or we would leave mastodon, just go to root.
|
||||
if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
|
||||
this.context.router.history.push('/');
|
||||
} else {
|
||||
this.context.router.history.goBack();
|
||||
}
|
||||
}
|
||||
|
||||
handleTransitionEnd = () => {
|
||||
this.setState({ animating: false });
|
||||
}
|
||||
|
||||
handleTransitionEndNCD = () => {
|
||||
this.setState({ animatingNCD: false });
|
||||
}
|
||||
|
||||
onEnterCleaningMode = () => {
|
||||
this.setState({ animatingNCD: true });
|
||||
this.props.onEnterCleaningMode(!this.props.notifCleaningActive);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props;
|
||||
const { collapsed, animating } = this.state;
|
||||
const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props;
|
||||
const { collapsed, animating, animatingNCD } = this.state;
|
||||
|
||||
let title = this.props.title;
|
||||
|
||||
const wrapperClassName = classNames('column-header__wrapper', {
|
||||
'active': active,
|
||||
|
@ -88,8 +114,20 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
'active': !collapsed,
|
||||
});
|
||||
|
||||
const notifCleaningButtonClassName = classNames('column-header__button', {
|
||||
'active': notifCleaningActive,
|
||||
});
|
||||
|
||||
const notifCleaningDrawerClassName = classNames('ncd column-header__collapsible', {
|
||||
'collapsed': !notifCleaningActive,
|
||||
'animating': animatingNCD,
|
||||
});
|
||||
|
||||
let extraContent, pinButton, moveButtons, backButton, collapseButton;
|
||||
|
||||
//*glitch
|
||||
const msgEnterNotifCleaning = intl.formatMessage(messages.enterNotifCleaning);
|
||||
|
||||
if (children) {
|
||||
extraContent = (
|
||||
<div key='extra-content' className='column-header__collapsible__extra'>
|
||||
|
@ -140,13 +178,30 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
<span className='column-header__title'>
|
||||
{title}
|
||||
</span>
|
||||
|
||||
<div className='column-header__buttons'>
|
||||
{backButton}
|
||||
{ notifCleaning ? (
|
||||
<button
|
||||
aria-label={msgEnterNotifCleaning}
|
||||
title={msgEnterNotifCleaning}
|
||||
onClick={this.onEnterCleaningMode}
|
||||
className={notifCleaningButtonClassName}
|
||||
>
|
||||
<i className='fa fa-eraser' />
|
||||
</button>
|
||||
) : null}
|
||||
{collapseButton}
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
{ notifCleaning ? (
|
||||
<div className={notifCleaningDrawerClassName} onTransitionEnd={this.handleTransitionEndNCD}>
|
||||
<div className='column-header__collapsible-inner nopad-drawer'>
|
||||
{(notifCleaningActive || animatingNCD) ? (<NotificationPurgeButtonsContainer />) : null }
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
|
||||
<div className='column-header__collapsible-inner'>
|
||||
{(!collapsed || animating) && collapsedContent}
|
||||
|
|
|
@ -20,8 +20,10 @@ export default class IconButton extends React.PureComponent {
|
|||
disabled: PropTypes.bool,
|
||||
inverted: PropTypes.bool,
|
||||
animate: PropTypes.bool,
|
||||
flip: PropTypes.bool,
|
||||
overlay: PropTypes.bool,
|
||||
tabIndex: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -42,14 +44,18 @@ export default class IconButton extends React.PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const style = {
|
||||
let style = {
|
||||
fontSize: `${this.props.size}px`,
|
||||
width: `${this.props.size * 1.28571429}px`,
|
||||
height: `${this.props.size * 1.28571429}px`,
|
||||
lineHeight: `${this.props.size}px`,
|
||||
...this.props.style,
|
||||
...(this.props.active ? this.props.activeStyle : {}),
|
||||
};
|
||||
if (!this.props.label) {
|
||||
style.width = `${this.props.size * 1.28571429}px`;
|
||||
} else {
|
||||
style.textAlign = 'left';
|
||||
}
|
||||
|
||||
const {
|
||||
active,
|
||||
|
@ -59,6 +65,7 @@ export default class IconButton extends React.PureComponent {
|
|||
expanded,
|
||||
icon,
|
||||
inverted,
|
||||
flip,
|
||||
overlay,
|
||||
pressed,
|
||||
tabIndex,
|
||||
|
@ -72,6 +79,21 @@ export default class IconButton extends React.PureComponent {
|
|||
overlayed: overlay,
|
||||
});
|
||||
|
||||
const flipDeg = flip ? -180 : -360;
|
||||
const rotateDeg = active ? flipDeg : 0;
|
||||
|
||||
const motionDefaultStyle = {
|
||||
rotate: rotateDeg,
|
||||
};
|
||||
|
||||
const springOpts = {
|
||||
stiffness: this.props.flip ? 60 : 120,
|
||||
damping: 7,
|
||||
};
|
||||
const motionStyle = {
|
||||
rotate: animate ? spring(rotateDeg, springOpts) : 0,
|
||||
};
|
||||
|
||||
if (!animate) {
|
||||
// Perf optimization: avoid unnecessary <Motion> components unless
|
||||
// we actually need to animate.
|
||||
|
@ -92,7 +114,7 @@ export default class IconButton extends React.PureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Motion defaultStyle={{ rotate: active ? -360 : 0 }} style={{ rotate: animate ? spring(active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
|
||||
<Motion defaultStyle={motionDefaultStyle} style={motionStyle}>
|
||||
{({ rotate }) =>
|
||||
<button
|
||||
aria-label={title}
|
||||
|
@ -105,6 +127,7 @@ export default class IconButton extends React.PureComponent {
|
|||
tabIndex={tabIndex}
|
||||
>
|
||||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
|
||||
{this.props.label}
|
||||
</button>
|
||||
}
|
||||
</Motion>
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/status/gallery
|
||||
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/status
|
||||
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/status/action_bar
|
||||
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/status/content
|
||||
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import StatusContainer from '../containers/status_container';
|
||||
import StatusContainer from '../../glitch/components/status/container';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ScrollableList from './scrollable_list';
|
||||
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/status/container
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Status from '../components/status';
|
||||
|
|
|
@ -20,6 +20,8 @@ const messages = defineMessages({
|
|||
media: { id: 'account.media', defaultMessage: 'Media' },
|
||||
blockDomain: { id: 'account.block_domain', defaultMessage: 'Hide everything from {domain}' },
|
||||
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
|
||||
hideReblogs: { id: 'account.hide_reblogs', defaultMessage: 'Hide boosts from @{name}' },
|
||||
showReblogs: { id: 'account.show_reblogs', defaultMessage: 'Show boosts from @{name}' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
|
@ -30,6 +32,7 @@ export default class ActionBar extends React.PureComponent {
|
|||
onFollow: PropTypes.func,
|
||||
onBlock: PropTypes.func.isRequired,
|
||||
onMention: PropTypes.func.isRequired,
|
||||
onReblogToggle: PropTypes.func.isRequired,
|
||||
onReport: PropTypes.func.isRequired,
|
||||
onMute: PropTypes.func.isRequired,
|
||||
onBlockDomain: PropTypes.func.isRequired,
|
||||
|
@ -60,6 +63,15 @@ export default class ActionBar extends React.PureComponent {
|
|||
if (account.get('id') === me) {
|
||||
menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
|
||||
} else {
|
||||
const following = account.getIn(['relationship', 'following']);
|
||||
if (following) {
|
||||
if (following.get('reblogs')) {
|
||||
menu.push({ text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
|
||||
}
|
||||
}
|
||||
|
||||
if (account.getIn(['relationship', 'muting'])) {
|
||||
menu.push({ text: intl.formatMessage(messages.unmute, { name: account.get('username') }), action: this.props.onMute });
|
||||
} else {
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/account/header
|
||||
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import InnerHeader from '../../account/components/header';
|
||||
import InnerHeader from '../../../../glitch/components/account/header';
|
||||
import ActionBar from '../../account/components/action_bar';
|
||||
import MissingIndicator from '../../../components/missing_indicator';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
@ -13,6 +13,7 @@ export default class Header extends ImmutablePureComponent {
|
|||
onFollow: PropTypes.func.isRequired,
|
||||
onBlock: PropTypes.func.isRequired,
|
||||
onMention: PropTypes.func.isRequired,
|
||||
onReblogToggle: PropTypes.func.isRequired,
|
||||
onReport: PropTypes.func.isRequired,
|
||||
onMute: PropTypes.func.isRequired,
|
||||
onBlockDomain: PropTypes.func.isRequired,
|
||||
|
@ -39,6 +40,10 @@ export default class Header extends ImmutablePureComponent {
|
|||
this.props.onReport(this.props.account);
|
||||
}
|
||||
|
||||
handleReblogToggle = () => {
|
||||
this.props.onReblogToggle(this.props.account);
|
||||
}
|
||||
|
||||
handleMute = () => {
|
||||
this.props.onMute(this.props.account);
|
||||
}
|
||||
|
@ -77,6 +82,7 @@ export default class Header extends ImmutablePureComponent {
|
|||
account={account}
|
||||
onBlock={this.handleBlock}
|
||||
onMention={this.handleMention}
|
||||
onReblogToggle={this.handleReblogToggle}
|
||||
onReport={this.handleReport}
|
||||
onMute={this.handleMute}
|
||||
onBlockDomain={this.handleBlockDomain}
|
||||
|
|
|
@ -67,6 +67,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
dispatch(mentionCompose(account, router));
|
||||
},
|
||||
|
||||
onReblogToggle (account) {
|
||||
if (account.getIn(['relationship', 'following', 'reblogs'])) {
|
||||
dispatch(followAccount(account.get('id'), false));
|
||||
} else {
|
||||
dispatch(followAccount(account.get('id'), true));
|
||||
}
|
||||
},
|
||||
|
||||
onReport (account) {
|
||||
dispatch(initReport(account));
|
||||
},
|
||||
|
|
|
@ -59,7 +59,7 @@ export default class AccountTimeline extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<Column name='account'>
|
||||
<ColumnBackButton />
|
||||
|
||||
<StatusList
|
||||
|
|
|
@ -54,7 +54,7 @@ export default class Blocks extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Column icon='ban' heading={intl.formatMessage(messages.heading)}>
|
||||
<Column name='blocks' icon='ban' heading={intl.formatMessage(messages.heading)}>
|
||||
<ColumnBackButtonSlim />
|
||||
<ScrollContainer scrollKey='blocks'>
|
||||
<div className='scrollable' onScroll={this.handleScroll}>
|
||||
|
|
|
@ -79,7 +79,7 @@ export default class CommunityTimeline extends React.PureComponent {
|
|||
const pinned = !!columnId;
|
||||
|
||||
return (
|
||||
<Column ref={this.setRef}>
|
||||
<Column ref={this.setRef} name='local'>
|
||||
<ColumnHeader
|
||||
icon='users'
|
||||
active={hasUnread}
|
||||
|
|
|
@ -5,11 +5,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
import PropTypes from 'prop-types';
|
||||
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
|
||||
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
|
||||
import UploadButtonContainer from '../containers/upload_button_container';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import Collapsable from '../../../components/collapsable';
|
||||
import SpoilerButtonContainer from '../containers/spoiler_button_container';
|
||||
import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
|
||||
import ComposeAdvancedOptionsContainer from '../../../../glitch/components/compose/advanced_options/container';
|
||||
import SensitiveButtonContainer from '../containers/sensitive_button_container';
|
||||
import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
|
||||
import UploadFormContainer from '../containers/upload_form_container';
|
||||
|
@ -18,6 +18,7 @@ import { isMobile } from '../../../is_mobile';
|
|||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { length } from 'stringz';
|
||||
import { countableText } from '../util/counter';
|
||||
import ComposeAttachOptions from '../../../../glitch/components/compose/attach_options/index';
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
|
||||
|
@ -36,6 +37,9 @@ export default class ComposeForm extends ImmutablePureComponent {
|
|||
suggestions: ImmutablePropTypes.list,
|
||||
spoiler: PropTypes.bool,
|
||||
privacy: PropTypes.string,
|
||||
advanced_options: ImmutablePropTypes.contains({
|
||||
do_not_federate: PropTypes.bool,
|
||||
}),
|
||||
spoiler_text: PropTypes.string,
|
||||
focusDate: PropTypes.instanceOf(Date),
|
||||
preselectDate: PropTypes.instanceOf(Date),
|
||||
|
@ -45,11 +49,13 @@ export default class ComposeForm extends ImmutablePureComponent {
|
|||
onSubmit: PropTypes.func.isRequired,
|
||||
onClearSuggestions: PropTypes.func.isRequired,
|
||||
onFetchSuggestions: PropTypes.func.isRequired,
|
||||
onPrivacyChange: PropTypes.func.isRequired,
|
||||
onSuggestionSelected: PropTypes.func.isRequired,
|
||||
onChangeSpoilerText: PropTypes.func.isRequired,
|
||||
onPaste: PropTypes.func.isRequired,
|
||||
onPickEmoji: PropTypes.func.isRequired,
|
||||
showSearch: PropTypes.bool,
|
||||
settings : ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -66,6 +72,11 @@ export default class ComposeForm extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleSubmit2 = () => {
|
||||
this.props.onPrivacyChange(this.props.settings.get('side_arm'));
|
||||
this.handleSubmit();
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
if (this.props.text !== this.autosuggestTextarea.textarea.value) {
|
||||
// Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
|
||||
|
@ -144,16 +155,58 @@ export default class ComposeForm extends ImmutablePureComponent {
|
|||
render () {
|
||||
const { intl, onPaste, showSearch } = this.props;
|
||||
const disabled = this.props.is_submitting;
|
||||
const text = [this.props.spoiler_text, countableText(this.props.text)].join('');
|
||||
const maybeEye = (this.props.advanced_options && this.props.advanced_options.do_not_federate) ? ' 👁️' : '';
|
||||
const text = [this.props.spoiler_text, countableText(this.props.text), maybeEye].join('');
|
||||
|
||||
const secondaryVisibility = this.props.settings.get('side_arm');
|
||||
let showSideArm = secondaryVisibility !== 'none';
|
||||
|
||||
let publishText = '';
|
||||
let publishText2 = '';
|
||||
let title = '';
|
||||
let title2 = '';
|
||||
|
||||
if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
|
||||
publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
|
||||
const privacyIcons = {
|
||||
none: '',
|
||||
public: 'globe',
|
||||
unlisted: 'unlock-alt',
|
||||
private: 'lock',
|
||||
direct: 'envelope',
|
||||
};
|
||||
|
||||
title = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${this.props.privacy}.short` })}`;
|
||||
|
||||
if (showSideArm) {
|
||||
// Enhanced behavior with dual toot buttons
|
||||
publishText = (
|
||||
<span>
|
||||
{
|
||||
<i
|
||||
className={`fa fa-${privacyIcons[this.props.privacy]}`}
|
||||
style={{ paddingRight: '5px' }}
|
||||
/>
|
||||
}{intl.formatMessage(messages.publish)}
|
||||
</span>
|
||||
);
|
||||
|
||||
title2 = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${secondaryVisibility}.short` })}`;
|
||||
publishText2 = (
|
||||
<i
|
||||
className={`fa fa-${privacyIcons[secondaryVisibility]}`}
|
||||
aria-label={title2}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
|
||||
// Original vanilla behavior - no icon if public or unlisted
|
||||
if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
|
||||
publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
|
||||
} else {
|
||||
publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
|
||||
}
|
||||
}
|
||||
|
||||
const submitDisabled = disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0);
|
||||
|
||||
return (
|
||||
<div className='compose-form'>
|
||||
<Collapsable isVisible={this.props.spoiler} fullHeight={50}>
|
||||
|
@ -192,17 +245,35 @@ export default class ComposeForm extends ImmutablePureComponent {
|
|||
<UploadFormContainer />
|
||||
</div>
|
||||
|
||||
<div className='compose-form__buttons-wrapper'>
|
||||
<div className='compose-form__buttons'>
|
||||
<UploadButtonContainer />
|
||||
<PrivacyDropdownContainer />
|
||||
<SensitiveButtonContainer />
|
||||
<SpoilerButtonContainer />
|
||||
</div>
|
||||
<div className='compose-form__buttons'>
|
||||
<ComposeAttachOptions />
|
||||
<SensitiveButtonContainer />
|
||||
<div className='compose-form__buttons-separator' />
|
||||
<PrivacyDropdownContainer />
|
||||
<SpoilerButtonContainer />
|
||||
<ComposeAdvancedOptionsContainer />
|
||||
</div>
|
||||
|
||||
<div className='compose-form__publish'>
|
||||
<div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
|
||||
<div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0)} block /></div>
|
||||
<div className='compose-form__publish'>
|
||||
<div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
|
||||
<div className='compose-form__publish-button-wrapper'>
|
||||
{
|
||||
showSideArm ?
|
||||
<Button
|
||||
className='compose-form__publish__side-arm'
|
||||
text={publishText2}
|
||||
title={title2}
|
||||
onClick={this.handleSubmit2}
|
||||
disabled={submitDisabled}
|
||||
/> : ''
|
||||
}
|
||||
<Button
|
||||
className='compose-form__publish__primary'
|
||||
text={publishText}
|
||||
title={title}
|
||||
onClick={this.handleSubmit}
|
||||
disabled={submitDisabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import AccountContainer from '../../../containers/account_container';
|
||||
import StatusContainer from '../../../containers/status_container';
|
||||
import StatusContainer from '../../../../glitch/components/status/container';
|
||||
import { Link } from 'react-router-dom';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { connect } from 'react-redux';
|
||||
import ComposeForm from '../components/compose_form';
|
||||
import { uploadCompose } from '../../../actions/compose';
|
||||
import { changeComposeVisibility, uploadCompose } from '../../../actions/compose';
|
||||
import {
|
||||
changeCompose,
|
||||
submitCompose,
|
||||
|
@ -15,6 +15,7 @@ const mapStateToProps = state => ({
|
|||
text: state.getIn(['compose', 'text']),
|
||||
suggestion_token: state.getIn(['compose', 'suggestion_token']),
|
||||
suggestions: state.getIn(['compose', 'suggestions']),
|
||||
advanced_options: state.getIn(['compose', 'advanced_options']),
|
||||
spoiler: state.getIn(['compose', 'spoiler']),
|
||||
spoiler_text: state.getIn(['compose', 'spoiler_text']),
|
||||
privacy: state.getIn(['compose', 'privacy']),
|
||||
|
@ -23,6 +24,8 @@ const mapStateToProps = state => ({
|
|||
is_submitting: state.getIn(['compose', 'is_submitting']),
|
||||
is_uploading: state.getIn(['compose', 'is_uploading']),
|
||||
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
|
||||
settings: state.get('local_settings'),
|
||||
filesAttached: state.getIn(['compose', 'media_attachments']).size > 0,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
|
@ -31,6 +34,10 @@ const mapDispatchToProps = (dispatch) => ({
|
|||
dispatch(changeCompose(text));
|
||||
},
|
||||
|
||||
onPrivacyChange (value) {
|
||||
dispatch(changeComposeVisibility(value));
|
||||
},
|
||||
|
||||
onSubmit () {
|
||||
dispatch(submitCompose());
|
||||
},
|
||||
|
|
|
@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { connect } from 'react-redux';
|
||||
import { mountCompose, unmountCompose } from '../../actions/compose';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import { changeLocalSetting } from '../../../glitch/actions/local_settings';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import SearchContainer from './containers/search_container';
|
||||
|
@ -19,7 +21,7 @@ const messages = defineMessages({
|
|||
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
|
||||
public: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
|
||||
community: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
|
||||
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
|
||||
});
|
||||
|
||||
|
@ -48,6 +50,16 @@ export default class Compose extends React.PureComponent {
|
|||
this.props.dispatch(unmountCompose());
|
||||
}
|
||||
|
||||
onLayoutClick = (e) => {
|
||||
const layout = e.currentTarget.getAttribute('data-mastodon-layout');
|
||||
this.props.dispatch(changeLocalSetting(['layout'], layout));
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
openSettings = () => {
|
||||
this.props.dispatch(openModal('SETTINGS', {}));
|
||||
}
|
||||
|
||||
onFocus = () => {
|
||||
this.props.dispatch(changeComposing(true));
|
||||
}
|
||||
|
@ -78,12 +90,14 @@ export default class Compose extends React.PureComponent {
|
|||
{!columns.some(column => column.get('id') === 'PUBLIC') && (
|
||||
<Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><i role='img' className='fa fa-fw fa-globe' /></Link>
|
||||
)}
|
||||
<a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i role='img' className='fa fa-fw fa-cog' /></a>
|
||||
<a onClick={this.openSettings} role='button' tabIndex='0' className='drawer__tab' title={intl.formatMessage(messages.settings)} aria-label={intl.formatMessage(messages.settings)}><i role='img' className='fa fa-fw fa-cogs' /></a>
|
||||
<a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><i role='img' className='fa fa-fw fa-sign-out' /></a>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='drawer'>
|
||||
{header}
|
||||
|
@ -91,7 +105,7 @@ export default class Compose extends React.PureComponent {
|
|||
<SearchContainer />
|
||||
|
||||
<div className='drawer__pager'>
|
||||
<div className='drawer__inner' onFocus={this.onFocus}>
|
||||
<div className='drawer__inner scrollable optionally-scrollable' onFocus={this.onFocus}>
|
||||
<NavigationContainer onClose={this.onBlur} />
|
||||
<ComposeFormContainer />
|
||||
</div>
|
||||
|
@ -104,6 +118,7 @@ export default class Compose extends React.PureComponent {
|
|||
}
|
||||
</Motion>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
import { connect } from 'react-redux';
|
||||
import ColumnSettings from '../../community_timeline/components/column_settings';
|
||||
import { changeSetting } from '../../../actions/settings';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: state.getIn(['settings', 'direct']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onChange (key, checked) {
|
||||
dispatch(changeSetting(['direct', ...key], checked));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
|
|
@ -0,0 +1,107 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import StatusListContainer from '../ui/containers/status_list_container';
|
||||
import Column from '../../components/column';
|
||||
import ColumnHeader from '../../components/column_header';
|
||||
import {
|
||||
refreshDirectTimeline,
|
||||
expandDirectTimeline,
|
||||
} from '../../actions/timelines';
|
||||
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ColumnSettingsContainer from './containers/column_settings_container';
|
||||
import { connectDirectStream } from '../../actions/streaming';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.direct', defaultMessage: 'Direct messages' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
hasUnread: state.getIn(['timelines', 'direct', 'unread']) > 0,
|
||||
});
|
||||
|
||||
@connect(mapStateToProps)
|
||||
@injectIntl
|
||||
export default class DirectTimeline extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
columnId: PropTypes.string,
|
||||
intl: PropTypes.object.isRequired,
|
||||
hasUnread: PropTypes.bool,
|
||||
multiColumn: PropTypes.bool,
|
||||
};
|
||||
|
||||
handlePin = () => {
|
||||
const { columnId, dispatch } = this.props;
|
||||
|
||||
if (columnId) {
|
||||
dispatch(removeColumn(columnId));
|
||||
} else {
|
||||
dispatch(addColumn('DIRECT', {}));
|
||||
}
|
||||
}
|
||||
|
||||
handleMove = (dir) => {
|
||||
const { columnId, dispatch } = this.props;
|
||||
dispatch(moveColumn(columnId, dir));
|
||||
}
|
||||
|
||||
handleHeaderClick = () => {
|
||||
this.column.scrollTop();
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const { dispatch } = this.props;
|
||||
|
||||
dispatch(refreshDirectTimeline());
|
||||
this.disconnect = dispatch(connectDirectStream());
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this.disconnect) {
|
||||
this.disconnect();
|
||||
this.disconnect = null;
|
||||
}
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.column = c;
|
||||
}
|
||||
|
||||
handleLoadMore = () => {
|
||||
this.props.dispatch(expandDirectTimeline());
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, hasUnread, columnId, multiColumn } = this.props;
|
||||
const pinned = !!columnId;
|
||||
|
||||
return (
|
||||
<Column ref={this.setRef}>
|
||||
<ColumnHeader
|
||||
icon='envelope'
|
||||
active={hasUnread}
|
||||
title={intl.formatMessage(messages.title)}
|
||||
onPin={this.handlePin}
|
||||
onMove={this.handleMove}
|
||||
onClick={this.handleHeaderClick}
|
||||
pinned={pinned}
|
||||
multiColumn={multiColumn}
|
||||
>
|
||||
<ColumnSettingsContainer />
|
||||
</ColumnHeader>
|
||||
|
||||
<StatusListContainer
|
||||
trackScroll={!pinned}
|
||||
scrollKey={`direct_timeline-${columnId}`}
|
||||
timelineId='direct'
|
||||
loadMore={this.handleLoadMore}
|
||||
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
|
||||
/>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -68,7 +68,7 @@ export default class Favourites extends ImmutablePureComponent {
|
|||
const pinned = !!columnId;
|
||||
|
||||
return (
|
||||
<Column ref={this.setRef}>
|
||||
<Column ref={this.setRef} name='favourites'>
|
||||
<ColumnHeader
|
||||
icon='star'
|
||||
title={intl.formatMessage(messages.heading)}
|
||||
|
|
|
@ -47,14 +47,14 @@ export default class FollowRequests extends ImmutablePureComponent {
|
|||
|
||||
if (!accountIds) {
|
||||
return (
|
||||
<Column>
|
||||
<Column name='follow-requests'>
|
||||
<LoadingIndicator />
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Column icon='users' heading={intl.formatMessage(messages.heading)}>
|
||||
<Column name='follow-requests' icon='users' heading={intl.formatMessage(messages.heading)}>
|
||||
<ColumnBackButtonSlim />
|
||||
|
||||
<ScrollContainer scrollKey='follow_requests'>
|
||||
|
|
|
@ -4,6 +4,7 @@ import ColumnLink from '../ui/components/column_link';
|
|||
import ColumnSubheading from '../ui/components/column_subheading';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
@ -17,13 +18,16 @@ const messages = defineMessages({
|
|||
navigation_subheading: { id: 'column_subheading.navigation', defaultMessage: 'Navigation' },
|
||||
settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
|
||||
community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
|
||||
direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
|
||||
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
||||
sign_out: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
|
||||
favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' },
|
||||
show_me_around: { id: 'getting_started.onboarding', defaultMessage: 'Show me around' },
|
||||
pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' },
|
||||
});
|
||||
|
||||
|
@ -41,8 +45,18 @@ export default class GettingStarted extends ImmutablePureComponent {
|
|||
myAccount: ImmutablePropTypes.map.isRequired,
|
||||
columns: ImmutablePropTypes.list,
|
||||
multiColumn: PropTypes.bool,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
openSettings = () => {
|
||||
this.props.dispatch(openModal('SETTINGS', {}));
|
||||
}
|
||||
|
||||
openOnboardingModal = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.dispatch(openModal('ONBOARDING'));
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, myAccount, columns, multiColumn } = this.props;
|
||||
|
||||
|
@ -66,43 +80,62 @@ export default class GettingStarted extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
navItems = navItems.concat([
|
||||
<ColumnLink key='4' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
|
||||
<ColumnLink key='5' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />,
|
||||
]);
|
||||
|
||||
if (myAccount.get('locked')) {
|
||||
navItems.push(<ColumnLink key='6' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />);
|
||||
if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) {
|
||||
navItems.push(<ColumnLink key='4' icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />);
|
||||
}
|
||||
|
||||
navItems = navItems.concat([
|
||||
<ColumnLink key='7' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />,
|
||||
<ColumnLink key='8' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />,
|
||||
<ColumnLink key='5' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
|
||||
<ColumnLink key='6' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />,
|
||||
]);
|
||||
|
||||
if (myAccount.get('locked')) {
|
||||
navItems.push(<ColumnLink key='7' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />);
|
||||
}
|
||||
|
||||
navItems = navItems.concat([
|
||||
<ColumnLink key='8' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />,
|
||||
<ColumnLink key='9' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />,
|
||||
]);
|
||||
|
||||
return (
|
||||
<Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile>
|
||||
<div className='getting-started__wrapper'>
|
||||
<ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />
|
||||
{navItems}
|
||||
<ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
|
||||
<ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />
|
||||
<ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
|
||||
<ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />
|
||||
</div>
|
||||
<Column name='getting-started' icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile>
|
||||
<div className='scrollable optionally-scrollable'>
|
||||
<div className='getting-started__wrapper'>
|
||||
<ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />
|
||||
{navItems}
|
||||
<ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
|
||||
<ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />
|
||||
<ColumnLink icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} />
|
||||
<ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
|
||||
<ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={this.openSettings} />
|
||||
<ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />
|
||||
</div>
|
||||
|
||||
<div className='getting-started__footer scrollable optionally-scrollable'>
|
||||
<div className='static-content getting-started'>
|
||||
<p>
|
||||
<a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.faq' defaultMessage='FAQ' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a>
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='getting_started.open_source_notice'
|
||||
defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
|
||||
values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }}
|
||||
/>
|
||||
</p>
|
||||
<div className='getting-started__footer'>
|
||||
<div className='static-content getting-started'>
|
||||
<p>
|
||||
<a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'>
|
||||
<FormattedMessage id='getting_started.faq' defaultMessage='FAQ' />
|
||||
</a> •
|
||||
<a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'>
|
||||
<FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' />
|
||||
</a> •
|
||||
<a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'>
|
||||
<FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' />
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='getting_started.open_source_notice'
|
||||
defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
|
||||
values={{
|
||||
github: <a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc/mastodon</a>,
|
||||
Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a>,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
|
|
|
@ -91,7 +91,7 @@ export default class HashtagTimeline extends React.PureComponent {
|
|||
const pinned = !!columnId;
|
||||
|
||||
return (
|
||||
<Column ref={this.setRef}>
|
||||
<Column ref={this.setRef} name='hashtag'>
|
||||
<ColumnHeader
|
||||
icon='hashtag'
|
||||
active={hasUnread}
|
||||
|
|
|
@ -62,7 +62,7 @@ export default class HomeTimeline extends React.PureComponent {
|
|||
const pinned = !!columnId;
|
||||
|
||||
return (
|
||||
<Column ref={this.setRef}>
|
||||
<Column ref={this.setRef} name='home'>
|
||||
<ColumnHeader
|
||||
icon='home'
|
||||
active={hasUnread}
|
||||
|
|
|
@ -54,7 +54,7 @@ export default class Mutes extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<Column icon='volume-off' heading={intl.formatMessage(messages.heading)}>
|
||||
<Column name='mutes' icon='volume-off' heading={intl.formatMessage(messages.heading)}>
|
||||
<ColumnBackButtonSlim />
|
||||
<ScrollContainer scrollKey='mutes'>
|
||||
<div className='scrollable mutes' onScroll={this.handleScroll}>
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/notification
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
|
||||
// SEE INSTEAD : glitch/components/notification/container
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import { makeGetNotification } from '../../../selectors';
|
||||
import Notification from '../components/notification';
|
||||
|
|
|
@ -4,9 +4,13 @@ import PropTypes from 'prop-types';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Column from '../../components/column';
|
||||
import ColumnHeader from '../../components/column_header';
|
||||
import { expandNotifications, scrollTopNotifications } from '../../actions/notifications';
|
||||
import {
|
||||
enterNotificationClearingMode,
|
||||
expandNotifications,
|
||||
scrollTopNotifications,
|
||||
} from '../../actions/notifications';
|
||||
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
|
||||
import NotificationContainer from './containers/notification_container';
|
||||
import NotificationContainer from '../../../glitch/components/notification/container';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ColumnSettingsContainer from './containers/column_settings_container';
|
||||
import { createSelector } from 'reselect';
|
||||
|
@ -25,12 +29,22 @@ const getNotifications = createSelector([
|
|||
|
||||
const mapStateToProps = state => ({
|
||||
notifications: getNotifications(state),
|
||||
localSettings: state.get('local_settings'),
|
||||
isLoading: state.getIn(['notifications', 'isLoading'], true),
|
||||
isUnread: state.getIn(['notifications', 'unread']) > 0,
|
||||
hasMore: !!state.getIn(['notifications', 'next']),
|
||||
notifCleaningActive: state.getIn(['notifications', 'cleaningMode']),
|
||||
});
|
||||
|
||||
@connect(mapStateToProps)
|
||||
/* glitch */
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onEnterCleaningMode(yes) {
|
||||
dispatch(enterNotificationClearingMode(yes));
|
||||
},
|
||||
dispatch,
|
||||
});
|
||||
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
export default class Notifications extends React.PureComponent {
|
||||
|
||||
|
@ -44,6 +58,9 @@ export default class Notifications extends React.PureComponent {
|
|||
isUnread: PropTypes.bool,
|
||||
multiColumn: PropTypes.bool,
|
||||
hasMore: PropTypes.bool,
|
||||
localSettings: ImmutablePropTypes.map,
|
||||
notifCleaningActive: PropTypes.bool,
|
||||
onEnterCleaningMode: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -146,7 +163,11 @@ export default class Notifications extends React.PureComponent {
|
|||
);
|
||||
|
||||
return (
|
||||
<Column ref={this.setColumnRef}>
|
||||
<Column
|
||||
ref={this.setColumnRef}
|
||||
name='notifications'
|
||||
extraClasses={this.props.notifCleaningActive ? 'notif-cleaning' : null}
|
||||
>
|
||||
<ColumnHeader
|
||||
icon='bell'
|
||||
active={isUnread}
|
||||
|
@ -156,6 +177,10 @@ export default class Notifications extends React.PureComponent {
|
|||
onClick={this.handleHeaderClick}
|
||||
pinned={pinned}
|
||||
multiColumn={multiColumn}
|
||||
localSettings={this.props.localSettings}
|
||||
notifCleaning
|
||||
notifCleaningActive={this.props.notifCleaningActive} // this is used to toggle the header text
|
||||
onEnterCleaningMode={this.props.onEnterCleaningMode}
|
||||
>
|
||||
<ColumnSettingsContainer />
|
||||
</ColumnHeader>
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue