Change className generation and mismatched classNames (#16)

* Use classList util from Flarum instead of string interpolation * Styling rewrite Original styles were just compiled CSS. This converts it back to Less, and uses more modern styling techniques (display grid) to produce the same effect. * Fix incorrect class names Some classNames were incorrectly labelled (e.g. iconpicker--highlighted instad of itempicker-item--highlighted). * Fix dropdown caret not showing * Improve spacing around dropdown toggle button
FriendsOfFlarum · Feb 9, 2021 · 15cfa40 · 15cfa40
1 parent 5edc039
commit 15cfa40
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 153 deletions.
diff --git a/js/src/forum/components/IconSelectorComponent.js b/js/src/forum/components/IconSelectorComponent.js
@@ -1,7 +1,7 @@
 import Dropdown from 'flarum/components/Dropdown';
 import ItemList from 'flarum/utils/ItemList';
 import icon from 'flarum/helpers/icon';
-import Stream from 'flarum/utils/Stream';
+import classList from 'flarum/utils/classList';
 
 export default class IconSelectorComponent extends Dropdown {
     static initAttrs(attrs) {
@@ -115,17 +115,20 @@ export default class IconSelectorComponent extends Dropdown {
             /^favicon(-\w+)?$/.test(this.attrs.selection())
                 ? [
                       <img
-                          className={this.attrs.selection() === 'favicon-grey' ? 'social-greyscale-button' : 'social-button'}
-                          style={{ width: '14px', height: '14px' }}
-                          alt="favicon"
+                          className={classList({
+                              'icondropdown-activeIcon': true,
+                              'social-greyscale-button': this.attrs.selection() === 'favicon-grey',
+                              'social-button': !this.attrs.selection() === 'favicon-grey',
+                          })}
+                          alt=""
                           src={this.attrs.favicon()}
                           onerror={() => {
                               this.attrs.favicon('none');
                               this.select(this.icons.social[0]);
                           }}
                       />,
                   ]
-                : icon(this.attrs.selection(), {}),
+                : icon(this.attrs.selection(), { className: 'icondropdown-activeIcon fa-fw' }),
             this.attrs.caretIcon ? icon(this.attrs.caretIcon, { className: 'Button-caret' }) : '',
         ];
     }
@@ -139,7 +142,10 @@ export default class IconSelectorComponent extends Dropdown {
                 <div
                     onclick={() => this.select('favicon')}
                     role="button"
-                    className={`iconpicker-item ${this.attrs.selection() === 'favicon' ? 'iconpicker--highlighted' : ''}`}
+                    className={classList({
+                        'iconpicker-item': true,
+                        'iconpicker-item--highlighted': this.attrs.selection() === 'favicon',
+                    })}
                     title="Favicon"
                 >
                     <img
@@ -157,7 +163,10 @@ export default class IconSelectorComponent extends Dropdown {
                 <div
                     onclick={() => this.select('favicon-grey')}
                     role="button"
-                    className={`iconpicker-item-invt ${this.attrs.selection() === 'favicon-grey' ? 'iconpicker--highlighted' : ''}`}
+                    className={classList({
+                        'iconpicker-item iconpicker-item--invertColors': true,
+                        'iconpicker-item--highlighted': this.attrs.selection() === 'favicon-grey',
+                    })}
                     title="Grey Favicon"
                 >
                     <img
@@ -172,16 +181,15 @@ export default class IconSelectorComponent extends Dropdown {
         }
 
         this.icons.social.forEach((curIcon) => {
-            const highlighted = Stream();
-
-            if (this.attrs.selection() === curIcon) {
-                highlighted('iconpicker--highlighted');
-            }
-
             items.add(
                 curIcon.replace(/ /, '-'),
-                <div onclick={() => this.select(curIcon)} className={`iconpicker-item ${highlighted()}`} role="button" title={`.${curIcon}`}>
-                    {icon(curIcon, { className: 'social-icon' })}
+                <div
+                    onclick={() => this.select(curIcon)}
+                    className={classList({ 'iconpicker-item': true, 'iconpicker-item--highlighted': this.attrs.selection() === curIcon })}
+                    role="button"
+                    title={`.${curIcon}`}
+                >
+                    {icon(curIcon, { className: 'social-icon fa-fw' })}
                 </div>,
                 100
             );

diff --git a/js/src/forum/components/WebsiteInputComponent.js b/js/src/forum/components/WebsiteInputComponent.js
@@ -16,7 +16,7 @@ export default class WebsiteInputComponent extends Component {
             <div className="Form-group form-group-social" id={`socialgroup-${this.button.index()}`}>
                 <input
                     type="text"
-                    className="SocialFormControl SocialTitle"
+                    className="SocialFormControl SocialFormControl-title"
                     placeholder={app.translator.trans('fof-socialprofile.forum.edit.title')}
                     tabIndex={(this.button.index() + 1) * 2 - 1}
                     bidi={this.button.title}
@@ -30,18 +30,18 @@ export default class WebsiteInputComponent extends Component {
 
                 <input
                     type="text"
-                    className="SocialFormControl Socialurl"
+                    className="SocialFormControl SocialFormControl-url"
                     placeholder={app.translator.trans('fof-socialprofile.forum.edit.url')}
                     tabIndex={(this.button.index() + 1) * 2}
                     value={this.button.url()}
                     onchange={withAttr('value', this.onUrlChange.bind(this))}
                 />
 
-                <input type="hidden" className="SocialFormControl SocialIcon" id={`icon${this.button.index()}-icon`} bidi={this.button.icon} />
+                <input type="hidden" className="SocialFormControl SocialFormControl-icon" id={`icon${this.button.index()}-icon`} bidi={this.button.icon} />
 
                 <input
                     type="hidden"
-                    className="SocialFormControl Socialfavicon"
+                    className="SocialFormControl SocialFormControl-favicon"
                     id={`icon${this.button.index()}-favicon`}
                     bidi={this.button.favicon}
                 />

diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -4,22 +4,14 @@ import { extend } from 'flarum/extend';
 import UserCard from 'flarum/components/UserCard';
 import Badge from 'flarum/components/Badge';
 import ItemList from 'flarum/utils/ItemList';
+import classList from 'flarum/utils/classList';
 
 import SocialButtonsModal from './components/SocialButtonsModal';
 import DeleteButtonModal from './components/DeleteButtonModal';
 
 app.initializers.add('fof/socialprofile', () => {
     User.prototype.socialButtons = Model.attribute('socialButtons', (str) => JSON.parse(str || '[]'));
 
-    // extend(UserCard.prototype, 'init', function () {
-    //     $('#app').on('refreshSocialButtons', (e, buttons) => {
-    //         this.buttons = JSON.parse(buttons || '[]');
-    //         this.attrs.user.socialButtons(this.buttons);
-    //         this.attrs.user.freshness = new Date();
-    //         m.redraw();
-    //     });
-    // });
-
     extend(UserCard.prototype, 'infoItems', function (items) {
         this.isSelf = app.session.user === this.attrs.user;
         this.canEdit = app.session.user ? app.session.user.data.attributes.canEdit : false;
@@ -31,23 +23,25 @@ app.initializers.add('fof/socialprofile', () => {
             this.buttons.forEach((button, index) => {
                 if (button.title !== '' && button.icon !== '' && button.url !== '') {
                     let buttonStyle = '';
-                    let buttonClassName = '';
+                    let buttonClassName = classList({
+                        [`social-button ${button.icon}-${index} social-icon-${index}`]: true,
+                        'social-greyscale-button': button.icon === 'favicon-grey',
+                    });
 
                     if (button.icon === 'favicon' || button.icon === 'favicon-grey') {
-                        buttonStyle = `background-image: url("${button.favicon}");background-size: 60%;background-position: 50% 50%;background-repeat: no-repeat;`;
-                        if (button.icon === 'favicon-grey') {
-                            buttonClassName = `${button.icon}-${index} social-button social-greyscale-button`;
-                        } else {
-                            buttonClassName = `${button.icon}-${index} social-button`;
-                        }
-                    } else {
-                        buttonStyle = '';
-                        buttonClassName = `${button.icon}-${index} social-button`;
+                        buttonStyle = `
+                            background-image: url("${button.favicon}");
+                            background-size: 60%;
+                            background-position: center;
+                            background-repeat: no-repeat;
+                        `;
                     }
+
                     buttonList.add(
-                        `${buttonClassName}${this.deleting ? ' social-button--highlightable' : ''}`,
+                        `social-icon-${index}`,
                         Badge.component({
-                            type: `social social-icon-${index}`,
+                            className: classList({ [buttonClassName]: true, 'social-icon--deleting': this.deleting }),
+                            type: `social`,
                             icon: button.icon,
                             label: button.title,
                             style: buttonStyle,