From ca90a995606138cf97f898408620e69374a34192 Mon Sep 17 00:00:00 2001 From: Thor Date: Sat, 26 Feb 2022 17:49:59 +0100 Subject: [PATCH] Revert redundant vanilla patches to upstream --- app/javascript/mastodon/actions/compose.js | 8 +- .../mastodon/components/media_gallery.js | 59 ++-- .../containers/upload_button_container.js | 2 +- app/javascript/mastodon/features/ui/index.js | 2 +- app/javascript/mastodon/utils/resize_image.js | 3 +- .../styles/mastodon/components.scss | 277 ++++-------------- 6 files changed, 89 insertions(+), 262 deletions(-) diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 4962ba07e2..b0a217550f 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -197,9 +197,7 @@ export function submitCompose(routerHistory) { if (statusId === null && response.data.in_reply_to_id === null && response.data.visibility === 'public') { insertIfOnline('community'); - if (!response.data.local_only) { - insertIfOnline('public'); - } + insertIfOnline('public'); insertIfOnline(`account:${response.data.account.id}`); } }).catch(function (error) { @@ -230,7 +228,7 @@ export function submitComposeFail(error) { export function uploadCompose(files) { return function (dispatch, getState) { - const uploadLimit = 20; // attachment limit patch + const uploadLimit = 4; const media = getState().getIn(['compose', 'media_attachments']); const pending = getState().getIn(['compose', 'pending_media_attachments']); const progress = new Array(files.length).fill(0); @@ -249,7 +247,7 @@ export function uploadCompose(files) { dispatch(uploadComposeRequest()); for (const [i, f] of Array.from(files).entries()) { - if (media.size + i > 19) break; // attachment limit patch + if (media.size + i > 3) break; resizeImage(f).then(file => { const data = new FormData(); diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index edba0cc863..2e7ce2e608 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -87,39 +87,46 @@ class Item extends React.PureComponent { let left = 'auto'; let bottom = 'auto'; let right = 'auto'; - - let root = Math.sqrt(size); - let numCols = Math.ceil(root); - let numRows = Math.ceil(size / numCols); - - let col = index % numCols; - let row = Math.floor(index / numCols); - if(row === numRows - 1) { - width = 100 / (1 + ((size - 1) % numCols)); - } else { - width = 100 / numCols; + + if (size === 1) { + width = 100; } - height = 100 / numRows; - - if(numCols > 1) { - if(col === 0) { + + if (size === 4 || (size === 3 && index > 0)) { + height = 50; + } + + if (size === 2) { + if (index === 0) { right = '2px'; - } else if(col === numCols - 1) { - left = '2px';; } else { left = '2px'; + } + } else if (size === 3) { + if (index === 0) { right = '2px'; + } else if (index > 0) { + left = '2px'; } - } - if(numRows > 1) { - if(row === 0) { + if (index === 1) { bottom = '2px'; - } else if(row === numRows - 1) { + } else if (index > 1) { top = '2px'; + } + } else if (size === 4) { + if (index === 0 || index === 2) { + right = '2px'; + } + + if (index === 1 || index === 3) { + left = '2px'; + } + + if (index < 2) { + bottom = '2px'; } else { top = '2px'; - bottom = '2px'; } } @@ -127,7 +134,7 @@ class Item extends React.PureComponent { if (attachment.get('type') === 'unknown') { return ( -
+
+
attachment.get('type') === 'unknown'); if (standalone && this.isFullSizeEligible()) { children = ; } else { - children = media.take(20).map((attachment, i) => ); + children = media.take(4).map((attachment, i) => ); } if (uncached) { diff --git a/app/javascript/mastodon/features/compose/containers/upload_button_container.js b/app/javascript/mastodon/features/compose/containers/upload_button_container.js index 45e327805f..221b98e310 100644 --- a/app/javascript/mastodon/features/compose/containers/upload_button_container.js +++ b/app/javascript/mastodon/features/compose/containers/upload_button_container.js @@ -3,7 +3,7 @@ import UploadButton from '../components/upload_button'; import { uploadCompose } from '../../../actions/compose'; const mapStateToProps = state => ({ - disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 19 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))), + disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))), unavailable: state.getIn(['compose', 'poll']) !== null, resetFileKey: state.getIn(['compose', 'resetFileKey']), }); diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 39cf55be6f..3feffa6564 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -69,7 +69,7 @@ const mapStateToProps = state => ({ isComposing: state.getIn(['compose', 'is_composing']), hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0, hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0, - canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 20, + canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4, dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null, firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION, username: state.getIn(['accounts', me, 'username']), diff --git a/app/javascript/mastodon/utils/resize_image.js b/app/javascript/mastodon/utils/resize_image.js index 1e560de92a..22ff86801a 100644 --- a/app/javascript/mastodon/utils/resize_image.js +++ b/app/javascript/mastodon/utils/resize_image.js @@ -1,7 +1,6 @@ import EXIF from 'exif-js'; -//const MAX_IMAGE_PIXELS = 2073600; // 1920x1080px -const MAX_IMAGE_PIXELS = 8294400; // 3840x2160px (HiDPI patch) +const MAX_IMAGE_PIXELS = 2073600; // 1920x1080px const _browser_quirks = {}; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 17652ce061..591f2fad13 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -50,14 +50,16 @@ cursor: pointer; display: inline-block; font-family: inherit; - font-size: 17px; + font-size: 14px; font-weight: 500; + height: 36px; letter-spacing: 0; - line-height: 22px; + line-height: 36px; overflow: hidden; - padding: 7px 18px; + padding: 0 16px; position: relative; text-align: center; + text-transform: uppercase; text-decoration: none; text-overflow: ellipsis; transition: all 100ms ease-in; @@ -98,6 +100,17 @@ outline: 0 !important; } + &.button-primary, + &.button-alternative, + &.button-secondary, + &.button-alternative-2 { + font-size: 16px; + line-height: 36px; + height: auto; + text-transform: none; + padding: 4px 16px; + } + &.button-alternative { color: $inverted-text-color; background: $ui-primary-color; @@ -122,7 +135,7 @@ &.button-secondary { color: $darker-text-color; background: transparent; - padding: 6px 17px; + padding: 3px 15px; border: 1px solid $ui-primary-color; &:active, @@ -815,18 +828,11 @@ } .emojione { - width: 32px; - height: 32px; - margin: 0; - } - - img.emojione[alt^=":sticker_"] { - width: 128px; - height: 128px; - display: block; - margin: 0; + width: 20px; + height: 20px; + margin: -3px 0 0; } - + p { margin-bottom: 20px; white-space: pre-wrap; @@ -1108,39 +1114,42 @@ font-size: 15px; } -.status-check-box__status { - display: block; - box-sizing: border-box; - width: 100%; - padding: 0 10px; +.status-check-box { + border-bottom: 1px solid $ui-secondary-color; + display: flex; - .detailed-status__display-name { - color: lighten($inverted-text-color, 16%); + .status-check-box__status { + margin: 10px 0 10px 10px; + flex: 1; + overflow: hidden; - span { - display: inline; + .media-gallery { + max-width: 250px; } - &:hover strong { - text-decoration: none; + .status__content { + padding: 0; + white-space: normal; } - } - .media-gallery, - .audio-player, - .video-player { - margin-top: 8px; - max-width: 250px; - } + .video-player, + .audio-player { + margin-top: 8px; + max-width: 250px; + } - .status__content { - padding: 0; - white-space: normal; + .media-gallery__item-thumbnail { + cursor: default; + } } +} - .media-gallery__item-thumbnail { - cursor: default; - } +.status-check-box-toggle { + align-items: center; + display: flex; + flex: 0 0 auto; + justify-content: center; + padding: 10px; } .status__prepend { @@ -1770,7 +1779,7 @@ a.account__display-name { .image-loader__preview-canvas { max-width: $media-modal-media-max-width; max-height: $media-modal-media-max-height; - background: url('~images/void.png') repeat; + background: url('../images/void.png') repeat; object-fit: contain; } @@ -5094,192 +5103,6 @@ a.status-card.compact:hover { max-width: 700px; } -.report-dialog-modal { - max-width: 90vw; - width: 480px; - height: 80vh; - background: lighten($ui-secondary-color, 8%); - color: $inverted-text-color; - border-radius: 8px; - overflow: hidden; - position: relative; - flex-direction: column; - display: flex; - - &__container { - box-sizing: border-box; - border-top: 1px solid $ui-secondary-color; - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - min-height: 0; - overflow: auto; - } - - &__title { - font-size: 28px; - line-height: 33px; - font-weight: 700; - margin-bottom: 15px; - - @media screen and (max-height: 800px) { - font-size: 22px; - } - } - - &__subtitle { - font-size: 17px; - font-weight: 600; - line-height: 22px; - margin-bottom: 4px; - } - - &__lead { - font-size: 17px; - line-height: 22px; - color: lighten($inverted-text-color, 16%); - margin-bottom: 30px; - } - - &__actions { - margin-top: 30px; - display: flex; - - .button { - flex: 1 1 auto; - } - } - - &__statuses { - flex-grow: 1; - min-height: 0; - overflow: auto; - } - - .status__content a { - color: $highlight-text-color; - } - - .status__content, - .status__content p { - color: $inverted-text-color; - } - - .dialog-option .poll__input { - border-color: $inverted-text-color; - color: $ui-secondary-color; - display: inline-flex; - align-items: center; - justify-content: center; - - svg { - width: 8px; - height: auto; - } - - &:active, - &:focus, - &:hover { - border-color: lighten($inverted-text-color, 15%); - border-width: 4px; - } - - &.active { - border-color: $inverted-text-color; - background: $inverted-text-color; - } - } - - .poll__option.dialog-option { - padding: 15px 0; - flex: 0 0 auto; - border-bottom: 1px solid $ui-secondary-color; - - &:last-child { - border-bottom: 0; - } - - & > .poll__option__text { - font-size: 13px; - color: lighten($inverted-text-color, 16%); - - strong { - font-size: 17px; - font-weight: 500; - line-height: 22px; - color: $inverted-text-color; - display: block; - margin-bottom: 4px; - - &:last-child { - margin-bottom: 0; - } - } - } - } - - .flex-spacer { - background: transparent; - } - - &__textarea { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: $inverted-text-color; - background: $simple-background-color; - padding: 10px; - font-family: inherit; - font-size: 17px; - line-height: 22px; - resize: vertical; - border: 0; - outline: 0; - border-radius: 4px; - margin: 20px 0; - - &::placeholder { - color: $dark-text-color; - } - - &:focus { - outline: 0; - } - } - - &__toggle { - display: flex; - align-items: center; - - & > span { - font-size: 17px; - font-weight: 500; - margin-left: 10px; - } - } - - .button.button-secondary { - border-color: $inverted-text-color; - color: $inverted-text-color; - flex: 0 0 auto; - - &:hover, - &:focus, - &:active { - border-color: lighten($inverted-text-color, 15%); - color: lighten($inverted-text-color, 15%); - } - } - - hr { - border: 0; - background: transparent; - margin: 15px 0; - } -} - .report-modal__container { display: flex; border-top: 1px solid $ui-secondary-color; @@ -6877,7 +6700,7 @@ noscript { width: 100px; height: 100px; transform: translate(-50%, -50%); - background: url('~images/reticle.png') no-repeat 0 0; + background: url('../images/reticle.png') no-repeat 0 0; border-radius: 50%; box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35); }