From c76ae7a5c0d247264afa896f081db9d1fd278711 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Fri, 15 Mar 2024 14:16:45 +0100 Subject: [PATCH 1/9] Convert `packs/public.jsx` to Typescript (#29501) --- .../components/relative_timestamp.tsx | 2 +- app/javascript/packs/public.jsx | 285 ----------- app/javascript/packs/public.tsx | 462 ++++++++++++++++++ 3 files changed, 463 insertions(+), 286 deletions(-) delete mode 100644 app/javascript/packs/public.jsx create mode 100644 app/javascript/packs/public.tsx diff --git a/app/javascript/mastodon/components/relative_timestamp.tsx b/app/javascript/mastodon/components/relative_timestamp.tsx index 12530c2b17..b9e1e4f8fd 100644 --- a/app/javascript/mastodon/components/relative_timestamp.tsx +++ b/app/javascript/mastodon/components/relative_timestamp.tsx @@ -102,7 +102,7 @@ const getUnitDelay = (units: string) => { }; export const timeAgoString = ( - intl: IntlShape, + intl: Pick, date: Date, now: number, year: number, diff --git a/app/javascript/packs/public.jsx b/app/javascript/packs/public.jsx deleted file mode 100644 index d8a4c16034..0000000000 --- a/app/javascript/packs/public.jsx +++ /dev/null @@ -1,285 +0,0 @@ -import { createRoot } from 'react-dom/client'; - -import './public-path'; - -import { IntlMessageFormat } from 'intl-messageformat'; -import { defineMessages } from 'react-intl'; - -import Rails from '@rails/ujs'; -import axios from 'axios'; -import { throttle } from 'lodash'; - -import { start } from '../mastodon/common'; -import { timeAgoString } from '../mastodon/components/relative_timestamp'; -import emojify from '../mastodon/features/emoji/emoji'; -import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions'; -import { loadLocale, getLocale } from '../mastodon/locales'; -import { loadPolyfills } from '../mastodon/polyfills'; -import ready from '../mastodon/ready'; - -import 'cocoon-js-vanilla'; - -start(); - -const messages = defineMessages({ - usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' }, - passwordExceedsLength: { id: 'password_confirmation.exceeds_maxlength', defaultMessage: 'Password confirmation exceeds the maximum password length' }, - passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' }, -}); - -window.addEventListener('message', e => { - const data = e.data || {}; - - if (!window.parent || data.type !== 'setHeight') { - return; - } - - ready(() => { - window.parent.postMessage({ - type: 'setHeight', - id: data.id, - height: document.getElementsByTagName('html')[0].scrollHeight, - }, '*'); - }); -}); - -function loaded() { - const { messages: localeData } = getLocale(); - - const locale = document.documentElement.lang; - - const dateTimeFormat = new Intl.DateTimeFormat(locale, { - year: 'numeric', - month: 'long', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - }); - - const dateFormat = new Intl.DateTimeFormat(locale, { - year: 'numeric', - month: 'short', - day: 'numeric', - timeFormat: false, - }); - - const timeFormat = new Intl.DateTimeFormat(locale, { - timeStyle: 'short', - }); - - const formatMessage = ({ id, defaultMessage }, values) => { - const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale); - return messageFormat.format(values); - }; - - document.querySelectorAll('.emojify').forEach((content) => { - content.innerHTML = emojify(content.innerHTML); - }); - - document.querySelectorAll('time.formatted').forEach((content) => { - const datetime = new Date(content.getAttribute('datetime')); - const formattedDate = dateTimeFormat.format(datetime); - - content.title = formattedDate; - content.textContent = formattedDate; - }); - - const isToday = date => { - const today = new Date(); - - return date.getDate() === today.getDate() && - date.getMonth() === today.getMonth() && - date.getFullYear() === today.getFullYear(); - }; - const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale); - - document.querySelectorAll('time.relative-formatted').forEach((content) => { - const datetime = new Date(content.getAttribute('datetime')); - - let formattedContent; - - if (isToday(datetime)) { - const formattedTime = timeFormat.format(datetime); - - formattedContent = todayFormat.format({ time: formattedTime }); - } else { - formattedContent = dateFormat.format(datetime); - } - - content.title = formattedContent; - content.textContent = formattedContent; - }); - - document.querySelectorAll('time.time-ago').forEach((content) => { - const datetime = new Date(content.getAttribute('datetime')); - const now = new Date(); - - const timeGiven = content.getAttribute('datetime').includes('T'); - content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime); - content.textContent = timeAgoString({ - formatMessage, - formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), - }, datetime, now, now.getFullYear(), timeGiven); - }); - - const reactComponents = document.querySelectorAll('[data-component]'); - - if (reactComponents.length > 0) { - import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container') - .then(({ default: MediaContainer }) => { - reactComponents.forEach((component) => { - Array.from(component.children).forEach((child) => { - component.removeChild(child); - }); - }); - - const content = document.createElement('div'); - - const root = createRoot(content); - root.render(); - document.body.appendChild(content); - }) - .catch(error => { - console.error(error); - }); - } - - Rails.delegate(document, '#user_account_attributes_username', 'input', throttle(({ target }) => { - if (target.value && target.value.length > 0) { - axios.get('/api/v1/accounts/lookup', { params: { acct: target.value } }).then(() => { - target.setCustomValidity(formatMessage(messages.usernameTaken)); - }).catch(() => { - target.setCustomValidity(''); - }); - } else { - target.setCustomValidity(''); - } - }, 500, { leading: false, trailing: true })); - - Rails.delegate(document, '#user_password,#user_password_confirmation', 'input', () => { - const password = document.getElementById('user_password'); - const confirmation = document.getElementById('user_password_confirmation'); - if (!confirmation) return; - - if (confirmation.value && confirmation.value.length > password.maxLength) { - confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength)); - } else if (password.value && password.value !== confirmation.value) { - confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch)); - } else { - confirmation.setCustomValidity(''); - } - }); - - Rails.delegate(document, '.status__content__spoiler-link', 'click', function() { - const statusEl = this.parentNode.parentNode; - - if (statusEl.dataset.spoiler === 'expanded') { - statusEl.dataset.spoiler = 'folded'; - this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format(); - } else { - statusEl.dataset.spoiler = 'expanded'; - this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format(); - } - - return false; - }); - - document.querySelectorAll('.status__content__spoiler-link').forEach((spoilerLink) => { - const statusEl = spoilerLink.parentNode.parentNode; - const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more'); - spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format(); - }); -} - -Rails.delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => { - const avatar = document.getElementById(target.id + '-preview'); - const [file] = target.files || []; - const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; - - avatar.src = url; -}); - -Rails.delegate(document, '.input-copy input', 'click', ({ target }) => { - target.focus(); - target.select(); - target.setSelectionRange(0, target.value.length); -}); - -Rails.delegate(document, '.input-copy button', 'click', ({ target }) => { - const input = target.parentNode.querySelector('.input-copy__wrapper input'); - - const oldReadOnly = input.readonly; - - input.readonly = false; - input.focus(); - input.select(); - input.setSelectionRange(0, input.value.length); - - try { - if (document.execCommand('copy')) { - input.blur(); - target.parentNode.classList.add('copied'); - - setTimeout(() => { - target.parentNode.classList.remove('copied'); - }, 700); - } - } catch (err) { - console.error(err); - } - - input.readonly = oldReadOnly; -}); - -const toggleSidebar = () => { - const sidebar = document.querySelector('.sidebar ul'); - const toggleButton = document.querySelector('.sidebar__toggle__icon'); - - if (sidebar.classList.contains('visible')) { - document.body.style.overflow = null; - toggleButton.setAttribute('aria-expanded', 'false'); - } else { - document.body.style.overflow = 'hidden'; - toggleButton.setAttribute('aria-expanded', 'true'); - } - - toggleButton.classList.toggle('active'); - sidebar.classList.toggle('visible'); -}; - -Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => { - toggleSidebar(); -}); - -Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', e => { - if (e.key === ' ' || e.key === 'Enter') { - e.preventDefault(); - toggleSidebar(); - } -}); - -Rails.delegate(document, '.custom-emoji', 'mouseover', ({ target }) => target.src = target.getAttribute('data-original')); -Rails.delegate(document, '.custom-emoji', 'mouseout', ({ target }) => target.src = target.getAttribute('data-static')); - -// Empty the honeypot fields in JS in case something like an extension -// automatically filled them. -Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => { - ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => { - const field = document.getElementById(id); - if (field) { - field.value = ''; - } - }); -}); - -function main() { - ready(loaded); -} - -loadPolyfills() - .then(loadLocale) - .then(main) - .then(loadKeyboardExtensions) - .catch(error => { - console.error(error); - }); diff --git a/app/javascript/packs/public.tsx b/app/javascript/packs/public.tsx new file mode 100644 index 0000000000..044faeb296 --- /dev/null +++ b/app/javascript/packs/public.tsx @@ -0,0 +1,462 @@ +import { createRoot } from 'react-dom/client'; + +import './public-path'; + +import { IntlMessageFormat } from 'intl-messageformat'; +import type { MessageDescriptor, PrimitiveType } from 'react-intl'; +import { defineMessages } from 'react-intl'; + +import Rails from '@rails/ujs'; +import axios from 'axios'; +import { throttle } from 'lodash'; + +import { start } from '../mastodon/common'; +import { timeAgoString } from '../mastodon/components/relative_timestamp'; +import emojify from '../mastodon/features/emoji/emoji'; +import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions'; +import { loadLocale, getLocale } from '../mastodon/locales'; +import { loadPolyfills } from '../mastodon/polyfills'; +import ready from '../mastodon/ready'; + +import 'cocoon-js-vanilla'; + +start(); + +const messages = defineMessages({ + usernameTaken: { + id: 'username.taken', + defaultMessage: 'That username is taken. Try another', + }, + passwordExceedsLength: { + id: 'password_confirmation.exceeds_maxlength', + defaultMessage: 'Password confirmation exceeds the maximum password length', + }, + passwordDoesNotMatch: { + id: 'password_confirmation.mismatching', + defaultMessage: 'Password confirmation does not match', + }, +}); + +interface SetHeightMessage { + type: 'setHeight'; + id: string; + height: number; +} + +function isSetHeightMessage(data: unknown): data is SetHeightMessage { + if ( + data && + typeof data === 'object' && + 'type' in data && + data.type === 'setHeight' + ) + return true; + else return false; +} + +window.addEventListener('message', (e) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- typings are not correct, it can be null in very rare cases + if (!e.data || !isSetHeightMessage(e.data) || !window.parent) return; + + const data = e.data; + + ready(() => { + window.parent.postMessage( + { + type: 'setHeight', + id: data.id, + height: document.getElementsByTagName('html')[0].scrollHeight, + }, + '*', + ); + }).catch((e) => { + console.error('Error in setHeightMessage postMessage', e); + }); +}); + +function loaded() { + const { messages: localeData } = getLocale(); + + const locale = document.documentElement.lang; + + const dateTimeFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }); + + const dateFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'short', + day: 'numeric', + }); + + const timeFormat = new Intl.DateTimeFormat(locale, { + timeStyle: 'short', + }); + + const formatMessage = ( + { id, defaultMessage }: MessageDescriptor, + values?: Record, + ) => { + let message: string | undefined = undefined; + + if (id) message = localeData[id]; + + if (!message) message = defaultMessage as string; + + const messageFormat = new IntlMessageFormat(message, locale); + return messageFormat.format(values) as string; + }; + + document.querySelectorAll('.emojify').forEach((content) => { + content.innerHTML = emojify(content.innerHTML); + }); + + document + .querySelectorAll('time.formatted') + .forEach((content) => { + const datetime = new Date(content.dateTime); + const formattedDate = dateTimeFormat.format(datetime); + + content.title = formattedDate; + content.textContent = formattedDate; + }); + + const isToday = (date: Date) => { + const today = new Date(); + + return ( + date.getDate() === today.getDate() && + date.getMonth() === today.getMonth() && + date.getFullYear() === today.getFullYear() + ); + }; + const todayFormat = new IntlMessageFormat( + localeData['relative_format.today'] || 'Today at {time}', + locale, + ); + + document + .querySelectorAll('time.relative-formatted') + .forEach((content) => { + const datetime = new Date(content.dateTime); + + let formattedContent: string; + + if (isToday(datetime)) { + const formattedTime = timeFormat.format(datetime); + + formattedContent = todayFormat.format({ + time: formattedTime, + }) as string; + } else { + formattedContent = dateFormat.format(datetime); + } + + content.title = formattedContent; + content.textContent = formattedContent; + }); + + document + .querySelectorAll('time.time-ago') + .forEach((content) => { + const datetime = new Date(content.dateTime); + const now = new Date(); + + const timeGiven = content.dateTime.includes('T'); + content.title = timeGiven + ? dateTimeFormat.format(datetime) + : dateFormat.format(datetime); + content.textContent = timeAgoString( + { + formatMessage, + formatDate: (date: Date, options) => + new Intl.DateTimeFormat(locale, options).format(date), + }, + datetime, + now.getTime(), + now.getFullYear(), + timeGiven, + ); + }); + + const reactComponents = document.querySelectorAll('[data-component]'); + + if (reactComponents.length > 0) { + import( + /* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container' + ) + .then(({ default: MediaContainer }) => { + reactComponents.forEach((component) => { + Array.from(component.children).forEach((child) => { + component.removeChild(child); + }); + }); + + const content = document.createElement('div'); + + const root = createRoot(content); + root.render( + , + ); + document.body.appendChild(content); + + return true; + }) + .catch((error) => { + console.error(error); + }); + } + + Rails.delegate( + document, + 'input#user_account_attributes_username', + 'input', + throttle( + ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + if (target.value && target.value.length > 0) { + axios + .get('/api/v1/accounts/lookup', { params: { acct: target.value } }) + .then(() => { + target.setCustomValidity(formatMessage(messages.usernameTaken)); + return true; + }) + .catch(() => { + target.setCustomValidity(''); + }); + } else { + target.setCustomValidity(''); + } + }, + 500, + { leading: false, trailing: true }, + ), + ); + + Rails.delegate( + document, + '#user_password,#user_password_confirmation', + 'input', + () => { + const password = document.querySelector( + 'input#user_password', + ); + const confirmation = document.querySelector( + 'input#user_password_confirmation', + ); + if (!confirmation || !password) return; + + if ( + confirmation.value && + confirmation.value.length > password.maxLength + ) { + confirmation.setCustomValidity( + formatMessage(messages.passwordExceedsLength), + ); + } else if (password.value && password.value !== confirmation.value) { + confirmation.setCustomValidity( + formatMessage(messages.passwordDoesNotMatch), + ); + } else { + confirmation.setCustomValidity(''); + } + }, + ); + + Rails.delegate( + document, + 'button.status__content__spoiler-link', + 'click', + function () { + if (!(this instanceof HTMLButtonElement)) return; + + const statusEl = this.parentNode?.parentNode; + + if ( + !( + statusEl instanceof HTMLDivElement && + statusEl.classList.contains('.status__content') + ) + ) + return; + + if (statusEl.dataset.spoiler === 'expanded') { + statusEl.dataset.spoiler = 'folded'; + this.textContent = new IntlMessageFormat( + localeData['status.show_more'] || 'Show more', + locale, + ).format() as string; + } else { + statusEl.dataset.spoiler = 'expanded'; + this.textContent = new IntlMessageFormat( + localeData['status.show_less'] || 'Show less', + locale, + ).format() as string; + } + }, + ); + + document + .querySelectorAll('button.status__content__spoiler-link') + .forEach((spoilerLink) => { + const statusEl = spoilerLink.parentNode?.parentNode; + + if ( + !( + statusEl instanceof HTMLDivElement && + statusEl.classList.contains('.status__content') + ) + ) + return; + + const message = + statusEl.dataset.spoiler === 'expanded' + ? localeData['status.show_less'] || 'Show less' + : localeData['status.show_more'] || 'Show more'; + spoilerLink.textContent = new IntlMessageFormat( + message, + locale, + ).format() as string; + }); +} + +Rails.delegate( + document, + '#edit_profile input[type=file]', + 'change', + ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + const avatar = document.querySelector( + `img#${target.id}-preview`, + ); + + if (!avatar) return; + + let file: File | undefined; + if (target.files) file = target.files[0]; + + const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; + + if (url) avatar.src = url; + }, +); + +Rails.delegate(document, '.input-copy input', 'click', ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + target.focus(); + target.select(); + target.setSelectionRange(0, target.value.length); +}); + +Rails.delegate(document, '.input-copy button', 'click', ({ target }) => { + if (!(target instanceof HTMLButtonElement)) return; + + const input = target.parentNode?.querySelector( + '.input-copy__wrapper input', + ); + + if (!input) return; + + const oldReadOnly = input.readOnly; + + input.readOnly = false; + input.focus(); + input.select(); + input.setSelectionRange(0, input.value.length); + + try { + if (document.execCommand('copy')) { + input.blur(); + + const parent = target.parentElement; + + if (!parent) return; + parent.classList.add('copied'); + + setTimeout(() => { + parent.classList.remove('copied'); + }, 700); + } + } catch (err) { + console.error(err); + } + + input.readOnly = oldReadOnly; +}); + +const toggleSidebar = () => { + const sidebar = document.querySelector('.sidebar ul'); + const toggleButton = document.querySelector( + 'a.sidebar__toggle__icon', + ); + + if (!sidebar || !toggleButton) return; + + if (sidebar.classList.contains('visible')) { + document.body.style.overflow = ''; + toggleButton.setAttribute('aria-expanded', 'false'); + } else { + document.body.style.overflow = 'hidden'; + toggleButton.setAttribute('aria-expanded', 'true'); + } + + toggleButton.classList.toggle('active'); + sidebar.classList.toggle('visible'); +}; + +Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => { + toggleSidebar(); +}); + +Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', (e) => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault(); + toggleSidebar(); + } +}); + +Rails.delegate(document, 'img.custom-emoji', 'mouseover', ({ target }) => { + if (target instanceof HTMLImageElement && target.dataset.original) + target.src = target.dataset.original; +}); +Rails.delegate(document, 'img.custom-emoji', 'mouseout', ({ target }) => { + if (target instanceof HTMLImageElement && target.dataset.static) + target.src = target.dataset.static; +}); + +// Empty the honeypot fields in JS in case something like an extension +// automatically filled them. +Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => { + [ + 'user_website', + 'user_confirm_password', + 'registration_user_website', + 'registration_user_confirm_password', + ].forEach((id) => { + const field = document.querySelector(`input#${id}`); + if (field) { + field.value = ''; + } + }); +}); + +function main() { + ready(loaded).catch((error) => { + console.error(error); + }); +} + +loadPolyfills() + .then(loadLocale) + .then(main) + .then(loadKeyboardExtensions) + .catch((error) => { + console.error(error); + }); From 4f4132f1a11797bf1aecc66ae5735257845953ae Mon Sep 17 00:00:00 2001 From: Matt Jankowski Date: Fri, 15 Mar 2024 10:26:23 -0400 Subject: [PATCH 2/9] Add diagnostic message for failure during CLI search deploy (#29462) --- lib/mastodon/cli/search.rb | 8 ++++++++ spec/lib/mastodon/cli/search_spec.rb | 11 +++++++++++ 2 files changed, 19 insertions(+) diff --git a/lib/mastodon/cli/search.rb b/lib/mastodon/cli/search.rb index 5901c07776..3a73c9c047 100644 --- a/lib/mastodon/cli/search.rb +++ b/lib/mastodon/cli/search.rb @@ -100,6 +100,14 @@ module Mastodon::CLI progress.finish say("Indexed #{added} records, de-indexed #{removed}", :green, true) + rescue Elasticsearch::Transport::Transport::ServerError => e + fail_with_message <<~ERROR + There was an issue connecting to the search server. Make sure the + server is configured and running correctly, and that the environment + variable settings match what the server is expecting. + + #{e.message} + ERROR end private diff --git a/spec/lib/mastodon/cli/search_spec.rb b/spec/lib/mastodon/cli/search_spec.rb index 8cce2c6ee2..ed3789c3e7 100644 --- a/spec/lib/mastodon/cli/search_spec.rb +++ b/spec/lib/mastodon/cli/search_spec.rb @@ -33,6 +33,17 @@ describe Mastodon::CLI::Search do end end + context 'when server communication raises an error' do + let(:options) { { reset_chewy: true } } + + before { allow(Chewy::Stash::Specification).to receive(:reset!).and_raise(Elasticsearch::Transport::Transport::Errors::InternalServerError) } + + it 'Exits with error message' do + expect { subject } + .to raise_error(Thor::Error, /issue connecting to the search/) + end + end + context 'without options' do before { stub_search_indexes } From be7a68b09590a553d607b1fe99adf6916618d5d3 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 15 Mar 2024 17:06:48 +0100 Subject: [PATCH 3/9] Change Explore icon to compass in advanced interface (#29610) --- app/javascript/mastodon/features/getting_started/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx index d84c85806e..a686a0a849 100644 --- a/app/javascript/mastodon/features/getting_started/index.jsx +++ b/app/javascript/mastodon/features/getting_started/index.jsx @@ -11,6 +11,7 @@ import { connect } from 'react-redux'; import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react'; +import ExploreIcon from '@/material-icons/400-24px/explore.svg?react'; import PeopleIcon from '@/material-icons/400-24px/group.svg?react'; import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; @@ -19,7 +20,6 @@ import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react'; import PublicIcon from '@/material-icons/400-24px/public.svg?react'; import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react'; import StarIcon from '@/material-icons/400-24px/star.svg?react'; -import TagIcon from '@/material-icons/400-24px/tag.svg?react'; import { fetchFollowRequests } from 'mastodon/actions/accounts'; import Column from 'mastodon/components/column'; import ColumnHeader from 'mastodon/components/column_header'; @@ -112,7 +112,7 @@ class GettingStarted extends ImmutablePureComponent { if (showTrends) { navItems.push( - , + , ); } From ec19d0a14bd8f5e76293ca52cf67972e01c2135f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 15 Mar 2024 18:36:41 +0100 Subject: [PATCH 4/9] Change mute, block and domain block confirmations in web UI (#29576) --- app/javascript/mastodon/actions/blocks.js | 15 +- .../mastodon/actions/domain_blocks.js | 11 + app/javascript/mastodon/actions/mutes.js | 32 +-- .../mastodon/components/check_box.tsx | 39 +++ .../mastodon/components/status_action_bar.jsx | 2 +- .../mastodon/containers/status_container.jsx | 15 +- .../account_timeline/components/header.jsx | 6 +- .../containers/header_container.jsx | 13 +- .../features/status/components/action_bar.jsx | 2 +- .../mastodon/features/status/index.jsx | 15 +- .../features/ui/components/block_modal.jsx | 151 ++++++------ .../ui/components/domain_block_modal.jsx | 106 ++++++++ .../features/ui/components/modal_root.jsx | 2 + .../features/ui/components/mute_modal.jsx | 228 ++++++++++-------- .../features/ui/util/async-components.js | 4 + app/javascript/mastodon/locales/en.json | 31 ++- app/javascript/mastodon/reducers/blocks.js | 22 -- app/javascript/mastodon/reducers/index.ts | 4 - app/javascript/mastodon/reducers/mutes.js | 31 --- .../400-24px/domain_disabled-fill.svg | 1 + .../400-24px/domain_disabled.svg | 1 + .../material-icons/400-24px/history-fill.svg | 1 + .../material-icons/400-24px/history.svg | 1 + .../400-24px/person_remove-fill.svg | 1 + .../material-icons/400-24px/person_remove.svg | 1 + .../styles/mastodon/components.scss | 223 +++++++++++++++-- app/javascript/styles/mastodon/variables.scss | 11 +- 27 files changed, 620 insertions(+), 349 deletions(-) create mode 100644 app/javascript/mastodon/components/check_box.tsx create mode 100644 app/javascript/mastodon/features/ui/components/domain_block_modal.jsx delete mode 100644 app/javascript/mastodon/reducers/blocks.js delete mode 100644 app/javascript/mastodon/reducers/mutes.js create mode 100644 app/javascript/material-icons/400-24px/domain_disabled-fill.svg create mode 100644 app/javascript/material-icons/400-24px/domain_disabled.svg create mode 100644 app/javascript/material-icons/400-24px/history-fill.svg create mode 100644 app/javascript/material-icons/400-24px/history.svg create mode 100644 app/javascript/material-icons/400-24px/person_remove-fill.svg create mode 100644 app/javascript/material-icons/400-24px/person_remove.svg diff --git a/app/javascript/mastodon/actions/blocks.js b/app/javascript/mastodon/actions/blocks.js index e293657ad3..54296d0905 100644 --- a/app/javascript/mastodon/actions/blocks.js +++ b/app/javascript/mastodon/actions/blocks.js @@ -12,8 +12,6 @@ export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST'; export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS'; export const BLOCKS_EXPAND_FAIL = 'BLOCKS_EXPAND_FAIL'; -export const BLOCKS_INIT_MODAL = 'BLOCKS_INIT_MODAL'; - export function fetchBlocks() { return (dispatch, getState) => { dispatch(fetchBlocksRequest()); @@ -90,11 +88,12 @@ export function expandBlocksFail(error) { export function initBlockModal(account) { return dispatch => { - dispatch({ - type: BLOCKS_INIT_MODAL, - account, - }); - - dispatch(openModal({ modalType: 'BLOCK' })); + dispatch(openModal({ + modalType: 'BLOCK', + modalProps: { + accountId: account.get('id'), + acct: account.get('acct'), + }, + })); }; } diff --git a/app/javascript/mastodon/actions/domain_blocks.js b/app/javascript/mastodon/actions/domain_blocks.js index 718002613f..55c0a6ce9d 100644 --- a/app/javascript/mastodon/actions/domain_blocks.js +++ b/app/javascript/mastodon/actions/domain_blocks.js @@ -1,6 +1,8 @@ import api, { getLinks } from '../api'; import { blockDomainSuccess, unblockDomainSuccess } from "./domain_blocks_typed"; +import { openModal } from './modal'; + export * from "./domain_blocks_typed"; @@ -150,3 +152,12 @@ export function expandDomainBlocksFail(error) { error, }; } + +export const initDomainBlockModal = account => dispatch => dispatch(openModal({ + modalType: 'DOMAIN_BLOCK', + modalProps: { + domain: account.get('acct').split('@')[1], + acct: account.get('acct'), + accountId: account.get('id'), + }, +})); diff --git a/app/javascript/mastodon/actions/mutes.js b/app/javascript/mastodon/actions/mutes.js index fb041078b8..99c113f414 100644 --- a/app/javascript/mastodon/actions/mutes.js +++ b/app/javascript/mastodon/actions/mutes.js @@ -12,10 +12,6 @@ export const MUTES_EXPAND_REQUEST = 'MUTES_EXPAND_REQUEST'; export const MUTES_EXPAND_SUCCESS = 'MUTES_EXPAND_SUCCESS'; export const MUTES_EXPAND_FAIL = 'MUTES_EXPAND_FAIL'; -export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL'; -export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS'; -export const MUTES_CHANGE_DURATION = 'MUTES_CHANGE_DURATION'; - export function fetchMutes() { return (dispatch, getState) => { dispatch(fetchMutesRequest()); @@ -92,26 +88,12 @@ export function expandMutesFail(error) { export function initMuteModal(account) { return dispatch => { - dispatch({ - type: MUTES_INIT_MODAL, - account, - }); - - dispatch(openModal({ modalType: 'MUTE' })); - }; -} - -export function toggleHideNotifications() { - return dispatch => { - dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS }); - }; -} - -export function changeMuteDuration(duration) { - return dispatch => { - dispatch({ - type: MUTES_CHANGE_DURATION, - duration, - }); + dispatch(openModal({ + modalType: 'MUTE', + modalProps: { + accountId: account.get('id'), + acct: account.get('acct'), + }, + })); }; } diff --git a/app/javascript/mastodon/components/check_box.tsx b/app/javascript/mastodon/components/check_box.tsx new file mode 100644 index 0000000000..7da8ef0ac5 --- /dev/null +++ b/app/javascript/mastodon/components/check_box.tsx @@ -0,0 +1,39 @@ +import classNames from 'classnames'; + +import DoneIcon from '@/material-icons/400-24px/done.svg?react'; + +import { Icon } from './icon'; + +interface Props { + value: string; + checked: boolean; + name: string; + onChange: (event: React.ChangeEvent) => void; + label: React.ReactNode; +} + +export const CheckBox: React.FC = ({ + name, + value, + checked, + onChange, + label, +}) => { + return ( + + ); +}; diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx index b111a65385..3c6d26e349 100644 --- a/app/javascript/mastodon/components/status_action_bar.jsx +++ b/app/javascript/mastodon/components/status_action_bar.jsx @@ -209,7 +209,7 @@ class StatusActionBar extends ImmutablePureComponent { const { status, onBlockDomain } = this.props; const account = status.get('account'); - onBlockDomain(account.get('acct').split('@')[1]); + onBlockDomain(account); }; handleUnblockDomain = () => { diff --git a/app/javascript/mastodon/containers/status_container.jsx b/app/javascript/mastodon/containers/status_container.jsx index 7a7cd9880f..7bd91c8c9d 100644 --- a/app/javascript/mastodon/containers/status_container.jsx +++ b/app/javascript/mastodon/containers/status_container.jsx @@ -1,4 +1,4 @@ -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; @@ -15,7 +15,7 @@ import { directCompose, } from '../actions/compose'; import { - blockDomain, + initDomainBlockModal, unblockDomain, } from '../actions/domain_blocks'; import { @@ -253,15 +253,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ dispatch(toggleStatusCollapse(status.get('id'), isCollapsed)); }, - onBlockDomain (domain) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: {domain} }} />, - confirm: intl.formatMessage(messages.blockDomainConfirm), - onConfirm: () => dispatch(blockDomain(domain)), - }, - })); + onBlockDomain (account) { + dispatch(initDomainBlockModal(account)); }, onUnblockDomain (domain) { diff --git a/app/javascript/mastodon/features/account_timeline/components/header.jsx b/app/javascript/mastodon/features/account_timeline/components/header.jsx index 7de8d3771b..a2463b8764 100644 --- a/app/javascript/mastodon/features/account_timeline/components/header.jsx +++ b/app/javascript/mastodon/features/account_timeline/components/header.jsx @@ -72,11 +72,7 @@ class Header extends ImmutablePureComponent { }; handleBlockDomain = () => { - const domain = this.props.account.get('acct').split('@')[1]; - - if (!domain) return; - - this.props.onBlockDomain(domain); + this.props.onBlockDomain(this.props.account); }; handleUnblockDomain = () => { diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx index 84a303c37a..071dbdbfb7 100644 --- a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx +++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx @@ -17,7 +17,7 @@ import { mentionCompose, directCompose, } from '../../../actions/compose'; -import { blockDomain, unblockDomain } from '../../../actions/domain_blocks'; +import { initDomainBlockModal, unblockDomain } from '../../../actions/domain_blocks'; import { openModal } from '../../../actions/modal'; import { initMuteModal } from '../../../actions/mutes'; import { initReport } from '../../../actions/reports'; @@ -140,15 +140,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, - onBlockDomain (domain) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: {domain} }} />, - confirm: intl.formatMessage(messages.blockDomainConfirm), - onConfirm: () => dispatch(blockDomain(domain)), - }, - })); + onBlockDomain (account) { + dispatch(initDomainBlockModal(account)); }, onUnblockDomain (domain) { diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx index c243a49129..a4951260ab 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.jsx +++ b/app/javascript/mastodon/features/status/components/action_bar.jsx @@ -159,7 +159,7 @@ class ActionBar extends PureComponent { const { status, onBlockDomain } = this.props; const account = status.get('account'); - onBlockDomain(account.get('acct').split('@')[1]); + onBlockDomain(account); }; handleUnblockDomain = () => { diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx index a3034bb570..44db9d9c3f 100644 --- a/app/javascript/mastodon/features/status/index.jsx +++ b/app/javascript/mastodon/features/status/index.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, injectIntl } from 'react-intl'; import classNames from 'classnames'; import { Helmet } from 'react-helmet'; @@ -34,7 +34,7 @@ import { directCompose, } from '../../actions/compose'; import { - blockDomain, + initDomainBlockModal, unblockDomain, } from '../../actions/domain_blocks'; import { @@ -463,15 +463,8 @@ class Status extends ImmutablePureComponent { this.props.dispatch(unblockAccount(account.get('id'))); }; - handleBlockDomainClick = domain => { - this.props.dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: {domain} }} />, - confirm: this.props.intl.formatMessage(messages.blockDomainConfirm), - onConfirm: () => this.props.dispatch(blockDomain(domain)), - }, - })); + handleBlockDomainClick = account => { + this.props.dispatch(initDomainBlockModal(account)); }; handleUnblockDomainClick = domain => { diff --git a/app/javascript/mastodon/features/ui/components/block_modal.jsx b/app/javascript/mastodon/features/ui/components/block_modal.jsx index cfac692324..d18adaa5eb 100644 --- a/app/javascript/mastodon/features/ui/components/block_modal.jsx +++ b/app/javascript/mastodon/features/ui/components/block_modal.jsx @@ -1,100 +1,87 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback } from 'react'; -import { injectIntl, FormattedMessage } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; +import { useDispatch } from 'react-redux'; -import { blockAccount } from '../../../actions/accounts'; -import { closeModal } from '../../../actions/modal'; -import { initReport } from '../../../actions/reports'; -import { Button } from '../../../components/button'; -import { makeGetAccount } from '../../../selectors'; +import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; +import BlockIcon from '@/material-icons/400-24px/block.svg?react'; +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import { blockAccount } from 'mastodon/actions/accounts'; +import { closeModal } from 'mastodon/actions/modal'; +import { Button } from 'mastodon/components/button'; +import { Icon } from 'mastodon/components/icon'; -const makeMapStateToProps = () => { - const getAccount = makeGetAccount(); +export const BlockModal = ({ accountId, acct }) => { + const dispatch = useDispatch(); - const mapStateToProps = state => ({ - account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])), - }); + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockAccount(accountId)); + }, [dispatch, accountId]); - return mapStateToProps; -}; + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); -const mapDispatchToProps = dispatch => { - return { - onConfirm(account) { - dispatch(blockAccount(account.get('id'))); - }, + return ( +
+
+
+
+ +
- onBlockAndReport(account) { - dispatch(blockAccount(account.get('id'))); - dispatch(initReport(account)); - }, - - onClose() { - dispatch(closeModal({ - modalType: undefined, - ignoreFocus: false, - })); - }, - }; -}; - -class BlockModal extends PureComponent { - - static propTypes = { - account: PropTypes.object.isRequired, - onClose: PropTypes.func.isRequired, - onBlockAndReport: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - handleClick = () => { - this.props.onClose(); - this.props.onConfirm(this.props.account); - }; - - handleSecondary = () => { - this.props.onClose(); - this.props.onBlockAndReport(this.props.account); - }; - - handleCancel = () => { - this.props.onClose(); - }; - - render () { - const { account } = this.props; - - return ( -
-
-

- @{account.get('acct')} }} - /> -

+
+

+
@{acct}
+
-
-
+ +
+
+ - - + +
- ); - } +
+ ); +}; -} +BlockModal.propTypes = { + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; -export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(BlockModal)); +export default BlockModal; diff --git a/app/javascript/mastodon/features/ui/components/domain_block_modal.jsx b/app/javascript/mastodon/features/ui/components/domain_block_modal.jsx new file mode 100644 index 0000000000..e69db63489 --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/domain_block_modal.jsx @@ -0,0 +1,106 @@ +import PropTypes from 'prop-types'; +import { useCallback } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { useDispatch } from 'react-redux'; + +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import DomainDisabledIcon from '@/material-icons/400-24px/domain_disabled.svg?react'; +import HistoryIcon from '@/material-icons/400-24px/history.svg?react'; +import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import { blockAccount } from 'mastodon/actions/accounts'; +import { blockDomain } from 'mastodon/actions/domain_blocks'; +import { closeModal } from 'mastodon/actions/modal'; +import { Button } from 'mastodon/components/button'; +import { Icon } from 'mastodon/components/icon'; + +export const DomainBlockModal = ({ domain, accountId, acct }) => { + const dispatch = useDispatch(); + + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockDomain(domain)); + }, [dispatch, domain]); + + const handleSecondaryClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockAccount(accountId)); + }, [dispatch, accountId]); + + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); + + return ( +
+
+
+
+ +
+ +
+

+
{domain}
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+ + +
+ + + + +
+
+
+ ); +}; + +DomainBlockModal.propTypes = { + domain: PropTypes.string.isRequired, + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; + +export default DomainBlockModal; diff --git a/app/javascript/mastodon/features/ui/components/modal_root.jsx b/app/javascript/mastodon/features/ui/components/modal_root.jsx index 46f0dc706f..97d7706da4 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.jsx +++ b/app/javascript/mastodon/features/ui/components/modal_root.jsx @@ -7,6 +7,7 @@ import Base from 'mastodon/components/modal_root'; import { MuteModal, BlockModal, + DomainBlockModal, ReportModal, EmbedModal, ListEditor, @@ -41,6 +42,7 @@ export const MODAL_COMPONENTS = { 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), 'MUTE': MuteModal, 'BLOCK': BlockModal, + 'DOMAIN_BLOCK': DomainBlockModal, 'REPORT': ReportModal, 'ACTIONS': () => Promise.resolve({ default: ActionsModal }), 'EMBED': EmbedModal, diff --git a/app/javascript/mastodon/features/ui/components/mute_modal.jsx b/app/javascript/mastodon/features/ui/components/mute_modal.jsx index fa81ea81a3..e9dc1a7c2e 100644 --- a/app/javascript/mastodon/features/ui/components/mute_modal.jsx +++ b/app/javascript/mastodon/features/ui/components/mute_modal.jsx @@ -1,138 +1,154 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback, useState } from 'react'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; +import classNames from 'classnames'; -import Toggle from 'react-toggle'; +import { useDispatch } from 'react-redux'; -import { muteAccount } from '../../../actions/accounts'; -import { closeModal } from '../../../actions/modal'; -import { toggleHideNotifications, changeMuteDuration } from '../../../actions/mutes'; -import { Button } from '../../../components/button'; + +import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react'; +import { muteAccount } from 'mastodon/actions/accounts'; +import { closeModal } from 'mastodon/actions/modal'; +import { Button } from 'mastodon/components/button'; +import { CheckBox } from 'mastodon/components/check_box'; +import { Icon } from 'mastodon/components/icon'; +import { RadioButton } from 'mastodon/components/radio_button'; const messages = defineMessages({ minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' }, hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' }, days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' }, - indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Indefinite' }, + indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Until I unmute them' }, + hideFromNotifications: { id: 'mute_modal.hide_from_notifications', defaultMessage: 'Hide from notifications' }, }); -const mapStateToProps = state => { - return { - account: state.getIn(['mutes', 'new', 'account']), - notifications: state.getIn(['mutes', 'new', 'notifications']), - muteDuration: state.getIn(['mutes', 'new', 'duration']), - }; +const RadioButtonLabel = ({ name, value, currentValue, onChange, label }) => ( + +); + +RadioButtonLabel.propTypes = { + name: PropTypes.string, + value: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]), + currentValue: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]), + checked: PropTypes.bool, + onChange: PropTypes.func, + label: PropTypes.node, }; -const mapDispatchToProps = dispatch => { - return { - onConfirm(account, notifications, muteDuration) { - dispatch(muteAccount(account.get('id'), notifications, muteDuration)); - }, +export const MuteModal = ({ accountId, acct }) => { + const intl = useIntl(); + const dispatch = useDispatch(); + const [notifications, setNotifications] = useState(true); + const [muteDuration, setMuteDuration] = useState('0'); + const [expanded, setExpanded] = useState(false); - onClose() { - dispatch(closeModal({ - modalType: undefined, - ignoreFocus: false, - })); - }, + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(muteAccount(accountId, notifications, muteDuration)); + }, [dispatch, accountId, notifications, muteDuration]); - onToggleNotifications() { - dispatch(toggleHideNotifications()); - }, + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); - onChangeMuteDuration(e) { - dispatch(changeMuteDuration(e.target.value)); - }, - }; -}; + const handleToggleNotifications = useCallback(({ target }) => { + setNotifications(target.checked); + }, [setNotifications]); -class MuteModal extends PureComponent { + const handleChangeMuteDuration = useCallback(({ target }) => { + setMuteDuration(target.value); + }, [setMuteDuration]); - static propTypes = { - account: PropTypes.object.isRequired, - notifications: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - onToggleNotifications: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - muteDuration: PropTypes.number.isRequired, - onChangeMuteDuration: PropTypes.func.isRequired, - }; + const handleToggleSettings = useCallback(() => { + setExpanded(!expanded); + }, [expanded, setExpanded]); - handleClick = () => { - this.props.onClose(); - this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration); - }; - - handleCancel = () => { - this.props.onClose(); - }; - - toggleNotifications = () => { - this.props.onToggleNotifications(); - }; - - changeMuteDuration = (e) => { - this.props.onChangeMuteDuration(e); - }; - - render () { - const { account, notifications, muteDuration, intl } = this.props; - - return ( -
-
-

- @{account.get('acct')} }} - /> -

-

- -

-
- - + return ( +
+
+
+
+
-
- : - +
+

+
@{acct}
-
-
+ +
+
+
+ + + + +
+ +
+ +
+
+ +
+ + +
+ + - + +
- ); - } +
+ ); +}; -} +MuteModal.propTypes = { + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; -export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(MuteModal)); +export default MuteModal; diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index de9b6b4010..e1f5bfdaf6 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -118,6 +118,10 @@ export function BlockModal () { return import(/* webpackChunkName: "modals/block_modal" */'../components/block_modal'); } +export function DomainBlockModal () { + return import(/* webpackChunkName: "modals/domain_block_modal" */'../components/domain_block_modal'); +} + export function ReportModal () { return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal'); } diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index e05cf8c4c1..f893c98a3c 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -89,6 +89,11 @@ "announcement.announcement": "Announcement", "attachments_list.unprocessed": "(unprocessed)", "audio.hide": "Hide audio", + "block_modal.they_cant_mention": "They can't mention or follow you.", + "block_modal.they_cant_see_posts": "They can't see your posts and you won't see theirs.", + "block_modal.they_will_know": "They can see that they're blocked.", + "block_modal.title": "Block user?", + "block_modal.you_wont_see_mentions": "You won't see posts that mention them.", "boost_modal.combo": "You can press {combo} to skip this next time", "bundle_column_error.copy_stacktrace": "Copy error report", "bundle_column_error.error.body": "The requested page could not be rendered. It could be due to a bug in our code, or a browser compatibility issue.", @@ -160,9 +165,7 @@ "compose_form.spoiler.unmarked": "Add content warning", "compose_form.spoiler_placeholder": "Content warning (optional)", "confirmation_modal.cancel": "Cancel", - "confirmations.block.block_and_report": "Block & Report", "confirmations.block.confirm": "Block", - "confirmations.block.message": "Are you sure you want to block {name}?", "confirmations.cancel_follow_request.confirm": "Withdraw request", "confirmations.cancel_follow_request.message": "Are you sure you want to withdraw your request to follow {name}?", "confirmations.delete.confirm": "Delete", @@ -171,15 +174,13 @@ "confirmations.delete_list.message": "Are you sure you want to permanently delete this list?", "confirmations.discard_edit_media.confirm": "Discard", "confirmations.discard_edit_media.message": "You have unsaved changes to the media description or preview, discard them anyway?", - "confirmations.domain_block.confirm": "Block entire domain", + "confirmations.domain_block.confirm": "Block server", "confirmations.domain_block.message": "Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.", "confirmations.edit.confirm": "Edit", "confirmations.edit.message": "Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?", "confirmations.logout.confirm": "Log out", "confirmations.logout.message": "Are you sure you want to log out?", "confirmations.mute.confirm": "Mute", - "confirmations.mute.explanation": "This will hide posts from them and posts mentioning them, but it will still allow them to see your posts and follow you.", - "confirmations.mute.message": "Are you sure you want to mute {name}?", "confirmations.redraft.confirm": "Delete & redraft", "confirmations.redraft.message": "Are you sure you want to delete this post and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.", "confirmations.reply.confirm": "Reply", @@ -205,6 +206,14 @@ "dismissable_banner.explore_statuses": "These are posts from across the social web that are gaining traction today. Newer posts with more boosts and favorites are ranked higher.", "dismissable_banner.explore_tags": "These are hashtags that are gaining traction on the social web today. Hashtags that are used by more different people are ranked higher.", "dismissable_banner.public_timeline": "These are the most recent public posts from people on the social web that people on {domain} follow.", + "domain_block_modal.block": "Block server", + "domain_block_modal.block_account_instead": "Block @{name} instead", + "domain_block_modal.they_can_interact_with_old_posts": "People from this server can interact with your old posts.", + "domain_block_modal.they_cant_follow": "Nobody from this server can follow you.", + "domain_block_modal.they_wont_know": "They won't know they've been blocked.", + "domain_block_modal.title": "Block domain?", + "domain_block_modal.you_will_lose_followers": "All your followers from this server will be removed.", + "domain_block_modal.you_wont_see_posts": "You won't see posts or notifications from users on this server.", "domain_pill.activitypub_lets_connect": "It lets you connect and interact with people not just on Mastodon, but across different social apps too.", "domain_pill.activitypub_like_language": "ActivityPub is like the language Mastodon speaks with other social networks.", "domain_pill.server": "Server", @@ -415,9 +424,15 @@ "loading_indicator.label": "Loading…", "media_gallery.toggle_visible": "{number, plural, one {Hide image} other {Hide images}}", "moved_to_account_banner.text": "Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.", - "mute_modal.duration": "Duration", - "mute_modal.hide_notifications": "Hide notifications from this user?", - "mute_modal.indefinite": "Indefinite", + "mute_modal.hide_from_notifications": "Hide from notifications", + "mute_modal.hide_options": "Hide options", + "mute_modal.indefinite": "Until I unmute them", + "mute_modal.show_options": "Show options", + "mute_modal.they_can_mention_and_follow": "They can mention and follow you, but you won't see them.", + "mute_modal.they_wont_know": "They won't know they've been muted.", + "mute_modal.title": "Mute user?", + "mute_modal.you_wont_see_mentions": "You won't see posts that mention them.", + "mute_modal.you_wont_see_posts": "They can still see your posts, but you won't see theirs.", "navigation_bar.about": "About", "navigation_bar.advanced_interface": "Open in advanced web interface", "navigation_bar.blocks": "Blocked users", diff --git a/app/javascript/mastodon/reducers/blocks.js b/app/javascript/mastodon/reducers/blocks.js deleted file mode 100644 index 1b65071634..0000000000 --- a/app/javascript/mastodon/reducers/blocks.js +++ /dev/null @@ -1,22 +0,0 @@ -import Immutable from 'immutable'; - -import { - BLOCKS_INIT_MODAL, -} from '../actions/blocks'; - -const initialState = Immutable.Map({ - new: Immutable.Map({ - account_id: null, - }), -}); - -export default function mutes(state = initialState, action) { - switch (action.type) { - case BLOCKS_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'account_id'], action.account.get('id')); - }); - default: - return state; - } -} diff --git a/app/javascript/mastodon/reducers/index.ts b/app/javascript/mastodon/reducers/index.ts index 51a76d191e..3d42cc83f8 100644 --- a/app/javascript/mastodon/reducers/index.ts +++ b/app/javascript/mastodon/reducers/index.ts @@ -7,7 +7,6 @@ import { accountsReducer } from './accounts'; import accounts_map from './accounts_map'; import alerts from './alerts'; import announcements from './announcements'; -import blocks from './blocks'; import boosts from './boosts'; import compose from './compose'; import contexts from './contexts'; @@ -26,7 +25,6 @@ import markers from './markers'; import media_attachments from './media_attachments'; import meta from './meta'; import { modalReducer } from './modal'; -import mutes from './mutes'; import { notificationPolicyReducer } from './notification_policy'; import { notificationRequestsReducer } from './notification_requests'; import notifications from './notifications'; @@ -62,8 +60,6 @@ const reducers = { relationships: relationshipsReducer, settings, push_notifications, - mutes, - blocks, boosts, server, contexts, diff --git a/app/javascript/mastodon/reducers/mutes.js b/app/javascript/mastodon/reducers/mutes.js deleted file mode 100644 index a9eb61ff83..0000000000 --- a/app/javascript/mastodon/reducers/mutes.js +++ /dev/null @@ -1,31 +0,0 @@ -import Immutable from 'immutable'; - -import { - MUTES_INIT_MODAL, - MUTES_TOGGLE_HIDE_NOTIFICATIONS, - MUTES_CHANGE_DURATION, -} from '../actions/mutes'; - -const initialState = Immutable.Map({ - new: Immutable.Map({ - account: null, - notifications: true, - duration: 0, - }), -}); - -export default function mutes(state = initialState, action) { - switch (action.type) { - case MUTES_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'account'], action.account); - state.setIn(['new', 'notifications'], true); - }); - case MUTES_TOGGLE_HIDE_NOTIFICATIONS: - return state.updateIn(['new', 'notifications'], (old) => !old); - case MUTES_CHANGE_DURATION: - return state.setIn(['new', 'duration'], Number(action.duration)); - default: - return state; - } -} diff --git a/app/javascript/material-icons/400-24px/domain_disabled-fill.svg b/app/javascript/material-icons/400-24px/domain_disabled-fill.svg new file mode 100644 index 0000000000..2f16593d38 --- /dev/null +++ b/app/javascript/material-icons/400-24px/domain_disabled-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/domain_disabled.svg b/app/javascript/material-icons/400-24px/domain_disabled.svg new file mode 100644 index 0000000000..2f16593d38 --- /dev/null +++ b/app/javascript/material-icons/400-24px/domain_disabled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/history-fill.svg b/app/javascript/material-icons/400-24px/history-fill.svg new file mode 100644 index 0000000000..2d8124b474 --- /dev/null +++ b/app/javascript/material-icons/400-24px/history-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/history.svg b/app/javascript/material-icons/400-24px/history.svg new file mode 100644 index 0000000000..2d8124b474 --- /dev/null +++ b/app/javascript/material-icons/400-24px/history.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/person_remove-fill.svg b/app/javascript/material-icons/400-24px/person_remove-fill.svg new file mode 100644 index 0000000000..239c7a49dc --- /dev/null +++ b/app/javascript/material-icons/400-24px/person_remove-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/person_remove.svg b/app/javascript/material-icons/400-24px/person_remove.svg new file mode 100644 index 0000000000..725da3649b --- /dev/null +++ b/app/javascript/material-icons/400-24px/person_remove.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 8e0859038d..805ffb963a 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -106,17 +106,17 @@ } &.button-secondary { - color: $ui-button-secondary-color; + color: $highlight-text-color; background: transparent; padding: 6px 17px; - border: 1px solid $ui-button-secondary-border-color; + border: 1px solid $highlight-text-color; &:active, &:focus, &:hover { - border-color: $ui-button-secondary-focus-background-color; - color: $ui-button-secondary-focus-color; - background-color: $ui-button-secondary-focus-background-color; + border-color: lighten($highlight-text-color, 4%); + color: lighten($highlight-text-color, 4%); + background-color: transparent; text-decoration: none; } @@ -5480,6 +5480,10 @@ a.status-card { pointer-events: auto; user-select: text; display: flex; + + @media screen and (max-width: $no-gap-breakpoint) { + margin-top: auto; + } } .video-modal .video-player { @@ -5811,6 +5815,145 @@ a.status-card { margin-inline-start: 10px; } +.safety-action-modal { + width: 600px; + flex-direction: column; + + &__top, + &__bottom { + display: flex; + gap: 8px; + padding: 24px; + flex-direction: column; + background: var(--modal-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--modal-border-color); + } + + &__top { + border-radius: 16px 16px 0 0; + border-bottom: 0; + gap: 16px; + } + + &__bottom { + border-radius: 0 0 16px 16px; + border-top: 0; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + border-bottom: 0; + padding-bottom: 32px; + } + } + + &__header { + display: flex; + gap: 16px; + align-items: center; + font-size: 14px; + line-height: 20px; + color: $darker-text-color; + + &__icon { + border-radius: 64px; + background: $ui-highlight-color; + color: $white; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + flex-shrink: 0; + + .icon { + width: 24px; + height: 24px; + } + } + + h1 { + font-size: 22px; + line-height: 28px; + color: $primary-text-color; + } + } + + &__bullet-points { + display: flex; + flex-direction: column; + gap: 8px; + font-size: 16px; + line-height: 24px; + + & > div { + display: flex; + gap: 16px; + align-items: center; + } + + &__icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + .icon { + width: 24px; + height: 24px; + } + } + } + + &__field-group { + display: flex; + flex-direction: column; + + label { + display: flex; + gap: 16px; + align-items: center; + font-size: 16px; + line-height: 24px; + height: 32px; + padding: 0 12px; + } + } + + &__bottom { + padding-top: 0; + + &__collapsible { + display: none; + flex-direction: column; + gap: 16px; + } + + &.active { + background: var(--modal-background-variant-color); + padding-top: 24px; + + .safety-action-modal__bottom__collapsible { + display: flex; + } + } + } + + &__actions { + display: flex; + align-items: center; + gap: 8px; + justify-content: flex-end; + + .link-button { + padding: 10px 12px; + font-weight: 600; + } + } +} + .boost-modal, .confirmation-modal, .report-modal, @@ -7113,7 +7256,8 @@ a.status-card { display: flex; } -.radio-button { +.radio-button, +.check-box { font-size: 14px; position: relative; display: inline-flex; @@ -7132,17 +7276,19 @@ a.status-card { } &__input { - display: block; + display: flex; + align-items: center; + justify-content: center; position: relative; border: 2px solid $secondary-text-color; box-sizing: border-box; - width: 18px; - height: 18px; + width: 20px; + height: 20px; flex: 0 0 auto; border-radius: 50%; &.checked { - border-color: $secondary-text-color; + border-color: $ui-highlight-color; &::before { position: absolute; @@ -7151,9 +7297,31 @@ a.status-card { content: ''; display: block; border-radius: 50%; - width: 10px; - height: 10px; - background: $secondary-text-color; + width: 12px; + height: 12px; + background: $ui-highlight-color; + } + } + + .icon { + width: 18px; + height: 18px; + } + } +} + +.check-box { + &__input { + width: 18px; + height: 18px; + border-radius: 2px; + + &.checked { + background: $ui-highlight-color; + color: $white; + + &::before { + display: none; } } } @@ -8632,22 +8800,36 @@ noscript { } } +.safety-action-modal, .interaction-modal { max-width: 90vw; width: 600px; - background: var(--modal-background-color); - border: 1px solid var(--modal-border-color); - border-radius: 8px; +} + +.interaction-modal { overflow: visible; position: relative; display: block; - padding: 40px; + border-radius: 16px; + background: var(--modal-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--modal-border-color); + padding: 24px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 16px 16px 0 0; + border-bottom: 0; + padding-bottom: 32px; + } h3 { font-size: 22px; line-height: 33px; font-weight: 700; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; } p { @@ -8668,7 +8850,9 @@ noscript { &__icon { color: $highlight-text-color; - margin: 0 5px; + display: flex; + align-items: center; + justify-content: center; } &__lead { @@ -8701,6 +8885,7 @@ noscript { border: 0; padding: 15px - 4px 15px - 6px; flex: 1 1 auto; + min-width: 0; &::placeholder { color: lighten($darker-text-color, 4%); diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 2b2a295791..58b9dd9b61 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -46,10 +46,10 @@ $ui-button-focus-background-color: $blurple-600 !default; $ui-button-focus-outline-color: $blurple-400 !default; $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default; -$ui-button-secondary-color: $grey-100 !default; -$ui-button-secondary-border-color: $grey-100 !default; -$ui-button-secondary-focus-background-color: $grey-600 !default; -$ui-button-secondary-focus-color: $white !default; +$ui-button-secondary-color: $blurple-500 !default; +$ui-button-secondary-border-color: $blurple-500 !default; +$ui-button-secondary-focus-border-color: $blurple-300 !default; +$ui-button-secondary-focus-color: $blurple-300 !default; $ui-button-tertiary-color: $blurple-300 !default; $ui-button-tertiary-border-color: $blurple-300 !default; @@ -98,7 +98,8 @@ $font-monospace: 'mastodon-font-monospace' !default; --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)}; --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, 0 8px 10px -6px #{rgba($base-shadow-color, 0.25)}; - --modal-background-color: #{darken($ui-base-color, 4%)}; + --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)}; + --modal-background-variant-color: #{rgba($ui-base-color, 0.7)}; --modal-border-color: #{lighten($ui-base-color, 4%)}; --background-border-color: #{lighten($ui-base-color, 4%)}; --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); From d702a03a0c35fc631a0fa456532946e6751cbbfd Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 15 Mar 2024 20:09:21 +0100 Subject: [PATCH 5/9] =?UTF-8?q?Add=20=E2=80=9CLearn=20more=E2=80=9D=20on?= =?UTF-8?q?=20block=20modal=20to=20inform=20of=20federation=20caveats=20(#?= =?UTF-8?q?29614)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/ui/components/block_modal.jsx | 33 +++++++++++++++++-- app/javascript/mastodon/locales/en.json | 3 ++ .../styles/mastodon/components.scss | 9 +++++ 3 files changed, 43 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/block_modal.jsx b/app/javascript/mastodon/features/ui/components/block_modal.jsx index d18adaa5eb..fc9233a9cc 100644 --- a/app/javascript/mastodon/features/ui/components/block_modal.jsx +++ b/app/javascript/mastodon/features/ui/components/block_modal.jsx @@ -1,8 +1,10 @@ import PropTypes from 'prop-types'; -import { useCallback } from 'react'; +import { useCallback, useState } from 'react'; import { FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; + import { useDispatch } from 'react-redux'; import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; @@ -17,6 +19,9 @@ import { Icon } from 'mastodon/components/icon'; export const BlockModal = ({ accountId, acct }) => { const dispatch = useDispatch(); + const [expanded, setExpanded] = useState(false); + + const domain = acct.split('@')[1]; const handleClick = useCallback(() => { dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); @@ -27,6 +32,10 @@ export const BlockModal = ({ accountId, acct }) => { dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); }, [dispatch]); + const handleToggleLearnMore = useCallback(() => { + setExpanded(!expanded); + }, [expanded, setExpanded]); + return (
@@ -64,8 +73,28 @@ export const BlockModal = ({ accountId, acct }) => {
-
+
+ {domain && ( +
+
+ {domain} }} + /> +
+
+ )} +
+ {domain && ( + + )} + +
+ diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index f893c98a3c..376dfb7e4b 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -89,6 +89,9 @@ "announcement.announcement": "Announcement", "attachments_list.unprocessed": "(unprocessed)", "audio.hide": "Hide audio", + "block_modal.remote_users_caveat": "We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.", + "block_modal.show_less": "Show less", + "block_modal.show_more": "Show more", "block_modal.they_cant_mention": "They can't mention or follow you.", "block_modal.they_cant_see_posts": "They can't see your posts and you won't see theirs.", "block_modal.they_will_know": "They can see that they're blocked.", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 805ffb963a..8b7e5f5e84 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5922,6 +5922,15 @@ a.status-card { } } + &__caveats { + font-size: 14px; + padding: 0 12px; + + strong { + font-weight: 500; + } + } + &__bottom { padding-top: 0; From 7fe848b161d8d3a3878680d3c1c14532f5ffeb0c Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Fri, 15 Mar 2024 14:16:45 +0100 Subject: [PATCH 6/9] [Glitch] Convert `packs/public.jsx` to Typescript Port c76ae7a5c0d247264afa896f081db9d1fd278711 to glitch-soc Signed-off-by: Claire --- .../glitch/components/relative_timestamp.tsx | 2 +- .../flavours/glitch/packs/public.jsx | 226 ----------- .../flavours/glitch/packs/public.tsx | 356 ++++++++++++++++++ app/javascript/flavours/glitch/theme.yml | 10 +- 4 files changed, 362 insertions(+), 232 deletions(-) delete mode 100644 app/javascript/flavours/glitch/packs/public.jsx create mode 100644 app/javascript/flavours/glitch/packs/public.tsx diff --git a/app/javascript/flavours/glitch/components/relative_timestamp.tsx b/app/javascript/flavours/glitch/components/relative_timestamp.tsx index 12530c2b17..b9e1e4f8fd 100644 --- a/app/javascript/flavours/glitch/components/relative_timestamp.tsx +++ b/app/javascript/flavours/glitch/components/relative_timestamp.tsx @@ -102,7 +102,7 @@ const getUnitDelay = (units: string) => { }; export const timeAgoString = ( - intl: IntlShape, + intl: Pick, date: Date, now: number, year: number, diff --git a/app/javascript/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx deleted file mode 100644 index 53854e70fb..0000000000 --- a/app/javascript/flavours/glitch/packs/public.jsx +++ /dev/null @@ -1,226 +0,0 @@ -import { createRoot } from 'react-dom/client'; - -import 'packs/public-path'; - -import { IntlMessageFormat } from 'intl-messageformat'; -import { defineMessages } from 'react-intl'; - -import Rails from '@rails/ujs'; -import axios from 'axios'; -import { throttle } from 'lodash'; - -import { timeAgoString } from 'flavours/glitch/components/relative_timestamp'; -import emojify from 'flavours/glitch/features/emoji/emoji'; -import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; -import { loadLocale, getLocale } from 'flavours/glitch/locales'; -import { loadPolyfills } from 'flavours/glitch/polyfills'; -import ready from 'flavours/glitch/ready'; - -import 'cocoon-js-vanilla'; - -const messages = defineMessages({ - usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' }, - passwordExceedsLength: { id: 'password_confirmation.exceeds_maxlength', defaultMessage: 'Password confirmation exceeds the maximum password length' }, - passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' }, -}); - -function loaded() { - const { messages: localeData } = getLocale(); - - const locale = document.documentElement.lang; - - const dateTimeFormat = new Intl.DateTimeFormat(locale, { - year: 'numeric', - month: 'long', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - }); - - const dateFormat = new Intl.DateTimeFormat(locale, { - year: 'numeric', - month: 'short', - day: 'numeric', - timeFormat: false, - }); - - const timeFormat = new Intl.DateTimeFormat(locale, { - timeStyle: 'short', - }); - - const formatMessage = ({ id, defaultMessage }, values) => { - const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale); - return messageFormat.format(values); - }; - - document.querySelectorAll('.emojify').forEach((content) => { - content.innerHTML = emojify(content.innerHTML); - }); - - document.querySelectorAll('time.formatted').forEach((content) => { - const datetime = new Date(content.getAttribute('datetime')); - const formattedDate = dateTimeFormat.format(datetime); - - content.title = formattedDate; - content.textContent = formattedDate; - }); - - const isToday = date => { - const today = new Date(); - - return date.getDate() === today.getDate() && - date.getMonth() === today.getMonth() && - date.getFullYear() === today.getFullYear(); - }; - const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale); - - document.querySelectorAll('time.relative-formatted').forEach((content) => { - const datetime = new Date(content.getAttribute('datetime')); - - let formattedContent; - - if (isToday(datetime)) { - const formattedTime = timeFormat.format(datetime); - - formattedContent = todayFormat.format({ time: formattedTime }); - } else { - formattedContent = dateFormat.format(datetime); - } - - content.title = formattedContent; - content.textContent = formattedContent; - }); - - document.querySelectorAll('time.time-ago').forEach((content) => { - const datetime = new Date(content.getAttribute('datetime')); - const now = new Date(); - - const timeGiven = content.getAttribute('datetime').includes('T'); - content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime); - content.textContent = timeAgoString({ - formatMessage, - formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), - }, datetime, now, now.getFullYear(), timeGiven); - }); - - const reactComponents = document.querySelectorAll('[data-component]'); - - if (reactComponents.length > 0) { - import(/* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container') - .then(({ default: MediaContainer }) => { - reactComponents.forEach((component) => { - Array.from(component.children).forEach((child) => { - component.removeChild(child); - }); - }); - - const content = document.createElement('div'); - - const root = createRoot(content); - root.render(); - document.body.appendChild(content); - }) - .catch(error => { - console.error(error); - }); - } - - Rails.delegate(document, '#user_account_attributes_username', 'input', throttle(({ target }) => { - if (target.value && target.value.length > 0) { - axios.get('/api/v1/accounts/lookup', { params: { acct: target.value } }).then(() => { - target.setCustomValidity(formatMessage(messages.usernameTaken)); - }).catch(() => { - target.setCustomValidity(''); - }); - } else { - target.setCustomValidity(''); - } - }, 500, { leading: false, trailing: true })); - - Rails.delegate(document, '#user_password,#user_password_confirmation', 'input', () => { - const password = document.getElementById('user_password'); - const confirmation = document.getElementById('user_password_confirmation'); - if (!confirmation) return; - - if (confirmation.value && confirmation.value.length > password.maxLength) { - confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength)); - } else if (password.value && password.value !== confirmation.value) { - confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch)); - } else { - confirmation.setCustomValidity(''); - } - }); - - Rails.delegate(document, '.status__content__spoiler-link', 'click', function() { - const statusEl = this.parentNode.parentNode; - - if (statusEl.dataset.spoiler === 'expanded') { - statusEl.dataset.spoiler = 'folded'; - this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format(); - } else { - statusEl.dataset.spoiler = 'expanded'; - this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format(); - } - - return false; - }); - - document.querySelectorAll('.status__content__spoiler-link').forEach((spoilerLink) => { - const statusEl = spoilerLink.parentNode.parentNode; - const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more'); - spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format(); - }); -} - -const toggleSidebar = () => { - const sidebar = document.querySelector('.sidebar ul'); - const toggleButton = document.querySelector('.sidebar__toggle__icon'); - - if (sidebar.classList.contains('visible')) { - document.body.style.overflow = null; - toggleButton.setAttribute('aria-expanded', 'false'); - } else { - document.body.style.overflow = 'hidden'; - toggleButton.setAttribute('aria-expanded', 'true'); - } - - toggleButton.classList.toggle('active'); - sidebar.classList.toggle('visible'); -}; - -Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => { - toggleSidebar(); -}); - -Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', e => { - if (e.key === ' ' || e.key === 'Enter') { - e.preventDefault(); - toggleSidebar(); - } -}); - -Rails.delegate(document, '.custom-emoji', 'mouseover', ({ target }) => target.src = target.getAttribute('data-original')); -Rails.delegate(document, '.custom-emoji', 'mouseout', ({ target }) => target.src = target.getAttribute('data-static')); - -// Empty the honeypot fields in JS in case something like an extension -// automatically filled them. -Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => { - ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => { - const field = document.getElementById(id); - if (field) { - field.value = ''; - } - }); -}); - -function main() { - ready(loaded); -} - -loadPolyfills() - .then(loadLocale) - .then(main) - .then(loadKeyboardExtensions) - .catch(error => { - console.error(error); - }); diff --git a/app/javascript/flavours/glitch/packs/public.tsx b/app/javascript/flavours/glitch/packs/public.tsx new file mode 100644 index 0000000000..1ecc3fa42f --- /dev/null +++ b/app/javascript/flavours/glitch/packs/public.tsx @@ -0,0 +1,356 @@ +import { createRoot } from 'react-dom/client'; + +import 'packs/public-path'; + +import { IntlMessageFormat } from 'intl-messageformat'; +import type { MessageDescriptor, PrimitiveType } from 'react-intl'; +import { defineMessages } from 'react-intl'; + +import Rails from '@rails/ujs'; +import axios from 'axios'; +import { throttle } from 'lodash'; + +import { timeAgoString } from 'flavours/glitch/components/relative_timestamp'; +import emojify from 'flavours/glitch/features/emoji/emoji'; +import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; +import { loadLocale, getLocale } from 'flavours/glitch/locales'; +import { loadPolyfills } from 'flavours/glitch/polyfills'; +import ready from 'flavours/glitch/ready'; + +import 'cocoon-js-vanilla'; + +const messages = defineMessages({ + usernameTaken: { + id: 'username.taken', + defaultMessage: 'That username is taken. Try another', + }, + passwordExceedsLength: { + id: 'password_confirmation.exceeds_maxlength', + defaultMessage: 'Password confirmation exceeds the maximum password length', + }, + passwordDoesNotMatch: { + id: 'password_confirmation.mismatching', + defaultMessage: 'Password confirmation does not match', + }, +}); + +function loaded() { + const { messages: localeData } = getLocale(); + + const locale = document.documentElement.lang; + + const dateTimeFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }); + + const dateFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'short', + day: 'numeric', + }); + + const timeFormat = new Intl.DateTimeFormat(locale, { + timeStyle: 'short', + }); + + const formatMessage = ( + { id, defaultMessage }: MessageDescriptor, + values?: Record, + ) => { + let message: string | undefined = undefined; + + if (id) message = localeData[id]; + + if (!message) message = defaultMessage as string; + + const messageFormat = new IntlMessageFormat(message, locale); + return messageFormat.format(values) as string; + }; + + document.querySelectorAll('.emojify').forEach((content) => { + content.innerHTML = emojify(content.innerHTML); + }); + + document + .querySelectorAll('time.formatted') + .forEach((content) => { + const datetime = new Date(content.dateTime); + const formattedDate = dateTimeFormat.format(datetime); + + content.title = formattedDate; + content.textContent = formattedDate; + }); + + const isToday = (date: Date) => { + const today = new Date(); + + return ( + date.getDate() === today.getDate() && + date.getMonth() === today.getMonth() && + date.getFullYear() === today.getFullYear() + ); + }; + const todayFormat = new IntlMessageFormat( + localeData['relative_format.today'] || 'Today at {time}', + locale, + ); + + document + .querySelectorAll('time.relative-formatted') + .forEach((content) => { + const datetime = new Date(content.dateTime); + + let formattedContent: string; + + if (isToday(datetime)) { + const formattedTime = timeFormat.format(datetime); + + formattedContent = todayFormat.format({ + time: formattedTime, + }) as string; + } else { + formattedContent = dateFormat.format(datetime); + } + + content.title = formattedContent; + content.textContent = formattedContent; + }); + + document + .querySelectorAll('time.time-ago') + .forEach((content) => { + const datetime = new Date(content.dateTime); + const now = new Date(); + + const timeGiven = content.dateTime.includes('T'); + content.title = timeGiven + ? dateTimeFormat.format(datetime) + : dateFormat.format(datetime); + content.textContent = timeAgoString( + { + formatMessage, + formatDate: (date: Date, options) => + new Intl.DateTimeFormat(locale, options).format(date), + }, + datetime, + now.getTime(), + now.getFullYear(), + timeGiven, + ); + }); + + const reactComponents = document.querySelectorAll('[data-component]'); + + if (reactComponents.length > 0) { + import( + /* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container' + ) + .then(({ default: MediaContainer }) => { + reactComponents.forEach((component) => { + Array.from(component.children).forEach((child) => { + component.removeChild(child); + }); + }); + + const content = document.createElement('div'); + + const root = createRoot(content); + root.render( + , + ); + document.body.appendChild(content); + + return true; + }) + .catch((error) => { + console.error(error); + }); + } + + Rails.delegate( + document, + 'input#user_account_attributes_username', + 'input', + throttle( + ({ target }) => { + if (!(target instanceof HTMLInputElement)) return; + + if (target.value && target.value.length > 0) { + axios + .get('/api/v1/accounts/lookup', { params: { acct: target.value } }) + .then(() => { + target.setCustomValidity(formatMessage(messages.usernameTaken)); + return true; + }) + .catch(() => { + target.setCustomValidity(''); + }); + } else { + target.setCustomValidity(''); + } + }, + 500, + { leading: false, trailing: true }, + ), + ); + + Rails.delegate( + document, + '#user_password,#user_password_confirmation', + 'input', + () => { + const password = document.querySelector( + 'input#user_password', + ); + const confirmation = document.querySelector( + 'input#user_password_confirmation', + ); + if (!confirmation || !password) return; + + if ( + confirmation.value && + confirmation.value.length > password.maxLength + ) { + confirmation.setCustomValidity( + formatMessage(messages.passwordExceedsLength), + ); + } else if (password.value && password.value !== confirmation.value) { + confirmation.setCustomValidity( + formatMessage(messages.passwordDoesNotMatch), + ); + } else { + confirmation.setCustomValidity(''); + } + }, + ); + + Rails.delegate( + document, + 'button.status__content__spoiler-link', + 'click', + function () { + if (!(this instanceof HTMLButtonElement)) return; + + const statusEl = this.parentNode?.parentNode; + + if ( + !( + statusEl instanceof HTMLDivElement && + statusEl.classList.contains('.status__content') + ) + ) + return; + + if (statusEl.dataset.spoiler === 'expanded') { + statusEl.dataset.spoiler = 'folded'; + this.textContent = new IntlMessageFormat( + localeData['status.show_more'] || 'Show more', + locale, + ).format() as string; + } else { + statusEl.dataset.spoiler = 'expanded'; + this.textContent = new IntlMessageFormat( + localeData['status.show_less'] || 'Show less', + locale, + ).format() as string; + } + }, + ); + + document + .querySelectorAll('button.status__content__spoiler-link') + .forEach((spoilerLink) => { + const statusEl = spoilerLink.parentNode?.parentNode; + + if ( + !( + statusEl instanceof HTMLDivElement && + statusEl.classList.contains('.status__content') + ) + ) + return; + + const message = + statusEl.dataset.spoiler === 'expanded' + ? localeData['status.show_less'] || 'Show less' + : localeData['status.show_more'] || 'Show more'; + spoilerLink.textContent = new IntlMessageFormat( + message, + locale, + ).format() as string; + }); +} + +const toggleSidebar = () => { + const sidebar = document.querySelector('.sidebar ul'); + const toggleButton = document.querySelector( + 'a.sidebar__toggle__icon', + ); + + if (!sidebar || !toggleButton) return; + + if (sidebar.classList.contains('visible')) { + document.body.style.overflow = ''; + toggleButton.setAttribute('aria-expanded', 'false'); + } else { + document.body.style.overflow = 'hidden'; + toggleButton.setAttribute('aria-expanded', 'true'); + } + + toggleButton.classList.toggle('active'); + sidebar.classList.toggle('visible'); +}; + +Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => { + toggleSidebar(); +}); + +Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', (e) => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault(); + toggleSidebar(); + } +}); + +Rails.delegate(document, 'img.custom-emoji', 'mouseover', ({ target }) => { + if (target instanceof HTMLImageElement && target.dataset.original) + target.src = target.dataset.original; +}); +Rails.delegate(document, 'img.custom-emoji', 'mouseout', ({ target }) => { + if (target instanceof HTMLImageElement && target.dataset.static) + target.src = target.dataset.static; +}); + +// Empty the honeypot fields in JS in case something like an extension +// automatically filled them. +Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => { + [ + 'user_website', + 'user_confirm_password', + 'registration_user_website', + 'registration_user_confirm_password', + ].forEach((id) => { + const field = document.querySelector(`input#${id}`); + if (field) { + field.value = ''; + } + }); +}); + +function main() { + ready(loaded).catch((error) => { + console.error(error); + }); +} + +loadPolyfills() + .then(loadLocale) + .then(main) + .then(loadKeyboardExtensions) + .catch((error) => { + console.error(error); + }); diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml index 33399c3746..1aa31df187 100644 --- a/app/javascript/flavours/glitch/theme.yml +++ b/app/javascript/flavours/glitch/theme.yml @@ -2,12 +2,12 @@ pack: admin: - packs/admin.tsx - - packs/public.jsx - auth: packs/public.jsx + - packs/public.tsx + auth: packs/public.tsx common: filename: packs/common.js stylesheet: true - embed: packs/public.jsx + embed: packs/public.tsx error: packs/error.js home: filename: packs/home.js @@ -17,8 +17,8 @@ pack: - flavours/glitch/async/notifications mailer: modal: - public: packs/public.jsx - settings: packs/public.jsx + public: packs/public.tsx + settings: packs/public.tsx sign_up: packs/sign_up.js share: packs/share.jsx From 3beba00c4e273d028d39473b39c564228143f793 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 15 Mar 2024 17:06:48 +0100 Subject: [PATCH 7/9] [Glitch] Change Explore icon to compass in advanced interface Port be7a68b09590a553d607b1fe99adf6916618d5d3 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/getting_started/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/features/getting_started/index.jsx b/app/javascript/flavours/glitch/features/getting_started/index.jsx index d27d134b30..585abb8b6c 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.jsx +++ b/app/javascript/flavours/glitch/features/getting_started/index.jsx @@ -11,6 +11,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react'; +import ExploreIcon from '@/material-icons/400-24px/explore.svg?react'; import PeopleIcon from '@/material-icons/400-24px/group.svg?react'; import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; @@ -22,7 +23,6 @@ import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react'; import PublicIcon from '@/material-icons/400-24px/public.svg?react'; import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react'; -import TagIcon from '@/material-icons/400-24px/tag.svg?react'; import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; import { fetchLists } from 'flavours/glitch/actions/lists'; import { openModal } from 'flavours/glitch/actions/modal'; @@ -158,7 +158,7 @@ class GettingStarted extends ImmutablePureComponent { } if (showTrends) { - navItems.push(); + navItems.push(); } if (signedIn) { From 80fda17868018785564ce828d2ce522a815f775c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 15 Mar 2024 18:36:41 +0100 Subject: [PATCH 8/9] [Glitch] Change mute, block and domain block confirmations in web UI Port ec19d0a14bd8f5e76293ca52cf67972e01c2135f to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/actions/blocks.js | 15 +- .../flavours/glitch/actions/domain_blocks.js | 11 + .../flavours/glitch/actions/mutes.js | 32 +-- .../flavours/glitch/components/check_box.tsx | 39 +++ .../account_timeline/components/header.jsx | 6 +- .../containers/header_container.jsx | 13 +- .../features/ui/components/block_modal.jsx | 151 ++++++------ .../ui/components/domain_block_modal.jsx | 106 ++++++++ .../features/ui/components/modal_root.jsx | 2 + .../features/ui/components/mute_modal.jsx | 228 ++++++++++-------- .../features/ui/util/async-components.js | 4 + .../flavours/glitch/reducers/blocks.js | 22 -- .../flavours/glitch/reducers/index.ts | 4 - .../flavours/glitch/reducers/mutes.js | 31 --- .../flavours/glitch/styles/components.scss | 223 +++++++++++++++-- .../flavours/glitch/styles/variables.scss | 11 +- 16 files changed, 581 insertions(+), 317 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/check_box.tsx create mode 100644 app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx delete mode 100644 app/javascript/flavours/glitch/reducers/blocks.js delete mode 100644 app/javascript/flavours/glitch/reducers/mutes.js diff --git a/app/javascript/flavours/glitch/actions/blocks.js b/app/javascript/flavours/glitch/actions/blocks.js index e293657ad3..54296d0905 100644 --- a/app/javascript/flavours/glitch/actions/blocks.js +++ b/app/javascript/flavours/glitch/actions/blocks.js @@ -12,8 +12,6 @@ export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST'; export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS'; export const BLOCKS_EXPAND_FAIL = 'BLOCKS_EXPAND_FAIL'; -export const BLOCKS_INIT_MODAL = 'BLOCKS_INIT_MODAL'; - export function fetchBlocks() { return (dispatch, getState) => { dispatch(fetchBlocksRequest()); @@ -90,11 +88,12 @@ export function expandBlocksFail(error) { export function initBlockModal(account) { return dispatch => { - dispatch({ - type: BLOCKS_INIT_MODAL, - account, - }); - - dispatch(openModal({ modalType: 'BLOCK' })); + dispatch(openModal({ + modalType: 'BLOCK', + modalProps: { + accountId: account.get('id'), + acct: account.get('acct'), + }, + })); }; } diff --git a/app/javascript/flavours/glitch/actions/domain_blocks.js b/app/javascript/flavours/glitch/actions/domain_blocks.js index 718002613f..55c0a6ce9d 100644 --- a/app/javascript/flavours/glitch/actions/domain_blocks.js +++ b/app/javascript/flavours/glitch/actions/domain_blocks.js @@ -1,6 +1,8 @@ import api, { getLinks } from '../api'; import { blockDomainSuccess, unblockDomainSuccess } from "./domain_blocks_typed"; +import { openModal } from './modal'; + export * from "./domain_blocks_typed"; @@ -150,3 +152,12 @@ export function expandDomainBlocksFail(error) { error, }; } + +export const initDomainBlockModal = account => dispatch => dispatch(openModal({ + modalType: 'DOMAIN_BLOCK', + modalProps: { + domain: account.get('acct').split('@')[1], + acct: account.get('acct'), + accountId: account.get('id'), + }, +})); diff --git a/app/javascript/flavours/glitch/actions/mutes.js b/app/javascript/flavours/glitch/actions/mutes.js index fb041078b8..99c113f414 100644 --- a/app/javascript/flavours/glitch/actions/mutes.js +++ b/app/javascript/flavours/glitch/actions/mutes.js @@ -12,10 +12,6 @@ export const MUTES_EXPAND_REQUEST = 'MUTES_EXPAND_REQUEST'; export const MUTES_EXPAND_SUCCESS = 'MUTES_EXPAND_SUCCESS'; export const MUTES_EXPAND_FAIL = 'MUTES_EXPAND_FAIL'; -export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL'; -export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS'; -export const MUTES_CHANGE_DURATION = 'MUTES_CHANGE_DURATION'; - export function fetchMutes() { return (dispatch, getState) => { dispatch(fetchMutesRequest()); @@ -92,26 +88,12 @@ export function expandMutesFail(error) { export function initMuteModal(account) { return dispatch => { - dispatch({ - type: MUTES_INIT_MODAL, - account, - }); - - dispatch(openModal({ modalType: 'MUTE' })); - }; -} - -export function toggleHideNotifications() { - return dispatch => { - dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS }); - }; -} - -export function changeMuteDuration(duration) { - return dispatch => { - dispatch({ - type: MUTES_CHANGE_DURATION, - duration, - }); + dispatch(openModal({ + modalType: 'MUTE', + modalProps: { + accountId: account.get('id'), + acct: account.get('acct'), + }, + })); }; } diff --git a/app/javascript/flavours/glitch/components/check_box.tsx b/app/javascript/flavours/glitch/components/check_box.tsx new file mode 100644 index 0000000000..7da8ef0ac5 --- /dev/null +++ b/app/javascript/flavours/glitch/components/check_box.tsx @@ -0,0 +1,39 @@ +import classNames from 'classnames'; + +import DoneIcon from '@/material-icons/400-24px/done.svg?react'; + +import { Icon } from './icon'; + +interface Props { + value: string; + checked: boolean; + name: string; + onChange: (event: React.ChangeEvent) => void; + label: React.ReactNode; +} + +export const CheckBox: React.FC = ({ + name, + value, + checked, + onChange, + label, +}) => { + return ( + + ); +}; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx index eb2ddbdd80..37258d9d83 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx @@ -72,11 +72,7 @@ class Header extends ImmutablePureComponent { }; handleBlockDomain = () => { - const domain = this.props.account.get('acct').split('@')[1]; - - if (!domain) return; - - this.props.onBlockDomain(domain); + this.props.onBlockDomain(this.props.account); }; handleUnblockDomain = () => { diff --git a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx index c3a3de71ed..d42bb2c251 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx @@ -15,7 +15,7 @@ import { mentionCompose, directCompose, } from '../../../actions/compose'; -import { blockDomain, unblockDomain } from '../../../actions/domain_blocks'; +import { initDomainBlockModal, unblockDomain } from '../../../actions/domain_blocks'; import { openModal } from '../../../actions/modal'; import { initMuteModal } from '../../../actions/mutes'; import { initReport } from '../../../actions/reports'; @@ -138,15 +138,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, - onBlockDomain (domain) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: {domain} }} />, - confirm: intl.formatMessage(messages.blockDomainConfirm), - onConfirm: () => dispatch(blockDomain(domain)), - }, - })); + onBlockDomain (account) { + dispatch(initDomainBlockModal(account)); }, onUnblockDomain (domain) { diff --git a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx index cfac692324..af5479b5fa 100644 --- a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx @@ -1,100 +1,87 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback } from 'react'; -import { injectIntl, FormattedMessage } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; +import { useDispatch } from 'react-redux'; -import { blockAccount } from '../../../actions/accounts'; -import { closeModal } from '../../../actions/modal'; -import { initReport } from '../../../actions/reports'; -import { Button } from '../../../components/button'; -import { makeGetAccount } from '../../../selectors'; +import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; +import BlockIcon from '@/material-icons/400-24px/block.svg?react'; +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import { blockAccount } from 'flavours/glitch/actions/accounts'; +import { closeModal } from 'flavours/glitch/actions/modal'; +import { Button } from 'flavours/glitch/components/button'; +import { Icon } from 'flavours/glitch/components/icon'; -const makeMapStateToProps = () => { - const getAccount = makeGetAccount(); +export const BlockModal = ({ accountId, acct }) => { + const dispatch = useDispatch(); - const mapStateToProps = state => ({ - account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])), - }); + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockAccount(accountId)); + }, [dispatch, accountId]); - return mapStateToProps; -}; + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); -const mapDispatchToProps = dispatch => { - return { - onConfirm(account) { - dispatch(blockAccount(account.get('id'))); - }, + return ( +
+
+
+
+ +
- onBlockAndReport(account) { - dispatch(blockAccount(account.get('id'))); - dispatch(initReport(account)); - }, - - onClose() { - dispatch(closeModal({ - modalType: undefined, - ignoreFocus: false, - })); - }, - }; -}; - -class BlockModal extends PureComponent { - - static propTypes = { - account: PropTypes.object.isRequired, - onClose: PropTypes.func.isRequired, - onBlockAndReport: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - handleClick = () => { - this.props.onClose(); - this.props.onConfirm(this.props.account); - }; - - handleSecondary = () => { - this.props.onClose(); - this.props.onBlockAndReport(this.props.account); - }; - - handleCancel = () => { - this.props.onClose(); - }; - - render () { - const { account } = this.props; - - return ( -
-
-

- @{account.get('acct')} }} - /> -

+
+

+
@{acct}
+
-
-
+ +
+
+ - - + +
- ); - } +
+ ); +}; -} +BlockModal.propTypes = { + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; -export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(BlockModal)); +export default BlockModal; diff --git a/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx new file mode 100644 index 0000000000..b1ab81dab5 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx @@ -0,0 +1,106 @@ +import PropTypes from 'prop-types'; +import { useCallback } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { useDispatch } from 'react-redux'; + +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import DomainDisabledIcon from '@/material-icons/400-24px/domain_disabled.svg?react'; +import HistoryIcon from '@/material-icons/400-24px/history.svg?react'; +import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import { blockAccount } from 'flavours/glitch/actions/accounts'; +import { blockDomain } from 'flavours/glitch/actions/domain_blocks'; +import { closeModal } from 'flavours/glitch/actions/modal'; +import { Button } from 'flavours/glitch/components/button'; +import { Icon } from 'flavours/glitch/components/icon'; + +export const DomainBlockModal = ({ domain, accountId, acct }) => { + const dispatch = useDispatch(); + + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockDomain(domain)); + }, [dispatch, domain]); + + const handleSecondaryClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockAccount(accountId)); + }, [dispatch, accountId]); + + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); + + return ( +
+
+
+
+ +
+ +
+

+
{domain}
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+ + +
+ + + + +
+
+
+ ); +}; + +DomainBlockModal.propTypes = { + domain: PropTypes.string.isRequired, + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; + +export default DomainBlockModal; diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx index 4ecf07b030..3f7e291e7b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx @@ -7,6 +7,7 @@ import Base from 'flavours/glitch/components/modal_root'; import { MuteModal, BlockModal, + DomainBlockModal, ReportModal, SettingsModal, EmbedModal, @@ -48,6 +49,7 @@ export const MODAL_COMPONENTS = { 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), 'MUTE': MuteModal, 'BLOCK': BlockModal, + 'DOMAIN_BLOCK': DomainBlockModal, 'REPORT': ReportModal, 'SETTINGS': SettingsModal, 'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }), diff --git a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx index fa81ea81a3..a161e24861 100644 --- a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx @@ -1,138 +1,154 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback, useState } from 'react'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; +import classNames from 'classnames'; -import Toggle from 'react-toggle'; +import { useDispatch } from 'react-redux'; -import { muteAccount } from '../../../actions/accounts'; -import { closeModal } from '../../../actions/modal'; -import { toggleHideNotifications, changeMuteDuration } from '../../../actions/mutes'; -import { Button } from '../../../components/button'; + +import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react'; +import { muteAccount } from 'flavours/glitch/actions/accounts'; +import { closeModal } from 'flavours/glitch/actions/modal'; +import { Button } from 'flavours/glitch/components/button'; +import { CheckBox } from 'flavours/glitch/components/check_box'; +import { Icon } from 'flavours/glitch/components/icon'; +import { RadioButton } from 'flavours/glitch/components/radio_button'; const messages = defineMessages({ minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' }, hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' }, days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' }, - indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Indefinite' }, + indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Until I unmute them' }, + hideFromNotifications: { id: 'mute_modal.hide_from_notifications', defaultMessage: 'Hide from notifications' }, }); -const mapStateToProps = state => { - return { - account: state.getIn(['mutes', 'new', 'account']), - notifications: state.getIn(['mutes', 'new', 'notifications']), - muteDuration: state.getIn(['mutes', 'new', 'duration']), - }; +const RadioButtonLabel = ({ name, value, currentValue, onChange, label }) => ( + +); + +RadioButtonLabel.propTypes = { + name: PropTypes.string, + value: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]), + currentValue: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]), + checked: PropTypes.bool, + onChange: PropTypes.func, + label: PropTypes.node, }; -const mapDispatchToProps = dispatch => { - return { - onConfirm(account, notifications, muteDuration) { - dispatch(muteAccount(account.get('id'), notifications, muteDuration)); - }, +export const MuteModal = ({ accountId, acct }) => { + const intl = useIntl(); + const dispatch = useDispatch(); + const [notifications, setNotifications] = useState(true); + const [muteDuration, setMuteDuration] = useState('0'); + const [expanded, setExpanded] = useState(false); - onClose() { - dispatch(closeModal({ - modalType: undefined, - ignoreFocus: false, - })); - }, + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(muteAccount(accountId, notifications, muteDuration)); + }, [dispatch, accountId, notifications, muteDuration]); - onToggleNotifications() { - dispatch(toggleHideNotifications()); - }, + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); - onChangeMuteDuration(e) { - dispatch(changeMuteDuration(e.target.value)); - }, - }; -}; + const handleToggleNotifications = useCallback(({ target }) => { + setNotifications(target.checked); + }, [setNotifications]); -class MuteModal extends PureComponent { + const handleChangeMuteDuration = useCallback(({ target }) => { + setMuteDuration(target.value); + }, [setMuteDuration]); - static propTypes = { - account: PropTypes.object.isRequired, - notifications: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - onToggleNotifications: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - muteDuration: PropTypes.number.isRequired, - onChangeMuteDuration: PropTypes.func.isRequired, - }; + const handleToggleSettings = useCallback(() => { + setExpanded(!expanded); + }, [expanded, setExpanded]); - handleClick = () => { - this.props.onClose(); - this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration); - }; - - handleCancel = () => { - this.props.onClose(); - }; - - toggleNotifications = () => { - this.props.onToggleNotifications(); - }; - - changeMuteDuration = (e) => { - this.props.onChangeMuteDuration(e); - }; - - render () { - const { account, notifications, muteDuration, intl } = this.props; - - return ( -
-
-

- @{account.get('acct')} }} - /> -

-

- -

-
- - + return ( +
+
+
+
+
-
- : - +
+

+
@{acct}
-
-
+ +
+
+
+ + + + +
+ +
+ +
+
+ +
+ + +
+ + - + +
- ); - } +
+ ); +}; -} +MuteModal.propTypes = { + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; -export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(MuteModal)); +export default MuteModal; diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index 14d46d7043..6a140e3fd7 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -126,6 +126,10 @@ export function BlockModal () { return import(/* webpackChunkName: "flavours/glitch/async/block_modal" */'../components/block_modal'); } +export function DomainBlockModal () { + return import(/* webpackChunkName: "flavours/glitch/async/modals/domain_block_modal" */'../components/domain_block_modal'); +} + export function ReportModal () { return import(/* webpackChunkName: "flavours/glitch/async/report_modal" */'../components/report_modal'); } diff --git a/app/javascript/flavours/glitch/reducers/blocks.js b/app/javascript/flavours/glitch/reducers/blocks.js deleted file mode 100644 index 1b65071634..0000000000 --- a/app/javascript/flavours/glitch/reducers/blocks.js +++ /dev/null @@ -1,22 +0,0 @@ -import Immutable from 'immutable'; - -import { - BLOCKS_INIT_MODAL, -} from '../actions/blocks'; - -const initialState = Immutable.Map({ - new: Immutable.Map({ - account_id: null, - }), -}); - -export default function mutes(state = initialState, action) { - switch (action.type) { - case BLOCKS_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'account_id'], action.account.get('id')); - }); - default: - return state; - } -} diff --git a/app/javascript/flavours/glitch/reducers/index.ts b/app/javascript/flavours/glitch/reducers/index.ts index 1049a39900..c67349e51f 100644 --- a/app/javascript/flavours/glitch/reducers/index.ts +++ b/app/javascript/flavours/glitch/reducers/index.ts @@ -7,7 +7,6 @@ import { accountsReducer } from './accounts'; import accounts_map from './accounts_map'; import alerts from './alerts'; import announcements from './announcements'; -import blocks from './blocks'; import boosts from './boosts'; import compose from './compose'; import contexts from './contexts'; @@ -27,7 +26,6 @@ import markers from './markers'; import media_attachments from './media_attachments'; import meta from './meta'; import { modalReducer } from './modal'; -import mutes from './mutes'; import { notificationPolicyReducer } from './notification_policy'; import { notificationRequestsReducer } from './notification_requests'; import notifications from './notifications'; @@ -65,8 +63,6 @@ const reducers = { settings, local_settings, push_notifications, - mutes, - blocks, boosts, server, contexts, diff --git a/app/javascript/flavours/glitch/reducers/mutes.js b/app/javascript/flavours/glitch/reducers/mutes.js deleted file mode 100644 index a9eb61ff83..0000000000 --- a/app/javascript/flavours/glitch/reducers/mutes.js +++ /dev/null @@ -1,31 +0,0 @@ -import Immutable from 'immutable'; - -import { - MUTES_INIT_MODAL, - MUTES_TOGGLE_HIDE_NOTIFICATIONS, - MUTES_CHANGE_DURATION, -} from '../actions/mutes'; - -const initialState = Immutable.Map({ - new: Immutable.Map({ - account: null, - notifications: true, - duration: 0, - }), -}); - -export default function mutes(state = initialState, action) { - switch (action.type) { - case MUTES_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'account'], action.account); - state.setIn(['new', 'notifications'], true); - }); - case MUTES_TOGGLE_HIDE_NOTIFICATIONS: - return state.updateIn(['new', 'notifications'], (old) => !old); - case MUTES_CHANGE_DURATION: - return state.setIn(['new', 'duration'], Number(action.duration)); - default: - return state; - } -} diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 147a88cf14..3501777873 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -106,17 +106,17 @@ } &.button-secondary { - color: $ui-button-secondary-color; + color: $highlight-text-color; background: transparent; padding: 6px 17px; - border: 1px solid $ui-button-secondary-border-color; + border: 1px solid $highlight-text-color; &:active, &:focus, &:hover { - border-color: $ui-button-secondary-focus-background-color; - color: $ui-button-secondary-focus-color; - background-color: $ui-button-secondary-focus-background-color; + border-color: lighten($highlight-text-color, 4%); + color: lighten($highlight-text-color, 4%); + background-color: transparent; text-decoration: none; } @@ -5978,6 +5978,10 @@ a.status-card { pointer-events: auto; user-select: text; display: flex; + + @media screen and (max-width: $no-gap-breakpoint) { + margin-top: auto; + } } .video-modal .video-player { @@ -6309,6 +6313,145 @@ a.status-card { margin-inline-start: 10px; } +.safety-action-modal { + width: 600px; + flex-direction: column; + + &__top, + &__bottom { + display: flex; + gap: 8px; + padding: 24px; + flex-direction: column; + background: var(--modal-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--modal-border-color); + } + + &__top { + border-radius: 16px 16px 0 0; + border-bottom: 0; + gap: 16px; + } + + &__bottom { + border-radius: 0 0 16px 16px; + border-top: 0; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + border-bottom: 0; + padding-bottom: 32px; + } + } + + &__header { + display: flex; + gap: 16px; + align-items: center; + font-size: 14px; + line-height: 20px; + color: $darker-text-color; + + &__icon { + border-radius: 64px; + background: $ui-highlight-color; + color: $white; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + flex-shrink: 0; + + .icon { + width: 24px; + height: 24px; + } + } + + h1 { + font-size: 22px; + line-height: 28px; + color: $primary-text-color; + } + } + + &__bullet-points { + display: flex; + flex-direction: column; + gap: 8px; + font-size: 16px; + line-height: 24px; + + & > div { + display: flex; + gap: 16px; + align-items: center; + } + + &__icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + .icon { + width: 24px; + height: 24px; + } + } + } + + &__field-group { + display: flex; + flex-direction: column; + + label { + display: flex; + gap: 16px; + align-items: center; + font-size: 16px; + line-height: 24px; + height: 32px; + padding: 0 12px; + } + } + + &__bottom { + padding-top: 0; + + &__collapsible { + display: none; + flex-direction: column; + gap: 16px; + } + + &.active { + background: var(--modal-background-variant-color); + padding-top: 24px; + + .safety-action-modal__bottom__collapsible { + display: flex; + } + } + } + + &__actions { + display: flex; + align-items: center; + gap: 8px; + justify-content: flex-end; + + .link-button { + padding: 10px 12px; + font-weight: 600; + } + } +} + .doodle-modal, .boost-modal, .confirmation-modal, @@ -7694,7 +7837,8 @@ img.modal-warning { display: flex; } -.radio-button { +.radio-button, +.check-box { font-size: 14px; position: relative; display: inline-flex; @@ -7713,17 +7857,19 @@ img.modal-warning { } &__input { - display: block; + display: flex; + align-items: center; + justify-content: center; position: relative; border: 2px solid $secondary-text-color; box-sizing: border-box; - width: 18px; - height: 18px; + width: 20px; + height: 20px; flex: 0 0 auto; border-radius: 50%; &.checked { - border-color: $secondary-text-color; + border-color: $ui-highlight-color; &::before { position: absolute; @@ -7732,9 +7878,31 @@ img.modal-warning { content: ''; display: block; border-radius: 50%; - width: 10px; - height: 10px; - background: $secondary-text-color; + width: 12px; + height: 12px; + background: $ui-highlight-color; + } + } + + .icon { + width: 18px; + height: 18px; + } + } +} + +.check-box { + &__input { + width: 18px; + height: 18px; + border-radius: 2px; + + &.checked { + background: $ui-highlight-color; + color: $white; + + &::before { + display: none; } } } @@ -9220,22 +9388,36 @@ noscript { } } +.safety-action-modal, .interaction-modal { max-width: 90vw; width: 600px; - background: var(--modal-background-color); - border: 1px solid var(--modal-border-color); - border-radius: 8px; +} + +.interaction-modal { overflow: visible; position: relative; display: block; - padding: 40px; + border-radius: 16px; + background: var(--modal-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--modal-border-color); + padding: 24px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 16px 16px 0 0; + border-bottom: 0; + padding-bottom: 32px; + } h3 { font-size: 22px; line-height: 33px; font-weight: 700; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; } p { @@ -9256,7 +9438,9 @@ noscript { &__icon { color: $highlight-text-color; - margin: 0 5px; + display: flex; + align-items: center; + justify-content: center; } &__lead { @@ -9289,6 +9473,7 @@ noscript { border: 0; padding: 15px - 4px 15px - 6px; flex: 1 1 auto; + min-width: 0; &::placeholder { color: lighten($darker-text-color, 4%); diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 70bd86d33c..54dc54ac02 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -46,10 +46,10 @@ $ui-button-focus-background-color: $blurple-600 !default; $ui-button-focus-outline-color: $blurple-400 !default; $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default; -$ui-button-secondary-color: $grey-100 !default; -$ui-button-secondary-border-color: $grey-100 !default; -$ui-button-secondary-focus-background-color: $grey-600 !default; -$ui-button-secondary-focus-color: $white !default; +$ui-button-secondary-color: $blurple-500 !default; +$ui-button-secondary-border-color: $blurple-500 !default; +$ui-button-secondary-focus-border-color: $blurple-300 !default; +$ui-button-secondary-focus-color: $blurple-300 !default; $ui-button-tertiary-color: $blurple-300 !default; $ui-button-tertiary-border-color: $blurple-300 !default; @@ -104,7 +104,8 @@ $dismiss-overlay-width: 4rem; --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)}; --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, 0 8px 10px -6px #{rgba($base-shadow-color, 0.25)}; - --modal-background-color: #{darken($ui-base-color, 4%)}; + --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)}; + --modal-background-variant-color: #{rgba($ui-base-color, 0.7)}; --modal-border-color: #{lighten($ui-base-color, 4%)}; --background-border-color: #{lighten($ui-base-color, 4%)}; --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); From c511e52d1e67e3aec8571037572c6e1c7a346cd7 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 15 Mar 2024 20:09:21 +0100 Subject: [PATCH 9/9] =?UTF-8?q?[Glitch]=20Add=20=E2=80=9CLearn=20more?= =?UTF-8?q?=E2=80=9D=20on=20block=20modal=20to=20inform=20of=20federation?= =?UTF-8?q?=20caveats?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port d702a03a0c35fc631a0fa456532946e6751cbbfd to glitch-soc Signed-off-by: Claire --- .../features/ui/components/block_modal.jsx | 33 +++++++++++++++++-- .../flavours/glitch/styles/components.scss | 9 +++++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx index af5479b5fa..fa772b067d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx @@ -1,8 +1,10 @@ import PropTypes from 'prop-types'; -import { useCallback } from 'react'; +import { useCallback, useState } from 'react'; import { FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; + import { useDispatch } from 'react-redux'; import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; @@ -17,6 +19,9 @@ import { Icon } from 'flavours/glitch/components/icon'; export const BlockModal = ({ accountId, acct }) => { const dispatch = useDispatch(); + const [expanded, setExpanded] = useState(false); + + const domain = acct.split('@')[1]; const handleClick = useCallback(() => { dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); @@ -27,6 +32,10 @@ export const BlockModal = ({ accountId, acct }) => { dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); }, [dispatch]); + const handleToggleLearnMore = useCallback(() => { + setExpanded(!expanded); + }, [expanded, setExpanded]); + return (
@@ -64,8 +73,28 @@ export const BlockModal = ({ accountId, acct }) => {
-
+
+ {domain && ( +
+
+ {domain} }} + /> +
+
+ )} +
+ {domain && ( + + )} + +
+ diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 3501777873..8c74f6d2d0 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -6420,6 +6420,15 @@ a.status-card { } } + &__caveats { + font-size: 14px; + padding: 0 12px; + + strong { + font-weight: 500; + } + } + &__bottom { padding-top: 0;