diff options
author | Claire <claire.github-309c@sitedethib.com> | 2022-11-06 13:30:37 +0100 |
---|---|---|
committer | Claire <claire.github-309c@sitedethib.com> | 2022-11-06 17:29:04 +0100 |
commit | 0be6da42d34f2a87864e0acab8836d3ac6463229 (patch) | |
tree | f4ad7926eea290f59657f219d7ef9cdb9630be56 | |
parent | c199387558e0e0ec824b5e66c4a1e22e8b2e135b (diff) |
Change glitch-soc composer classes to match upstream
18 files changed, 258 insertions, 260 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index 0be14e495..516648f4b 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -305,12 +305,12 @@ class ComposeForm extends ImmutablePureComponent { const countText = this.getFulltextForCharacterCounting(); return ( - <div className='composer'> + <div className='compose-form'> <WarningContainer /> <ReplyIndicatorContainer /> - <div className={`composer--spoiler ${spoiler ? 'composer--spoiler--visible' : ''}`} ref={this.setRef}> + <div className={`spoiler-input ${spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef}> <AutosuggestInput placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={spoilerText} @@ -352,7 +352,7 @@ class ComposeForm extends ImmutablePureComponent { </div> </AutosuggestTextarea> - <div className='composer--options-wrapper'> + <div className='compose-form__buttons-wrapper'> <OptionsContainer advancedOptions={advancedOptions} disabled={isSubmitting} @@ -364,7 +364,7 @@ class ComposeForm extends ImmutablePureComponent { sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)} spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler} /> - <div className='compose--counter-wrapper'> + <div className='character-counter__wrapper'> <CharacterCounter text={countText} max={maxChars} /> </div> </div> diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.js b/app/javascript/flavours/glitch/features/compose/components/dropdown.js index 829f6d00f..6b6d3de94 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.js @@ -16,7 +16,6 @@ import { assignHandlers } from 'flavours/glitch/utils/react_helpers'; export default class ComposerOptionsDropdown extends React.PureComponent { static propTypes = { - active: PropTypes.bool, disabled: PropTypes.bool, icon: PropTypes.string, items: PropTypes.arrayOf(PropTypes.shape({ @@ -162,7 +161,6 @@ export default class ComposerOptionsDropdown extends React.PureComponent { // Rendering. render () { const { - active, disabled, title, icon, @@ -174,35 +172,34 @@ export default class ComposerOptionsDropdown extends React.PureComponent { closeOnChange, } = this.props; const { open, placement } = this.state; - const computedClass = classNames('composer--options--dropdown', { - active, - open, - top: placement === 'top', - }); - // The result. + const active = value && items.findIndex(({ name }) => name === value) === (placement === 'bottom' ? 0 : (items.length - 1)); + return ( <div - className={computedClass} + className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown} > - <IconButton - active={open || active} - className='value' - disabled={disabled} - icon={icon} - inverted - onClick={this.handleToggle} - onMouseDown={this.handleMouseDown} - onKeyDown={this.handleButtonKeyDown} - onKeyPress={this.handleKeyPress} - size={18} - style={{ - height: null, - lineHeight: '27px', - }} - title={title} - /> + <div className={classNames('privacy-dropdown__value', { active })}> + <IconButton + active={open} + className='privacy-dropdown__value-icon' + disabled={disabled} + icon={icon} + inverted + onClick={this.handleToggle} + onMouseDown={this.handleMouseDown} + onKeyDown={this.handleButtonKeyDown} + onKeyPress={this.handleKeyPress} + size={18} + style={{ + height: null, + lineHeight: '27px', + }} + title={title} + /> + </div> + <Overlay containerPadding={20} placement={placement} diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js index 21835e628..09e8fc35a 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js @@ -156,7 +156,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent const active = (name === (this.props.value || this.state.value)); - const computedClass = classNames('composer--options--dropdown--content--item', { active }); + const computedClass = classNames('privacy-dropdown__option', { active }); let contents = this.props.renderItemContents && this.props.renderItemContents(item, i); @@ -165,7 +165,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent <React.Fragment> {icon && <Icon className='icon' fixedWidth id={icon} />} - <div className='content'> + <div className='privacy-dropdown__option__content'> <strong>{text}</strong> {meta} </div> @@ -218,7 +218,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent // size will be used to determine the coordinate of the menu by // react-overlays <div - className='composer--options--dropdown--content' + className='privacy-dropdown__dropdown' ref={this.handleRef} role='listbox' style={{ diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js index 32a464011..47bd9b056 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.js +++ b/app/javascript/flavours/glitch/features/compose/components/options.js @@ -228,7 +228,7 @@ class ComposerOptions extends ImmutablePureComponent { // The result. return ( - <div className='composer--options'> + <div className='compose-form__buttons'> <input accept={acceptContentTypes} disabled={disabled || !allowMedia} @@ -309,7 +309,6 @@ class ComposerOptions extends ImmutablePureComponent { )} <LanguageDropdown /> <Dropdown - active={advancedOptions && advancedOptions.some(value => !!value)} disabled={disabled || isEditing} icon='ellipsis-h' items={advancedOptions ? [ diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js index 50baad065..9d53b7ee3 100644 --- a/app/javascript/flavours/glitch/features/compose/components/publisher.js +++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js @@ -48,7 +48,7 @@ class Publisher extends ImmutablePureComponent { const { countText, disabled, intl, onSecondarySubmit, privacy, sideArm, isEditing } = this.props; const diff = maxChars - length(countText || ''); - const computedClass = classNames('composer--publisher', { + const computedClass = classNames('compose-form__publish', { disabled: disabled, over: diff < 0, }); @@ -72,22 +72,26 @@ class Publisher extends ImmutablePureComponent { return ( <div className={computedClass}> {sideArm && !isEditing && sideArm !== 'none' ? ( + <div className='compose-form__publish-button-wrapper'> + <Button + className='side_arm' + disabled={disabled} + onClick={onSecondarySubmit} + style={{ padding: null }} + text={<Icon id={privacyIcons[sideArm]} />} + title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`} + /> + </div> + ) : null} + <div className='compose-form__publish-button-wrapper'> <Button - className='side_arm' + className='primary' + text={publishText} + title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`} + onClick={this.handleSubmit} disabled={disabled} - onClick={onSecondarySubmit} - style={{ padding: null }} - text={<Icon id={privacyIcons[sideArm]} />} - title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`} /> - ) : null} - <Button - className='primary' - text={publishText} - title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`} - onClick={this.handleSubmit} - disabled={disabled} - /> + </div> </div> ); }; diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js index 37ae9cab9..7ad9e2b64 100644 --- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js +++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js @@ -49,10 +49,10 @@ class ReplyIndicator extends ImmutablePureComponent { // The result. return ( - <article className='composer--reply'> - <header> + <article className='reply-indicator'> + <header className='reply-indicator__header'> <IconButton - className='cancel' + className='reply-indicator__cancel' icon='times' onClick={this.handleClick} title={intl.formatMessage(messages.cancel)} @@ -66,7 +66,7 @@ class ReplyIndicator extends ImmutablePureComponent { )} </header> <div - className='content translate' + className='reply-indicator__content translate' dangerouslySetInnerHTML={{ __html: content || '' }} /> {attachments.size > 0 && ( diff --git a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js index b875fb15e..25c2443b1 100644 --- a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js +++ b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js @@ -38,7 +38,7 @@ class TextareaIcons extends ImmutablePureComponent { render () { const { advancedOptions, intl } = this.props; return ( - <div className='composer--textarea--icons'> + <div className='compose-form__textarea-icons'> {advancedOptions ? iconMap.map( ([key, icon, message]) => advancedOptions.get(key) ? ( <span diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.js b/app/javascript/flavours/glitch/features/compose/components/upload.js index 32638342c..94ac6c499 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload.js @@ -39,17 +39,17 @@ export default class Upload extends ImmutablePureComponent { const y = ((focusY / -2) + .5) * 100; return ( - <div className='composer--upload_form--item' tabIndex='0' role='button'> + <div className='compose-form__upload' tabIndex='0' role='button'> <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='composer--upload_form--actions'> + <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>)} </div> {(media.get('description') || '').length === 0 && ( - <div className='composer--upload_form--item__warning'> + <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/components/upload_form.js b/app/javascript/flavours/glitch/features/compose/components/upload_form.js index 35880ddcc..7ebbac963 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload_form.js @@ -14,11 +14,11 @@ export default class UploadForm extends ImmutablePureComponent { const { mediaIds } = this.props; return ( - <div className='composer--upload_form'> + <div className='compose-form__upload-wrapper'> <UploadProgressContainer /> {mediaIds.size > 0 && ( - <div className='content'> + <div className='compose-form__uploads-wrapper'> {mediaIds.map(id => ( <UploadContainer id={id} key={id} /> ))} diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js index c7c33c418..39ac31053 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js @@ -29,17 +29,18 @@ export default class UploadProgress extends React.PureComponent { } return ( - <div className='composer--upload_form--progress'> - <Icon id='upload' /> + <div className='upload-progress'> + <div className='upload-progress__icon'> + <Icon id='upload' /> + </div> - <div className='message'> + <div className='upload-progress__message'> {message} - <div className='backdrop'> + <div className='upload-progress__backdrop'> <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}> {({ width }) => - (<div className='tracker' style={{ width: `${width}%` }} - />) + <div className='upload-progress__tracker' style={{ width: `${width}%` }} /> } </Motion> </div> diff --git a/app/javascript/flavours/glitch/features/compose/components/warning.js b/app/javascript/flavours/glitch/features/compose/components/warning.js index 4009be8c6..803b7f86a 100644 --- a/app/javascript/flavours/glitch/features/compose/components/warning.js +++ b/app/javascript/flavours/glitch/features/compose/components/warning.js @@ -15,7 +15,7 @@ export default class Warning extends React.PureComponent { return ( <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}> {({ opacity, scaleX, scaleY }) => ( - <div className='composer--warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}> + <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}> {message} </div> )} diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index 9b36bfd8d..7bffb2e26 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -29,22 +29,22 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' .hicolor-privacy-icons { .status__visibility-icon.fa-globe, - .composer--options--dropdown--content--item .fa-globe { + .privacy-dropdown__option .fa-globe { color: #1976d2; } .status__visibility-icon.fa-unlock, - .composer--options--dropdown--content--item .fa-unlock { + .privacy-dropdown__option .fa-unlock { color: #388e3c; } .status__visibility-icon.fa-lock, - .composer--options--dropdown--content--item .fa-lock { + .privacy-dropdown__option .fa-lock { color: #ffa000; } .status__visibility-icon.fa-envelope, - .composer--options--dropdown--content--item .fa-envelope { + .privacy-dropdown__option .fa-envelope { color: #d32f2f; } } diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index da086833c..72d3aad1d 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -1,4 +1,4 @@ -.composer { +.compose-form { padding: 10px; .emoji-picker-dropdown { @@ -25,16 +25,16 @@ } } -.no-reduce-motion .composer--spoiler { +.no-reduce-motion .spoiler-input { transition: height 0.4s ease, opacity 0.4s ease; } -.composer--spoiler { +.spoiler-input { height: 0; transform-origin: bottom; opacity: 0.0; - &.composer--spoiler--visible { + &.spoiler-input--visible { height: 36px; margin-bottom: 11px; opacity: 1.0; @@ -64,7 +64,7 @@ } } -.composer--warning { +.compose-form__warning { color: $inverted-text-color; margin-bottom: 15px; background: $ui-primary-color; @@ -123,7 +123,7 @@ } } -.composer--reply { +.reply-indicator { margin: 0 0 10px; border-radius: 4px; padding: 10px; @@ -131,117 +131,117 @@ min-height: 23px; overflow-y: auto; flex: 0 2 auto; +} - & > header { - margin-bottom: 5px; - overflow: hidden; +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; - & > .account.small { color: $inverted-text-color; } + & > .account.small { color: $inverted-text-color; } +} - & > .cancel { - float: right; - line-height: 24px; - } - } +.reply-indicator__cancel { + float: right; + line-height: 24px; +} - & > .content { - position: relative; - margin: 10px 0; - padding: 0 12px; - font-size: 14px; - line-height: 20px; - color: $inverted-text-color; - word-wrap: break-word; - font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; - overflow: hidden; +.reply-indicator__content { + position: relative; + margin: 10px 0; + padding: 0 12px; + font-size: 14px; + line-height: 20px; + color: $inverted-text-color; + word-wrap: break-word; + font-weight: 400; + overflow: visible; + white-space: pre-wrap; + padding-top: 5px; + overflow: hidden; - p, pre, blockquote { - margin-bottom: 20px; - white-space: pre-wrap; + p, pre, blockquote { + margin-bottom: 20px; + white-space: pre-wrap; - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; } + } - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } + h1, h2, h3, h4, h5 { + margin-top: 20px; + margin-bottom: 20px; + } - h1, h2 { - font-weight: 700; - font-size: 18px; - } + h1, h2 { + font-weight: 700; + font-size: 18px; + } - h2 { - font-size: 16px; - } + h2 { + font-size: 16px; + } - h3, h4, h5 { - font-weight: 500; - } + h3, h4, h5 { + font-weight: 500; + } - blockquote { - padding-left: 10px; - border-left: 3px solid $inverted-text-color; - color: $inverted-text-color; - white-space: normal; + blockquote { + padding-left: 10px; + border-left: 3px solid $inverted-text-color; + color: $inverted-text-color; + white-space: normal; - p:last-child { - margin-bottom: 0; - } + p:last-child { + margin-bottom: 0; } + } - b, strong { - font-weight: 700; - } + b, strong { + font-weight: 700; + } - em, i { - font-style: italic; - } + em, i { + font-style: italic; + } - sub { - font-size: smaller; - vertical-align: sub; - } + sub { + font-size: smaller; + vertical-align: sub; + } - sup { - font-size: smaller; - vertical-align: super; - } + sup { + font-size: smaller; + vertical-align: super; + } - ul, ol { - margin-left: 1em; + ul, ol { + margin-left: 1em; - p { - margin: 0; - } + p { + margin: 0; } + } - ul { - list-style-type: disc; - } + ul { + list-style-type: disc; + } - ol { - list-style-type: decimal; - } + ol { + list-style-type: decimal; + } - a { - color: $lighter-text-color; - text-decoration: none; + a { + color: $lighter-text-color; + text-decoration: none; - &:hover { text-decoration: underline } + &:hover { text-decoration: underline } - &.mention { - &:hover { - text-decoration: none; + &.mention { + &:hover { + text-decoration: none; - span { text-decoration: underline } - } + span { text-decoration: underline } } } } @@ -253,8 +253,12 @@ } } -.compose-form__autosuggest-wrapper, -.autosuggest-input { +.compose-form .compose-form__autosuggest-wrapper { + position: relative; +} + +.compose-form .autosuggest-textarea, +.compose-form .autosuggest-input { position: relative; width: 100%; @@ -284,10 +288,6 @@ all: unset; } - &:disabled { - background: $ui-secondary-color; - } - &:focus { outline: 0; } @@ -304,7 +304,7 @@ } } -.composer--textarea--icons { +.compose-form__textarea-icons { display: block; position: absolute; top: 29px; @@ -401,25 +401,25 @@ } } -.composer--upload_form { +.compose-form__upload-wrapper { overflow: hidden; +} - & > .content { - display: flex; - flex-direction: row; - flex-wrap: wrap; - font-family: inherit; - padding: 5px; - overflow: hidden; - } +.compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-family: inherit; + padding: 5px; + overflow: hidden; } -.composer--upload_form--item { +.compose-form__upload { flex: 1 1 0; margin: 5px; min-width: 40%; - & > div { + .compose-form__upload-thumbnail { position: relative; border-radius: 4px; height: 140px; @@ -459,52 +459,52 @@ } } -.composer--upload_form--actions { +.compose-form__upload__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 { +.upload-progress { display: flex; padding: 10px; color: $darker-text-color; overflow: hidden; - & > .fa { + .fa { font-size: 34px; margin-right: 10px; } - & > .message { - flex: 1 1 auto; + span { + display: block; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + } +} - & > span { - display: block; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - } +.upload-progress__message { + flex: 1 1 auto; +} - & > .backdrop { - position: relative; - margin-top: 5px; - border-radius: 6px; - width: 100%; - height: 6px; - background: $ui-base-lighter-color; - - & > .tracker { - position: absolute; - top: 0; - left: 0; - height: 6px; - border-radius: 6px; - background: $ui-highlight-color; - } - } - } +.upload-progress__backdrop { + position: relative; + margin-top: 5px; + border-radius: 6px; + width: 100%; + height: 6px; + background: $ui-base-lighter-color; +} + +.upload-progress__tracker { + position: absolute; + top: 0; + left: 0; + height: 6px; + border-radius: 6px; + background: $ui-highlight-color; } .compose-form__modifiers { @@ -514,7 +514,7 @@ background: $simple-background-color; } -.composer--options-wrapper { +.compose-form__buttons-wrapper { padding: 10px; background: darken($simple-background-color, 8%); border-radius: 0 0 4px 4px; @@ -524,7 +524,7 @@ flex: 0 0 auto; } -.composer--options { +.compose-form__buttons { display: flex; flex: 0 0 auto; @@ -551,30 +551,41 @@ } } -.compose--counter-wrapper { +.character-counter__wrapper { align-self: center; margin-right: 4px; } -.composer--options--dropdown { - &.open { - & > .value { - border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); - color: $primary-text-color; - background: $ui-highlight-color; +.privacy-dropdown.active { + .privacy-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { transition: none; } - &.top { - & > .value { - border-radius: 0 0 4px 4px; - box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1); + + &.active { + background: $ui-highlight-color; + + .icon-button { + color: $primary-text-color; } } } + + &.top .privacy-dropdown__value { + border-radius: 0 0 4px 4px; + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } } -.composer--options--dropdown--content { +.privacy-dropdown__dropdown { position: absolute; border-radius: 4px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); @@ -583,14 +594,14 @@ transform-origin: 50% 0; } -.composer--options--dropdown--content--item { +.privacy-dropdown__option { display: flex; align-items: center; padding: 10px; color: $inverted-text-color; cursor: pointer; - & > .content { + .privacy-dropdown__option__content { flex: 1 1 auto; color: $lighter-text-color; @@ -608,7 +619,7 @@ background: $ui-highlight-color; color: $primary-text-color; - & > .content { + .privacy-dropdown__option__content { color: $primary-text-color; strong { color: $primary-text-color } @@ -618,31 +629,25 @@ &.active:hover { background: lighten($ui-highlight-color, 4%) } } -.composer--publisher { - padding-top: 10px; - text-align: right; - white-space: nowrap; - overflow: hidden; +.compose-form__publish { + display: flex; justify-content: flex-end; + min-width: 0; flex: 0 0 auto; + column-gap: 5px; - & > .primary { - display: inline-block; - margin: 0; - padding: 7px 10px; - text-align: center; - } + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; - & > .side_arm { - display: inline-block; - margin: 0 5px; - padding: 7px 0; - width: 36px; - text-align: center; - } + button { + padding: 7px 10px; + text-align: center; + } - &.over { - & > .count { color: $warning-red } + & > .side_arm { + width: 36px; + } } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index c3276b035..b00038afd 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1738,7 +1738,7 @@ noscript { @import 'domains'; @import 'status'; @import 'modal'; -@import 'composer'; +@import 'compose_form'; @import 'columns'; @import 'regeneration_indicator'; @import 'directory'; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index cd96f83d6..711d4d5b2 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -1290,11 +1290,11 @@ } } -.modal-root__container .composer--options--dropdown { +.modal-root__container .privacy-dropdown { flex-grow: 0; } -.modal-root__container .composer--options--dropdown--content { +.modal-root__container .privacy-dropdown__dropdown { pointer-events: auto; z-index: 9999; } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 1f1d7d68d..d91306151 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -41,7 +41,7 @@ flex: 0 1 48px; } - .composer { + .compose-form { flex: 1; overflow-y: hidden; display: flex; @@ -59,10 +59,6 @@ .autosuggest-textarea__textarea { overflow-y: hidden; } - - .compose-form__upload-thumbnail { - height: 80px; - } } .navigation-panel { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index 75472646e..a3aee7eef 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -37,7 +37,7 @@ } .compose-standalone { - .composer { + .compose-form { width: 400px; margin: 0 auto; padding: 20px 0; diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 31d1de376..2419691cd 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -36,15 +36,11 @@ body.rtl { margin-left: 5px; } - .composer .compose--counter-wrapper { + .compose-form .character-counter__wrapper { margin-right: 0; margin-left: 4px; } - .composer--publisher { - text-align: left; - } - .boost-modal__status-time, .favourite-modal__status-time { float: left; |