Implement tootsuite-style account fields

glitch-soc-style still in backup, both sharing the same SCSS style
This commit is contained in:
Thibaut Girka 2018-04-29 16:24:15 +02:00
parent fd7f212f15
commit 2df57af401
5 changed files with 52 additions and 30 deletions

View file

@ -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>
);
}

View file

@ -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;

View file

@ -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;

View file

@ -1,4 +1,4 @@
.metadata {
.account__header__fields {
$meta-table-border: lighten($ui-base-color, 8%);
border-collapse: collapse;

View file

@ -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)) }