Implement tootsuite-style account fields
glitch-soc-style still in backup, both sharing the same SCSS style
This commit is contained in:
parent
fd7f212f15
commit
2df57af401
5 changed files with 52 additions and 30 deletions
|
@ -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,14 +101,21 @@ 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) }} />
|
||||
|
||||
{info}
|
||||
{mutingInfo}
|
||||
{actionBtn}
|
||||
</div>
|
||||
</div>
|
||||
{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>
|
||||
)}
|
||||
|
||||
{metadata.length && (
|
||||
<table className='account__metadata'>
|
||||
{fields.size == 0 && metadata.length && (
|
||||
<table className='account__header__fields'>
|
||||
<tbody>
|
||||
{(() => {
|
||||
let data = [];
|
||||
|
@ -124,6 +132,12 @@ export default class Header extends ImmutablePureComponent {
|
|||
</tbody>
|
||||
</table>
|
||||
) || null}
|
||||
|
||||
{info}
|
||||
{mutingInfo}
|
||||
{actionBtn}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.metadata {
|
||||
.account__header__fields {
|
||||
$meta-table-border: lighten($ui-base-color, 8%);
|
||||
|
||||
border-collapse: collapse;
|
||||
|
|
|
@ -21,20 +21,19 @@
|
|||
= t 'accounts.roles.moderator'
|
||||
.bio
|
||||
.account__header__content.p-note.emojify!=processed_bio[:text]
|
||||
- if processed_bio[:metadata].length > 0
|
||||
%table.metadata<
|
||||
- processed_bio[:metadata].each do |i|
|
||||
%tr.metadata-item><
|
||||
%th.emojify>!=i[0]
|
||||
%td.emojify>!=i[1]
|
||||
|
||||
- unless account.fields.empty?
|
||||
- if !account.fields.empty?
|
||||
%table.account__header__fields
|
||||
%tbody
|
||||
- account.fields.each do |field|
|
||||
%tr
|
||||
%th.emojify= field.name
|
||||
%td.emojify= Formatter.instance.format_field(account, field.value)
|
||||
- elsif processed_bio[:metadata].length > 0
|
||||
%table.account__header__fields<
|
||||
- processed_bio[:metadata].each do |i|
|
||||
%tr
|
||||
%th.emojify>!=i[0]
|
||||
%td.emojify>!=i[1]
|
||||
|
||||
.details-counters
|
||||
.counter{ class: active_nav_class(short_account_url(account)) }
|
||||
|
|
Loading…
Reference in a new issue