From c1377049c62aabce460d7c6e89737ee74b40eff3 Mon Sep 17 00:00:00 2001 From: ash lea Date: Fri, 19 Jun 2020 20:01:25 -0700 Subject: never filter own posts from timeline --- .../flavours/glitch/features/ui/containers/status_list_container.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js index c01d0e5bc..7b998b8c2 100644 --- a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js +++ b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js @@ -33,6 +33,8 @@ const makeGetStatusIds = (pending = false) => createSelector([ const statusForId = statuses.get(id); let showStatus = true; + if (statusForId.get('account') === me) return true; + if (columnSettings.getIn(['shows', 'reblog']) === false) { showStatus = showStatus && statusForId.get('reblog') === null; } -- cgit From 5d12b63e79953a7596ae473706985b774d4e51a6 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 23 Jun 2020 15:37:45 +0200 Subject: Simplify filtering condition --- .../flavours/glitch/features/ui/containers/status_list_container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js index 7b998b8c2..bd2d2eb4e 100644 --- a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js +++ b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js @@ -47,7 +47,7 @@ const makeGetStatusIds = (pending = false) => createSelector([ showStatus = showStatus && statusForId.get('visibility') !== 'direct'; } - if (showStatus && regex && statusForId.get('account') !== me) { + if (showStatus && regex) { const searchIndex = statusForId.get('reblog') ? statuses.getIn([statusForId.get('reblog'), 'search_index']) : statusForId.get('search_index'); showStatus = !regex.test(searchIndex); } -- cgit From 51922d7ffa0e876493e33411e7b3d7d7f8b51d44 Mon Sep 17 00:00:00 2001 From: fuyu <54523771+mfmfuyu@users.noreply.github.com> Date: Sat, 20 Jun 2020 20:30:27 +0900 Subject: [Glitch] Fix unnecessary gap under of video modal Port cb3c6d17804da67d3c0ff233a9ca1c1902f6926f to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/components/media.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index dbf0c908d..69ce75cb6 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -404,6 +404,7 @@ @include fullwidth-gallery; video { + display: block; max-width: 100vw; max-height: 80vh; z-index: 1; -- cgit From 83bc9f68af130db3b5c41cab5f76443348a96601 Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Sat, 20 Jun 2020 20:30:40 +0900 Subject: [Glitch] Fix modifier key to keep the EmojiPicker on macOS Port 434a6d0b15ff413c6e4d7e0c3763af6429ad25b6 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/features/emoji_picker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index 14e5cb94a..d0d9714a8 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -283,7 +283,7 @@ class EmojiPickerMenu extends React.PureComponent { if (!emoji.native) { emoji.native = emoji.colons; } - if (!event.ctrlKey) { + if (!(event.ctrlKey || event.metaKey)) { this.props.onClose(); } this.props.onPick(emoji); -- cgit From 72d193654b9369b43090a4de2e197c21c30f3f31 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 23 Jun 2020 17:24:29 +0200 Subject: [Glitch] Fix very wide media attachments resulting in too thin a thumbnail Port d469247083dbbe5d4f09cc9d13a3ebd400e6068e to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/components/media.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 69ce75cb6..772b40dc4 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -76,7 +76,7 @@ border-radius: 4px; position: relative; width: 100%; - height: 110px; + min-height: 64px; @include fullwidth-gallery; } -- cgit From 2bb25c7730b8496640ee404160e1eb1652071a54 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 25 Jun 2020 01:33:01 +0200 Subject: [Glitch] Fix various issues around OpenGraph representation of media Port front-end changes (except for audio player) from 662a49dc3f06749936cedd7349092bbe622f0bc6 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/features/video/index.js | 33 +++++++++++++++------- app/javascript/flavours/glitch/styles/basics.scss | 29 +++++++++++++++++++ 2 files changed, 52 insertions(+), 10 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index a89d9c8b0..e5b681064 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -185,15 +185,26 @@ class Video extends React.PureComponent { handlePlay = () => { this.setState({ paused: false }); + this._updateTime(); } handlePause = () => { this.setState({ paused: true }); } + _updateTime () { + requestAnimationFrame(() => { + this.handleTimeUpdate(); + + if (!this.state.paused) { + this._updateTime(); + } + }); + } + handleTimeUpdate = () => { this.setState({ - currentTime: Math.floor(this.video.currentTime), + currentTime: this.video.currentTime, duration: Math.floor(this.video.duration), }); } @@ -231,7 +242,7 @@ class Video extends React.PureComponent { this.video.volume = slideamt; this.setState({ volume: slideamt }); } - }, 60); + }, 15); handleMouseDown = e => { document.addEventListener('mousemove', this.handleMouseMove, true); @@ -259,13 +270,14 @@ class Video extends React.PureComponent { handleMouseMove = throttle(e => { const { x } = getPointerPosition(this.seek, e); - const currentTime = Math.floor(this.video.duration * x); + const currentTime = this.video.duration * x; if (!isNaN(currentTime)) { - this.video.currentTime = currentTime; - this.setState({ currentTime }); + this.setState({ currentTime }, () => { + this.video.currentTime = currentTime; + }); } - }, 60); + }, 15); togglePlay = () => { if (this.state.paused) { @@ -374,8 +386,10 @@ class Video extends React.PureComponent { } handleProgress = () => { - if (this.video.buffered.length > 0) { - this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 }); + const lastTimeRange = this.video.buffered.length - 1; + + if (lastTimeRange > -1) { + this.setState({ buffer: Math.ceil(this.video.buffered.end(lastTimeRange) / this.video.duration * 100) }); } } @@ -477,7 +491,6 @@ class Video extends React.PureComponent { onClick={this.togglePlay} onPlay={this.handlePlay} onPause={this.handlePause} - onTimeUpdate={this.handleTimeUpdate} onLoadedData={this.handleLoadedData} onProgress={this.handleProgress} onVolumeChange={this.handleVolumeChange} @@ -518,7 +531,7 @@ class Video extends React.PureComponent { {(detailed || fullscreen) && ( - {formatTime(currentTime)} + {formatTime(Math.floor(currentTime))} / {formatTime(duration)} diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 9ff3f3bac..be0e1b860 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -66,6 +66,35 @@ body { } } + &.player { + padding: 0; + margin: 0; + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + + & > div { + height: 100%; + } + + .video-player video { + width: 100%; + height: 100%; + max-height: 100vh; + } + + .media-gallery { + margin-top: 0; + height: 100% !important; + border-radius: 0; + } + + .media-gallery__item { + border-radius: 0; + } + } + &.embed { background: lighten($ui-base-color, 4%); margin: 0; -- cgit From 9a26d2e127f7fa8bb2d245787bfc78ee0612a89b Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 25 Jun 2020 22:41:12 +0200 Subject: [Glitch] Fix avatar size in public page detailed status Port 0a56a4a1bc97aac7c10a70a62361c0edfcb2cc54 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/statuses.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index 6fcc11e29..4d6008c26 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -136,6 +136,11 @@ .detailed-status { padding: 15px; + + .detailed-status__display-avatar .account__avatar { + width: 48px; + height: 48px; + } } .status { -- cgit From 327f6309e4984e48c32535ea9db63d5f3fd1ef33 Mon Sep 17 00:00:00 2001 From: ThibG Date: Thu, 25 Jun 2020 22:42:01 +0200 Subject: [Glitch] Fix design issues with sensitive preview cards Port 1d2b0d2121550bf973e8a334cfa29c6d8749c52c to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/features/status/components/card.js | 9 +++++---- app/javascript/flavours/glitch/styles/components/status.scss | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index 03867e03a..13bc6c2b4 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -156,7 +156,9 @@ export default class Card extends React.PureComponent { this.setState({ previewLoaded: true }); } - handleReveal = () => { + handleReveal = e => { + e.preventDefault(); + e.stopPropagation(); this.setState({ revealed: true }); } @@ -244,7 +246,7 @@ export default class Card extends React.PureComponent { } return ( -
+
{embed} {!compact && description}
@@ -254,14 +256,12 @@ export default class Card extends React.PureComponent {
{canvas} {thumbnail} - {!revealed && spoilerButton}
); } else { embed = (
- {!revealed && spoilerButton}
); } @@ -270,6 +270,7 @@ export default class Card extends React.PureComponent { {embed} {description} + {!revealed && spoilerButton} ); } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 28a4ce0ce..4d308e601 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -776,6 +776,7 @@ a.status__display-name, } .status-card { + position: relative; display: flex; font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); -- cgit From 4964490bbddf87d106acacb5c43f01a954eb3423 Mon Sep 17 00:00:00 2001 From: Mélanie Chauvel Date: Fri, 26 Jun 2020 00:36:30 +0200 Subject: [Glitch] Improve appearence consistency of settings pages Port 08cf81f8c1b445eba9972214869c376fe6097efb to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/admin.scss | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 1c8f2271f..3cf5ee970 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -171,9 +171,7 @@ $content-width: 840px; } .content { - padding: 20px 15px; - padding-top: 60px; - padding-left: 25px; + padding: 55px 15px 20px 25px; @media screen and (max-width: $no-columns-breakpoint) { max-width: none; @@ -184,7 +182,7 @@ $content-width: 840px; &-heading { display: flex; - padding-bottom: 40px; + padding-bottom: 36px; border-bottom: 1px solid lighten($ui-base-color, 8%); margin: -15px -15px 40px 0; @@ -215,7 +213,7 @@ $content-width: 840px; h2 { color: $secondary-text-color; font-size: 24px; - line-height: 28px; + line-height: 36px; font-weight: 400; @media screen and (max-width: $no-columns-breakpoint) { @@ -528,6 +526,16 @@ body, max-width: 100%; } +.simple_form { + .actions { + margin-top: 15px; + } + + .button { + font-size: 15px; + } +} + .batch-form-box { display: flex; flex-wrap: wrap; -- cgit From de735286cd62acd9d0fbb0dd54c82098cc3a4993 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 26 Jun 2020 13:45:02 +0200 Subject: Fix public page CSS to match upstream's changes Kind of a port of 418f0a33e9bcd8a1a2384b426bb3cc59b712ef98 to glitch-soc --- app/javascript/flavours/glitch/styles/statuses.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index 4d6008c26..a71bb2552 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -201,7 +201,8 @@ display: initial; } - .status__relative-time { + .status__relative-time, + .status__visibility-icon { color: $dark-text-color; float: right; font-size: 14px; @@ -210,6 +211,11 @@ padding: initial; } + .status__visibility-icon { + margin-left: 4px; + margin-right: 4px; + } + .status__info .status__display-name { display: block; max-width: 100%; @@ -243,7 +249,8 @@ padding-right: 0; } - .status__relative-time { + .status__relative-time, + .status__visibility-icon { float: left; } } -- cgit From 934bacd05f88c1d17c1d9c61c8e8553ff9148c0e Mon Sep 17 00:00:00 2001 From: ThibG Date: Fri, 26 Jun 2020 14:31:13 +0200 Subject: [Glitch] Change sensitive preview cards to not blur text Port a1ad2ad9519fda525858ba5aef86815a6f6385f2 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/features/status/components/card.js | 8 +++----- app/javascript/flavours/glitch/styles/components/status.scss | 5 ----- 2 files changed, 3 insertions(+), 10 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index 13bc6c2b4..d2de225c0 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -7,7 +7,6 @@ import punycode from 'punycode'; import classnames from 'classnames'; import { decode as decodeIDNA } from 'flavours/glitch/util/idna'; import Icon from 'flavours/glitch/components/icon'; -import classNames from 'classnames'; import { useBlurhash } from 'flavours/glitch/util/initial_state'; import { decode } from 'blurhash'; @@ -196,7 +195,7 @@ export default class Card extends React.PureComponent { const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const description = ( -
+
{title} {!(horizontal || compact) &&

{trim(card.get('description') || '', maxDescription)}

} {provider} @@ -204,7 +203,7 @@ export default class Card extends React.PureComponent { ); let embed = ''; - let canvas = ; + let canvas = ; let thumbnail = ; let spoilerButton = ( ); spoilerButton = ( -
+
{spoilerButton}
); @@ -270,7 +269,6 @@ export default class Card extends React.PureComponent { {embed} {description} - {!revealed && spoilerButton} ); } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 4d308e601..fe4f16353 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -875,11 +875,6 @@ a.status-card { flex: 1 1 auto; overflow: hidden; padding: 14px 14px 14px 8px; - - &--blurred { - filter: blur(2px); - pointer-events: none; - } } .status-card__description { -- cgit From befe8c72ddd3b427ccf1489a6de6bcc23b6a55f5 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 28 Jun 2020 20:55:32 +0200 Subject: [Glitch] Fix read marker state not being udpated internally Port fa4876a1b93d4bb62038cca75bd5017fe49b59ae to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/reducers/markers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/reducers/markers.js b/app/javascript/flavours/glitch/reducers/markers.js index 2e67be82e..fb1572ff5 100644 --- a/app/javascript/flavours/glitch/reducers/markers.js +++ b/app/javascript/flavours/glitch/reducers/markers.js @@ -1,6 +1,6 @@ import { MARKERS_SUBMIT_SUCCESS, -} from '../actions/notifications'; +} from '../actions/markers'; const initialState = ImmutableMap({ home: '0', -- cgit From 50f5254568885afcb312514eebb4b0b997cb81f5 Mon Sep 17 00:00:00 2001 From: trwnh Date: Mon, 29 Jun 2020 06:57:44 -0500 Subject: [Glitch] Fix padding on account header Port d1c6dd2d277fee0cf65b480adc868c69df952622 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/components/accounts.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 610e48f92..e0239ff79 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -605,7 +605,7 @@ &__tabs { display: flex; align-items: flex-start; - padding: 7px 5px; + padding: 7px 10px; margin-top: -55px; &__buttons { @@ -627,7 +627,7 @@ } &__name { - padding: 5px; + padding: 5px 10px; .account-role { vertical-align: top; -- cgit From 511edccf617097046e16273a2364e8fbf5d913a0 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 30 Jun 2020 19:19:50 +0200 Subject: [Glitch] Add user notes on accounts Port 65506bac3f3fe233b5b7b3241020bd74eb5c9259 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/actions/account_notes.js | 69 ++++++++++++++ .../features/account/components/account_note.js | 103 +++++++++++++++++++++ .../glitch/features/account/components/header.js | 11 +++ .../account/containers/account_note_container.js | 34 +++++++ .../features/account_timeline/components/header.js | 6 ++ .../containers/header_container.js | 5 + .../flavours/glitch/reducers/account_notes.js | 44 +++++++++ app/javascript/flavours/glitch/reducers/index.js | 2 + .../flavours/glitch/reducers/relationships.js | 4 + .../glitch/styles/components/accounts.scss | 62 ++++++++++++- 10 files changed, 339 insertions(+), 1 deletion(-) create mode 100644 app/javascript/flavours/glitch/actions/account_notes.js create mode 100644 app/javascript/flavours/glitch/features/account/components/account_note.js create mode 100644 app/javascript/flavours/glitch/features/account/containers/account_note_container.js create mode 100644 app/javascript/flavours/glitch/reducers/account_notes.js (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/actions/account_notes.js b/app/javascript/flavours/glitch/actions/account_notes.js new file mode 100644 index 000000000..c1cce3193 --- /dev/null +++ b/app/javascript/flavours/glitch/actions/account_notes.js @@ -0,0 +1,69 @@ +import api from 'flavours/glitch/util/api'; + +export const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST'; +export const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS'; +export const ACCOUNT_NOTE_SUBMIT_FAIL = 'ACCOUNT_NOTE_SUBMIT_FAIL'; + +export const ACCOUNT_NOTE_INIT_EDIT = 'ACCOUNT_NOTE_INIT_EDIT'; +export const ACCOUNT_NOTE_CANCEL = 'ACCOUNT_NOTE_CANCEL'; + +export const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT'; + +export function submitAccountNote() { + return (dispatch, getState) => { + dispatch(submitAccountNoteRequest()); + + const id = getState().getIn(['account_notes', 'edit', 'account_id']); + + api(getState).post(`/api/v1/accounts/${id}/note`, { + comment: getState().getIn(['account_notes', 'edit', 'comment']), + }).then(response => { + dispatch(submitAccountNoteSuccess(response.data)); + }).catch(error => dispatch(submitAccountNoteFail(error))); + }; +}; + +export function submitAccountNoteRequest() { + return { + type: ACCOUNT_NOTE_SUBMIT_REQUEST, + }; +}; + +export function submitAccountNoteSuccess(relationship) { + return { + type: ACCOUNT_NOTE_SUBMIT_SUCCESS, + relationship, + }; +}; + +export function submitAccountNoteFail(error) { + return { + type: ACCOUNT_NOTE_SUBMIT_FAIL, + error, + }; +}; + +export function initEditAccountNote(account) { + return (dispatch, getState) => { + const comment = getState().getIn(['relationships', account.get('id'), 'note']); + + dispatch({ + type: ACCOUNT_NOTE_INIT_EDIT, + account, + comment, + }); + }; +}; + +export function cancelAccountNote() { + return { + type: ACCOUNT_NOTE_CANCEL, + }; +}; + +export function changeAccountNoteComment(comment) { + return { + type: ACCOUNT_NOTE_CHANGE_COMMENT, + comment, + }; +}; diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.js b/app/javascript/flavours/glitch/features/account/components/account_note.js new file mode 100644 index 000000000..e7fd4c5ff --- /dev/null +++ b/app/javascript/flavours/glitch/features/account/components/account_note.js @@ -0,0 +1,103 @@ +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'; +import Icon from 'flavours/glitch/components/icon'; +import Textarea from 'react-textarea-autosize'; + +const messages = defineMessages({ + placeholder: { id: 'account_note.placeholder', defaultMessage: 'No comment provided' }, +}); + +export default @injectIntl +class Header extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + isEditing: PropTypes.bool, + isSubmitting: PropTypes.bool, + accountNote: PropTypes.string, + onEditAccountNote: PropTypes.func.isRequired, + onCancelAccountNote: PropTypes.func.isRequired, + onSaveAccountNote: PropTypes.func.isRequired, + onChangeAccountNote: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + handleChangeAccountNote = (e) => { + this.props.onChangeAccountNote(e.target.value); + }; + + componentWillUnmount () { + if (this.props.isEditing) { + this.props.onCancelAccountNote(); + } + } + + handleKeyDown = e => { + if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { + this.props.onSaveAccountNote(); + } else if (e.keyCode === 27) { + this.props.onCancelAccountNote(); + } + } + + render () { + const { account, accountNote, isEditing, isSubmitting, intl } = this.props; + + if (!account || (!accountNote && !isEditing)) { + return null; + } + + let action_buttons = null; + if (isEditing) { + action_buttons = ( +
+ +
+ +
+ ); + } + + let note_container = null; + if (isEditing) { + note_container = ( +