Progress

app/javascript/gabsocial/components/modal/actions_modal.js

@@ -5,7 +5,7 @@ import StatusContent from '../status_content';
 import Avatar from '../avatar';
 import RelativeTimestamp from '../relative_timestamp';
 import DisplayName from '../display_name';
-import IconButton from '../icon_button';
+import Button from '../button';
 
 export default class ActionsModal extends ImmutablePureComponent {
 
@@ -32,7 +32,7 @@ export default class ActionsModal extends ImmutablePureComponent {
           className={classNames({ active })}
           data-method={isLogout ? 'delete' : null}
         >
-          {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />}
+          {icon && <Button title={text} icon={icon} role='presentation' tabIndex='-1' inverted />}
           <div>
             <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
             <div>{meta}</div>

app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js

@@ -0,0 +1,86 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { closeModal } from '../../actions/modal'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import SettingSwitch from '../setting_switch'
+import Text from '../text'
+
+const messages = defineMessages({
+  title: { id: 'hashtag_timeline_settings', defaultMessage: 'Hashtag Timeline Settings' },
+  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
+  onlyMedia: { id: 'community.column_settings.media_only', defaultMessage: 'Media Only' },
+  showInSidebar: { id: 'show_in_sidebar', defaultMessage: 'Show in Sidebar' },
+})
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'community']),
+})
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChange(key, checked) {
+      dispatch(changeSetting(['community', ...key], checked))
+    },
+    onSave() {
+      dispatch(saveSettings())
+      dispatch(closeModal())
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class HashtagTimelineSettingsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+  }
+
+  handleSaveAndClose = () => {
+    this.props.onSave()
+  }
+
+  render() {
+    const { intl, settings, onChange } = this.props
+
+    // : todo :
+
+    return (
+      <ModalLayout
+        width='320'
+        title={intl.formatMessage(messages.title)}
+      >
+      
+        <div className={[_s.default, _s.pb10].join(' ')}>
+          <SettingSwitch
+            prefix='community_timeline'
+            settings={settings}
+            settingPath={['shows', 'inSidebar']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showInSidebar)}
+          />
+        </div>
+
+        <Button
+          centered
+          backgroundColor='brand'
+          color='white'
+          className={_s.justifyContentCenter}
+          onClick={this.handleSaveAndClose}
+        >
+          <Text color='inherit' weight='bold' align='center'>
+            {intl.formatMessage(messages.saveAndClose)}
+          </Text>
+        </Button>
+
+      </ModalLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/media_modal.js

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Video from '../../features/video';
 import ExtendedVideoPlayer from '../extended_video_player';
-import IconButton from '../icon_button';
+import Button from '../button';
 import ImageLoader from '../image_loader';
 import Icon from '../icon';
 
@@ -221,7 +221,7 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
+          <Button className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
 
           {leftNav}
           {rightNav}

app/javascript/gabsocial/components/modal/modal_root.js

@@ -23,6 +23,7 @@ import ConfirmationModal from './confirmation_modal'
 import GroupCreateModal from './group_create_modal'
 import GroupDeleteModal from './group_delete_modal'
 import GroupEditorModal from './group_editor_modal'
+import HashtagTimelineSettingsModal from './hashtag_timeline_settings_modal'
 import HomeTimelineSettingsModal from './home_timeline_settings_modal'
 import HotkeysModal from './hotkeys_modal'
 import ListCreateModal from './list_create_modal'
@@ -48,6 +49,7 @@ const MODAL_COMPONENTS = {
   GROUP_CREATE: () => Promise.resolve({ default: GroupCreateModal }),
   GROUP_DELETE: () => Promise.resolve({ default: GroupDeleteModal }),
   GROUP_EDITOR: () => Promise.resolve({ default: GroupEditorModal }),
+  HASHTAG_TIMELINE_SETTINGS: () => Promise.resolve({ default: HashtagTimelineSettingsModal }),
   HOME_TIMELINE_SETTINGS: () => Promise.resolve({ default: HomeTimelineSettingsModal }),
   HOTKEYS: () => Promise.resolve({ default: HotkeysModal }),
   LIST_CREATE: () => Promise.resolve({ default: ListCreateModal }),

app/javascript/gabsocial/components/modal/notifications_timeline_settings_modal.js

@@ -1,59 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import Button from '../button'
-import Text from '../text'
-import ModalLayout from './modal_layout'
-
-const messages = defineMessages({
-  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
-  text: { id: 'pro_upgrade_modal.text', defaultMessage: 'Gab is fully funded by people like you. Please consider supporting us on our mission to defend free expression online for all people.' },
-  benefits: { id: 'pro_upgrade_modal.benefits', defaultMessage: 'Here are just some of the benefits that thousands of GabPRO members receive:' },
-})
-
-export default
-@injectIntl
-class HomeTimelineSettingsModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-  }
-
-  render() {
-    const { intl } = this.props
-
-    return (
-      <div>
-        <Text>
-          {intl.formatMessage(messages.text)}
-        </Text>
-        <Text>
-          {intl.formatMessage(messages.benefits)}
-        </Text>
-
-        <div className={[_s.default, _s.my10].join(' ')}>
-          <Text>• Schedule Posts</Text>
-          <Text>• Get Verified</Text>
-          <Text>• Create Groups</Text>
-          <Text>• Larger Video and Image Uploads</Text>
-          <Text>• Receive the PRO Badge</Text>
-          <Text>• Remove in-feed promotions</Text>
-        </div>
-
-        <Button
-          centered
-          backgroundColor='brand'
-          color='white'
-          icon='pro'
-          href='https://pro.gab.com'
-          className={_s.justifyContentCenter}
-          iconClassName={[_s.mr5, _s.fillColorWhite].join(' ')}
-        >
-          <Text color='inherit' weight='bold' align='center'>
-            {intl.formatMessage(messages.title)}
-          </Text>
-        </Button>
-
-      </div>
-    )
-  }
-}

app/javascript/gabsocial/components/modal/status_revision_modal.js

@@ -2,7 +2,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import StatusRevisionListContainer from '../../containers/status_revision_list_container'
-import IconButton from '../icon_button'
+import Button from '../button'
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -28,7 +28,7 @@ class StatusRevisionModal extends ImmutablePureComponent {
             <h3 className='status-revisions__header__title'>
               <FormattedMessage id='status_revisions.heading' defaultMessage='Revision History' />
             </h3>
-            <IconButton className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+            <Button className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
           </div>
           <div className='status-revisions__content'>
             <StatusRevisionListContainer id={status.get('id')} />