bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added brandcolor tooltip on brand color button hover

Browse source 
Component renders well from virgin use
State updates well
Still breaks on Save
This commit is contained in:
Curtis ROck 2020-08-13 22:25:06 -05:00
parent 8b2c7b344b
commit b127ffa158
2 changed files with 32 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
app/soapbox/features/configuration/index.js
View file

@ -17,7 +17,7 @@ import {
import StillImage from 'soapbox/components/still_image'; import StillImage from 'soapbox/components/still_image';
import { import {
Map as ImmutableMap, Map as ImmutableMap,
// List as ImmutableList, List as ImmutableList,
getIn, getIn,
} from 'immutable'; } from 'immutable';
import { postSoapbox } from 'soapbox/actions/soapbox'; import { postSoapbox } from 'soapbox/actions/soapbox';
@ -34,7 +34,6 @@ const messages = defineMessages({
}); });
const mapStateToProps = state => { const mapStateToProps = state => {
// const soapbox = state.get('soapbox');
return { return {
soapbox: state.get('soapbox'), soapbox: state.get('soapbox'),
}; };
@ -54,76 +53,30 @@ class ConfigSoapbox extends ImmutablePureComponent {
isLoading: false, isLoading: false,
} }
// constructor(props) { constructor(props) {
// super(props); super(props);
// const initialState = props.soapbox.withMutations(map => { if (!this.state.promoPanelItems) {
// }); this.state.promoPanelItems = ImmutableList([
// this.state = ImmutableMap(props.soapbox); ImmutableMap({
// this.state = ImmutableMap(props.soapbox); icon: '',
// console.log(JSON.stringify(this.state, null, 2)); text: '',
// if (!this.state.logo) { url: '',
// this.state.concat({ logo: '' }); }),
// } ]);
// if (!this.state.banner) { };
// this.state.concat({ banner: '' }); if (!this.state.homeFooterItems) {
// } this.state.homeFooterItems = ImmutableList([
// if (getIn(this.state, ['defaultSettings', 'autoPlayGif'], 'notSet') === 'notSet') { ImmutableMap({
// this.state.concat({ defaultSettings: { autoPlayGif: false } }); title: '',
// }; url: '',
// if (getIn(this.state, ['extensions', 'patron'], 'notSet') === 'notSet') { }),
// this.state.concat({ extensions: { patron: false } }); ]);
// // this.state.extensions.patron = false; };
// }; if (!this.state.customCssItems) {
// if (getIn(this.state, ['promoPanel', 'items', 'icon'], 'notSet') === 'notSet') { this.state.customCssItems = ImmutableList(['']);
// this.state = { };
// promoPanel: { this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this);
// items: [ }
// {
// icon: '',
// text: '',
// url: '',
// },
// ],
// },
// };
// this.state.promoPanel.items = ImmutableList([
// ImmutableMap({
// icon: '',
// text: '',
// url: '',
// }),
// ]);
// };
// console.log(JSON.stringify(this.state, null, 2));
// if (!this.state.promoPanel.items) {
// this.state.promoPanel.items = ImmutableList([
// ImmutableMap({
// icon: '',
// text: '',
// url: '',
// }),
// ]);
// };
// if (!this.state.navlinks.homeFooter) {
// this.state.navlinks.homeFooter = ImmutableList([
// ImmutableMap({
// title: '',
// url: '',
// }),
// ]);
// };
// if (!this.state.customCssItems) {
// this.state.customCssItems = ImmutableList([' ']);
// };
// this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this);
// this.handleAddPromoPanelItem = this.handleAddPromoPanelItem.bind(this);
// this.handleAddHomeFooterItem = this.handleAddHomeFooterItem.bind(this);
// this.handleAddCssItem = this.handleAddCssItem.bind(this);
// this.handleExtensionsCheckboxChange = this.handleExtensionsCheckboxChange.bind(this);
// this.handleDefaultSettingsCheckboxChange = this.handleDefaultSettingsCheckboxChange.bind(this);
// this.handleBrandColorChange = this.handleBrandColorChange.bind(this);
// this.getParams = this.getParams.bind(this);
// }
getParams = () => { getParams = () => {
const { state } = this; const { state } = this;
@ -174,7 +127,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
customCssItems.forEach((f) => customCssItems.forEach((f) =>
obj.configs[0].value[0].tuple[1].customCss.push(f) obj.configs[0].value[0].tuple[1].customCss.push(f)
); );
console.log(JSON.stringify(obj, null, 2)); // console.log(JSON.stringify(obj, null, 2));
return obj; return obj;
} }
@ -190,38 +143,20 @@ class ConfigSoapbox extends ImmutablePureComponent {
} }
handlePatronCheckboxChange = e => { handlePatronCheckboxChange = e => {
// var extensions = { ...this.state.extensions }; this.setState({ patron: !this.state.patron });
// if (e.target.name === 'patron') {
// extensions.patron = e.target.value;
// }
var isChecked = (e.target.value === 'true');
this.setState({ patron: isChecked });
// this.setState({
// extensions: this.state.setIn(['extensions', e.target.name], e.target.value),
// });
} }
handleAutoPlayGifCheckboxChange = e => { handleAutoPlayGifCheckboxChange = e => {
// var defaultSettings = { ...this.state.defaultSettings }; this.setState({ autoPlayGif: !this.state.autoPlayGif });
// if (e.target.name === 'autoPlayGif') {
// defaultSettings.autoPlayGif = e.target.value;
// }
var isChecked = (e.target.value === 'true');
this.setState({ autoPlayGif: isChecked });
// this.setState({
// defaultSettings: this.state.setIn(['defaultSettings', '[e.target.name]'], e.target.value),
// });
} }
handleBrandColorChange = e => { handleBrandColorChange = e => {
this.setState({ this.setState({
brandColor: e.hex, brandColor: e.hex,
}); });
// this.state.setIn(['brandColor'], e.hex);
} }
handleTextChange = e => { handleTextChange = e => {
// this.state.soapbox.setIn(['{e.target.name}'], e.target.value);
this.setState({ this.setState({
[e.target.name]: e.target.value, [e.target.name]: e.target.value,
}); });
@ -229,16 +164,14 @@ class ConfigSoapbox extends ImmutablePureComponent {
handlePromoItemsChange = (i, key) => { handlePromoItemsChange = (i, key) => {
return (e) => { return (e) => {
// this.state.soapbox.promoItems.setIn([i, key], e.target.value);
this.setState({ this.setState({
promoPanelitems: this.state.promoPanelItems.setIn([i, key], e.target.value), promoPanelItems: this.state.promoPanelItems.setIn([i, key], e.target.value),
}); });
}; };
} }
handleHomeFooterItemsChange = (i, key) => { handleHomeFooterItemsChange = (i, key) => {
return (e) => { return (e) => {
// this.state.soapbox.homeFooterItems.setIn([i, key], e.target.value);
this.setState({ this.setState({
homeFooterItems: this.state.homeFooterItems.setIn([i, key], e.target.value), homeFooterItems: this.state.homeFooterItems.setIn([i, key], e.target.value),
}); });
@ -247,7 +180,6 @@ class ConfigSoapbox extends ImmutablePureComponent {
handleCustomCSSChange = i => { handleCustomCSSChange = i => {
return (e) => { return (e) => {
// this.state.soapbox.customCssItems.setIn([i], e.target.value);
this.setState({ this.setState({
customCssItems: this.state.customCssItems.setIn([i], e.target.value), customCssItems: this.state.customCssItems.setIn([i], e.target.value),
}); });
@ -258,8 +190,6 @@ class ConfigSoapbox extends ImmutablePureComponent {
const { name } = e.target; const { name } = e.target;
const [file] = e.target.files || []; const [file] = e.target.files || [];
const url = file ? URL.createObjectURL(file) : this.state[name]; const url = file ? URL.createObjectURL(file) : this.state[name];
// this.state.soapbox.setIn([name], url);
// this.state.soapbox.setIn([`${name}_file`], file);
this.setState({ this.setState({
[name]: url, [name]: url,
@ -302,15 +232,12 @@ class ConfigSoapbox extends ImmutablePureComponent {
const logo = (this.state.logo ? this.state.logo : getIn(this.props.soapbox, ['logo'], '')); const logo = (this.state.logo ? this.state.logo : getIn(this.props.soapbox, ['logo'], ''));
const banner = (this.state.banner ? this.state.banner : getIn(this.props.soapbox, ['banner'], '')); const banner = (this.state.banner ? this.state.banner : getIn(this.props.soapbox, ['banner'], ''));
const brandColor = (this.state.brandColor ? this.state.brandColor : getIn(this.props.soapbox, ['brandColor'], '')); const brandColor = (this.state.brandColor ? this.state.brandColor : getIn(this.props.soapbox, ['brandColor'], ''));
const patron = (this.state.patron ? this.state.patron : getIn(this.props.soapbox, ['extensions'], ['patron'], false)); const patron = (this.state.patron ? this.state.patron : getIn(this.props.soapbox, ['extensions', 'patron'], false));
const autoPlayGif = (this.state.autoPlayGif ? this.state.autoPlayGif : getIn(this.props.soapbox, ['defaultSettings'], ['autoPlayGif'], false)); const autoPlayGif = (this.state.autoPlayGif ? this.state.autoPlayGif : getIn(this.props.soapbox, ['defaultSettings', 'autoPlayGif'], false));
const promoPanelItems = (this.state.promoPanelItems ? this.state.promoPanelItems : getIn(this.props.soapbox, ['promoPanel'], ['items'], [])); const promoPanelItems = (this.state.promoPanelItems ? this.state.promoPanelItems : getIn(this.props.soapbox, ['promoPanel'], ['items'], []));
const homeFooterItems = (this.state.homeFooterItems ? this.state.homeFooterItems : getIn(this.props.soapbox, ['navlinks'], ['homeFooter'], [])); const homeFooterItems = (this.state.homeFooterItems ? this.state.homeFooterItems : getIn(this.props.soapbox, ['navlinks'], ['homeFooter'], []));
const customCssItems = (this.state.customCssItems ? this.state.customCssItems : getIn(this.props.soapbox, ['customCss'], [])); const customCssItems = (this.state.customCssItems ? this.state.customCssItems : getIn(this.props.soapbox, ['customCss'], []));
const copyright = (this.state.copyright ? this.state.copyright : getIn(this.props.soapbox, ['copyright'], '')); const copyright = (this.state.copyright ? this.state.copyright : getIn(this.props.soapbox, ['copyright'], ''));
console.log(promoPanelItems);
console.log(homeFooterItems);
console.log(customCssItems);
return ( return (
<Column icon='shield' heading={intl.formatMessage(messages.heading)} backBtnSlim> <Column icon='shield' heading={intl.formatMessage(messages.heading)} backBtnSlim>

2
app/soapbox/features/forms/index.js
View file

@ -274,7 +274,7 @@ export class ColorWithPicker extends ImmutablePureComponent {
return ( return (
<div className='label_input__color'> <div className='label_input__color'>
<label>{label}</label> <label>{label}</label>
<div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} value={value} onClick={this.onToggle} /> <div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} title={value} value={value} onClick={this.onToggle} />
<Overlay show={active} placement={placement} target={this}> <Overlay show={active} placement={placement} target={this}>
<ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} /> <ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} />
</Overlay> </Overlay>