mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge branch 'site-preview' into 'develop' 

SoapboxConfig: site preview

See merge request soapbox-pub/soapbox-fe!286
chats_delete_account
Alex Gleason 2020-10-02 00:58:52 +00:00
rodzic 58d5b1940e b99bb7bd4b
commit a7ab082bc1
12 zmienionych plików z 267 dodań i 221 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
app/soapbox/actions/settings.js
Wyświetl plik

@ -9,7 +9,7 @@ export const SETTING_SAVE = 'SETTING_SAVE';
export const FE_NAME = 'soapbox_fe';
const defaultSettings = ImmutableMap({
export const defaultSettings = ImmutableMap({
onboarded: false,
skinTone: 1,

2
app/soapbox/components/sidebar_menu.js
Wyświetl plik

@ -15,7 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
import { isStaff } from '../utils/accounts';
import { makeGetAccount } from '../selectors';
import { logOut } from 'soapbox/actions/auth';
import ThemeToggle from '../features/ui/components/theme_toggle';
import ThemeToggle from '../features/ui/components/theme_toggle_container';
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },

56
app/soapbox/features/soapbox_config/components/site_preview.js 100644
Wyświetl plik

@ -0,0 +1,56 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import classNames from 'classnames';
import { defaultSettings } from 'soapbox/actions/settings';
import { brandColorToCSS } from 'soapbox/utils/theme';
export default function SitePreview({ soapbox }) {
const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
const bodyClass = classNames('site-preview app-body', `theme-mode-${settings.get('themeMode')}`, {
'system-font': settings.get('systemFont'),
'no-reduce-motion': !settings.get('reduceMotion'),
'dyslexic': settings.get('dyslexicFont'),
'demetricator': settings.get('demetricator'),
'halloween': settings.get('halloween'),
});
return (
<div className={bodyClass}>
<style>{`.site-preview {${brandColorToCSS(soapbox.get('brandColor'))}}`}</style>
<div className='app-holder'>
<div>
<div className='ui'>
<nav className='tabs-bar'>
<div className='tabs-bar__container'>
<div className='tabs-bar__split tabs-bar__split--left'>
<a className='tabs-bar__link--logo' href='#'>
<img alt='Logo' src={soapbox.get('logo')} />
<span>Home</span>
</a>
<a className='tabs-bar__link' href='#'>
<i role='img' alt='home' className='fa fa-home' />
<span>Home</span>
</a>
<a className='tabs-bar__link' href='#'>
<i role='img' alt='bell' className='fa fa-bell' />
<span>Notifications</span>
</a>
</div>
</div>
</nav>
<div className='page'>
<span className='spoiler-button__overlay__label'>Site Preview</span>
</div>
</div>
</div>
</div>
</div>
);
}
SitePreview.propTypes = {
soapbox: ImmutablePropTypes.map.isRequired,
};

193
app/soapbox/features/soapbox_config/index.js
Wyświetl plik

@ -23,6 +23,9 @@ import Overlay from 'react-overlays/lib/Overlay';
import { isMobile } from 'soapbox/is_mobile';
import detectPassiveEvents from 'detect-passive-events';
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';
const messages = defineMessages({
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@ -185,15 +188,26 @@ class SoapboxConfig extends ImmutablePureComponent {
render() {
const { intl } = this.props;
const soapbox = this.getSoapboxConfig();
const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
return (
<Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
<SimpleForm onSubmit={this.handleSubmit}>
<fieldset disabled={this.state.isLoading}>
<SitePreview soapbox={soapbox} />
<FieldsGroup>
<div className='fields-row file-picker'>
<div className='fields-row__column fields-row__column-6'>
<img src={soapbox.get('logo')} />
<ColorWithPicker
buttonId='brand_color'
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
value={soapbox.get('brandColor')}
onChange={this.handleChange(['brandColor'], (e) => e.hex)}
/>
<ThemeToggle
onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
settings={settings}
/>
</div>
<div className='fields-row__column fields-group fields-row__column-6'>
<FileChooserLogo
@ -204,41 +218,7 @@ class SoapboxConfig extends ImmutablePureComponent {
/>
</div>
</div>
{/*<div className='fields-row file-picker'>
<div className='fields-row__column fields-row__column-6'>
<img src={soapbox.get('banner')} />
</div>
<div className='fields-row__column fields-group fields-row__column-6'>
<FileChooser
label={<FormattedMessage id='soapbox_config.fields.banner_label' defaultMessage='Banner' />}
name='banner'
hint={<FormattedMessage id='soapbox_config.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be displayed to 400x400px' />}
onChange={this.handleFileChange(['banner'])}
/>
</div>
</div>*/}
</FieldsGroup>
<FieldsGroup>
<div className='fields-row__column fields-group'>
<ColorWithPicker
buttonId='brand_color'
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
value={soapbox.get('brandColor')}
onChange={this.handleChange(['brandColor'], (e) => e.hex)}
/>
</div>
</FieldsGroup>
{/*<FieldsGroup>
<Checkbox
label={<FormattedMessage id='soapbox_config.fields.patron_enabled_label' defaultMessage='Patron module' />}
hint={<FormattedMessage id='soapbox_config.hints.patron_enabled' defaultMessage='Enables display of Patron module. Requires installation of Patron module.' />}
name='patron'
checked={soapbox.getIn(['extensions', 'patron', 'enabled'])}
onChange={this.handleChange(
['extensions', 'patron', 'enabled'], (e) => e.checked,
)}
/>
</FieldsGroup>*/}
<FieldsGroup>
<TextInput
name='copyright'
@ -249,104 +229,77 @@ class SoapboxConfig extends ImmutablePureComponent {
/>
</FieldsGroup>
<FieldsGroup>
<div className='fields-row__column fields-group'>
<div className='input with_block_label'>
<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.' />
</span>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
</span>
{
soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.promoItemIcon)}
placeholder={intl.formatMessage(messages.promoItemIcon)}
value={field.get('icon')}
onChange={this.handlePromoItemChange(i, 'icon', field)}
/>
<TextInput
label={intl.formatMessage(messages.promoItemLabel)}
placeholder={intl.formatMessage(messages.promoItemLabel)}
value={field.get('text')}
onChange={this.handlePromoItemChange(i, 'text', field)}
/>
<TextInput
label={intl.formatMessage(messages.promoItemURL)}
placeholder={intl.formatMessage(messages.promoItemURL)}
value={field.get('url')}
onChange={this.handlePromoItemChange(i, 'url', field)}
/>
<Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
</div>
))
}
<div className='actions'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
<Icon id='plus-circle' />
<FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
</div>
</div>
</div>
<div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
</span>
{
soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.homeFooterItemLabel)}
placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
value={field.get('title')}
onChange={this.handleHomeFooterItemChange(i, 'title', field)}
/>
<TextInput
label={intl.formatMessage(messages.homeFooterItemURL)}
placeholder={intl.formatMessage(messages.homeFooterItemURL)}
value={field.get('url')}
onChange={this.handleHomeFooterItemChange(i, 'url', field)}
/>
<Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
</div>
))
}
<div className='actions'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
<Icon id='plus-circle' />
<FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
</div>
</div>
</div>
</div>
{/* <div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
<div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.custom_css_fields' defaultMessage='Insert a URL to a CSS file like `https://mysite.com/instance/custom.css`, or simply `/instance/custom.css`' />
<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
</span>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
</span>
{
soapbox.get('customCss').map((field, i) => (
soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.customCssLabel)}
placeholder={intl.formatMessage(messages.customCssLabel)}
value={field}
onChange={this.handleChange(['customCss', i], (e) => e.target.value)}
label={intl.formatMessage(messages.promoItemIcon)}
placeholder={intl.formatMessage(messages.promoItemIcon)}
value={field.get('icon')}
onChange={this.handlePromoItemChange(i, 'icon', field)}
/>
<Icon id='times-circle' onClick={this.handleDeleteItem(['customCss', i])} />
<TextInput
label={intl.formatMessage(messages.promoItemLabel)}
placeholder={intl.formatMessage(messages.promoItemLabel)}
value={field.get('text')}
onChange={this.handlePromoItemChange(i, 'text', field)}
/>
<TextInput
label={intl.formatMessage(messages.promoItemURL)}
placeholder={intl.formatMessage(messages.promoItemURL)}
value={field.get('url')}
onChange={this.handlePromoItemChange(i, 'url', field)}
/>
<Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
</div>
))
}
<div className='actions'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['customCss'], '')}>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
<Icon id='plus-circle' />
<FormattedMessage id='soapbox_config.fields.custom_css.add' defaultMessage='Add another custom CSS URL' />
<FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
</div>
</div>
</div> */}
</div>
<div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
</span>
{
soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.homeFooterItemLabel)}
placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
value={field.get('title')}
onChange={this.handleHomeFooterItemChange(i, 'title', field)}
/>
<TextInput
label={intl.formatMessage(messages.homeFooterItemURL)}
placeholder={intl.formatMessage(messages.homeFooterItemURL)}
value={field.get('url')}
onChange={this.handleHomeFooterItemChange(i, 'url', field)}
/>
<Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
</div>
))
}
<div className='actions'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
<Icon id='plus-circle' />
<FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
</div>
</div>
</div>
</FieldsGroup>
<Accordion
headline={intl.formatMessage(messages.rawJSONLabel)}

2
app/soapbox/features/ui/components/tabs_bar.js
Wyświetl plik

@ -14,7 +14,7 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
import { openModal } from '../../../actions/modal';
import { openSidebar } from '../../../actions/sidebar';
import Icon from '../../../components/icon';
import ThemeToggle from '../../ui/components/theme_toggle';
import ThemeToggle from '../../ui/components/theme_toggle_container';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { isStaff } from 'soapbox/utils/accounts';

21
app/soapbox/features/ui/components/theme_toggle.js
Wyświetl plik

@ -1,10 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { injectIntl, defineMessages } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Icon from '../../../components/icon';
import { changeSetting, getSettings } from 'soapbox/actions/settings';
import SettingToggle from '../../notifications/components/setting_toggle';
const messages = defineMessages({
@ -12,31 +10,18 @@ const messages = defineMessages({
switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
});
const mapStateToProps = state => {
return {
settings: getSettings(state),
};
};
const mapDispatchToProps = (dispatch) => ({
toggleTheme(setting) {
dispatch(changeSetting(['themeMode'], setting));
},
});
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
export default @injectIntl
class ThemeToggle extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
settings: ImmutablePropTypes.map.isRequired,
toggleTheme: PropTypes.func,
onToggle: PropTypes.func.isRequired,
showLabel: PropTypes.bool,
};
handleToggleTheme = () => {
this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
this.props.onToggle(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
}
render() {

17
app/soapbox/features/ui/components/theme_toggle_container.js 100644
Wyświetl plik

@ -0,0 +1,17 @@
import { connect } from 'react-redux';
import { changeSetting, getSettings } from 'soapbox/actions/settings';
import ThemeToggle from './theme_toggle';
const mapStateToProps = state => {
return {
settings: getSettings(state),
};
};
const mapDispatchToProps = (dispatch) => ({
onToggle(setting) {
dispatch(changeSetting(['themeMode'], setting));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(ThemeToggle);

2
app/soapbox/utils/theme.js
Wyświetl plik

@ -79,3 +79,5 @@ export const themeDataToCss = themeData => (
.entrySeq()
.reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
);
export const brandColorToCSS = brandColor => themeDataToCss(brandColorToThemeData(brandColor));

1
app/styles/components/tabs-bar.scss
Wyświetl plik

@ -5,6 +5,7 @@
flex: 0 0 auto;
overflow-y: auto;
height: 50px;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;

30
app/styles/forms.scss
Wyświetl plik

@ -705,3 +705,33 @@ code {
cursor: pointer;
color: $error-red;
}
.site-preview {
border-radius: 4px;
overflow: hidden;
height: 164px;
border: 1px solid;
margin-bottom: 40px;
background: var(--background-color);
* {
z-index: 0;
}
a {
cursor: default;
}
.ui {
display: flex;
flex-direction: column;
padding: 0;
height: 100%;
}
.page {
align-items: center;
justify-content: center;
height: 100%;
}
}

155
app/styles/holiday/halloween.scss
Wyświetl plik

@ -1,4 +1,5 @@
body.halloween {
.halloween,
.site-preview.halloween {
// Set brand color to orange
--brand-color_h: 29.727272727272727;
--brand-color_s: 100%;
@ -14,8 +15,8 @@ body.halloween {
// Full-screen pseudo-elements to hold BG graphics
&::before,
&::after,
.app-holder::before,
.app-holder::after {
> .app-holder::before,
> .app-holder::after {
content: '';
display: block;
position: fixed;
@ -42,7 +43,7 @@ body.halloween {
animation: halloween-twinkle 200s linear infinite;
}
.app-holder {
> .app-holder {
// Vignette
&::before {
background-image: radial-gradient(
@ -58,90 +59,90 @@ body.halloween {
background: transparent url("../images/halloween/clouds.png") repeat top center;
animation: halloween-clouds 200s linear infinite;
}
}
// Dangling spider
.ui .page__top::after,
.ui .page__columns::after {
content: '';
display: block;
width: 100px;
height: 100px;
right: 20px;
background-image: url('../images/halloween/spider.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
z-index: -1;
pointer-events: none;
}
.ui .page__columns::after {
position: fixed;
top: 50px;
}
.ui .page__top::after {
position: absolute;
bottom: -100px;
}
.ui .page__top + .page__columns::after {
display: none;
}
// Witch emblem
.getting-started__footer::before {
content: '';
display: block;
background-image: url('../images/halloween/halloween-emblem.svg');
background-size: contain;
background-position: left;
background-repeat: no-repeat;
width: 100%;
height: 100px;
margin-bottom: 20px;
}
// Color fixes
// Elements directly over the BG need static colors that don't change
// regardless of the theme-mode
.getting-started__footer {
color: #fff;
a {
color: hsla(0, 0%, 100%, 0.4);
// Dangling spider
.ui .page__top::after,
.ui .page__columns::after {
content: '';
display: block;
width: 100px;
height: 100px;
right: 20px;
background-image: url('../images/halloween/spider.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
z-index: -1;
pointer-events: none;
}
p {
color: hsla(0, 0%, 100%, 0.8);
.ui .page__columns::after {
position: fixed;
top: 50px;
}
}
.profile-info-panel {
color: #fff;
.ui .page__top::after {
position: absolute;
bottom: -100px;
}
&-content__name h1 {
span:first-of-type {
color: hsla(0, 0%, 100%, 0.6);
.ui .page__top + .page__columns::after {
display: none;
}
// Witch emblem
.getting-started__footer::before {
content: '';
display: block;
background-image: url('../images/halloween/halloween-emblem.svg');
background-size: contain;
background-position: left;
background-repeat: no-repeat;
width: 100%;
height: 100px;
margin-bottom: 20px;
}
// Color fixes
// Elements directly over the BG need static colors that don't change
// regardless of the theme-mode
.getting-started__footer {
color: #fff;
a {
color: hsla(0, 0%, 100%, 0.4);
}
small {
p {
color: hsla(0, 0%, 100%, 0.8);
}
}
.profile-info-panel {
color: #fff;
&-content__name h1 {
span:first-of-type {
color: hsla(0, 0%, 100%, 0.6);
}
small {
color: #fff;
}
}
&-content__bio {
color: #fff;
}
}
&-content__bio {
color: #fff;
}
&-content__bio a,
&-content__fields a {
color: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) + 8%)
);
&-content__bio a,
&-content__fields a {
color: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) + 8%)
);
}
}
}
}

7
app/styles/themes.scss
Wyświetl plik

@ -24,7 +24,8 @@ Examples:
--primary-text-color--faint
*/
body {
body,
.site-preview {
// Primary variables
--brand-color: hsl(var(--brand-color_hsl));
--accent-color: hsl(var(--accent-color_hsl));
@ -56,7 +57,7 @@ body {
--warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
}
body.theme-mode-light {
.theme-mode-light {
// Primary variables
--foreground-color: #ffffff;
--highlight-text-color: hsl(
@ -85,7 +86,7 @@ body.theme-mode-light {
);
}
body.theme-mode-dark {
.theme-mode-dark {
// Primary variables
--foreground-color: #222222;
--highlight-text-color: hsl(