Change design of edit media modal in web UI (#33516)
This commit is contained in:
parent
4ebdfed8ea
commit
11786f1114
42 changed files with 919 additions and 900 deletions
|
@ -1,5 +1,6 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
|
||||
|
||||
import { changeUploadCompose } from 'mastodon/actions/compose_typed';
|
||||
import { timelineDelete } from 'mastodon/actions/timelines_typed';
|
||||
|
||||
import {
|
||||
|
@ -36,17 +37,11 @@ import {
|
|||
COMPOSE_LANGUAGE_CHANGE,
|
||||
COMPOSE_COMPOSING_CHANGE,
|
||||
COMPOSE_EMOJI_INSERT,
|
||||
COMPOSE_UPLOAD_CHANGE_REQUEST,
|
||||
COMPOSE_UPLOAD_CHANGE_SUCCESS,
|
||||
COMPOSE_UPLOAD_CHANGE_FAIL,
|
||||
COMPOSE_RESET,
|
||||
COMPOSE_POLL_ADD,
|
||||
COMPOSE_POLL_REMOVE,
|
||||
COMPOSE_POLL_OPTION_CHANGE,
|
||||
COMPOSE_POLL_SETTINGS_CHANGE,
|
||||
INIT_MEDIA_EDIT_MODAL,
|
||||
COMPOSE_CHANGE_MEDIA_DESCRIPTION,
|
||||
COMPOSE_CHANGE_MEDIA_FOCUS,
|
||||
COMPOSE_CHANGE_MEDIA_ORDER,
|
||||
COMPOSE_SET_STATUS,
|
||||
COMPOSE_FOCUS,
|
||||
|
@ -87,13 +82,6 @@ const initialState = ImmutableMap({
|
|||
resetFileKey: Math.floor((Math.random() * 0x10000)),
|
||||
idempotencyKey: null,
|
||||
tagHistory: ImmutableList(),
|
||||
media_modal: ImmutableMap({
|
||||
id: null,
|
||||
description: '',
|
||||
focusX: 0,
|
||||
focusY: 0,
|
||||
dirty: false,
|
||||
}),
|
||||
});
|
||||
|
||||
const initialPoll = ImmutableMap({
|
||||
|
@ -294,7 +282,24 @@ const updatePoll = (state, index, value, maxOptions) => state.updateIn(['poll',
|
|||
return tmp;
|
||||
});
|
||||
|
||||
export default function compose(state = initialState, action) {
|
||||
/** @type {import('@reduxjs/toolkit').Reducer<typeof initialState>} */
|
||||
export const composeReducer = (state = initialState, action) => {
|
||||
if (changeUploadCompose.fulfilled.match(action)) {
|
||||
return state
|
||||
.set('is_changing_upload', false)
|
||||
.update('media_attachments', list => list.map(item => {
|
||||
if (item.get('id') === action.payload.media.id) {
|
||||
return fromJS(action.payload.media).set('unattached', !action.payload.attached);
|
||||
}
|
||||
|
||||
return item;
|
||||
}));
|
||||
} else if (changeUploadCompose.pending.match(action)) {
|
||||
return state.set('is_changing_upload', true);
|
||||
} else if (changeUploadCompose.rejected.match(action)) {
|
||||
return state.set('is_changing_upload', false);
|
||||
}
|
||||
|
||||
switch(action.type) {
|
||||
case STORE_HYDRATE:
|
||||
return hydrate(state, action.state.get('compose'));
|
||||
|
@ -369,16 +374,13 @@ export default function compose(state = initialState, action) {
|
|||
});
|
||||
case COMPOSE_SUBMIT_REQUEST:
|
||||
return state.set('is_submitting', true);
|
||||
case COMPOSE_UPLOAD_CHANGE_REQUEST:
|
||||
return state.set('is_changing_upload', true);
|
||||
|
||||
case COMPOSE_REPLY_CANCEL:
|
||||
case COMPOSE_RESET:
|
||||
case COMPOSE_SUBMIT_SUCCESS:
|
||||
return clearAll(state);
|
||||
case COMPOSE_SUBMIT_FAIL:
|
||||
return state.set('is_submitting', false);
|
||||
case COMPOSE_UPLOAD_CHANGE_FAIL:
|
||||
return state.set('is_changing_upload', false);
|
||||
case COMPOSE_UPLOAD_REQUEST:
|
||||
return state.set('is_uploading', true).update('pending_media_attachments', n => n + 1);
|
||||
case COMPOSE_UPLOAD_PROCESSING:
|
||||
|
@ -407,20 +409,6 @@ export default function compose(state = initialState, action) {
|
|||
|
||||
return item;
|
||||
}));
|
||||
case INIT_MEDIA_EDIT_MODAL: {
|
||||
const media = state.get('media_attachments').find(item => item.get('id') === action.id);
|
||||
return state.set('media_modal', ImmutableMap({
|
||||
id: action.id,
|
||||
description: media.get('description') || '',
|
||||
focusX: media.getIn(['meta', 'focus', 'x'], 0),
|
||||
focusY: media.getIn(['meta', 'focus', 'y'], 0),
|
||||
dirty: false,
|
||||
}));
|
||||
}
|
||||
case COMPOSE_CHANGE_MEDIA_DESCRIPTION:
|
||||
return state.setIn(['media_modal', 'description'], action.description).setIn(['media_modal', 'dirty'], true);
|
||||
case COMPOSE_CHANGE_MEDIA_FOCUS:
|
||||
return state.setIn(['media_modal', 'focusX'], action.focusX).setIn(['media_modal', 'focusY'], action.focusY).setIn(['media_modal', 'dirty'], true);
|
||||
case COMPOSE_MENTION:
|
||||
return state.withMutations(map => {
|
||||
map.update('text', text => [text.trim(), `@${action.account.get('acct')} `].filter((str) => str.length !== 0).join(' '));
|
||||
|
@ -458,17 +446,6 @@ export default function compose(state = initialState, action) {
|
|||
}
|
||||
case COMPOSE_EMOJI_INSERT:
|
||||
return insertEmoji(state, action.position, action.emoji, action.needsSpace);
|
||||
case COMPOSE_UPLOAD_CHANGE_SUCCESS:
|
||||
return state
|
||||
.set('is_changing_upload', false)
|
||||
.setIn(['media_modal', 'dirty'], false)
|
||||
.update('media_attachments', list => list.map(item => {
|
||||
if (item.get('id') === action.media.id) {
|
||||
return fromJS(action.media).set('unattached', !action.attached);
|
||||
}
|
||||
|
||||
return item;
|
||||
}));
|
||||
case REDRAFT:
|
||||
return state.withMutations(map => {
|
||||
map.set('text', action.raw_text || unescapeHTML(expandMentions(action.status)));
|
||||
|
@ -550,4 +527,4 @@ export default function compose(state = initialState, action) {
|
|||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue