From a3ac322ded4277f954b45697ea765b0d90d37e9d Mon Sep 17 00:00:00 2001 From: Sasha Sorokin Date: Mon, 6 Jul 2020 19:27:32 +0700 Subject: [Glitch] Replace shortNumberFormat with Port cb2adaaf9d6c3147de9060132b69933df734d5dc to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/features/account/components/header.js | 1 - 1 file changed, 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features/account') diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index a5abf38ae..4ef8036fc 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -9,7 +9,6 @@ import classNames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; import Avatar from 'flavours/glitch/components/avatar'; import Button from 'flavours/glitch/components/button'; -import { shortNumberFormat } from 'flavours/glitch/util/numbers'; import { NavLink } from 'react-router-dom'; import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container'; import AccountNoteContainer from '../containers/account_note_container'; -- cgit From 170b38c3f44ba01a9896a1c5392f6b8cab5998c9 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 7 Jul 2020 17:24:23 +0200 Subject: Fix being unable to add account notes --- app/javascript/flavours/glitch/features/account/components/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features/account') diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index 4ef8036fc..572f34fa0 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -176,7 +176,7 @@ class Header extends ImmutablePureComponent { menu.push(null); } - if (accountNote === null) { + if (accountNote === null || accountNote === '') { menu.push({ text: intl.formatMessage(messages.add_account_note, { name: account.get('username') }), action: this.props.onEditAccountNote }); } -- cgit From a9b13804e25b1697fcbf2dcda5835a0dfdc5cd50 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 7 Jul 2020 17:42:35 +0200 Subject: Change account note placeholder name since the design has diverged upstream --- .../flavours/glitch/features/account/components/account_note.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features/account') diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.js b/app/javascript/flavours/glitch/features/account/components/account_note.js index e7fd4c5ff..3163b8735 100644 --- a/app/javascript/flavours/glitch/features/account/components/account_note.js +++ b/app/javascript/flavours/glitch/features/account/components/account_note.js @@ -7,7 +7,7 @@ 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' }, + placeholder: { id: 'account_note.glitch_placeholder', defaultMessage: 'No comment provided' }, }); export default @injectIntl -- cgit From 64b6c20676f320686c58e321b674cba757e40905 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 7 Jul 2020 17:47:33 +0200 Subject: Change styling and layout of account notes UI --- .../features/account/components/account_note.js | 19 +++++++------ .../glitch/styles/components/accounts.scss | 32 ++++++++++++++-------- 2 files changed, 30 insertions(+), 21 deletions(-) (limited to 'app/javascript/flavours/glitch/features/account') diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.js b/app/javascript/flavours/glitch/features/account/components/account_note.js index 3163b8735..8a99bfcb8 100644 --- a/app/javascript/flavours/glitch/features/account/components/account_note.js +++ b/app/javascript/flavours/glitch/features/account/components/account_note.js @@ -63,6 +63,14 @@ class Header extends ImmutablePureComponent { ); + } else { + action_buttons = ( +
+ +
+ ); } let note_container = null; @@ -85,17 +93,10 @@ class Header extends ImmutablePureComponent { return (
- - {!isEditing && ( -
- -
- )} + + {action_buttons}
{note_container} - {action_buttons}
); } diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 774254a4c..c1e3ae835 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -714,42 +714,44 @@ } &__account-note { - margin: 5px; - padding: 10px; - background: $ui-highlight-color; - color: $primary-text-color; + margin: 0 -5px; + padding: 10px 15px; display: flex; flex-direction: column; - border-radius: 4px; font-size: 14px; font-weight: 400; + border-top: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid lighten($ui-base-color, 12%); &__header { display: flex; flex-direction: row; justify-content: space-between; + margin-bottom: 5px; + color: $darker-text-color; } &__content { white-space: pre-wrap; - margin-top: 5px; + padding: 10px 0; } &__buttons { display: flex; flex-direction: row; justify-content: flex-end; - margin-top: 5px; + flex: 1 0; .flex-spacer { - flex: 0 0 20px; + flex: 0 0 15px; background: transparent; } } strong { - font-size: 15px; + font-size: 12px; font-weight: 500; + text-transform: uppercase; } button:hover span { @@ -759,18 +761,24 @@ textarea { display: block; box-sizing: border-box; - width: 100%; + width: calc(100% + 20px); margin: 0; margin-top: 5px; - color: $inverted-text-color; - background: $simple-background-color; + color: $secondary-text-color; + background: $ui-base-color; padding: 10px; + margin: 0 -10px; font-family: inherit; font-size: 14px; resize: none; border: 0; outline: 0; border-radius: 4px; + + &::placeholder { + color: $dark-text-color; + opacity: 1; + } } } } -- cgit From 0fe5deae89f140d2721e5c914b4ad06fea426623 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 7 Jul 2020 19:26:08 +0200 Subject: Change styling of account note editing buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Mélanie Chauvel (ariasuni) --- .../features/account/components/account_note.js | 6 ++--- .../glitch/styles/components/accounts.scss | 29 ++++++++++++++++++---- 2 files changed, 27 insertions(+), 8 deletions(-) (limited to 'app/javascript/flavours/glitch/features/account') diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.js b/app/javascript/flavours/glitch/features/account/components/account_note.js index 8a99bfcb8..6e5ed7703 100644 --- a/app/javascript/flavours/glitch/features/account/components/account_note.js +++ b/app/javascript/flavours/glitch/features/account/components/account_note.js @@ -54,11 +54,11 @@ class Header extends ImmutablePureComponent { if (isEditing) { action_buttons = (
-
-
@@ -66,7 +66,7 @@ class Header extends ImmutablePureComponent { } else { action_buttons = (
-
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index c1e3ae835..0fc2a11ff 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -742,8 +742,31 @@ justify-content: flex-end; flex: 1 0; + .icon-button { + font-size: 14px; + padding: 2px 6px; + color: $darker-text-color; + + &:hover, + &:active, + &:focus { + color: lighten($darker-text-color, 7%); + background-color: rgba($darker-text-color, 0.15); + } + + &:focus { + background-color: rgba($darker-text-color, 0.3); + } + + &[disabled] { + color: darken($darker-text-color, 13%); + background-color: transparent; + cursor: default; + } + } + .flex-spacer { - flex: 0 0 15px; + flex: 0 0 5px; background: transparent; } } @@ -754,10 +777,6 @@ text-transform: uppercase; } - button:hover span { - text-decoration: underline; - } - textarea { display: block; box-sizing: border-box; -- cgit