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 91fb82a4dd
commit 356d0214c9
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 displayName = account.get('display_name_html');
let fields = account.get('fields');
let info = ''; let info = '';
let mutingInfo = ''; let mutingInfo = '';
let actionBtn = ''; 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> <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) }} /> <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} {info}
{mutingInfo} {mutingInfo}
{actionBtn} {actionBtn}
</div> </div>
</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> </div>
); );
} }

View File

@ -69,6 +69,14 @@ const normalizeAccount = (state, account) => {
account.display_name_html = emojify(escapeTextContentForBrowser(displayName)); account.display_name_html = emojify(escapeTextContentForBrowser(displayName));
account.note_emojified = emojify(account.note); 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) { if (account.moved) {
state = normalizeAccount(state, account.moved); state = normalizeAccount(state, account.moved);
account.moved = account.moved.id; account.moved = account.moved.id;

View File

@ -1,9 +1,10 @@
.account__metadata { .account__header .account__header__fields {
width: 100%;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;
border-collapse: collapse; border-collapse: collapse;
margin: 20px -10px -20px;
border-bottom: 0;
a { a {
text-decoration: none; text-decoration: none;

View File

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

View File

@ -21,20 +21,19 @@
= t 'accounts.roles.moderator' = t 'accounts.roles.moderator'
.bio .bio
.account__header__content.p-note.emojify!=processed_bio[:text] .account__header__content.p-note.emojify!=processed_bio[:text]
- if processed_bio[:metadata].length > 0 - if !account.fields.empty?
%table.metadata<
- processed_bio[:metadata].each do |i|
%tr.metadata-item><
%th.emojify>!=i[0]
%td.emojify>!=i[1]
- unless account.fields.empty?
%table.account__header__fields %table.account__header__fields
%tbody %tbody
- account.fields.each do |field| - account.fields.each do |field|
%tr %tr
%th.emojify= field.name %th.emojify= field.name
%td.emojify= Formatter.instance.format_field(account, field.value) %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 .details-counters
.counter{ class: active_nav_class(short_account_url(account)) } .counter{ class: active_nav_class(short_account_url(account)) }