diff options
4 files changed, 128 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js b/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js new file mode 100644 index 000000000..0039ba52f --- /dev/null +++ b/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js @@ -0,0 +1,50 @@ +import React from 'react'; +import IconButton from '../../../components/icon_button'; + +export default class AdvancedOptionsDropdown extends React.PureComponent { + onToggleDropdown = () => { + this.setState({ open: !this.state.open }); + }; + + onGlobalClick = (e) => { + if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) { + this.setState({ open: false }); + } + } + + componentDidMount () { + window.addEventListener('click', this.onGlobalClick); + window.addEventListener('touchstart', this.onGlobalClick); + } + + componentWillUnmount () { + window.removeEventListener('click', this.onGlobalClick); + window.removeEventListener('touchstart', this.onGlobalClick); + } + + state = { + open: false, + }; + + setRef = (c) => { + this.node = c; + } + + render () { + const { open } = this.state; + const dropdownItems = <div role='button' className='advanced-options-dropdown__option'> + <div className='advanced-options-dropdown__option__content'>test</div> + </div>; + return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}> + <div className='advanced-options-dropdown__value'> + <IconButton className='advanced-options-dropdown__value' + icon='ellipsis-h' active={open} + size={18} inverted + onClick={this.onToggleDropdown} /> + </div> + <div className='advanced-options-dropdown__dropdown'> + {open && dropdownItems} + </div> + </div>; + } +} \ No newline at end of file diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index f7eeedc69..88ba0347a 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -11,6 +11,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import Collapsable from '../../../components/collapsable'; import SpoilerButtonContainer from '../containers/spoiler_button_container'; import PrivacyDropdownContainer from '../containers/privacy_dropdown_container'; +import AdvancedOptionsContainer from '../containers/advanced_options_container'; import SensitiveButtonContainer from '../containers/sensitive_button_container'; import EmojiPickerDropdown from './emoji_picker_dropdown'; import UploadFormContainer from '../containers/upload_form_container'; @@ -192,6 +193,7 @@ export default class ComposeForm extends ImmutablePureComponent { <div className='compose-form__buttons'> <UploadButtonContainer /> <PrivacyDropdownContainer /> + <AdvancedOptionsContainer /> <SensitiveButtonContainer /> <SpoilerButtonContainer /> </div> diff --git a/app/javascript/mastodon/features/compose/containers/advanced_options_container.js b/app/javascript/mastodon/features/compose/containers/advanced_options_container.js new file mode 100644 index 000000000..921436f66 --- /dev/null +++ b/app/javascript/mastodon/features/compose/containers/advanced_options_container.js @@ -0,0 +1,3 @@ +import AdvancedOptionsDropdown from '../components/advanced_options_dropdown'; + +export default AdvancedOptionsDropdown; \ No newline at end of file diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index ac72f37c5..4a1969afd 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -2876,6 +2876,79 @@ button.icon-button.active i.fa-retweet { } } +.advanced-options-dropdown { + position: relative; +} + +.advanced-options-dropdown__dropdown { + display: none; + position: absolute; + left: 0; + top: 27px; + width: 230px; + background: $simple-background-color; + border-radius: 0 4px 4px; + z-index: 2; + overflow: hidden; +} + +.advanced-options-dropdown__option { + color: $ui-base-color; + padding: 10px; + cursor: pointer; + display: flex; + + &:hover, + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + + .advanced-options-dropdown__option__content { + color: $primary-text-color; + + strong { + color: $primary-text-color; + } + } + } + + &.active:hover { + background: lighten($ui-highlight-color, 4%); + } +} + +.advanced-options-dropdown__option__icon { + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; +} + +.advanced-options-dropdown__option__content { + flex: 1 1 auto; + color: darken($ui-primary-color, 24%); + + strong { + font-weight: 500; + display: block; + color: $ui-base-color; + } +} + +.advanced-options-dropdown.active { + .advanced-options-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + } + + .advanced-options-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } +} + + .search { position: relative; margin-bottom: 10px; |