From 10922294ffd2c83e155f020896318d16f3764e8d Mon Sep 17 00:00:00 2001 From: Robert Laurenz <8169746+laurenzcodes@users.noreply.github.com> Date: Fri, 28 Oct 2022 12:46:41 +0200 Subject: fix(component): adjust style of counter button to fix overflow issue (#19494) --- app/javascript/styles/mastodon/components.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 69301fb05..73f00e4c5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -279,11 +279,12 @@ display: inline-flex; align-items: center; width: auto !important; + padding: 0 4px 0 2px; } &__counter { display: inline-block; - width: 14px; + width: auto; margin-left: 4px; font-size: 12px; font-weight: 500; -- cgit From d9d722d74b2cb9bf30fa4cc98af6ddbeca003ebc Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 28 Oct 2022 12:56:32 +0200 Subject: Change admin announcement edition interface to use datetime-local (#18321) * Change admin announcement edition interface to use datetime-local * Dynamically set announcement stop date as required if start date is set, set minimum date for stop date * Change `all_day` to not be bound to presence of time-range * Add pattern and placeholder as minimal fallback for browsers not supporting datetime-local * Display datetime-local inputs as local time Co-authored-by: Eugen Rochko --- app/javascript/packs/admin.js | 54 ++++++++++++++++++++++++++++ app/javascript/styles/mastodon/forms.scss | 5 ++- app/models/announcement.rb | 5 --- app/views/admin/announcements/edit.html.haml | 7 ++-- app/views/admin/announcements/new.html.haml | 9 +++-- 5 files changed, 69 insertions(+), 11 deletions(-) (limited to 'app') diff --git a/app/javascript/packs/admin.js b/app/javascript/packs/admin.js index b733d6b18..de86e0e11 100644 --- a/app/javascript/packs/admin.js +++ b/app/javascript/packs/admin.js @@ -2,6 +2,24 @@ import './public-path'; import { delegate } from '@rails/ujs'; import ready from '../mastodon/ready'; +const setAnnouncementEndsAttributes = (target) => { + const valid = target?.value && target?.validity?.valid; + const element = document.querySelector('input[type="datetime-local"]#announcement_ends_at'); + if (valid) { + element.classList.remove('optional'); + element.required = true; + element.min = target.value; + } else { + element.classList.add('optional'); + element.removeAttribute('required'); + element.removeAttribute('min'); + } +}; + +delegate(document, 'input[type="datetime-local"]#announcement_starts_at', 'change', ({ target }) => { + setAnnouncementEndsAttributes(target); +}); + const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]'; const showSelectAll = () => { @@ -141,6 +159,20 @@ const onChangeRegistrationMode = (target) => { }); }; +const convertUTCDateTimeToLocal = (value) => { + const date = new Date(value + 'Z'); + const twoChars = (x) => (x.toString().padStart(2, '0')); + return `${date.getFullYear()}-${twoChars(date.getMonth()+1)}-${twoChars(date.getDate())}T${twoChars(date.getHours())}:${twoChars(date.getMinutes())}`; +}; + +const convertLocalDatetimeToUTC = (value) => { + const re = /^([0-9]{4,})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2})/; + const match = re.exec(value); + const date = new Date(match[1], match[2] - 1, match[3], match[4], match[5]); + const fullISO8601 = date.toISOString(); + return fullISO8601.slice(0, fullISO8601.indexOf('T') + 6); +}; + delegate(document, '#form_admin_settings_registrations_mode', 'change', ({ target }) => onChangeRegistrationMode(target)); ready(() => { @@ -163,6 +195,28 @@ ready(() => { } }); + [].forEach.call(document.querySelectorAll('input[type="datetime-local"]'), element => { + if (element.value) { + element.value = convertUTCDateTimeToLocal(element.value); + } + if (element.placeholder) { + element.placeholder = convertUTCDateTimeToLocal(element.placeholder); + } + }); + + delegate(document, 'form', 'submit', ({ target }) => { + [].forEach.call(target.querySelectorAll('input[type="datetime-local"]'), element => { + if (element.value && element.validity.valid) { + element.value = convertLocalDatetimeToUTC(element.value); + } + }); + }); + + const announcementStartsAt = document.querySelector('input[type="datetime-local"]#announcement_starts_at'); + if (announcementStartsAt) { + setAnnouncementEndsAttributes(announcementStartsAt); + } + const React = require('react'); const ReactDOM = require('react-dom'); diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 25c9c9fe5..a3ddc7636 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -405,6 +405,7 @@ code { input[type="email"], input[type="password"], input[type="url"], + input[type="datetime-local"], textarea { box-sizing: border-box; font-size: 16px; @@ -445,7 +446,8 @@ code { input[type="text"], input[type="number"], input[type="email"], - input[type="password"] { + input[type="password"], + input[type="datetime-local"] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); @@ -461,6 +463,7 @@ code { input[type="number"], input[type="email"], input[type="password"], + input[type="datetime-local"], textarea, select { border-color: lighten($error-red, 12%); diff --git a/app/models/announcement.rb b/app/models/announcement.rb index bedced9de..4b2cb4c6d 100644 --- a/app/models/announcement.rb +++ b/app/models/announcement.rb @@ -31,7 +31,6 @@ class Announcement < ApplicationRecord validates :starts_at, presence: true, if: -> { ends_at.present? } validates :ends_at, presence: true, if: -> { starts_at.present? } - before_validation :set_all_day before_validation :set_published, on: :create def to_log_human_identifier @@ -89,10 +88,6 @@ class Announcement < ApplicationRecord private - def set_all_day - self.all_day = false if starts_at.blank? || ends_at.blank? - end - def set_published return unless scheduled_at.blank? || scheduled_at.past? diff --git a/app/views/admin/announcements/edit.html.haml b/app/views/admin/announcements/edit.html.haml index 5f56db5e7..e20a839b9 100644 --- a/app/views/admin/announcements/edit.html.haml +++ b/app/views/admin/announcements/edit.html.haml @@ -1,12 +1,15 @@ - content_for :page_title do = t('.title') +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + = simple_form_for @announcement, url: admin_announcement_path(@announcement) do |f| = render 'shared/error_messages', object: @announcement .fields-group - = f.input :starts_at, include_blank: true, wrapper: :with_block_label - = f.input :ends_at, include_blank: true, wrapper: :with_block_label + = f.input :starts_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } + = f.input :ends_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } .fields-group = f.input :all_day, as: :boolean, wrapper: :with_label diff --git a/app/views/admin/announcements/new.html.haml b/app/views/admin/announcements/new.html.haml index a5298c5f6..d5881b7aa 100644 --- a/app/views/admin/announcements/new.html.haml +++ b/app/views/admin/announcements/new.html.haml @@ -1,12 +1,15 @@ - content_for :page_title do = t('.title') +- content_for :header_tags do + = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous' + = simple_form_for @announcement, url: admin_announcements_path do |f| = render 'shared/error_messages', object: @announcement .fields-group - = f.input :starts_at, include_blank: true, wrapper: :with_block_label - = f.input :ends_at, include_blank: true, wrapper: :with_block_label + = f.input :starts_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } + = f.input :ends_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } .fields-group = f.input :all_day, as: :boolean, wrapper: :with_label @@ -15,7 +18,7 @@ = f.input :text, wrapper: :with_block_label .fields-group - = f.input :scheduled_at, include_blank: true, wrapper: :with_block_label + = f.input :scheduled_at, include_blank: true, wrapper: :with_block_label, html5: true, input_html: { pattern: '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}(:[0-9]{2}){1,2}', placeholder: Time.now.strftime('%FT%R') } .actions = f.button :button, t('.create'), type: :submit -- cgit From 923f06a07c851b25b989412f341f87f8b8fff42f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2022 12:56:51 +0200 Subject: Fix number of uses being shown again on trending hashtags in web UI (#19484) --- app/javascript/mastodon/components/hashtag.js | 1 - app/javascript/styles/mastodon/components.scss | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'app') diff --git a/app/javascript/mastodon/components/hashtag.js b/app/javascript/mastodon/components/hashtag.js index 8dd27290a..75220211e 100644 --- a/app/javascript/mastodon/components/hashtag.js +++ b/app/javascript/mastodon/components/hashtag.js @@ -56,7 +56,6 @@ export const ImmutableHashtag = ({ hashtag }) => ( href={hashtag.get('url')} to={`/tags/${hashtag.get('name')}`} people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1} - uses={hashtag.getIn(['history', 0, 'uses']) * 1 + hashtag.getIn(['history', 1, 'uses']) * 1} history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()} /> ); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 73f00e4c5..ded5634d6 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7278,6 +7278,7 @@ noscript { align-items: center; padding: 15px; border-bottom: 1px solid lighten($ui-base-color, 8%); + gap: 15px; &:last-child { border-bottom: 0; @@ -7319,8 +7320,6 @@ noscript { font-size: 24px; font-weight: 500; text-align: right; - padding-right: 15px; - margin-left: 5px; color: $secondary-text-color; text-decoration: none; } -- cgit From 5fa340931e2bd39a4bcccc9a97ad58e13a2d56ab Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2022 19:34:22 +0200 Subject: Fix closed registrations message not appearing in web UI (#19508) Regression from #19486 --- .../mastodon/features/closed_registrations_modal/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/javascript/mastodon/features/closed_registrations_modal/index.js b/app/javascript/mastodon/features/closed_registrations_modal/index.js index 062045b83..275bd50aa 100644 --- a/app/javascript/mastodon/features/closed_registrations_modal/index.js +++ b/app/javascript/mastodon/features/closed_registrations_modal/index.js @@ -6,7 +6,7 @@ import { domain } from 'mastodon/initial_state'; import { fetchServer } from 'mastodon/actions/server'; const mapStateToProps = state => ({ - closed_registrations_message: state.getIn(['server', 'server', 'registrations', 'closed_registrations_message']), + message: state.getIn(['server', 'server', 'registrations', 'message']), }); export default @connect(mapStateToProps) @@ -20,11 +20,11 @@ class ClosedRegistrationsModal extends ImmutablePureComponent { render () { let closedRegistrationsMessage; - if (this.props.closed_registrations_message) { + if (this.props.message) { closedRegistrationsMessage = (

); } else { -- cgit