From 4166c932a2c6e4e692622901611165e9d3d013db Mon Sep 17 00:00:00 2001 From: Sean King Date: Tue, 8 Sep 2020 20:15:25 -0600 Subject: [PATCH] Add font icon picker, not yet fixed fatal error --- app/soapbox/common.js | 2 + app/soapbox/features/forms/forkawesome.json | 822 +++++++++++++++++++ app/soapbox/features/forms/index.js | 34 + app/soapbox/features/soapbox_config/index.js | 12 +- app/styles/fonts.scss | 12 +- app/styles/forms.scss | 56 +- package.json | 1 + yarn.lock | 5 + 8 files changed, 933 insertions(+), 11 deletions(-) create mode 100644 app/soapbox/features/forms/forkawesome.json diff --git a/app/soapbox/common.js b/app/soapbox/common.js index 6947fd07c..b0c6f87d8 100644 --- a/app/soapbox/common.js +++ b/app/soapbox/common.js @@ -4,6 +4,8 @@ import Rails from 'rails-ujs'; export function start() { require('fork-awesome/css/fork-awesome.css'); + require('@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css'); + require('@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.material-theme.react.css'); require.context('../images/', true); try { diff --git a/app/soapbox/features/forms/forkawesome.json b/app/soapbox/features/forms/forkawesome.json new file mode 100644 index 000000000..62d95ac6a --- /dev/null +++ b/app/soapbox/features/forms/forkawesome.json @@ -0,0 +1,822 @@ +{ + "Web Application Icons": [ + "fa fa-glass", + "fa fa-music", + "fa fa-search", + "fa fa-envelope-o", + "fa fa-heart", + "fa fa-star", + "fa fa-star-o", + "fa fa-user", + "fa fa-film", + "fa fa-check", + "fa fa-times", + "fa fa-search-plus", + "fa fa-search-minus", + "fa fa-power-off", + "fa fa-signal", + "fa fa-cog", + "fa fa-trash-o", + "fa fa-home", + "fa fa-clock-o", + "fa fa-road", + "fa fa-download", + "fa fa-inbox", + "fa fa-refresh", + "fa fa-lock", + "fa fa-flag", + "fa fa-headphones", + "fa fa-volume-off", + "fa fa-volume-down", + "fa fa-volume-up", + "fa fa-qrcode", + "fa fa-barcode", + "fa fa-tag", + "fa fa-tags", + "fa fa-book", + "fa fa-bookmark", + "fa fa-print", + "fa fa-camera", + "fa fa-video-camera", + "fa fa-picture-o", + "fa fa-pencil", + "fa fa-map-marker", + "fa fa-adjust", + "fa fa-tint", + "fa fa-pencil-square-o", + "fa fa-share-square-o", + "fa fa-check-square-o", + "fa fa-arrows", + "fa fa-plus-circle", + "fa fa-minus-circle", + "fa fa-times-circle", + "fa fa-check-circle", + "fa fa-question-circle", + "fa fa-info-circle", + "fa fa-crosshairs", + "fa fa-times-circle-o", + "fa fa-check-circle-o", + "fa fa-ban", + "fa fa-share", + "fa fa-plus", + "fa fa-minus", + "fa fa-asterisk", + "fa fa-exclamation-circle", + "fa fa-gift", + "fa fa-leaf", + "fa fa-fire", + "fa fa-eye", + "fa fa-eye-slash", + "fa fa-exclamation-triangle", + "fa fa-plane", + "fa fa-calendar", + "fa fa-random", + "fa fa-comment", + "fa fa-magnet", + "fa fa-retweet", + "fa fa-shopping-cart", + "fa fa-folder", + "fa fa-folder-open", + "fa fa-arrows-v", + "fa fa-arrows-h", + "fa fa-bar-chart", + "fa fa-camera-retro", + "fa fa-key", + "fa fa-cogs", + "fa fa-comments", + "fa fa-thumbs-o-up", + "fa fa-thumbs-o-down", + "fa fa-star-half", + "fa fa-heart-o", + "fa fa-sign-out", + "fa fa-thumb-tack", + "fa fa-external-link", + "fa fa-sign-in", + "fa fa-trophy", + "fa fa-upload", + "fa fa-lemon-o", + "fa fa-phone", + "fa fa-square-o", + "fa fa-bookmark-o", + "fa fa-phone-square", + "fa fa-unlock", + "fa fa-credit-card", + "fa fa-rss", + "fa fa-hdd-o", + "fa fa-bullhorn", + "fa fa-bell-o", + "fa fa-certificate", + "fa fa-globe", + "fa fa-globe-e", + "fa fa-globe-w", + "fa fa-wrench", + "fa fa-tasks", + "fa fa-filter", + "fa fa-briefcase", + "fa fa-users", + "fa fa-cloud", + "fa fa-flask", + "fa fa-square", + "fa fa-bars", + "fa fa-magic", + "fa fa-truck", + "fa fa-money", + "fa fa-sort", + "fa fa-sort-desc", + "fa fa-sort-asc", + "fa fa-envelope", + "fa fa-gavel", + "fa fa-tachometer", + "fa fa-comment-o", + "fa fa-comments-o", + "fa fa-bolt", + "fa fa-sitemap", + "fa fa-umbrella", + "fa fa-lightbulb-o", + "fa fa-exchange", + "fa fa-cloud-download", + "fa fa-cloud-upload", + "fa fa-suitcase", + "fa fa-bell", + "fa fa-coffee", + "fa fa-cutlery", + "fa fa-building-o", + "fa fa-fighter-jet", + "fa fa-beer", + "fa fa-desktop", + "fa fa-laptop", + "fa fa-tablet", + "fa fa-mobile", + "fa fa-circle-o", + "fa fa-quote-left", + "fa fa-quote-right", + "fa fa-spinner", + "fa fa-circle", + "fa fa-reply", + "fa fa-folder-o", + "fa fa-folder-open-o", + "fa fa-smile-o", + "fa fa-frown-o", + "fa fa-meh-o", + "fa fa-gamepad", + "fa fa-keyboard-o", + "fa fa-flag-o", + "fa fa-flag-checkered", + "fa fa-terminal", + "fa fa-code", + "fa fa-reply-all", + "fa fa-star-half-o", + "fa fa-location-arrow", + "fa fa-crop", + "fa fa-code-fork", + "fa fa-question", + "fa fa-info", + "fa fa-exclamation", + "fa fa-puzzle-piece", + "fa fa-microphone", + "fa fa-microphone-slash", + "fa fa-shield", + "fa fa-calendar-o", + "fa fa-fire-extinguisher", + "fa fa-rocket", + "fa fa-anchor", + "fa fa-unlock-alt", + "fa fa-bullseye", + "fa fa-ellipsis-h", + "fa fa-ellipsis-v", + "fa fa-rss-square", + "fa fa-ticket", + "fa fa-minus-square", + "fa fa-minus-square-o", + "fa fa-level-up", + "fa fa-level-down", + "fa fa-check-square", + "fa fa-pencil-square", + "fa fa-external-link-square", + "fa fa-share-square", + "fa fa-compass", + "fa fa-caret-square-o-down", + "fa fa-caret-square-o-up", + "fa fa-caret-square-o-right", + "fa fa-sort-alpha-asc", + "fa fa-sort-alpha-desc", + "fa fa-sort-amount-asc", + "fa fa-sort-amount-desc", + "fa fa-sort-numeric-asc", + "fa fa-sort-numeric-desc", + "fa fa-thumbs-up", + "fa fa-thumbs-down", + "fa fa-female", + "fa fa-male", + "fa fa-sun-o", + "fa fa-moon-o", + "fa fa-archive", + "fa fa-bug", + "fa fa-caret-square-o-left", + "fa fa-dot-circle-o", + "fa fa-wheelchair", + "fa fa-plus-square-o", + "fa fa-space-shuttle", + "fa fa-envelope-square", + "fa fa-university", + "fa fa-graduation-cap", + "fa fa-language", + "fa fa-fax", + "fa fa-building", + "fa fa-child", + "fa fa-paw", + "fa fa-spoon", + "fa fa-cube", + "fa fa-cubes", + "fa fa-recycle", + "fa fa-car", + "fa fa-taxi", + "fa fa-tree", + "fa fa-database", + "fa fa-file-pdf-o", + "fa fa-file-word-o", + "fa fa-file-excel-o", + "fa fa-file-powerpoint-o", + "fa fa-file-image-o", + "fa fa-file-archive-o", + "fa fa-file-audio-o", + "fa fa-file-video-o", + "fa fa-file-code-o", + "fa fa-life-ring", + "fa fa-circle-o-notch", + "fa fa-paper-plane", + "fa fa-paper-plane-o", + "fa fa-history", + "fa fa-circle-thin", + "fa fa-sliders", + "fa fa-share-alt", + "fa fa-share-alt-square", + "fa fa-bomb", + "fa fa-futbol-o", + "fa fa-tty", + "fa fa-binoculars", + "fa fa-plug", + "fa fa-newspaper-o", + "fa fa-wifi", + "fa fa-calculator", + "fa fa-bell-slash", + "fa fa-bell-slash-o", + "fa fa-trash", + "fa fa-copyright", + "fa fa-at", + "fa fa-eyedropper", + "fa fa-paint-brush", + "fa fa-birthday-cake", + "fa fa-area-chart", + "fa fa-pie-chart", + "fa fa-line-chart", + "fa fa-toggle-off", + "fa fa-toggle-on", + "fa fa-bicycle", + "fa fa-bus", + "fa fa-cc", + "fa fa-cart-plus", + "fa fa-cart-arrow-down", + "fa fa-diamond", + "fa fa-ship", + "fa fa-user-secret", + "fa fa-motorcycle", + "fa fa-street-view", + "fa fa-heartbeat", + "fa fa-server", + "fa fa-user-plus", + "fa fa-user-times", + "fa fa-bed", + "fa fa-battery-full", + "fa fa-battery-three-quarters", + "fa fa-battery-half", + "fa fa-battery-quarter", + "fa fa-battery-empty", + "fa fa-mouse-pointer", + "fa fa-i-cursor", + "fa fa-object-group", + "fa fa-object-ungroup", + "fa fa-sticky-note", + "fa fa-sticky-note-o", + "fa fa-clone", + "fa fa-balance-scale", + "fa fa-hourglass-o", + "fa fa-hourglass-start", + "fa fa-hourglass-half", + "fa fa-hourglass-end", + "fa fa-hourglass", + "fa fa-hand-rock-o", + "fa fa-hand-paper-o", + "fa fa-hand-scissors-o", + "fa fa-hand-lizard-o", + "fa fa-hand-spock-o", + "fa fa-hand-pointer-o", + "fa fa-hand-peace-o", + "fa fa-trademark", + "fa fa-registered", + "fa fa-creative-commons", + "fa fa-television", + "fa fa-calendar-plus-o", + "fa fa-calendar-minus-o", + "fa fa-calendar-times-o", + "fa fa-calendar-check-o", + "fa fa-industry", + "fa fa-map-pin", + "fa fa-map-signs", + "fa fa-map-o", + "fa fa-map", + "fa fa-commenting", + "fa fa-commenting-o", + "fa fa-shopping-bag", + "fa fa-shopping-basket", + "fa fa-hashtag", + "fa fa-bluetooth", + "fa fa-bluetooth-b", + "fa fa-percent", + "fa fa-universal-access", + "fa fa-wheelchair-alt", + "fa fa-question-circle-o", + "fa fa-blind", + "fa fa-audio-description", + "fa fa-volume-control-phone", + "fa fa-braille", + "fa fa-assistive-listening-systems", + "fa fa-american-sign-language-interpreting", + "fa fa-deaf", + "fa fa-sign-language", + "fa fa-low-vision", + "fa fa-handshake-o", + "fa fa-envelope-open", + "fa fa-envelope-open-o", + "fa fa-address-book", + "fa fa-address-book-o", + "fa fa-address-card", + "fa fa-address-card-o", + "fa fa-user-circle", + "fa fa-user-circle-o", + "fa fa-user-o", + "fa fa-id-badge", + "fa fa-id-card", + "fa fa-id-card-o", + "fa fa-thermometer-full", + "fa fa-thermometer-three-quarters", + "fa fa-thermometer-half", + "fa fa-thermometer-quarter", + "fa fa-thermometer-empty", + "fa fa-shower", + "fa fa-bath", + "fa fa-podcast", + "fa fa-window-maximize", + "fa fa-window-minimize", + "fa fa-window-restore", + "fa fa-window-close", + "fa fa-window-close-o", + "fa fa-microchip", + "fa fa-snowflake-o", + "fa fa-mastodon", + "fa fa-mastodon-alt", + "fa fa-peertube", + "fa fa-diaspora", + "fa fa-friendica", + "fa fa-gnu-social", + "fa fa-liberapay-square", + "fa fa-liberapay", + "fa fa-scuttlebutt", + "fa fa-hubzilla", + "fa fa-social-home", + "fa fa-artstation", + "fa fa-discord", + "fa fa-discord-alt", + "fa fa-key-modern", + "fa fa-file-epub", + "fa fa-spell-check", + "fa fa-moon", + "fa fa-sun", + "fa fa-biometric", + "fa fa-volume-mute", + "fa fa-bell-ringing", + "fa fa-bell-ringing-o", + "fa fa-bunny", + "fa fa-cc-by", + "fa fa-cc-cc", + "fa fa-cc-nc-eu", + "fa fa-cc-nc-jp", + "fa fa-cc-nc", + "fa fa-cc-nd", + "fa fa-cc-pd", + "fa fa-cc-remix", + "fa fa-cc-sa", + "fa fa-cc-share", + "fa fa-cc-zero", + "fa fa-email-bulk", + "fa fa-email-bulk-o", + "fa fa-skate" + ], + "Text Editor Icons": [ + "fa fa-th-large", + "fa fa-th", + "fa fa-th-list", + "fa fa-file-o", + "fa fa-repeat", + "fa fa-list-alt", + "fa fa-font", + "fa fa-bold", + "fa fa-italic", + "fa fa-text-height", + "fa fa-text-width", + "fa fa-align-left", + "fa fa-align-center", + "fa fa-align-right", + "fa fa-align-justify", + "fa fa-list", + "fa fa-outdent", + "fa fa-indent", + "fa fa-link", + "fa fa-scissors", + "fa fa-files-o", + "fa fa-paperclip", + "fa fa-floppy-o", + "fa fa-list-ul", + "fa fa-list-ol", + "fa fa-strikethrough", + "fa fa-underline", + "fa fa-table", + "fa fa-columns", + "fa fa-undo", + "fa fa-clipboard", + "fa fa-file-text-o", + "fa fa-chain-broken", + "fa fa-superscript", + "fa fa-subscript", + "fa fa-eraser", + "fa fa-file", + "fa fa-file-text", + "fa fa-header", + "fa fa-paragraph" + ], + "Directional Icons": [ + "fa fa-arrow-circle-o-down", + "fa fa-arrow-circle-o-up", + "fa fa-chevron-left", + "fa fa-chevron-right", + "fa fa-arrow-left", + "fa fa-arrow-right", + "fa fa-arrow-up", + "fa fa-arrow-down", + "fa fa-chevron-up", + "fa fa-chevron-down", + "fa fa-hand-o-right", + "fa fa-hand-o-left", + "fa fa-hand-o-up", + "fa fa-hand-o-down", + "fa fa-arrow-circle-left", + "fa fa-arrow-circle-right", + "fa fa-arrow-circle-up", + "fa fa-arrow-circle-down", + "fa fa-caret-down", + "fa fa-caret-up", + "fa fa-caret-left", + "fa fa-caret-right", + "fa fa-angle-double-left", + "fa fa-angle-double-right", + "fa fa-angle-double-up", + "fa fa-angle-double-down", + "fa fa-angle-left", + "fa fa-angle-right", + "fa fa-angle-up", + "fa fa-angle-down", + "fa fa-chevron-circle-left", + "fa fa-chevron-circle-right", + "fa fa-chevron-circle-up", + "fa fa-chevron-circle-down", + "fa fa-long-arrow-down", + "fa fa-long-arrow-up", + "fa fa-long-arrow-left", + "fa fa-long-arrow-right", + "fa fa-arrow-circle-o-right", + "fa fa-arrow-circle-o-left" + ], + "Video Player Icons": [ + "fa fa-play-circle-o", + "fa fa-step-backward", + "fa fa-fast-backward", + "fa fa-backward", + "fa fa-play", + "fa fa-pause", + "fa fa-stop", + "fa fa-forward", + "fa fa-fast-forward", + "fa fa-step-forward", + "fa fa-eject", + "fa fa-expand", + "fa fa-compress", + "fa fa-arrows-alt", + "fa fa-play-circle", + "fa fa-pause-circle", + "fa fa-pause-circle-o", + "fa fa-stop-circle", + "fa fa-stop-circle-o" + ], + "Brand Icons": [ + "fa fa-twitter-square", + "fa fa-facebook-square", + "fa fa-linkedin-square", + "fa fa-github-square", + "fa fa-twitter", + "fa fa-facebook", + "fa fa-github", + "fa fa-pinterest", + "fa fa-pinterest-square", + "fa fa-google-plus-square", + "fa fa-google-plus", + "fa fa-linkedin", + "fa fa-github-alt", + "fa fa-maxcdn", + "fa fa-html5", + "fa fa-css3", + "fa fa-youtube-square", + "fa fa-youtube", + "fa fa-xing", + "fa fa-xing-square", + "fa fa-youtube-play", + "fa fa-dropbox", + "fa fa-stack-overflow", + "fa fa-instagram", + "fa fa-flickr", + "fa fa-adn", + "fa fa-bitbucket", + "fa fa-bitbucket-square", + "fa fa-tumblr", + "fa fa-tumblr-square", + "fa fa-apple", + "fa fa-windows", + "fa fa-android", + "fa fa-linux", + "fa fa-dribbble", + "fa fa-skype", + "fa fa-foursquare", + "fa fa-trello", + "fa fa-gratipay", + "fa fa-vk", + "fa fa-weibo", + "fa fa-renren", + "fa fa-pagelines", + "fa fa-stack-exchange", + "fa fa-vimeo-square", + "fa fa-slack", + "fa fa-wordpress", + "fa fa-openid", + "fa fa-yahoo", + "fa fa-google", + "fa fa-reddit", + "fa fa-reddit-square", + "fa fa-stumbleupon-circle", + "fa fa-stumbleupon", + "fa fa-delicious", + "fa fa-digg", + "fa fa-drupal", + "fa fa-joomla", + "fa fa-behance", + "fa fa-behance-square", + "fa fa-steam", + "fa fa-steam-square", + "fa fa-spotify", + "fa fa-deviantart", + "fa fa-soundcloud", + "fa fa-vine", + "fa fa-codepen", + "fa fa-jsfiddle", + "fa fa-rebel", + "fa fa-empire", + "fa fa-git-square", + "fa fa-git", + "fa fa-hacker-news", + "fa fa-tencent-weibo", + "fa fa-qq", + "fa fa-weixin", + "fa fa-slideshare", + "fa fa-twitch", + "fa fa-yelp", + "fa fa-paypal", + "fa fa-google-wallet", + "fa fa-cc-visa", + "fa fa-cc-mastercard", + "fa fa-cc-discover", + "fa fa-cc-amex", + "fa fa-cc-paypal", + "fa fa-cc-stripe", + "fa fa-lastfm", + "fa fa-lastfm-square", + "fa fa-ioxhost", + "fa fa-angellist", + "fa fa-meanpath", + "fa fa-buysellads", + "fa fa-connectdevelop", + "fa fa-dashcube", + "fa fa-forumbee", + "fa fa-leanpub", + "fa fa-sellsy", + "fa fa-shirtsinbulk", + "fa fa-simplybuilt", + "fa fa-skyatlas", + "fa fa-facebook-official", + "fa fa-pinterest-p", + "fa fa-whatsapp", + "fa fa-medium", + "fa fa-medium-square", + "fa fa-y-combinator", + "fa fa-optin-monster", + "fa fa-opencart", + "fa fa-expeditedssl", + "fa fa-cc-jcb", + "fa fa-cc-diners-club", + "fa fa-tripadvisor", + "fa fa-odnoklassniki", + "fa fa-odnoklassniki-square", + "fa fa-get-pocket", + "fa fa-wikipedia-w", + "fa fa-safari", + "fa fa-chrome", + "fa fa-firefox", + "fa fa-opera", + "fa fa-internet-explorer", + "fa fa-contao", + "fa fa-500px", + "fa fa-amazon", + "fa fa-houzz", + "fa fa-vimeo", + "fa fa-black-tie", + "fa fa-fonticons", + "fa fa-reddit-alien", + "fa fa-edge", + "fa fa-codiepie", + "fa fa-modx", + "fa fa-fort-awesome", + "fa fa-usb", + "fa fa-product-hunt", + "fa fa-mixcloud", + "fa fa-scribd", + "fa fa-gitlab", + "fa fa-wpbeginner", + "fa fa-wpforms", + "fa fa-envira", + "fa fa-glide", + "fa fa-glide-g", + "fa fa-viadeo", + "fa fa-viadeo-square", + "fa fa-snapchat", + "fa fa-snapchat-ghost", + "fa fa-snapchat-square", + "fa fa-first-order", + "fa fa-yoast", + "fa fa-themeisle", + "fa fa-google-plus-official", + "fa fa-font-awesome", + "fa fa-linode", + "fa fa-quora", + "fa fa-free-code-camp", + "fa fa-telegram", + "fa fa-bandcamp", + "fa fa-grav", + "fa fa-etsy", + "fa fa-imdb", + "fa fa-ravelry", + "fa fa-eercast", + "fa fa-superpowers", + "fa fa-wpexplorer", + "fa fa-meetup", + "fa fa-fork-awesome", + "fa fa-snowdrift", + "fa fa-activitypub", + "fa fa-keybase", + "fa fa-shaarli", + "fa fa-shaarli-o", + "fa fa-xmpp", + "fa fa-archive-org", + "fa fa-freedombox", + "fa fa-facebook-messenger", + "fa fa-debian", + "fa fa-mastodon-square", + "fa fa-react", + "fa fa-dogmazic", + "fa fa-zotero", + "fa fa-nodejs", + "fa fa-nextcloud", + "fa fa-nextcloud-square", + "fa fa-hackaday", + "fa fa-laravel", + "fa fa-gnupg", + "fa fa-php", + "fa fa-ffmpeg", + "fa fa-joplin", + "fa fa-syncthing", + "fa fa-inkscape", + "fa fa-matrix-org", + "fa fa-pixelfed", + "fa fa-bootstrap", + "fa fa-dev-to", + "fa fa-hashnode", + "fa fa-jirafeau", + "fa fa-emby", + "fa fa-wikidata", + "fa fa-gimp", + "fa fa-c", + "fa fa-digitalocean", + "fa fa-att", + "fa fa-gitea", + "fa fa-python", + "fa fa-archlinux", + "fa fa-pleroma", + "fa fa-unsplash", + "fa fa-hackster", + "fa fa-f-droid", + "fa fa-wire", + "fa fa-tor-onion", + "fa fa-hal", + "fa fa-jupyter", + "fa fa-julia", + "fa fa-classicpress", + "fa fa-classicpress-circle", + "fa fa-open-collective", + "fa fa-orcid", + "fa fa-researchgate", + "fa fa-funkwhale", + "fa fa-boardgamegeek", + "fa fa-buymeacoffee", + "fa fa-conway-glider", + "fa fa-csharp", + "fa fa-gnu", + "fa fa-google-play", + "fa fa-heroku", + "fa fa-home-assistant", + "fa fa-java", + "fa fa-mariadb", + "fa fa-markdown", + "fa fa-mysql", + "fa fa-nordcast", + "fa fa-plume", + "fa fa-postgresql", + "fa fa-sass-alt", + "fa fa-sass", + "fa fa-sketchfab", + "fa fa-tex", + "fa fa-textpattern", + "fa fa-unity", + "fa fa-signalapp", + "fa fa-askfm", + "fa fa-blockstack" + ], + "Medical Icons": [ + "fa fa-user-md", + "fa fa-stethoscope", + "fa fa-hospital-o", + "fa fa-ambulance", + "fa fa-medkit", + "fa fa-h-square", + "fa fa-plus-square" + ], + "Currency Icons": [ + "fa fa-eur", + "fa fa-gbp", + "fa fa-usd", + "fa fa-inr", + "fa fa-jpy", + "fa fa-rub", + "fa fa-krw", + "fa fa-try", + "fa fa-ils", + "fa fa-viacoin", + "fa fa-gg", + "fa fa-gg-circle" + ], + "Payment Icons": [ + "fa fa-btc", + "fa fa-credit-card-alt", + "fa fa-patreon", + "fa fa-ethereum", + "fa fa-tipeee" + ], + "Gender Icons": [ + "fa fa-venus", + "fa fa-mars", + "fa fa-mercury", + "fa fa-transgender", + "fa fa-transgender-alt", + "fa fa-venus-double", + "fa fa-mars-double", + "fa fa-venus-mars", + "fa fa-mars-stroke", + "fa fa-mars-stroke-v", + "fa fa-mars-stroke-h", + "fa fa-neuter", + "fa fa-genderless" + ], + "Transportation Icons": [ + "fa fa-train", + "fa fa-subway" + ], + "Soapbox Icons": [ + "fa fa-fediverse", + "fa fa-spinster" + ] +} diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js index e6e296818..9a8ead991 100644 --- a/app/soapbox/features/forms/index.js +++ b/app/soapbox/features/forms/index.js @@ -7,6 +7,8 @@ import { SketchPicker } from 'react-color'; import Overlay from 'react-overlays/lib/Overlay'; import { isMobile } from '../../is_mobile'; import detectPassiveEvents from 'detect-passive-events'; +import FontIconPicker from '@fonticonpicker/react-fonticonpicker'; +import forkAwesomeIcons from './forkawesome.json'; const FormPropTypes = { label: PropTypes.oneOfType([ @@ -192,6 +194,38 @@ export class RadioGroup extends ImmutablePureComponent { } +export class IconPicker extends ImmutablePureComponent { + + static propTypes = { + icons: PropTypes.object, + label: FormPropTypes.label, + placeholder: PropTypes.string, + value: PropTypes.string, + onChange: PropTypes.func.isRequired, + } + + static defaultProps = { + icons: forkAwesomeIcons, + placeholder: 'Select icon', + }; + + render() { + const { icons, onChange, value, label, placeholder } = this.props; + + return ( +
+
+ {label && ()} +
+ +
+
+
+ ); + } + +} + export class ColorPicker extends React.PureComponent { static propTypes = { diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js index 986e81091..77f8b7ef1 100644 --- a/app/soapbox/features/soapbox_config/index.js +++ b/app/soapbox/features/soapbox_config/index.js @@ -14,6 +14,7 @@ import { SimpleTextarea, ColorWithPicker, FileChooserLogo, + IconPicker, } from 'soapbox/features/forms'; import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; import { updateAdminConfig } from 'soapbox/actions/admin'; @@ -58,6 +59,7 @@ class SoapboxConfig extends ImmutablePureComponent { soapbox: this.props.soapbox, rawJSON: JSON.stringify(this.props.soapbox, null, 2), jsonValid: true, + iconValue: 'fa fa-pleroma', } setConfig = (path, value) => { @@ -141,6 +143,10 @@ class SoapboxConfig extends ImmutablePureComponent { ); }; + handleIconChange = (value) => { + this.setState({ iconValue: value }); + } + handleHomeFooterItemChange = (index, key, field) => { return this.handleItemChange( ['navlinks', 'homeFooter', index], key, field, templates.footerItem @@ -242,7 +248,7 @@ class SoapboxConfig extends ImmutablePureComponent {
-
+
@@ -253,11 +259,11 @@ class SoapboxConfig extends ImmutablePureComponent { { soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
- .fa-times-circle { position: absolute; right: 7px; cursor: pointer; diff --git a/package.json b/package.json index e79c4356c..cbba4ba4d 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.3.4", "@clusterws/cws": "^0.16.0", + "@fonticonpicker/react-fonticonpicker": "^1.2.0", "array-includes": "^3.0.3", "autoprefixer": "^9.5.1", "axios": "^0.19.0", diff --git a/yarn.lock b/yarn.lock index 561257434..00d58166a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1187,6 +1187,11 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc" integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw== +"@fonticonpicker/react-fonticonpicker@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@fonticonpicker/react-fonticonpicker/-/react-fonticonpicker-1.2.0.tgz#cbcb898f3d788ef50d7090fe623afe2e8e5eb1d7" + integrity sha512-I7U4VNIpwJHnOaWq1v2MSuaUTxPiur/MYG4B1hr+FWI1O7k+tTym1ysdAyfp7YbEdF4Q8TYoY5Q2hbTmhQeTSQ== + "@formatjs/intl-displaynames@^2.2.4": version "2.2.4" resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-2.2.4.tgz#c85d59b0d157470347fdfe86fb8fba7da998ebe1"