Change design of new list form in web UI (#19801)
Eugen Rochko
GitHub
parent
7c32172454
commit
786b5a7c49
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
import { changeListEditorTitle, submitListEditor } from 'mastodon/actions/lists';
|
||||
import Button from 'mastodon/components/button';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
const messages = defineMessages({
|
||||
|
|
@ -65,10 +65,9 @@ class NewListForm extends React.PureComponent {
|
|||
/>
|
||||
</label>
|
||||
|
||||
<IconButton
|
||||
<Button
|
||||
disabled={disabled || !value}
|
||||
icon='plus'
|
||||
title={title}
|
||||
text={title}
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { fetchLists } from 'mastodon/actions/lists';
|
||||
import ColumnBackButtonSlim from 'mastodon/components/column_back_button_slim';
|
||||
import LoadingIndicator from 'mastodon/components/loading_indicator';
|
||||
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 ColumnSubheading from 'mastodon/features/ui/components/column_subheading';
|
||||
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." />;
|
||||
|
||||
return (
|
||||
<Column bindToDocument={!multiColumn} icon='list-ul' heading={intl.formatMessage(messages.heading)}>
|
||||
<ColumnBackButtonSlim />
|
||||
<Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.heading)}>
|
||||
<ColumnHeader title={intl.formatMessage(messages.heading)} icon='list-ul' multiColumn={multiColumn} showBackButton />
|
||||
|
||||
<NewListForm />
|
||||
|
||||
|
|
|
|||
|
|
@ -3200,23 +3200,49 @@ $ui-header-height: 55px;
|
|||
.setting-text {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: $darker-text-color;
|
||||
background: transparent;
|
||||
padding: 7px 0;
|
||||
color: $inverted-text-color;
|
||||
background: $white;
|
||||
padding: 7px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
border: 0;
|
||||
border-bottom: 2px solid $ui-primary-color;
|
||||
outline: 0;
|
||||
line-height: 22px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $white;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $primary-text-color;
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
&:focus {
|
||||
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) {
|
||||
|
|
@ -5503,59 +5529,6 @@ a.status-card.compact:hover {
|
|||
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 {
|
||||
display: block;
|
||||
color: $inverted-text-color;
|
||||
|
|
@ -5564,6 +5537,14 @@ a.status-card.compact:hover {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
min-height: 100px;
|
||||
max-height: 50vh;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 24px;
|
||||
|
|
@ -6765,9 +6746,9 @@ noscript {
|
|||
|
||||
.column-inline-form {
|
||||
padding: 15px;
|
||||
padding-right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
||||
|
|
@ -6776,17 +6757,8 @@ noscript {
|
|||
|
||||
input {
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__backdrop {
|
||||
|
|
|
|||
Loading…
Reference in New Issue