Merge pull request #2073 from kedamaDQ/add-eliminate-gaps-button

Add button to eliminate gaps between custom emojis

app/javascript/mastodon/actions/compose.js

@@ -75,6 +75,8 @@ export const INIT_MEDIA_EDIT_MODAL = 'INIT_MEDIA_EDIT_MODAL';
 export const COMPOSE_CHANGE_MEDIA_DESCRIPTION = 'COMPOSE_CHANGE_MEDIA_DESCRIPTION';
 export const COMPOSE_CHANGE_MEDIA_FOCUS = 'COMPOSE_CHANGE_MEDIA_FOCUS';
 
+export const COMPOSE_ELIMINATE_GAPS = 'COMPOSE_ELIMINATE_GAPS';
+
 export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
 
 const messages = defineMessages({
@@ -485,6 +487,12 @@ export function undoUploadCompose(media_id) {
  };
 }
 
+export function eliminateGaps() {
+ return {
+ type: COMPOSE_ELIMINATE_GAPS,
+ };
+}
+
 export function clearComposeSuggestions() {
  if (fetchComposeSuggestionsAccountsController) {
  fetchComposeSuggestionsAccountsController.abort();
@@ -729,7 +737,7 @@ export function changeComposeFixedText(text) {
  type: COMPOSE_FIXED_TEXT_CHANGE,
  text,
  };
-};
+}
 
 export function changeComposeVisibility(value) {
  return {

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -22,13 +22,15 @@ import { countableText } from '../util/counter';
 import Icon from 'mastodon/components/icon';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
+const gapsBetweenEmojisRe = /:[0-9a-zA-Z_]{2,}: +:[0-9a-zA-Z_]{2,}:/m;
 
 const messages = defineMessages({
  placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
  publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
  saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Save changes' },
+ eliminateGaps: { id: 'compose_form.eliminate_gaps', defaultMessage: 'Eliminate gaps' },
 });
 
 export default @injectIntl
@@ -57,6 +59,7 @@ class ComposeForm extends ImmutablePureComponent {
  isUploading: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
+ onEliminateGaps: PropTypes.func.isRequired,
  onClearSuggestions: PropTypes.func.isRequired,
  onFetchSuggestions: PropTypes.func.isRequired,
  onSuggestionSelected: PropTypes.func.isRequired,
@@ -89,9 +92,9 @@ class ComposeForm extends ImmutablePureComponent {
  return [
  this.props.spoiler? this.props.spoilerText: '',
  countableText(this.props.text),
- this.props.fixedTextExists? this.props.fixedTextSeparator + this.props.fixedText: ''
+ this.props.fixedTextExists? this.props.fixedTextSeparator + this.props.fixedText: '',
  ].join('');
- }
+ };
 
  canSubmit = () => {
  const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
@@ -119,6 +122,15 @@ class ComposeForm extends ImmutablePureComponent {
  }
  };
 
+ canEliminateGaps = () => {
+ const { isSubmitting, text, spoilerText, fixedText } = this.props;
+ return (gapsBetweenEmojisRe.test(text) || gapsBetweenEmojisRe.test(spoilerText) || gapsBetweenEmojisRe.test(fixedText)) && !isSubmitting;
+ };
+
+ handleElimenateGaps = () => {
+ this.props.onEliminateGaps();
+ };
+
  onSuggestionsClearRequested = () => {
  this.props.onClearSuggestions();
  };
@@ -137,15 +149,15 @@ class ComposeForm extends ImmutablePureComponent {
 
  onFixedSuggestionSelected = (tokenStart, token, value) => {
  this.props.onSuggestionSelected(tokenStart, token, value, ['fixed_text']);
- }
+ };
 
  handleChangeSpoilerText = (e) => {
  this.props.onChangeSpoilerText(e.target.value);
  };
 
  handleChangeFixedText = (e) => {
  this.props.onChangeFixedText(e.target.value);
- }
+ };
 
  handleFocus = () => {
  if (this.composeForm && !this.props.singleColumn) {
@@ -236,6 +248,8 @@ class ComposeForm extends ImmutablePureComponent {
  publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
  }
 
+ const eliminateGaps = intl.formatMessage(messages.eliminateGaps);
+
  return (
  <form className='compose-form' onSubmit={this.handleSubmit}>
  <WarningContainer />
@@ -318,6 +332,15 @@ class ComposeForm extends ImmutablePureComponent {
  />
  </div>
  <div className='compose-form__publish'>
+ <div className='compose-form__eliminate-gaps-button-wrapper'>
+ <Button
+ type='button'
+ text={eliminateGaps}
+ disabled={!this.canEliminateGaps()}
+ onClick={this.handleElimenateGaps}
+ block
+ />
+ </div>
  <div className='compose-form__publish-button-wrapper'>
  <Button
  type='submit'

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -3,6 +3,7 @@ import ComposeForm from '../components/compose_form';
 import {
  changeCompose,
  submitCompose,
+ eliminateGaps,
  clearComposeSuggestions,
  fetchComposeSuggestions,
  selectComposeSuggestion,
@@ -43,6 +44,10 @@ const mapDispatchToProps = (dispatch) => ({
  dispatch(submitCompose(router));
  },
 
+ onEliminateGaps () {
+ dispatch(eliminateGaps());
+ },
+
  onClearSuggestions () {
  dispatch(clearComposeSuggestions());
  },

app/javascript/mastodon/locales/ja.json

@@ -148,6 +148,7 @@
  "compose_form.spoiler.marked": "本文は警告の後ろに隠されます",
  "compose_form.spoiler.unmarked": "本文は隠されていません",
  "compose_form.spoiler_placeholder": "ここに警告を書いてください",
+ "compose_form.eliminate_gaps": "隙間をなくす",
  "confirmation_modal.cancel": "キャンセル",
  "confirmations.block.block_and_report": "ブロックし通報",
  "confirmations.block.confirm": "ブロック",

app/javascript/mastodon/reducers/compose.js

@@ -47,6 +47,7 @@ import {
  COMPOSE_CHANGE_MEDIA_DESCRIPTION,
  COMPOSE_CHANGE_MEDIA_FOCUS,
  COMPOSE_SET_STATUS,
+ COMPOSE_ELIMINATE_GAPS,
 } from '../actions/compose';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { STORE_HYDRATE } from '../actions/store';
@@ -104,6 +105,8 @@ const initialPoll = ImmutableMap({
  multiple: false,
 });
 
+const eliminateGapsRe = /(:[0-9a-zA-Z_]{2,}:) +(:[0-9a-zA-Z_]{2,}:)/gm;
+
 function statusToTextMentions(state, status) {
  let set = ImmutableOrderedSet([]);
 
@@ -489,6 +492,21 @@ export default function compose(state = initialState, action) {
  }));
  }
  });
+ case COMPOSE_ELIMINATE_GAPS:
+ return state
+ .set('text', state.get('text')
+ .replaceAll(eliminateGapsRe, '$1\u200B$2')
+ .replaceAll(eliminateGapsRe, '$1\u200B$2'),
+ )
+ .set('spoiler_text', state.get('spoiler_text')
+ .replaceAll(eliminateGapsRe, '$1\u200B$2')
+ .replaceAll(eliminateGapsRe, '$1\u200B$2'),
+ )
+ .set('fixed_text', state.get('fixed_text')
+ .replaceAll(eliminateGapsRe, '$1\u200B$2')
+ .replaceAll(eliminateGapsRe, '$1\u200B$2'),
+ )
+ .set('idempotencyKey', uuid());
  case COMPOSE_SET_STATUS:
  return state.withMutations(map => {
  map.set('id', action.status.get('id'));

app/javascript/styles/foresdon/diff.scss

@@ -2,11 +2,11 @@ html {
  scrollbar-color: $ui-base-color transparent;
 }
 
-body, body.admin {
+body,
+body.admin {
  background: url($foresdon-background-image) no-repeat fixed bottom center;
  background-size: cover;
 
-
  @media screen and (max-width: calc($no-gap-breakpoint - 1px)) {
  background-position: 25% 80%;
  }
@@ -25,7 +25,6 @@ body, body.admin {
  }
 }
 
-
 /* advanced web interface */
 .drawer {
  &__header {
@@ -34,7 +33,7 @@ body, body.admin {
  a {
  background-color: $ui-column-header-color;
  transition: background 100ms ease-in;
- 
+
  &:hover {
  background: lighten($ui-base-color, 3%);
  transition: background 200ms ease-out;
@@ -58,7 +57,7 @@ body, body.admin {
 
  &__inner {
  background-color: $ui-base-color;
- 
+
  &__mastodon {
  background-color: transparent;
  }
@@ -69,6 +68,7 @@ body, body.admin {
  .compose-form__warning {
  color: $classic-base-color;
  }
+
  .reply-indicator {
  color: $classic-base-color;
 
@@ -106,7 +106,7 @@ body, body.admin {
 }
 
 .language-dropdown__dropdown__results__item {
-  color: $classic-base-color;
+ color: $classic-base-color;
 }
 
 .search-results {
@@ -136,14 +136,15 @@ body, body.admin {
  background-color: transparent;
  border: none;
 
- & a, button {
+ & a,
+ & button {
  flex: 2 1 auto;
  padding: 15px 5px;
  background-color: $ui-base-color-overwrap;
 
  &.active {
  background-color: $ui-base-color;
- 
+
  &::before,
  &::after {
  font-size: 8px;
@@ -153,28 +154,29 @@ body, body.admin {
  transform: none;
  color: $classic-highlight-color;
  content: "●";
- transform: none;
  border: none;
  }
- 
+
  &::after {
- bottom: 0px;
+ bottom: 0;
  border: none;
  }
  }
  }
 }
 
 .notification__filter-bar {
- & a, button {
+ & a,
+ & button {
  &.active {
  background-color: $ui-base-color;
  }
  }
 }
 
 .account__section-headline {
- & a, button {
+ & a,
+ & button {
  &.active {
  background-color: transparent;
  }
@@ -201,13 +203,13 @@ div[aria-label="Explore"] > .scrollable {
  }
 
  .account__section-headline {
- & a, button {
+ & a,
+ & button {
  background-color: $ui-base-color-overwrap;
- 
+
  &.active {
  background-color: $ui-base-color;
  }
-
  }
  }
 }
@@ -447,4 +449,4 @@ div[aria-label="Explore"] {
  }
  }
  }
-}
+}

app/javascript/styles/foresdon/variables.scss

@@ -28,5 +28,5 @@ $foresdon-primary-border-radius: 8px;
 $foresdon-primary-ui-alpha: 0.75;
 $foresdon-margin-right: 2px;
 $foresdon-margin-bottom: 3px;
-$foresdon-ui-accent-overlay: rgba(16, 0, 8, 0.2);
+$foresdon-ui-accent-overlay: rgba(16, 0, 8, 20%);
 $foresdon-ui-marker-color: #ca8f04;

app/javascript/styles/mastodon/components.scss

@@ -557,7 +557,7 @@ body > [data-popper-placement] {
  all: unset;
  }
 
- background-position: bottom 0px center;
+ background-position: bottom 0 center;
  background-size: 20%;
  background-repeat: no-repeat;
 
@@ -795,6 +795,12 @@ body > [data-popper-placement] {
  overflow: hidden;
  padding-top: 15px;
  }
+
+ .compose-form__eliminate-gaps-button-wrapper {
+ overflow: hidden;
+ padding-top: 15px;
+ margin-right: 5px;
+ }
  }
 }
 

app/javascript/styles/mastodon/polls.scss

@@ -252,15 +252,15 @@
  background-color: $compose-form-public-color;
  }
 
- &.unlisted{
+ &.unlisted {
  background-color: $compose-form-unlisted-color;
  }
 
  &.private {
  background-color: $compose-form-private-color;
  }
 
- &.direct{
+ &.direct {
  background-color: $compose-form-direct-color;
  }
  }