diff options
Diffstat (limited to 'app/javascript/flavours')
5 files changed, 57 insertions, 22 deletions
diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index a208f1a8e..7a0a2dfa9 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -37,6 +37,7 @@ export default class Header extends ImmutablePureComponent { } let displayName = account.get('display_name_html'); + let fields = account.get('fields'); let info = ''; let mutingInfo = ''; let actionBtn = ''; @@ -100,30 +101,43 @@ export default class Header extends ImmutablePureComponent { <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) }} /> + {fields.size > 0 && ( + <table className='account__header__fields'> + <tbody> + {fields.map((pair, i) => ( + <tr key={i}> + <th dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} /> + <td dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /> + </tr> + ))} + </tbody> + </table> + )} + + {fields.size == 0 && metadata.length && ( + <table className='account__header__fields'> + <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} + {info} {mutingInfo} {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> ); } diff --git a/app/javascript/flavours/glitch/reducers/accounts.js b/app/javascript/flavours/glitch/reducers/accounts.js index 61354f2e1..23fbd999c 100644 --- a/app/javascript/flavours/glitch/reducers/accounts.js +++ b/app/javascript/flavours/glitch/reducers/accounts.js @@ -69,6 +69,14 @@ const normalizeAccount = (state, account) => { account.display_name_html = emojify(escapeTextContentForBrowser(displayName)); account.note_emojified = emojify(account.note); + if (account.fields) { + account.fields = account.fields.map(pair => ({ + ...pair, + name_emojified: emojify(escapeTextContentForBrowser(pair.name)), + value_emojified: emojify(pair.value), + })); + } + if (account.moved) { state = normalizeAccount(state, account.moved); account.moved = account.moved.id; diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss index fd940026b..fa1a4bc34 100644 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -1,9 +1,10 @@ -.account__metadata { - width: 100%; +.account__header .account__header__fields { font-size: 15px; line-height: 20px; overflow: hidden; border-collapse: collapse; + margin: 20px -10px -20px; + border-bottom: 0; a { text-decoration: none; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 8dbc557d4..0b12742a9 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -15,6 +15,18 @@ code { overflow: hidden; } + .row { + display: flex; + margin: 0 -5px; + + .input { + box-sizing: border-box; + flex: 1 1 auto; + width: 50%; + padding: 0 5px; + } + } + span.hint { display: block; color: $darker-text-color; diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss index 484410bef..b66cce3c1 100644 --- a/app/javascript/flavours/glitch/styles/metadata.scss +++ b/app/javascript/flavours/glitch/styles/metadata.scss @@ -1,4 +1,4 @@ -.metadata { +.account__header__fields { $meta-table-border: lighten($ui-base-color, 8%); border-collapse: collapse; |