aiden
/
mastodon
mirror of https://github.com/mastodon/mastodon
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change design of new list form in web UI (#19801)

Browse Source
pull/19814/head
Eugen Rochko 3 years ago committed by GitHub
parent 18ac5f1cc8
commit ca8d52c2a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 118 deletions
Show Stats Download Patch File Download Diff File

34
app/javascript/mastodon/components/setting_text.js
Unescape Escape View File

@ -1,34 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
export default class SettingText extends React.PureComponent {
static propTypes = {
settings: ImmutablePropTypes.map.isRequired,
settingKey: PropTypes.array.isRequired,
label: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
};
handleChange = (e) => {
this.props.onChange(this.props.settingKey, e.target.value);
}
render () {
const { settings, settingKey, label } = this.props;
return (
<label>
<span style={{ display: 'none' }}>{label}</span>
<input
className='setting-text'
value={settings.getIn(settingKey)}
onChange={this.handleChange}
placeholder={label}
/>
</label>
);
}
}

9
app/javascript/mastodon/features/lists/components/new_list_form.js
Unescape Escape View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { changeListEditorTitle, submitListEditor } from '../../../actions/lists'; import { changeListEditorTitle, submitListEditor } from 'mastodon/actions/lists';
import IconButton from '../../../components/icon_button'; import Button from 'mastodon/components/button';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -65,10 +65,9 @@ class NewListForm extends React.PureComponent {
/> />
</label> </label>
<IconButton <Button
disabled={disabled || !value} disabled={disabled || !value}
icon='plus' text={title}
title={title}
onClick={this.handleClick} onClick={this.handleClick}
/> />
</form> </form>

8
app/javascript/mastodon/features/lists/index.js
Unescape Escape View File

@ -7,10 +7,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { fetchLists } from 'mastodon/actions/lists'; import { fetchLists } from 'mastodon/actions/lists';
import ColumnBackButtonSlim from 'mastodon/components/column_back_button_slim';
import LoadingIndicator from 'mastodon/components/loading_indicator'; import LoadingIndicator from 'mastodon/components/loading_indicator';
import ScrollableList from 'mastodon/components/scrollable_list'; import ScrollableList from 'mastodon/components/scrollable_list';
import Column from 'mastodon/features/ui/components/column'; import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
import ColumnLink from 'mastodon/features/ui/components/column_link'; import ColumnLink from 'mastodon/features/ui/components/column_link';
import ColumnSubheading from 'mastodon/features/ui/components/column_subheading'; import ColumnSubheading from 'mastodon/features/ui/components/column_subheading';
import NewListForm from './components/new_list_form'; import NewListForm from './components/new_list_form';
@ -62,8 +62,8 @@ class Lists extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />; const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
return ( return (
<Column bindToDocument={!multiColumn} icon='list-ul' heading={intl.formatMessage(messages.heading)}> <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnHeader title={intl.formatMessage(messages.heading)} icon='list-ul' multiColumn={multiColumn} showBackButton />
<NewListForm /> <NewListForm />

122
app/javascript/styles/mastodon/components.scss
Unescape Escape View File

@ -3200,23 +3200,49 @@ $ui-header-height: 55px;
.setting-text { .setting-text {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: 100%;
margin: 0; margin: 0;
color: $darker-text-color; color: $inverted-text-color;
background: transparent; background: $white;
padding: 7px 0; padding: 7px 10px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
resize: vertical; line-height: 22px;
border: 0; border-radius: 4px;
border-bottom: 2px solid $ui-primary-color; border: 1px solid $white;
outline: 0;
&:focus, &:focus {
&:active {
color: $primary-text-color;
border-bottom-color: $ui-highlight-color;
outline: 0; outline: 0;
border-color: lighten($ui-highlight-color, 12%);
}
&__wrapper {
background: $white;
border: 1px solid $ui-secondary-color;
margin-bottom: 10px;
border-radius: 4px;
.setting-text {
border: 0;
margin-bottom: 0;
border-radius: 0;
&:focus {
border: 0;
}
}
&__modifiers {
color: $inverted-text-color;
font-family: inherit;
font-size: 14px;
background: $white;
}
}
&__toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@ -5503,59 +5529,6 @@ a.status-card.compact:hover {
margin-bottom: 20px; margin-bottom: 20px;
} }
.setting-text {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
color: $inverted-text-color;
background: $white;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: none;
outline: 0;
border-radius: 4px;
border: 1px solid $ui-secondary-color;
min-height: 100px;
max-height: 50vh;
margin-bottom: 10px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
}
&__wrapper {
background: $white;
border: 1px solid $ui-secondary-color;
margin-bottom: 10px;
border-radius: 4px;
.setting-text {
border: 0;
margin-bottom: 0;
border-radius: 0;
&:focus {
border: 0;
}
}
&__modifiers {
color: $inverted-text-color;
font-family: inherit;
font-size: 14px;
background: $white;
}
}
&__toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
}
.setting-text-label { .setting-text-label {
display: block; display: block;
color: $inverted-text-color; color: $inverted-text-color;
@ -5564,6 +5537,14 @@ a.status-card.compact:hover {
margin-bottom: 10px; margin-bottom: 10px;
} }
.setting-text {
width: 100%;
resize: none;
min-height: 100px;
max-height: 50vh;
border: 0;
}
.setting-toggle { .setting-toggle {
margin-top: 20px; margin-top: 20px;
margin-bottom: 24px; margin-bottom: 24px;
@ -6765,9 +6746,9 @@ noscript {
.column-inline-form { .column-inline-form {
padding: 15px; padding: 15px;
padding-right: 0;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: 15px;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
@ -6776,17 +6757,8 @@ noscript {
input { input {
width: 100%; width: 100%;
&:focus {
outline: 0;
}
} }
} }
.icon-button {
flex: 0 0 auto;
margin: 0 10px;
}
} }
.drawer__backdrop { .drawer__backdrop {

Write Preview
Loading…
Cancel
Save