random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev 2020-03-12 12:09:15 -04:00
parent 5661277d9d
commit bc386bf9d5
23 changed files with 152 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/gabsocial/components/display_name.js
View File

@ -3,7 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import { debounce } from 'lodash'
import classNames from 'classnames/bind'
import { openPopover, closePopover } from '../actions/popover'
import Badge from './badge'
import Icon from './icon'
const cx = classNames.bind(_s)

10
app/javascript/gabsocial/components/input.js
View File

@ -18,6 +18,7 @@ export default class Input extends PureComponent {
onClear: PropTypes.func,
title: PropTypes.string,
small: PropTypes.bool,
readOnly: PropTypes.string,
}
render() {
@ -32,7 +33,8 @@ export default class Input extends PureComponent {
onBlur,
onClear,
title,
small
small,
readOnly
} = this.props
const inputClasses = cx({
@ -42,9 +44,12 @@ export default class Input extends PureComponent {
lineHeight125: 1,
displayBlock: 1,
py10: 1,
backgroundTransparent: 1,
backgroundTransparent: !readOnly,
backgroundSubtle2: readOnly,
colorSecondary: readOnly,
fontSize15PX: 1,
flexGrow1: 1,
circle: 1,
px5: !!prependIcon,
pl15: !prependIcon,
pr15: !hasClear,
@ -75,6 +80,7 @@ export default class Input extends PureComponent {
onKeyUp={onKeyUp}
onFocus={onFocus}
onBlur={onBlur}
readOnly={readOnly}
/>
{

0
app/javascript/gabsocial/components/modal/actions_modal/actions_modal.scss
View File

0
app/javascript/gabsocial/components/modal/boost_modal/boost_modal.scss
View File

3
app/javascript/gabsocial/components/modal/compose_modal.js
View File

@ -51,7 +51,8 @@ class ComposeModal extends ImmutablePureComponent {
return (
<ModalLayout
noPadding
title={intl.formatMessage(messages.title)} onClose={this.onClickClose}
title={intl.formatMessage(messages.title)}
onClose={this.onClickClose}
>
<TimelineComposeBlock modal />
</ModalLayout>

18
app/javascript/gabsocial/components/modal/compose_modal/compose_modal.scss
View File

@ -1,18 +0,0 @@
.compose-modal {
width: 600px;
&__content {
.timeline-compose-block {
background: transparent !important;
width: 100%;
padding: 10px 5px;
margin-bottom: 0;
.compose-form {
display: flex;
flex-direction: column;
max-height: 100%;
}
}
}
}

0
app/javascript/gabsocial/components/modal/confirmation_modal/confirmation_modal.scss
View File

123
app/javascript/gabsocial/components/modal/embed_modal.js
View File

@ -1,12 +1,17 @@
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl } from 'react-intl'
import api from '../../api'
import ModalLayout from './modal_layout'
import Divider from '../divider'
import Icon from '../icon'
import Input from '../input'
import Text from '../text'
const messages = defineMessages({
embed: { id: 'status.embed', defaultMessage: 'Embed' },
instructions: { id: 'embed.instructions', defaultMessage: 'Embed this status on your website by copying the code below.' },
preview: { id: 'embed.preview', defaultMessage: 'Here is what it will look like:' },
});
})
export default
@injectIntl
@ -22,72 +27,82 @@ class EmbedModal extends ImmutablePureComponent {
state = {
loading: false,
oembed: null,
};
componentDidMount () {
const { url } = this.props;
this.setState({ loading: true });
api().post('/api/web/embed', { url }).then(res => {
this.setState({ loading: false, oembed: res.data });
const iframeDocument = this.iframe.contentWindow.document;
iframeDocument.open();
iframeDocument.write(res.data.html);
iframeDocument.close();
iframeDocument.body.style.margin = 0;
this.iframe.width = iframeDocument.body.scrollWidth;
this.iframe.height = iframeDocument.body.scrollHeight;
}).catch(error => {
this.props.onError(error);
});
}
setIframeRef = c => {
this.iframe = c;
componentDidMount() {
const { url } = this.props
this.setState({ loading: true })
api().post('/api/web/embed', { url }).then(res => {
this.setState({ loading: false, oembed: res.data })
const iframeDocument = this.iframe.contentWindow.document
iframeDocument.open()
iframeDocument.write(res.data.html)
iframeDocument.close()
iframeDocument.body.style.margin = 0
this.iframe.width = iframeDocument.body.scrollWidth
this.iframe.height = iframeDocument.body.scrollHeight
}).catch(error => {
this.props.onError(error)
})
}
setIframeRef = c => {
this.iframe = c
}
handleTextareaClick = (e) => {
e.target.select();
e.target.select()
}
render () {
const { oembed, intl } = this.state;
render() {
const { intl } = this.props
const { oembed } = this.state
return (
<div className='modal-root__modal embed-modal'>
<h4>{intl.formatMessage(messages.embed)}</h4>
<div className='embed-modal__container'>
<p className='hint'>
<ModalLayout title={intl.formatMessage(messages.embed)}>
<div className={_s.default}>
<Text className={_s.my10}>
{intl.formatMessage(messages.instructions)}
</p>
</Text>
<input
type='text'
className='embed-modal__html'
readOnly
value={oembed && oembed.html || ''}
onClick={this.handleTextareaClick}
/>
<div className={[_s.default, _s.mb10].join(' ')}>
<Input
readOnly
type='text'
className='embed-modal__html'
value={oembed && oembed.html || ''}
onClick={this.handleTextareaClick}
/>
</div>
<p className='hint'>
<Divider />
<Text className={_s.mb10}>
{intl.formatMessage(messages.preview)}
</p>
</Text>
<div className={[_s.default, _s.width100PC, _s.backgroundSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<iframe
className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
frameBorder='0'
ref={this.setIframeRef}
sandbox='allow-same-origin'
title='preview'
/>
{
!oembed &&
<Icon id='loading' height='34px' width='34px' className={[_s.positionAbsolute, _s.z3].join(' ')} />
}
</div>
<iframe
className='embed-modal__iframe'
frameBorder='0'
ref={this.setIframeRef}
sandbox='allow-same-origin'
title='preview'
/>
</div>
</div>
);
</ModalLayout>
)
}
}

57
app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss
View File

@ -1,57 +0,0 @@
.embed-modal {
@include max-size(80vw, 80vh);
h4 {
padding: 30px;
@include text-sizing(16px, 500, 1, center);
}
.embed-modal__container {
padding: 10px;
.hint {
margin-bottom: 15px;
}
.embed-modal__html {
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: none;
padding: 10px;
font-family: $font-monospace, monospace;
background: $ui-base-color;
color: $primary-text-color;
font-size: 14px;
margin: 0;
margin-bottom: 15px;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&:focus {
background: lighten($ui-base-color, 4%);
}
@include breakpoint(sm) {
font-size: 16px;
}
}
.embed-modal__iframe {
width: 400px;
max-width: 100%;
overflow: hidden;
border: 0;
}
}
}

2
app/javascript/gabsocial/components/modal/mute_modal.js
View File

@ -73,7 +73,7 @@ class MuteModal extends PureComponent {
}
render () {
const { account, notifications } = this.props;
const { account, notifications, intl } = this.props;
return (
<div className='modal-root__modal mute-modal'>

0
app/javascript/gabsocial/components/modal/mute_modal/mute_modal.scss
View File

22
app/javascript/gabsocial/components/modal/report_modal/report_modal.scss
View File

@ -1,22 +0,0 @@
.setting-text {
color: $darker-text-color;
background: transparent;
border: none;
border-bottom: 2px solid $ui-primary-color;
box-sizing: border-box;
display: block;
font-family: inherit;
margin-bottom: 10px;
padding: 7px 0;
width: 100%;
&:focus,
&:active {
color: $primary-text-color;
border-bottom-color: $highlight-text-color;
}
@include breakpoint(sm) {
font-size: 16px;
}
}

57
app/javascript/gabsocial/components/modal/status_revision_modal.js
View File

@ -1,39 +1,40 @@
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import StatusRevisionListContainer from '../../containers/status_revision_list_container';
import IconButton from '../icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import StatusRevisionListContainer from '../../containers/status_revision_list_container'
import IconButton from '../icon_button'
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
})
export default
@injectIntl
class StatusRevisionModal extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
status: ImmutablePropTypes.map.isRequired
};
static propTypes = {
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
status: ImmutablePropTypes.map.isRequired
}
render () {
const { intl, onClose, status } = this.props;
render() {
const { intl, onClose, status } = this.props
return (
<div className='modal-root__modal status-revisions-root'>
<div className='status-revisions'>
<div className='status-revisions__header'>
<h3 className='status-revisions__header__title'><FormattedMessage id='status_revisions.heading' defaultMessage='Revision History' /></h3>
<IconButton className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
</div>
<div className='status-revisions__content'>
<StatusRevisionListContainer id={status.get('id')} />
</div>
</div>
</div>
);
}
return (
<div className='modal-root__modal status-revisions-root'>
<div className='status-revisions'>
<div className='status-revisions__header'>
<h3 className='status-revisions__header__title'>
<FormattedMessage id='status_revisions.heading' defaultMessage='Revision History' />
</h3>
<IconButton className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
</div>
<div className='status-revisions__content'>
<StatusRevisionListContainer id={status.get('id')} />
</div>
</div>
</div>
)
}
}

5
app/javascript/gabsocial/components/modal/video_modal/video_modal.scss
View File

@ -1,5 +0,0 @@
.video-modal {
position: relative;
@include max-size(100vw, 100vh);
}

2
app/javascript/gabsocial/components/sidebar.js
View File

@ -45,7 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(closeSidebar())
},
onOpenComposeModal() {
dispatch(openModal('PRO_UPGRADE'))
dispatch(openModal('COMPOSE'))
},
})

6
app/javascript/gabsocial/pages/group_page.js
View File

@ -25,6 +25,12 @@ class GroupPage extends ImmutablePureComponent {
dispatch: PropTypes.func.isRequired,
}
componentDidMount() {
const { group } = this.props
const groupTitle = !group ? '...' : group.get('title')
document.title = `Group / ${groupTitle} - Gab`
}
componentWillMount() {
const { params: { id }, dispatch } = this.props

4
app/javascript/gabsocial/pages/groups_page.js
View File

@ -5,6 +5,10 @@ import DefaultLayout from '../layouts/default_layout'
export default class GroupsPage extends PureComponent {
componentDidMount() {
document.title = 'Groups - Gab'
}
handleClickNewList () {
console.log("handleClickNewList")
}

4
app/javascript/gabsocial/pages/home_page.js
View File

@ -12,6 +12,10 @@ import Divider from '../components/divider'
export default class HomePage extends PureComponent {
componentDidMount() {
document.title = '(1) Home - Gab'
}
handleEditHomeTimeline () {
console.log("handleEditHomeTimeline")
}

6
app/javascript/gabsocial/pages/list_page.js
View File

@ -17,6 +17,12 @@ class ListPage extends ImmutablePureComponent {
list: ImmutablePropTypes.map,
};
componentDidMount() {
const { list } = this.props
const listTitle = !list ? '...' : list.get('title')
document.title = `List / ${listTitle} - Gab`
}
handleEditListTimeline () {
console.log("handleEditListTimeline")
}

4
app/javascript/gabsocial/pages/lists_page.js
View File

@ -6,6 +6,10 @@ import DefaultLayout from '../layouts/default_layout'
export default class ListsPage extends PureComponent {
componentDidMount() {
document.title = 'Lists - Gab'
}
handleClickNewList () {
console.log("handleClickNewList")
}

5
app/javascript/gabsocial/pages/notifications_page.js
View File

@ -6,6 +6,11 @@ import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
export default class NotificationsPage extends PureComponent {
componentDidMount() {
document.title = 'Notifications - Gab'
}
render() {
const { children } = this.props

9
app/javascript/gabsocial/pages/profile_page.js
View File

@ -41,6 +41,15 @@ class ProfilePage extends ImmutablePureComponent {
unavailable: PropTypes.bool.isRequired,
}
componentDidMount() {
const { account, params: { username } } = this.props
if (!!account) {
document.title = `${account.get('display_name')} (@${username}) - Gab`
} else {
document.title = `@${username} - Gab`
}
}
componentWillMount() {
const { dispatch, params: { username } } = this.props
dispatch(fetchAccountByUsername(username))

4
app/javascript/gabsocial/pages/search_page.js
View File

@ -4,6 +4,10 @@ import SearchFilterPanel from '../components/panel/search_filter_panel'
import SearchLayout from '../layouts/search_layout'
export default class SearchPage extends PureComponent {
componentDidMount() {
document.title = `Search - Gab`
}
render() {
const { children } = this.props