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

Updated schedule post dropdown

Browse Source
This commit is contained in:
mgabdev 2019-09-18 22:04:49 -04:00
parent 910a3d673e
commit d2e4a046af
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
View File

@ -11,6 +11,12 @@ const messages = defineMessages({
schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule Status' }, schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule Status' },
}); });
const DatePickerWrapper = ({ value, onClick }) => (
<button className="schedule-post-dropdown-wrapper" onClick={onClick}>
{value}
</button>
);
export default @injectIntl export default @injectIntl
class SchedulePostDropdown extends React.PureComponent { class SchedulePostDropdown extends React.PureComponent {
@ -50,6 +56,7 @@ class SchedulePostDropdown extends React.PureComponent {
const { open } = this.state; const { open } = this.state;
const datePickerDisabled = !isPro; const datePickerDisabled = !isPro;
const withPortal = isMobile(window.innerWidth);
return ( return (
<div className='schedule-post-dropdown'> <div className='schedule-post-dropdown'>
@ -77,10 +84,11 @@ class SchedulePostDropdown extends React.PureComponent {
timeFormat="p" timeFormat="p"
timeIntervals={15} timeIntervals={15}
timeCaption="Time" timeCaption="Time"
dateFormat="MMMM d, yyyy h:mm aa" dateFormat="MMM d, yyyy h:mm aa"
disabled={datePickerDisabled} disabled={datePickerDisabled}
showTimeSelect showTimeSelect
startOpen customInput={<DatePickerWrapper />}
withPortal={withPortal}
popperModifiers={{ popperModifiers={{
offset: { offset: {
enabled: true, enabled: true,

34
app/javascript/styles/gabsocial/components.scss
View File

@ -5265,20 +5265,6 @@ noscript {
display: flex; display: flex;
align-items: center; align-items: center;
&__datepicker {
margin-left: 4px;
border-radius: 4px;
border: 1px solid #ccc;
line-height: 22px;
padding-left: 6px;
width: 165px;
@media (max-width: 580px) {
width: 146px;
font-size: 10px;
}
}
.react-datepicker-popper { .react-datepicker-popper {
z-index: 1000; z-index: 1000;
} }
@ -5319,3 +5305,23 @@ noscript {
} }
} }
} }
.schedule-post-dropdown-wrapper {
margin-left: 4px;
border-radius: 4px;
border: 1px solid darken($simple-background-color, 20%);
line-height: 22px;
padding-left: 6px;
text-align: left;
width: 145px;
height: 26px;
line-height: 20px;
color: $inverted-text-color;
background: $simple-background-color;
@media (max-width: 580px) {
width: 138px;
font-size: 10px;
padding-left: 2px;
}
}