From 85d5249479e8d30061082b4f2a805446fe472e88 Mon Sep 17 00:00:00 2001 From: Surinna Curtis Date: Thu, 29 Jun 2017 23:24:34 -0500 Subject: [PATCH] The beginnings of an advanced options dropdown --- .../components/advanced_options_dropdown.js | 50 +++++++++++++ .../compose/components/compose_form.js | 2 + .../containers/advanced_options_container.js | 3 + app/javascript/styles/components.scss | 73 +++++++++++++++++++ 4 files changed, 128 insertions(+) create mode 100644 app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js create mode 100644 app/javascript/mastodon/features/compose/containers/advanced_options_container.js 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 0000000000..0039ba52fe --- /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 =
+
test
+
; + return
+
+ +
+
+ {open && dropdownItems} +
+
; + } +} \ 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 f7eeedc69f..88ba0347a1 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 {
+
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 0000000000..921436f665 --- /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 ac72f37c5a..4a1969afdb 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;