diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
13 files changed, 100 insertions, 68 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 366a98d82..800832dc8 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -687,7 +687,7 @@ class Status extends ImmutablePureComponent { if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) { background = attachments.getIn([0, 'preview_url']); } - } else if (status.get('card') && settings.get('inline_preview_cards')) { + } else if (status.get('card') && settings.get('inline_preview_cards') && !this.props.muted) { media.push( <Card onOpenMedia={this.handleOpenMedia} diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js index 4129c8236..57f295ea9 100644 --- a/app/javascript/flavours/glitch/features/about/index.js +++ b/app/javascript/flavours/glitch/features/about/index.js @@ -183,25 +183,18 @@ class About extends React.PureComponent { <> <p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p> - <table className='about__domain-blocks'> - <thead> - <tr> - <th><FormattedMessage id='about.domain_blocks.domain' defaultMessage='Domain' /></th> - <th><FormattedMessage id='about.domain_blocks.severity' defaultMessage='Severity' /></th> - <th><FormattedMessage id='about.domain_blocks.comment' defaultMessage='Reason' /></th> - </tr> - </thead> - - <tbody> - {domainBlocks.get('items').map(block => ( - <tr key={block.get('domain')}> - <td><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></td> - <td><span title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span></td> - <td>{block.get('comment')}</td> - </tr> - ))} - </tbody> - </table> + <div className='about__domain-blocks'> + {domainBlocks.get('items').map(block => ( + <div className='about__domain-blocks__domain' key={block.get('domain')}> + <div className='about__domain-blocks__domain__header'> + <h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6> + <span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span> + </div> + + <p>{(block.get('comment') || '').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p> + </div> + ))} + </div> </> ) : ( <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p> diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js index 47bd9b056..c6278f4cb 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.js +++ b/app/javascript/flavours/glitch/features/compose/components/options.js @@ -103,7 +103,7 @@ class ToggleOption extends ImmutablePureComponent { <React.Fragment> <Toggle checked={checked} onChange={this.handleChange} /> - <div className='content'> + <div className='privacy-dropdown__option__content'> <strong>{text}</strong> {meta} </div> diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.js b/app/javascript/flavours/glitch/features/compose/components/upload.js index 94ac6c499..6528bbc84 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload.js @@ -18,7 +18,6 @@ export default class Upload extends ImmutablePureComponent { media: ImmutablePropTypes.map.isRequired, onUndo: PropTypes.func.isRequired, onOpenFocalPoint: PropTypes.func.isRequired, - isEditingStatus: PropTypes.bool.isRequired, }; handleUndoClick = e => { @@ -32,7 +31,7 @@ export default class Upload extends ImmutablePureComponent { } render () { - const { intl, media, isEditingStatus } = this.props; + const { media } = this.props; const focusX = media.getIn(['meta', 'focus', 'x']); const focusY = media.getIn(['meta', 'focus', 'y']); const x = ((focusX / 2) + .5) * 100; @@ -45,10 +44,10 @@ export default class Upload extends ImmutablePureComponent { <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> <div className='compose-form__upload__actions'> <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button> - {!isEditingStatus && (<button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>)} + {!!media.get('unattached') && (<button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>)} </div> - {(media.get('description') || '').length === 0 && ( + {(media.get('description') || '').length === 0 && !!media.get('unattached') && ( <div className='compose-form__upload__warning'> <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button> </div> diff --git a/app/javascript/flavours/glitch/features/compose/containers/upload_container.js b/app/javascript/flavours/glitch/features/compose/containers/upload_container.js index d6256fe96..f3ca4ce7b 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/upload_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/upload_container.js @@ -5,7 +5,6 @@ import { submitCompose } from 'flavours/glitch/actions/compose'; const mapStateToProps = (state, { id }) => ({ media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id), - isEditingStatus: state.getIn(['compose', 'id']) !== null, }); const mapDispatchToProps = dispatch => ({ diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 3d385eee2..72e13d9d6 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -303,7 +303,7 @@ class UI extends React.Component { this.dragTargets.push(e.target); } - if (e.dataTransfer && e.dataTransfer.types.includes('Files') && this.props.canUploadMore) { + if (e.dataTransfer && e.dataTransfer.types.includes('Files') && this.props.canUploadMore && this.context.identity.signedIn) { this.setState({ draggingOver: true }); } } @@ -330,7 +330,7 @@ class UI extends React.Component { this.setState({ draggingOver: false }); this.dragTargets = []; - if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore) { + if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore && this.context.identity.signedIn) { this.props.dispatch(uploadCompose(e.dataTransfer.files)); } } diff --git a/app/javascript/flavours/glitch/main.js b/app/javascript/flavours/glitch/main.js index f1e10df34..14a6effbb 100644 --- a/app/javascript/flavours/glitch/main.js +++ b/app/javascript/flavours/glitch/main.js @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { setupBrowserNotifications } from 'flavours/glitch/actions/notifications'; import Mastodon, { store } from 'flavours/glitch/containers/mastodon'; +import { me } from 'flavours/glitch/initial_state'; import ready from 'flavours/glitch/ready'; const perf = require('flavours/glitch/performance'); @@ -19,23 +20,19 @@ function main() { ReactDOM.render(<Mastodon {...props} />, mountNode); store.dispatch(setupBrowserNotifications()); - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - const [{ Workbox }, { me }] = await Promise.all([ - import('workbox-window'), - import('flavours/glitch/initial_state'), - ]); - + if (process.env.NODE_ENV === 'production' && me && 'serviceWorker' in navigator) { + const { Workbox } = await import('workbox-window'); const wb = new Workbox('/sw.js'); + /** @type {ServiceWorkerRegistration} */ + let registration; try { - await wb.register(); + registration = await wb.register(); } catch (err) { console.error(err); - - return; } - if (me) { + if (registration) { const registerPushNotifications = await import('flavours/glitch/actions/push_notifications'); store.dispatch(registerPushNotifications.register()); diff --git a/app/javascript/flavours/glitch/names.yml b/app/javascript/flavours/glitch/names.yml index 0d56fd3cc..68db3a73e 100644 --- a/app/javascript/flavours/glitch/names.yml +++ b/app/javascript/flavours/glitch/names.yml @@ -21,3 +21,12 @@ es: skins: glitch: default: Predeterminado + +ja: + flavours: + glitch: + description: GlitchSocインスタンスのデフォルトフレーバーです。 + name: Glitch Edition + skins: + glitch: + default: デフォルト diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js index 460af3955..18e437bbc 100644 --- a/app/javascript/flavours/glitch/reducers/compose.js +++ b/app/javascript/flavours/glitch/reducers/compose.js @@ -222,7 +222,7 @@ function appendMedia(state, media, file) { if (media.get('type') === 'image') { media = media.set('file', file); } - map.update('media_attachments', list => list.push(media)); + map.update('media_attachments', list => list.push(media.set('unattached', true))); map.set('is_uploading', false); map.set('is_processing', false); map.set('resetFileKey', Math.floor((Math.random() * 0x10000))); @@ -563,7 +563,7 @@ export default function compose(state = initialState, action) { map.set('content_type', action.content_type || 'text/plain'); map.set('in_reply_to', action.status.get('in_reply_to_id')); map.set('privacy', action.status.get('visibility')); - map.set('media_attachments', action.status.get('media_attachments')); + map.set('media_attachments', action.status.get('media_attachments').map((media) => media.set('unattached', true))); map.set('focusDate', new Date()); map.set('caretPosition', null); map.set('idempotencyKey', uuid()); diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index ac1be6ad8..04a18de04 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -203,7 +203,8 @@ } } -.account-role { +.account-role, +.simple_form .glitch_only { display: inline-block; padding: 4px 6px; cursor: default; @@ -228,6 +229,18 @@ } } +.simple_form .not_recommended { + color: lighten($error-red, 12%); + background-color: rgba(lighten($error-red, 12%), 0.1); + border-color: rgba(lighten($error-red, 12%), 0.5); +} + +.simple_form .glitch_only { + color: lighten($warning-red, 12%); + background-color: rgba(lighten($warning-red, 12%), 0.1); + border-color: rgba(lighten($warning-red, 12%), 0.5); +} + .account__header__fields { max-width: 100vw; padding: 0; diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index c6cc6c615..6664a5756 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -247,28 +247,45 @@ &__domain-blocks { margin-top: 30px; - width: 100%; - border-collapse: collapse; - break-inside: auto; + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 4%); + border-radius: 4px; - th { - text-align: left; - font-weight: 500; + &__domain { + border-bottom: 1px solid lighten($ui-base-color, 4%); + padding: 10px; + font-size: 15px; color: $darker-text-color; - } - thead tr, - tbody tr { - border-bottom: 1px solid lighten($ui-base-color, 8%); - } + &:nth-child(2n) { + background: darken($ui-base-color, 2%); + } - tbody tr:last-child { - border-bottom: 0; - } + &:last-child { + border-bottom: 0; + } + + &__header { + display: flex; + gap: 10px; + justify-content: space-between; + font-weight: 500; + margin-bottom: 4px; + } - th, - td { - padding: 8px; + h6 { + color: $secondary-text-color; + font-size: inherit; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 899c59a2a..fd0ff6d93 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -102,6 +102,11 @@ code { text-decoration: none; } } + .glitch_only { + position: absolute; + margin: 0 4px; + margin-top: -2px; + } } } @@ -1052,11 +1057,18 @@ code { &:last-child { border-bottom: 0; - padding-bottom: 0; } } } +// Only remove padding when listing applications, to prevent styling issues on +// the Authorization page. +.applications-list { + .permissions-list__item:last-child { + padding-bottom: 0; + } +} + .keywords-table { thead { th { diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 22828c7d1..6489c2f80 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -203,7 +203,8 @@ html { // Change the colors used in compose-form .compose-form { .compose-form__modifiers { - .compose-form__upload__actions .icon-button { + .compose-form__upload__actions .icon-button, + .compose-form__upload__warning .icon-button { color: lighten($white, 7%); &:active, @@ -212,14 +213,6 @@ html { color: $white; } } - - .compose-form__upload-description input { - color: lighten($white, 7%); - - &::placeholder { - color: lighten($white, 7%); - } - } } .compose-form__buttons-wrapper { |