From f6d45b8b1ba4121562461eb26a09097e0c1abb00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 12 May 2022 14:17:38 +0200 Subject: [PATCH 1/3] Fix post scheduling styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../compose/components/schedule_form.js | Bin 3691 -> 3876 bytes app/styles/components/datepicker.scss | 8 ++++++++ 2 files changed, 8 insertions(+) diff --git a/app/soapbox/features/compose/components/schedule_form.js b/app/soapbox/features/compose/components/schedule_form.js index 866b614290231cd9ecd573b93192ac05b7b90874..73a94d0effac278275662a4eff804d08bac5e617 100644 GIT binary patch delta 517 zcmZ9Jy-ve06ou6a2`LZ+Y={b77EDD$qEa!C1_4>}?5-`yL;fm`I;9VG-O!Pn%XVU0%W96)R2qh>fc(I=p z31&%94-2)eS(}Z2rL?YG-G1&6&MpR0a<)+SbJ?BedNNwjGg@fDQ_OXc*EM8>Sspyf zQ-aLjX>=nT8!gL%9)G0K$y__OtfJA^Fk+lE- delta 355 zcmZ1?_gZGc+sP)3mXlX8PMr8mS3*xuAA%B-OEUBGiuIH8a|`l|Q#YG4y<}%j$t;_! z&nqsYo|0IST9BEXom!->qfo7Y#Mhl1!)u_YP^(#M$E5%THb8v}$vKI|#eRvoskTU} zN2d2qucy+Dun4O%Mmz input { + @apply dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500; + + &.has-error { + @apply text-red-600 border-red-600; + } +} + .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { @apply border-b-white; From 15302962441792ef5d16cc434e5fe49d4b3a1112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 12 May 2022 14:51:59 +0200 Subject: [PATCH 2/3] dark styles for datepicker MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/styles/components/datepicker.scss | 43 ++++++++++++++++----------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss index af5f7ab3fd..ed5a5d8397 100644 --- a/app/styles/components/datepicker.scss +++ b/app/styles/components/datepicker.scss @@ -1,5 +1,5 @@ .react-datepicker { - @apply p-4 font-sans text-xs text-gray-900 border border-solid border-gray-200 rounded-lg; + @apply dark:bg-slate-900 dark:border-slate-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg; } .react-datepicker__input-container > input { @@ -12,11 +12,11 @@ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { - @apply border-b-white; + @apply border-b-white dark:border-b-slate-900; } .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before { - @apply border-b-gray-200; + @apply border-b-gray-200 dark:border-b-slate-700; } .react-datepicker__header:not(.react-datepicker__header--has-time-select) { @@ -24,14 +24,14 @@ } .react-datepicker__header { - @apply bg-white border-b-0 py-1 px-0; + @apply bg-white dark:bg-slate-900 border-b-0 py-1 px-0; // border-top-left-radius: var(--border-radius-lg); } .react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header { - @apply text-gray-900 font-bold text-sm; + @apply text-gray-900 dark:text-gray-300 font-bold text-sm; } .react-datepicker__current-month { @@ -39,7 +39,7 @@ } .react-datepicker__navigation { - @apply top-4 h-8 w-8 rounded hover:bg-gray-50; + @apply top-4 h-8 w-8 rounded hover:bg-gray-50 dark:hover:bg-slate-900/50; } .react-datepicker__navigation-icon { @@ -78,24 +78,37 @@ .react-datepicker__day-names, .react-datepicker__week { - display: flex; - justify-content: space-between; + @apply flex justify-between; +} + +.react-datepicker__time { + @apply dark:bg-slate-900; +} + +.react-datepicker__time-container { + @apply dark:border-slate-700; } .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { - @apply text-gray-900; + @apply text-gray-900 dark:text-gray-300; width: 30px; height: 30px; line-height: 30px; } +.react-datepicker__time-list-item--disabled, +.react-datepicker__day--disabled { + @apply text-gray-400 dark:text-gray-500; +} + .react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, -.react-datepicker__year-text:hover { - @apply bg-gray-100 rounded; +.react-datepicker__year-text:hover, +.react-datepicker__time-list-item:hover { + @apply bg-gray-100 dark:bg-slate-700 rounded; } .react-datepicker__day--selected, @@ -110,16 +123,12 @@ .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { - @apply bg-primary-600 hover:bg-primary-700 text-white rounded; -} - -.react-datepicker__day--disabled { - @apply text-gray-400; + @apply bg-primary-600 hover:bg-primary-700 dark:bg-slate-300 dark:hover:bg-slate-200 text-white dark:text-black rounded; } .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected { - @apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400; + @apply bg-primary-50 hover:bg-primary-100 dark:bg-slate-700 dark:hover:bg-slate-600 text-primary-600 dark:text-primary-400; } From c942c494c80839c4ea6fcbcde137c4694e1fd886 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 12 May 2022 15:42:04 +0200 Subject: [PATCH 3/3] Convert ScheduleForm to typescript, remove openDatePicker() MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../compose/components/schedule_form.js | Bin 3876 -> 0 bytes .../compose/components/schedule_form.tsx | 84 ++++++++++++++++++ 2 files changed, 84 insertions(+) delete mode 100644 app/soapbox/features/compose/components/schedule_form.js create mode 100644 app/soapbox/features/compose/components/schedule_form.tsx diff --git a/app/soapbox/features/compose/components/schedule_form.js b/app/soapbox/features/compose/components/schedule_form.js deleted file mode 100644 index 73a94d0effac278275662a4eff804d08bac5e617..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3876 zcma)9UvJws5P$clxV=;oW?Na;?ZLIWt_gzXA#IRmPs32i5*>4uNsXl9WP*WxntiZ+ zlHHM%C@DraBXBJ8c)UNq``syOGy`oEFHH1$HskwRDg#B8YyBbLGYwlM_Ym0yK?^A5 zg>ICr@1E*jrpD)mp@krG%ksi_9g2R3trkkQ<$_%^t@C@P=fK79tT0!?RCBnLYM&d! zO1}-qp_T&xY?=G^c}kQyHIXl)Ax9 zYhQXt5^$WOE|;$7n%w#+HMcgwy%AQ=F$t#UHRi#vJ4sO1=z*q3$lic8o&fN`R&I59 z&k&mNuTckwd2lBBErFlFsD{A`wt1x)+1t5V{%roAj`?hC+y&QlZi-#7uk!41zV{wKpq>tT4bf`Rv_P(8{WSj>*=B}Gy%gQpHH7A*e! zE!*PJf}l4zN2)xD;ASr`YbGer{Z^cWgM16|H}=+WI>GWr0u!VGV6wSH7=J{KF_oAD zAQ{E=d7~6!;-k83i2dlsQ5`s)&fga=K(K>ll{g`d?`5NOd^QLFm%us;B4pZWvEE6p zFOeUvxo8a2m)Ivi$U{t&)|H`S$n7&BjAL&~|05xWA-cm*eGA{8(IOME8kn`l z{uwldjXol~oO+a}-3%<1wjrY($i_7i+l&G*1R;CCbY8f2;MOgC1G3TlA(Whd*jobh zv6*EKK$gwDdlqv;DTKoWWnI=h{KgROjP#qttJEvv(bX&01Be<4#Yg%75SL)rz-I(@$y6^GipE9JQA4Mu&!1?js=IxF05X%tssTNQI9Y{b7{vB0z#6?Q zzP#~I_-rQ@ZJsKYMSH}38HG*Uem1u8GK!r*!q;*^N?RR7HC>i#jx4-jV5cU zTpWQN!@ZQ)wimLEc-=qtaUvV))TJd7!fYWQ8Z26gn5vEV{-Ilyi8( z5A0U^J>+>bk*A8jB2OQ13d!20p5S!BoZMaa>@i%eBZagODEkD;}7 zGng!z1 z?C|YLt-{)mXJ=zYS`}HV+$?z}H g7;cb;+OI*%O|K*UBTjK7(gkjv4(P6%Gmf)=0s9-$0{{R3 diff --git a/app/soapbox/features/compose/components/schedule_form.tsx b/app/soapbox/features/compose/components/schedule_form.tsx new file mode 100644 index 0000000000..6467ba51ef --- /dev/null +++ b/app/soapbox/features/compose/components/schedule_form.tsx @@ -0,0 +1,84 @@ +'use strict'; + +import classNames from 'classnames'; +import React from 'react'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; + +import { setSchedule, removeSchedule } from 'soapbox/actions/compose'; +import IconButton from 'soapbox/components/icon_button'; +import { HStack, Stack, Text } from 'soapbox/components/ui'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { DatePicker } from 'soapbox/features/ui/util/async-components'; +import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; + +const isCurrentOrFutureDate = (date: Date) => { + return date && new Date().setHours(0, 0, 0, 0) <= new Date(date).setHours(0, 0, 0, 0); +}; + +const isFiveMinutesFromNow = (time: Date) => { + const fiveMinutesFromNow = new Date(new Date().getTime() + 300000); // now, plus five minutes (Pleroma won't schedule posts ) + const selectedDate = new Date(time); + + return fiveMinutesFromNow.getTime() < selectedDate.getTime(); +}; + +const messages = defineMessages({ + schedule: { id: 'schedule.post_time', defaultMessage: 'Post Date/Time' }, + remove: { id: 'schedule.remove', defaultMessage: 'Remove schedule' }, +}); + +const ScheduleForm: React.FC = () => { + const dispatch = useAppDispatch(); + const intl = useIntl(); + + const scheduledAt = useAppSelector((state) => state.compose.get('schedule')); + const active = !!scheduledAt; + + const onSchedule = (date: Date) => { + dispatch(setSchedule(date)); + }; + + const handleRemove = (e: React.MouseEvent) => { + dispatch(removeSchedule()); + e.preventDefault(); + }; + + if (!active) { + return null; + } + + return ( + + + + + + + {Component => ()} + + + + + ); +}; + +export default ScheduleForm;