me
/
glitchier-soc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
th-downstream
Eugen Rochko 2 years ago committed by GitHub
parent 7c32172454
commit 786b5a7c49
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 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 View File

@ -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>

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

@ -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 />

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

@ -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 {

Write Preview
Loading…
Cancel
Save