From 37246650d1d51c155e7cee1961a34000d2a26172 Mon Sep 17 00:00:00 2001 From: Cutls Date: Tue, 1 Oct 2019 00:12:33 +0900 Subject: [Glitch] Fix and remove ugly css around the conversation component Port 12c4ec0c83fc5d43a29b3333ab07510c87844166 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/components/index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 848ef78df..d59c06e5e 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1477,8 +1477,8 @@ overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; - flex-basis: 170px; - flex-shrink: 1000; + flex-basis: 90px; + flex-grow: 1; a { color: $primary-text-color; -- cgit From ff4b95a2542e68f162b899b1b8996902a3cbb202 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 1 Oct 2019 04:54:29 +0200 Subject: [Glitch] Fix long domain block descriptions breaking table layout Port SCSS changes from c35376132b6675c21c2c85dd2456cf0779e89ad9 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/about.scss | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 7c129674d..a38ca99b4 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -145,8 +145,6 @@ $small-breakpoint: 960px; thead tr, tbody tr { - break-after: auto; - break-inside: avoid; border-bottom: 1px solid lighten($ui-base-color, 4%); font-size: 1em; line-height: 1.625; @@ -167,12 +165,25 @@ $small-breakpoint: 960px; padding: 8px; align-self: start; align-items: start; + word-break: break-all; &.nowrap { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; width: 25%; + position: relative; + + &::before { + content: ' '; + visibility: hidden; + } + + span { + position: absolute; + left: 8px; + right: 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } -- cgit From 685b6e197f2e4f42195f4a15a1538b379956aa90 Mon Sep 17 00:00:00 2001 From: Cutls Date: Wed, 2 Oct 2019 07:39:56 +0900 Subject: [Glitch] Fix bad word breaking on conversations Port 733a3d20b089f67ec57b08ddcad19b8de212fd48 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/components/index.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index d59c06e5e..6f0d4c0be 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1454,7 +1454,6 @@ flex: 1 1 auto; padding: 10px 5px; padding-right: 15px; - word-break: break-all; overflow: hidden; &__info { @@ -1525,6 +1524,10 @@ noscript { text-decoration: none; } } + + a { + word-break: break-word; + } } } -- cgit From 7ca6153c0c3617b4e99b93a10d2ef8219ab61432 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 3 Oct 2019 03:17:29 +0200 Subject: [Glitch] Fix media editing modal and profile directory in light theme Port f51f99c3c21e1ef792db91cb90816b6c52727989 to glitch-soc Signed-off-by: Thibaut Girka --- .../glitch/features/ui/components/embed_modal.js | 17 +++++++++++++---- .../flavours/glitch/styles/components/modal.scss | 4 ++++ .../flavours/glitch/styles/components/status.scss | 4 ++++ app/javascript/flavours/glitch/styles/containers.scss | 14 ++++++++++++++ .../flavours/glitch/styles/mastodon-light/diff.scss | 15 +++++++++++++-- .../glitch/styles/mastodon-light/variables.scss | 2 ++ 6 files changed, 50 insertions(+), 6 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/features/ui/components/embed_modal.js b/app/javascript/flavours/glitch/features/ui/components/embed_modal.js index 47c1c7925..b6f5e628d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/embed_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/embed_modal.js @@ -1,8 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { FormattedMessage, injectIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import api from 'flavours/glitch/util/api'; +import IconButton from 'flavours/glitch/components/icon_button'; + +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, +}); export default @injectIntl class EmbedModal extends ImmutablePureComponent { @@ -50,13 +55,17 @@ class EmbedModal extends ImmutablePureComponent { } render () { + const { intl, onClose } = this.props; const { oembed } = this.state; return ( -
-

+
+
+ + +
-
+

diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 4f3e5babf..716796af9 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -736,6 +736,7 @@ &:focus, &:active { color: darken($lighter-text-color, 4%); + background-color: transparent; } } @@ -804,6 +805,7 @@ } .embed-modal { + width: auto; max-width: 80vw; max-height: 80vh; @@ -834,6 +836,7 @@ font-size: 14px; margin: 0; margin-bottom: 15px; + border-radius: 4px; &::-moz-focus-inner { border: 0; @@ -859,6 +862,7 @@ max-width: 100%; overflow: hidden; border: 0; + border-radius: 4px; } } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index ae89ac0a8..ded423afa 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -640,6 +640,10 @@ a.status__display-name, color: inherit; } +.detailed-status .button.logo-button { + margin-bottom: 15px; +} + .detailed-status__display-name { color: $secondary-text-color; display: block; diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 6a48ff354..e2f291b69 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -414,6 +414,20 @@ } } + .directory__card { + border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } + } + + .page-header { + @media screen and (max-width: $no-gap-breakpoint) { + border-bottom: 0; + } + } + .public-account-header { overflow: hidden; margin-bottom: 10px; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 5c7fa87da..3b4ffdf3c 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -230,8 +230,19 @@ .report-modal, .embed-modal, .error-modal, -.onboarding-modal { - background: $ui-base-color; +.onboarding-modal, +.report-modal__comment .setting-text__wrapper, +.report-modal__comment .setting-text { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); +} + +.report-modal__comment { + border-right-color: lighten($ui-base-color, 8%); +} + +.report-modal__container { + border-top-color: lighten($ui-base-color, 8%); } .boost-modal__action-bar, diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index 1b060b58d..312f5e314 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -18,6 +18,8 @@ $darker-text-color: $classic-base-color !default; $dark-text-color: #444b5d; $action-button-color: #606984; +$success-green: lighten(#3c754d, 8%); + $base-overlay-background: $white !default; $inverted-text-color: $black !default; -- cgit From 79388a52aacbea864df2c6562bba2241470fa1ad Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 3 Oct 2019 03:17:41 +0200 Subject: [Glitch] Fix issues in RTL layout in web UI Port 9184522cb49d87a58184a0561d46575ea1b5667d to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/styles/components/media.scss | 2 ++ app/javascript/flavours/glitch/styles/rtl.scss | 35 +++++++++++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 85982d938..b21ed9dd6 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -339,6 +339,7 @@ background: darken($ui-base-color, 8%); border-radius: 4px; padding-bottom: 44px; + direction: ltr; &.editable { border-radius: 0; @@ -386,6 +387,7 @@ max-width: 100%; border-radius: 4px; box-sizing: border-box; + direction: ltr; &.editable { border-radius: 0; diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 8a275d82f..2375bac90 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -7,6 +7,34 @@ body.rtl { padding-right: 15px; } + .radio-button__input { + margin-right: 0; + margin-left: 10px; + } + + .directory__card__bar .display-name { + margin-left: 0; + margin-right: 15px; + } + + .display-name { + text-align: right; + } + + .notification__message { + margin-left: 0; + margin-right: 68px; + } + + .drawer__inner__mastodon > img { + transform: scaleX(-1); + } + + .notification__favourite-icon-wrapper { + left: auto; + right: -26px; + } + .landing-page__logo { margin-right: 0; margin-left: 20px; @@ -152,7 +180,6 @@ body.rtl { } .status__action-bar { - &__counter { margin-right: 0; margin-left: 11px; @@ -345,6 +372,12 @@ body.rtl { } } + .columns-area--mobile .column, + .columns-area--mobile .drawer { + padding-left: 0; + padding-right: 0; + } + .public-layout { .header { .nav-button { -- cgit From 360234d1bf1ea8b5c88a96d21156ea351f3e87c2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 3 Oct 2019 03:34:58 +0200 Subject: [Glitch] Fix audio attachments opening in video modal from media tab in web UI Port c9b8ba50f8ad46e2f7821bb36af0c85e4b9a29df to glitch-soc Signed-off-by: Thibaut Girka --- .../account_gallery/components/media_item.js | 4 +- .../glitch/features/account_gallery/index.js | 4 +- .../glitch/features/ui/components/audio_modal.js | 76 ++++++++++++++++++++++ .../glitch/features/ui/components/media_modal.js | 2 +- .../glitch/features/ui/components/modal_root.js | 2 + .../glitch/features/ui/components/video_modal.js | 13 ++-- .../flavours/glitch/styles/components/media.scss | 8 ++- 7 files changed, 100 insertions(+), 9 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/ui/components/audio_modal.js (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js index bd3baa5c3..6d07ec48c 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js +++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js @@ -118,6 +118,7 @@ export default class MediaItem extends ImmutablePureComponent { ); } else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) { const autoPlay = !isIOS() && autoPlayGif; + const label = attachment.get('type') === 'video' ? : 'GIF'; thumbnail = (
@@ -133,7 +134,8 @@ export default class MediaItem extends ImmutablePureComponent { loop muted /> - GIF + + {label}
); } diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.js b/app/javascript/flavours/glitch/features/account_gallery/index.js index 597196567..ff39764bb 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/index.js +++ b/app/javascript/flavours/glitch/features/account_gallery/index.js @@ -111,8 +111,10 @@ class AccountGallery extends ImmutablePureComponent { } handleOpenMedia = attachment => { - if (['video', 'audio'].includes(attachment.get('type'))) { + if (attachment.get('type') === 'video') { this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') })); + } else if (attachment.get('type') === 'audio') { + this.props.dispatch(openModal('AUDIO', { media: attachment, status: attachment.get('status') })); } else { const media = attachment.getIn(['status', 'media_attachments']); const index = media.findIndex(x => x.get('id') === attachment.get('id')); diff --git a/app/javascript/flavours/glitch/features/ui/components/audio_modal.js b/app/javascript/flavours/glitch/features/ui/components/audio_modal.js new file mode 100644 index 000000000..15d4591c9 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/audio_modal.js @@ -0,0 +1,76 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import Audio from 'flavours/glitch/features/audio'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { FormattedMessage } from 'react-intl'; +import { previewState } from './video_modal'; +import classNames from 'classnames'; +import Icon from 'flavours/glitch/components/icon'; + +export default class AudioModal extends ImmutablePureComponent { + + static propTypes = { + media: ImmutablePropTypes.map.isRequired, + status: ImmutablePropTypes.map, + onClose: PropTypes.func.isRequired, + }; + + static contextTypes = { + router: PropTypes.object, + }; + + componentDidMount () { + if (this.context.router) { + const history = this.context.router.history; + + history.push(history.location.pathname, previewState); + + this.unlistenHistory = history.listen(() => { + this.props.onClose(); + }); + } + } + + componentWillUnmount () { + if (this.context.router) { + this.unlistenHistory(); + + if (this.context.router.history.location.state === previewState) { + this.context.router.history.goBack(); + } + } + } + + handleStatusClick = e => { + if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { + e.preventDefault(); + this.context.router.history.push(`/statuses/${this.props.status.get('id')}`); + } + } + + render () { + const { media, status } = this.props; + + return ( +
+
+
+ + {status && ( +
+ +
+ )} +
+ ); + } + +} diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.js index 5d60c8a08..d61c69f69 100644 --- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js @@ -208,7 +208,7 @@ class MediaModal extends ImmutablePureComponent { {status && (
1 })}> - +
)} diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index 0941ce9c8..117ce4c55 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -9,6 +9,7 @@ import MediaModal from './media_modal'; import VideoModal from './video_modal'; import BoostModal from './boost_modal'; import FavouriteModal from './favourite_modal'; +import AudioModal from './audio_modal'; import DoodleModal from './doodle_modal'; import ConfirmationModal from './confirmation_modal'; import FocalPointModal from './focal_point_modal'; @@ -28,6 +29,7 @@ const MODAL_COMPONENTS = { 'MEDIA': () => Promise.resolve({ default: MediaModal }), 'ONBOARDING': OnboardingModal, 'VIDEO': () => Promise.resolve({ default: VideoModal }), + 'AUDIO': () => Promise.resolve({ default: AudioModal }), 'BOOST': () => Promise.resolve({ default: BoostModal }), 'FAVOURITE': () => Promise.resolve({ default: FavouriteModal }), 'DOODLE': () => Promise.resolve({ default: DoodleModal }), diff --git a/app/javascript/flavours/glitch/features/ui/components/video_modal.js b/app/javascript/flavours/glitch/features/ui/components/video_modal.js index 3f742c260..ef69f60f4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/video_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/video_modal.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import Video from 'flavours/glitch/features/video'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; +import Icon from 'mastodon/components/icon'; export default class VideoModal extends ImmutablePureComponent { @@ -28,22 +30,25 @@ export default class VideoModal extends ImmutablePureComponent { render () { const { media, status, time, onClose } = this.props; - const link = status && ; - return (
-
+
+ + {status && ( +
+ +
+ )}
); } diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index b21ed9dd6..366759847 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -179,10 +179,13 @@ position: absolute; } -.video-modal { +.video-modal__container { max-width: 100vw; max-height: 100vh; - position: relative; +} + +.audio-modal__container { + width: 50vw; } .media-modal { @@ -282,6 +285,7 @@ } a { + pointer-events: auto; text-decoration: none; font-weight: 500; color: $ui-secondary-color; -- cgit