Implement tootsuite-style account fields

glitch-soc-style still in backup, both sharing the same SCSS style

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

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;

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;

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;

app/views/accounts/_header.html.haml

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