diff options
| -rw-r--r-- | app/javascript/mastodon/features/compose/components/compose_form.js | 8 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/components.scss | 491 |
2 files changed, 236 insertions, 263 deletions
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 7890755f3..9471e5275 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -199,11 +199,11 @@ export default class ComposeForm extends ImmutablePureComponent { <SensitiveButtonContainer /> <SpoilerButtonContainer /> </div> + <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div> + </div> - <div className='compose-form__publish'> - <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div> - <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0)} block /></div> - </div> + <div className='compose-form__publish'> + <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0)} block /></div> </div> </div> ); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index def149e24..73aff3ad7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -265,198 +265,286 @@ .compose-form { padding: 10px; -} - -.compose-form__warning { - color: darken($ui-secondary-color, 65%); - margin-bottom: 15px; - background: $ui-primary-color; - box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); - padding: 8px 10px; - border-radius: 4px; - font-size: 13px; - font-weight: 400; - strong { + .compose-form__warning { color: darken($ui-secondary-color, 65%); - font-weight: 500; + margin-bottom: 15px; + background: $ui-primary-color; + box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); + padding: 8px 10px; + border-radius: 4px; + font-size: 13px; + font-weight: 400; - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; + strong { + color: darken($ui-secondary-color, 65%); + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + a { + color: darken($ui-primary-color, 33%); + font-weight: 500; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; } } } - a { - color: darken($ui-primary-color, 33%); - font-weight: 500; - text-decoration: underline; + .compose-form__autosuggest-wrapper { + position: relative; + + .emoji-picker-dropdown { + position: absolute; + right: 5px; + top: 5px; + } + } + + .autosuggest-textarea, + .spoiler-input { + position: relative; + } + + .autosuggest-textarea__textarea, + .spoiler-input__input { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; + color: $ui-base-color; + background: $simple-background-color; + padding: 10px; + font-family: inherit; + font-size: 14px; + resize: vertical; + border: 0; + outline: 0; - &:hover, - &:active, &:focus { - text-decoration: none; + outline: 0; + } + + @media screen and (max-width: 600px) { + font-size: 16px; } } -} -.compose-form__modifiers { - color: $ui-base-color; - font-family: inherit; - font-size: 14px; - background: $simple-background-color; - border-radius: 0 0 4px; -} + .spoiler-input__input { + border-radius: 4px; + } -.compose-form__buttons-wrapper { - display: flex; - justify-content: space-between; -} + .autosuggest-textarea__textarea { + min-height: 100px; + border-radius: 4px 4px 0 0; + padding-bottom: 0; + padding-right: 10px + 22px; + resize: none; -.compose-form__buttons { - padding: 10px; - background: darken($simple-background-color, 8%); - box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); - border-radius: 0 0 4px 4px; - display: flex; + @media screen and (max-width: 600px) { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } + } - .icon-button { - box-sizing: content-box; - padding: 0 3px; + .autosuggest-textarea__suggestions { + box-sizing: border-box; + display: none; + position: absolute; + top: 100%; + width: 100%; + z-index: 99; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + background: $ui-secondary-color; + border-radius: 0 0 4px 4px; + color: $ui-base-color; + font-size: 14px; + padding: 6px; + + &.autosuggest-textarea__suggestions--visible { + display: block; + } } -} -.compose-form__upload-button-icon { - line-height: 27px; -} + .autosuggest-textarea__suggestions__item { + padding: 10px; + cursor: pointer; + border-radius: 4px; -.compose-form__sensitive-button { - display: none; + &:hover, + &:focus, + &:active, + &.selected { + background: darken($ui-secondary-color, 10%); + } + } + + .autosuggest-account, + .autosuggest-emoji { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + line-height: 18px; + font-size: 14px; + } - &.compose-form__sensitive-button--visible { + .autosuggest-account-icon, + .autosuggest-emoji img { display: block; + margin-right: 8px; + width: 16px; + height: 16px; } - .compose-form__sensitive-button__icon { - line-height: 27px; + .autosuggest-account .display-name__account { + color: lighten($ui-base-color, 36%); } -} -.compose-form__upload-wrapper { - overflow: hidden; -} + .compose-form__modifiers { + color: $ui-base-color; + font-family: inherit; + font-size: 14px; + background: $simple-background-color; -.compose-form__uploads-wrapper { - display: flex; - flex-direction: row; - padding: 5px; - flex-wrap: wrap; -} + .compose-form__upload-wrapper { + overflow: hidden; + } -.compose-form__upload { - flex: 1 1 0; - min-width: 40%; - margin: 5px; + .compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + padding: 5px; + flex-wrap: wrap; + } - &-description { - 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); - padding: 10px; - opacity: 0; - transition: opacity .1s ease; + .compose-form__upload { + flex: 1 1 0; + min-width: 40%; + margin: 5px; - input { - background: transparent; - color: $ui-secondary-color; - border: 0; - padding: 0; - margin: 0; - width: 100%; - font-family: inherit; - font-size: 14px; - font-weight: 500; + &-description { + 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); + padding: 10px; + opacity: 0; + transition: opacity .1s ease; + + input { + background: transparent; + color: $ui-secondary-color; + border: 0; + padding: 0; + margin: 0; + width: 100%; + font-family: inherit; + font-size: 14px; + font-weight: 500; + + &:focus { + color: $white; + } - &:focus { - color: $white; + &::placeholder { + opacity: 0.54; + color: $ui-secondary-color; + } + } + + &.active { + opacity: 1; + } } - &::placeholder { - opacity: 0.54; - color: $ui-secondary-color; + .icon-button { + mix-blend-mode: difference; } } - &.active { - opacity: 1; + .compose-form__upload-thumbnail { + border-radius: 4px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 100px; + width: 100%; } } - .icon-button { - mix-blend-mode: difference; - } -} + .compose-form__buttons-wrapper { + padding: 10px; + background: darken($simple-background-color, 8%); + border-radius: 0 0 4px 4px; + display: flex; + justify-content: space-between; -.compose-form__upload-thumbnail { - border-radius: 4px; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - height: 100px; - width: 100%; -} + .compose-form__buttons { + display: flex; -.compose-form__label { - display: block; - line-height: 24px; - vertical-align: middle; + .compose-form__upload-button-icon { + line-height: 27px; + } - &.with-border { - border-top: 1px solid $ui-base-color; - padding-top: 10px; - } + .compose-form__sensitive-button { + display: none; - .compose-form__label__text { - display: inline-block; - vertical-align: middle; - margin-bottom: 14px; - margin-left: 8px; - color: $ui-primary-color; - } -} + &.compose-form__sensitive-button--visible { + display: block; + } -.compose-form__textarea, -.follow-form__input { - background: $simple-background-color; + .compose-form__sensitive-button__icon { + line-height: 27px; + } + } + } - &:disabled { - background: $ui-secondary-color; - } -} + .icon-button { + box-sizing: content-box; + padding: 0 3px; + } -.compose-form__autosuggest-wrapper { - position: relative; + .character-counter__wrapper { + align-self: center; + margin-right: 4px; - .emoji-picker-dropdown { - position: absolute; - right: 5px; - top: 5px; + .character-counter { + cursor: default; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 14px; + font-weight: 600; + color: lighten($ui-base-color, 12%); + + &.character-counter--over { + color: $warning-red; + } + } + } } -} -.compose-form__publish { - display: flex; - min-width: 0; -} + .compose-form__publish { + display: flex; + justify-content: flex-end; + min-width: 0; -.compose-form__publish-button-wrapper { - overflow: hidden; - padding-top: 10px; + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; + } + } } .emojione { @@ -1973,121 +2061,6 @@ cursor: default; } -.autosuggest-textarea, -.spoiler-input { - position: relative; -} - -.autosuggest-textarea__textarea, -.spoiler-input__input { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: $ui-base-color; - background: $simple-background-color; - padding: 10px; - font-family: inherit; - font-size: 14px; - resize: vertical; - border: 0; - outline: 0; - - &:focus { - outline: 0; - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } -} - -.spoiler-input__input { - border-radius: 4px; -} - -.autosuggest-textarea__textarea { - min-height: 100px; - border-radius: 4px 4px 0 0; - padding-bottom: 0; - padding-right: 10px + 22px; - resize: none; - - @media screen and (max-width: 600px) { - height: 100px !important; // prevent auto-resize textarea - resize: vertical; - } -} - -.autosuggest-textarea__suggestions { - box-sizing: border-box; - display: none; - position: absolute; - top: 100%; - width: 100%; - z-index: 99; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - background: $ui-secondary-color; - border-radius: 0 0 4px 4px; - color: $ui-base-color; - font-size: 14px; - padding: 6px; - - &.autosuggest-textarea__suggestions--visible { - display: block; - } -} - -.autosuggest-textarea__suggestions__item { - padding: 10px; - cursor: pointer; - border-radius: 4px; - - &:hover, - &:focus, - &:active, - &.selected { - background: darken($ui-secondary-color, 10%); - } -} - -.autosuggest-account, -.autosuggest-emoji { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - line-height: 18px; - font-size: 14px; -} - -.autosuggest-account-icon, -.autosuggest-emoji img { - display: block; - margin-right: 8px; - width: 16px; - height: 16px; -} - -.autosuggest-account .display-name__account { - color: lighten($ui-base-color, 36%); -} - -.character-counter__wrapper { - line-height: 36px; - margin: 0 16px 0 8px; - padding-top: 10px; -} - -.character-counter { - cursor: default; - font-size: 16px; -} - -.character-counter--over { - color: $warning-red; -} - .getting-started__wrapper { position: relative; overflow-y: auto; |