ui 調整

app/javascript/mastodon/components/setting_select.js

@@ -20,7 +20,7 @@ class SettingSelect extends React.PureComponent {
   handleChange = (e) => {
     this.props.onChange(this.props.settingKey, e.target.value);
     if (this.props.settingKey.toString() === ['area', 'body'].toString()) {
-      this.context.router.history.push('/timelines/area');
+      this.context.router.history.push('/areas');
     }
   }
 

app/javascript/mastodon/features/area_timeline/components/column_settings.js

@@ -9,6 +9,7 @@ class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
     settings: ImmutablePropTypes.map.isRequired,
+    pinned: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
@@ -24,15 +25,23 @@ class ColumnSettings extends React.PureComponent {
   }
 
   render () {
-    const { settings, onChange } = this.props;
+    const { settings, pinned, onChange } = this.props;
     var areas = this.readAreas();
+    var settingKey = [];
+    if (pinned) {
+      // そのカラムが固定されていたら ['settings', 'columns', $UUID, 'params', 'id'] に地域名を格納
+      settingKey = ['id'];
+    } else {
+      // 固定されていなければ、 ['settings', 'area', 'area', 'body'] に地域名を格納
+      settingKey = ['area', 'body'];
+    }
 
     return (
       <div>
         <span className='column-settings__section'><FormattedMessage id='area.column_settings.basic' defaultMessage='Basic' /></span>
 
         <div className='column-settings__row'>
-          <SettingSelect settings={settings} settingKey={['area', 'body']} onChange={onChange} groups={areas} />
+          <SettingSelect settings={settings} settingKey={settingKey} onChange={onChange} groups={areas} />
         </div>
       </div>
     );

app/javascript/mastodon/features/area_timeline/containers/column_settings_container.js

@@ -10,16 +10,17 @@ const mapStateToProps = (state, { columnId }) => {
 
   return {
     settings: (uuid && index >= 0) ? columns.get(index).get('params') : state.getIn(['settings', 'area']),
+    pinned: !!columnId,
   };
 };
 
 const mapDispatchToProps = (dispatch, { columnId }) => {
   return {
-    onChange (key, checked) {
+    onChange (key, areaName) {
       if (columnId) {
-        dispatch(changeColumnParams(columnId, key, checked));
+        dispatch(changeColumnParams(columnId, key, areaName));
       } else {
-        dispatch(changeSetting(['area', ...key], checked));
+        dispatch(changeSetting(['area', ...key], areaName));
       }
     },
   };

app/javascript/mastodon/features/area_timeline/index.js

@@ -12,6 +12,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectAreaStream } from '../../actions/streaming';
 import { Helmet } from 'react-helmet';
+import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 const messages = defineMessages({
   title: { id: 'column.area', defaultMessage: 'Area timeline' },
@@ -115,6 +116,10 @@ class AreaTimeline extends React.PureComponent {
           <ColumnSettingsContainer columnId={columnId} />
         </ColumnHeader>
 
+        <DismissableBanner id='area_timeline'>
+          <FormattedMessage id='dismissable_banner.area_timeline' defaultMessage='These are the most recent public posts from people whose accounts are hosted by instances in apecified area.' />
+        </DismissableBanner>
+
         <AreaStatusListContainer
           trackScroll={!pinned}
           scrollKey={`area_timeline-${columnId}`}

app/javascript/mastodon/features/area_timeline_redirect/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Redirect } from 'react-router';
+import { Redirect } from 'react-router-dom';
 
 const mapStateToProps = state => ({
   area: state.getIn(['settings', 'area']).getIn(['area', 'body']),

app/javascript/mastodon/features/compose/index.js

@@ -25,6 +25,7 @@ const messages = defineMessages({
   notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
   public: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
   community: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
+  area: { id: 'navigation_bar.area_timeline', defaultMessage: 'Area timeline' },
   preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
@@ -105,6 +106,9 @@ class Compose extends React.PureComponent {
             {!columns.some(column => column.get('id') === 'PUBLIC') && (
               <Link to='/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><Icon id='globe' fixedWidth /></Link>
             )}
+            {!columns.some(column => column.get('id') === 'AREA') && (
+              <Link to='/areas' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><Icon id='map-marker' fixedWidth /></Link>
+            )}
             <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><Icon id='cog' fixedWidth /></a>
             <a href='/auth/sign_out' className='drawer__tab' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)} onClick={this.handleLogoutClick}><Icon id='sign-out' fixedWidth /></a>
           </nav>

app/javascript/mastodon/features/ui/components/navigation_panel.js

@@ -18,6 +18,7 @@ const messages = defineMessages({
   explore: { id: 'explore.title', defaultMessage: 'Explore' },
   local: { id: 'tabs_bar.local_timeline', defaultMessage: 'Local' },
   federated: { id: 'tabs_bar.federated_timeline', defaultMessage: 'Federated' },
+  area: { id: 'tabs_bar.area_timeline', defaultMessage: 'Area' },
   direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' },
   favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
@@ -69,6 +70,7 @@ class NavigationPanel extends React.Component {
           <>
             <ColumnLink transparent to='/public/local' icon='users' text={intl.formatMessage(messages.local)} />
             <ColumnLink transparent exact to='/public' icon='globe' text={intl.formatMessage(messages.federated)} />
+            <ColumnLink transparent to='/areas' icon='map-marker' text={intl.formatMessage(messages.area)} />
           </>
         )}
 

app/javascript/mastodon/locales/en.json

@@ -201,6 +201,7 @@
   "dismissable_banner.explore_statuses": "These posts from this and other servers in the decentralized network are gaining traction on this server right now.",
   "dismissable_banner.explore_tags": "These hashtags are gaining traction among people on this and other servers of the decentralized network right now.",
   "dismissable_banner.public_timeline": "These are the most recent public posts from people on this and other servers of the decentralized network that this server knows about.",
+  "dismissable_banner.area_timeline": "These are the most recent public posts from people whose accounts are hosted by instances in apecified area.",
   "embed.instructions": "Embed this post on your website by copying the code below.",
   "embed.preview": "Here is what it will look like:",
   "emoji_button.activity": "Activity",

app/javascript/mastodon/locales/ja.json

@@ -202,6 +202,7 @@
   "dismissable_banner.explore_statuses": "分散型ネットワーク内の他のサーバーのこれらの投稿は現在このサーバー上で注目されています。",
   "dismissable_banner.explore_tags": "これらのハッシュタグは現在分散型ネットワークの他のサーバーの人たちに話されています。",
   "dismissable_banner.public_timeline": "これらの投稿はこのサーバーが知っている分散型ネットワークの他のサーバーの人たちの最新の公開投稿です。",
+  "dismissable_banner.area_timeline": "これらの投稿は指定した地域の他のサーバーの人たちの最新の公開投稿です。",
   "embed.instructions": "下記のコードをコピーしてウェブサイトに埋め込みます。",
   "embed.preview": "表示例:",
   "emoji_button.activity": "活動",

app/javascript/styles/custom.scss

@@ -308,15 +308,15 @@
 }
 
 .setting-select {
-  color: #9baec8;
+  color: $primary-text-color;
   border: none;
-  border-bottom: 2px solid #9baec8;
+  border-bottom: 2px solid $classic-primary-color;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: block;
   font-family: inherit;
   margin-bottom: 10px;
   padding: 7px 0;
   width: 100%;
-  background: #393f4f;
+  background: lighten($ui-base-color, 8%);
 }

config/routes.rb

@@ -28,6 +28,8 @@
     /domain_blocks
     /mutes
     /statuses/(*any)
+    /areas
+    /areas/(*any)
   ).freeze
 
   root 'home#index'

spec/requests/area_pages_spec.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+describe 'Area url shown' do
+    describe 'with no area id' do
+        it 'shows page' do
+            get '/areas'
+
+            expect(response).to have_http_status(200)
+        end
+    end
+
+    describe 'with area id' do
+        it 'shows page' do
+            get '/areas/foofoo'
+
+            expect(response).to have_http_status(200)
+        end
+    end
+end