mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix tabs bar bottom

Browse Source
This commit is contained in:
YoheiZuho 2024-01-02 10:35:47 +00:00
parent 7183eeb36b
commit 80980bb5d4
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/mastodon/features/ui/components/columns_area.jsx
View File

@ -34,6 +34,8 @@ import { Link } from 'react-router-dom';
import { Icon } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon';
import TabsBar from './tabs_bar'; import TabsBar from './tabs_bar';
import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
const componentMap = { const componentMap = {
'COMPOSE': Compose, 'COMPOSE': Compose,
'HOME': HomeTimeline, 'HOME': HomeTimeline,
@ -164,12 +166,12 @@ export default class ColumnsArea extends ImmutablePureComponent {
</div> </div>
<div className='columns-area__panels__main timeline'> <div className='columns-area__panels__main timeline'>
<div className='tabs-bar__wrapper'><div id='tabs-bar__portal' /></div> <div className='tabs-bar__wrapper'><TabsBarPortal /></div>
<div className='columns-area columns-area--mobile'>{children}</div> <div className='columns-area columns-area--mobile'>{children}</div>
</div> </div>
<div className='columns-area__panels__main navber'> <div className='columns-area__panels__main navber'>
{location.pathname !== '/publish' && <Link to='/publish' className='button bottom_right'><Icon id='pencil' fixedWidth /></Link>} {location.pathname !== '/publish' && <Link to='/publish' icon='Edit' className='button bottom_right'><EditIcon fill="white"/></Link>}
<TabsBar key='tabs' /> <TabsBar key='tabs' />
</div> </div>
@ -178,7 +180,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
<NavigationPanel /> <NavigationPanel />
</div> </div>
</div> </div>
</div> </div>
); );
} else { } else {

12
app/javascript/mastodon/features/ui/components/tabs_bar.jsx
View File

@ -4,6 +4,10 @@ import { defineMessages, injectIntl } from 'react-intl';
import ColumnLink from './column_link'; import ColumnLink from './column_link';
import NotificationsCounterIcon from './notifications_counter_icon'; import NotificationsCounterIcon from './notifications_counter_icon';
import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
const messages = defineMessages({ const messages = defineMessages({
home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
@ -41,11 +45,11 @@ class TabsBar extends Component {
return ( return (
<div className='tabs-bar__wrapper'> <div className='tabs-bar__wrapper'>
<ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} /> <ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} text={intl.formatMessage(messages.home)} />
<ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} /> <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
<ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} /> <ColumnLink transparent to='/public/local' iconComponent={PublicIcon} isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
<ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} /> <ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
<ColumnLink transparent to='/getting-started' icon='bars' text={intl.formatMessage(messages.gettingStarted)} /> <ColumnLink transparent to='/getting-started' icon='bars' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.gettingStarted)} />
</div> </div>
); );
} }

4
app/javascript/styles/plugin.scss
View File

@ -18,6 +18,10 @@
display: none; display: none;
} }
.column-link--transparent{
justify-content: center;
}
@media screen and (max-width: 630px) { @media screen and (max-width: 630px) {
.tab-ber-bottom .timeline{ .tab-ber-bottom .timeline{
width:100%; width:100%;