Clean up CSS and move IconPicker to the Soapbox Config js

icon_picker_admin_config
Sean King 2020-10-14 08:46:45 -06:00
rodzic 9ebf166739
commit 8385e30df1
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 510C52BACD6E7257
7 zmienionych plików z 13113 dodań i 104 usunięć

Wyświetl plik

@ -3,8 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { v4 as uuidv4 } from 'uuid';
import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
import forkAwesomeIcons from './forkawesome.json';
export const FormPropTypes = {
label: PropTypes.oneOfType([
@ -188,38 +186,6 @@ 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 (
<div className='input with_label popup'>
<div className='label_input__icon_picker'>
{label && (<label>{label}</label>)}
<div className='label_input__wrapper'>
<FontIconPicker icons={icons} onChange={onChange} value={value !== '' ? 'fa fa-' + value : value} noSelectedPlaceholder={placeholder} />
</div>
</div>
</div>
);
}
}
export class RadioItem extends ImmutablePureComponent {
static propTypes = {

Wyświetl plik

@ -11,7 +11,6 @@ import {
TextInput,
SimpleTextarea,
FileChooserLogo,
IconPicker,
FormPropTypes,
} from 'soapbox/features/forms';
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
@ -27,6 +26,8 @@ import Accordion from '../ui/components/accordion';
import SitePreview from './components/site_preview';
import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
import { defaultSettings } from 'soapbox/actions/settings';
import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
import forkAwesomeIcons from './forkawesome.json';
const messages = defineMessages({
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@ -141,13 +142,13 @@ class SoapboxConfig extends ImmutablePureComponent {
path, (e) =>
template
.merge(field)
.set(key, getValue(e))
.set(key, getValue(e)),
);
};
handlePromoItemChange = (index, key, field, getValue) => {
return this.handleItemChange(
['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue
['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
);
};
@ -235,7 +236,7 @@ class SoapboxConfig extends ImmutablePureComponent {
/>
</FieldsGroup>
<FieldsGroup>
<div className='input with_block_label'>
<div className='input with_block_label popup'>
<label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
@ -428,3 +429,35 @@ class ColorWithPicker 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 (
<div className='input with_label popup'>
<div className='label_input__icon_picker'>
{label && (<label>{label}</label>)}
<div className='label_input__wrapper'>
<FontIconPicker icons={icons} onChange={onChange} value={value !== '' ? 'fa fa-' + value : value} noSelectedPlaceholder={placeholder} />
</div>
</div>
</div>
);
}
}

Wyświetl plik

@ -514,11 +514,6 @@ code {
&__icon_picker {
font-size: 14px;
label {
display: block;
margin-bottom: 8px;
}
.rfipbtn {
display: inline-flex;
line-height: 19px;
@ -560,7 +555,8 @@ code {
flex: 0;
}
&--default:active, &--default:focus {
&--default:active,
&--default:focus {
box-shadow: none;
}

Wyświetl plik

@ -114,6 +114,7 @@
"react-swipeable-views": "^0.13.0",
"react-textarea-autosize": "^8.0.0",
"react-toggle": "^4.0.1",
"react-transition-group": "^2.3.0",
"redux": "^4.0.5",
"redux-immutable": "^4.0.0",
"redux-thunk": "^2.2.0",

13057
yarn-error.log 100644

Plik diff jest za duży Load Diff

Wyświetl plik

@ -1329,69 +1329,10 @@
exec-sh "^0.3.2"
minimist "^1.2.0"
<<<<<<< HEAD
"@emotion/babel-utils@^0.6.4":
version "0.6.10"
resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.10.tgz#83dbf3dfa933fae9fc566e54fbb45f14674c6ccc"
integrity sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==
dependencies:
"@emotion/hash" "^0.6.6"
"@emotion/memoize" "^0.6.6"
"@emotion/serialize" "^0.9.1"
convert-source-map "^1.5.1"
find-root "^1.1.0"
source-map "^0.7.2"
"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
version "0.6.6"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
version "0.6.6"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
"@emotion/serialize@^0.9.1":
version "0.9.1"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
integrity sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==
dependencies:
"@emotion/hash" "^0.6.6"
"@emotion/memoize" "^0.6.6"
"@emotion/unitless" "^0.6.7"
"@emotion/utils" "^0.8.2"
"@emotion/stylis@^0.7.0":
version "0.7.1"
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
version "0.6.7"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
"@emotion/utils@^0.8.2":
version "0.8.2"
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"
integrity sha512-/pRjDRcWub+JZ1B/oPHUhYdukyXoV28cyTMtSPNwEwxF1KIBz44X+EUaZuens9nM8DJtD3GvR9SnlicdT+tb9Q==
=======
"@eslint/eslintrc@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085"
integrity sha512-4YVwPkANLeNtRjMekzux1ci8hIaH5eGKktGqR0d3LWsKNn5B2X/1Z6Trxy7jQXl9EBGE6Yj02O+t09FMeRllaA==
>>>>>>> 9b6728ad1e21207410597f0993d68a5fdd9d5757
dependencies:
ajv "^6.12.4"
debug "^4.1.1"
@ -1404,6 +1345,11 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
"@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/ecma402-abstract@^1.2.3":
version "1.2.3"
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.3.tgz#ca94911dd8e9c89eeaabba0f00e2f692979fc27b"
@ -4396,7 +4342,7 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"
dom-helpers@^3.2.1, dom-helpers@^3.3.1:
dom-helpers@^3.2.1, dom-helpers@^3.3.1, dom-helpers@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
@ -10128,6 +10074,16 @@ react-transition-group@^2.2.1:
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
react-transition-group@^2.3.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
dependencies:
dom-helpers "^3.4.0"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
react@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"