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-06 10:38:22 -05:00
parent 5109276331
commit da3d0c3462
39 changed files with 512 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,6 +92,7 @@ export default class Button extends PureComponent {
font: 1,
cursorPointer: 1,
textAlignCenter: 1,
outlineNone: 1,
backgroundColorPrimary: backgroundColor === COLORS.white,
backgroundColorBrand: backgroundColor === COLORS.brand,

54
app/javascript/gabsocial/components/column_inline_form/column_inline_form.js
View File

@@ -1,54 +0,0 @@
import Button from '../button';
export default class ColumnInlineForm extends PureComponent {
static propTypes = {
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
label: PropTypes.string.isRequired,
btnTitle: PropTypes.string.isRequired,
disabled: PropTypes.bool,
};
handleChange = e => {
this.props.onChange(e.target.value);
}
handleSubmit = e => {
e.preventDefault();
this.props.onSubmit();
}
handleClick = () => {
this.props.onSubmit();
}
render() {
const { value, label, btnTitle, disabled } = this.props;
return (
<form className='column-inline-form' onSubmit={this.handleSubmit}>
<label className='column-inline-form__block'>
<span className='column-inline-form__title'>{label}</span>
<input
className='column-inline-form__input'
value={value}
disabled={disabled}
onChange={this.handleChange}
placeholder={label}
/>
</label>
<Button
className='column-inline-form__btn'
disabled={disabled}
onClick={this.handleClick}
>
{btnTitle}
</Button>
</form>
);
}
}

29
app/javascript/gabsocial/components/column_inline_form/column_inline_form.scss
View File

@@ -1,29 +0,0 @@
.column-inline-form {
padding: 7px 5px 7px 15px;
background: lighten($ui-base-color, 4%);
@include flex(flex-start, center);
&__block {
flex: 1 1 auto;
}
&__title {}
&__input {
margin-bottom: 6px;
@include size(100%, 36px);
&:focus {
outline: 0;
}
}
&__btn {
flex: 0 0 auto;
margin: 0 5px;
margin-left: 6px;
width: 112px;
}
}

1
app/javascript/gabsocial/components/column_inline_form/index.js
View File

@@ -1 +0,0 @@
export { default } from './column_inline_form'

2
app/javascript/gabsocial/components/domain/domain.js → app/javascript/gabsocial/components/domain.js
View File

@@ -1,5 +1,5 @@
import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../icon_button';
import IconButton from './icon_button';
const messages = defineMessages({
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },

1
app/javascript/gabsocial/components/domain/index.js
View File

@@ -1 +0,0 @@
export { default } from './domain'

14
app/javascript/gabsocial/components/icon.js
View File

@@ -15,10 +15,14 @@ export default class Icon extends PureComponent {
switch (id) {
case 'add':
return <I.AddIcon {...options} />
case 'apps':
return <I.AppsIcon {...options} />
case 'angle-right':
return <I.AngleRightIcon {...options} />
case 'apps':
return <I.AppsIcon {...options} />
case 'audio':
return <I.AudioIcon {...options} />
case 'audio-mute':
return <I.AudioMuteIcon {...options} />
case 'back':
return <I.BackIcon {...options} />
case 'calendar':
@@ -35,6 +39,8 @@ export default class Icon extends PureComponent {
return <I.EllipsisIcon {...options} />
case 'error':
return <I.ErrorIcon {...options} />
case 'fullscreen':
return <I.FullscreenIcon {...options} />
case 'globe':
return <I.GlobeIcon {...options} />
case 'group':
@@ -51,12 +57,16 @@ export default class Icon extends PureComponent {
return <I.LoadingIcon {...options} />
case 'media':
return <I.MediaIcon {...options} />
case 'minimize-fullscreen':
return <I.MinimizeFullscreenIcon {...options} />
case 'missing':
return <I.MissingIcon {...options} />
case 'more':
return <I.MoreIcon {...options} />
case 'notifications':
return <I.NotificationsIcon {...options} />
case 'pause':
return <I.PauseIcon {...options} />
case 'pin':
return <I.PinIcon {...options} />
case 'play':

6
app/javascript/gabsocial/components/media_gallery/media_gallery.js
View File

@@ -27,17 +27,17 @@ class Item extends ImmutablePureComponent {
displayWidth: PropTypes.number,
visible: PropTypes.bool.isRequired,
dimensions: PropTypes.object,
};
}
static defaultProps = {
standalone: false,
index: 0,
size: 1,
};
}
state = {
loaded: false,
};
}
handleMouseEnter = (e) => {
if (this.hoverToPlay()) {

37
app/javascript/gabsocial/components/popover/search_popover.js
View File

@@ -1,8 +1,43 @@
export default class SearchPopover extends PureComponent {
render() {
// <div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
// <Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
// {({ opacity, scaleX, scaleY }) => (
// <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
// <h4>
// <FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' />
// </h4>
// <ul>
// <li>
// <em>#example</em>
// <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' />
// </li>
// <li>
// <em>@username</em>
// <FormattedMessage id='search_popout.tips.user' defaultMessage='user' />
// </li>
// <li>
// <em>URL</em>
// <FormattedMessage id='search_popout.tips.user' defaultMessage='user' />
// </li>
// <li>
// <em>URL</em>
// <FormattedMessage id='search_popout.tips.status' defaultMessage='status' />
// </li>
// </ul>
// {
// searchEnabled
// ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favorited, reposted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' />
// : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />
// }
// </div>
// )}
// </Motion>
// </div>
return (
<div>
{ /* */ }
{ /* */}
</div>
)
}

7
app/javascript/gabsocial/components/search.js
View File

@@ -1,12 +1,9 @@
import classNames from 'classnames/bind'
import Overlay from 'react-overlays/lib/Overlay'
import {
changeSearch,
clearSearch,
submitSearch,
showSearch,
} from '../actions/search'
import SearchPopout from './search_popout'
import Input from './input'
const mapStateToProps = state => ({
@@ -93,9 +90,9 @@ class Search extends PureComponent {
{
withOverlay &&
<Overlay show={expanded && !hasValue} placement='bottom' target={this}>
{/*<Overlay show={expanded && !hasValue} placement='bottom' target={this}>
<SearchPopout />
</Overlay>
</Overlay>*/}
}
</div>

1
app/javascript/gabsocial/components/search_popout/index.js
View File

@@ -1 +0,0 @@
export { default } from './search_popout'

53
app/javascript/gabsocial/components/search_popout/search_popout.js
View File

@@ -1,53 +0,0 @@
import { FormattedMessage } from 'react-intl';
import spring from 'react-motion/lib/spring';
import Motion from '../../features/ui/util/optional_motion';
import { searchEnabled } from '../../initial_state';
export default class SearchPopout extends PureComponent {
static propTypes = {
style: PropTypes.object,
};
render() {
const { style } = this.props;
return (
<div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
<Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
{({ opacity, scaleX, scaleY }) => (
<div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
<h4>
<FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' />
</h4>
<ul>
<li>
<em>#example</em>
<FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' />
</li>
<li>
<em>@username</em>
<FormattedMessage id='search_popout.tips.user' defaultMessage='user' />
</li>
<li>
<em>URL</em>
<FormattedMessage id='search_popout.tips.user' defaultMessage='user' />
</li>
<li>
<em>URL</em>
<FormattedMessage id='search_popout.tips.status' defaultMessage='status' />
</li>
</ul>
{
searchEnabled
? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favorited, reposted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' />
: <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />
}
</div>
)}
</Motion>
</div>
);
}
}

36
app/javascript/gabsocial/components/search_popout/search_popout.scss
View File

@@ -1,36 +0,0 @@
.search-popout-container {
width: 251px;
@media screen and (max-width: $nav-breakpoint-2) {
width: 100%;
}
}
.search-popout {
background: $gab-background-container;
padding: 8px 10px 17px 10px;
margin: 4px 0 0 0;
color: $gab-secondary-text;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
@include text-sizing(12px, 400, 14px);
@include border-design($gab-placeholder-accent, 1px, 4px);
h4 {
color: #fff;
@include text-sizing(14px, 600, 16px);
}
ul {
margin: 6px 0 6px;
li {
margin: 0 0 2px 0;
em {
color: $gab-text-highlight;
}
}
}
}

4
app/javascript/gabsocial/components/status/status.js
View File

@@ -371,6 +371,8 @@ class Status extends ImmutablePureComponent {
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const video = status.getIn(['media_attachments', 0]);
console.log("VIDEO HERE")
media = (
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer}>
{Component => (
@@ -460,9 +462,7 @@ class Status extends ImmutablePureComponent {
<div
className={classNames('status', `status-${status.get('visibility')}`, {
'status-reply': !!status.get('in_reply_to_id'),
muted: this.props.muted,
read: unread === false,
})}
data-id={status.get('id')}
>

5
app/javascript/gabsocial/components/status/status.scss
View File

@@ -28,11 +28,6 @@
margin-top: 8px;
}
&.status-direct:not(.read) {
background: lighten($ui-base-color, 8%);
border-bottom-color: lighten($ui-base-color, 12%);
}
&.light {
.status__relative-time {
color: $light-text-color;

10
app/javascript/gabsocial/components/status_action_bar/status_action_bar.js → app/javascript/gabsocial/components/status_action_bar.js
View File

@@ -2,11 +2,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl } from 'react-intl'
import classNames from 'classnames/bind'
import { openModal } from '../../actions/modal'
import { me, isStaff } from '../../initial_state'
import ComposeFormContainer from '../../features/compose/containers/compose_form_container'
import Icon from '../icon'
import StatusActionBarItem from '../status_action_bar_item'
import { openModal } from '../actions/modal'
import { me, isStaff } from '../initial_state'
import ComposeFormContainer from '../features/compose/containers/compose_form_container'
import Icon from './icon'
import StatusActionBarItem from './status_action_bar_item'
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },

2
app/javascript/gabsocial/components/status_action_bar/index.js
View File

@@ -1 +1 @@
export { default } from './status_action_bar'
export { default } from '../status_action_bar'

59
app/javascript/gabsocial/components/status_action_bar/status_action_bar.scss
View File

@@ -1,59 +0,0 @@
.status-action-bar {
display: block;
margin-top: 10px;
z-index: 4;
@include horizontal-padding(10px);
&__dropdown {
@include size(23px);
}
&__items {
display: flex;
align-items: center;
border-top: 1px solid #161616;
@include size(100%, 42px);
}
&__comment {
}
}
.status-action-bar-item {
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
width: 33%;
padding: 5px;
box-sizing: border-box;
&__btn {
border-radius: 4px;
margin-right: 4px;
font-size: 14px;
font-weight: 500;
@include size(100%);
&:hover {
background-color: #000;
}
i {
margin-right: 4px;
}
}
&__link {
display: inline-block;
color: $action-button-color;
cursor: pointer;
text-decoration: none;
@include text-sizing(14px, 500);
}
}

8
app/javascript/gabsocial/components/status_list/status_list.js → app/javascript/gabsocial/components/status_list.js
View File

@@ -2,10 +2,10 @@ import { Fragment } from 'react';
import { debounce } from 'lodash';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import StatusContainer from '../../containers/status_container';
import ScrollableList from '../scrollable_list';
import TimelineQueueButtonHeader from '../timeline_queue_button_header';
import ColumnIndicator from '../column_indicator';
import StatusContainer from '../containers/status_container';
import ScrollableList from './scrollable_list';
import TimelineQueueButtonHeader from './timeline_queue_button_header';
import ColumnIndicator from './column_indicator';
export default class StatusList extends ImmutablePureComponent {

2
app/javascript/gabsocial/components/status_list/index.js
View File

@@ -1 +1 @@
export { default } from './status_list'
export { default } from '../status_list'

4
app/javascript/gabsocial/components/status_quote/status_quote.js → app/javascript/gabsocial/components/status_quote.js
View File

@@ -1,6 +1,6 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusContent from '../status_content';
import DisplayName from '../display_name';
import StatusContent from './status_content';
import DisplayName from './display_name';
import { NavLink } from 'react-router-dom';
const mapStateToProps = (state, { id }) => ({

0
app/javascript/gabsocial/components/status_quote/index.js
View File

15
app/javascript/gabsocial/components/status_revision_list/status_revision_list.js → app/javascript/gabsocial/components/status_revision_list.js
View File

@@ -1,7 +1,6 @@
import { injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ModalLoading from './modal_loading';
import RelativeTimestamp from './relative_timestamp';
export default
@@ -17,13 +16,15 @@ class StatusRevisionsList extends ImmutablePureComponent {
render() {
const { loading, error, data } = this.props;
if (loading || !data) return <ModalLoading />;
if (loading || !data) return null
if (error) return (
<div className='status-revisions-list'>
<div className='status-revisions-list__error'>An error occured</div>
</div>
);
if (error) {
return (
<div className='status-revisions-list'>
<div className='status-revisions-list__error'>An error occured</div>
</div>
)
}
return (
<div className='status-revisions-list'>

0
app/javascript/gabsocial/components/status_revision_list/index.js
View File