diff options
Diffstat (limited to 'app/javascript/flavours')
7 files changed, 43 insertions, 63 deletions
diff --git a/app/javascript/flavours/glitch/components/admin/Counter.js b/app/javascript/flavours/glitch/components/admin/Counter.js index ecb242950..a4d6cef41 100644 --- a/app/javascript/flavours/glitch/components/admin/Counter.js +++ b/app/javascript/flavours/glitch/components/admin/Counter.js @@ -33,6 +33,7 @@ export default class Counter extends React.PureComponent { label: PropTypes.string.isRequired, href: PropTypes.string, params: PropTypes.object, + target: PropTypes.string, }; state = { @@ -54,7 +55,7 @@ export default class Counter extends React.PureComponent { } render () { - const { label, href } = this.props; + const { label, href, target } = this.props; const { loading, data } = this.state; let content; @@ -100,7 +101,7 @@ export default class Counter extends React.PureComponent { if (href) { return ( - <a href={href} className='sparkline'> + <a href={href} className='sparkline' target={target}> {inner} </a> ); diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.js b/app/javascript/flavours/glitch/features/compose/components/upload.js index 338bfca37..963b95c87 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload.js @@ -5,7 +5,6 @@ import Motion from 'flavours/glitch/util/optional_motion'; import spring from 'react-motion/lib/spring'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage } from 'react-intl'; -import classNames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; import { isUserTouching } from 'flavours/glitch/util/is_mobile'; @@ -44,10 +43,16 @@ export default class Upload extends ImmutablePureComponent { <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12, }) }}> {({ scale }) => ( <div style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> - <div className={classNames('composer--upload_form--actions', { active: true })}> + <div className='composer--upload_form--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>)} </div> + + {(media.get('description') || '').length === 0 && ( + <div className='composer--upload_form--item__warning'> + <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button> + </div> + )} </div> )} </Motion> diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 40cd899b3..27be22f1b 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -1322,7 +1322,7 @@ a.sparkline { width: 50px; height: 21px; position: absolute; - bottom: 8px; + bottom: 0; right: 15px; background: linear-gradient(to left, $ui-base-color, transparent); pointer-events: none; diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 937751d00..96ea096e1 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -425,54 +425,12 @@ background-repeat: no-repeat; overflow: hidden; - textarea { - display: block; - position: absolute; - box-sizing: border-box; - bottom: 0; - left: 0; - margin: 0; - border: 0; - padding: 10px; - width: 100%; - color: $secondary-text-color; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); - font-size: 14px; - font-family: inherit; - font-weight: 500; - opacity: 0; - z-index: 2; - transition: opacity .1s ease; - - &:focus { color: $white } - - &::placeholder { - opacity: 0.54; - color: $secondary-text-color; - } - } - & > .close { mix-blend-mode: difference } } - &.active { - & > div { - textarea { opacity: 1 } - } - } -} - -.composer--upload_form--actions { - background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); - display: flex; - align-items: flex-start; - justify-content: space-between; - opacity: 0; - transition: opacity .1s ease; - .icon-button { flex: 0 1 auto; - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 14px; font-weight: 500; padding: 10px; @@ -481,15 +439,28 @@ &:hover, &:focus, &:active { - color: lighten($ui-secondary-color, 4%); + color: lighten($secondary-text-color, 7%); } } - &.active { - opacity: 1; + &__warning { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); } } +.composer--upload_form--actions { + background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + display: flex; + align-items: flex-start; + justify-content: space-between; +} + .composer--upload_form--progress { display: flex; padding: 10px; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 7e6918356..61c292b19 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -609,6 +609,15 @@ color: $inverted-text-color; } + .status__content__spoiler-link { + color: $primary-text-color; + background: $ui-primary-color; + + &:hover { + background: lighten($ui-primary-color, 8%); + } + } + .dialog-option .poll__input { border-color: $inverted-text-color; color: $ui-secondary-color; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index b9dd3107b..d39069410 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -198,7 +198,8 @@ .status__content__spoiler-link { background: lighten($ui-base-color, 30%); - &:hover { + &:hover, + &:focus { background: lighten($ui-base-color, 33%); text-decoration: none; } @@ -222,13 +223,13 @@ background: lighten($ui-base-color, 30%); border: 0; color: $inverted-text-color; - font-weight: 500; + font-weight: 700; font-size: 11px; padding: 0 5px; text-transform: uppercase; line-height: inherit; cursor: pointer; - vertical-align: bottom; + vertical-align: top; &:hover { background: lighten($ui-base-color, 33%); @@ -768,7 +769,8 @@ a.status__display-name, background: $ui-base-lighter-color; color: $inverted-text-color; - &:hover { + &:hover, + &:focus { background: lighten($ui-base-color, 29%); text-decoration: none; } diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 020d39aff..bb91abdac 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -165,14 +165,6 @@ } } -.composer--upload_form--item > div input { - color: lighten($white, 7%); - - &::placeholder { - color: lighten($white, 10%); - } -} - .dropdown-menu__separator, .dropdown-menu__item.edited-timestamp__history__item, .dropdown-menu__container__header, |