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-08 12:46:00 -04:00
parent 557c6470f5
commit 2f9dbfa91d
16 changed files with 189 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
View File

@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
import classNames from 'classnames/bind'
import ImmutablePureComponent from 'react-immutable-pure-component'
import Textarea from 'react-textarea-autosize'
import ContentEditable from 'react-contenteditable'
import { isRtl } from '../../utils/rtl'
import { textAtCursorMatchesToken } from '../../utils/cursor_token_match'
import AutosuggestAccount from '../autosuggest_account'
@@ -228,18 +229,46 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
marginRight5PX: small,
})
// <div aria-activedescendant="typeaheadFocus-0.35973815699338085"
// aria-autocomplete="list"
// aria-controls="typeaheadDropdownWrapped-0"
// aria-describedby="placeholder-7g4r6"
// aria-label="Tweet text"
// aria-multiline="true"
// class="notranslate public-DraftEditor-content"
// contenteditable="true"
// data-testid="tweetTextarea_0"
// role="textbox"
// spellcheck="true"
// tabindex="0"
// no-focuscontainer-refocus="true"
// style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;">
if (textarea) {
return (
<Fragment>
<div className={[_s.default, _s.flexGrow1].join(' ')}>
<div className={[_s.default, _s.marginLeft5PX].join(' ')}>
<Textarea
<ContentEditable
noFocuscontainerRefocus
ariaMultiline
contentEditable
spellcheck
tabindex='0'
ariaLabel='Gab text'
role='textbox'
ariaAutocomplete='list'
style={{
userSelect: 'text',
'white-space': 'pre-wrap',
overflowWrap: 'break-word'
}}
inputRef={this.setTextbox}
className={textClasses}
disabled={disabled}
placeholder={placeholder}
autoFocus={autoFocus}
value={value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
@@ -247,7 +276,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
onBlur={this.onBlur}
onPaste={this.onPaste}
style={style}
aria-autocomplete='list'
html={value}
/>
</div>
{children}

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

@@ -29,7 +29,7 @@ const emojify = (str, customEmojis = {}) => {
// if you want additional emoji handler, add statements below which set replacement and return true.
if (shortname in customEmojis) {
const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
replacement = `<img draggable="false" style="height:20px;width:20px;margin:-3px 0 0;" alt="${shortname}" title="${shortname}" src="${filename}" />`;
return true;
}
return false;
@@ -60,7 +60,7 @@ const emojify = (str, customEmojis = {}) => {
} else { // matched to unicode emoji
const { filename, shortCode } = unicodeMapping[match];
const title = shortCode ? `:${shortCode}:` : '';
replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
replacement = `<img draggable="false" style="height:20px;width:20px;margin: -3px 0 0;" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
rend = i + match.length;
// If the matched character was followed by VS15 (for selecting text presentation), skip it.
if (str.codePointAt(rend) === 65038) {

4
app/javascript/gabsocial/components/modal/modal_base.js
View File

@@ -120,6 +120,8 @@ class ModalBase extends PureComponent {
const containerClasses = cx({
default: 1,
z4: 1,
height100PC: visible,
width100PC: visible,
displayNone: !visible,
})
@@ -135,7 +137,7 @@ class ModalBase extends PureComponent {
/>
<div
role='dialog'
className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.pointerEventsNone, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
>
{children}
</div>

6
app/javascript/gabsocial/components/panel/notification_filter_panel.js
View File

@@ -33,7 +33,11 @@ class NotificationFilterPanel extends ImmutablePureComponent {
return (
<PanelLayout title={intl.formatMessage(messages.title)}>
<Text>Date</Text>
<Text>Verified</Text>
<Text>Users</Text>
<Text>Status Id</Text>
<Text>Only People I Follow</Text>
</PanelLayout>
)
}

19
app/javascript/gabsocial/components/poll/poll.js → app/javascript/gabsocial/components/poll.js
View File

@@ -5,13 +5,13 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
import classNames from 'classnames/bind'
import escapeTextContentForBrowser from 'escape-html'
import spring from 'react-motion/lib/spring'
import Motion from '../../features/ui/util/optional_motion'
import { vote } from '../../actions/polls'
import emojify from '../emoji/emoji'
import RelativeTimestamp from '../relative_timestamp'
import Button from '../button'
import DotTextSeperator from '../dot_text_seperator'
import Text from '../text'
import Motion from '../features/ui/util/optional_motion'
import { vote } from '../actions/polls'
import emojify from './emoji/emoji'
import RelativeTimestamp from './relative_timestamp'
import Button from './button'
import DotTextSeperator from './dot_text_seperator'
import Text from './text'
const cx = classNames.bind(_s)
@@ -159,7 +159,10 @@ class Poll extends ImmutablePureComponent {
!showResults && <span className={inputClasses} />
}
<span dangerouslySetInnerHTML={{ __html: titleEmojified }} />
<span
className={_s.text}
dangerouslySetInnerHTML={{ __html: titleEmojified }}
/>
{
showResults &&

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

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

147
app/javascript/gabsocial/components/poll/poll.scss
View File

@@ -1,147 +0,0 @@
.poll {
margin-top: 16px;
&__list {
display: block;
}
&__chart {
height: 100%;
display: inline-block;
border-radius: 4px;
background: rgba($gab-placeholder-accent, .3);
@include abs-position(0, auto, auto, 0);
&--leading {
background: rgba($gab-placeholder-accent, .6);
}
}
&__text {
position: relative;
display: inline-block;
padding: 6px 0;
line-height: 18px;
cursor: default;
color: #fff;
@include text-overflow(nowrap);
body.theme-gabsocial-light & {
color: $gab-default-text-light;
}
input[type=radio],
input[type=checkbox] {
display: none;
}
.autossugest-input {
flex: 1 1 auto;
}
input[type=text] {
display: block;
box-sizing: border-box;
width: 100%;
font-size: 14px;
color: $inverted-text-color;
display: block;
outline: 0;
font-family: inherit;
background: $simple-background-color;
padding: 6px 10px;
@include border-design(darken($simple-background-color, 14%), 1px, 4px);
&:focus {
border-color: $highlight-text-color;
}
}
&.selectable {
cursor: pointer;
}
&.editable {
display: flex;
align-items: center;
overflow: visible;
}
}
&__input {
display: inline-block;
position: relative;
border: 1px solid $ui-primary-color;
box-sizing: border-box;
flex: 0 0 auto;
margin-right: 10px;
top: -1px;
vertical-align: middle;
@include circle(18px);
&--checkbox {
border-radius: 4px;
}
&--active {
border-color: $valid-value-color;
background: $valid-value-color;
}
}
&__footer {
color: $dark-text-color;
@include vertical-padding(6px, 5px);
span {
font-size: 14px;
}
}
&__link {
display: inline;
background: transparent;
padding: 0;
margin: 0;
border: 0;
color: $dark-text-color;
text-decoration: underline;
font-size: inherit;
&:hover {
text-decoration: none;
}
&:active,
&:focus {
background-color: rgba($dark-text-color, .1);
}
}
&__button {
margin-right: 10px;
}
}
.poll-item {
position: relative;
margin-bottom: 10px;
height: 30px;
&__number {
display: inline-block;
width: 36px;
padding: 0 10px;
@include text-sizing(14px, 700, 1, right);
}
&__text {
@include text-sizing(14px, 400);
}
}

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

@@ -63,7 +63,7 @@ export default class SidebarSectionItem extends PureComponent {
const iconClasses = cx({
fillColorBlack: shouldShowActive,
fillColorSecondary: !hovering && !active,
fillcolorSecondary: !hovering && !active,
})
const countClasses = cx({

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

@@ -8,6 +8,7 @@ import classNames from 'classnames/bind'
import { displayMedia } from '../../initial_state';
import Card from '../../features/status/components/card';
import { MediaGallery, Video } from '../../features/ui/util/async-components';
import ComposeFormContainer from '../../features/compose/containers/compose_form_container'
import Avatar from '../avatar';
import StatusQuote from '../status_quote';
import RelativeTimestamp from '../relative_timestamp';
@@ -496,7 +497,9 @@ class Status extends ImmutablePureComponent {
) */ }
<StatusActionBar status={status} account={account} {...other} />
{ /* : todo : comment bar, comments */ }
{/*<div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.paddingHorizontal15PX, _s.marginBottom10PX].join(' ')}>
<ComposeFormContainer statusId={status.get('id')} shouldCondense />
</div>*/}
</div>
</Block>
</div>

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

@@ -4,7 +4,6 @@ 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 Text from './text'
import StatusActionBarItem from './status_action_bar_item'
@@ -229,9 +228,6 @@ class StatusActionBar extends ImmutablePureComponent {
/>
</div>
</div>
<div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.marginBottom10PX].join(' ')}>
{ /* <ComposeFormContainer statusId={status.get('id')} shouldCondense /> */}
</div>
</div>
)
}

2
app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
View File

@@ -349,7 +349,7 @@ class ComposeForm extends ImmutablePureComponent {
}
<SpoilerButton small={shouldCondense} />
<SchedulePostDropdown small={shouldCondense} position={isModalOpen ? 'top' : undefined} />
<EmojiPickerButton />
<EmojiPickerButton small={shouldCondense} />
</div>
<CharacterCounter max={maxPostCharacterCount} text={text} small={shouldCondense} />
{

29
app/javascript/gabsocial/features/compose/components/poll_form.js
View File

@@ -100,19 +100,22 @@ class PollFormOption extends ImmutablePureComponent {
/>
</label>
<Button
narrow
circle
backgroundColor='none'
className={[_s.marginLeft5PX, _s.justifyContentCenter].join(' ')}
icon='close'
iconWidth='8px'
iconHeight='8px'
iconClassName={_s.fillColorSecondary}
disabled={index <= 1}
title={intl.formatMessage(messages.remove_option)}
onClick={this.handleOptionRemove}
/>
{
index > 1 &&
<Button
narrow
circle
backgroundColor='none'
className={[_s.marginLeft5PX, _s.justifyContentCenter].join(' ')}
icon='close'
iconWidth='8px'
iconHeight='8px'
iconClassName={_s.fillColorSecondary}
disabled={index <= 1}
title={intl.formatMessage(messages.remove_option)}
onClick={this.handleOptionRemove}
/>
}
</li>
);
}

41
app/javascript/gabsocial/features/compose/components/search_results/search_results.js
View File

@@ -1,40 +1,41 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl';
import TrendingItem from '../../../../components/trends_panel_item';
import Icon from '../../../../components/icon';
import { WhoToFollowPanel } from '../../../../components/panel';
// import TrendsPanel from '../../ui/components/trends_panel';
import GroupListItem from '../../../../components/group_list_item';
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { FormattedMessage } from 'react-intl'
import TrendingItem from '../../../../components/trends_panel_item'
import Icon from '../../../../components/icon'
import { WhoToFollowPanel } from '../../../../components/panel'
// import TrendsPanel from '../../ui/components/trends_panel'
import GroupListItem from '../../../../components/group_list_item'
import Block from '../../../../components/block'
export default class SearchResults extends ImmutablePureComponent {
static propTypes = {
results: ImmutablePropTypes.map.isRequired,
location: PropTypes.object,
};
}
state = {
isSmallScreen: (window.innerWidth <= 895),
}
render () {
const { results, location } = this.props;
const { isSmallScreen } = this.state;
const { results, location } = this.props
const { isSmallScreen } = this.state
if (results.isEmpty() && isSmallScreen) {
return (
<div className='search-results'>
<WhoToFollowPanel />
</div>
);
)
}
const pathname = location.pathname || '';
const showPeople = pathname === '/search/people';
const showHashtags = pathname === '/search/hashtags';
const showGroups = pathname === '/search/groups';
const isTop = !showPeople && !showHashtags && !showGroups;
const pathname = location.pathname || ''
const showPeople = pathname === '/search/people'
const showHashtags = pathname === '/search/hashtags'
const showGroups = pathname === '/search/groups'
const isTop = !showPeople && !showHashtags && !showGroups
let accounts, statuses, hashtags, groups;
let count = 0;
@@ -73,7 +74,7 @@ export default class SearchResults extends ImmutablePureComponent {
}
return (
<div className='search-results'>
<Block>
<div className='search-results__header'>
<Icon id='search' fixedWidth />
<FormattedMessage
@@ -89,8 +90,8 @@ export default class SearchResults extends ImmutablePureComponent {
{groups}
{statuses}
{hashtags}
</div>
);
</Block>
)
}
}

71
app/javascript/styles/gabsocial/polls.scss
View File

@@ -1,71 +0,0 @@
.compose-form__poll-wrapper {
border-top: 1px solid darken($simple-background-color, 8%);
ul {
padding: 10px;
}
.poll__footer {
border-top: 1px solid darken($simple-background-color, 8%);
padding: 10px;
display: flex;
align-items: center;
button,
select {
flex: 1 1 50%;
}
}
.button.button--secondary {
padding: 6px 10px;
height: auto;
color: $action-button-color;
border-color: $action-button-color;
margin-right: 5px;
@include text-sizing(14px, 400, inherit);
}
li {
display: flex;
align-items: center;
.poll__text {
flex: 0 0 auto;
width: calc(100% - (23px + 6px));
margin-right: 6px;
}
}
select {
appearance: none;
box-sizing: border-box;
font-size: 14px;
color: $inverted-text-color;
display: inline-block;
width: auto;
outline: 0;
font-family: inherit;
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
padding: 6px 30px 6px 10px;
@include border-design(darken($simple-background-color, 14%), 1px, 4px);
}
.icon-button.disabled {
color: darken($simple-background-color, 14%);
}
}
.muted .poll {
color: $dark-text-color;
&__chart {
background: rgba(darken($ui-primary-color, 14%), 0.2);
&.leading {
background: rgba($ui-highlight-color, 0.2);
}
}
}